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

@@ -0,0 +1,75 @@
+'use client'
+
+export default function BackgroundAnimations({ variant = 'default' }: { variant?: 'default' | 'grid' | 'particles' | 'gradient' }) {
+  if (variant === 'grid') {
+    return (
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="animated-grid absolute inset-0 opacity-30" />
+      </div>
+    )
+  }
+
+  if (variant === 'particles') {
+    return (
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="animated-grid absolute inset-0 opacity-20" />
+        {/* Particules flottantes */}
+        {[...Array(6)].map((_, i) => (
+          <div
+            key={i}
+            className="floating-blob absolute rounded-full"
+            style={{
+              width: `${20 + i * 10}px`,
+              height: `${20 + i * 10}px`,
+              background: `radial-gradient(circle, rgba(0, 255, 136, ${0.1 + i * 0.05}) 0%, transparent 70%)`,
+              left: `${10 + i * 15}%`,
+              top: `${10 + i * 12}%`,
+              animationDelay: `${i * 0.5}s`,
+              animationDuration: `${15 + i * 3}s`,
+            }}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  if (variant === 'gradient') {
+    return (
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="animated-grid absolute inset-0 opacity-25" />
+        <div
+          className="absolute top-1/4 right-1/4 w-96 h-96 bg-security-accent/5 rounded-full blur-3xl pulse-glow"
+          style={{ animationDelay: '0s' }}
+        />
+        <div
+          className="absolute bottom-1/4 left-1/4 w-96 h-96 bg-green-500/5 rounded-full blur-3xl pulse-glow"
+          style={{ animationDelay: '2s' }}
+        />
+        <div
+          className="absolute top-1/2 left-1/2 w-80 h-80 bg-emerald-500/5 rounded-full blur-3xl pulse-glow"
+          style={{ animationDelay: '4s', transform: 'translate(-50%, -50%)' }}
+        />
+      </div>
+    )
+  }
+
+  // Default variant
+  return (
+    <div className="absolute inset-0 overflow-hidden pointer-events-none">
+      <div className="animated-grid absolute inset-0 opacity-20" />
+      <div
+        className="floating-blob absolute top-1/4 right-1/4 w-96 h-96 bg-security-accent/5 rounded-full blur-3xl"
+        style={{ animationDelay: '0s' }}
+      />
+      <div
+        className="floating-blob absolute bottom-1/4 left-1/4 w-96 h-96 bg-green-500/5 rounded-full blur-3xl"
+        style={{ animationDelay: '1s' }}
+      />
+      <div
+        className="floating-blob absolute top-1/2 right-1/3 w-80 h-80 bg-emerald-500/5 rounded-full blur-3xl"
+        style={{ animationDelay: '2s' }}
+      />
+    </div>
+  )
+}
+