From 2da1dfcfded22fc55fda1bdac44c9303b4c3eece Mon Sep 17 00:00:00 2001
From: ImAlpha <arcjcb11@gmail.com>
Date: Fri, 24 Nov 2023 19:29:13 -0800
Subject: [PATCH] update to footer

---
 Websites/jefes-nextjs/app/about-us/page.tsx   |  28 ++---
 .../app/components/NavBar/NavBar.tsx          |  22 +++-
 Websites/jefes-nextjs/app/layout.tsx          |   9 +-
 Websites/jefes-nextjs/app/page.tsx            |   4 +-
 .../jefes-nextjs/components/Footer/footer.tsx | 101 +++++++++++++++++-
 5 files changed, 136 insertions(+), 28 deletions(-)

diff --git a/Websites/jefes-nextjs/app/about-us/page.tsx b/Websites/jefes-nextjs/app/about-us/page.tsx
index 968108b..9461299 100644
--- a/Websites/jefes-nextjs/app/about-us/page.tsx
+++ b/Websites/jefes-nextjs/app/about-us/page.tsx
@@ -15,7 +15,7 @@ const AboutUs = () => {
           quality={100}
           className="brightness-[20%]"
         />
-        <div className="flex flex-col w-full text-center xl:text-5xl xl:block text-white lg:text-2xl z-10">
+        <div className="flex flex-col w-full text-center xl:text-5xl xl:block text-white lg:text-2xl absolute">
           <div className="p-6 ">
             <p className="py-4">
               <span className="">About Us</span>
@@ -25,16 +25,20 @@ const AboutUs = () => {
       </div>
 
       <div className="flex flex-col items-center text-xl font-serif antialiased ">
-        <div className="flex flex-row space-y-6 text-black pt-10 pl-28 pr-32 bg-paintbg w-full">
-          <div className="flex flex-col relative aspect-square container mr-20">
-            <Image
-              src="/kevin.webp"
-              fill
-              style={{ objectFit: "contain" }}
-              quality={100}
-              alt="Photo of Kevin mobile."
-              className=""
-            />
+        <div className="flex flex-row space-y-6 text-black pt-10 pl-28 pr-32 w-full relative">
+          <div className="flex flex-col container mr-20  w-full items-center relative">
+            <div className=" w-[80%] h-1/2 relative rounded flex justify-center ">
+              <div className="w-full h-full absolute rounded-2xl overflow-hidden mt-12">
+                <Image
+                  src="/kevin.webp"
+                  fill
+                  style={{ objectFit: "contain", objectPosition: "center" }}
+                  quality={100}
+                  alt="Photo of Kevin mobile."
+                  className=""
+                />
+              </div>
+            </div>
           </div>
 
           <div className="flex flex-col space-y-6">
@@ -78,7 +82,7 @@ const AboutUs = () => {
               strive for excellence and to bring you the best dining experience
               possible. Thank you again!
             </p>
-            <div className="mx-auto flex items-center justify-center w-full">
+            <div className="mx-auto flex items-center justify-center w-full pb-6">
               <Image
                 src="/award.jpg"
                 width={0}
diff --git a/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx b/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
index d3ff328..3c2f5d5 100644
--- a/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
+++ b/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
@@ -7,12 +7,10 @@ import classnames from "classnames";
 import Reserve from "./reserveButton";
 import "./NavBar.css";
 import { GiHamburgerMenu } from "react-icons/gi";
-import {
-  AiOutlineInstagram,
-  AiOutlineFacebook,
-  AiOutlineTwitter,
-} from "react-icons/ai";
+import { AiOutlineInstagram, AiOutlineFacebook } from "react-icons/ai";
 import { FaTiktok } from "react-icons/fa";
+import { RiCellphoneLine } from "react-icons/ri";
+import { FaPhone } from "react-icons/fa6";
 
 const NavBar = () => {
   const currentPath = usePathname();
@@ -63,6 +61,19 @@ const NavBar = () => {
             : "flex items-center justify-center xl:p-1 bg-transparent mx-auto  md:p-4 absolute z-10 w-full h-[120px]"
         }
       >
+        {/* Phone Number  */}
+        <div
+          className={
+            navbar
+              ? "hover:cursor-pointer hidden md:block xl:text-xl font-sans antialiased z-90 text-white left-10 absolute"
+              : "hidden"
+          }
+        >
+          <div className="flex items-center justify-center space-x-1.5">
+            <FaPhone />
+            <span>(918) 888-0844</span>
+          </div>
+        </div>
         <ul
           className={
             navbar
@@ -134,6 +145,7 @@ const NavBar = () => {
         </div>
       </div>
 
+      {/* Mobile */}
       <div className={menu_open ? "hidden" : ""}>
         <div
           onClick={handleNav}
diff --git a/Websites/jefes-nextjs/app/layout.tsx b/Websites/jefes-nextjs/app/layout.tsx
index 072ec1e..8623a03 100644
--- a/Websites/jefes-nextjs/app/layout.tsx
+++ b/Websites/jefes-nextjs/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import NavBar from "./components/NavBar/NavBar";
 import Image from "next/image";
+import Footer from "@/components/Footer/footer";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -17,9 +18,9 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" data-theme="jefes">
+    <html lang="en">
       <body className={inter.className}>
-        <NavBar/>
+        <NavBar />
         {/* <Image
             src="/PaintBackground1.webp"
             width={0}
@@ -28,8 +29,8 @@ export default function RootLayout({
             alt="Logo"
             className="hidden md:block absolute -z-10"
           /> */}
-        <main className="bg-[beige]">{children}</main>
-        {/* Footer */}
+        <main className="bg-[#fffafa] ">{children}</main>
+        <Footer />
       </body>
     </html>
   );
diff --git a/Websites/jefes-nextjs/app/page.tsx b/Websites/jefes-nextjs/app/page.tsx
index 35f8210..8e36365 100644
--- a/Websites/jefes-nextjs/app/page.tsx
+++ b/Websites/jefes-nextjs/app/page.tsx
@@ -250,7 +250,7 @@ export default function Home() {
         {/* Section 5 */}
         <div className="flex md:flex-row flex-col md:h-[40svh] h-[80svh] md:gap-y-0 gap-y-4 px-[22svw] py-4">
           {/* Text-side */}
-          <div className=" flex flex-col leading-relaxed gap-y-6 relative w-full text-center items-center justify-center md:text-start md:items-start xl:items-end md:justify-start pr-6">
+          <div className="flex flex-col leading-relaxed gap-y-6 relative w-full text-center items-center justify-center md:text-start md:items-start xl:items-end md:justify-start">
             <h2 className="text-red-700 text-4xl font-bold xl:pr-10 pr-0">
               Unbeatable Customer Service
             </h2>
@@ -285,7 +285,7 @@ export default function Home() {
         </div>
         <div className="w-full h-[80svh] bg-blue-300">
           {/* <GoogleReviews /> */}
-          <GoogleMap />
+          {/* <GoogleMap /> */}
         </div>
         {/* <div className="flex flex-col w-full h-[180vh]">
           <EmblaCarousel />
diff --git a/Websites/jefes-nextjs/components/Footer/footer.tsx b/Websites/jefes-nextjs/components/Footer/footer.tsx
index f7cfcb1..860ff00 100644
--- a/Websites/jefes-nextjs/components/Footer/footer.tsx
+++ b/Websites/jefes-nextjs/components/Footer/footer.tsx
@@ -1,11 +1,102 @@
-import React from 'react'
+"use client";
+import React from "react";
+import Link from "next/link";
+import { AiOutlineInstagram, AiOutlineFacebook } from "react-icons/ai";
+import { FaTiktok } from "react-icons/fa";
+import classnames from "classnames";
+import { usePathname } from "next/navigation";
+import Image from "next/image";
 
 const Footer = () => {
+  const currentPath = usePathname();
+  const nav = [
+    { label: "HOME", href: "/" },
+    { label: "MENU", href: "/menu" },
+    { label: "ABOUT", href: "/about-us" },
+    { label: "CONTACT", href: "/contact" },
+  ];
+
   return (
-    <div>
+    <div className="bg-stone-900 w-full items-center justify-center md:h-[25vh] flex sm:h-[50svh] overflow-hidden">
+      <div className=" w-[60%] flex flex-col md:flex-row text-white justify-evenly leading-relaxed items-center text-center mx-auto relative h-full">
+        <div className="w-full h-full flex flex-col items-center justify-evenly relative">
+          <div className="h-1/2 w-full relative">
+            {/* logo */}
+            <Link href="/" className="">
+              <Image
+                src="/logo.svg"
+                fill
+                style={{ objectFit: "contain", objectPosition: "center" }}
+                alt="Logo"
+                quality={100}
+              />
+            </Link>
+          </div>
+          <p className="flex flex-wrap w-[90%] relative items-center text-start justify-center text-base ">
+            Jefe's Mexican Cocina Y Cantina serves the best Mexican food in
+            Broken Arrow, OK.
+          </p>
+        </div>
 
+        <div className="flex-col w-full h-full items-center gap-4 relative top-4 md:flex hidden justify-center text-center">
+          <h2 className="text-xl font-semibold italic antialiased">Pages</h2>
+          <div className="bg-red-800 h-0.5 w-[20%]"></div>
+          <div className=" items-center justify-center h-full">
+            <ul className="flex flex-col text-base font-sans antialiased w-full leading-relaxed text-start pl-4">
+              {nav.map((link) => (
+                <Link
+                  key={link.href}
+                  // className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
+                  // replace with classnames object instead
+                  className={classnames({
+                    " text-white": link.href === currentPath,
+                    "text-white": link.href !== currentPath,
+                    "hover:text-red-800 hover:cursor-pointer": true,
+                  })}
+                  href={link.href}
+                >
+                  {link.label}
+                </Link>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <div className="flex flex-col w-full h-full items-center gap-4 top-4 relative ">
+          <h2 className="text-xl font-semibold italic antialiased">
+            Store Hours
+          </h2>
+          <div className="bg-red-800 h-0.5 w-[20%] "></div>
+          <div className="flex flex-col justify-center items-center text-white w-full text-start leading-relaxed text-sm">
+            <div className="flex flex-col pl-3 text-start">
+              <h3>Monday - Thursday:</h3>
+              <p>11:00am - 9:00pm</p>
+            </div>
+            <div className="flex flex-col  text-start">
+              <h3>Friday - Saturday:</h3>
+              <p>11:00am - 9:30pm</p>
+            </div>
+            <div className="flex flex-col text-start">
+              <h3>Sunday:</h3>
+              <p>11:00am - 8:00pm</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col w-full h-full items-center gap-4 top-4 relative">
+          <h2 className="text-xl font-semibold italic antialiased">
+            Follow Us
+          </h2>
+          <div className="bg-red-800 h-0.5 w-[20%] "></div>
+          <div className="flex flex-row justify-evenly items-center text-white w-[60%] relative h-1/2">
+            <FaTiktok size={30} className="cursor-pointer" />
+            <AiOutlineInstagram size={30} className="cursor-pointer" />
+            <AiOutlineFacebook size={30} className="cursor-pointer" />
+          </div>
+        </div>
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default Footer
\ No newline at end of file
+export default Footer;