added landing page component

donut_ecommerce/package-lock.json

@@ -18,6 +18,7 @@
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^5.2.0",
+        "react-type-animation": "^3.2.0",
         "tailwind-merge": "^2.3.0",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -3964,7 +3965,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -4033,8 +4033,7 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-      "dev": true
     },
     "node_modules/react-remove-scroll": {
       "version": "2.5.5",
@@ -4103,6 +4102,16 @@
         }
       }
     },
+    "node_modules/react-type-animation": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-type-animation/-/react-type-animation-3.2.0.tgz",
+      "integrity": "sha512-WXTe0i3rRNKjmggPvT5ntye1QBt0ATGbijeW6V3cQe2W0jaMABXXlPPEdtofnS9tM7wSRHchEvI9SUw+0kUohw==",
+      "peerDependencies": {
+        "prop-types": "^15.5.4",
+        "react": ">= 15.0.0",
+        "react-dom": ">= 15.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

donut_ecommerce/package.json

@@ -19,6 +19,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.2.0",
+    "react-type-animation": "^3.2.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7"
   },

donut_ecommerce/src/_component/Hero.js

@@ -1,16 +0,0 @@
-import Image from 'next/image'
-import React from 'react'
-
-const Hero = () => {
-  return (
-    <>
-    <div className='w-full h-[70%] flex flex-row gap-5 justify-center items-end px-5 overflow-hidden mt-20 md:mt-0'>
-      <Image src="/donut.png" width={500} height={200} alt='' className='hidden md:flex md:w-[300px] lg:w-[350px] xl:w-[450px] mb-5'/>
-      <Image src="/donut2.png" width={500} height={200} alt='' className='flex md:w-[280px] lg:w-[300px] xl:w-[400px] mb-2'/>
-      <Image src="/donut1.png" width={500} height={200} alt='' className='hidden md:flex md:w-[280px] lg:w-[300px] xl:w-[400px]'/>
-    </div>
-    </>
-  )
-}
-
-export default Hero

donut_ecommerce/src/app/globals.css

@@ -3,24 +3,7 @@
 @tailwind utilities;
   
 
-
+/*== logo ==*/
-
-
-.link::before {
-  content: "";
-  position: absolute;
-  display: block;
-  width: 100%;
-  height: 2px;
-  bottom: 0;
-  left: 0;
-  background-color: #A87676;
-  transform: scaleX(0);
-  transition: transform 0.3s ease;
-}
-.link:hover::before {
-  transform: scaleX(1);
-}
 .circle{
   animation: animate 17.5s linear infinite;
 }
@@ -35,6 +18,21 @@
 .letter {
   transform-origin: 0 50px;
 }
+/*== donut move ==*/
+.donut-move{
+  animation: float 6s ease-in-out infinite;
+}
+@keyframes float {
+	0% {
+		transform: translatey(0px);
+	}
+	50% {
+		transform: translatey(-10px);
+	}
+	100% {
+		transform: translatey(0px);
+	}
+}
 
 
 

donut_ecommerce/src/app/page.js

@@ -1,4 +1,4 @@
-import Header from '@/_component/Header'
+import Header from '@/component/layout/Header'
 import React from 'react'
 
 const page = () => {

donut_ecommerce/src/component/layout/Header.js

@@ -26,7 +26,7 @@ const Header = () => {
                 })}
                 </div>
             </div>
-            <div className='hidden md:flex uppercase text-sm text-[#95743D] font-semibold tracking-wide border border-[#E78895] rounded-full'>
+            <div className='hidden md:flex uppercase text-xs text-[#95743D] font-semibold tracking-wide border border-[#E78895] rounded-full'>
                 <Link href='' className='relative hover:text-[#FDE2DE] py-2 px-4 hover:bg-[#E78895] rounded-full duration-300'>Home</Link>
                 <Link href='' className='relative hover:text-[#FDE2DE] py-2 px-4 hover:bg-[#E78895] rounded-full duration-300'>Menu</Link>
                 <Link href='' className='relative hover:text-[#FDE2DE] py-2 px-4 hover:bg-[#E78895] rounded-full duration-300'>About</Link>

