Merge branch 'master' of https://gitea.arufalab.com/ImAlpha/Portfolio

Websites/jefes-nextjs/.env

@@ -6,7 +6,9 @@
 
 # DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
 # DATABASE_URL="mysql://root:%21Plop2099341723@192.168.50.190:3306/db"
-MAPS_API_KEY="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJQ-7Uc0BitocRQZASTWUyN04&key=AIzaSyBS4qOnpT4llaFa_UKMpeWike3lzDvFZ1U"
+MAPS_API_KEY="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJQ-7Uc0BitocRQZASTWUyN04&key=AIzaSyAREyrK0fG1haeNcLFbap0kBhP9Ld2_GSU"
+GOOGLE_API_KEY="AIzaSyAREyrK0fG1haeNcLFbap0kBhP9Ld2_GSU"
+PLACE_ID_KEY="ChIJQ-7Uc0BitocRQZASTWUyN04"
 
 DB_HOST="aws.connect.psdb.cloud"
 DB_USER="11lq0wcjbxyku4zmubji"

Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx

@@ -30,7 +30,7 @@ const NavBar = () => {
   const links = [
     { label: "HOME", href: "/" },
     { label: "MENU", href: "/menu" },
-    { label: "GALLERY", href: "/gallery" },
+    // { label: "GALLERY", href: "/gallery" },
     { label: "ABOUT", href: "/about-us" },
     { label: "CONTACT", href: "/contact" },
   ];
@@ -76,13 +76,18 @@ const NavBar = () => {
           <div className="flex flex-row h-full">
             {/* left side  */}
             <div className="flex w-1/2 lg:gap-6 gap-4 relative lg:left-20 left-0 ">
-              <div className="flex items-center justify-center gap-1">
+              <div className="flex items-center justify-center gap-1 z-10">
-                <div className="text-xl brightness-90">
+                <a
-                  <IoLocationSharp />
+                  href="https://www.google.com/maps/place/Jefe's+Mexican+Cocina+Y+Cantina/@36.0190665,-95.7069482,15z/data=!4m14!1m7!3m6!1s0x87b6624073d4ee43:0x4e3732654d129041!2sJefe's+Mexican+Cocina+Y+Cantina!8m2!3d36.0190665!4d-95.7069482!16s%2Fg%2F11f0wkrmd3!3m5!1s0x87b6624073d4ee43:0x4e3732654d129041!8m2!3d36.0190665!4d-95.7069482!16s%2Fg%2F11f0wkrmd3?entry=ttu"
-                </div>
+                  className="flex items-center justify-center gap-1"
-                <span className="flex flex-wrap brightness-90 font-sans text-sm">
+                >
-                  24188 E Hwy 51, Broken Arrow, OK 74014
+                  <div className="text-xl brightness-90">
-                </span>
+                    <IoLocationSharp />
+                  </div>
+                  <span className="flex flex-wrap brightness-90 font-sans text-sm">
+                    24188 E Hwy 51, Broken Arrow, OK 74014
+                  </span>
+                </a>
               </div>
               <div className="flex items-center justify-center">
                 <StoreHours />

Websites/jefes-nextjs/app/components/NavBar/reserveButton.tsx

@@ -7,9 +7,16 @@ const Reserve = () => {
   return (
     <div>
       <div className="right-2 hidden md:block">
-        <Button size='sm' className="xl:text-lg bg-red-800 hover:bg-slate-800 text-xs">
+        <Button
+          size="sm"
+          className="xl:text-lg bg-red-800 hover:bg-slate-800 text-xs"
+        >
           <span className="flex flex-row">
-            <span className="flex flex-row">ORDER ONLINE</span>
+            <span className="flex flex-row">
+              <a href="https://www.grubhub.com/restaurant/jefes-mexican-cocina-y-cantina-24188-e-hwy-51-broken-arrow/2735039?pickup=true&rwg_token=AAh05qZCcKFQ2Z7gD1Zk8cKMX6nulMnyaXXy0WFPLpaVJpzOl7Hmg_7_21m5_lqd6Px-CeiFlA0OBrR9wjNyhFbJLOA6sURn_fdyCxIc6A4f4duiviHGfos%3D">
+                ORDER ONLINE
+              </a>
+            </span>
           </span>
           {/* <Image
             src="/fork.svg"

Websites/jefes-nextjs/app/components/Reviews/page.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import GoogleReviews from './google_reviews';
 
 const App = () => {
-  const apiKey = 'AIzaSyClfOGrkQNRjDFzvnTk-W7Oeh-yyDNCXN0'; // Replace with your Google API key
+  const apiKey = ''; // Replace with your Google API key
-  const placeId = 'ChIJQ-7Uc0BitocRQZASTWUyN04'; // Replace with the Google Place ID of the location
+  const placeId = ''; // Replace with the Google Place ID of the location
 
   return (
     <div>
       <h1>Google Reviews</h1>
-      <GoogleReviews apiKey={apiKey} placeId={placeId} />
+      <GoogleReviews apiKey={process.env.GOOGLE_API_KEY} placeId={process.env.PLACE_ID_KEY} />
     </div>
   );
 };

Websites/jefes-nextjs/app/contact/page.tsx

@@ -27,7 +27,7 @@ const contact = () => {
         </div>
       </div>
       <div className="flex flex-col bg-gray-800 w-full">
-      <div>Contact Us</div>
+      <div>Contact Us Today</div>
         <Calendar />
         <Form />
       </div>

Websites/jefes-nextjs/app/gallery/page.tsx

@@ -54,7 +54,7 @@ const Gallery = () => {
           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="">GALLERY</span>

Websites/jefes-nextjs/app/menu/Appetizers/items.json

@@ -6,6 +6,7 @@
         "price_large": 7,
         "price_small": 5,
         "spicy": "no",
+        "favorite": "yes",
         "description": "avocado dripppppp"
     },
     {

Websites/jefes-nextjs/app/menu/Appetizers/page.tsx

@@ -3,76 +3,79 @@ import Image from "next/image";
 import "./appetizers.css";
 import Menu from "./items.json";
 import { Button } from "@/components/ui/button";
+import MenuCard from "../MenuCard/MenuCard";
 
 const Appetizers = () => {
   return (
-    <div className="flex flex-col w-full">
+    <main>
-      <div className="text-4xl flex flex-row text-black antialiased font-bold items-center justify-center">
+      <MenuCard Menu={Menu} />
-        <Image
+      {/* <div className="flex flex-col w-full">
-          src="/gun01.svg"
+        <div className="text-4xl flex flex-row text-black antialiased font-bold items-center justify-center">
-          alt="gun icon for decor"
+          <Image
-          className="rotate-45"
+            src="/gun01.svg"
-          width={70}
+            alt="gun icon for decor"
-          height={50}
+            className="rotate-45"
-        />
+            width={70}
-        <div className="">Appetizers</div>
+            height={50}
-        <Image
+          />
-          src="/gun01.svg"
+          <div className="">Appetizers</div>
-          alt="gun icon for decor"
+          <Image
-          className="gun_menu gun_rotate"
+            src="/gun01.svg"
-          width={70}
+            alt="gun icon for decor"
-          height={50}
+            className="gun_menu gun_rotate"
-        />
+            width={70}
-      </div>
+            height={50}
-      {/* Mapping out the menu */}
+          />
-      <div className=" flex flex-wrap gap-8 pt-6 justify-between w-full">
+        </div> */}
-        {Menu.map((menu_item) => {
+        {/* Mapping out the menu */}
-          return (
+        {/* <div className=" flex flex-wrap gap-8 pt-6 justify-between w-full">
-            <div
+          {Menu.map((menu_item) => {
-              key={menu_item.id}
+            return (
-              className="flex flex-col flex-grow bg-blue-300 h-[452px] w-[325px] rounded-lg shadow-xl drop-shadow-xl"
+              <div
-            >
+                key={menu_item.id}
-              <div className="h-[55%] relative w-full overflow-hidden">
+                className="flex flex-col flex-grow bg-blue-300 h-[452px] w-[325px] rounded-lg shadow-xl drop-shadow-xl"
-                <Image
+              >
-                  src={`/${menu_item.photo}`}
+                <div className="h-[55%] relative w-full overflow-hidden">
-                  alt="chili pepper spice"
+                  <Image
-                  fill
+                    src={`/${menu_item.photo}`}
-                  style={{ objectFit: "cover", objectPosition: "center" }}
+                    alt="chili pepper spice"
-                  quality={100}
+                    fill
-                  className="rounded-t-lg"
+                    style={{ objectFit: "cover", objectPosition: "center" }}
-                />
+                    quality={100}
-              </div>
+                    className="rounded-t-lg"
-              <h4 className="">
+                  />
-                <strong>{menu_item.name}</strong>
-              </h4>
-              <p className="max-w-[75ch]">Description: {menu_item.description}</p>
-              <div className="flex flex-row bg-gray-500 justify-evenly">
-                <div className="bg-red-400 flex flex-row">
-                  <span>
-                    {menu_item.price_large ? (
-                      <span>
-                        <strong>Large</strong> - ${menu_item.price_large},
-                        <strong>Small</strong> - ${menu_item.price_small}
-                      </span>
-                    ) : (
-                      <span>${menu_item.price}</span>
-                    )}
-                  </span>
                 </div>
-                <div className="flex bg-emerald-400 w-1/2 relative">
+                <h4 className="">
-                  <div className="flex bg-blue-600 w-3 h-full items-end justify-end">
+                  <strong>{menu_item.name}</strong>
-                    <div className="">
+                </h4>
-                      
+                <p className="max-w-[75ch]">
+                  Description: {menu_item.description}
+                </p>
+                <div className="flex flex-row bg-gray-500 justify-evenly">
+                  <div className="bg-red-400 flex flex-row">
+                    <span>
+                      {menu_item.price_large ? (
+                        <span>
+                          <strong>Large</strong> - ${menu_item.price_large},
+                          <strong>Small</strong> - ${menu_item.price_small}
+                        </span>
+                      ) : (
+                        <span>${menu_item.price}</span>
+                      )}
+                    </span>
+                  </div>
+                  <div className="flex bg-emerald-400 w-1/2 relative">
+                    <div className="flex bg-blue-600 w-3 h-full items-end justify-end">
+                      <div className=""></div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
+            );
-          );
+          })}
-        })}
+        </div>
-      </div>
+      </div> */}
-
+        {/* <div className="col-span-2 gap-6 bg-green-400">
-      {/* <div className="col-span-2 gap-6 bg-green-400">
         <div className="flex flex-row space-x-2 bg-gray-400">
           <h4 className="text-semibold">
             Guacamole Dip 
@@ -100,7 +103,7 @@ const Appetizers = () => {
           </div>
         </div>
       </div> */}
-    </div>
+    </main>
   );
 };
 

Websites/jefes-nextjs/app/menu/Bar/items.json

@@ -5,6 +5,8 @@
         "photo": "Bar/32ozCaguamas.jpeg",
         "price": 14,
         "size": "32oz",
+        "spicy": "no",
+        "favorite": "no",
         "description": "A drink."
     },
     {
@@ -13,6 +15,8 @@
         "photo": "Bar/100ozTower.jpeg",
         "price": 35,
         "size": "100oz",
+        "spicy": "yes",
+        "favorite": "no",
         "description": "A tower full of Corona."
     },
     {
@@ -21,6 +25,8 @@
         "photo": "Bar/chambong.jpeg",
         "price": 18,
         "size": "36oz",
+        "spicy": "no",
+        "favorite": "yes",
         "description": "El Chambong."
     },
     {
@@ -29,6 +35,8 @@
         "photo": "Bar/laMeraMera56ozMargarita.jpeg",
         "price": 20,
         "size": "56oz",
+        "spicy": "yes",
+        "favorite": "yes",
         "description": "The special margarita."
     },
     {
@@ -37,6 +45,8 @@
         "photo": "Bar/Michelada.jpeg",
         "price": 13,
         "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
         "description": "Corona with tamarindo."
     },
     {
@@ -45,6 +55,8 @@
         "photo": "Bar/Michelada.jpeg",
         "price": 13,
         "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
         "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
     }
 ]

Websites/jefes-nextjs/app/menu/Bar/page.tsx

@@ -1,84 +1,14 @@
-"use client";
 import * as React from "react";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import Menu from "./items.json";
 import Image from "next/image";
-import localFont from 'next/font/local';
+import MenuCard from "../MenuCard/MenuCard";
-
-const interBold = localFont({
-  src: './Inter-Bold.woff',
-  display: 'swap',
-})
 
 const Bar = () => {
-  let pic = "cover";
   return (
     <main>
-      <div className="flex flex-wrap gap-8">
+      <MenuCard Menu={Menu} />
-        {Menu.map((menu_item) => {
-          return (
-            <Card key={menu_item.id} className="flex flex-grow flex-col w-[325px] h-[452px]">
-              <div className="w-full h-[55%]">
-                <div className="h-full relative w-full">
-                  <Image
-                    src={`/${menu_item.photo}`}
-                    alt="chili pepper spice"
-                    fill
-                    style={{ objectFit: "cover", objectPosition: "center" }}
-                    quality={100}
-                    className="rounded-t-lg"
-                  />
-                </div>
-              </div>
-              <div className="m-[8px] space-y-[4px]">
-                {/* title and description of item  */}
-                <div className="flex flex-col w-full font-sans">
-                  {/* title and photo */}
-                  <div className="inline-block">
-                    <h4 className={`pt-2 float-left ${interBold.className}`}>
-                      <strong>{menu_item.name}</strong>
-                    </h4>
-                    {/* <div className="bg-red-300 float-right relative w-[25px] h-[25px]">
-                      <Image
-                        src="/red-chili-pepper.svg"
-                        alt="chili pepper spice"
-                        fill
-                        style={{
-                          objectFit: "contain",
-                        }}
-                        quality={100}
-                        className=""
-                      />
-                    </div> */}
-                  </div>
-                  {/* paragraph text */}
-                  <div className="inline-block text-left">
-                    <p className={`max-w-[75ch] ${interBold.className} font-semibold`}>
-                      {menu_item.description}
-                    </p>
-                    {/* 16px line height */}
-                    <p className="leading-4 text-[#8F8F8F]">
-                      {menu_item.description}
-                    </p>
-                  </div>
-                </div>
-                {/* cart addon */}
-                <div className="flex flex-row">
-                  <div className=" flex flex-row">
-                    <strong>{`$${menu_item.price}`}</strong>
-                  </div>
-                  <div className="flex  w-1/2 relative">
-                    <div className="flex  w-3 h-full items-end justify-end">
-                      <div className=""></div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </Card>
-          );
-        })}
-      </div>
     </main>
   );
 };

Websites/jefes-nextjs/app/menu/Beverages/items.json

@@ -0,0 +1,62 @@
+[
+    {
+        "id": 1,
+        "name": "Caguamas",
+        "photo": "Bar/32ozCaguamas.jpeg",
+        "price": 14,
+        "size": "32oz",
+        "spicy": "no",
+        "favorite": "no",
+        "description": "A drink."
+    },
+    {
+        "id": 2,
+        "name": "Jefes Tower",
+        "photo": "Bar/100ozTower.jpeg",
+        "price": 35,
+        "size": "100oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "A tower full of Corona."
+    },
+    {
+        "id": 3,
+        "name": "Chambong",
+        "photo": "Bar/chambong.jpeg",
+        "price": 18,
+        "size": "36oz",
+        "spicy": "no",
+        "favorite": "yes",
+        "description": "El Chambong."
+    },
+    {
+        "id": 4,
+        "name": "La Mera Mera Margarita",
+        "photo": "Bar/laMeraMera56ozMargarita.jpeg",
+        "price": 20,
+        "size": "56oz",
+        "spicy": "yes",
+        "favorite": "yes",
+        "description": "The special margarita."
+    },
+    {
+        "id": 5,
+        "name": "Michelada",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Corona with tamarindo."
+    },
+    {
+        "id": 6,
+        "name": "Cheesy Mac & Cheese With a Fruit Cup",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    }
+]

Websites/jefes-nextjs/app/menu/Beverages/page.tsx

@@ -1,9 +1,13 @@
-import React from 'react'
+import React from "react";
+import Menu from "./items.json";
+import MenuCard from "../MenuCard/MenuCard";
 
 const page = () => {
   return (
-    <div>Beverages</div>
+    <main>
-  )
+      <MenuCard Menu={Menu} />
-}
+    </main>
+  );
+};
 
-export default page
+export default page;

Websites/jefes-nextjs/app/menu/Brunch/items.json

@@ -0,0 +1,62 @@
+[
+    {
+        "id": 1,
+        "name": "Caguamas",
+        "photo": "Bar/32ozCaguamas.jpeg",
+        "price": 14,
+        "size": "32oz",
+        "spicy": "no",
+        "favorite": "no",
+        "description": "A drink."
+    },
+    {
+        "id": 2,
+        "name": "Jefes Tower",
+        "photo": "Bar/100ozTower.jpeg",
+        "price": 35,
+        "size": "100oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "A tower full of Corona."
+    },
+    {
+        "id": 3,
+        "name": "Chambong",
+        "photo": "Bar/chambong.jpeg",
+        "price": 18,
+        "size": "36oz",
+        "spicy": "no",
+        "favorite": "yes",
+        "description": "El Chambong."
+    },
+    {
+        "id": 4,
+        "name": "La Mera Mera Margarita",
+        "photo": "Bar/laMeraMera56ozMargarita.jpeg",
+        "price": 20,
+        "size": "56oz",
+        "spicy": "yes",
+        "favorite": "yes",
+        "description": "The special margarita."
+    },
+    {
+        "id": 5,
+        "name": "Michelada",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Corona with tamarindo."
+    },
+    {
+        "id": 6,
+        "name": "Cheesy Mac & Cheese With a Fruit Cup",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    }
+]

Websites/jefes-nextjs/app/menu/Brunch/page.tsx

@@ -1,9 +1,13 @@
-import React from 'react'
+import React from "react";
+import Menu from "./items.json";
+import MenuCard from "../MenuCard/MenuCard";
 
 const page = () => {
   return (
-    <div>Brunch</div>
+    <main>
-  )
+      <MenuCard Menu={Menu} />
-}
+    </main>
+  );
+};
 
