Create landing page (#321)

web/frontend/app/features/home/routes/home.tsx

@@ -1,55 +1,51 @@
-import { Link } from 'react-router';
+import { getBreweries, type Brewery } from '../../breweries/breweries.server';
 import { getOptionalAuth } from '../../auth/auth.server';
+import ClosingCta from '../components/ClosingCta';
+import FeatureHighlights from '../components/FeatureHighlights';
+import HeroSection from '../components/HeroSection';
+import LandingFooter from '../components/LandingFooter';
+import PartnerBreweries from '../components/PartnerBreweries';
+import ThemeTryOut from '../components/ThemeTryOut';
 import type { Route } from './+types/home';
 
+const PARTNER_BREWERY_COUNT = 3;
+
 export const meta = ({}: Route.MetaArgs) => [
     { title: 'The Biergarten App' },
-    { name: 'description', content: 'Welcome to The Biergarten App' },
+    {
+        name: 'description',
+        content:
+            'Browse our partner breweries, see what they pour, and keep track of the beers you have tried.',
+    },
 ];
 
 export const loader = async ({ request }: Route.LoaderArgs) => {
     const auth = await getOptionalAuth(request);
-    return { username: auth?.username ?? null };
+
+    // The rest of the landing page stands on its own, so a brewery service
+    // outage degrades to the empty state instead of an error page.
+    let recentBreweries: Brewery[] = [];
+    try {
+        recentBreweries = await getBreweries(PARTNER_BREWERY_COUNT, 0);
+    } catch {
+        recentBreweries = [];
+    }
+
+    return { isAuthenticated: auth !== null, recentBreweries };
 };
 
 const Home = ({ loaderData }: Route.ComponentProps) => {
-    const { username } = loaderData;
+    const { isAuthenticated, recentBreweries } = loaderData;
 
     return (
-        <div className="hero min-h-screen bg-base-200">
-            <div className="hero-content text-center">
-                <div className="max-w-md space-y-6">
-                    <h1 className="text-5xl font-bold">🍺 The Biergarten App</h1>
-                    <p className="text-lg text-base-content/70">Authentication Demo</p>
-
-                    {username ? (
-                        <>
-                            <p className="text-base-content/80">
-                                Welcome back,{' '}
-                                <span className="font-semibold text-primary">{username}</span>!
-                            </p>
-                            <div className="flex gap-3 justify-center">
-                                <Link to="/dashboard" className="btn btn-primary">
-                                    Dashboard
-                                </Link>
-                                <Link to="/logout" className="btn btn-ghost">
-                                    Logout
-                                </Link>
-                            </div>
-                        </>
-                    ) : (
-                        <div className="flex gap-3 justify-center">
-                            <Link to="/login" className="btn btn-primary">
-                                Login
-                            </Link>
-                            <Link to="/register" className="btn btn-outline">
-                                Register
-                            </Link>
-                        </div>
-                    )}
-                </div>
-            </div>
-        </div>
+        <main className="bg-base-200 text-base-content">
+            <HeroSection />
+            <FeatureHighlights />
+            <PartnerBreweries breweries={recentBreweries} />
+            <ThemeTryOut />
+            <ClosingCta />
+            <LandingFooter isAuthenticated={isAuthenticated} />
+        </main>
     );
 };