fix: add mising file

Author: almoce

src/components/landing/features/DataFreedomFeature.tsx

@@ -0,0 +1,67 @@
+import { motion } from "framer-motion";
+import { Database, FileJson, FileSpreadsheet, FileText, Globe, Share2 } from "lucide-react";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+
+export const DataFreedomFeature = () => {
+  return (
+    <div className="relative h-full w-full bg-zinc-900/50 rounded-3xl border border-white/5 overflow-hidden flex flex-col items-center justify-center p-8 pointer-events-none select-none">
+      <div className="w-full max-w-[320px] shadow-2xl relative z-20 hover:scale-[1.02] transition-transform duration-500">
+        <Card className="bg-zinc-950/40 backdrop-blur-md border border-white/10 overflow-hidden relative group shadow-xl">
+          <CardHeader className="p-3 pb-2 flex flex-row items-center justify-between border-b border-white/5">
+            <div className="flex items-center gap-2">
+              <CardTitle className="text-[10px] uppercase tracking-wider font-bold flex items-center gap-1.5 text-zinc-400">
+                <Database className="w-3 h-3 text-sky-500" />
+                Data Freedom
+              </CardTitle>
+            </div>
+            <Share2 className="w-3 h-3 text-zinc-600" />
+          </CardHeader>
+          <CardContent className="p-6 h-[160px] flex items-center justify-center relative">
+            {/* Orbit Rings */}
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="w-32 h-32 rounded-full border border-white/5" />
+              <div className="absolute w-20 h-20 rounded-full border border-white/5" />
+            </div>
+
+            {/* Central Hub */}
+            <div className="relative z-10 w-12 h-12 bg-zinc-900 rounded-full border border-sky-500/30 flex items-center justify-center shadow-[0_0_15px_rgba(14,165,233,0.3)]">
+              <Database className="w-5 h-5 text-sky-400" />
+            </div>
+
+            {/* Orbiting Icons */}
+            <motion.div
+              className="absolute w-32 h-32"
+              animate={{ rotate: 360 }}
+              transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+            >
+              <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-zinc-900 p-1.5 rounded-full border border-white/10 group-hover:border-sky-500/50 transition-colors">
+                <FileJson className="w-3 h-3 text-zinc-400" />
+              </div>
+              <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 bg-zinc-900 p-1.5 rounded-full border border-white/10 group-hover:border-sky-500/50 transition-colors">
+                <FileSpreadsheet className="w-3 h-3 text-zinc-400" />
+              </div>
+            </motion.div>
+
+            <motion.div
+              className="absolute w-20 h-20"
+              animate={{ rotate: -360 }}
+              transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
+            >
+              <div className="absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2 bg-zinc-900 p-1.5 rounded-full border border-white/10 group-hover:border-sky-500/50 transition-colors">
+                <FileText className="w-3 h-3 text-zinc-400" />
+              </div>
+              <div className="absolute top-1/2 left-0 -translate-x-1/2 -translate-y-1/2 bg-zinc-900 p-1.5 rounded-full border border-white/10 group-hover:border-sky-500/50 transition-colors">
+                <Globe className="w-3 h-3 text-zinc-400" />
+              </div>
+            </motion.div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="text-center relative z-10 w-full mt-8">
+        <h3 className="text-2xl font-bold text-white mb-2">Data Freedom</h3>
+        <p className="text-zinc-400 leading-relaxed">Export anything. Sync everywhere.</p>
+      </div>
+    </div>
+  );
+};