-export default page
+export default page;

Websites/jefes-nextjs/app/menu/Dinner/items.json

@@ -0,0 +1,102 @@
+[
+  {
+    "id": 1,
+    "name": "Camarones Fundidos",
+    "photo": "Dinner/camaronesFundidos.jpeg",
+    "price": 14,
+    "size": "32oz",
+    "spicy": "no",
+    "favorite": "no",
+    "description": "A drink."
+  },
+  {
+    "id": 2,
+    "name": "Chile Colorado",
+    "photo": "Dinner/chileColorado.jpeg",
+    "price": 35,
+    "size": "100oz",
+    "spicy": "yes",
+    "favorite": "no",
+    "description": "A tower full of Corona."
+  },
+  {
+    "id": 3,
+    "name": "Crab and Shrimp Salad",
+    "photo": "Dinner/crabAndShrimpSalad.jpeg",
+    "price": 18,
+    "size": "36oz",
+    "spicy": "no",
+    "favorite": "yes",
+    "description": "El Chambong."
+  },
+  {
+    "id": 4,
+    "name": "Fajitas",
+    "photo": "Dinner/fajitas.jpeg",
+    "price": 20,
+    "size": "56oz",
+    "spicy": "yes",
+    "favorite": "yes",
+    "description": "The special margarita."
+  },
+  {
+    "id": 5,
+    "name": "Grilled Chicken and Bacon Quesadilla",
+    "photo": "Dinner/grilledChickenBaconQuesadilla.jpeg",
+    "price": 13,
+    "size": "24oz",
+    "spicy": "yes",
+    "favorite": "no",
+    "description": "Corona with tamarindo."
+  },
+  {
+    "id": 6,
+    "name": "Jefes bowl",
+    "photo": "Dinner/jefesBowl.jpeg",
+    "price": 13,
+    "size": "24oz",
+    "spicy": "yes",
+    "favorite": "no",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  },
+  {
+    "id": 7,
+    "name": "Las Enchiladas",
+    "photo": "Dinner/lasEnchiladas.jpeg",
+    "price": 13,
+    "size": "24oz",
+    "spicy": "yes",
+    "favorite": "no",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  },
+  {
+    "id": 8,
+    "name": "Molcajete",
+    "photo": "Dinner/molcajete.jpeg",
+    "price": 13,
+    "size": "24oz",
+    "spicy": "yes",
+    "favorite": "no",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  },
+  {
+    "id": 9,
+    "name": "Street Tacos",
+    "photo": "Dinner/streetTacos.jpeg",
+    "price": 13,
+    "size": "24oz",
+    "spicy": "yes",
+    "favorite": "no",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  },
+  {
+    "id": 10,
+    "name": "Torta",
+    "photo": "Dinner/torta.jpeg",
+    "price": 13,
+    "size": "24oz",
+    "spicy": "yes",
+    "favorite": "no",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  }
+]

