diff --git a/donutshop_ecommerce/package-lock.json b/donutshop_ecommerce/package-lock.json index 4b8ae15..b1c3116 100644 --- a/donutshop_ecommerce/package-lock.json +++ b/donutshop_ecommerce/package-lock.json @@ -12,7 +12,10 @@ "next": "14.2.3", "react": "^18", "react-dom": "^18", - "react-icons": "^5.2.0" + "react-icons": "^5.2.0", + "react-scroll-parallax": "^3.4.5", + "react-slick": "^0.30.2", + "slick-carousel": "^1.8.1" }, "devDependencies": { "eslint": "^8", @@ -893,6 +896,11 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/bezier-easing": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", + "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==" + }, "node_modules/binary-extensions": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", @@ -1046,6 +1054,11 @@ "node": ">= 6" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", @@ -1294,6 +1307,11 @@ "node": ">=10.13.0" } }, + "node_modules/enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==" + }, "node_modules/es-abstract": { "version": "1.23.3", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz", @@ -2840,6 +2858,12 @@ "jiti": "bin/jiti.js" } }, + "node_modules/jquery": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", + "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", + "peer": true + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -2875,6 +2899,14 @@ "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", "dev": true }, + "node_modules/json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==", + "dependencies": { + "string-convert": "^0.2.0" + } + }, "node_modules/json5": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", @@ -2972,6 +3004,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -3365,6 +3402,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/parallax-controller": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/parallax-controller/-/parallax-controller-1.7.1.tgz", + "integrity": "sha512-facVMEBnUynzMN7hCSqyNpF6uyCpVIl4XAUyTR9D8q2JlhgyPY6bZtj/OkFk3+Cpka1TnYCppQb8BzDWHtSaZg==", + "dependencies": { + "bezier-easing": "^2.1.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -3714,6 +3762,37 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/react-scroll-parallax": { + "version": "3.4.5", + "resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.4.5.tgz", + "integrity": "sha512-4NLZQ8cZEUyxoA95DfrXWneOOUSFrFmpM0dZNzMErmuJ0LzY+CCw8Xw0hqB6xxHWxNknfs46AozyIPSWkZeucA==", + "dependencies": { + "parallax-controller": "^1.7.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16.8.0-0 || >=17.0.1 || ^18.0.0", + "react-dom": "^16.8.0-0 || >=17.0.1 || ^18.0.0" + } + }, + "node_modules/react-slick": { + "version": "0.30.2", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz", + "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==", + "dependencies": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -3780,6 +3859,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -4045,6 +4129,14 @@ "node": ">=8" } }, + "node_modules/slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "peerDependencies": { + "jquery": ">=1.8.0" + } + }, "node_modules/source-map-js": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", @@ -4061,6 +4153,11 @@ "node": ">=10.0.0" } }, + "node_modules/string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==" + }, "node_modules/string-width": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", diff --git a/donutshop_ecommerce/package.json b/donutshop_ecommerce/package.json index 349401d..4fa99cf 100644 --- a/donutshop_ecommerce/package.json +++ b/donutshop_ecommerce/package.json @@ -13,7 +13,10 @@ "next": "14.2.3", "react": "^18", "react-dom": "^18", - "react-icons": "^5.2.0" + "react-icons": "^5.2.0", + "react-scroll-parallax": "^3.4.5", + "react-slick": "^0.30.2", + "slick-carousel": "^1.8.1" }, "devDependencies": { "eslint": "^8", diff --git a/donutshop_ecommerce/public/donut1.png b/donutshop_ecommerce/public/donut1.png new file mode 100644 index 0000000..0482a54 Binary files /dev/null and b/donutshop_ecommerce/public/donut1.png differ diff --git a/donutshop_ecommerce/public/donut2.png b/donutshop_ecommerce/public/donut2.png new file mode 100644 index 0000000..22d54e1 Binary files /dev/null and b/donutshop_ecommerce/public/donut2.png differ diff --git a/donutshop_ecommerce/public/donut3.png b/donutshop_ecommerce/public/donut3.png new file mode 100644 index 0000000..eafe95c Binary files /dev/null and b/donutshop_ecommerce/public/donut3.png differ diff --git a/donutshop_ecommerce/public/donut4.png b/donutshop_ecommerce/public/donut4.png new file mode 100644 index 0000000..d09b918 Binary files /dev/null and b/donutshop_ecommerce/public/donut4.png differ diff --git a/donutshop_ecommerce/public/donut5.png b/donutshop_ecommerce/public/donut5.png new file mode 100644 index 0000000..7efb48b Binary files /dev/null and b/donutshop_ecommerce/public/donut5.png differ diff --git a/donutshop_ecommerce/public/donuts_special.jpg b/donutshop_ecommerce/public/donuts_special.jpg new file mode 100644 index 0000000..379bc3f Binary files /dev/null and b/donutshop_ecommerce/public/donuts_special.jpg differ diff --git a/donutshop_ecommerce/src/app/globals.css b/donutshop_ecommerce/src/app/globals.css index 4e09f29..c934769 100644 --- a/donutshop_ecommerce/src/app/globals.css +++ b/donutshop_ecommerce/src/app/globals.css @@ -2,6 +2,10 @@ @tailwind components; @tailwind utilities; + +html{ + overflow-x: hidden; +} body{ background-color: #FDE2DE; overflow-x: hidden; diff --git a/donutshop_ecommerce/src/app/page.js b/donutshop_ecommerce/src/app/page.js index 0e423fc..b2d32e1 100644 --- a/donutshop_ecommerce/src/app/page.js +++ b/donutshop_ecommerce/src/app/page.js @@ -1,15 +1,20 @@ +"use client" 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 React from 'react' +import { ParallaxProvider } from "react-scroll-parallax"; const page = () => { return ( - <> -
- - - + +
+ + + + + ) } diff --git a/donutshop_ecommerce/src/components/layout/Header.js b/donutshop_ecommerce/src/components/layout/Header.js index e0f67de..e16755b 100644 --- a/donutshop_ecommerce/src/components/layout/Header.js +++ b/donutshop_ecommerce/src/components/layout/Header.js @@ -4,7 +4,6 @@ import Image from 'next/image'; import Link from 'next/link'; import { IoCloseOutline } from "react-icons/io5"; import { HiBars2 } from "react-icons/hi2"; -import Hero from "./Hero"; const Header = () => { @@ -15,7 +14,7 @@ const Header = () => { return ( -
+
diff --git a/donutshop_ecommerce/src/components/layout/Hero.js b/donutshop_ecommerce/src/components/layout/Hero.js index 51ed96a..42484ea 100644 --- a/donutshop_ecommerce/src/components/layout/Hero.js +++ b/donutshop_ecommerce/src/components/layout/Hero.js @@ -12,30 +12,31 @@ const Hero = () => { const textAnimation1 = { animate: {x: [-1000, 0], transition: {x: {repeat: Infinity, repeatType: "loop", duration: 5, ease: "linear",},},}, }; + return ( <> -
-
+
+
-

Donuts worry about things! Donuts worry about things! Donuts worry about things!

+

Donuts worry about things! Donuts worry about things! Donuts worry about things!

-
+

Donuts worry about things! Donuts worry about things! Donuts worry about things!

-
+

Donuts worry about things! Donuts worry about things! Donuts worry about things!

- home_donut - home_donut -

We bake our donuts fresh everyday using high-quality ingredients without artificial additives.

+ home_donut + home_donut +

We bake our donuts fresh everyday using high-quality ingredients without artificial additives.

Order
diff --git a/donutshop_ecommerce/src/components/layout/HomeCreateBox.js b/donutshop_ecommerce/src/components/layout/HomeCreateBox.js new file mode 100644 index 0000000..cf8c5cd --- /dev/null +++ b/donutshop_ecommerce/src/components/layout/HomeCreateBox.js @@ -0,0 +1,35 @@ +import Image from 'next/image'; +import React from 'react' +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!

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

Mothers Day Box

+
+
+
+
+ ) +} + +export default HomeCreateBox diff --git a/donutshop_ecommerce/src/components/layout/HomeMenu.js b/donutshop_ecommerce/src/components/layout/HomeMenu.js index d449944..b9dff0b 100644 --- a/donutshop_ecommerce/src/components/layout/HomeMenu.js +++ b/donutshop_ecommerce/src/components/layout/HomeMenu.js @@ -1,8 +1,88 @@ import React from 'react' +import { Parallax } from "react-scroll-parallax"; +import MenuItem from '../menu/MenuItem'; +import Slider from "react-slick"; +import "slick-carousel/slick/slick.css"; +import "slick-carousel/slick/slick-theme.css"; + const HomeMenu = () => { + var menuSlide = { + 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 ( -
HomeMenu
+ +
+
+
+

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

+
+
+ +
+
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
) } diff --git a/donutshop_ecommerce/src/components/menu/MenuItem.js b/donutshop_ecommerce/src/components/menu/MenuItem.js new file mode 100644 index 0000000..1aaf3ad --- /dev/null +++ b/donutshop_ecommerce/src/components/menu/MenuItem.js @@ -0,0 +1,17 @@ +import React from 'react' +import Image from 'next/image'; + +const MenuItem = () => { + + + return ( +
+ menu-donut +

Chocolate Beurre noisette Walnut Cream

+

$5.99

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