File size: 6,771 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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | import { useState } from "react";
import { Plus, Minus, HelpCircle, MessageSquare } from "lucide-react";
import { motion, AnimatePresence } from "motion/react";
export default function FAQ() {
const [openId, setOpenId] = useState<string | null>("faq-0"); // keep first open by default
const faqs = [
{
id: "faq-0",
question: "Is Lumina Convert free to use?",
answer: "Yes! Lumina Convert is 100% free at all times with absolutely no limitations, file size restricts, or premium locks. It supports all 200+ formats straight out of the box, with zero watermark logs, offline telemetry, or sign-up gates. Our team is fully committed to keeping it a clean, accessible security asset for the global development community.",
},
{
id: "faq-1",
question: "Does my data or files get uploaded to any online server?",
answer: "Absolutely not. Lumina Convert is configured as an 'offline-first' software. When you drop files, 100% of the conversion process occurs on your computer. Your files never leave your machine which guarantees absolute protection from leak risks, compliance audits (HIPAA/GDPR), and slow internet queues.",
},
{
id: "faq-2",
question: "Which file formats are supported?",
answer: "We support over 200+ formats! This includes PDFs, Microsoft Office documents (DOCX, XLSX, PPTX), rich images (PNG, WebP, JPG, SVG, TIFF), high-fidelity video codecs (MP4, MOV, MKV, AVI, WebM), audio containers (MP3, WAV, FLAC, AAC), and software formats like JSON, XML, or archives.",
},
{
id: "faq-3",
question: "Is technical support available? Can I reach you on WhatsApp?",
answer: "Yes, we offer real-time customer support! You can reach out directly via WhatsApp at +92-303-4572298 or email us anytime at bahaduralimunnabhai@gmail.com. We operate standard under 12-hour response SLAs, helping you install codecs or configure directory watchers.",
},
];
return (
<section id="faq" className="py-24 bg-white relative">
<div className="max-w-4xl 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">
Frequently Asked
</span>
<h2 className="font-display font-bold text-3xl sm:text-4xl text-slate-900 tracking-tight mt-4 mb-4">
Got questions? We have{" "}
<span className="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">
answers
</span>
</h2>
<p className="text-slate-500 text-sm md:text-base font-light">
Everything you need to know about formats, compliance standards, license activation, and local installation.
</p>
</div>
{/* FAQs list accordion */}
<div className="space-y-4" id="faq-accordion-group">
{faqs.map((faq, index) => {
const isOpen = openId === faq.id;
return (
<div
key={faq.id}
className={`rounded-[24px] border transition-all duration-300 overflow-hidden ${
isOpen
? "bg-slate-50/50 border-violet-100 shadow-sm"
: "bg-white border-slate-100 hover:border-slate-200"
}`}
id={faq.id}
>
<button
onClick={() => setOpenId(isOpen ? null : faq.id)}
className="w-full py-5 px-6 md:px-8 flex items-center justify-between text-left focus:outline-none cursor-pointer"
id={`faq-btn-${faq.id}`}
>
<span className="font-display font-semibold text-base text-slate-800 pr-4">
{faq.question}
</span>
<div
className={`w-8 h-8 rounded-full border border-slate-105 flex items-center justify-center transition-transform duration-300 ${
isOpen ? "bg-violet-600 text-white border-violet-600 rotate-185" : "text-slate-400 bg-white"
}`}
>
{isOpen ? (
<Minus className="w-4 h-4 stroke-[2.5]" />
) : (
<Plus className="w-4 h-4 stroke-[2.5]" />
)}
</div>
</button>
<AnimatePresence initial={false}>
{isOpen && (
<motion.div
initial={{ height: 0 }}
animate={{ height: "auto" }}
exit={{ height: 0 }}
transition={{ duration: 0.25, ease: "easeInOut" }}
>
<div className="px-6 md:px-8 pb-6 text-sm text-slate-500 font-light leading-relaxed border-t border-slate-100/50 pt-3">
{faq.answer}
</div>
</motion.div>
)}
</AnimatePresence>
</div>
);
})}
</div>
{/* Floating Support Info */}
<div className="mt-12 p-6 rounded-3xl bg-slate-50 border border-slate-100/50 flex flex-col sm:flex-row items-center justify-between gap-4 text-left">
<div className="flex items-center space-x-3.5">
<div className="w-10 h-10 rounded-2xl bg-white flex items-center justify-center text-violet-600 shadow-sm">
<MessageSquare className="w-5 h-5 animate-pulse" />
</div>
<div>
<h4 className="text-sm font-semibold text-slate-900">Need personal folder automation?</h4>
<p className="text-xs text-slate-500 font-light mt-0.5">We offer custom shell triggers for business server arrays.</p>
</div>
</div>
<div className="flex space-x-3 flex-wrap">
<a
href="https://wa.me/923034572298"
target="_blank"
rel="noopener noreferrer"
id="faq-whatsapp-chat-btn"
className="py-2 px-4 rounded-xl bg-emerald-600 text-white font-semibold text-xs shadow-sm hover:bg-emerald-700 transition"
>
WhatsApp Us
</a>
<a
href="mailto:bahaduralimunnabhai@gmail.com"
id="faq-email-chat-btn"
className="py-2 px-4 rounded-xl border border-slate-205 text-slate-700 font-semibold text-xs hover:bg-slate-50 transition"
>
Email Specialist
</a>
</div>
</div>
</div>
</section>
);
}
|