diff --git a/donutshop_ecommerce/public/drink1.png b/donutshop_ecommerce/public/drink1.png new file mode 100644 index 0000000..eefc57c Binary files /dev/null and b/donutshop_ecommerce/public/drink1.png differ diff --git a/donutshop_ecommerce/src/app/globals.css b/donutshop_ecommerce/src/app/globals.css index c934769..59808f0 100644 --- a/donutshop_ecommerce/src/app/globals.css +++ b/donutshop_ecommerce/src/app/globals.css @@ -33,4 +33,5 @@ body{ .letter { transform-origin: 0 70px; } -} \ No newline at end of file +} + diff --git a/donutshop_ecommerce/src/app/page.js b/donutshop_ecommerce/src/app/page.js index b2d32e1..739186c 100644 --- a/donutshop_ecommerce/src/app/page.js +++ b/donutshop_ecommerce/src/app/page.js @@ -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 = () => { + ) diff --git a/donutshop_ecommerce/src/components/layout/HomeCreateBox.js b/donutshop_ecommerce/src/components/layout/HomeCreateBox.js index cf8c5cd..97addd1 100644 --- a/donutshop_ecommerce/src/components/layout/HomeCreateBox.js +++ b/donutshop_ecommerce/src/components/layout/HomeCreateBox.js @@ -5,26 +5,45 @@ import { Parallax } from "react-scroll-parallax"; const HomeCreateBox = () => { return ( -
+
-

Mothers Day Box

-

Lets show our appreciation for our moms by treating them with Mothers Day Box from Puffy Dough!

+

Mothers Day Box

+

Lets show our appreciation for our moms by treating them with the special Mothers Day Box from Puffy Dough!

- -
-
- home-create-box +
+
+ home-create-box
-
-

Mothers Day Box

+
+

Mothers Day Donut Flavours:

+
+

Love You Mama

+

Strawberry frosted raised ring topped with Mothers Day sprinkle

+
+
+

Sweet & Salty

+

Strawberry frosted vanilla cake topped with cream cheese frosting and crushed pretzels

+
+
+

Hi Mom

+

Vanilla cake topped with vanilla buttercream, covered in pink icing with candy décor and a red rosette

+
+
+

Love Mom

+

Hot pink frosted with black and white drizzle and a heart-shaped doughnut filled with chocolate whip

+
+
+

Tenderheart Bear

+

Raspberry frosted raised bear topped with Tenderheart Bear décor

+
diff --git a/donutshop_ecommerce/src/components/layout/HomeDrink.js b/donutshop_ecommerce/src/components/layout/HomeDrink.js new file mode 100644 index 0000000..6b4fb29 --- /dev/null +++ b/donutshop_ecommerce/src/components/layout/HomeDrink.js @@ -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 ( + +
+
+

Coffee and Drinks

+

Enjoy a selection of freshly made coffee and drinks available in a range of delightful flavors.

+
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ ) +} + +export default HomeMonthly \ No newline at end of file diff --git a/donutshop_ecommerce/src/components/layout/HomeMenu.js b/donutshop_ecommerce/src/components/layout/HomeMenu.js index b9dff0b..e49e085 100644 --- a/donutshop_ecommerce/src/components/layout/HomeMenu.js +++ b/donutshop_ecommerce/src/components/layout/HomeMenu.js @@ -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 ( -
+
-

Treat yourself

+

Treat yourself

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

@@ -86,4 +86,4 @@ const HomeMenu = () => { ) } -export default HomeMenu \ No newline at end of file +export default HomeDrink \ No newline at end of file diff --git a/donutshop_ecommerce/src/components/menu/DrinkItem.js b/donutshop_ecommerce/src/components/menu/DrinkItem.js new file mode 100644 index 0000000..67cadeb --- /dev/null +++ b/donutshop_ecommerce/src/components/menu/DrinkItem.js @@ -0,0 +1,15 @@ +import Image from 'next/image' +import React from 'react' + +const DrinkItem = () => { + return ( +
+ menu-donut +

coffee milkshake

+

$7.59

+ +
+ ) +} + +export default DrinkItem \ No newline at end of file