From 74a847062b9b9666b445ab1b00812d5e40c06484 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Thu, 9 May 2024 21:12:53 -0500
Subject: [PATCH] finished ui homepage

---
 donutshop_ecommerce/src/app/page.js           |  4 ++
 .../src/components/layout/Footer.js           | 51 +++++++++++++++++++
 .../src/components/layout/HomeCustom.js       | 24 +++++++++
 .../src/components/layout/HomeMenu.js         |  1 +
 .../src/components/layout/HomeMonthly.js      |  7 ++-
 5 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 donutshop_ecommerce/src/components/layout/Footer.js
 create mode 100644 donutshop_ecommerce/src/components/layout/HomeCustom.js

diff --git a/donutshop_ecommerce/src/app/page.js b/donutshop_ecommerce/src/app/page.js
index f857980..a19ae18 100644
--- a/donutshop_ecommerce/src/app/page.js
+++ b/donutshop_ecommerce/src/app/page.js
@@ -1,4 +1,5 @@
 "use client"
+import HomeCustom from '@/components/layout/HomeCustom'
 import Header from '@/components/layout/Header'
 import Hero from '@/components/layout/Hero'
 import HomeCreateBox from '@/components/layout/HomeCreateBox'
@@ -6,6 +7,7 @@ import HomeMenu from '@/components/layout/HomeMenu'
 import HomeMonthly from '@/components/layout/HomeMonthly'
 import React from 'react'
 import { ParallaxProvider } from "react-scroll-parallax";
