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/Hero.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Lock, Shield, ArrowRight, Sparkles, Zap, Globe } from 'lucide-react'
+import BackgroundAnimations from '@/components/BackgroundAnimations'
+
+export default function Hero() {
+  return (
+    <section id="accueil" className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20 gradient-bg">
+      {/* Animated Grid Background */}
+      <BackgroundAnimations variant="gradient" />
+
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="max-w-6xl mx-auto">
+          {/* Top Badge */}
+          <motion.div
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="flex justify-center mb-8"
+          >
+            <div className="inline-flex items-center space-x-2 px-6 py-3 bg-security-card border border-security-border rounded-full">
+              <Zap className="w-4 h-4 text-security-accent" />
+              <span className="text-sm font-semibold text-gray-300">Expert Vaultwarden à la Réunion</span>
+            </div>
+          </motion.div>
+
+          {/* Main Content - Centered Layout */}
+          <div className="text-center mb-16">
+            <motion.h1
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.2 }}
+              className="text-6xl md:text-8xl font-black mb-8 leading-tight"
+            >
+              <span className="block text-white mb-4">Sécurisez vos</span>
+              <span className="gradient-text block text-7xl md:text-9xl">mots de passe</span>
+              <span className="block text-4xl md:text-5xl mt-4 text-gray-400 font-light">
+                d'entreprise
+              </span>
+            </motion.h1>
+
+            <motion.p
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.4 }}
+              className="text-xl md:text-2xl text-gray-400 mb-12 max-w-3xl mx-auto leading-relaxed"
+            >
+              Hébergement sécurisé, installation NAS et Mini PC. Solutions de gestion de mots de passe 
+              pour entreprises <span className="text-security-accent font-bold">974</span>.
+            </motion.p>
+
+            {/* CTA Buttons - Horizontal */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.6 }}
+              className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+            >
+              <motion.a
+                href="#contact"
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="group px-10 py-5 bg-gradient-to-r from-security-accent to-green-500 text-black rounded-2xl font-bold text-lg shadow-2xl shadow-security-accent/50 flex items-center space-x-3 hover:shadow-security-accent/70 transition-all duration-300"
+              >
+                <span>Voir nos offres</span>
+                <ArrowRight className="w-6 h-6 group-hover:translate-x-2 transition-transform" />
+              </motion.a>
+              <motion.a
+                href="#services"
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="px-10 py-5 border-2 border-security-accent text-security-accent rounded-2xl font-bold text-lg hover:bg-security-accent/10 transition-all duration-300"
+              >
+                En savoir plus
+              </motion.a>
+            </motion.div>
+          </div>
+
+          {/* Stats Grid - 3 Columns */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.8 }}
+            className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto"
+          >
+            {[
+              { icon: Shield, label: 'AES-256', value: 'Chiffrement', color: 'text-security-accent' },
+              { icon: Lock, label: 'Zero-Knowledge', value: 'Architecture', color: 'text-green-400' },
+              { icon: Globe, label: 'RGPD', value: 'Conformité 100%', color: 'text-emerald-400' },
+            ].map((stat, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ delay: 1 + index * 0.2 }}
+                className="p-6 card-dark security-glow card-hover"
+              >
+                <stat.icon className={`w-10 h-10 ${stat.color} mb-4 mx-auto`} />
+                <div className="text-2xl font-bold text-white mb-2">{stat.label}</div>
+                <div className="text-sm text-gray-400">{stat.value}</div>
+              </motion.div>
+            ))}
+          </motion.div>
+        </div>
+      </div>
+
+      {/* Bottom Wave */}
+      <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-security-dark to-transparent" />
+    </section>
+  )
+}