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/components/DynamicBackground.tsx

@@ -0,0 +1,23 @@
+import { motion } from 'framer-motion';
+
+interface DynamicBackgroundProps {
+  colors: string[];
+}
+
+export default function DynamicBackground({ colors }: DynamicBackgroundProps) {
+  const gradientColors = colors.length >= 2 
+    ? colors 
+    : ['#6B46C1', '#4F46E5', '#2563EB'];
+
+  return (
+    <motion.div
+      className="fixed inset-0 -z-10"
+      animate={{
+        background: `radial-gradient(ellipse at center, ${gradientColors[0]}30 0%, ${gradientColors[1]}20 50%, ${gradientColors[2] || gradientColors[0]}10 100%)`,
+      }}
+      transition={{ duration: 0.5, ease: 'easeInOut' }}
+    >
+      <div className="absolute inset-0 bg-background/80 backdrop-blur-3xl" />
+    </motion.div>
+  );
+}