add redirect; add footer with assets link; add not found page

frontend/app/(auth)/layout.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+
+export default async function LoggedUserLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('token')?.value;
+  if (token) {
+    redirect('/trips');
+  }
+
+  return <>{children}</>;
+}

frontend/app/(root)/search/page.tsx

@@ -4,7 +4,6 @@ import React, { useEffect, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { UserSearch } from '@/validation/userProfileSchemas';
 import UserTile from '@/components/shared/UserTile';
-import { getToken, logout } from '@/lib/auth';
 import axiosInstance from '@/lib/axiosInstance';
 
 const SearchPage = () => {
@@ -20,15 +19,9 @@ const SearchPage = () => {
 
       setLoading(true);
       setError(null);
-      const token = await getToken();
-      if (!token) {
-        logout();
-        return;
-      }
       try {
         const response = await axiosInstance.get(`user-info/search`, {
           params: { name: query, page: 0, size: 20 },
-          headers: { Authorization: `Bearer ${token}` },
         });
         setResults(response.data.content || []);
       } catch (error) {

frontend/app/(root)/trips/page.tsx

@@ -76,7 +76,7 @@ function Page() {
 
   return (
     <div>
-      <div className="flex justify-between">
+      <div className="flex justify-between gap-4 sm:p-0 p-2 sm:flex-row flex-col ">
         <Link
           href="/trips/create"
           className="flex items-center gap-1.5 text-body-semibold text-primary-500 hover:underline"
@@ -85,7 +85,7 @@ function Page() {
           <p>Add a Trip</p>
         </Link>
         {trips && trips.length > 0 && (
-          <div className="flex flex-col items-center text-gray-700 md:flex-row gap-4">
+          <div className="flex items-center text-gray-700 gap-4">
             <div className="font-semibold ">Sort By</div>
             <button
               className={`flex items-center gap-2 px-3 py-2  shadow-md ${

frontend/app/layout.tsx

@@ -41,6 +41,17 @@ export default function RootLayout({
             <Toaster />
           </section>
         </Suspense>
+        <footer className="w-full text-center text-xs text-gray-500 py-4 border-t">
+          Illustration by{' '}
+          <a
+            href="https://storyset.com/city"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline hover:text-blue-600"
+          >
+            Storyset
+          </a>
+        </footer>
       </body>
     </html>
   );

frontend/app/not-found.tsx

@@ -0,0 +1,36 @@
+'use client';
+import Link from 'next/link';
+import Image from 'next/image';
+
+export default function NotFound() {
+  return (
+    <div className="section py-6 px-6 md:px-12 border">
+      <div className="flex flex-col-reverse lg:flex-row items-center lg:gap-10 gap-4">
+        <div className="flex-1 text-center lg:text-left">
+          <h1 className="text-heading1-bold">Oops! Page not found.</h1>
+          <p className="mt-4 text-base">
+            The page you&#39;re looking for doesn&#39;t exist or has been moved.
+            <br />
+            Let&#39;s get you back on track.
+          </p>
+          <Link href="/">
+            <button className="primary-btn text-heading4-medium px-16 py-3 mt-6">
+              Go to Homepage
+            </button>
+          </Link>
+        </div>
+
+        <div className="flex-1 w-full max-w-md mx-auto">
+          <Image
+            src="/assets/lost-bro.png"
+            alt="Page Not Found"
+            width={600}
+            height={600}
+            className="w-full h-auto object-cover"
+            priority
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/page.tsx

@@ -1,20 +1,46 @@
-import React from 'react';
+'use client';
+import { useEffect } from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
+import { getToken } from '@/lib/auth';
+import { useRouter } from 'next/navigation';
 
 export default function Home() {
+  const router = useRouter();
+
+  useEffect(() => {
+    const token = getToken();
+    if (token) {
+      router.push('/trips');
+    }
+  }, [router]);
+
   return (
-    <div className="section py-6 px-12">
-      <div>
-        <h1 className="text-heading1-bold">Group travel, made simple.</h1>
-        <p className="mt-4">
-          Plan, vote on activities, and keep everything organized with
-          FareShare. From destinations to shared expenses — make every trip
-          effortless and unforgettable, together.
-        </p>
+    <div className="section py-6 px-6 md:px-12 border">
+      <div className="flex flex-col-reverse lg:flex-row items-center lg:gap-10 gap-4">
+        <div className="flex-1">
+          <h1 className="text-heading1-bold">Group travel, made simple.</h1>
+          <p className="mt-4">
+            Plan, vote on activities, and keep everything organized with
+            FareShare. From destinations to shared expenses — make every trip
+            effortless and unforgettable, together.
+          </p>
+          <button className="primary-btn text-heading4-medium px-16 py-3 mt-4">
+            <Link href="/sign-up">Get Started</Link>
+          </button>
+        </div>
+
+        <div className="flex-1 w-full max-w-md mx-auto">
+          <Image
+            src="/assets/trip-placeholder.png"
+            alt="Trip placeholder"
+            width={600}
+            height={600}
+            className="w-full h-auto object-cover"
+            priority
+          />
+        </div>
       </div>
-      <button className="primary-btn text-heading4-medium px-16 py-3 mt-4">
-        <Link href="/sign-up">Get Started</Link>
-      </button>
     </div>
   );
 }