added landing page component
This commit is contained in:
parent
442a363e03
commit
d63ae493dc
8 changed files with 87 additions and 39 deletions
15
donut_ecommerce/package-lock.json
generated
15
donut_ecommerce/package-lock.json
generated
|
|
@ -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==",
|
||||
"dev": true
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
BIN
donut_ecommerce/public/home_donut.png
Normal file
BIN
donut_ecommerce/public/home_donut.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 315 KiB |
|
|
@ -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
|
||||
|
|
@ -3,24 +3,7 @@
|
|||
@tailwind utilities;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.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);
|
||||
}
|
||||
/*== logo ==*/
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Header from '@/_component/Header'
|
||||
import Header from '@/component/layout/Header'
|
||||
import React from 'react'
|
||||
|
||||
const page = () => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
56
donut_ecommerce/src/component/layout/Hero.js
Normal file
56
donut_ecommerce/src/component/layout/Hero.js
Normal file
|
|
@ -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
|
||||
Loading…
Add table
Reference in a new issue