muayjtp/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

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

@ -3,8 +3,8 @@
@tailwind utilities;
body{
background-color: #FDE2DE;
overflow-x: hidden;
background-color: #FDE2DE;
overflow-x: hidden;
}
/*== logo ==*/

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

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

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

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

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

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