added menu homepage section

donutshop_ecommerce/package-lock.json

@@ -12,7 +12,10 @@
         "next": "14.2.3",
         "react": "^18",
         "react-dom": "^18",
-        "react-icons": "^5.2.0"
+        "react-icons": "^5.2.0",
+        "react-scroll-parallax": "^3.4.5",
+        "react-slick": "^0.30.2",
+        "slick-carousel": "^1.8.1"
       },
       "devDependencies": {
         "eslint": "^8",
@@ -893,6 +896,11 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -1046,6 +1054,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -1294,6 +1307,11 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/enquire.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
+      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
+    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -2840,6 +2858,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "peer": true
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2875,6 +2899,14 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "dependencies": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "node_modules/json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
@@ -2972,6 +3004,11 @@
         "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=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3365,6 +3402,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parallax-controller": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/parallax-controller/-/parallax-controller-1.7.1.tgz",
+      "integrity": "sha512-facVMEBnUynzMN7hCSqyNpF6uyCpVIl4XAUyTR9D8q2JlhgyPY6bZtj/OkFk3+Cpka1TnYCppQb8BzDWHtSaZg==",
+      "dependencies": {
+        "bezier-easing": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3714,6 +3762,37 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/react-scroll-parallax": {
+      "version": "3.4.5",
+      "resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.4.5.tgz",
+      "integrity": "sha512-4NLZQ8cZEUyxoA95DfrXWneOOUSFrFmpM0dZNzMErmuJ0LzY+CCw8Xw0hqB6xxHWxNknfs46AozyIPSWkZeucA==",
+      "dependencies": {
+        "parallax-controller": "^1.7.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0-0 || >=17.0.1 || ^18.0.0",
+        "react-dom": "^16.8.0-0 || >=17.0.1 || ^18.0.0"
+      }
+    },
+    "node_modules/react-slick": {
+      "version": "0.30.2",
+      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz",
+      "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "enquire.js": "^2.1.6",
+        "json2mq": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
+        "resize-observer-polyfill": "^1.5.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -3780,6 +3859,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -4045,6 +4129,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/slick-carousel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+      "peerDependencies": {
+        "jquery": ">=1.8.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -4061,6 +4153,11 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",

donutshop_ecommerce/package.json

@@ -13,7 +13,10 @@
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.2.0"
+    "react-icons": "^5.2.0",
+    "react-scroll-parallax": "^3.4.5",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "eslint": "^8",

donutshop_ecommerce/src/app/globals.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+
+html{
+  overflow-x: hidden;
+}
 body{
   background-color: #FDE2DE;
   overflow-x: hidden;

donutshop_ecommerce/src/app/page.js

@@ -1,15 +1,20 @@
+"use client"
 import Header from '@/components/layout/Header'
 import Hero from '@/components/layout/Hero'
+import HomeCreateBox from '@/components/layout/HomeCreateBox'
 import HomeMenu from '@/components/layout/HomeMenu'
 import React from 'react'
+import { ParallaxProvider } from "react-scroll-parallax";
 
 const page = () => {
   return (
-    <>
-      <Header/>
-      <Hero/>
-      <HomeMenu/>
-    </>
+  <ParallaxProvider>
+    <Header/>
+    <Hero/>
+    <HomeMenu/>
+    <HomeCreateBox/>
+  </ParallaxProvider>
+
   )
 }
 

donutshop_ecommerce/src/components/layout/Header.js

@@ -4,7 +4,6 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { IoCloseOutline } from "react-icons/io5";
 import { HiBars2 } from "react-icons/hi2";
-import Hero from "./Hero";
 
 
 const Header = () => {
@@ -15,7 +14,7 @@ const Header = () => {
     
 
   return (
-    <div className='w-full bg-[#FDE2DE]'>
+    <div className='w-full h-full bg-[#FDE2DE]'>
         <div className='flex flex-row justify-between md:flex-col gap-14 items-center py-5 md:py-10 px-5 md:px-8 lg:px-10'>
             <div className='flex justify-center relative px-4'>
                 <div className='mt-5 md:mt3 flex flex-col items-center'>

donutshop_ecommerce/src/components/layout/Hero.js

@@ -12,30 +12,31 @@ const Hero = () => {
   const textAnimation1 = {
     animate: {x: [-1000, 0], transition: {x: {repeat: Infinity, repeatType: "loop", duration: 5, ease: "linear",},},},
   };
+  
 
 
   return (
     <>
-    <div className='w-full h-screen flex flex-col gap-10 md:gap-20'>
-      <div className='mt-10 -z-20'>
+    <div className='w-full h-screen flex flex-col gap-10 md:gap-20 relative'>
+      <div className='mt-10 -z-20 w-[100vw] max-w-[100%] overflow-x-hidden'>
           <motion.div className='absolute whitespace-nowrap' variants={textAnimation } animate="animate">
-            <p className='mt-[30px] text-7xl md:text-9xl text-[#FDE2DE] font-bold tracking-wider uppercase text-stroke-3'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
+            <p className='mt-[30px] text-7xl md:text-9xl text-[#FDE2DE] font-bold tracking-wider uppercase text-stroke-3 overflow-hidden'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
           </motion.div>
       </div>
-      <div className='mt-10 -z-20'>
+      <div className='mt-10 -z-20 w-[100vw] max-w-[100%]overflow-x-hidden'>
           <motion.div className='absolute whitespace-nowrap' variants={textAnimation1} animate="animate">
             <p className='mt-[30px] text-7xl md:text-9xl text-white font-bold tracking-wider uppercase'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
           </motion.div>
       </div>
-      <div className='mt-10 -z-20'>
+      <div className='mt-10 -z-20 w-[100vw] max-w-[100%] overflow-x-hidden'>
           <motion.div className='absolute whitespace-nowrap' variants={textAnimation } animate="animate">
             <p className='mt-[30px] text-7xl md:text-9xl text-[#FDE2DE] font-bold tracking-wider uppercase text-stroke-3'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
           </motion.div>
       </div>
       <div className='w-full h-[90%] md:h-[90%] flex flex-col justify-center items-center absolute'>
-        <Image src='/donut.png' width={1000} height={1000} alt='home_donut' className='drop-shadow-2xl w-[340px] sm:w-[500px] mt-64'/>
-        <Image src='/cup.png' width={1000} height={1000} alt='home_donut' className='drop-shadow-2xl w-[340px] sm:w-[450px] -mt-40 sm:-mt-60 absolute -z-10'/>
-        <p className='w-full md:w-[700px] px-5 text-center text-xl sm:text-4xl tracking-wide text-white drop-shadow-[0_2px_2px_rgba(195,125,90,1)] mt-5'>We bake our donuts fresh everyday using high-quality ingredients without artificial additives.</p>
+        <Image src='/donut.png' width={500} height={300} alt='home_donut' className='drop-shadow-2xl w-[340px] sm:w-[500px] mt-64'/>
+        <Image src='/cup.png' width={500} height={300} alt='home_donut' className='drop-shadow-2xl w-[340px] sm:w-[450px] -mt-40 sm:-mt-60 absolute -z-10'/>
+        <p className='w-full md:w-[700px] px-5 text-center text-2xl sm:text-4xl tracking-wide text-white drop-shadow-[0_2px_2px_rgba(195,125,90,1)] mt-5'>We bake our donuts fresh everyday using high-quality ingredients without artificial additives.</p>
         <Link href='' className='mt-5 sm:mt-10 border text-sm border-[#E78895] px-4 py-2 rounded-full uppercase text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Order</Link>
       </div>
     </div>

donutshop_ecommerce/src/components/layout/HomeCreateBox.js

@@ -0,0 +1,35 @@
+import Image from 'next/image';
+import React from 'react'
+import { Parallax } from "react-scroll-parallax";
+
+const HomeCreateBox = () => {
+  return (
+    <Parallax speed={-5}>
+      <div className='w-full h-full bg-[#FFD0D0] rounded-t-3xl md:pb-20 pb-10'>
+        <div className='grid grid-cols-1 md:grid-cols-2 items-center py-10 px-5 lg:px-10'>
+          <div className='w-full hidden md:flex mt-5 md:mt-0 justify-center md:justify-start'>
+            <button className='px-4 lg:px-6 py-2 text-sm lg:text-base lg:py-3 uppercase rounded-full font-semibold border border-[#95743D] text-[#95743D] hover:text-[#FFD0D0] hover:bg-[#E78895] hover:border-[#E78895] duration-300'>View Product</button>
+          </div>
+          <div className='flex flex-col gap-4'>
+            <p className='text-center md:text-end text-4xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[4.5vw] text-[#FF8989] uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Mothers Day Box</p>
+            <p className='w-full text-center md:text-end text-base lg:text-lg text-[#95743D]'>Lets show our appreciation for our moms by treating them with Mothers Day Box from Puffy Dough!</p> 
+          </div>
+          <div className='w-full flex md:hidden mt-5 md:mt-0 justify-center md:justify-end items-end text-end'>
+            <button className='px-4 lg:px-6 py-2 text-sm lg:text-base lg:py-3 uppercase rounded-full font-semibold border border-[#95743D] text-[#95743D] hover:text-[#FFD0D0] hover:bg-[#E78895] hover:border-[#E78895] duration-300'>View Product</button>
+          </div>
+        </div>
+
+        <div className='flex flex-col md:flex-row justify-between px-5 lg:px-10'>
+          <div className='flex justify-center md:justify-start items-center mt-5 md:mt-0'>
+            <Image src='/donuts_special.jpg' width={800} height={800} alt='home-create-box' className='w-[800px] h-[500px] md:h-[600px] xl:-[700px] 2xl:h-[800px] object-cover rounded-xl'/>
+          </div>
+          <div>
+            <p>Mothers Day Box</p>
+          </div>
+        </div>
+      </div>
+    </Parallax>
+  )
+}
+
+export default HomeCreateBox

donutshop_ecommerce/src/components/layout/HomeMenu.js

@@ -1,8 +1,88 @@
 import React from 'react'
+import { Parallax } from "react-scroll-parallax";
+import MenuItem from '../menu/MenuItem';
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
 
 const HomeMenu = () => {
+  var menuSlide = {
+    dots: false,
+    infinite: false,
+    speed: 500,
+    slidesToShow: 5,
+    initialSlide: 0,
+    responsive: [
+      {
+        breakpoint: 1524,
+        settings: {
+        slidesToShow: 4,
+        slidesToScroll: 4,
+        infinite: true,
+        dots: false
+        }
+      },
+      {
+        breakpoint: 1024,
+        settings: {
+        slidesToShow: 3,
+        slidesToScroll: 3,
+        infinite: true,
+        dots: false
+        }
+      },
+      {
+        breakpoint: 810,
+        settings: {
+        slidesToShow: 2,
+        slidesToScroll: 2,
+        initialSlide: 2
+        }
+      },
+      {
+        breakpoint: 480,
+        settings: {
+        slidesToShow: 1,
+        slidesToScroll: 1
+        }
+      }
+    ]
+  };
+  
   return (
-    <div>HomeMenu</div>
+    <Parallax speed={-10}>
+    <div className='w-full h-full bg-[#D1BB9E] rounded-t-3xl md:pb-20 pb-10'>
+      <div className='grid grid-cols-1 md:grid-cols-2 items-center py-5 sm:py-10 px-5 lg:px-10'>
+        <div className='flex flex-col gap-4'>
+          <p className='text-center md:text-start text-4xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[5vw] text-yellow-100 uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Treat yourself</p>
+          <p className='w-full md:w-[500px] lg:w-[800px] text-center md:text-start text-base lg:text-lg xl:text-xl text-white'>Puffy Dought offers a wide range of flavors to choose from including classic favorites like glazed and chocolate, as well as unique flavors like Black Sesame Matcha and Passionfruit Creamcheese</p> 
+        </div>
+        <div className='w-full flex mt-5 md:mt-0 justify-center md:justify-end items-end text-end'>
+          <button className='px-4 lg:px-6 py-2 text-sm lg:text-base lg:py-3 uppercase rounded-full font-semibold border text-white hover:text-[#D1BB9E] hover:bg-[#95743D] hover:border-[#95743D] duration-300'>View All</button>
+        </div>
+      </div>
+      <div className='py-2 sm:py-10 px-10'>
+        <Slider arrows={false} {...menuSlide}>
+          <div className='px-2'>  
+            <MenuItem/>
+          </div>
+          <div className='px-2'>
+            <MenuItem/>
+          </div>
+          <div className='px-2'>
+            <MenuItem/>
+          </div>
+          <div className='px-2'>
+            <MenuItem/>
+          </div>
+          <div className='px-2'>
+            <MenuItem/>
+          </div>
+        </Slider>
+      </div>
+    </div>
+   </Parallax>
   )
 }
 

donutshop_ecommerce/src/components/menu/MenuItem.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import Image from 'next/image';
+
+const MenuItem = () => {
+  
+  
+  return (
+    <div className='py-1 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center rounded-xl bg-white h-[350px] sm:h-[450px]'>
+      <Image src='/donut1.png' width={300} height={300} alt='menu-donut' className='w-[200px] sm:w-[300px]'/>
+      <p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>Chocolate Beurre noisette Walnut Cream</p>
+      <p className='text-[#95743D] text-sm'>$5.99</p>
+      <button className='px-2 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm border border-[#E78895] text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Add to cart</button>
+    </div>
+  )
+}
+
+export default MenuItem