Websites/jefes-nextjs/app/menu/Dinner/page.tsx

@@ -1,9 +1,13 @@
-import React from 'react'
+import React from "react";
+import Menu from "./items.json";
+import MenuCard from "../MenuCard/MenuCard";
 
 const page = () => {
   return (
-    <div>page</div>
+    <main>
-  )
+      <MenuCard Menu={Menu} />
-}
+    </main>
+  );
+};
 
-export default page
+export default page;

Websites/jefes-nextjs/app/menu/Lunch/items.json

@@ -0,0 +1,62 @@
+[
+    {
+        "id": 1,
+        "name": "Caguamas",
+        "photo": "Bar/32ozCaguamas.jpeg",
+        "price": 14,
+        "size": "32oz",
+        "spicy": "no",
+        "favorite": "no",
+        "description": "A drink."
+    },
+    {
+        "id": 2,
+        "name": "Jefes Tower",
+        "photo": "Bar/100ozTower.jpeg",
+        "price": 35,
+        "size": "100oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "A tower full of Corona."
+    },
+    {
+        "id": 3,
+        "name": "Chambong",
+        "photo": "Bar/chambong.jpeg",
+        "price": 18,
+        "size": "36oz",
+        "spicy": "no",
+        "favorite": "yes",
+        "description": "El Chambong."
+    },
+    {
+        "id": 4,
+        "name": "La Mera Mera Margarita",
+        "photo": "Bar/laMeraMera56ozMargarita.jpeg",
+        "price": 20,
+        "size": "56oz",
+        "spicy": "yes",
+        "favorite": "yes",
+        "description": "The special margarita."
+    },
+    {
+        "id": 5,
+        "name": "Michelada",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Corona with tamarindo."
+    },
+    {
+        "id": 6,
+        "name": "Cheesy Mac & Cheese With a Fruit Cup",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    }
+]