donut_ecommerce/src/component/layout/Hero.js

@@ -0,0 +1,56 @@
+"use client"
+import Image from 'next/image'
+import React from 'react'
+import { TypeAnimation } from 'react-type-animation';
+import { GiDonut } from "react-icons/gi";
+import { MdOutlineNewReleases, MdCheckCircleOutline } from "react-icons/md";
+
+const Hero = () => {
+  return (
+    <>
+    <div className='w-full h-[70%] grid grid-cols-3 px-5'>
+      <div className='pl-5 xl:pl-8 2xl:pl-20'>
+        <p className='mt-10 text-6xl xl:text-7xl text-[#FFFAB7] uppercase font-semibold xl:tracking-wider drop-shadow-[0_2px_2px_rgba(240,180,15,5)]'>Donuts over eveything!</p>
+        <p className='mt-10 pr-10 xl:pr-0 text-[#E78895] text-base font-semibold drop-shadow-[0_1px_1px_rgba(245,150,175,1)]'>Homemade donuts with an incredible variety of topping (without artificial additives, colors, and flavors)</p>
+        <button className='mt-10 px-6 py-3 bg-[#E1F7F5] text-[#FFB1B1] font-semibold rounded-full uppercase shadow-lg'>Order</button>
+      </div>
+      <div className='flex justify-center items-center'>
+        <Image src='/home_donut.png' width={500} height={500} alt='home-donut' className='donut-move'/>
+        <TypeAnimation wrapper="span" speed={50} repeat={Infinity} className='w-[500px] absolute inline-block text-7xl xl:text-8xl text-center text-white font-bold drop-shadow-[0_4px_4px_rgba(0,0,0,8)]'sequence={[
+          'Donuts go nuts!',
+          1000,
+          'Donuts love you',
+          1000,
+          'Donuts panic!',
+          1000
+        ]}/>
+      </div>
+      <div className='flex flex-col gap-10 justify-center items-center px-5'>
+        <div className='w-[320px] flex flex-col gap-2'>
+          <div className='flex flex-row gap-4 items-center'>
+            <p className='flex justify-center items-center w-10 h-10 rounded-full bg-[#F0F3FF]'><GiDonut className='text-2xl text-[#95743D]'/></p>
+            <p className='font-semibold text-[#95743D]'>Freshly Baked Donuts</p>
+          </div>
+          <p className='text-[#CBAF87] text-sm'>Our donuts are baked fresh every day using high quality ingredients without artificial ingredients</p>
+        </div>
+        <div className='w-[320px] flex flex-col gap-2'>
+          <div className='flex flex-row gap-4 items-center'>
+            <p className='flex justify-center items-center w-10 h-10 rounded-full bg-[#F0F3FF]'><MdOutlineNewReleases className='text-2xl text-[#95743D]'/></p>
+            <p className='font-semibold text-[#95743D]'>Variety of Flavors</p>
+          </div>
+          <p className='text-[#CBAF87] text-sm'>At Puffy Dough, we offer a wide range of flavors including classic glazed as well as unique flavors like matcha pistachio</p>
+        </div>
+        <div className='w-[320px] flex flex-col gap-2'>
+          <div className='flex flex-row gap-4 items-center'>
+            <p className='flex justify-center items-center w-10 h-10 rounded-full bg-[#F0F3FF]'><MdCheckCircleOutline className='text-2xl text-[#95743D]'/></p>
+            <p className='font-semibold text-[#95743D]'>Customized Options</p>
+          </div>
+          <p className='text-[#CBAF87] text-sm'>customers can pick their own toppings and fillings to create a personalized donut experience</p>
+        </div>
+      </div>
+    </div>
+    </>
+  )
+}
+
+export default Hero