Created a new component to handle client side rendering on the main p…

…age to optimize the main page to rendered on the server.

frontend/src/app/components/Header.tsx

@@ -1,6 +1,7 @@
+'use client';
+
 import React from 'react';
 import { Location } from '../types';
-import Link from 'next/link';
 
 interface HeaderProps {
   onLocationShare: (location: Location) => void;
@@ -20,10 +21,12 @@ const Header: React.FC<HeaderProps> = ({
         },
         (error) => {
           console.error('Error getting location:', error);
-        },
+          // Optionally, provide user feedback here (e.g., toast notifications)
+        }
       );
     } else {
       console.error('Geolocation is not supported by this browser.');
+      // Optionally, provide user feedback here
     }
   };
 
@@ -36,42 +39,36 @@ const Header: React.FC<HeaderProps> = ({
   };
 
   return (
-    <header className="mb-4 flex flex-col items-center justify-between md:flex-row">
-      <div className="flex items-center w-full md:w-auto">
+    <header className="mb-4 flex flex-col items-center justify-center md:flex-row w-full">
+      {/* Container for Share Location Button and Search Form */}
+      <div className="flex items-center space-x-4">
+        {/* Share Location Button */}
         <button
           onClick={handleLocationShare}
-          className="mb-2 rounded bg-sky-700 p-2 text-white md:mb-0 md:mr-2 font-bold text-lg hover:bg-white hover:bg-opacity-50 hover:text-sky-700 hover:shadow-lg"
+          aria-label="Share your current location"
+          className="rounded bg-sky-700 p-2 text-white font-bold text-lg hover:bg-white hover:bg-opacity-50 hover:text-sky-700 hover:shadow-lg transition"
         >
           Share Location
         </button>
 
+        {/* Search Form */}
         <form onSubmit={handleAddressSubmit} className="flex items-center">
           <input
             name="address"
             type="text"
             placeholder="Enter address"
+            aria-label="Address"
             required
-            className="mr-2 rounded border bg-opacity-50 bg-white text-neutral-900 p-2"
+            className="mr-2 rounded border border-gray-300 bg-opacity-50 bg-white text-neutral-900 p-2 focus:outline-none focus:ring-2 focus:ring-sky-500 transition w-48"
           />
-          <button type="submit" className="rounded bg-yellow-600 p-2 text-white hover:text-black text-lg font-bold hover:bg-white hover:bg-opacity-50 hover:shadow-lg">
+          <button
+            type="submit"
+            className="rounded bg-yellow-600 p-2 text-white font-bold text-lg hover:text-black hover:bg-white hover:bg-opacity-50 hover:shadow-lg transition"
+          >
             Search
           </button>
         </form>
       </div>
-      <div className="flex justify-end w-full md:w-auto mt-2 md:mt-0">
-        {/* <Link
-          href="/signin"
-          className="text-blue-500 hover:text-blue-700 font-bold mr-4"
-        >
-          Sign in
-        </Link>
-        <Link
-          href="/signup"
-          className="text-blue-500 hover:text-blue-700 font-bold"
-        >
-          Sign up
-        </Link> */}
-      </div>
     </header>
   );
 };

frontend/src/app/components/InteractiveSection.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import Header from './Header';
+import { handleLocationShare } from '../services/locationService';
+import { handleAddressSubmit } from '../services/geocodeService';
+import { trackVisit } from '../services/analytics';
+import { Location } from '../types';
+
+const InteractiveSection: React.FC = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    trackVisit();
+  }, []);
+
+  return (
+    <div className="relative flex flex-col items-center rounded-lg border border-gray-300 border-opacity-50 text-center shadow-2xl bg-gray-200 bg-opacity-50 my-10 pt-20 pb-10 px-10">
+      <p className="font-thirsty font-bold text-3xl">
+        ~ Anywhere, Anytime ~
+      </p>
+
+      <h1 className="text-6xl font-brothers text-shadow-md py-4 text-neutral-950">
+        FIND YOUR NEW FAVORITE <br />TACO SPOT!
+      </h1>
+
+      <p className="font-bold text-xl pb-5">
+        Share or enter your location to get started.
+      </p>
+
+      <Header
+        onLocationShare={(loc: Location) => handleLocationShare(loc, router)}
+        onAddressSubmit={(address: string) =>
+          handleAddressSubmit(address, router)
+        }
+      />
+    </div>
+  );
+};
+
+export default InteractiveSection;

frontend/src/app/page.tsx

@@ -1,67 +1,39 @@
-'use client';
+// app/page.tsx
 
-import React, { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import Header from '../app/components/Header';
-import { handleLocationShare } from './services/locationService';
-import { handleAddressSubmit } from './services/geocodeService';
-import { trackVisit } from './services/analytics';
-import { Location } from './types';
-
-import image from '../../public/images/copilottacos.jpeg'
-import MainHead from '../../src/app/components/LandingHeader'
+import React from 'react';
+import MainHead from './components/LandingHeader';
 import Footer from './components/Footer';
-
-
+import InteractiveSection from './components/InteractiveSection';
+import Image from 'next/image';
 
 const HomePage: React.FC = () => {
-  const router = useRouter();
-
-  useEffect(() => {
-    trackVisit();
-  }, []);
-
   return (
-
     <div>
       <MainHead />
-      <div className="flex min-h-screen flex-col items-center justify-center relative "
+      <div
+        className="flex min-h-screen flex-col items-center justify-center relative"
         style={{
-          backgroundImage: `url(${image.src})`,
-          backgroundSize: "cover",
-          backgroundPosition: "contain", 
-          backgroundRepeat: "no-repeat", 
+          position: 'relative',
         }}
-        >
-
-    {/* Transparent black gradient div */}
-    <div
-        className="absolute inset-0"
-        style={{
-          background: "linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2))",
-          opacity: 0.7, // You can adjust this value for more or less transparency
-        }}
-      ></div>
-
-        {/* Content */}
-      <div className="relative z-5 flex flex-col items-center rounded-lg border border-gray-300 border-opacity-50 text-center shadow-2xl bg-gray-200 bg-opacity-50 my-10 pt-20 pb-10 px-10">
-
-        <p className="font-thirsty font-bold text-3xl  ">
-          ~ Anywhere, Anytime ~
-              </p>
-
-          <h1 className=" text-6xl font-brothers text-shadow-md py-4 text-neutral-950" >FIND YOUR NEW FAVORITE <br />TACO SPOT!</h1>
-          <p className='font-bold text-xl pb-5'>
-                Share or enter your location to get started. 
-              </p>
-          <Header
-            onLocationShare={(loc: Location) => handleLocationShare(loc, router)}
-            onAddressSubmit={(address: string) =>
-              handleAddressSubmit(address, router)
-            }
-          />
-        </div>
-
+      >
+        {/* Optimized Image as Background */}
+        <Image
+          src="/images/stock-photo-sumptuous-taco-feast-a-detailed-and-realistic-culinary-delight-on-a-dark-brown-table-2472438793.jpg"
+          alt="Sumptuous Taco Feast"
+          fill
+          style={{ objectFit: 'cover' }}
+          quality={75}
+          priority
+        />
+
+        {/* Transparent Black Gradient Overlay */}
+        <div
+          className="absolute inset-0 bg-gradient-to-b from-black/50 to-black/20"
+          style={{ opacity: 0.7 }}
+        ></div>
+
+        {/* Interactive Content */}
+        <InteractiveSection />
       </div>
       <Footer />
     </div>