adding contact page , and complate order page , fixing foot proggllems ,

.firebase/hosting.ZGlzdA.cache

@@ -0,0 +1,33 @@
+404.html,1683466651741,daa499dd96d8229e73235345702ba32f0793f0c8e5c0d30e40e37a5872be57aa
+index.html,1683466303175,c3e3564b3be86954e0f71bbdd9cf5cdd3f8f567783fabeaa71f6b50d2f79a51b
+assets/1-b0f5ed3a.png,1683466211192,38f8c7560ab652a0cd3a72d2cd7e9e662b3fda570febdcfcad4a91a7f53cf77d
+assets/1-b5238d62.png,1683466211193,722b0150bc4ce038c3f1bb425fdcfb80320d4defb0fcf740b07620f4a7bd4aa3
+assets/10-19650235.png,1683466211199,c720899bd6f87c8cd46bc9407c75891c9e02eba6089a04d11d4feee24209e517
+assets/11-8de67d64.png,1683466211198,0dd49abfa3122656f9e5e44643c355355ad7d53e3e61e96273b719f6a2a4c91d
+assets/12-db666e5e.png,1683466211199,a3586f73095f76bf813fb8117f3003010b7cc51f7889df6ec2388d4dd63c0855
+assets/13-d457d27e.png,1683466211199,44118583a244f6d7404e7410c161715656d7b1dddcfaaf7d2d6c6a9cc56f5e37
+assets/14-8060ce07.png,1683466211198,a917f2f25394197c4f3d227d8d4437b2b7af2d3f20746482fae0998dfcdabe81
+assets/15-54221ed6.png,1683466211199,b2a8659c1827a524593050f145d6a112b43b4b9fd05891297c5348cfa4870e45
+assets/2-785b878b.png,1683466211194,101b71573c2b1e4a7e16b2aa68552ec443520788e445e10c8fde219ed41a3a76
+assets/2-a6a4cc5a.png,1683466211192,2ce44bce41dcf139cac7f549cc94bf46bb84781ca9c54ad06911986c8f0ea38f
+assets/3-44bea25d.png,1683466211192,540da89510da3a3a7f94679ba590eeb98a7ccb6951788dbad1e120f755f8c320
+assets/3-a44bcb3a.png,1683466211194,854f83734d003eae0992d3cb8824a2aa32ced2ddb0f57921399ccbd66a29c9f3
+assets/4-b641cae8.png,1683466211192,7d6c79a2e3b8f1c947e5affd11e1f6d98e13122d1ca3213fe874f6441656d173
+assets/4-b8af9bb5.png,1683466211198,5ffd8888a6c6e2549c25759214d605b6ba612266c525bde4c463321e3dd21789
+assets/5-60f03eed.png,1683466211192,2eba92a262959afaa5d71b9ebfe4da32a43a3d7e542da433ae0fca4d35ed4faa
+assets/5-a393f37d.png,1683466211193,7d9fb20cc325da380d5a9d21a2edf7a5e0e759fb0944b7d5fb100c71ee9eadfc
+assets/6-8b76f627.png,1683466211193,05ae5193acf7689f64cb17558a5bcd64502d92ab38ab72507948ae65e0eb508c
+assets/6-af1e4a6c.png,1683466211192,3ff566354387124f109bb1f68b28ff6a3ffb5ccd4a30f7db0635cea4c1bf4302
+assets/7-5ff858d5.png,1683466211192,4ec619deb3962463f430dab00a1193e6c3553ecae8d422912df920a47980b46f
+assets/8-55bdcebe.png,1683466211198,95de6b82297939f07e380034716a60c33267dc3a23c767bda26fc5ce94e84438
+assets/9-66164fe4.png,1683466211199,377d92f800c6ba030e0d5cad8e3c223e9123f8c4b557bf062ef95377b2b11245
+assets/cactusdemo-b371cd33.png,1683466211191,2fe3ad6e0d5a19a8a4baf75f584e644d4beecbe99a3c71317fca8c500de713c3
+assets/cactusSticker-3a5385c9.png,1683466211191,a78c0bf2ed80cdb7b9f001931577667f3005344351f987b683202cf0e7588567
+assets/greennoise-d2c612f1.png,1683466211191,64f3578300ef010fdab61e95759b9edb2aacbd109a68700b209052cc5c284f95
+assets/handmade-c34a9dfb.png,1683466211191,ad87f3209855ee3411c2ea4c38dea47c436d37b47f826970890a18b184ff3a4f
+assets/handmadedark-c6451d5a.png,1683466211191,3d34438c29567f3e3a0107b21e9e3e20491aa0919a99c9c40958dc8fe8f8c188
+assets/index-60b56c4c.css,1683466211199,c2b210a7215fa5c2fc3c515b224f8989cbd5d80c7254f9be0732ab1a7379f0bc
+assets/index-63db616f.js,1683466211199,018624a55947df3cc59095ef57d027d4e4ab625a11cb5926cede8c48920735a1
+assets/logo-af78adb9.png,1683466211175,6c07f8213e516de9c8e4a5d01dd325918ce723698a7b16ee6e89a85b0cf62ece
+assets/noise-cb51292b.png,1683466211191,9b4ae1bb4be069ea4f68801c72658bc93f60a598f39875050444cafc0c0a135e
+assets/shadow-82bcb29a.png,1683466211191,8ca7ba6ccc399018c6e940c5584f21f79d097a73e92327555e91fd2d52e2a261

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "cactus-afc8a"
+  }
+}

