Add a visually engaging Linux distribution discovery app

Implement a Tinder-style card swiping interface for discovering Linux distributions, featuring landscape screenshots, physics-based animations, and dynamic backgrounds.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: e522d728-b28a-437f-b576-83935afe7ea0
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 214eff6b-5420-4bc2-8d15-c6c2ebb822ab
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/55e426a8-5a2b-421b-8bd4-30481ae0063b/e522d728-b28a-437f-b576-83935afe7ea0/3ouALIb
Replit-Helium-Checkpoint-Created: true

client/src/pages/home.tsx

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import Header from '@/components/Header';
+import CardStack from '@/components/CardStack';
+import DynamicBackground from '@/components/DynamicBackground';
+import { distroCards } from '@/data/distros';
+
+export default function Home() {
+  const [backgroundColors, setBackgroundColors] = useState<string[]>(
+    distroCards[0]?.colorPalette || ['#6B46C1', '#4F46E5', '#2563EB']
+  );
+
+  useEffect(() => {
+    document.documentElement.classList.add('dark');
+  }, []);
+
+  return (
+    <div className="relative min-h-screen w-full overflow-hidden">
+      <DynamicBackground colors={backgroundColors} />
+      <Header />
+      
+      <main className="flex min-h-screen items-center justify-center pt-20">
+        <CardStack 
+          cards={distroCards} 
+          onBackgroundChange={setBackgroundColors}
+        />
+      </main>
+    </div>
+  );
+}