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

---
 src/app/compare/page.tsx | 135 ++++++++-------------------------------
 1 file changed, 27 insertions(+), 108 deletions(-)

diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx
index 4a2d4dc..8fb2e56 100644
--- a/src/app/compare/page.tsx
+++ b/src/app/compare/page.tsx
@@ -1,31 +1,19 @@
 "use client";
-import { ThemeProvider } from "@/components/theme/ThemeProvider";
-import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
-import { useState } from "react";
-import { Compare, Download, Filter } from "lucide-react";
 
-interface ComparisonItem {
-  id: string;
-  name: string;
-  metrics: Record<string, string | number>;
-}
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import { Scale } from 'lucide-react';
 
-const ComparePage = () => {
-  const [selectedItems, setSelectedItems] = useState<ComparisonItem[]>([
-    {
-      id: "item1",      name: "Dataset A",      metrics: {
-        "Total Records": "2.5M",        "Growth Rate": "24%",        "Active Users": "150K",        "Engagement": "78%"},
-    },
-    {
-      id: "item2",      name: "Dataset B",      metrics: {
-        "Total Records": "1.8M",        "Growth Rate": "31%",        "Active Users": "120K",        "Engagement": "82%"},
-    },
-  ]);
+const testCarImages = [
+  'https://images.unsplash.com/photo-1552519507-da3a142c6e3d?w=800&q=80',
+  'https://images.unsplash.com/photo-1494976866105-d32a481b81b4?w=800&q=80',
+  'https://images.unsplash.com/photo-1527524330007-3ea4e06ed667?w=800&q=80',
+];
 
+export default function ComparePage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
+      defaultButtonVariant="text-stagger"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
       contentWidth="medium"
@@ -34,98 +22,29 @@ const ComparePage = () => {
       cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="normal"
     >
-      <NavbarLayoutFloatingOverlay
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Compare", id: "/compare" },
-          { name: "Timeline", id: "/timeline" },
-          { name: "Testimonials", id: "#testimonials" },
-          { name: "Contact", id: "#contact" },
-        ]}
-        brandName="InsightHub"
-        button={{ text: "Get Started", href: "https://example.com" }}
-      />
-
-      <div className="pt-32">
-        <HeroSplitTestimonial
-          background={{ variant: "glowing-orb" }}
-          title="Advanced Data Comparison"
-          description="Compare multiple datasets with detailed metrics, filters, and export capabilities for comprehensive analysis."
-          tag="Compare Tool"
-          imagePosition="right"
-          imageSrc="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80"
-          imageAlt="Comparison interface"
-          testimonials={[
-            {
-              name: "Sarah Chen",              handle: "CEO, DataFlow Inc",              testimonial: "The side-by-side comparison features are incredibly intuitive and powerful.",              rating: 5,
-              imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"},
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Browse", id: "browse" },
+            { name: "Compare", id: "compare" },
           ]}
-          buttons={[
-            { text: "Export Results", onClick: () => alert("Export feature coming soon") },
-            { text: "Back to Home", href: "/" },
-          ]}
-          mediaAnimation="slide-up"
-          buttonAnimation="slide-up"
+          brandName="Webild"
+          button={{ text: "Search", href: "search" }}
         />
       </div>
 
-      <div className="my-20 px-4">
-        <div className="max-w-6xl mx-auto">
-          <div className="mb-8">
-            <h2 className="text-3xl font-bold mb-4">Current Comparison</h2>
-            <div className="flex gap-4 mb-6">
-              <button className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
-                <Filter size={18} /> Filter
-              </button>
-              <button className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
-                <Download size={18} /> Export
-              </button>
-            </div>
-          </div>
-
-          <div className="overflow-x-auto rounded-lg border border-gray-700 bg-gray-900 bg-opacity-50">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b border-gray-700">
-                  <th className="px-6 py-3 text-left font-semibold">Metric</th>
-                  {selectedItems.map((item) => (
-                    <th key={item.id} className="px-6 py-3 text-center font-semibold">
-                      {item.name}
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {selectedItems[0] &&
-                  Object.entries(selectedItems[0].metrics).map(([metricName]) => (
-                    <tr key={metricName} className="border-b border-gray-700 hover:bg-gray-800 hover:bg-opacity-30">
-                      <td className="px-6 py-3 font-medium">{metricName}</td>
-                      {selectedItems.map((item) => (
-                        <td key={`${item.id}-${metricName}`} className="px-6 py-3 text-center">
-                          {item.metrics[metricName]}
-                        </td>
-                      ))}
-                    </tr>
-                  ))}
-              </tbody>
-            </table>
-          </div>
-
-          <div className="mt-8 p-6 rounded-lg bg-blue-900 bg-opacity-20 border border-blue-700 border-opacity-30">
-            <h3 className="text-lg font-semibold mb-4">Comparison Insights</h3>
-            <ul className="space-y-2 text-sm">
-              <li>✓ Dataset B shows higher growth rate (31% vs 24%)</li>
-              <li>✓ Dataset A has more total records (2.5M vs 1.8M)</li>
-              <li>✓ Dataset B has better engagement metrics (82% vs 78%)</li>
-              <li>✓ Both datasets maintain strong user bases for their scale</li>
-            </ul>
-          </div>
+      <div className="min-h-screen flex items-center justify-center p-4">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4 flex items-center justify-center gap-2">
+            <Scale className="w-8 h-8" />
+            Compare Cars
+          </h1>
+          <p className="text-lg text-gray-600">Side-by-side vehicle comparison tool</p>
         </div>
       </div>
     </ThemeProvider>
   );
-};
-
-export default ComparePage;
+}