From f9f029445c6e29fc9369f936514f46b3d43e87e3 Mon Sep 17 00:00:00 2001 From: RENU KUMARI PRAJAPATI <152794326+Renu-code123@users.noreply.github.com> Date: Sun, 21 Sep 2025 18:29:33 +0530 Subject: [PATCH 1/4] Update Footer.jsx --- frontend/src/components/Footer/Footer.jsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/src/components/Footer/Footer.jsx b/frontend/src/components/Footer/Footer.jsx index 6984d8c..fa45bf5 100644 --- a/frontend/src/components/Footer/Footer.jsx +++ b/frontend/src/components/Footer/Footer.jsx @@ -14,6 +14,7 @@ import TwitterIcon from '../Icons/TwitterIcon'; import LinkedInIcon from '../Icons/LinkedInIcon'; import GithubIcon from '../Icons/GithubIcon'; import FooterLogo from './FooterLogo'; +import NewsletterSubscription from '../Newsletter/NewsletterSubscription'; const Footer = () => { return ( @@ -59,6 +60,10 @@ const Footer = () => {
  • Contact@foodie.com
    • + {/* Newsletter Subscription */} +
    + +
    From 2ad59918285090f63252fbf250f71d622e0a7b20 Mon Sep 17 00:00:00 2001 From: RENU KUMARI PRAJAPATI <152794326+Renu-code123@users.noreply.github.com> Date: Sun, 21 Sep 2025 18:37:08 +0530 Subject: [PATCH 2/4] Update Footer.css --- frontend/src/components/Footer/Footer.css | 31 ++++++++++++++++++----- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/Footer/Footer.css b/frontend/src/components/Footer/Footer.css index 2e3be09..2283c65 100644 --- a/frontend/src/components/Footer/Footer.css +++ b/frontend/src/components/Footer/Footer.css @@ -15,11 +15,10 @@ .footer-content{ width: 100%; display: grid; - grid-template-columns: 2fr 1fr 1fr; - gap: 80px; + grid-template-columns: 2fr 1fr 1fr 1.5fr; + gap: 60px; } - -.footer-content-left, .footer-content-right, .footer-content-center{ + .footer-content-left, .footer-content-right, .footer-content-center, .footer-content-newsletter{ display: flex; flex-direction: column; align-items: start; @@ -27,7 +26,7 @@ color: rgb(233, 207, 207); } -.footer-content-left li, .footer-content-right li, .footer-content-center li{ + .footer-content-left li, .footer-content-right li, .footer-content-center li, .footer-content-newsletter li{ list-style-type: none; margin-bottom: 10px; cursor: pointer; @@ -117,7 +116,21 @@ .footer p { color: rgb(233, 207, 207); } - +/* Tablet Layout */ +@media (max-width: 1024px) and (min-width: 751px) { + .footer-content { + grid-template-columns: 1.5fr 1fr 1fr; + gap: 40px; + } + .footer-content-newsletter { + grid-column: 1 / -1; + align-items: center; + text-align: center; + margin-top: 20px; + padding-top: 20px; + border-top: 1px solid #444; + } +} @media (max-width:750px){ .footer-content{ display: flex; @@ -127,6 +140,10 @@ .footer-copyright{ text-align: center; } + .footer-content-newsletter { + align-items: center; + text-align: center; + } } .nav-link { @@ -148,4 +165,4 @@ .logo-text { fill: rgb(243, 113, 38); -} \ No newline at end of file +} From abea31c235e50c409f0fb256f427c9d66fe0d38b Mon Sep 17 00:00:00 2001 From: RENU KUMARI PRAJAPATI <152794326+Renu-code123@users.noreply.github.com> Date: Sun, 21 Sep 2025 18:42:04 +0530 Subject: [PATCH 3/4] Create NewsletterSubscription.css --- .../Newsletter/NewsletterSubscription.css | 237 ++++++++++++++++++ 1 file changed, 237 insertions(+) create mode 100644 frontend/src/components/Newsletter/NewsletterSubscription.css diff --git a/frontend/src/components/Newsletter/NewsletterSubscription.css b/frontend/src/components/Newsletter/NewsletterSubscription.css new file mode 100644 index 0000000..bf85f5e --- /dev/null +++ b/frontend/src/components/Newsletter/NewsletterSubscription.css @@ -0,0 +1,237 @@ +.newsletter-section { + display: flex; + flex-direction: column; + align-items: start; + gap: 20px; + color: rgb(233, 207, 207); +} + +.newsletter-title { + position: relative; + display: inline-block; + color: white; + font-size: 1.5rem; + font-weight: 600; +} + +.newsletter-title::after { + content: ""; + position: absolute; + left: 0; + bottom: -5px; + width: 100%; + height: 3px; + background-color: rgb(243, 113, 38); + transform: scaleX(0); + transform-origin: left; + transition: transform 0.5s ease; +} + +.newsletter-title:hover::after { + transform: scaleX(1); +} + +.newsletter-title:hover { + -webkit-text-fill-color: rgb(243, 113, 38); +} + +.newsletter-description { + color: rgb(233, 207, 207); + font-size: 0.9rem; + line-height: 1.5; + margin-bottom: 10px; +} + +.newsletter-form { + display: flex; + flex-direction: column; + gap: 15px; + width: 100%; + max-width: 280px; +} + +.newsletter-input-container { + position: relative; + display: flex; + align-items: center; +} + +.newsletter-input-icon { + position: absolute; + left: 12px; + color: #888; + font-size: 1.1rem; + z-index: 1; +} + +.newsletter-input { + width: 100%; + padding: 12px 15px 12px 40px; + border: 2px solid #444; + border-radius: 25px; + background-color: #2a2a2a; + color: white; + font-size: 0.9rem; + outline: none; + transition: all 0.3s ease; +} + +.newsletter-input::placeholder { + color: #888; +} + +.newsletter-input:focus { + border-color: rgb(243, 113, 38); + box-shadow: 0 0 10px rgba(243, 113, 38, 0.3); + background-color: #333; +} + +.newsletter-input:focus ~ .newsletter-input-icon, +.newsletter-input:focus + .newsletter-input-icon { + color: rgb(243, 113, 38); +} + +.newsletter-input.error { + border-color: #ff4444; + box-shadow: 0 0 10px rgba(255, 68, 68, 0.3); +} + +.newsletter-input:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.newsletter-button { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 12px 20px; + background: linear-gradient(135deg, rgb(243, 113, 38), rgb(255, 140, 60)); + color: white; + border: none; + border-radius: 25px; + font-size: 0.9rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.newsletter-button:hover { + background: linear-gradient(135deg, rgb(220, 100, 35), rgb(243, 113, 38)); + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(243, 113, 38, 0.4); +} + +.newsletter-button:active { + transform: translateY(0); +} + +.newsletter-button:disabled { + opacity: 0.7; + cursor: not-allowed; + transform: none; +} + +.newsletter-button-icon { + font-size: 1.1rem; +} + +.loading-spinner { + width: 16px; + height: 16px; + border: 2px solid transparent; + border-top: 2px solid white; + border-radius: 50%; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.newsletter-message { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 15px; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 500; + animation: slideIn 0.3s ease-out; +} + +.newsletter-message.success { + background-color: rgba(34, 197, 94, 0.15); + border: 1px solid rgba(34, 197, 94, 0.3); + color: #22c55e; +} + +.newsletter-message.error { + background-color: rgba(239, 68, 68, 0.15); + border: 1px solid rgba(239, 68, 68, 0.3); + color: #ef4444; +} + +.message-icon { + font-size: 1rem; + flex-shrink: 0; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.newsletter-privacy { + color: #888; + font-size: 0.75rem; + margin-top: 5px; +} + +/* Responsive Design */ +@media (max-width: 750px) { + .newsletter-section { + align-items: center; + text-align: center; + } + + .newsletter-form { + max-width: 100%; + width: 100%; + } + + .newsletter-title { + font-size: 1.3rem; + } + + .newsletter-description { + font-size: 0.85rem; + } +} + +@media (max-width: 480px) { + .newsletter-input { + font-size: 0.85rem; + padding: 10px 12px 10px 35px; + } + + .newsletter-button { + font-size: 0.85rem; + padding: 10px 16px; + } + + .newsletter-input-icon { + font-size: 1rem; + left: 10px; + } +} From cc78c08e9f7a5d1eea9817be5dfef3294234db07 Mon Sep 17 00:00:00 2001 From: RENU KUMARI PRAJAPATI <152794326+Renu-code123@users.noreply.github.com> Date: Sun, 21 Sep 2025 18:42:58 +0530 Subject: [PATCH 4/4] Create NewsletterSubscription.jsx --- .../Newsletter/NewsletterSubscription.jsx | 115 ++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 frontend/src/components/Newsletter/NewsletterSubscription.jsx diff --git a/frontend/src/components/Newsletter/NewsletterSubscription.jsx b/frontend/src/components/Newsletter/NewsletterSubscription.jsx new file mode 100644 index 0000000..9005de0 --- /dev/null +++ b/frontend/src/components/Newsletter/NewsletterSubscription.jsx @@ -0,0 +1,115 @@ +import React, { useState } from 'react'; +import { IoIosMail } from "react-icons/io"; +import { BiMailSend } from "react-icons/bi"; +import { FaCheck } from "react-icons/fa"; +import { MdError } from "react-icons/md"; +import './NewsletterSubscription.css'; + +const NewsletterSubscription = () => { + const [email, setEmail] = useState(''); + const [isLoading, setIsLoading] = useState(false); + const [status, setStatus] = useState(''); // 'success', 'error', '' + const [message, setMessage] = useState(''); + + const validateEmail = (email) => { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailRegex.test(email); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + + if (!email.trim()) { + setStatus('error'); + setMessage('Please enter your email address'); + return; + } + + if (!validateEmail(email)) { + setStatus('error'); + setMessage('Please enter a valid email address'); + return; + } + + setIsLoading(true); + setStatus(''); + setMessage(''); + + try { + // Simulate API call - replace with actual backend endpoint + await new Promise(resolve => setTimeout(resolve, 1500)); + + // For now, just show success message + setStatus('success'); + setMessage('Thank you for subscribing! Check your email for confirmation.'); + setEmail(''); + + // Hide success message after 5 seconds + setTimeout(() => { + setStatus(''); + setMessage(''); + }, 5000); + } catch (error) { + setStatus('error'); + setMessage('Something went wrong. Please try again later.'); + } finally { + setIsLoading(false); + } + }; + + return ( +
    +

    Stay Updated

    +

    + Subscribe to our newsletter and get the latest updates, exclusive offers, and delicious deals delivered to your inbox! +

    + +
    +
    + + setEmail(e.target.value)} + className={`newsletter-input ${status === 'error' ? 'error' : ''}`} + disabled={isLoading} + /> +
    + + +
    + + {/* Status Messages */} + {message && ( +
    + {status === 'success' ? ( + + ) : ( + + )} + {message} +
    + )} + +

    + We respect your privacy. Unsubscribe at any time. +

    +
    + ); +}; + +export default NewsletterSubscription;