bed824059a
- 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.
98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import { useInView } from 'framer-motion'
|
|
import { useRef } from 'react'
|
|
import { Lock, Key, Shield, TrendingUp } from 'lucide-react'
|
|
import BackgroundAnimations from '@/components/BackgroundAnimations'
|
|
|
|
const algorithms = [
|
|
{
|
|
name: 'AES-256-GCM',
|
|
bits: '256',
|
|
details: 'Rounds 14 • 3.7 GB/s',
|
|
icon: Lock,
|
|
gradient: 'from-blue-500 to-cyan-500',
|
|
},
|
|
{
|
|
name: 'RSA-4096',
|
|
bits: '4096',
|
|
details: 'Primes 2048 bits • Sécurité Ultra',
|
|
icon: Key,
|
|
gradient: 'from-purple-500 to-pink-500',
|
|
},
|
|
{
|
|
name: 'ECDSA P-384',
|
|
bits: '384',
|
|
details: 'Courbe P-384 • Vérification Instantanée',
|
|
icon: Shield,
|
|
gradient: 'from-security-accent to-green-500',
|
|
},
|
|
]
|
|
|
|
export default function Encryption() {
|
|
const ref = useRef(null)
|
|
const isInView = useInView(ref, { once: true, margin: '-100px' })
|
|
|
|
return (
|
|
<section className="section-padding bg-security-dark relative overflow-hidden">
|
|
<BackgroundAnimations variant="particles" />
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
{/* Split Layout - Left Text, Right Visual */}
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
|
{/* Left Side - Text Content */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<div className="inline-block px-4 py-2 bg-security-accent/10 border border-security-accent/30 rounded-full mb-6">
|
|
<span className="text-security-accent text-sm font-semibold">Chiffrement</span>
|
|
</div>
|
|
<h2 className="text-5xl md:text-6xl font-black mb-6 text-white">
|
|
<span className="gradient-text">Avancé</span> pour vos données
|
|
</h2>
|
|
<p className="text-xl text-gray-400 mb-8 leading-relaxed">
|
|
Algorithmes cryptographiques de pointe pour protéger vos données avec une sécurité maximale.
|
|
</p>
|
|
<div className="flex items-center space-x-4 text-gray-300">
|
|
<TrendingUp className="w-6 h-6 text-security-accent" />
|
|
<span className="text-sm">Performance optimale garantie</span>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Right Side - Algorithm Cards */}
|
|
<div ref={ref} className="space-y-6">
|
|
{algorithms.map((algo, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.6, delay: index * 0.2 }}
|
|
className="card-dark p-6 rounded-2xl card-hover"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<div className={`w-16 h-16 bg-gradient-to-br ${algo.gradient} rounded-xl flex items-center justify-center shadow-lg`}>
|
|
<algo.icon className="w-8 h-8 text-white" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-bold text-white mb-1">{algo.name}</h3>
|
|
<p className="text-sm text-gray-400">{algo.details}</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-3xl font-black gradient-text">{algo.bits}</div>
|
|
<div className="text-xs text-gray-500">bits</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|