Websites/jefes-nextjs/app/menu/Lunch/page.tsx

@@ -1,57 +1,14 @@
-import React from 'react'
+import React from "react";
-import Image from 'next/image'
+import Image from "next/image";
+import Menu from "./items.json";
+import MenuCard from "../MenuCard/MenuCard";
 
 const page = () => {
   return (
-    <div>
+    <main>
-      <div className="heading">
+      <MenuCard Menu={Menu} />
-        <h2 className="bev-h2">Quesadillas</h2>
+    </main>
-        <p className="">
+  );
-          Contains bell peppers, tomatoes, onions with a side of guacamole salad
+};
-          upon request. Add rice & beans $2.{" "}
-          <span className="detail">Choose from the following proteins:</span>{" "}
-        </p>
-        <div className="head">
-          <h4>
-            ASADA | CHICKEN | CHORIZO | CARNITAS | AL PASTOR | SHRIMP | FISH |
-            BARBACOA - $11
-          </h4>
-        </div>
-        <div className="decor" aria-hidden="true">
-          <div className="left"></div>
-          <Image
-            src="/gun01.svg"
-            alt="gun icon for decor"
-            className=""
-            width="61"
-            height="101"
-          />
-          <div className="right"></div>
-        </div>
-      </div>
-      <ul className="items items-small">
-        <li className="item">
-          <div className="head">
-            <h4>Grilled Chicken & Bacon Quesadilla</h4>
-            <span>- $10</span>
-          </div>
-        </li>
-        <li className="item">
-          <div className="head">
-            <h4>Quesadilla Del Mar</h4>
-            <span>- $12</span>
-          </div>
-        </li>
-        <li className="item">
-          <div className="head">
-            <h4>Fajita Quesadilla</h4>
-            <span>- $11</span>
-          </div>
-          <p>Chicken or Steak</p>
-        </li>
-      </ul>
-    </div>
-  )
-}
 