+import Footer from '@/components/layout/Footer'
 
 const page = () => {
   return (
@@ -15,6 +17,8 @@ const page = () => {
     <HomeMenu/>
     <HomeCreateBox/>
     <HomeMonthly/>
+    <HomeCustom/>
+    <Footer/>
   </ParallaxProvider>
 
   )
diff --git a/donutshop_ecommerce/src/components/layout/Footer.js b/donutshop_ecommerce/src/components/layout/Footer.js
new file mode 100644
index 0000000..de95573
--- /dev/null
+++ b/donutshop_ecommerce/src/components/layout/Footer.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import { GiCoffeeBeans } from "react-icons/gi";
+
+const Footer = () => {
+  return (
+    <div className='w-full h-full bg-[#FFC55A] px-5 lg:px-10 pb-5'>
+        <div className='grid grid-cols-1 md:grid-cols-2'>
+            <div className='w-full xl:w-3/4 flex flex-col gap-4 text-start text-white pl-0 md:pl-10 xl:pl-20 2xl:pl-40'>
+                <p className='uppercase font-bold text-2xl lg:text-4xl mb-0 lg:mb-2'>Stay up to date</p>
+                <input placeholder='Name' className='outline-none bg-transparent px-4 lg:px-6 py-2 lg:py-3 border border-white rounded-full'/>
+                <input placeholder='Email' className='outline-none bg-transparent px-4 lg:px-6 py-2 lg:py-3 border border-white rounded-full'/>
+                <button className='px-4 lg:px-6 py-2 lg:py-3 border border-white rounded-full text-white hover:bg-white hover:text-[#FFC55A] duration-300'>Subscribe</button>
+            </div>
+            <div className='flex flex-col gap-5 sm:gap-0 sm:flex-row justify-evenly mt-10 md:mt-0'>
+                <div className='flex flex-col gap-2 sm:gap-3 text-white'>
+                    <GiCoffeeBeans className='text-2xl sm:text-3xl'/>
+                    <p className='text-base sm:text-lg font-bold uppercase'>Info</p>
+                    <div className='flex flex-col gap-2 text-sm sm:text-base'>
+                        <p className='cursor-pointer hover:underline'>Shipping + Delivery</p>
+                        <p className='cursor-pointer hover:underline'>Privacy Policy</p>
+                        <p className='cursor-pointer hover:underline'>FAQs</p>
+                    </div>
+                </div>
+                <div className='flex flex-col gap-2 sm:gap-3 text-white'>
+                    <GiCoffeeBeans className='text-2xl sm:text-3xl'/>
+                    <p className='text-base sm:text-lg font-bold uppercase'>Learn</p>
+                    <div className='flex flex-col gap-2 text-sm sm:text-base'>
+                        <p className='cursor-pointer hover:underline'>Gift Cards</p>
+                        <p className='cursor-pointer hover:underline'>Loyalty Program</p>
+                        <p className='cursor-pointer hover:underline'>Press + Media</p>
+                    </div>
+                </div>
+                <div className='flex flex-col gap-2 sm:gap-3 text-white'>
+                    <GiCoffeeBeans className='text-2xl sm:text-3xl'/>
+                    <p className='text-base sm:text-lg font-bold uppercase'>Contact</p>
+                    <div className='flex flex-col gap-2 text-sm sm:text-base'>
+                        <p className='cursor-pointer hover:underline'>Contact Us</p>
+                        <p className='cursor-pointer hover:underline'>Instagram</p>
+                        <p className='cursor-pointer hover:underline'>Facebook</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div className='mt-20 border-t-2 flex items-center justify-center text-white'>
+            <p className='text-sm sm:text-base mt-2 sm:mt-5'>© Copyright Puffy Dough 2024</p>
+        </div>
+    </div>
+  )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/components/layout/HomeCustom.js b/donutshop_ecommerce/src/components/layout/HomeCustom.js
new file mode 100644
index 0000000..a32621a
--- /dev/null
+++ b/donutshop_ecommerce/src/components/layout/HomeCustom.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { Parallax } from "react-scroll-parallax";
+import { GoArrowRight } from "react-icons/go";
+
+
+const HomeCustom = () => {
+
+  return (
+    <div className='bg-[#FFC55A] w-full h-screen flex flex-col gap-10 justify-center items-center px-5 lg:px-10'>
+      <Parallax speed={-10}>
+      <div className='text-center uppercase text-5xl md:text-6xl lg:text-7xl font-bold tracking-wider text-white drop-shadow-[0_3px_3px_rgba(105,105,105,1)] mt-20 md:mt-40 px-5'>
+        <p>Are you looking for</p>
+        <p>something more custom?</p>
+      </div>
+      </Parallax>
+      <div className='flex gap-2 justify-center items-center text-end mt-20 px-6 py-3 font-semibold border border-white rounded-full text-white hover:bg-white hover:text-[#FFC55A] duration-300'>
+        <button className='text-sm uppercase'>Find Out More</button>
+        <GoArrowRight/>
+      </div>
+    </div>
+  )
+}
+
+export default HomeCustom
\ 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 b5fc1e7..82c62a7 100644
--- a/donutshop_ecommerce/src/components/layout/HomeMenu.js
+++ b/donutshop_ecommerce/src/components/layout/HomeMenu.js
@@ -50,6 +50,7 @@ const HomeDrink = () => {
     ]
   };
   
+  
   return (
     <Parallax speed={-15}>
     <div className='w-full h-full bg-[#D1BB9E] rounded-t-3xl pb-20 md:pb-40'>
diff --git a/donutshop_ecommerce/src/components/layout/HomeMonthly.js b/donutshop_ecommerce/src/components/layout/HomeMonthly.js
index 7cd5ff8..6002f87 100644
--- a/donutshop_ecommerce/src/components/layout/HomeMonthly.js
+++ b/donutshop_ecommerce/src/components/layout/HomeMonthly.js
@@ -13,8 +13,8 @@ const HomeMonthly = () => {
     slidesToShow: 3,
     slidesToScroll: 1,
     autoplay: true,
-    speed: 2000,
-    autoplaySpeed: 2000,
+    speed: 3000,
+    autoplaySpeed: 3000,
     cssEase: "linear",
     responsive: [
       {
@@ -68,6 +68,9 @@ const HomeMonthly = () => {
           </Slider>
         </div>
       </div>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" className=' drop-shadow-[0_3px_3px_rgba(105,105,105,1)] absolute -z-10 -mt-1'>
+        <path fill="#5F8670" d="M0,128L8.3,138.7C16.6,149,33,171,50,154.7C66.2,139,83,85,99,90.7C115.9,96,132,160,149,181.3C165.5,203,182,181,199,186.7C215.2,192,232,224,248,234.7C264.8,245,281,235,298,208C314.5,181,331,139,348,154.7C364.1,171,381,245,397,240C413.8,235,430,149,447,122.7C463.4,96,480,128,497,165.3C513.1,203,530,245,546,234.7C562.8,224,579,160,596,149.3C612.4,139,629,181,646,213.3C662.1,245,679,267,695,250.7C711.7,235,728,181,745,133.3C761.4,85,778,43,794,42.7C811,43,828,85,844,106.7C860.7,128,877,128,894,154.7C910.3,181,927,235,943,218.7C960,203,977,117,993,106.7C1009.7,96,1026,160,1043,186.7C1059.3,213,1076,203,1092,197.3C1109,192,1126,192,1142,176C1158.6,160,1175,128,1192,128C1208.3,128,1225,160,1241,192C1257.9,224,1274,256,1291,229.3C1307.6,203,1324,117,1341,80C1357.2,43,1374,53,1390,85.3C1406.9,117,1423,171,1432,197.3L1440,224L1440,0L1431.7,0C1423.4,0,1407,0,1390,0C1373.8,0,1357,0,1341,0C1324.1,0,1308,0,1291,0C1274.5,0,1258,0,1241,0C1224.8,0,1208,0,1192,0C1175.2,0,1159,0,1142,0C1125.5,0,1109,0,1092,0C1075.9,0,1059,0,1043,0C1026.2,0,1010,0,993,0C976.6,0,960,0,943,0C926.9,0,910,0,894,0C877.2,0,861,0,844,0C827.6,0,811,0,794,0C777.9,0,761,0,745,0C728.3,0,712,0,695,0C678.6,0,662,0,646,0C629,0,612,0,596,0C579.3,0,563,0,546,0C529.7,0,513,0,497,0C480,0,463,0,447,0C430.3,0,414,0,397,0C380.7,0,364,0,348,0C331,0,314,0,298,0C281.4,0,265,0,248,0C231.7,0,215,0,199,0C182.1,0,166,0,149,0C132.4,0,116,0,99,0C82.8,0,66,0,50,0C33.1,0,17,0,8,0L0,0Z"></path>
+      </svg>
     </Parallax>
   )
 }