Initialize Next.js project with essential configurations and components
- Added .gitignore to exclude unnecessary files and directories. - Created next.config.js for Next.js configuration. - Set up package.json and package-lock.json with dependencies including Next.js, React, and TypeScript. - Implemented Tailwind CSS for styling with a dedicated tailwind.config.ts. - Developed core application structure including layout, pages, and components for header, footer, and various sections (Hero, Services, Pricing, etc.). - Integrated contact form functionality using nodemailer for email handling. - Established global styles in globals.css and added animations with Framer Motion. - Included README.md for project documentation and setup instructions.
This commit is contained in:
SarTron-NorthBlue
113
components/sections/FAQ.tsx
Normal file
113
components/sections/FAQ.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
'use client'
|
||||
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { useState } from 'react'
|
||||
import { ChevronDown, HelpCircle, MessageCircle } from 'lucide-react'
|
||||
import BackgroundAnimations from '@/components/BackgroundAnimations'
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
question: "Qu'est-ce que Vaultwarden ?",
|
||||
answer: "Une implémentation légère et performante du serveur Bitwarden open-source. Permet de gérer vos mots de passe de manière sécurisée avec un chiffrement de bout en bout.",
|
||||
},
|
||||
{
|
||||
question: 'Est-ce que mes données restent chez moi ?',
|
||||
answer: "Oui, avec nos solutions NAS ou Mini PC, vos données restent 100% chez vous. Pour l'hébergement cloud, vos données sont stockées sur nos serveurs sécurisés en France avec chiffrement de bout en bout.",
|
||||
},
|
||||
{
|
||||
question: 'Que se passe-t-il si mon serveur tombe en panne ?',
|
||||
answer: "Notre hébergement cloud garantit 99.9% d'uptime. Pour les installations locales, nous proposons des contrats de support. Les apps Bitwarden fonctionnent aussi en mode offline.",
|
||||
},
|
||||
{
|
||||
question: 'Quelle est la différence entre Bitwarden et Vaultwarden ?',
|
||||
answer: "Vaultwarden est plus léger et consomme moins de ressources, écrit en Rust. Parfaitement compatible avec Bitwarden, avec toutes les fonctionnalités premium incluses.",
|
||||
},
|
||||
{
|
||||
question: "Proposez-vous une migration depuis d'autres gestionnaires ?",
|
||||
answer: "Oui, nous accompagnons la migration depuis LastPass, 1Password, Dashlane, KeePass et autres. Outils et assistance fournis pour un transfert sécurisé.",
|
||||
},
|
||||
{
|
||||
question: 'Quels sont les prérequis pour l\'installation NAS ?',
|
||||
answer: "NAS compatible (Synology, QNAP, etc.) avec Docker installé, minimum 2 Go de RAM et quelques Go d'espace disque. Nom de domaine et accès réseau requis.",
|
||||
},
|
||||
]
|
||||
|
||||
export default function FAQ() {
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(null)
|
||||
|
||||
return (
|
||||
<section id="faq" className="section-padding bg-security-dark relative overflow-hidden">
|
||||
<BackgroundAnimations variant="default" />
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
{/* Split Layout */}
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-start">
|
||||
{/* Left - Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="sticky top-24"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center w-20 h-20 bg-security-accent/10 border border-security-accent/30 rounded-2xl mb-6">
|
||||
<HelpCircle className="w-10 h-10 text-security-accent" />
|
||||
</div>
|
||||
<h2 className="text-5xl md:text-6xl font-black mb-6 text-white">
|
||||
Questions <span className="gradient-text">Fréquentes</span>
|
||||
</h2>
|
||||
<p className="text-xl text-gray-400 leading-relaxed mb-8">
|
||||
Tout ce que vous devez savoir sur nos solutions Vaultwarden
|
||||
</p>
|
||||
<div className="flex items-center space-x-3 text-gray-400">
|
||||
<MessageCircle className="w-5 h-5 text-security-accent" />
|
||||
<span className="text-sm">Besoin d'aide ? Contactez-nous</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right - FAQ Items */}
|
||||
<div className="space-y-4">
|
||||
{faqs.map((faq, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
className="card-dark rounded-2xl overflow-hidden"
|
||||
>
|
||||
<button
|
||||
onClick={() => setOpenIndex(openIndex === index ? null : index)}
|
||||
className="w-full px-6 py-5 flex items-center justify-between text-left hover:bg-security-card/50 transition-colors"
|
||||
>
|
||||
<span className="text-lg font-bold text-white pr-8">{faq.question}</span>
|
||||
<motion.div
|
||||
animate={{ rotate: openIndex === index ? 180 : 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
<ChevronDown className="w-5 h-5 text-security-accent" />
|
||||
</motion.div>
|
||||
</button>
|
||||
<AnimatePresence>
|
||||
{openIndex === index && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="px-6 pb-5 text-gray-400 leading-relaxed border-t border-security-border">
|
||||
{faq.answer}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user