-export default page
+export default page;

Websites/jefes-nextjs/app/menu/MenuCard/MenuCard.tsx

@@ -0,0 +1,114 @@
+"use client";
+import * as React from "react";
+import Image from "next/image";
+import localFont from "next/font/local";
+import { Inter } from "next/font/google";
+import { Card } from "@/components/ui/card";
+
+const interBold = localFont({
+  src: "./Inter-Bold.woff",
+  display: "swap",
+});
+const extraBold = localFont({
+  src: "./Inter-ExtraBold.woff",
+  display: "swap",
+});
+const inter = Inter({ subsets: ["latin"] });
+
+const MenuCard = ({ Menu }: any) => {
+  return (
+    <div className="grid desktop:grid-cols-5 tablet:grid-cols-3 md:grid-cols-2 grid-flow-row gap-y-6 md:gap-x-6">
+      {Menu.map((menu_item: any) => {
+        return (
+          <Card
+            key={menu_item.id}
+            className="flex-1 flex-col max-w-[325px] h-[452px] relative"
+          >
+            <div className="w-full h-[55%]">
+              <div className="h-full relative w-full">
+                <Image
+                  src={`/${menu_item.photo}`}
+                  alt="chili pepper spice"
+                  fill
+                  style={{ objectFit: "cover", objectPosition: "center" }}
+                  quality={75}
+                  sizes="(max-width: 325px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                  className="flex"
+                />
+              </div>
+            </div>
+            <div className="m-[8px] space-y-[4px]">
+              {/* title and description of item  */}
+              <div className="flex flex-col w-full font-sans">
+                {/* title and photo */}
+                <div className="inline-block">
+                  <h4
+                    className={`pt-2 float-left ${extraBold.className} flex-wrap w-3/4`}
+                  >
+                    <strong>{menu_item.name}</strong>
+                  </h4>
+                  <div className="right-4 absolute h-[25px] flex flex-row w-1/4 mt-2">
+                    {menu_item.spicy === "yes" ? (
+                      <Image
+                        src="/red-chili-pepper.svg"
+                        alt="chili pepper spice"
+                        fill
+                        style={{
+                          objectFit: "contain",
+                          objectPosition: "center",
+                        }}
+                        quality={100}
+                        sizes="(max-width: 25px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                        className="flex"
+                        
+                      />
+                    ) : (
+                      <div className="hidden"></div>
+                    )}
+                    {menu_item.favorite === "yes" ? (
+                      <Image
+                        src="/star.svg"
+                        alt="chili pepper spice"
+                        fill
+                        style={{
+                          objectFit: "contain",
+                          objectPosition: "right",
+                        }}
+                        quality={100}
+                        sizes="(max-width: 25px) 100vw, (max-width: 325px) 50vw, 33vw"
+                        className="flex"
+                      />
+                    ) : (
+                      <div className="hidden"></div>
+                    )}
+                  </div>
+                </div>
+                {/* description text */}
+                <div className="inline-block text-left pt-2">
+                  <p
+                    className={`max-w-[75ch] ${inter.className} leading-tight font-[12px] text-gray-400 `}
+                  >
+                    {menu_item.description}
+                  </p>
+                </div>
+              </div>
+            </div>
+            {/* cart addon */}
+            <div className="flex flex-row bottom-0 absolute m-2">
+              <div className="flex flex-row">
+                <strong>{`$${menu_item.price}`}</strong>
+              </div>
+              <div className="flex  w-1/2 relative">
+                <div className="flex  w-3 h-full items-end justify-end">
+                  <div className=""></div>
+                </div>
+              </div>
+            </div>
+          </Card>
+        );
+      })}
+    </div>
+  );
+};
+
+export default MenuCard;

