Skip to content

Commit 2c133e1

Browse files
almocealmoce
committed
fix: style fix
1 parent dea23fc commit 2c133e1

File tree

2 files changed

+80
-57
lines changed

2 files changed

+80
-57
lines changed

‎src/components/landing/features/DataFreedomFeature.tsx‎

Lines changed: 76 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,89 @@
11
import { motion } from "framer-motion";
2-
import { Database, FileJson, FileSpreadsheet, FileText, Globe, Share2 } from "lucide-react";
2+
import { Database, FileJson, FileSpreadsheet, ArrowUpRight, ArrowDownLeft, FileText, Cloud } from "lucide-react";
33
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
44

55
export const DataFreedomFeature = () => {
66
return (
77
<div className="relative h-full w-full border border-white/5 overflow-hidden flex flex-col items-center justify-center p-8 pointer-events-none select-none">
8-
<div className="w-full max-w-[320px] shadow-2xl relative z-20 hover:scale-[1.02] transition-transform duration-500">
9-
<Card className="bg-zinc-950/40 backdrop-blur-md border border-white/10 overflow-hidden relative group shadow-xl">
10-
<CardHeader className="p-3 pb-2 flex flex-row items-center justify-between border-b border-white/5">
11-
<div className="flex items-center gap-2">
12-
<CardTitle className="text-[10px] uppercase tracking-wider font-bold flex items-center gap-1.5 text-zinc-400">
13-
<Database className="w-3 h-3 text-sky-500" />
14-
Data Freedom
15-
</CardTitle>
16-
</div>
17-
<Share2 className="w-3 h-3 text-zinc-600" />
18-
</CardHeader>
19-
<CardContent className="p-6 h-[160px] flex items-center justify-center relative">
20-
{/* Orbit Rings */}
21-
<div className="absolute inset-0 flex items-center justify-center">
22-
<div className="w-32 h-32 rounded-full border border-white/5" />
23-
<div className="absolute w-20 h-20 rounded-full border border-white/5" />
24-
</div>
8+
<div className="w-full max-w-[320px] shadow-2xl relative z-20 hover:scale-[1.02] transition-transform duration-500">
9+
<Card className="bg-zinc-950/40 backdrop-blur-md border border-white/10 overflow-hidden relative group shadow-xl">
10+
<CardHeader className="p-3 pb-2 flex flex-row items-center justify-between border-b border-white/5">
11+
<div className="flex items-center gap-2">
12+
<CardTitle className="text-[10px] uppercase tracking-wider font-bold flex items-center gap-1.5 text-zinc-400">
13+
<Database className="w-3 h-3 text-sky-500" />
14+
Data Freedom
15+
</CardTitle>
16+
</div>
17+
<div className="flex gap-1">
18+
<ArrowDownLeft className="w-3 h-3 text-emerald-500/50" />
19+
<ArrowUpRight className="w-3 h-3 text-sky-500/50" />
20+
</div>
21+
</CardHeader>
22+
<CardContent className="p-6 h-[160px] flex items-center justify-center relative overflow-hidden">
23+
24+
{/* Central Hub */}
25+
<div className="relative z-20 w-14 h-14 bg-zinc-900 rounded-full border border-sky-500/30 flex items-center justify-center shadow-[0_0_20px_rgba(14,165,233,0.2)]">
26+
<Database className="w-6 h-6 text-sky-400" />
27+
<div className="absolute inset-0 bg-sky-500/10 rounded-full animate-pulse" />
28+
</div>
2529

26-
{/* Central Hub */}
27-
<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)]">
28-
<Database className="w-5 h-5 text-sky-400" />
29-
</div>
30+
{/* Import Line (Left -> Center) */}
31+
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-[50%] h-[1px] bg-white/5 overflow-hidden pr-7">
32+
{/* The Green Line */}
33+
<motion.div
34+
className="w-full h-full bg-linear-to-r from-transparent via-emerald-500 to-transparent"
35+
initial={{ x: "-100%" }}
36+
animate={{ x: "100%" }}
37+
transition={{
38+
duration: 1.5,
39+
ease: "linear",
40+
repeat: Infinity,
41+
repeatDelay: 1.5 // Wait for blue to finish
42+
}}
43+
/>
44+
</div>
3045

