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

@@ -0,0 +1,130 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Shield, Mail, Phone, MapPin } from 'lucide-react'
+import Link from 'next/link'
+
+export default function Footer() {
+  const currentYear = new Date().getFullYear()
+
+  return (
+    <footer className="bg-security-dark border-t border-security-border">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
+          {/* Brand */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+          >
+            <div className="flex items-center space-x-3 mb-4">
+              <Shield className="w-8 h-8 text-security-accent" />
+              <span className="text-2xl font-bold text-white">
+                RUNLOCK<span className="text-security-accent">.re</span>
+              </span>
+            </div>
+            <p className="text-gray-400 text-sm leading-relaxed">
+              Solutions de gestion de mots de passe sécurisées pour les entreprises. 
+              Protégez vos données avec Vaultwarden.
+            </p>
+          </motion.div>
+
+          {/* Navigation */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+          >
+            <h3 className="text-white font-semibold mb-4">Navigation</h3>
+            <ul className="space-y-2">
+              {['Accueil', 'Services', 'Tarifs', 'FAQ', 'Contact'].map((item) => (
+                <li key={item}>
+                  <a
+                    href={`#${item.toLowerCase()}`}
+                    className="text-gray-400 hover:text-security-accent transition-colors text-sm"
+                  >
+                    {item}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </motion.div>
+
+          {/* Services */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+          >
+            <h3 className="text-white font-semibold mb-4">Services</h3>
+            <ul className="space-y-2">
+              {['Hébergement Cloud', 'Installation NAS', 'Installation Mini PC', 'Support technique'].map((service) => (
+                <li key={service}>
+                  <a
+                    href="#services"
+                    className="text-gray-400 hover:text-security-accent transition-colors text-sm"
+                  >
+                    {service}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </motion.div>
+
+          {/* Contact */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.3 }}
+          >
+            <h3 className="text-white font-semibold mb-4">Contact</h3>
+            <ul className="space-y-3">
+              <li className="flex items-center space-x-2 text-gray-400 text-sm">
+                <Mail className="w-4 h-4 text-security-accent" />
+                <a href="mailto:contact@runlock.re" className="hover:text-security-accent transition-colors">
+                  contact@runlock.re
+                </a>
+              </li>
+              <li className="flex items-center space-x-2 text-gray-400 text-sm">
+                <Phone className="w-4 h-4 text-security-accent" />
+                <a href="tel:0693511558" className="hover:text-security-accent transition-colors">
+                  0693 51 15 58
+                </a>
+              </li>
+              <li className="flex items-center space-x-2 text-gray-400 text-sm">
+                <MapPin className="w-4 h-4 text-security-accent" />
+                <span>La Réunion</span>
+              </li>
+            </ul>
+          </motion.div>
+        </div>
+
+        <div className="border-t border-security-border pt-8 mt-8">
+          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+            <p className="text-gray-400 text-sm">
+              © {currentYear} Runlock.re - Tous droits réservés
+            </p>
+            <div className="flex items-center space-x-6 text-sm">
+              <a href="#" className="text-gray-400 hover:text-security-accent transition-colors">
+                Mentions légales
+              </a>
+              <a href="#" className="text-gray-400 hover:text-security-accent transition-colors">
+                Politique de confidentialité
+              </a>
+              <a href="#" className="text-gray-400 hover:text-security-accent transition-colors">
+                RGPD
+              </a>
+            </div>
+          </div>
+          <p className="text-gray-500 text-xs mt-4 text-center">
+            Service édité par: httpdesign.fr
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}