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

---
 src/app/compare/page.tsx | 178 ++-------------------------------------
 1 file changed, 9 insertions(+), 169 deletions(-)

diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx
index bf55c2b..d3c5af7 100644
--- a/src/app/compare/page.tsx
+++ b/src/app/compare/page.tsx
@@ -1,43 +1,8 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { ThemeProvider } from '@/components/theme/ThemeProvider';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-
-const CARS_DATABASE = [
-  { id: '1', brand: 'Toyota', name: 'Camry', year: 2023, price: '$28,500', type: 'Sedan', mpg: '32', hp: '203', seating: 5, trunk: '15.1 cu ft' },
-  { id: '2', brand: 'Toyota', name: 'Corolla', year: 2023, price: '$22,000', type: 'Sedan', mpg: '38', hp: '169', seating: 5, trunk: '13.1 cu ft' },
-  { id: '3', brand: 'Honda', name: 'Civic', year: 2023, price: '$24,000', type: 'Sedan', mpg: '36', hp: '180', seating: 5, trunk: '14.0 cu ft' },
-  { id: '4', brand: 'Honda', name: 'CR-V', year: 2023, price: '$32,000', type: 'SUV', mpg: '28', hp: '190', seating: 5, trunk: '39.3 cu ft' },
-  { id: '5', brand: 'Ford', name: 'Mustang', year: 2023, price: '$40,000', type: 'Sports', mpg: '21', hp: '480', seating: 4, trunk: '13.5 cu ft' },
-  { id: '6', brand: 'Ford', name: 'F-150', year: 2023, price: '$52,000', type: 'Truck', mpg: '21', hp: '400', seating: 5, trunk: '52.8 cu ft' },
-  { id: '7', brand: 'BMW', name: '3 Series', year: 2023, price: '$45,000', type: 'Sedan', mpg: '30', hp: '255', seating: 5, trunk: '16.9 cu ft' },
-  { id: '8', brand: 'Mercedes-Benz', name: 'C-Class', year: 2023, price: '$48,000', type: 'Sedan', mpg: '28', hp: '255', seating: 5, trunk: '13.1 cu ft' },
-];
-
-export default function ComparePage() {
-  const [selectedCars, setSelectedCars] = useState<string[]>([]);
-  const [searchTerm, setSearchTerm] = useState('');
-
-  const toggleCar = (carId: string) => {
-    setSelectedCars((prev) => {
-      if (prev.includes(carId)) {
-        return prev.filter((id) => id !== carId);
-      } else if (prev.length < 4) {
-        return [...prev, carId];
-      }
-      return prev;
-    });
-  };
-
-  const filteredCars = CARS_DATABASE.filter((car) =>
-    `${car.brand} ${car.name}`.toLowerCase().includes(searchTerm.toLowerCase())
-  );
-
-  const comparedCars = CARS_DATABASE.filter((car) => selectedCars.includes(car.id));
-
-  const specs = ['Price', 'Type', 'MPG', 'HP', 'Seating', 'Trunk'];
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 
+const ComparePage = () => {
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -49,137 +14,12 @@ export default function ComparePage() {
       cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="semibold"
+      headingFontWeight="normal"
     >
-      <NavbarStyleCentered
-        navItems={[
-          { name: 'Home', id: '/' },
-          { name: 'Browse', id: '/browse' },
-          { name: 'Brands', id: '/brands' },
-          { name: 'Compare', id: '/compare' },
-          { name: 'Contact', id: '#contact' },
-        ]}
-        button={{ text: 'Explore Now', href: '/browse' }}
-      />
-
-      <div className="min-h-screen py-20 px-4">
-        <div className="max-w-7xl mx-auto">
-          <h1 className="text-5xl font-bold mb-4 text-center">Compare Cars</h1>
-          <p className="text-center text-foreground/70 mb-12 text-lg">Select up to 4 cars to compare specifications</p>
-
-          {/* Search and Selection */}
-          <div className="mb-12">
-            <div className="mb-6">
-              <input
-                type="text"
-                placeholder="Search cars by brand or model..."
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className="w-full px-4 py-3 rounded border border-foreground/20 bg-card focus:outline-none focus:border-primary-cta"
-              />
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 max-h-96 overflow-y-auto">
-              {filteredCars.map((car) => (
-                <button
-                  key={car.id}
-                  onClick={() => toggleCar(car.id)}
-                  className={`p-4 rounded border-2 transition text-left ${
-                    selectedCars.includes(car.id)
-                      ? 'border-primary-cta bg-primary-cta/10'
-                      : 'border-foreground/20 hover:border-foreground/40'
-                  } ${
-                    selectedCars.includes(car.id) || selectedCars.length < 4
-                      ? 'cursor-pointer'
-                      : 'opacity-50 cursor-not-allowed'
-                  }`}
-                  disabled={!selectedCars.includes(car.id) && selectedCars.length >= 4}
-                >
-                  <div className="flex items-start justify-between">
-                    <div>
-                      <p className="font-semibold">{car.brand}</p>
-                      <p className="text-foreground/70">{car.name}</p>
-                      <p className="text-sm text-foreground/60 mt-1">{car.price}</p>
-                    </div>
-                    <div
-                      className={`h-5 w-5 rounded border-2 flex items-center justify-center ${
-                        selectedCars.includes(car.id)
-                          ? 'border-primary-cta bg-primary-cta'
-                          : 'border-foreground/30'
-                      }`}
-                    >
-                      {selectedCars.includes(car.id) && <span className="text-white text-sm">✓</span>}
-                    </div>
-                  </div>
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Comparison Table */}
-          {comparedCars.length > 0 && (
-            <div className="bg-card rounded-lg border border-foreground/10 overflow-hidden">
-              <div className="overflow-x-auto">
-                <table className="w-full">
-                  <tbody>
-                    {/* Car Names Row */}
-                    <tr className="border-b border-foreground/10">
-                      <td className="px-6 py-4 font-semibold text-foreground/70 w-24">Model</td>
-                      {comparedCars.map((car) => (
-                        <td key={car.id} className="px-6 py-4 text-center min-w-48 border-l border-foreground/10">
-                          <p className="font-bold">{car.brand}</p>
-                          <p className="text-foreground/70">{car.name}</p>
-                        </td>
-                      ))}
-                    </tr>
-
-                    {/* Specs Rows */}
-                    {specs.map((spec) => (
-                      <tr key={spec} className="border-b border-foreground/10 hover:bg-foreground/5">
-                        <td className="px-6 py-4 font-semibold text-foreground/70">{spec}</td>
-                        {comparedCars.map((car) => {
-                          let value = '';
-                          switch (spec) {
-                            case 'Price':
-                              value = car.price;
-                              break;
-                            case 'Type':
-                              value = car.type;
-                              break;
-                            case 'MPG':
-                              value = `${car.mpg} mpg`;
-                              break;
-                            case 'HP':
-                              value = `${car.hp} hp`;
-                              break;
-                            case 'Seating':
-                              value = `${car.seating} seats`;
-                              break;
-                            case 'Trunk':
-                              value = car.trunk;
-                              break;
-                          }
-                          return (
-                            <td key={car.id} className="px-6 py-4 text-center border-l border-foreground/10">
-                              <p className="font-medium">{value}</p>
-                            </td>
-                          );
-                        })}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          )}
-
-          {comparedCars.length === 0 && (
-            <div className="text-center py-12">
-              <p className="text-foreground/70 text-lg">Select cars to compare their specifications</p>
-            </div>
-          )}
-        </div>
-      </div>
+      <div id="nav" data-section="nav" />
+      <div id="compare" data-section="compare" />
     </ThemeProvider>
   );
-}
+};
+
+export default ComparePage;