updated code
This commit is contained in:
parent
7d50fc034d
commit
1b1f93d88b
12 changed files with 80 additions and 104 deletions
BIN
donutshop_ecommerce/public/donut10.png
Normal file
BIN
donutshop_ecommerce/public/donut10.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 146 KiB |
BIN
donutshop_ecommerce/public/donut6.png
Normal file
BIN
donutshop_ecommerce/public/donut6.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 232 KiB |
BIN
donutshop_ecommerce/public/donut7.png
Normal file
BIN
donutshop_ecommerce/public/donut7.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 386 KiB |
BIN
donutshop_ecommerce/public/donut8.png
Normal file
BIN
donutshop_ecommerce/public/donut8.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 224 KiB |
BIN
donutshop_ecommerce/public/donut9.png
Normal file
BIN
donutshop_ecommerce/public/donut9.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 230 KiB |
Binary file not shown.
Before Width: | Height: | Size: 141 KiB |
|
@ -3,7 +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 HomeMonthly from '@/components/layout/HomeMonthly'
|
||||
import React from 'react'
|
||||
import { ParallaxProvider } from "react-scroll-parallax";
|
||||
|
||||
|
@ -14,7 +14,7 @@ const page = () => {
|
|||
<Hero/>
|
||||
<HomeMenu/>
|
||||
<HomeCreateBox/>
|
||||
<HomeDrink/>
|
||||
<HomeMonthly/>
|
||||
</ParallaxProvider>
|
||||
|
||||
)
|
||||
|
|
|
@ -4,7 +4,7 @@ import { Parallax } from "react-scroll-parallax";
|
|||
|
||||
const HomeCreateBox = () => {
|
||||
return (
|
||||
<Parallax speed={-5}>
|
||||
<Parallax speed={-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'>
|
||||
|
|
|
@ -1,84 +0,0 @@
|
|||
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
|
|
@ -51,8 +51,8 @@ const HomeDrink = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<Parallax speed={-10}>
|
||||
<div className='w-full h-full bg-[#D1BB9E] rounded-t-3xl md:pb-40 pb-20'>
|
||||
<Parallax speed={-15}>
|
||||
<div className='w-full h-full bg-[#D1BB9E] rounded-t-3xl pb-20 md:pb-40'>
|
||||
<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-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>
|
||||
|
|
75
donutshop_ecommerce/src/components/layout/HomeMonthly.js
Normal file
75
donutshop_ecommerce/src/components/layout/HomeMonthly.js
Normal file
|
@ -0,0 +1,75 @@
|
|||
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';
|
||||
|
||||
|
||||
const HomeMonthly = () => {
|
||||
const settings = {
|
||||
dots: false,
|
||||
infinite: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
speed: 2000,
|
||||
autoplaySpeed: 2000,
|
||||
cssEase: "linear",
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 815,
|
||||
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)]'>Monthly Special</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'>Each month we bring different donuts to a classic flavor, so no two months are the same. Save up to 40% on special donuts only for our members!</p>
|
||||
<p className='w-full md:w-[500px] lg:w-[800px] text-center md:text-start text-base text-white'><span className='text-red-700 text-xl'>**</span> Save up to 30% on special donuts only for our members!</p>
|
||||
</div>
|
||||
<div className="mt-10 sm:mt-20">
|
||||
<Slider {...settings}>
|
||||
<div className='flex flex-col text-center items-center justify-center'>
|
||||
<Image src='/donut6.png' width={350} height={350} alt='monthly' className='w-[200px] sm:w-[300px] m-auto'/>
|
||||
<p className='text-white font-semibold capitalize'>Oreo cookie crumble</p>
|
||||
</div>
|
||||
<div className='flex flex-col text-center items-center justify-center'>
|
||||
<Image src='/donut7.png' width={350} height={350} alt='monthly' className='w-[250px] sm:w-[350px] m-auto'/>
|
||||
<p className='text-white font-semibold capitalize'>Reese's Peanut Butter Cup</p>
|
||||
</div>
|
||||
<div className='flex flex-col text-center items-center justify-center'>
|
||||
<Image src='/donut8.png' width={350} height={350} alt='monthly' className='w-[250px] sm:w-[350px] m-auto'/>
|
||||
<p className='text-white font-semibold capitalize'>M&M Chocolate Boston cream</p>
|
||||
</div>
|
||||
<div className='flex flex-col text-center items-center justify-center'>
|
||||
<Image src='/donut9.png' width={350} height={350} alt='monthly' className='w-[250px] sm:w-[350px] m-auto'/>
|
||||
<p className='text-white font-semibold capitalize'>White Chocolate & Nutella Bueno</p>
|
||||
</div>
|
||||
<div className='flex flex-col text-center items-center justify-center'>
|
||||
<Image src='/donut10.png' width={350} height={350} alt='monthly' className='w-[200px] sm:w-[300px] m-auto'/>
|
||||
<p className='text-white font-semibold capitalize'>White Chocolate Matcha Pistachio</p>
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
</div>
|
||||
</Parallax>
|
||||
)
|
||||
}
|
||||
|
||||
export default HomeMonthly
|
|
@ -1,15 +0,0 @@
|
|||
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