Update src/app/comparison/page.tsx

Merge version_22 into main

src/app/comparison/page.tsx

@@ -4,7 +4,7 @@ import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Sparkles } from "lucide-react";
+import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
 
 export default function ComparisonPage() {
   return (
@@ -16,7 +16,7 @@ export default function ComparisonPage() {
       sizing="medium"
       background="none"
       cardStyle="glass-elevated"
-      primaryButtonStyle="metallic"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
@@ -33,7 +33,17 @@ export default function ComparisonPage() {
           button={{ text: "Démarrer", href: "#contact" }}
         />
         <div id="features-comparison" className="pt-32 pb-20">
-           {/* Comparison component content would go here */}
+           <PricingCardEight
+            title="Features Comparison"
+            description="Compare our plans and choose the perfect fit for your digital growth."
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            plans={[
+                { id: "basic", badge: "Essential", price: "$49", subtitle: "For growing brands", features: ["SEO Optimization", "Web Development", "Standard Support"], buttons: [{ text: "Get Started", href: "#" }] },
+                { id: "pro", badge: "Professional", price: "$99", subtitle: "For established businesses", features: ["Everything in Basic", "Advanced Analytics", "24/7 Priority Support", "Custom UI/UX"], buttons: [{ text: "Choose Pro", href: "#" }] }
+            ]}
+           />
         </div>
         <FooterBase
           logoText="Switzerweb"
@@ -46,4 +56,4 @@ export default function ComparisonPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #161616;
-  --foreground: #f0f0f0;
-  --primary-cta: #ffffff;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000612e6;
+  --primary-cta: #15479c;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1e1e1e;
+  --secondary-cta: #f9f9f9;
   --secondary-cta-text: #e0e0e0;
-  --accent: #d0d0d0;
-  --background-accent: #9a9a9a;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);