From 87a6c4eb8c694b7d40012d2cf9e69cbc347157b2 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 6 Mar 2026 19:31:34 +0000
Subject: [PATCH] Update src/app/compare/page.tsx

---
 src/app/compare/page.tsx | 209 +++++++++++++++++++++------------------
 1 file changed, 113 insertions(+), 96 deletions(-)

diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx
index 3154e17..7d7ee0e 100644
--- a/src/app/compare/page.tsx
+++ b/src/app/compare/page.tsx
@@ -1,129 +1,146 @@
-"use client";
+'use client';
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import BlogCardThree from "@/components/sections/blog/BlogCardThree";
-import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
-import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
-import Link from "next/link";
-import { Building2, Car, History, Globe } from "lucide-react";
+import { ThemeProvider } from '@/components/theme/ThemeProvider';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Sparkles } from 'lucide-react';
+import { useState } from 'react';
 
 export default function ComparePage() {
   const navItems = [
-    { name: "Search", id: "/" },
-    { name: "Browse", id: "/browse" },
-    { name: "Compare", id: "/compare" },
-    { name: "Timeline", id: "/" },
-    { name: "About", id: "/" },
+    { name: 'Home', id: '/' },
+    { name: 'Compare', id: '/compare' },
+    { name: 'Timeline', id: '/timeline' },
+    { name: 'FAQ', id: '#faq' },
   ];
 
-  const footerColumns = [
+  const [selectedItems, setSelectedItems] = useState<string[]>([]);
+
+  const compareFeatures = [
     {
-      items: [
-        { label: "Search Database", href: "/" },
-        { label: "Browse Vehicles", href: "/browse" },
-        { label: "Compare Cars", href: "/compare" },
-        { label: "Timeline Explorer", href: "/" },
-      ],
+      id: 1,
+      title: 'Add Items to Compare',
+      description: 'Select multiple items from our catalog to compare side-by-side. View all key specifications and metrics at once.',
+      imageSrc: '/placeholders/placeholder1.jpg',
     },
     {
-      items: [
-        { label: "Brand Directory", href: "/" },
-        { label: "Model Guide", href: "/" },
-        { label: "Specifications", href: "/" },
-        { label: "Production Data", href: "/" },
-      ],
+      id: 2,
+      title: 'Detailed Comparison Matrix',
+      description: 'See differences highlighted in our comprehensive comparison matrix. Filter by category and feature importance.',
+      imageSrc: '/placeholders/placeholder2.jpg',
     },
     {
-      items: [
-        { label: "About Us", href: "/" },
-        { label: "Help & Support", href: "/" },
-        { label: "Contact", href: "/" },
-        { label: "Contribute Data", href: "/" },
-      ],
+      id: 3,
+      title: 'Export Reports',
+      description: 'Generate and export comparison reports in multiple formats. Share findings with your team effortlessly.',
+      imageSrc: '/placeholders/placeholder3.jpg',
     },
     {
-      items: [
-        { label: "Privacy Policy", href: "/" },
-        { label: "Terms of Service", href: "/" },
-        { label: "Data Attribution", href: "/" },
-        { label: "Sitemap", href: "/" },
-      ],
+      id: 4,
+      title: 'Save Comparisons',
+      description: 'Bookmark your favorite comparisons and access them anytime. Build a library of comparisons for future reference.',
+      imageSrc: '/placeholders/placeholder4.jpg',
     },
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="shift-hover"
+      defaultButtonVariant="hover-bubble"
       defaultTextAnimation="entrance-slide"
-      borderRadius="pill"
-      contentWidth="compact"
-      sizing="largeSmallSizeMediumTitles"
-      background="aurora"
-      cardStyle="solid"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
-      secondaryButtonStyle="solid"
-      headingFontWeight="extrabold"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
-          navItems={navItems}
-          brandName="AutoArchive"
-          bottomLeftText="Explore Automotive History"
-          bottomRightText="1886 to Present"
-        />
-      </div>
+      <NavbarLayoutFloatingInline
+        navItems={navItems}
+        brandName="Webild"
+        button={{ text: 'Back to Home', href: '/' }}
+        animateOnLoad
+      />
 
-      <div id="metrics" data-section="metrics">
-        <MetricCardThree
-          title="AutoArchive by the Numbers"
-          description="The world's most comprehensive automotive database at your fingertips"
-          tag="Database Statistics"
-          tagAnimation="blur-reveal"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="scale-rotate"
-          metrics={[
-            {
-              id: "1",              icon: Building2,
-              title: "Manufacturers",              value: "2,000+"},
-            {
-              id: "2",              icon: Car,
-              title: "Vehicle Models",              value: "50,000+"},
-            {
-              id: "3",              icon: History,
-              title: "Years Covered",              value: "138 Years"},
-            {
-              id: "4",              icon: Globe,
-              title: "Countries",              value: "195"},
+      <div id="hero" data-section="hero">
+        <HeroLogo
+          logoText="Compare Tool"
+          description="Easily compare multiple items side-by-side. Analyze features, specifications, and pricing to make informed decisions."
+          buttons={[
+            { text: 'Start Comparing', href: '#compare-tool' },
+            { text: 'View Examples', href: '#examples' },
           ]}
+          imageSrc="/placeholders/placeholder5.jpg"
+          imageAlt="Compare tool hero"
+          showDimOverlay
         />
       </div>
 
-      <div id="legendary-cars" data-section="legendary-cars">
-        <BlogCardThree
-          title="Legendary Automotive Stories"
-          description="Discover the history, engineering, and cultural impact of the world's most iconic vehicles"
-          tag="Automotive Heritage"
-          tagAnimation="blur-reveal"
-          textboxLayout="default"
-          useInvertedBackground={false}
+      <div id="compare-features" data-section="compare-features">
+        <FeatureCardSeven
+          features={compareFeatures}
           animationType="slide-up"
-          carouselMode="buttons"
-          blogs={[
-            {
-              id: "1",              category: "Performance History",              title: "The Ferrari 250 GTO: The Car That Won Le Mans",              excerpt: "Explore how this race car became the most valuable car in the world",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/ferrari-250-gto-iconic-red-racing-car-in-1772823292116-a7e77200.png",              imageAlt: "Ferrari 250 GTO",              authorName: "Automotive Historian",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823290144-6017089c.png",              date: "Featured Article"},
-            {
-              id: "2",              category: "Design Evolution",              title: "The Porsche 911: 60 Years of Iconic Design",              excerpt: "How one sports car shaped the future of automotive design",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/porsche-911-models-across-different-gene-1772823292219-b0857470.png",              imageAlt: "Porsche 911 Through Decades",              authorName: "Design Expert",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823290583-29073bf8.png",              date: "Featured Article"},
-            {
-              id: "3",              category: "Innovation",              title: "The Jaguar E-Type: Beauty and Performance",              excerpt: "Why Enzo Ferrari called it the most beautiful car ever made",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/jaguar-e-type-in-stunning-profile-emphas-1772823290729-6dd39021.png",              imageAlt: "Jaguar E-Type Design",              authorName: "Automotive Journalist",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEFWytZ9QS584IizrKmiAvruy/small-circular-avatar-portrait-of-an-aut-1772823292590-3867fd28.png",              date: "Featured Article"},
-          ]}
+          title="How Our Compare Tool Works"
+          description="Step-by-step guide to comparing items effectively."
+          tag="Compare Tool"
+          textboxLayout="default"
+          useInvertedBackground={false}
         />
       </div>
 
-      <div id="footer" data-section="footer">
-        <FooterLogoEmphasis logoText="AutoArchive" columns={footerColumns} />
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Need Help?"
+          title="Have Questions About Comparing?"
+          description="Subscribe to get tips and updates on how to use our compare tool most effectively."
+          tagIcon={Sparkles}
+          background={{ variant: 'gradient-bars' }}
+          useInvertedBackground={false}
+          onSubmit={(email) => console.log('Compare page email:', email)}
+        />
       </div>
+
+      <FooterSimple
+        columns={[
+          {
+            title: 'Product',
+            items: [
+              { label: 'Compare Tool', href: '/compare' },
+              { label: 'Timeline Explorer', href: '/timeline' },
+              { label: 'Home', href: '/' },
+            ],
+          },
+          {
+            title: 'Resources',
+            items: [
+              { label: 'Blog', href: '#' },
+              { label: 'Documentation', href: '#' },
+              { label: 'Support', href: '#' },
+            ],
+          },
+          {
+            title: 'Company',
+            items: [
+              { label: 'About', href: '#' },
+              { label: 'Pricing', href: '/#pricing' },
+              { label: 'Contact', href: '/#contact' },
+            ],
+          },
+          {
+            title: 'Legal',
+            items: [
+              { label: 'Privacy', href: '/privacy' },
+              { label: 'Terms', href: '/terms' },
+            ],
+          },
+        ]}
+        bottomLeftText="© 2025 Webild. All rights reserved."
+        bottomRightText="Compare Tool Edition"
+      />
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}