Main page update

Websites/jefes-nextjs/app/carousel.css

@@ -15,7 +15,7 @@
   -webkit-appearance: none;
   background-color: transparent;
   touch-action: manipulation;
-  display: inline-flex;
+  /* display: inline-flex; */
   text-decoration: none;
   cursor: pointer;
   border: 0;
@@ -35,7 +35,6 @@
 .embla__button {
   z-index: 1;
   color: white;
-  background-color: rgba(128, 128, 128, 0.288);
   display: flex;
   align-items: center;
   justify-content: center;

Websites/jefes-nextjs/app/carousel.tsx

@@ -90,7 +90,7 @@ export const EmblaCarousel = () => {
       <div className="embla__buttons">
         <PrevButton onClick={scrollPrev} disabled={prevBtnDisabled} />
       </div>
-      <div className="embla__buttons absolute w-[96vw] justify-end">
+      <div className="embla__buttons  w-[96vw] justify-end">
         <NextButton onClick={scrollNext} disabled={nextBtnDisabled} />
       </div>
     </div>

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

@@ -55,7 +55,7 @@ const NavBar = () => {
 
   return (
     <nav>
-      {/* <center className="text-accent bg-black">O</center> */}
+      {/* <center className="text-accent bg-black">0</center> */}
       <div
         className={
           navbar
@@ -67,7 +67,7 @@ const NavBar = () => {
           className={
             navbar
               ? "hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased ml-8 z-90"
-              : "hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased ml-8 pr-6"
+              : "hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased ml-8 pr-4"
           }
         >
           {links.map((link) => (
@@ -88,7 +88,7 @@ const NavBar = () => {
           ))}
         </ul>
         {/* logo */}
-        <Link href="/" className="relative">
+        <Link href="/" className="relative justify-center items-center">
           <Image
             src="/logo.svg"
             width={0}
@@ -109,7 +109,7 @@ const NavBar = () => {
           />
         </Link>
 
-        <ul className="hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased md:pl-4">
+        <ul className="hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased md:pl-3">
           {links2.map((link) => (
             <Link
               key={link.href}

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

@@ -7,7 +7,7 @@ const Reserve = () => {
   return (
     <div>
       <div className="right-2 hidden md:block">
-        <Button className="xl:text-lg border bg-transparent">
+        <Button className="xl:text-lg  bg-red-800 hover:bg-slate-600">
           <span className="flex flex-row">
             <span className="flex flex-row">ORDER ONLINE</span>
           </span>

Websites/jefes-nextjs/app/menuButton.tsx

@@ -0,0 +1,19 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import React from "react";
+
+const MenuButton = () => {
+  return (
+    <div>
+      <div className="right-2 hidden md:block">
+        <Button className="xl:text-lg  bg-zinc-900 hover:bg-slate-600">
+          <span className="flex flex-row px-7">
+            <span className="flex flex-row">VIEW MENU</span>
+          </span>
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default MenuButton;

Websites/jefes-nextjs/app/page.tsx

@@ -1,12 +1,14 @@
 import Link from "next/link";
 import Image from "next/image";
 import { EmblaCarousel } from "./carousel";
+import Reserve from "./components/NavBar/reserveButton";
+import MenuButton from "./menuButton";
 
 export default function Home() {
   return (
     <main>
-      <div className="flex flex-col relative justify-center items-center">
+      <div className="flex flex-col relative">
-        <div className="flex relative w-full h-[100svh]">
+        <div className="flex relative w-full h-[90svh]">
           <Image
             src="/img01.webp"
             alt="nav image"
@@ -14,10 +16,34 @@ export default function Home() {
             fill
             style={{ objectFit: "cover", objectPosition: "center" }}
             quality={100}
-            className="brightness-[20%] "
+            className="brightness-[20%] -z-90"
           />
+          <div className="flex flex-col items-center justify-center text-white absolute w-full h-[90svh] gap-6">
+            {/* <center className="bg-gray-700 w-full">0</center> */}
+            <div className="flex w-full h-[24svh] relative">
+              <Image
+                src="/award01.png"
+                alt="award image"
+                priority
+                fill
+                style={{ objectFit: "contain", objectPosition: "center" }}
+                quality={100}
+                className=""
+              />
+            </div>
+            <p className="flex flex-col w-full justify-center px-[24svw] text-xl 2xl:px-[25svw] text-center">
+              Jefe'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>
+            {/* <center>0</center> */}
+            <div className="flex flex-row w-full space-x-6 items-center justify-center">
+              <MenuButton/>
+              <Reserve />
+            </div>
+          </div>
         </div>
-        <div className="flex w-full items-center justify-center">
+        <div className="flex flex-col w-full h-[180vh]">
           <EmblaCarousel />
         </div>
       </div>