Websites/jefes-nextjs/app/menu/Seafood/page.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const page = () => {
-  return (
-    <div>page</div>
-  )
-}
-
-export default page

Websites/jefes-nextjs/app/menu/Sides/items.json

@@ -0,0 +1,62 @@
+[
+    {
+        "id": 1,
+        "name": "Caguamas",
+        "photo": "Bar/32ozCaguamas.jpeg",
+        "price": 14,
+        "size": "32oz",
+        "spicy": "no",
+        "favorite": "no",
+        "description": "A drink."
+    },
+    {
+        "id": 2,
+        "name": "Jefes Tower",
+        "photo": "Bar/100ozTower.jpeg",
+        "price": 35,
+        "size": "100oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "A tower full of Corona."
+    },
+    {
+        "id": 3,
+        "name": "Chambong",
+        "photo": "Bar/chambong.jpeg",
+        "price": 18,
+        "size": "36oz",
+        "spicy": "no",
+        "favorite": "yes",
+        "description": "El Chambong."
+    },
+    {
+        "id": 4,
+        "name": "La Mera Mera Margarita",
+        "photo": "Bar/laMeraMera56ozMargarita.jpeg",
+        "price": 20,
+        "size": "56oz",
+        "spicy": "yes",
+        "favorite": "yes",
+        "description": "The special margarita."
+    },
+    {
+        "id": 5,
+        "name": "Michelada",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Corona with tamarindo."
+    },
+    {
+        "id": 6,
+        "name": "Cheesy Mac & Cheese With a Fruit Cup",
+        "photo": "Bar/Michelada.jpeg",
+        "price": 13,
+        "size": "24oz",
+        "spicy": "yes",
+        "favorite": "no",
+        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    }
+]

