diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e7dd85fe..af5377c2 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,15 +10,16 @@ "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", - "@mui/material": "^7.3.2", - "axios": "^1.11.0", + "@mui/material": "^7.3.4", + "aos": "^2.3.4", + "axios": "^1.12.2", "gsap": "^3.13.0", "html2pdf.js": "^0.10.3", "leaflet": "^1.9.4", "lucide-react": "^0.525.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-hot-toast": "^2.5.2", + "react-hot-toast": "^2.6.0", "react-icons": "^5.5.0", "react-leaflet": "^4.2.1", "react-router-dom": "^6.30.1", @@ -29,6 +30,7 @@ }, "devDependencies": { "@eslint/js": "^9.9.0", + "@types/aos": "^3.0.7", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.7.0", @@ -1142,9 +1144,9 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.2.tgz", - "integrity": "sha512-AOyfHjyDKVPGJJFtxOlept3EYEdLoar/RvssBTWVAvDJGIE676dLi2oT/Kx+FoVXFoA/JdV7DEMq/BVWV3KHRw==", + "version": "7.3.4", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.4.tgz", + "integrity": "sha512-BIktMapG3r4iXwIhYNpvk97ZfYWTreBBQTWjQKbNbzI64+ULHfYavQEX2w99aSWHS58DvXESWIgbD9adKcUOBw==", "license": "MIT", "funding": { "type": "opencollective", @@ -1152,16 +1154,16 @@ } }, "node_modules/@mui/material": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.2.tgz", - "integrity": "sha512-qXvbnawQhqUVfH1LMgMaiytP+ZpGoYhnGl7yYq2x57GYzcFL/iPzSZ3L30tlbwEjSVKNYcbiKO8tANR1tadjUg==", + "version": "7.3.4", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.4.tgz", + "integrity": "sha512-gEQL9pbJZZHT7lYJBKQCS723v1MGys2IFc94COXbUIyCTWa+qC77a7hUax4Yjd5ggEm35dk4AyYABpKKWC4MLw==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.28.3", - "@mui/core-downloads-tracker": "^7.3.2", - "@mui/system": "^7.3.2", - "@mui/types": "^7.4.6", - "@mui/utils": "^7.3.2", + "@babel/runtime": "^7.28.4", + "@mui/core-downloads-tracker": "^7.3.4", + "@mui/system": "^7.3.3", + "@mui/types": "^7.4.7", + "@mui/utils": "^7.3.3", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.12", "clsx": "^2.1.1", @@ -1180,7 +1182,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^7.3.2", + "@mui/material-pigment-css": "^7.3.3", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -1201,13 +1203,13 @@ } }, "node_modules/@mui/private-theming": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.2.tgz", - "integrity": "sha512-ha7mFoOyZGJr75xeiO9lugS3joRROjc8tG1u4P50dH0KR7bwhHznVMcYg7MouochUy0OxooJm/OOSpJ7gKcMvg==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.3.tgz", + "integrity": "sha512-OJM+9nj5JIyPUvsZ5ZjaeC9PfktmK+W5YaVLToLR8L0lB/DGmv1gcKE43ssNLSvpoW71Hct0necfade6+kW3zQ==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.28.3", - "@mui/utils": "^7.3.2", + "@babel/runtime": "^7.28.4", + "@mui/utils": "^7.3.3", "prop-types": "^15.8.1" }, "engines": { @@ -1228,12 +1230,12 @@ } }, "node_modules/@mui/styled-engine": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.2.tgz", - "integrity": "sha512-PkJzW+mTaek4e0nPYZ6qLnW5RGa0KN+eRTf5FA2nc7cFZTeM+qebmGibaTLrgQBy3UpcpemaqfzToBNkzuxqew==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.3.tgz", + "integrity": "sha512-CmFxvRJIBCEaWdilhXMw/5wFJ1+FT9f3xt+m2pPXhHPeVIbBg9MnMvNSJjdALvnQJMPw8jLhrUtXmN7QAZV2fw==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.28.3", + "@babel/runtime": "^7.28.4", "@emotion/cache": "^11.14.0", "@emotion/serialize": "^1.3.3", "@emotion/sheet": "^1.4.0", @@ -1262,16 +1264,16 @@ } }, "node_modules/@mui/system": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.2.tgz", - "integrity": "sha512-9d8JEvZW+H6cVkaZ+FK56R53vkJe3HsTpcjMUtH8v1xK6Y1TjzHdZ7Jck02mGXJsE6MQGWVs3ogRHTQmS9Q/rA==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.3.tgz", + "integrity": "sha512-Lqq3emZr5IzRLKaHPuMaLBDVaGvxoh6z7HMWd1RPKawBM5uMRaQ4ImsmmgXWtwJdfZux5eugfDhXJUo2mliS8Q==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.28.3", - "@mui/private-theming": "^7.3.2", - "@mui/styled-engine": "^7.3.2", - "@mui/types": "^7.4.6", - "@mui/utils": "^7.3.2", + "@babel/runtime": "^7.28.4", + "@mui/private-theming": "^7.3.3", + "@mui/styled-engine": "^7.3.3", + "@mui/types": "^7.4.7", + "@mui/utils": "^7.3.3", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -1302,12 +1304,12 @@ } }, "node_modules/@mui/types": { - "version": "7.4.6", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.6.tgz", - "integrity": "sha512-NVBbIw+4CDMMppNamVxyTccNv0WxtDb7motWDlMeSC8Oy95saj1TIZMGynPpFLePt3yOD8TskzumeqORCgRGWw==", + "version": "7.4.7", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.7.tgz", + "integrity": "sha512-8vVje9rdEr1rY8oIkYgP+Su5Kwl6ik7O3jQ0wl78JGSmiZhRHV+vkjooGdKD8pbtZbutXFVTWQYshu2b3sG9zw==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.28.3" + "@babel/runtime": "^7.28.4" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -1319,13 +1321,13 @@ } }, "node_modules/@mui/utils": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.2.tgz", - "integrity": "sha512-4DMWQGenOdLnM3y/SdFQFwKsCLM+mqxzvoWp9+x2XdEzXapkznauHLiXtSohHs/mc0+5/9UACt1GdugCX2te5g==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.3.tgz", + "integrity": "sha512-kwNAUh7bLZ7mRz9JZ+6qfRnnxbE4Zuc+RzXnhSpRSxjTlSTj7b4JxRLXpG+MVtPVtqks5k/XC8No1Vs3x4Z2gg==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.28.3", - "@mui/types": "^7.4.6", + "@babel/runtime": "^7.28.4", + "@mui/types": "^7.4.7", "@types/prop-types": "^15.7.15", "clsx": "^2.1.1", "prop-types": "^15.8.1", @@ -1658,6 +1660,13 @@ "win32" ] }, + "node_modules/@types/aos": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@types/aos/-/aos-3.0.7.tgz", + "integrity": "sha512-sEhyFqvKauUJZDbvAB3Pggynrq6g+2PS4XB3tmUr+mDL1gfDJnwslUC4QQ7/l8UD+LWpr3RxZVR/rHoZrLqZVg==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -1854,6 +1863,17 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/aos": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz", + "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==", + "license": "MIT", + "dependencies": { + "classlist-polyfill": "^1.0.3", + "lodash.debounce": "^4.0.6", + "lodash.throttle": "^4.0.1" + } + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -2244,6 +2264,12 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/classlist-polyfill": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz", + "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==", + "license": "Unlicense" + }, "node_modules/clsx": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", @@ -4136,6 +4162,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -4143,6 +4175,12 @@ "dev": true, "license": "MIT" }, + "node_modules/lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==", + "license": "MIT" + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -4669,9 +4707,9 @@ } }, "node_modules/react-is": { - "version": "19.1.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz", - "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==", + "version": "19.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.0.tgz", + "integrity": "sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==", "license": "MIT" }, "node_modules/react-leaflet": { diff --git a/frontend/package.json b/frontend/package.json index 712d2504..a78bb813 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,15 +12,16 @@ "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", - "@mui/material": "^7.3.2", - "axios": "^1.11.0", + "@mui/material": "^7.3.4", + "aos": "^2.3.4", + "axios": "^1.12.2", "gsap": "^3.13.0", "html2pdf.js": "^0.10.3", "leaflet": "^1.9.4", "lucide-react": "^0.525.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-hot-toast": "^2.5.2", + "react-hot-toast": "^2.6.0", "react-icons": "^5.5.0", "react-leaflet": "^4.2.1", "react-router-dom": "^6.30.1", @@ -31,6 +32,7 @@ }, "devDependencies": { "@eslint/js": "^9.9.0", + "@types/aos": "^3.0.7", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.7.0", diff --git a/frontend/public/Images/about-chef.jpg b/frontend/public/Images/about-chef.jpg new file mode 100644 index 00000000..f2a5944b Binary files /dev/null and b/frontend/public/Images/about-chef.jpg differ diff --git a/frontend/public/Images/hero-dark.jpg b/frontend/public/Images/hero-dark.jpg new file mode 100644 index 00000000..ae5b9fe1 Binary files /dev/null and b/frontend/public/Images/hero-dark.jpg differ diff --git a/frontend/public/Images/hero-light.jpg b/frontend/public/Images/hero-light.jpg new file mode 100644 index 00000000..0a80abc9 Binary files /dev/null and b/frontend/public/Images/hero-light.jpg differ diff --git a/frontend/src/components/Aboutus/AboutUs.css b/frontend/src/components/Aboutus/AboutUs.css index eaffaff0..f060bdef 100644 --- a/frontend/src/components/Aboutus/AboutUs.css +++ b/frontend/src/components/Aboutus/AboutUs.css @@ -1,266 +1,195 @@ -/* Base container */ -.about-container { - max-width: 1200px; - margin: 0 auto; - padding: 20px; - font-family: 'Segoe UI', 'Roboto', sans-serif; - min-height: 100vh; - transition: background 0.3s, color 0.3s; -} - -/* Light Theme */ -.about-container.light { - background-color: #ffffff; - color: #333; -} +/* FONT - Make sure Poppins is imported in your main index.html or CSS */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); -/* Dark Theme */ -.about-container.dark { - background-color: #121212; - color: #e0e0e0; +/* BASE STYLING */ +.about-us-page { + font-family: 'Poppins', sans-serif; + overflow-x: hidden; } -/* Hero Section */ -.hero-section { - text-align: center; - padding: 60px 20px; - border-radius: 20px; - margin-bottom: 40px; - color: white; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); - background: linear-gradient(135deg, #efae4e 0%, #e78207 100%); +.about-us-page.light { + --bg-color: #f4f7fc; + --text-color: #1a202c; + --card-bg: rgba(255, 255, 255, 0.8); + --border-color: rgba(0, 0, 0, 0.05); + --accent-color: #2563eb; + --hero-image: url('/images/hero-light.jpg'); } -.about-container.dark .hero-section { - background: linear-gradient(135deg, #ff8c00 0%, #cc5500 100%); +.about-us-page.dark { + --bg-color: #0f172a; /* Deep navy blue */ + --text-color: #e2e8f0; + --card-bg: rgba(26, 32, 44, 0.6); /* Translucent dark card */ + --border-color: rgba(255, 255, 255, 0.1); + --accent-color: #38bdf8; /* Vibrant sky blue */ + --hero-image: url('/images/hero-dark.jpg'); } -.about-title { - font-size: 3rem; - font-weight: 700; - margin-bottom: 20px; - text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6); - min-height: 90px; +/* Apply background to the body for a seamless feel */ +body { + background-color: var(--bg-color); } -.subtitle { - font-size: 1.2rem; - opacity: 0.9; - max-width: 600px; - margin: 0 auto; - color: rgb(244, 231, 134); +/* HERO SECTION */ +.about-hero { + height: 90vh; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #fff; + padding: 0 20px; + position: relative; + background-image: var(--hero-image); + background-size: cover; + background-position: center; + background-attachment: fixed; /* Parallax effect */ } -/* Marquee */ -.marquee { - overflow: hidden; - white-space: nowrap; - background: linear-gradient(90deg, #ff6b6b, #ffa726, #66bb6a, #42a5f5); - padding: 15px 0; - margin-bottom: 40px; - border-radius: 10px; - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); +.about-hero::before { /* Dark overlay for text contrast */ + content: ''; + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + background: linear-gradient(to top, var(--bg-color) 0%, rgba(0,0,0,0.6) 100%); } -.marquee-text { - display: inline-block; - animation: marquee 20s linear infinite; - font-weight: bold; - font-size: 1.1rem; - color: white; - text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); +.hero-content { + position: relative; + z-index: 1; } -@keyframes marquee { - 0% { - transform: translateX(100%); - } - - 100% { - transform: translateX(-100%); - } +.main-slogan { + font-size: clamp(2.5rem, 5vw, 4.5rem); + font-weight: 700; + margin: 0; + letter-spacing: -1px; } -/* Sections */ -.section { - padding: 40px; - border-radius: 15px; - margin-bottom: 30px; - transition: background 0.3s, border 0.3s; - display: flex; - flex-direction: column; +.main-slogan .highlight { + color: var(--accent-color); } - -#about-description{ - margin-left: 2rem; -} -.about-container.light .section { - background: #ffffff; - border: 1px solid #ddd; - box-shadow: 0 10px 30px rgba(108, 107, 107, 0.08); +.subtitle { + font-size: clamp(1rem, 2vw, 1.25rem); + color: #cbd5e1; + margin-top: 1rem; + max-width: 600px; } -.about-container.dark .section { - background: #1e1e1e; - border: 1px solid #444; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); +/* MAIN CONTENT - Overlapping Design */ +.main-content-wrapper { + background-color: var(--bg-color); + color: var(--text-color); + padding: 5rem 2rem; + margin-top: -10vh; /* Pulls content up over the hero image */ + position: relative; + z-index: 2; + border-top-left-radius: 40px; + border-top-right-radius: 40px; } .section-title { - font-size: 2.2rem; - margin-bottom: 20px; - font-weight: 600; - position: relative; - padding-bottom: 10px; - text-align: center; - color:#274C77; -} - -.section-title::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 50px; - height: 3px; - background: linear-gradient(90deg, #667eea, #764ba2); - border-radius: 2px; + font-size: 2.5rem; + font-weight: 700; + text-align: center; + margin-bottom: 3rem; + color: var(--text-color); } -.about-text { - font-size: 1.1rem; - line-height: 1.8; - text-align: justify; - max-width: 800px; +/* ABOUT SECTION (Two Columns) */ +.about-section { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + gap: 3rem; + max-width: 1100px; + margin: 0 auto 6rem auto; } -p.about-text { - margin: 0; +.image-column img { + width: 100%; + border-radius: 20px; + box-shadow: 0 20px 40px rgba(0,0,0,0.2); } -/* Categories */ -.categories-list { - display: flex; - flex-wrap: wrap; - justify-content: center; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 20px; - margin-top: 30px; +.text-column p { + font-size: 1.1rem; + line-height: 1.8; + color: #94a3b8; } -.category-card { - padding: 30px 20px; - border-radius: 15px; - font-weight: 600; - text-align: center; - transition: all 0.3s ease; - cursor: pointer; - font-size: 1.1rem; - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); - text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); - /* keeps readable over gradients */ +/* CATEGORIES - Glassmorphism Effect */ +.categories-section { + max-width: 1100px; + margin: 0 auto 6rem auto; } -.about-container.light .category-card { - color: #222; - /* dark text for light theme */ +.categories-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 1.5rem; } -.about-container.dark .category-card { - color: #fff; - /* white text for dark theme */ +.category-card { + background: var(--card-bg); + border: 1px solid var(--border-color); + border-radius: 15px; + padding: 1.5rem; + text-align: center; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + transition: transform 0.3s ease, background 0.3s ease; + cursor: pointer; } .category-card:hover { - transform: translateY(-8px); - box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35); + transform: translateY(-10px); + background: rgba(56, 189, 248, 0.1); + border-color: var(--accent-color); } -/* Flow Diagram */ -.flow-diagram { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - gap: 15px; - padding: 20px; -} - -.flow-step { - padding: 20px 30px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border-radius: 50px; - text-align: center; - font-weight: 600; - box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3); - transition: transform 0.3s ease; - min-width: 140px; -} - -.flow-step:hover { - transform: scale(1.05); +.category-icon { + font-size: 2.5rem; + display: block; + margin-bottom: 0.5rem; } -.flow-arrow { - font-size: 2rem; - font-weight: bold; - color: #667eea; +.category-name { + font-weight: 600; } - -/* Payment Section */ -.payment-section { - text-align: center; +/* HOW IT WORKS */ +.how-it-works-section { + max-width: 1200px; + margin: 0 auto; } - -.payment-text { - margin: 0 auto !important; - font-size: 1.2rem; - padding: 20px; - border-radius: 15px; - border: 2px dashed #667eea; +.steps-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + align-items: start; + text-align: center; + gap: 2rem; } -.about-container.light .payment-text { - background: #f8f9fa; - color: #555; +.step-card { padding: 1rem; } +.step-icon { + font-size: 2.5rem; + color: var(--accent-color); + margin-bottom: 1rem; } +.step-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; } +.step-description { font-size: 0.9rem; color: #94a3b8; } +.step-arrow { display: none; } -.about-container.dark .payment-text { - background: #2c2c2c; - color: #ddd; +/* RESPONSIVE DESIGN */ +@media (min-width: 992px) { + .steps-container { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; } + .step-arrow { display: flex; align-items: center; height: 100%; font-size: 1.5rem; color: var(--border-color); padding-top: 3rem;} } -/* Responsive */ @media (max-width: 768px) { - .about-title { - font-size: 2rem; - } - - .flow-diagram { - display: block; - } - - .flow-arrow { - rotate: 90deg; - display: flex; - justify-content: center; - } - - .section { - padding: 25px; - } - - .section-title::after { - left: 50%; - transform: translateX(-50%); - } - - .categories-list { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - } + .main-content-wrapper { padding: 3rem 1rem; } + .about-section { grid-template-columns: 1fr; } } \ No newline at end of file diff --git a/frontend/src/components/Aboutus/Aboutus.jsx b/frontend/src/components/Aboutus/Aboutus.jsx index 19ea1555..36340713 100644 --- a/frontend/src/components/Aboutus/Aboutus.jsx +++ b/frontend/src/components/Aboutus/Aboutus.jsx @@ -1,95 +1,95 @@ -import React, { useEffect, useState, useContext } from "react"; +import React, { useEffect, useContext } from "react"; +import AOS from "aos"; import "./AboutUs.css"; import { ThemeContext } from "../context/ThemeContext"; const AboutUs = () => { - const slogan = "Delicious Food Delivered Fresh To Your Door!"; - const [text, setText] = useState(""); - const { theme } = useContext(ThemeContext); // ✅ use theme from context + const { theme } = useContext(ThemeContext); - useEffect(() => { - let index = 0; - const interval = setInterval(() => { - setText(slogan.slice(0, index + 1)); - index++; - if (index === slogan.length) clearInterval(interval); - }, 100); - return () => clearInterval(interval); - }, []); + useEffect(() => { + AOS.init({ + duration: 800, + once: true, + }); + }, []); - return ( -
- {/* Hero Section */} -
-

{text}

-

- Experience the finest cuisine with our premium food delivery service -

-
+ const categories = [ + { name: "Vegetarian", icon: "🥗" }, + { name: "Non-Veg", icon: "🍖" }, + { name: "Italian", icon: "🍝" }, + { name: "Chinese", icon: "🥟" }, + { name: "Desserts", icon: "🍰" }, + { name: "Main Course", icon: "🍽️" }, + ]; + + const howItWorks = [ + { icon: "fas fa-mobile-alt", title: "Browse", description: "Explore our diverse menu." }, + { icon: "fas fa-cart-plus", title: "Order", description: "Add favorites to your cart." }, + { icon: "fas fa-credit-card", title: "Pay", description: "Securely pay through multiple options." }, + { icon: "fas fa-shipping-fast", title: "Enjoy", description: "Get it delivered fresh and fast." }, + ]; - {/* Marquee */} -
-

-   🚚 Fast Delivery Guaranteed!   | -  💯 100% Satisfaction Promise!   | -  🍴 Fresh & Hygienic Ingredients!   | -  👨‍🍳 Authentic Recipes & Expert Chefs!   | -  🛡️ Safe & Secure Packaging!   | -  ⭐ Rated #1 by Our Happy Customers! -

-
+ return ( +
+ {/* Hero Section */} +
+
+

+ Good Food, Good Mood. +

+

+ The best meals from the finest chefs, delivered directly to you. +

+
+
- {/* About Us */} -
-

About Foodies

-

- At Foodies, we serve the best Veg, Non-Veg, Italian, Chinese, Desserts, and Main Courses. - Our focus is on taste, quality, and hygiene. We're passionate about bringing - you exceptional dining experiences right to your doorstep. Enjoy your favorite meals via our - intuitive app or website, crafted with love and delivered with care. -

-
+ {/* Main Content Body */} +
+ {/* About Section */} +
+
+ Chef preparing food +
+
+

Our Passion for Perfection

+

+ At Foodies, we believe food is an experience. We combine authentic recipes, the freshest ingredients, and a passion for cooking to create unforgettable meals. Our mission is to deliver not just food, but happiness. +

+
+
- {/* Categories */} -
-

Explore Our Categories

-
-
🥗 Vegetarian
-
🍖 Non-Vegetarian
-
🍝 Italian Cuisine
-
🥟 Chinese Delights
-
🍰 Sweet Desserts
-
🍽️ Main Courses
-
-
+ {/* Categories Section */} +
+

Endless Flavors to Explore

+
+ {categories.map((cat) => ( +
+ {cat.icon} + {cat.name} +
+ ))} +
+
- {/* Flow */} -
-

How Ordering Works

-
-
📱 Browse Menu
-
→
-
🛒 Add to Cart
-
→
-
✅ Checkout
-
→
-
💳 Payment
-
→
-
🚚 Delivery
+ {/* How It Works Section */} +
+

Simple Steps to Deliciousness

+
+ {howItWorks.map((step, index) => ( + +
+
+

{step.title}

+

{step.description}

+
+ {index < howItWorks.length - 1 &&
} + + ))} +
+
+
- - - {/* Payment */} -
-

Payment Methods

-

- 💳 Credit & Debit Cards   |   - 📱 Digital Wallets   |   - 💵 Cash on Delivery -

-
-
- ); + ); }; export default AboutUs; \ No newline at end of file diff --git a/frontend/src/components/Footer/Footer.jsx b/frontend/src/components/Footer/Footer.jsx index e714816b..c5637bb7 100644 --- a/frontend/src/components/Footer/Footer.jsx +++ b/frontend/src/components/Footer/Footer.jsx @@ -15,6 +15,7 @@ import LinkedInIcon from '../Icons/LinkedInIcon'; import GithubIcon from '../Icons/GithubIcon'; import FooterLogo from './FooterLogo'; import NewsletterSubscription from '../NewsletterSubscription/NewsletterSubscription'; +import QRCodeDownload from "./QRCodeDownload"; const Footer = () => { return ( @@ -25,6 +26,7 @@ const Footer = () => {
{/* Foodie Logo */} +

Enjoy delicious food from your favorite restaurants. Fast delivery, easy to use, and always satisfying. diff --git a/frontend/src/components/Footer/QRCodeDownload.jsx b/frontend/src/components/Footer/QRCodeDownload.jsx new file mode 100644 index 00000000..2fbce1a4 --- /dev/null +++ b/frontend/src/components/Footer/QRCodeDownload.jsx @@ -0,0 +1,20 @@ +import React from "react"; +import { QRCodeCanvas } from "qrcode.react"; + +const QRCodeDownload = () => { + return ( +

+

📲 Scan to Download

+ +
+ ); +}; + +export default QRCodeDownload; diff --git a/package-lock.json b/package-lock.json index 66b9ac53..2538a493 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,6 +6,7 @@ "": { "dependencies": { "html2pdf.js": "^0.10.3", + "qrcode.react": "^4.2.0", "react-icons": "^5.5.0", "react-to-print": "^3.1.1", "vite": "7.1.1" @@ -997,6 +998,15 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/qrcode.react": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz", + "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==", + "license": "ISC", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/raf": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz", diff --git a/package.json b/package.json index 817c429f..ff32521c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "dependencies": { "html2pdf.js": "^0.10.3", + "qrcode.react": "^4.2.0", "react-icons": "^5.5.0", "react-to-print": "^3.1.1", "vite": "7.1.1"