updated homepage
This commit is contained in:
parent
74a847062b
commit
8d9b4e6603
8 changed files with 79 additions and 63 deletions
BIN
donutshop_ecommerce/public/favicon.png
Normal file
BIN
donutshop_ecommerce/public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
|
|
@ -1,5 +1,6 @@
|
|||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Header from "@/components/layout/Header";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
|
|
@ -11,7 +12,11 @@ export const metadata = {
|
|||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className} suppressHydrationWarning={true}>{children}</body>
|
||||
<link rel="shortcut icon" href="/favicon.png" />
|
||||
<body className={inter.className} suppressHydrationWarning={true}>
|
||||
<Header/>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
"use client"
|
||||
import HomeCustom from '@/components/layout/HomeCustom'
|
||||
import Header from '@/components/layout/Header'
|
||||
import Hero from '@/components/layout/Hero'
|
||||
import HomeCreateBox from '@/components/layout/HomeCreateBox'
|
||||
import HomeMenu from '@/components/layout/HomeMenu'
|
||||
|
|
@ -8,19 +7,19 @@ import HomeMonthly from '@/components/layout/HomeMonthly'
|
|||
import React from 'react'
|
||||
import { ParallaxProvider } from "react-scroll-parallax";
|
||||
import Footer from '@/components/layout/Footer'
|
||||
import TextAnimation from '@/components/layout/TextAnimation'
|
||||
|
||||
const page = () => {
|
||||
return (
|
||||
<ParallaxProvider>
|
||||
<Header/>
|
||||
<Hero/>
|
||||
<TextAnimation/>
|
||||
<HomeMenu/>
|
||||
<HomeCreateBox/>
|
||||
<HomeMonthly/>
|
||||
<HomeCustom/>
|
||||
<Footer/>
|
||||
</ParallaxProvider>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
14
donutshop_ecommerce/src/app/register/page.js
Normal file
14
donutshop_ecommerce/src/app/register/page.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
"use client"
|
||||
import React from 'react'
|
||||
|
||||
const RegisterPage = () => {
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
This is register page
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default RegisterPage
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
import React from 'react'
|
||||
import { GiCoffeeBeans } from "react-icons/gi";
|
||||
import { GiCoffeeBeans, GiDonut } from "react-icons/gi";
|
||||
import { BiSolidDrink } from "react-icons/bi";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div className='w-full h-full bg-[#FFC55A] px-5 lg:px-10 pb-5'>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2'>
|
||||
<div className='w-full xl:w-3/4 flex flex-col gap-4 text-start text-white pl-0 md:pl-10 xl:pl-20 2xl:pl-40'>
|
||||
<div className='w-full xl:w-3/4 flex flex-col gap-4 text-start text-white pl-0 pr-0 md:pr-5 lg:pr-0 md:-pl-10 lg:pl-10 xl:pl-20 2xl:pl-40'>
|
||||
<p className='uppercase font-bold text-2xl lg:text-4xl mb-0 lg:mb-2'>Stay up to date</p>
|
||||
<input placeholder='Name' className='outline-none bg-transparent px-4 lg:px-6 py-2 lg:py-3 border border-white rounded-full'/>
|
||||
<input placeholder='Email' className='outline-none bg-transparent px-4 lg:px-6 py-2 lg:py-3 border border-white rounded-full'/>
|
||||
|
|
@ -22,7 +23,7 @@ const Footer = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2 sm:gap-3 text-white'>
|
||||
<GiCoffeeBeans className='text-2xl sm:text-3xl'/>
|
||||
<GiDonut className='text-2xl sm:text-3xl'/>
|
||||
<p className='text-base sm:text-lg font-bold uppercase'>Learn</p>
|
||||
<div className='flex flex-col gap-2 text-sm sm:text-base'>
|
||||
<p className='cursor-pointer hover:underline'>Gift Cards</p>
|
||||
|
|
@ -31,7 +32,7 @@ const Footer = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2 sm:gap-3 text-white'>
|
||||
<GiCoffeeBeans className='text-2xl sm:text-3xl'/>
|
||||
<BiSolidDrink className='text-2xl sm:text-3xl'/>
|
||||
<p className='text-base sm:text-lg font-bold uppercase'>Contact</p>
|
||||
<div className='flex flex-col gap-2 text-sm sm:text-base'>
|
||||
<p className='cursor-pointer hover:underline'>Contact Us</p>
|
||||
|
|
|
|||
|
|
@ -14,40 +14,47 @@ const Header = () => {
|
|||
|
||||
|
||||
return (
|
||||
<div className='w-full h-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='w-full h-full'>
|
||||
<div className='flex justify-between 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'>
|
||||
<Image src='/logo.png' width={120} height={120} alt='' className='w-[100px]'/>
|
||||
<Image src='/logo.png' width={120} height={120} alt='' className='w-[70px] md:w-[100px]'/>
|
||||
</div>
|
||||
<div className='circle absolute mt-10'>
|
||||
{Letter.map((item, index) => {
|
||||
return (
|
||||
<span key={index} className="letter inline-block absolute -top-[50px] md:-top-[70px] text-xs text-[#95743D]" style={{transform: `rotate(${index * 14.5}deg)`}}>{item}</span>
|
||||
);
|
||||
})}
|
||||
{Letter.map((item, index) => {
|
||||
return (
|
||||
<span key={index} className="letter inline-block absolute -top-[50px] md:-top-[70px] text-xs text-[#95743D]" style={{transform: `rotate(${index * 14.5}deg)`}}>{item}</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div className='mt-5'>
|
||||
<ul className="hidden md:flex flex-row gap-10 text-xs font-semibold uppercase text-[#95743D]">
|
||||
<Link href='/' className="">Home</Link>
|
||||
<Link href='' className="">Menu</Link>
|
||||
<Link href='' className="">about</Link>
|
||||
<Link href='' className="">contact</Link>
|
||||
</ul>
|
||||
</div>
|
||||
<div className='mt-5'>
|
||||
<div className="flex justify-end md:justify-center items-center w-full text-white">
|
||||
<ul className="hidden md:flex flex-row gap-5 text-xs font-semibold uppercase text-[#95743D]">
|
||||
<Link href='/' className="">Login</Link>
|
||||
<Link href='/register' className="">Register</Link>
|
||||
</ul>
|
||||
<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="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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,46 +1,14 @@
|
|||
"use client"
|
||||
import React from 'react'
|
||||
import {motion} from "framer-motion"
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
|
||||
const Hero = () => {
|
||||
const textAnimation = {
|
||||
animate: {x: [0, -1000], transition: {x: {repeat: Infinity, repeatType: "loop", duration: 5, ease: "linear",},},},
|
||||
};
|
||||
const textAnimation1 = {
|
||||
animate: {x: [-1000, 0], transition: {x: {repeat: Infinity, repeatType: "loop", duration: 5, ease: "linear",},},},
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='w-full h-screen flex flex-col gap-10 md:gap-20 relative'>
|
||||
<div className='mt-10 -z-20 w-[100vw] max-w-[100%] overflow-x-hidden'>
|
||||
<motion.div className='absolute whitespace-nowrap' variants={textAnimation } animate="animate">
|
||||
<p className='mt-[30px] text-7xl md:text-9xl text-[#FDE2DE] font-bold tracking-wider uppercase text-stroke-3 overflow-hidden'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className='mt-10 -z-20 w-[100vw] max-w-[100%]overflow-x-hidden'>
|
||||
<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 w-[100vw] max-w-[100%] overflow-x-hidden'>
|
||||
<motion.div className='absolute whitespace-nowrap' variants={textAnimation } animate="animate">
|
||||
<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-[90%] md:h-[90%] flex flex-col justify-center items-center absolute'>
|
||||
<Image src='/donut.png' width={500} height={300} alt='home_donut' className='drop-shadow-2xl w-[340px] sm:w-[500px] mt-64'/>
|
||||
<Image src='/cup.png' width={500} height={300} 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-2xl 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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
22
donutshop_ecommerce/src/components/layout/TextAnimation.js
Normal file
22
donutshop_ecommerce/src/components/layout/TextAnimation.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react'
|
||||
import {motion} from "framer-motion"
|
||||
|
||||
|
||||
|
||||
const TextAnimation = () => {
|
||||
const textAnimation = {
|
||||
animate: {x: [0, -1000], transition: {x: {repeat: Infinity, repeatType: "loop", duration: 5, ease: "linear",},},},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='w-full h-[30vh] md:h-[40vh] flex flex-col gap-10 md:gap-20 relative bg-[#68D2E8] rounded-t-3xl'>
|
||||
<div className='mt-10 w-[100vw] max-w-[100%] overflow-x-hidden'>
|
||||
<motion.div className='absolute whitespace-nowrap' variants={textAnimation } animate="animate">
|
||||
<p className='mt-[30px] text-5xl md:text-9xl text-white font-bold tracking-wider uppercase overflow-hidden'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TextAnimation
|
||||
Loading…
Add table
Reference in a new issue