Update src/app/compare/page.tsx
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user