feat: create a landing page

src/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback } from 'react'
 import { Toaster } from 'react-hot-toast'
-import { Plus } from 'lucide-react'
+import { Plus, ArrowLeft } from 'lucide-react'
 import type { Session } from '@supabase/supabase-js'
 import { supabase } from './lib/supabase'
 import { Layout } from './components/Layout'
@@ -14,6 +14,7 @@ import { LoginPromptModal } from './components/LoginPromptModal'
 import { UpdatePasswordModal } from './components/UpdatePasswordModal'
 import { DashboardPage } from './components/DashboardPage'
 import { ShareTreeModal } from './components/ShareTreeModal'
+import { LandingPage } from './components/LandingPage'
 import { api } from './lib/api'
 import { type FamilyMember } from './types'
 
@@ -92,9 +93,10 @@ function App() {
       <div className="relative">
         <button
           onClick={() => setShowAuth(false)}
-          className="absolute top-4 left-4 text-gray-600 hover:text-gray-900 z-10 font-medium cursor-pointer"
+          className="absolute top-6 left-6 flex items-center gap-2 text-gray-500 hover:text-primary-600 z-10 font-medium transition-colors cursor-pointer bg-white/80 backdrop-blur-sm px-4 py-2 rounded-full shadow-sm hover:shadow-md"
         >
-          ← Back to Tree
+          <ArrowLeft size={20} />
+          <span>Back to Home</span>
         </button>
         <AuthPage initialIsSignUp={authMode === 'signup'} />
       </div>
@@ -145,12 +147,25 @@ function App() {
         </div>
 
         <div className="bg-white/50 backdrop-blur-sm rounded-2xl border border-white/40 shadow-sm min-h-[600px] p-4 relative">
-          <FamilyTree
-            members={members}
-            onMemberClick={(member) => setEditingMember(member)}
-            treeId={currentTreeId || undefined}
-            treeName={treeName}
-          />
+          {!session ? (
+            <LandingPage
+              onSignIn={() => {
+                setAuthMode('signin');
+                setShowAuth(true);
+              }}
+              onSignUp={() => {
+                setAuthMode('signup');
+                setShowAuth(true);
+              }}
+            />
+          ) : (
+            <FamilyTree
+              members={members}
+              onMemberClick={(member) => setEditingMember(member)}
+              treeId={currentTreeId || undefined}
+              treeName={treeName}
+            />
+          )}
         </div>
 
         <AddMemberModal

src/components/AuthPage.tsx

@@ -27,7 +27,10 @@ const AuthForm: React.FC<AuthFormProps> = ({
 }) => (
     <div className="bg-white rounded-2xl shadow-xl w-full max-w-md p-8 h-full flex flex-col justify-center backface-hidden">
         <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold text-primary-900 mb-2">Generations</h1>
+            <div className="flex flex-col items-center gap-3 mb-2">
+                <img src="/logo.svg" alt="Generations Logo" className="w-12 h-12 rounded-xl shadow-sm" />
+                <h1 className="text-3xl font-bold text-primary-900">Generations</h1>
+            </div>
             <p className="text-secondary-600">
                 {mode === 'signup' ? 'Create your family tree' :
                     mode === 'forgot_password' ? 'Reset your password' : 'Welcome back'}

src/components/Header.tsx

@@ -27,7 +27,7 @@ export const Header: React.FC<HeaderProps> = ({ session, treeName, onSignOut, on
 
                 {/* Center: Tree Name (Hidden on very small screens if needed, or truncated) */}
                 <div className="absolute left-1/2 transform -translate-x-1/2 w-full max-w-[150px] sm:max-w-md text-center pointer-events-none">
-                    {treeName && (
+                    {session && treeName && (
                         <h1 className="text-lg font-medium text-gray-900 truncate px-2">
                             {treeName}
                         </h1>
@@ -36,7 +36,7 @@ export const Header: React.FC<HeaderProps> = ({ session, treeName, onSignOut, on
 
                 {/* Right: Actions */}
                 <div className="flex items-center gap-1 sm:gap-4">
-                    {onSwitchTree && (
+                    {onSwitchTree && session && (
                         <button
                             onClick={onSwitchTree}
                             className="p-2 text-gray-500 hover:text-primary-600 hover:bg-primary-50 rounded-full transition-colors cursor-pointer"
@@ -46,7 +46,7 @@ export const Header: React.FC<HeaderProps> = ({ session, treeName, onSignOut, on
                         </button>
                     )}
 
-                    {onShare && (
+                    {onShare && session && treeName && (
                         <button
                             onClick={onShare}
                             className="p-2 text-gray-500 hover:text-green-600 hover:bg-green-50 rounded-full transition-colors cursor-pointer"

src/components/LandingPage.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Users, Share2, Heart } from 'lucide-react';
+
+interface LandingPageProps {
+    onSignIn: () => void;
+    onSignUp: () => void;
+}
+
+export const LandingPage: React.FC<LandingPageProps> = ({ onSignIn, onSignUp }) => {
+    return (
+        <div className="flex flex-col items-center justify-center min-h-[80vh] text-center px-4 animate-in fade-in duration-700">
+            <div className="mb-8 relative">
+                <div className="absolute inset-0 bg-primary-200 rounded-full blur-3xl opacity-20 animate-pulse"></div>
+                <img src="/logo.svg" alt="Generations Logo" className="relative w-32 h-32 drop-shadow-2xl rounded-2xl" />
+            </div>
+
+            <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6 tracking-tight">
+                Preserve Your <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-primary-400">Legacy</span>
+            </h1>
+
+            <p className="text-lg md:text-xl text-gray-500 max-w-2xl mb-12 leading-relaxed">
+                Generations helps you build, visualize, and share your family history.
+                Connect with your roots in a beautiful, modern way.
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-4 w-full max-w-md mb-16">
+                <button
+                    onClick={onSignUp}
+                    className="flex-1 px-8 py-4 bg-primary-600 text-white rounded-xl font-semibold text-lg hover:bg-primary-700 transition-all shadow-lg hover:shadow-primary-500/30 cursor-pointer"
+                >
+                    Get Started
+                </button>
+                <button
+                    onClick={onSignIn}
+                    className="flex-1 px-8 py-4 bg-white text-gray-700 border border-gray-200 rounded-xl font-semibold text-lg hover:bg-gray-50 hover:border-gray-300 transition-all cursor-pointer"
+                >
+                    Sign In
+                </button>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl w-full text-left">
+                <div className="p-6 bg-white rounded-2xl border border-secondary-100 shadow-sm hover:shadow-md transition-shadow">
+                    <div className="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center text-blue-600 mb-4">
+                        <Users size={20} />
+                    </div>
+                    <h3 className="font-semibold text-gray-900 mb-2">Collaborative</h3>
+                    <p className="text-gray-500 text-sm">Invite family members to contribute photos, stories, and details to your shared tree.</p>
+                </div>
+                <div className="p-6 bg-white rounded-2xl border border-secondary-100 shadow-sm hover:shadow-md transition-shadow">
+                    <div className="w-10 h-10 bg-green-50 rounded-lg flex items-center justify-center text-green-600 mb-4">
+                        <Share2 size={20} />
+                    </div>
+                    <h3 className="font-semibold text-gray-900 mb-2">Easy Sharing</h3>
+                    <p className="text-gray-500 text-sm">Share your tree with a simple code. Control access with admin and viewer roles.</p>
+                </div>
+                <div className="p-6 bg-white rounded-2xl border border-secondary-100 shadow-sm hover:shadow-md transition-shadow">
+                    <div className="w-10 h-10 bg-rose-50 rounded-lg flex items-center justify-center text-rose-600 mb-4">
+                        <Heart size={20} />
+                    </div>
+                    <h3 className="font-semibold text-gray-900 mb-2">Modern Design</h3>
+                    <p className="text-gray-500 text-sm">A beautiful, interactive interface that makes exploring your ancestry a joy.</p>
+                </div>
+            </div>
+        </div>
+    );
+};