finished ui homepage
This commit is contained in:
parent
1b1f93d88b
commit
74a847062b
5 changed files with 85 additions and 2 deletions
|
|
@ -1,4 +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'
|
||||
|
|
@ -6,6 +7,7 @@ import HomeMenu from '@/components/layout/HomeMenu'
|
|||
import HomeMonthly from '@/components/layout/HomeMonthly'
|
||||
import React from 'react'
|
||||
import { ParallaxProvider } from "react-scroll-parallax";
|
||||
import Footer from '@/components/layout/Footer'
|
||||
|
||||
const page = () => {
|
||||
return (
|
||||
|
|
@ -15,6 +17,8 @@ const page = () => {
|
|||
<HomeMenu/>
|
||||
<HomeCreateBox/>
|
||||
<HomeMonthly/>
|
||||
<HomeCustom/>
|
||||
<Footer/>
|
||||
</ParallaxProvider>
|
||||
|
||||
)
|
||||
|
|
|
|||
51
donutshop_ecommerce/src/components/layout/Footer.js
Normal file
51
donutshop_ecommerce/src/components/layout/Footer.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import React from 'react'
|
||||
import { GiCoffeeBeans } from "react-icons/gi";
|
||||
|
||||
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'>
|
||||
<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'/>
|
||||
<button className='px-4 lg:px-6 py-2 lg:py-3 border border-white rounded-full text-white hover:bg-white hover:text-[#FFC55A] duration-300'>Subscribe</button>
|
||||
</div>
|
||||
<div className='flex flex-col gap-5 sm:gap-0 sm:flex-row justify-evenly mt-10 md:mt-0'>
|
||||
<div className='flex flex-col gap-2 sm:gap-3 text-white'>
|
||||
<GiCoffeeBeans className='text-2xl sm:text-3xl'/>
|
||||
<p className='text-base sm:text-lg font-bold uppercase'>Info</p>
|
||||
<div className='flex flex-col gap-2 text-sm sm:text-base'>
|
||||
<p className='cursor-pointer hover:underline'>Shipping + Delivery</p>
|
||||
<p className='cursor-pointer hover:underline'>Privacy Policy</p>
|
||||
<p className='cursor-pointer hover:underline'>FAQs</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2 sm:gap-3 text-white'>
|
||||
<GiCoffeeBeans 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>
|
||||
<p className='cursor-pointer hover:underline'>Loyalty Program</p>
|
||||
<p className='cursor-pointer hover:underline'>Press + Media</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2 sm:gap-3 text-white'>
|
||||
<GiCoffeeBeans 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>
|
||||
<p className='cursor-pointer hover:underline'>Instagram</p>
|
||||
<p className='cursor-pointer hover:underline'>Facebook</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-20 border-t-2 flex items-center justify-center text-white'>
|
||||
<p className='text-sm sm:text-base mt-2 sm:mt-5'>© Copyright Puffy Dough 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
24
donutshop_ecommerce/src/components/layout/HomeCustom.js
Normal file
24
donutshop_ecommerce/src/components/layout/HomeCustom.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import React from 'react'
|
||||
import { Parallax } from "react-scroll-parallax";
|
||||
import { GoArrowRight } from "react-icons/go";
|
||||
|
||||
|
||||
const HomeCustom = () => {
|
||||
|
||||
return (
|
||||
<div className='bg-[#FFC55A] w-full h-screen flex flex-col gap-10 justify-center items-center px-5 lg:px-10'>
|
||||
<Parallax speed={-10}>
|
||||
<div className='text-center uppercase text-5xl md:text-6xl lg:text-7xl font-bold tracking-wider text-white drop-shadow-[0_3px_3px_rgba(105,105,105,1)] mt-20 md:mt-40 px-5'>
|
||||
<p>Are you looking for</p>
|
||||
<p>something more custom?</p>
|
||||
</div>
|
||||
</Parallax>
|
||||
<div className='flex gap-2 justify-center items-center text-end mt-20 px-6 py-3 font-semibold border border-white rounded-full text-white hover:bg-white hover:text-[#FFC55A] duration-300'>
|
||||
<button className='text-sm uppercase'>Find Out More</button>
|
||||
<GoArrowRight/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HomeCustom
|
||||
|
|
@ -50,6 +50,7 @@ const HomeDrink = () => {
|
|||
]
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Parallax speed={-15}>
|
||||
<div className='w-full h-full bg-[#D1BB9E] rounded-t-3xl pb-20 md:pb-40'>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ const HomeMonthly = () => {
|
|||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
speed: 2000,
|
||||
autoplaySpeed: 2000,
|
||||
speed: 3000,
|
||||
autoplaySpeed: 3000,
|
||||
cssEase: "linear",
|
||||
responsive: [
|
||||
{
|
||||
|
|
@ -68,6 +68,9 @@ const HomeMonthly = () => {
|
|||
</Slider>
|
||||
</div>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" className=' drop-shadow-[0_3px_3px_rgba(105,105,105,1)] absolute -z-10 -mt-1'>
|
||||
<path fill="#5F8670" d="M0,128L8.3,138.7C16.6,149,33,171,50,154.7C66.2,139,83,85,99,90.7C115.9,96,132,160,149,181.3C165.5,203,182,181,199,186.7C215.2,192,232,224,248,234.7C264.8,245,281,235,298,208C314.5,181,331,139,348,154.7C364.1,171,381,245,397,240C413.8,235,430,149,447,122.7C463.4,96,480,128,497,165.3C513.1,203,530,245,546,234.7C562.8,224,579,160,596,149.3C612.4,139,629,181,646,213.3C662.1,245,679,267,695,250.7C711.7,235,728,181,745,133.3C761.4,85,778,43,794,42.7C811,43,828,85,844,106.7C860.7,128,877,128,894,154.7C910.3,181,927,235,943,218.7C960,203,977,117,993,106.7C1009.7,96,1026,160,1043,186.7C1059.3,213,1076,203,1092,197.3C1109,192,1126,192,1142,176C1158.6,160,1175,128,1192,128C1208.3,128,1225,160,1241,192C1257.9,224,1274,256,1291,229.3C1307.6,203,1324,117,1341,80C1357.2,43,1374,53,1390,85.3C1406.9,117,1423,171,1432,197.3L1440,224L1440,0L1431.7,0C1423.4,0,1407,0,1390,0C1373.8,0,1357,0,1341,0C1324.1,0,1308,0,1291,0C1274.5,0,1258,0,1241,0C1224.8,0,1208,0,1192,0C1175.2,0,1159,0,1142,0C1125.5,0,1109,0,1092,0C1075.9,0,1059,0,1043,0C1026.2,0,1010,0,993,0C976.6,0,960,0,943,0C926.9,0,910,0,894,0C877.2,0,861,0,844,0C827.6,0,811,0,794,0C777.9,0,761,0,745,0C728.3,0,712,0,695,0C678.6,0,662,0,646,0C629,0,612,0,596,0C579.3,0,563,0,546,0C529.7,0,513,0,497,0C480,0,463,0,447,0C430.3,0,414,0,397,0C380.7,0,364,0,348,0C331,0,314,0,298,0C281.4,0,265,0,248,0C231.7,0,215,0,199,0C182.1,0,166,0,149,0C132.4,0,116,0,99,0C82.8,0,66,0,50,0C33.1,0,17,0,8,0L0,0Z"></path>
|
||||
</svg>
|
||||
</Parallax>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue