File size: 4,708 Bytes
84fc8e7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | import { ShieldCheck, Cpu, Layers, Sparkles, FolderSync, MousePointerClick } from "lucide-react";
import { motion } from "motion/react";
export default function Features() {
const featuresList = [
{
id: "feat-formats",
title: "200+ Multi-Media Formats",
description: "Seamlessly convert documents (PDF, Word, TXT), images (WebP, PNG, JPG, GIF), videos (MP4, AVI, MKV), and audios (MP3, WAV, FLAC).",
icon: <Layers className="w-5 h-5 text-violet-600" />,
},
{
id: "feat-offline",
title: "100% On-Device Offline Engine",
description: "Keep private business compliance pristine. Zero server uploads mean 100% data confidentiality, shielding you from third-party server risks.",
icon: <ShieldCheck className="w-5 h-5 text-indigo-600" />,
},
{
id: "feat-gpu",
title: "GPU Hardware Accelerated",
description: "Fully optimized for Nvidia CUDA, OpenCL, and Apple Metal. Achieve up to 200x speedups during complex encoding and file compressing.",
icon: <Cpu className="w-5 h-5 text-fuchsia-600" />,
},
{
id: "feat-ai",
title: "Local AI Super-Resolution",
description: "Upscale pixelated images, clarify noisy interviews, or automatically summarize files using fully local models with no token usage.",
icon: <Sparkles className="w-5 h-5 text-violet-500" />,
},
{
id: "feat-batch",
title: "Smart Batch Pipeline",
description: "Drop folder collections other software crashes on. Parallel multitasking processing converts batches of 500+ items seamlessly.",
icon: <FolderSync className="w-5 h-5 text-emerald-500" />,
},
{
id: "feat-drag",
title: "Fluid Drag & Drop Workspace",
description: "Drop files directly into the minimized background desktop panel or folder watch list to process media in seconds.",
icon: <MousePointerClick className="w-5 h-5 text-indigo-500" />,
},
];
return (
<section id="features" className="py-24 bg-gradient-to-b from-white to-[#FAF9FE] relative">
<div className="max-w-7xl mx-auto px-4 md:px-8">
{/* Header */}
<div className="text-center max-w-2xl mx-auto mb-16">
<span className="text-xs font-bold font-mono tracking-wider text-violet-600 uppercase bg-violet-50 px-3.5 py-1.5 rounded-full">
Technical Architecture
</span>
<h2 className="font-display font-bold text-3xl sm:text-4xl text-slate-900 tracking-tight mt-4 mb-5">
Engineered for{" "}
<span className="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">
maximum power
</span>
</h2>
<p className="text-slate-500 text-base font-light">
Why send confidential layouts and corporate multimedia to server queues? Protect your pipelines with high-speed local processing.
</p>
</div>
{/* Feature Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="features-cards-grid">
{featuresList.map((feature, i) => (
<motion.div
key={feature.id}
initial={{ opacity: 0, y: 25 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-50px" }}
transition={{ delay: i * 0.05, duration: 0.5 }}
whileHover={{ y: -6, shadow: "0 20px 40px -15px rgba(0,0,0,0.07)" }}
className="p-8 rounded-[24px] bg-white border border-slate-100 shadow-md shadow-slate-100/30 text-left transition-all relative group overflow-hidden"
id={feature.id}
>
{/* Highlight background shine */}
<div className="absolute inset-0 bg-gradient-to-br from-violet-50/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
<div className="w-12 h-12 rounded-2xl bg-slate-50 border border-slate-100/50 flex items-center justify-center mb-6 shadow-sm group-hover:scale-110 group-hover:border-violet-100 group-hover:bg-violet-50/20 transition-all duration-300">
{feature.icon}
</div>
<div>
<h3 className="font-display font-semibold text-lg text-slate-800 mb-2.5 tracking-tight group-hover:text-violet-600 transition-colors">
{feature.title}
</h3>
<p className="text-slate-500 text-sm leading-relaxed font-light">
{feature.description}
</p>
</div>
</motion.div>
))}
</div>
</div>
</section>
);
}
|