feat: implement complete landing page with light/dark theme support

- Add LandingPage component with fixed navigation, hero section, features, and footer
- Implement 5 feature sections with icons and responsive design
- Add profile section with social media links (Twitter, Instagram, LinkedIn)
- Create build section with Cursor AI branding and profile box
- Add comprehensive light/dark mode color system with improved contrast
- Include responsive design with mobile-first approach
- Add all necessary assets: images, icons, and illustrations
- Update app routing to show landing page for unauthenticated users
- Enhance CSS variables system for theme-aware styling
- Implement hover/active states for all interactive elements

Author: morphine-cake

app/globals.css

@@ -11,6 +11,14 @@
   --fg-default: #191919;
   --fg-soft: #414141;
   --bg-default: #ffffff;
+  --accent: #b12c2f;
+  --bg-active: #F4F4F4;
+  --nav-border: #191919;
+  --hero-gradient-start: rgba(249, 249, 249, 0.00);
+  --hero-gradient-end: #F9F9F9;
+  --divider-color: #E8E8E8;
+  --hero-border-color: #000000;
+  --hero-shadow-color: rgba(0, 0, 0, 0.08);
   --fg-default-rgb: 25, 25, 25;
   --fg-soft-rgb: 65, 65, 65;
   --bg-default-rgb: 255, 255, 255;
@@ -19,11 +27,19 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --fg-default: #FFFFFF;
-    --fg-soft: #D6D6D6;
-    --bg-default: #191919;
+    --fg-soft: #B8B8B8;
+    --bg-default: #0F0F0F;
+    --accent: #FF6B6B;
+    --bg-active: #1F1F1F;
+    --nav-border: #333333;
+    --hero-gradient-start: rgba(31, 31, 31, 0.00);
+    --hero-gradient-end: #1F1F1F;
+    --divider-color: #333333;
+    --hero-border-color: #FFFFFF;
+    --hero-shadow-color: rgba(255, 255, 255, 0.1);
     --fg-default-rgb: 255, 255, 255;
-    --fg-soft-rgb: 214, 214, 214;
-    --bg-default-rgb: 25, 25, 25;
+    --fg-soft-rgb: 184, 184, 184;
+    --bg-default-rgb: 15, 15, 15;
   }
 }
 

app/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import AuthGuard from "@/components/AuthGuard";
 import Footer from "@/components/Footer";
+import LandingPage from "@/components/LandingPage";
+
 import TodoItem, { Todo, TodoStatus } from "@/components/TodoItem";
 import TopBar from "@/components/TopBar";
 import { useAuth } from "@/contexts/AuthContext";
@@ -313,9 +314,34 @@ function HomeContent() {
 }
 
 export default function Home() {
-  return (
-    <AuthGuard>
-      <HomeContent />
-    </AuthGuard>
-  );
+  const { user, loading } = useAuth();
+
+  // Show loading state
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-bg-default flex items-center justify-center">
+        <svg
+          width="27"
+          height="27"
+          viewBox="0 0 54 54"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="text-fg-default animate-spin"
+        >
+          <path
+            d="M28.2812 0.00671387C42.5975 0.673119 53.9999 12.4906 54 26.9716C54 41.8805 41.9138 53.9666 27.0049 53.9667C12.0959 53.9667 0.00976562 41.8805 0.00976562 26.9716C0.00986887 12.5116 11.3791 0.70742 25.666 0.00964355C11.9114 0.720031 9.04005 12.519 9.04004 26.9706C9.04004 41.8795 12.096 53.9656 27.0049 53.9657C41.9138 53.9657 43.8477 41.8795 43.8477 26.9706C43.8477 12.4981 42.0255 0.685921 28.2812 0.00671387Z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+    );
+  }
+
+  // Show landing page for unauthenticated users
+  if (!user) {
+    return <LandingPage />;
+  }
+
+  // Show todo app for authenticated users
+  return <HomeContent />;
 }