Websites/jefes-nextjs/app/menu/Sides/page.tsx

@@ -1,9 +1,13 @@
-import React from 'react'
+import React from "react";
+import Menu from "./items.json";
+import MenuCard from "../MenuCard/MenuCard";
 
 const page = () => {
   return (
-    <div>page</div>
+    <main>
-  )
+      <MenuCard Menu={Menu} />
-}
+    </main>
+  );
+};
 
-export default page
+export default page;

Websites/jefes-nextjs/app/menu/layout.tsx

@@ -15,7 +15,7 @@ const layout = ({ children }: { children: React.ReactNode }) => {
           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="">Menu</span>
@@ -26,7 +26,42 @@ const layout = ({ children }: { children: React.ReactNode }) => {
       <div className="flex flex-row justify-evenly pt-4">
         <MenuLinks />
       </div>
-      <div className="flex-grow w-full p-6 md:overflow-y-auto md:p-12">{children}</div>
+      <div className="flex flex-row items-center justify-evenly text-xl relative font-normal mt-4">
+        <span className="grid grid-rows-1 grid-cols-2">
+          Spicy-
+          <div className="relative w-1/2">
+            <Image
+              src="/red-chili-pepper.svg"
+              alt="chili pepper spice"
+              fill
+              style={{
+                objectFit: "contain",
+              }}
+              quality={100}
+              className=""
+            />
+          </div>
+        </span>
+        <span className="grid grid-cols-2">
+          Favorite-
+          <div className="relative w-1/3">
+            <Image
+              src="/star.svg"
+              alt="chili pepper spice"
+              fill
+              style={{
+                objectFit: "contain",
+              }}
+              quality={100}
+              className=""
+            />
+          </div>
+        </span>
+      </div>
+
+      <div className="flex-grow w-full h-full p-6 md:overflow-y-auto md:px-14">
+        {children}
+      </div>
     </div>
   );
 };

Websites/jefes-nextjs/app/menuButton.tsx