firebase.json

@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}

src/App.jsx

@@ -9,6 +9,7 @@ import { ControlersContext } from './Context/ControlersContext';
 import { CartContext } from './Context/CartContext';
 import Contact from './pages/Contact';
 import About from './pages/About';
+import ComplateOrder from './pages/ComplateOrder';
 
 
 
@@ -17,6 +18,11 @@ const router = createBrowserRouter([
     path: "/",
     element: <Home/>,
   },
+  {
+    path: "/complete-order",
+    element: <ComplateOrder/>,
+  },
+
   {
     path: "/market",
     element: <Market/>,

src/components/Footer.jsx

@@ -7,17 +7,19 @@ export default function Footer() {
   const tailwindSharedStyle = "relative font-semibold text-bleach-dark capitalize transition-all duration-150 group hover:text-green hover:scale-[1.02]";
   const iconStyle = "absolute transition-all duration-150 left-4 opacity-0 group-hover:-left-5 group-hover:opacity-100 text-green"
   return (
-    <footer className="container mx-auto py-6 mt-8 w-full flex justify-center items-center flex-col gap-6 bg-bleach-fade">
-      <div className="flex justify-center items-center flex-col md:flex-row gap-6 md:gap-16">
-        <ul className="flex items-center flex-col order-2 md:order-1 gap-1">
+    <footer className="container mx-auto pt-6 pb-2 mt-8 w-full flex justify-center items-center flex-col gap-6 ">
+      <div className="flex  flex-col md:flex-row gap-6 lg:w-[500px]">
+
+        <ul className="flex flex-1 items-center md:items-end flex-col order-2 md:order-1 gap-1">
           { SocialMediaLinks.map((link, index) => 
           <li key={index} className={tailwindSharedStyle}>
             <Link to={link.link}>{link.label}</Link>
             <span className={iconStyle}><ArrowRight/></span>
           </li>
           )}
         </ul>
-        <div className="flex order-1 md:order-2">
+
+        <div className="flex order-1 flex-1 md:order-2 justify-center items-center">
         <Link to={"/"}>
           <img
             draggable={false}
@@ -26,16 +28,18 @@ export default function Footer() {
           />
         </Link>
         </div>
-        <ul className="flex items-center flex-col gap-1 order-3 md:order-3">
+
+        <ul className="flex items-center md:items-start flex-1 flex-col gap-1 order-3 md:order-3">
           { NavBarLinks.map((link, index) => 
           <li key={index} className={tailwindSharedStyle}>
-            <Link to={link.label.toLowerCase() == "home" ? "/" : link.label}>{link.label}</Link>
+            <Link to={link.label.toLowerCase() == "home" ? "/" : "/"+link.label}>{link.label}</Link>
             <span className={iconStyle}><ArrowRight/></span>
           </li>
           )}    
         </ul>
+
       </div>
-      <h3 className="text-bleach-darker font-bold">{dynamicCopyright()}</h3>
+      <h3 className="opacity-40 font-semibold">{dynamicCopyright()}</h3>
     </footer>
   )
 }

src/components/Main.jsx

@@ -29,7 +29,7 @@ export default function Main() {
           <div className='md:absolute hidden lg:flex md:right-32 md:-top-36  scale-[.5] '>
             <HandMade dark={true} />
           </div>
-          <div className='md:z-[10] lg:absolute relative h-full  lg:-top-64  lg:right-0 w-fit max-w-[100vw] mx-auto md:w-fit flex justify-center items-center md:mx-auto  2xl:scale-[1.2]  scale-100 '>
+          <div className='md:z-[10] lg:absolute relative h-full  lg:-top-44  lg:right-0 w-fit max-w-[100vw] mx-auto md:w-fit flex justify-center items-center md:mx-auto  2xl:scale-[1.2]  scale-100 '>
             <div className='absolute flex lg:hidden -right-5 bottom-0  scale-[.5] '>
               <HandMade dark={true} />
             </div>

src/components/OrderNow.jsx

@@ -3,9 +3,11 @@ import EastRoundedIcon from "@mui/icons-material/EastRounded";
 import { CartContext } from "../Context/CartContext";
 import {motion} from "framer-motion"
 import { getPriceByQte } from '../utils';
+import { useNavigate } from 'react-router-dom';
 
 function OrderNow() {
   const {cart}=useContext(CartContext)
+  const navigate = useNavigate()
 
   // const getPrice = ()=>{
   //   let price = 0;
@@ -39,7 +41,7 @@ function OrderNow() {
           When buying three or more, free delivery is available throughout Morocco !
         </p>
         }
-        <button className="rounded-lg w-full lg:w-fit hover:bg-green-dark duration-200 hover:scale-105 px-6 py-3 bg-green flex justify-center items-center gap-2 text-white font-normal text-lg">
+        <button onClick={()=>navigate("/complete-order")} className="rounded-lg w-full lg:w-fit hover:bg-green-dark duration-200 hover:scale-105 px-6 py-3 bg-green flex justify-center items-center gap-2 text-white font-normal text-lg">
           Order now
           <EastRoundedIcon/>
         </button>

src/pages/ComplateOrder.jsx

@@ -0,0 +1,29 @@
+import { ArrowBack } from '@mui/icons-material'
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import {motion} from "framer-motion"
+
+function ComplateOrder() {
+    const navigate= useNavigate()
+  return (
+    <motion.div 
+      initial={{ y: -300 }}
+      animate={{ y: 0 }}
+     className='min-h-screen md:px-8 px-4 py-6 container mx-auto'>
+        <button onClick={()=>navigate("/market")} className='text-dark-white bg-green px-4 py-2 rounded-xl'>
+            <ArrowBack ></ArrowBack>
+            Go back
+        </button>
+        <h1 className='text-4xl font-bold text-[#728b67] py-8'>Could you help us with some infos :)</h1>
+        <p className='font-semibold text-[#728b67aa] '>those info will just help us to get u , u can send those info in whatsapp if u want</p>
+        <div className='flex flex-col mt-10 gap-4'>
+            <input placeholder='your name' className='shadow-lg p-3 rounded-xl md:w-[400px] w-full font-semibold text-[#728b67] text-base border outline-[#728b67]'/>
+            <input placeholder='your phone' className='shadow-lg p-3 rounded-xl md:w-[400px] w-full font-semibold text-[#728b67] text-base border outline-[#728b67]'/>
+            <input placeholder='your address' className='shadow-lg p-3 rounded-xl md:w-[400px] w-full font-semibold text-[#728b67] text-base border outline-[#728b67]'/>
+            <input type="button" value="complete" className='shadow-xl cursor-pointer p-2 px-8 rounded-xl md:w-fit w-full font-semibold text-white bg-[#728b67] text-lg  outline-[#728b67]'/>
+        </div>
+    </motion.div>
+  )
+}
+
+export default ComplateOrder

src/pages/Contact.jsx

@@ -1,12 +1,25 @@
 import Footer from '../components/Footer'
 import NavBar from '../components/NavBar'
+import {motion} from "framer-motion"
 
 function Contact() {
   return (
-    <>
+    <div 
+    className='min-h-screen flex flex-col'>
       <NavBar/>
+      <motion.div 
+      initial={{ y: -300 }}
+      animate={{ y: 0 }}
+      className='container mx-auto px-4 md:px-8 flex flex-col items-start gap-4 py-4 flex-1'>
+        <h1 className='text-5xl py-5 font-bold text-[#728b67] '>How can we help you!</h1>
+        {/* <h1 className='text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl pb-4 uppercase font-extrabold text-green'>How can we help you!</h1> */}
+        <input placeholder='your name' className='shadow-xl p-4 rounded-xl md:w-[400px] w-full font-semibold text-[#728b67] text-lg border outline-[#728b67]'/>
+        <textarea placeholder='your message' className='shadow-xl p-4 h-60 md:w-[400px] w-full font-semibold rounded-xl text-[#728b67] text-lg border outline-[#728b67]'>
+        </textarea>
+        <input type="button" value="send" className='shadow-xl p-2 px-8 rounded-xl md:w-fit w-full font-semibold text-white bg-[#728b67] text-lg  outline-[#728b67]'/>
+      </motion.div>
       <Footer/>
-    </>
+    </div>
   )
 }
 

src/utils/index.js

@@ -22,7 +22,12 @@ export const NavBarLinks = [{
 /**
  * `SocialMediaLinks` is an array of objects that contains the links to be displayed in the footer
  */
-export const SocialMediaLinks = [{
+export const SocialMediaLinks = [
+  {
+    label:"Phone Number",
+    link:"tel:0000000000",
+  },
+  {
     label:"Facebook",
     link:"https://www.facebook.com/",
   },
@@ -33,9 +38,6 @@ export const SocialMediaLinks = [{
   {
     label:"whatsapp",
     link:"https://wa.me/0000000000",
-  },{
-    label:"Phone Number",
-    link:"tel:0000000000",
   }
 ]