jtpmcdevitt/web_next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated code

Browse source
This commit is contained in:
Juthatip McDevitt 2024-05-09 11:22:05 -05:00
parent 7d50fc034d
commit 1b1f93d88b
12 changed files with 80 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
donutshop_ecommerce/public/donut10.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 146 KiB

BIN
donutshop_ecommerce/public/donut6.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 232 KiB

BIN
donutshop_ecommerce/public/donut7.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 386 KiB

BIN
donutshop_ecommerce/public/donut8.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 224 KiB

BIN
donutshop_ecommerce/public/donut9.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 230 KiB

BIN
donutshop_ecommerce/public/drink1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 141 KiB

4
donutshop_ecommerce/src/app/page.js
View file

@ -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>
)

2
donutshop_ecommerce/src/components/layout/HomeCreateBox.js
View file

@ -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'>

84
donutshop_ecommerce/src/components/layout/HomeDrink.js
View file

@ -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

4
donutshop_ecommerce/src/components/layout/HomeMenu.js
View file

@ -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
View 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

15
donutshop_ecommerce/src/components/menu/DrinkItem.js
View file

@ -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