@@ -1,14 +1,20 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import React from "react";
+import Link from "next/link";
 
 const MenuButton = () => {
   return (
     <div>
       <div className="right-2 hidden md:block">
-        <Button size="sm" className="xl:text-lg  bg-zinc-900 hover:bg-slate-600">
+        <Button
+          size="sm"
+          className="xl:text-lg  bg-zinc-900 hover:bg-slate-600"
+        >
           <span className="flex flex-row px-3">
-            <span className="flex flex-row">VIEW MENU</span>
+            <span className="flex flex-row">
+              <Link href="/menu">VIEW MENU</Link>
+            </span>
           </span>
         </Button>
       </div>

Websites/jefes-nextjs/app/page.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unescaped-entities */
 import Link from "next/link";
 import Image from "next/image";
 import { EmblaCarousel } from "./carousel";
@@ -6,7 +5,6 @@ import Reserve from "./components/NavBar/reserveButton";
 import MenuButton from "./menuButton";
 import "./home.css";
 import GoogleMap from "@/components/Maps/MapComponent";
-import { cn } from "../lib/utils";
 
 export default function Home() {
   return (
@@ -23,7 +21,7 @@ export default function Home() {
             className="brightness-[20%] -z-90"
           />
           <div className="flex flex-col items-center justify-center text-white absolute w-full h-[95svh] gap-6">
-            {/* <center className="bg-gray-700 w-full">0</center> */}
+            {/* <center classNae="bg-gray-700 w-full">0</center> */}
             <div className="flex w-full h-[24svh] relative">
               <Image
                 src="/award01.png"
@@ -36,7 +34,7 @@ export default function Home() {
               />
             </div>
             <p className="flex flex-col w-full justify-center px-[24svw] text-xl 2xl:px-[25svw] text-center py-[10px] leading-relaxed">
-              Jefe's Mexican Cocina Y Cantina serves the best Mexican food in
+              Jefe&apos;s Mexican Cocina Y Cantina serves the best Mexican food in
               town. Be our guests and have an enjoyable experience with an
               authentic Mexican meal right here in Broken Arrow, OK.
             </p>
@@ -57,7 +55,7 @@ export default function Home() {
             </h2>
             <div className="text-xl">
               <p>
-                Jefe's Mexican cocina y cantina is a family owned authentic
+                Jefe&apos;s Mexican cocina y cantina is a family owned authentic
                 mexican restaurant that provides a variety of different dishes
                 and cocktails. We are one of the best restaurants around because
                 nowhere else can you find the most extraordinary homemade
@@ -165,7 +163,7 @@ export default function Home() {
             </h2>
             <div className="w-[70%] md:w-[28svw]">
               <p className="lg:text-xl text-base lg:font-normal font-semibold">
-                Jefe's is known for our amazing bar counter and attentive
+                Jefe&apos;s is known for our amazing bar counter and attentive
                 customer service. We want each and every one of our customers to
                 have a great time no matter the occasion. Because of our great
                 selection of alcoholic drinks, we know you’ll be more than happy
@@ -220,10 +218,10 @@ export default function Home() {
             </div>
             <div className="w-[70%] md:w-[29svw]">
               <p className="lg:text-xl text-base lg:font-normal font-semibold">
-                Jefe's is known for our amazing bar counter and attentive
+                Jefe&apos;s is known for our amazing bar counter and attentive
                 customer service. We want each and every one of our customers to
                 have a great time no matter the occasion. Because of our great
-                selection of alcoholic drinks, we know you’ll be more than happy
+                selection of alcoholic drinks, we know you&apos;ll be more than happy
                 with our beverages.
               </p>
             </div>
@@ -285,7 +283,8 @@ export default function Home() {
         </div>
         <div className="w-full h-[80svh] bg-blue-300">
           {/* <GoogleReviews /> */}
-          {/* <GoogleMap /> */}
+          <GoogleMap />
+          <div className="flex flex-col">Come Visit Us! We're located right off the 51!</div>
         </div>
         {/* <div className="flex flex-col w-full h-[180vh]">
           <EmblaCarousel />

Websites/jefes-nextjs/components/Footer/footer.tsx

@@ -20,7 +20,7 @@ const Footer = () => {
     <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">
+          <div className="h-1/2 w-full relative -mt-2">
             {/* logo */}
             <Link href="/" className="">
               <Image
@@ -28,6 +28,7 @@ const Footer = () => {
                 fill
                 style={{ objectFit: "contain", objectPosition: "center" }}
                 alt="Logo"
+                sizes="(max-width: 25px) 100vw, (max-width: 1200px) 50vw, 33vw"
                 quality={100}
               />
             </Link>
@@ -89,9 +90,12 @@ const Footer = () => {
           </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" />
+            <a href="https://www.tiktok.com/@jefesbrokenarrow"><FaTiktok size={30} className="cursor-pointer" /></a>
-            <AiOutlineInstagram size={30} className="cursor-pointer" />
+            <a href="https://www.instagram.com/jefesbrokenarrow/"><AiOutlineInstagram size={30} className="cursor-pointer" /></a>
-            <AiOutlineFacebook size={30} className="cursor-pointer" />
+            <a href="https://www.facebook.com/jefesbrokenarrow"><AiOutlineFacebook size={30} className="cursor-pointer" /></a>
+            {/* Grub hub link https://www.grubhub.com/restaurant/jefes-mexican-cocina-y-cantina-24188-e-hwy-51-broken-arrow/2735039?pickup=true&rwg_token=AAh05qZCcKFQ2Z7gD1Zk8cKMX6nulMnyaXXy0WFPLpaVJpzOl7Hmg_7_21m5_lqd6Px-CeiFlA0OBrR9wjNyhFbJLOA6sURn_fdyCxIc6A4f4duiviHGfos%3D */}
+            {/* yelp link https://www.yelp.com/biz/jefes-mexican-cocina-and-cantina-broken-arrow */}
+
           </div>
         </div>
       </div>

Websites/jefes-nextjs/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@auth/drizzle-adapter": "^0.3.9",
+    "@plaiceholder/next": "^3.0.0",
     "@planetscale/database": "^1.11.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@react-google-maps/api": "^2.19.2",
@@ -34,7 +35,7 @@
     "react-hook-form": "^7.47.0",
     "react-icons": "^4.11.0",
     "react-simplemde-editor": "^5.2.0",
-    "sharp": "^0.32.6",
+    "sharp": "^0.33.2",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",
     "tsx": "^4.6.1",

Websites/jefes-nextjs/tailwind.config.ts

@@ -74,6 +74,10 @@ module.exports = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      screens: {
+        "tablet": "860px",
+        "desktop": "1080px",
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],

Websites/jefes-nextjs/tsconfig.json

@@ -34,7 +34,7 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "../UnusedPages/AddToCart.tsx"
+    "build/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"