added deink component
This commit is contained in:
parent
5a8854b5e0
commit
7d50fc034d
7 changed files with 135 additions and 14 deletions
BIN
donutshop_ecommerce/public/drink1.png
Normal file
BIN
donutshop_ecommerce/public/drink1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
|
|
@ -33,4 +33,5 @@ body{
|
|||
.letter {
|
||||
transform-origin: 0 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import Header from '@/components/layout/Header'
|
|||
import Hero from '@/components/layout/Hero'
|
||||
import HomeCreateBox from '@/components/layout/HomeCreateBox'
|
||||
import HomeMenu from '@/components/layout/HomeMenu'
|
||||
import HomeDrink from '@/components/layout/HomeDrink'
|
||||
import React from 'react'
|
||||
import { ParallaxProvider } from "react-scroll-parallax";
|
||||
|
||||
|
|
@ -13,6 +14,7 @@ const page = () => {
|
|||
<Hero/>
|
||||
<HomeMenu/>
|
||||
<HomeCreateBox/>
|
||||
<HomeDrink/>
|
||||
</ParallaxProvider>
|
||||
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,26 +5,45 @@ import { Parallax } from "react-scroll-parallax";
|
|||
const HomeCreateBox = () => {
|
||||
return (
|
||||
<Parallax speed={-5}>
|
||||
<div className='w-full h-full bg-[#FFD0D0] rounded-t-3xl md:pb-20 pb-10'>
|
||||
<div className='w-full h-full bg-[#FFD0D0] rounded-t-3xl md:pb-20 pb-10 px-5'>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 items-center py-10 px-5 lg:px-10'>
|
||||
<div className='w-full hidden md:flex mt-5 md:mt-0 justify-center md:justify-start'>
|
||||
<button className='px-4 lg:px-6 py-2 text-sm lg:text-base lg:py-3 uppercase rounded-full font-semibold border border-[#95743D] text-[#95743D] hover:text-[#FFD0D0] hover:bg-[#E78895] hover:border-[#E78895] duration-300'>View Product</button>
|
||||
</div>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<p className='text-center md:text-end text-4xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[4.5vw] text-[#FF8989] uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Mothers Day Box</p>
|
||||
<p className='w-full text-center md:text-end text-base lg:text-lg text-[#95743D]'>Lets show our appreciation for our moms by treating them with Mothers Day Box from Puffy Dough!</p>
|
||||
<p className='text-center md:text-end text-3xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[4.5vw] text-[#FF8989] uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Mothers Day Box</p>
|
||||
<p className='w-full text-center md:text-end text-base lg:text-lg xl:text-xl text-[#95743D]'>Lets show our appreciation for our moms by treating them with the special Mothers Day Box from Puffy Dough!</p>
|
||||
</div>
|
||||
<div className='w-full flex md:hidden mt-5 md:mt-0 justify-center md:justify-end items-end text-end'>
|
||||
<button className='px-4 lg:px-6 py-2 text-sm lg:text-base lg:py-3 uppercase rounded-full font-semibold border border-[#95743D] text-[#95743D] hover:text-[#FFD0D0] hover:bg-[#E78895] hover:border-[#E78895] duration-300'>View Product</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col md:flex-row justify-between px-5 lg:px-10'>
|
||||
<div className='flex justify-center md:justify-start items-center mt-5 md:mt-0'>
|
||||
<Image src='/donuts_special.jpg' width={800} height={800} alt='home-create-box' className='w-[800px] h-[500px] md:h-[600px] xl:-[700px] 2xl:h-[800px] object-cover rounded-xl'/>
|
||||
<div className='flex flex-col md:flex-row justify-between px-2 lg:px-5 mb-5'>
|
||||
<div className='flex justify-center md:justify-start items-center px-2'>
|
||||
<Image src='/donuts_special.jpg' width={800} height={800} alt='home-create-box' className='w-[800px] md:w-[600px] xl:w-[800px] h-[500px] md:h-[600px] xl:h-[650px] 2xl:h-[800px] object-cover rounded-xl'/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Mothers Day Box</p>
|
||||
<div className='flex flex-col text-center md:text-end px-2 gap-5 md:items-end items-center'>
|
||||
<p className='text-base lg:text-lg xl:text-xl text-[#AE1D74] font-bold mt-5 md:mt-0'>Mothers Day Donut Flavours:</p>
|
||||
<div className='text-base lg:text-lg text-[#AE1D74]'>
|
||||
<p className='font-semibold'>Love You Mama</p>
|
||||
<p className='text-sm md:text-base'>Strawberry frosted raised ring topped with Mothers Day sprinkle</p>
|
||||
</div>
|
||||
<div className='text-base lg:text-lg text-[#AE1D74]'>
|
||||
<p className='font-semibold'>Sweet & Salty</p>
|
||||
<p className='text-sm md:text-base'>Strawberry frosted vanilla cake topped with cream cheese frosting and crushed pretzels</p>
|
||||
</div>
|
||||
<div className='text-base lg:text-lg text-[#AE1D74]'>
|
||||
<p className='font-semibold'>Hi Mom</p>
|
||||
<p className='text-sm md:text-base'>Vanilla cake topped with vanilla buttercream, covered in pink icing with candy décor and a red rosette</p>
|
||||
</div>
|
||||
<div className='text-base lg:text-lg text-[#AE1D74]'>
|
||||
<p className='font-semibold'>Love Mom</p>
|
||||
<p className='text-sm md:text-base'>Hot pink frosted with black and white drizzle and a heart-shaped doughnut filled with chocolate whip </p>
|
||||
</div>
|
||||
<div className='text-base lg:text-lg text-[#AE1D74]'>
|
||||
<p className='font-semibold'>Tenderheart Bear</p>
|
||||
<p className='text-sm md:text-base'>Raspberry frosted raised bear topped with Tenderheart Bear décor</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
84
donutshop_ecommerce/src/components/layout/HomeDrink.js
Normal file
84
donutshop_ecommerce/src/components/layout/HomeDrink.js
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import React from 'react'
|
||||
import { Parallax } from "react-scroll-parallax";
|
||||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import Image from 'next/image';
|
||||
import DrinkItem from '../menu/DrinkItem';
|
||||
|
||||
const HomeMonthly = () => {
|
||||
var drinkSlide = {
|
||||
dots: false,
|
||||
infinite: false,
|
||||
speed: 500,
|
||||
slidesToShow: 5,
|
||||
initialSlide: 0,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1524,
|
||||
settings: {
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
infinite: true,
|
||||
dots: false
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
infinite: true,
|
||||
dots: false
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 810,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
initialSlide: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
return (
|
||||
<Parallax speed={0}>
|
||||
<div className='w-full h-full bg-[#5F8670] rounded-t-3xl pb-20'>
|
||||
<div className='flex flex-col gap-4 py-5 sm:py-10 px-5 lg:px-10'>
|
||||
<p className='text-center md:text-start text-3xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[5vw] text-[#BACD92] uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Coffee and Drinks</p>
|
||||
<p className='w-full md:w-[500px] lg:w-[600px] text-center md:text-start text-base lg:text-lg xl:text-xl text-white'>Enjoy a selection of freshly made coffee and drinks available in a range of delightful flavors.</p>
|
||||
</div>
|
||||
<div className='py-2 sm:py-10 px-10'>
|
||||
<Slider arrows={false} {...drinkSlide}>
|
||||
<div className='px-2'>
|
||||
<DrinkItem/>
|
||||
</div>
|
||||
<div className='px-2'>
|
||||
<DrinkItem/>
|
||||
</div>
|
||||
<div className='px-2'>
|
||||
<DrinkItem/>
|
||||
</div>
|
||||
<div className='px-2'>
|
||||
<DrinkItem/>
|
||||
</div>
|
||||
<div className='px-2'>
|
||||
<DrinkItem/>
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
</div>
|
||||
</Parallax>
|
||||
)
|
||||
}
|
||||
|
||||
export default HomeMonthly
|
||||
|
|
@ -6,7 +6,7 @@ import "slick-carousel/slick/slick.css";
|
|||
import "slick-carousel/slick/slick-theme.css";
|
||||
|
||||
|
||||
const HomeMenu = () => {
|
||||
const HomeDrink = () => {
|
||||
var menuSlide = {
|
||||
dots: false,
|
||||
infinite: false,
|
||||
|
|
@ -52,10 +52,10 @@ const HomeMenu = () => {
|
|||
|
||||
return (
|
||||
<Parallax speed={-10}>
|
||||
<div className='w-full h-full bg-[#D1BB9E] rounded-t-3xl md:pb-20 pb-10'>
|
||||
<div className='w-full h-full bg-[#D1BB9E] rounded-t-3xl md:pb-40 pb-20'>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 items-center py-5 sm:py-10 px-5 lg:px-10'>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<p className='text-center md:text-start text-4xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[5vw] text-yellow-100 uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Treat yourself</p>
|
||||
<p className='text-center md:text-start text-3xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[5vw] text-yellow-100 uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Treat yourself</p>
|
||||
<p className='w-full md:w-[500px] lg:w-[800px] text-center md:text-start text-base lg:text-lg xl:text-xl text-white'>Puffy Dought offers a wide range of flavors to choose from including classic favorites like glazed and chocolate, as well as unique flavors like Black Sesame Matcha and Passionfruit Creamcheese</p>
|
||||
</div>
|
||||
<div className='w-full flex mt-5 md:mt-0 justify-center md:justify-end items-end text-end'>
|
||||
|
|
@ -86,4 +86,4 @@ const HomeMenu = () => {
|
|||
)
|
||||
}
|
||||
|
||||
export default HomeMenu
|
||||
export default HomeDrink
|
||||
15
donutshop_ecommerce/src/components/menu/DrinkItem.js
Normal file
15
donutshop_ecommerce/src/components/menu/DrinkItem.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import Image from 'next/image'
|
||||
import React from 'react'
|
||||
|
||||
const DrinkItem = () => {
|
||||
return (
|
||||
<div className='py-1 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center rounded-xl bg-white h-[350px] sm:h-[450px]'>
|
||||
<Image src='/drink1.png' width={300} height={300} alt='menu-donut' className='w-[80px] sm:w-[100px]'/>
|
||||
<p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>coffee milkshake</p>
|
||||
<p className='text-[#95743D] text-sm'>$7.59</p>
|
||||
<button className='px-2 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm border border-[#E78895] text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Add to cart</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrinkItem
|
||||
Loading…
Add table
Reference in a new issue