jtpmcdevitt/web_next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated homepage

Browse source
This commit is contained in:
Juthatip McDevitt 2024-05-06 22:37:59 -05:00
parent 7a02c06226
commit f76e19c437
5 changed files with 30 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
donutshop_ecommerce/public/cup.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 91 KiB

18
donutshop_ecommerce/src/app/globals.css
View file

@ -6,21 +6,23 @@ body{
background-color: #FDE2DE; background-color: #FDE2DE;
overflow-x: hidden; 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 ==*/ /*== logo ==*/
.circle{ .circle{
animation: animate 17.5s linear infinite; animation: animate 17.5s linear infinite;
} }
@keyframes animate { @keyframes animate {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.letter { .letter {
transform-origin: 0 50px; transform-origin: 0 50px;
} }
@media (min-width: 765px){ @media (min-width: 765px){

2
donutshop_ecommerce/src/app/page.js
View file

@ -1,5 +1,6 @@
import Header from '@/components/layout/Header' import Header from '@/components/layout/Header'
import Hero from '@/components/layout/Hero' import Hero from '@/components/layout/Hero'
import HomeMenu from '@/components/layout/HomeMenu'
import React from 'react' import React from 'react'
const page = () => { const page = () => {
@ -7,6 +8,7 @@ const page = () => {
<> <>
<Header/> <Header/>
<Hero/> <Hero/>
<HomeMenu/>
</> </>
) )
} }

17
donutshop_ecommerce/src/components/layout/Hero.js
View file

@ -17,24 +17,25 @@ const Hero = () => {
return ( return (
<> <>
<div className='w-full h-screen flex flex-col gap-10 md:gap-20'> <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"> <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> </motion.div>
</div> </div>
<div className='mt-10'> <div className='mt-10 -z-20'>
<motion.div className='absolute whitespace-nowrap' variants={textAnimation1} animate="animate"> <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> <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> </motion.div>
</div> </div>
<div className='mt-10'> <div className='mt-10 -z-20'>
<motion.div className='absolute whitespace-nowrap' variants={textAnimation } animate="animate"> <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> </motion.div>
</div> </div>
<div className='w-full h-[85%] flex flex-col justify-center items-center absolute'> <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-[750px] mt-10 md:mt-0 '/> <Image src='/donut.png' width={1000} height={1000} alt='home_donut' className='drop-shadow-2xl w-[340px] sm:w-[500px] mt-64'/>
<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> <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> <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>
</div> </div>

9
donutshop_ecommerce/src/components/layout/HomeMenu.js Normal file
View file

@ -0,0 +1,9 @@
import React from 'react'
const HomeMenu = () => {
return (
<div>HomeMenu</div>
)
}
export default HomeMenu