updated homepage
This commit is contained in:
parent
7a02c06226
commit
f76e19c437
5 changed files with 30 additions and 16 deletions
BIN
donutshop_ecommerce/public/cup.png
Normal file
BIN
donutshop_ecommerce/public/cup.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 91 KiB |
|
@ -6,21 +6,23 @@ body{
|
|||
background-color: #FDE2DE;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.text-stroke-3 {
|
||||
text-shadow: -1px -1px 0 #95743D, 2px -1px 0 #95743D, -1px 2px 0 #95743D, 1px 1px 0 #95743D;
|
||||
}
|
||||
/*== logo ==*/
|
||||
.circle{
|
||||
animation: animate 17.5s linear infinite;
|
||||
}
|
||||
@keyframes animate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.letter {
|
||||
transform-origin: 0 50px;
|
||||
transform-origin: 0 50px;
|
||||
}
|
||||
|
||||
@media (min-width: 765px){
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import Header from '@/components/layout/Header'
|
||||
import Hero from '@/components/layout/Hero'
|
||||
import HomeMenu from '@/components/layout/HomeMenu'
|
||||
import React from 'react'
|
||||
|
||||
const page = () => {
|
||||
|
@ -7,6 +8,7 @@ const page = () => {
|
|||
<>
|
||||
<Header/>
|
||||
<Hero/>
|
||||
<HomeMenu/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -17,24 +17,25 @@ const Hero = () => {
|
|||
return (
|
||||
<>
|
||||
<div className='w-full h-screen flex flex-col gap-10 md:gap-20'>
|
||||
<div className='mt-10'>
|
||||
<div className='mt-10 -z-20'>
|
||||
<motion.div className='absolute whitespace-nowrap' variants={textAnimation } 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>
|
||||
<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='mt-10'>
|
||||
<div className='mt-10 -z-20'>
|
||||
<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'>
|
||||
<div className='mt-10 -z-20'>
|
||||
<motion.div className='absolute whitespace-nowrap' variants={textAnimation } 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>
|
||||
<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-[85%] flex flex-col justify-center items-center absolute'>
|
||||
<Image src='/donut.png' width={1000} height={1000} alt='home_donut' className='drop-shadow-2xl w-[750px] mt-10 md:mt-0 '/>
|
||||
<p className='w-full md:w-[600px] px-5 text-center text-xl sm:text-3xl tracking-wide text-white drop-shadow-[0_2px_2px_rgba(195,125,90,1)] mt-5'>Puffy Dough, we bake our donuts fresh everyday using high-quality ingredients without artificial additives.</p>
|
||||
<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>
|
||||
<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>
|
||||
|
|
9
donutshop_ecommerce/src/components/layout/HomeMenu.js
Normal file
9
donutshop_ecommerce/src/components/layout/HomeMenu.js
Normal file
|
@ -0,0 +1,9 @@
|
|||
import React from 'react'
|
||||
|
||||
const HomeMenu = () => {
|
||||
return (
|
||||
<div>HomeMenu</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HomeMenu
|
Loading…
Add table
Reference in a new issue