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 20:17:27 -05:00
parent 7fbc420a1a
commit 7a02c06226
4 changed files with 33 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,7 @@ import "./globals.css";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
export const metadata = { export const metadata = {
title: "Create Next App", title: "Puffy Dough | Donuts, Coffee, and Drinks",
description: "Generated by create next app", description: "Generated by create next app",
}; };

53
donutshop_ecommerce/src/components/layout/Header.js
View file

@ -4,6 +4,7 @@ import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import { IoCloseOutline } from "react-icons/io5"; import { IoCloseOutline } from "react-icons/io5";
import { HiBars2 } from "react-icons/hi2"; import { HiBars2 } from "react-icons/hi2";
import Hero from "./Hero";
const Header = () => { const Header = () => {
@ -11,32 +12,10 @@ const Header = () => {
const Letter = text.split(""); const Letter = text.split("");
const [nav, setNav] = useState(false); const [nav, setNav] = useState(false);
const links = [
{
id: 1,
link: "home",
},
{
id: 2,
link: "menu",
},
{
id: 3,
link: "about",
},
{
id: 4,
link: "contact",
},
{
id: 5,
link: "login",
},
];
return ( return (
<div className='w-full h-full bg-[#FDE2DE]'> <div className='w-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 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='flex justify-center relative px-4'>
<div className='mt-5 md:mt3 flex flex-col items-center'> <div className='mt-5 md:mt3 flex flex-col items-center'>
@ -50,22 +29,24 @@ const Header = () => {
})} })}
</div> </div>
</div> </div>
<div className="flex justify-end md:justify-center items-center w-full text-white nav"> <div className="flex justify-end md:justify-center items-center w-full text-white">
<ul className="hidden md:flex border border-[#E78895] rounded-full"> <ul className="hidden md:flex border border-[#E78895] rounded-full text-xs font-semibold uppercase text-[#95743D]">
{links.map(({ id, link }) => ( <Link href='/' className="px-4 py-2 relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">Home</Link>
<li key={id} className="px-6 py-3 cursor-pointer text-xs font-semibold uppercase text-[#95743D] relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300"> <Link href='' className="px-4 py-2 relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">Menu</Link>
<Link href={link}>{link}</Link> <Link href='' className="px-4 py-2 relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">about</Link>
</li> <Link href='' className="px-4 py-2 relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">contact</Link>
))} <Link href='' className="px-4 py-2 relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">login</Link>
</ul> </ul>
<div onClick={() => setNav(!nav)} className="cursor-pointer pr-4 z-10 text-[#95743D] md:hidden"> {nav ? <IoCloseOutline size={30} /> : <HiBars2 size={30} />}</div> <div onClick={() => setNav(!nav)} className="cursor-pointer pr-4 z-20 text-[#95743D] md:hidden "> {nav ? <IoCloseOutline size={30} /> : <HiBars2 size={30} />}</div>
{nav && ( {nav && (
<ul className="flex flex-col justify-center items-center absolute top-0 left-0 w-full h-screen bg-gradient-to-b from-[#f8cdc6] to-[#FDE2DE] text-[#95743D]"> <ul className="w-full h-screen flex justify-center items-center text-center absolute top-0 left-0 bg-gradient-to-b from-[#f8cdc6] to-[#FDE2DE] text-[#95743D] z-10">
{links.map(({ id, link }) => ( <li onClick={() => setNav(!nav)} className="flex flex-col gap-4 cursor-pointer capitalize text-3xl">
<li key={id} className="px-4 cursor-pointer capitalize py-6 text-4xl"> <Link href='/'>Home</Link>
<Link onClick={() => setNav(!nav)} href={link}>{link}</Link> <Link href=''>menu</Link>
<Link href=''>about</Link>
<Link href=''>contact</Link>
<Link href=''>login</Link>
</li> </li>
))}
</ul> </ul>
)} )}
</div> </div>

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

@ -2,6 +2,7 @@
import React from 'react' import React from 'react'
import {motion} from "framer-motion" import {motion} from "framer-motion"
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link';
const Hero = () => { const Hero = () => {
@ -14,28 +15,30 @@ const Hero = () => {
return ( return (
<div className='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'>
<div className='mt-10'>
<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-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 -z-20'> <div className='mt-10'>
<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 -z-20'> <div className='mt-10'>
<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-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='w-full h-[80%] flex flex-col justify-center items-center absolute -z-10'> <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-20 md:mt-0 '/> <Image src='/donut.png' width={1000} height={1000} alt='home_donut' className='drop-shadow-2xl w-[750px] mt-10 md:mt-0 '/>
<p>Puffy Donut</p> <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>
<p>Why do our donuts so good?</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>
</div> </div>
</>
) )
} }