changes to hero section

Websites/BankModern/src/components/Navbar/Navbar.jsx

@@ -57,4 +57,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;

Websites/jefes-nextjs/app/about-us/page.tsx

@@ -3,41 +3,34 @@ import Image from "next/image";
 
 const AboutUs = () => {
   return (
-    <div className="">
+    <div className="flex flex-col pt-20">
-      <div className="flex items-center justify-center text-center text-4xl hidden xl:block text-secondary">
+      <Image
+        src="/header02.webp"
+        alt="nav image"
+        priority
+        fill
+        style={{ objectFit: "cover", objectPosition: "75%" }}
+        quality={100}
+        className="brightness-[25%]"
+      />
+      <div className="flex items-center pt-4 justify-center text-center text-4xl hidden xl:block text-white lg:pt-4 lg:text-2xl">
         About Us
       </div>
-      <div className="flex items-center justify-center p-4  text-center text-2xl block xl:hidden text-secondary">
+      <div className="flex items-center justify-center p-4  text-center text-4xl hidden xl:block text-white lg:h-16 lg:text-2xl">
-        About Us
-      </div>
-      <div className="flex items-center justify-center p-4  text-center text-4xl hidden xl:block text-secondary">
         Jefe's Mexican Cantina & Cocina
       </div>
-      <div className="flex items-center justify-center h-16 p-4  text-center text-2xl block xl:hidden text-secondary">
+      <div className="flex relative mb-5 mx-auto max-w-xl relative items-center justify-center">
-        Jefe's Mexican Cantina & Cocina
-      </div>
-      <div className="flex mb-5 mx-auto max-w-xl relative items-center justify-center">
         <Image
           src="/kevin.webp"
-          width={0}
+          fill
-          height={0}
+          style={{ objectFit: "contain" }}
-          sizes="100vw"
+          quality={100}
-          style={{ width: "60%", height: "auto" }}
           alt="Photo of Kevin mobile."
-          className="block xl:hidden"
+          className=""
         />
       </div>
       <div className="flex gap-8 mx-auto relative max-w-screen-xl text-xl font-serif antialiased">
-        <Image
+        <div className="space-y-6 text-white p-20">
-          src="/kevin.webp"
-          width={0}
-          height={0}
-          sizes="100vw"
-          style={{ width: "100%", height: "auto" }}
-          alt="Photo of Kevin."
-          className="hidden xl:block p-4"
-        />
-        <div className="space-y-6">
           <p>
             My name is Kevin Aguilar, and I am the owner and manager of the
             Jefe's Mexican Cantina and Cocina based in Broken Arrow, Oklahoma.

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

@@ -5,4 +5,5 @@
 }
 .logo{
     margin: 0 auto;
+    align-items: center;
 }

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

@@ -42,8 +42,8 @@ const NavBar = () => {
   return (
     <nav className="">
       {/* <center className="text-accent bg-black">O</center> */}
-      <div className="flex items-center justify-center p-2 mx-auto bg-red-800">
+      <div className="flex items-center justify-center xl:p-1 mx-auto bg-transparent md:p-4 absolute z-10 w-full">
-        <ul className="hover:cursor-pointer hidden md:block space-x-4 text-xl font-sans antialiased">
+        <ul className="hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased">
           {links.map((link) => (
             <Link
               key={link.href}
@@ -67,10 +67,10 @@ const NavBar = () => {
             src="/logo.svg"
             width={0}
             height={0}
-            sizes="200vw"
+            sizes="100vw"
-            style={{ width: "50%", height: "auto" }}
+            style={{ width: "40%", height: "auto" }}
             alt="Logo"
-            className="hidden md:block logo"
+            className="hidden xl:block logo"
           />
           <Image
             src="/logo.svg"
@@ -83,7 +83,7 @@ const NavBar = () => {
           />
         </Link>
 
-        <ul className="hover:cursor-pointer hidden md:block space-x-4 text-xl font-sans antialiased">
+        <ul className="hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased md:pl-4">
           {links2.map((link) => (
             <Link
               key={link.href}
@@ -101,11 +101,13 @@ const NavBar = () => {
             </Link>
           ))}
         </ul>
+
         {/* Reservation button */}
-        <div className="right-2 hidden xl:block absolute overflow-hidden">
+        <div className="right-2 hidden md:block absolute overflow-hidden">
           <Reserve />
         </div>
-        <div className="overflow-hidden">
+        {/* Header image */}
+        {/* <div className="overflow-hidden">
           <Image
             src="/header02.webp"
             alt="nav image"
@@ -121,7 +123,7 @@ const NavBar = () => {
             style={{ objectFit: "cover" }}
             className="block md:hidden nav_background"
           />
-        </div>
+        </div> */}
       </div>
       <div className={menu_open ? "hidden" : ""}>
         {" "}

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

@@ -6,29 +6,24 @@ import { Button } from "@/components/ui/button";
 const Reserve = () => {
   return (
     <div>
-      <div className="right-2 hidden xl:block">
+      <div className="right-2 hidden md:block">
-        <Button className="text-lg text-accent bg-red-800">
+        <Button className="xl:text-lg border bg-transparent">
           <span className="flex flex-row">
             <span className="flex flex-row">ORDER ONLINE</span>
           </span>
           <Image
             src="/fork.svg"
-            width={20}
+            width={30}
-            height={20}
+            height={30}
             alt="fork"
+            className="pl-2 xl:block hidden"
           />
-        </Button>
-      </div>
-      <div className="flex top-2 hidden md:block xl:hidden">
-        <Button className="btn btn-primary text-md text-accent">
-          <span className="">
-            <span className="">ORDER ONLINE</span>
-          </span>
           <Image
             src="/fork.svg"
-            width={10}
+            width={25}
-            height={10}
+            height={25}
             alt="fork"
+            className="pl-2 xl:hidden block"
           />
         </Button>
       </div>

Websites/jefes-nextjs/app/layout.tsx

@@ -19,16 +19,16 @@ export default function RootLayout({
   return (
     <html lang="en" data-theme="jefes">
       <body className={inter.className}>
-        <NavBar />
+        <NavBar/>
-        <Image
+        {/* <Image
             src="/PaintBackground1.webp"
             width={0}
             height={0}
             style={{ width: "100%", height: "auto" }}
             alt="Logo"
             className="hidden md:block absolute -z-10"
-          />
+          /> */}
-        <main>{children}</main>
+        <main className="">{children}</main>
       </body>
     </html>
   );

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

@@ -1,10 +1,20 @@
 import React from "react";
+import Image from "next/image";
 
 const layout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="flex flex-col w-full md:overflow-hidden bg-gray-700">
+    <section className="relative w-full min-h-screen md:h-screen flex md:block flex-col justify-center">
+      <Image
+            src="/header02.webp"
+            alt="nav image"
+            priority
+            fill
+            style={{ objectFit: "cover" , objectPosition: '75%'}}
+            quality={100}
+            className="brightness-[25%]"
+          />
       <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
-    </div>
+    </section>
   );
 };