31-
{/* Orbiting Icons */}
32-
<motion.div
33-
className="absolute w-32 h-32"
34-
animate={{ rotate: 360 }}
35-
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
36-
>
37-
<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">
38-
<FileJson className="w-3 h-3 text-zinc-400" />
39-
</div>
40-
<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">
41-
<FileSpreadsheet className="w-3 h-3 text-zinc-400" />
42-
</div>
43-
</motion.div>
46+
{/* Export Line (Center -> Right) */}
47+
<div className="absolute right-0 top-1/2 -translate-y-1/2 w-[50%] h-[1px] bg-white/5 overflow-hidden pl-7">
48+
{/* The Blue Line */}
49+
<motion.div
50+
className="w-full h-full bg-linear-to-r from-transparent via-sky-500 to-transparent"
51+
initial={{ x: "-100%" }}
52+
animate={{ x: "100%" }}
53+
transition={{
54+
duration: 1.5,
55+
ease: "linear",
56+
delay: 1.5, // Start after green finishes
57+
repeat: Infinity,
58+
repeatDelay: 1.5 // Wait for green to finish again
59+
}}
60+
/>
61+
</div>
4462

45-
<motion.div
46-
className="absolute w-20 h-20"
47-
animate={{ rotate: -360 }}
48-
transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
49-
>
50-
<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">
51-
<FileText className="w-3 h-3 text-zinc-400" />
52-
</div>
53-
<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">
54-
<Globe className="w-3 h-3 text-zinc-400" />
55-
</div>
56-
</motion.div>
57-
</CardContent>
58-
</Card>
59-
</div>
63+
{/* Icons for context (Static/Fading per cycle) */}
64+
<motion.div
65+
className="absolute left-4 top-1/2 -translate-y-1/2 p-1.5 rounded-lg bg-zinc-800/80 border border-white/10"
66+
animate={{ opacity: [0.3, 1, 0.3] }}
67+
transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
68+
>
69+
<FileSpreadsheet className="w-4 h-4 text-emerald-400" />
70+
</motion.div>
71+
72+
<motion.div
73+
className="absolute right-4 top-1/2 -translate-y-1/2 p-1.5 rounded-lg bg-zinc-800/80 border border-white/10"
74+
animate={{ opacity: [0.3, 1, 0.3] }}
75+
transition={{ duration: 3, repeat: Infinity, ease: "easeInOut", delay: 1.5 }}
76+
>
77+
<FileJson className="w-4 h-4 text-sky-400" />
78+
</motion.div>
79+
80+
</CardContent>
81+
</Card>
82+
</div>
6083

61-
<div className="text-center relative z-10 w-full mt-8">
62-
<h3 className="text-2xl font-bold text-white mb-2">Data Freedom</h3>
63-
<p className="text-zinc-400 leading-relaxed">Export anything. Sync everywhere.</p>
84+
<div className="text-center relative z-10 w-full mt-8">
85+
<h3 className="text-2xl font-bold text-white mb-2">Import & Export</h3>
86+
<p className="text-zinc-400 leading-relaxed">Your data. Freely moving.</p>
6487
</div>
6588
</div>
6689
);

‎src/components/landing/features/ProjectHubFeature.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,17 @@ export const ProjectHubFeature = () => {
2323
</div>
2424
<MoreHorizontal className="w-3 h-3 text-zinc-600" />
2525
</CardHeader>
26-
<CardContent className="p-3 grid grid-cols-2 gap-2">
26+
<CardContent className="p-3 h-[160px] grid grid-cols-2 gap-2">
2727
{projects.map((project, i) => (
2828
<motion.div
2929
key={project.name}
3030
initial={{ opacity: 0, scale: 0.9 }}
3131
whileInView={{ opacity: 1, scale: 1 }}
3232
transition={{ delay: i * 0.1, duration: 0.4 }}
33-
className={`p-3 rounded-lg border ${project.border} ${project.bg} group/item hover:bg-zinc-900/80 transition-colors cursor-default flex flex-col justify-between h-24`}
33+
className={`p-3 rounded-lg border ${project.border} ${project.bg} group/item hover:bg-zinc-900/80 transition-colors cursor-default flex flex-col justify-between h-16`}
3434
>
35-
<div className="flex justify-between items-start mb-2">
36-
<div className={`w-3 h-3 rounded-full ${project.color} bg-current opacity-80`} />
35+
<div className="flex justify-between items-start">
36+
<div className={`w-2 h-2 rounded-full ${project.color} bg-current opacity-80`} />
3737
</div>
3838
<p className="text-[10px] font-medium text-zinc-200 leading-tight group-hover/item:text-white transition-colors">{project.name}</p>
3939
</motion.div>

0 commit comments

Comments
 (0)