updated homepage
This commit is contained in:
parent
7fbc420a1a
commit
7a02c06226
4 changed files with 33 additions and 49 deletions
|
@ -3,8 +3,8 @@
|
|||
@tailwind utilities;
|
||||
|
||||
body{
|
||||
background-color: #FDE2DE;
|
||||
overflow-x: hidden;
|
||||
background-color: #FDE2DE;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/*== logo ==*/
|
||||
|
|
|
@ -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",
|
||||
};
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue