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.

components/sections/Timeline.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { useInView } from 'framer-motion'
+import { useRef } from 'react'
+import { Clock, Database, Key, Shield, Bug, FileText } from 'lucide-react'
+
+const timelineItems = [
+  {
+    time: '24/7',
+    title: 'Surveillance Continue',
+    status: 'Actif',
+    description: 'Surveillance 24/7 avec détection automatique des menaces',
+    metrics: ['99.9% Uptime', '0 Incidents'],
+    icon: Clock,
+    gradient: 'from-security-accent to-green-500',
+  },
+  {
+    time: 'T+2min',
+    title: 'Sauvegarde Automatique',
+    status: 'À jour',
+    description: 'Sauvegarde incrémentielle toutes les 2 minutes',
+    metrics: ['100% Intégrité', '3x Redondance'],
+    icon: Database,
+    gradient: 'from-blue-500 to-cyan-500',
+  },
+  {
+    time: 'T+5min',
+    title: 'Rotation des Clés',
+    status: 'Renouvelé',
+    description: 'Rotation automatique des clés de chiffrement',
+    metrics: ['AES-256', '4096 Bits RSA'],
+    icon: Key,
+    gradient: 'from-purple-500 to-pink-500',
+  },
+  {
+    time: 'T+10min',
+    title: 'Audit de Sécurité',
+    status: 'Validé',
+    description: 'Vérification automatique des permissions',
+    metrics: ['100% Conformité', '0 Anomalies'],
+    icon: Shield,
+    gradient: 'from-yellow-500 to-orange-500',
+  },
+  {
+    time: 'T+15min',
+    title: 'Test de Pénétration',
+    status: 'Réussi',
+    description: 'Test automatique des vulnérabilités',
+    metrics: ['0 Vulnérabilités', '100% Protection'],
+    icon: Bug,
+    gradient: 'from-red-500 to-pink-500',
+  },
+  {
+    time: 'T+30min',
+    title: 'Rapport de Sécurité',
+    status: 'Généré',
+    description: 'Rapport détaillé des activités de sécurité',
+    metrics: ['ISO 27001', 'RGPD Conformité'],
+    icon: FileText,
+    gradient: 'from-teal-500 to-cyan-500',
+  },
+]
+
+export default function Timeline() {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, margin: '-100px' })
+
+  return (
+    <section className="section-padding bg-security-darker relative overflow-hidden">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Centered Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-5xl md:text-6xl font-black mb-4 text-white">
+            Timeline de <span className="gradient-text">Sécurité</span>
+          </h2>
+          <p className="text-xl text-gray-400 max-w-2xl mx-auto">
+            Protection continue de votre infrastructure
+          </p>
+        </motion.div>
+
+        {/* Horizontal Timeline - Cards in a Row */}
+        <div ref={ref} className="relative">
+          <div className="grid md:grid-cols-3 lg:grid-cols-6 gap-4">
+            {timelineItems.map((item, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 50 }}
+                animate={isInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.6, delay: index * 0.1 }}
+                className="card-dark p-6 rounded-2xl card-hover relative"
+              >
+                {/* Time Badge */}
+                <div className={`w-12 h-12 bg-gradient-to-br ${item.gradient} rounded-xl flex items-center justify-center mb-4 shadow-lg`}>
+                  <item.icon className="w-6 h-6 text-white" />
+                </div>
+                
+                <div className="text-xs font-bold text-security-accent mb-2">{item.time}</div>
+                <h3 className="text-lg font-bold text-white mb-2">{item.title}</h3>
+                <p className="text-xs text-gray-400 mb-4">{item.description}</p>
+                
+                <div className="space-y-1">
+                  {item.metrics.map((metric, idx) => (
+                    <div key={idx} className="text-xs text-gray-500">
+                      • {metric}
+                    </div>
+                  ))}
+                </div>
+
+                {/* Status Badge */}
+                <div className="absolute top-4 right-4">
+                  <span className="px-2 py-1 bg-security-accent/20 text-security-accent text-xs font-semibold rounded-full">
+                    {item.status}
+                  </span>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}