| 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> |
| ); |
| } |
|
|
