Update src/app/timeline/page.tsx
This commit is contained in:
@@ -1,47 +1,18 @@
|
||||
"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 { ChevronLeft, ChevronRight, Calendar } from "lucide-react";
|
||||
|
||||
interface TimelineEvent {
|
||||
id: string;
|
||||
date: string;
|
||||
title: string;
|
||||
description: string;
|
||||
metrics: string[];
|
||||
}
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
|
||||
const TimelinePage = () => {
|
||||
const [selectedDate, setSelectedDate] = useState("2024-01");
|
||||
|
||||
const timelineEvents: TimelineEvent[] = [
|
||||
{
|
||||
id: "1", date: "2024-01", title: "January Launch", description: "Platform launched with core features", metrics: ["50K users", "99.5% uptime", "12 features"],
|
||||
},
|
||||
{
|
||||
id: "2", date: "2024-02", title: "First Milestone", description: "Reached 100K active users", metrics: ["100K users", "99.7% uptime", "15 features"],
|
||||
},
|
||||
{
|
||||
id: "3", date: "2024-03", title: "Feature Expansion", description: "Added advanced analytics and reporting", metrics: ["200K users", "99.8% uptime", "22 features"],
|
||||
},
|
||||
{
|
||||
id: "4", date: "2024-04", title: "Enterprise Release", description: "Enterprise tier with dedicated support", metrics: ["350K users", "99.9% uptime", "28 features"],
|
||||
},
|
||||
{
|
||||
id: "5", date: "2024-05", title: "Global Expansion", description: "Launched in 15 new countries", metrics: ["500K users", "99.95% uptime", "35 features"],
|
||||
},
|
||||
{
|
||||
id: "6", date: "2024-06", title: "AI Integration", description: "Introduced AI-powered insights", metrics: ["750K users", "99.95% uptime", "42 features"],
|
||||
},
|
||||
];
|
||||
|
||||
const selectedEvent = timelineEvents.find((e) => e.date === selectedDate);
|
||||
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 TimelinePage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
@@ -50,129 +21,26 @@ const TimelinePage = () => {
|
||||
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="Interactive Timeline Explorer"
|
||||
description="Explore historical data, track trends, and visualize growth metrics across time periods with interactive controls."
|
||||
tag="Timeline Tool"
|
||||
imagePosition="right"
|
||||
imageSrc="https://images.unsplash.com/photo-1460925895917-afdab655c891?w=800&q=80"
|
||||
imageAlt="Timeline visualization"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Marcus Johnson", handle: "Director, Analytics Pro", testimonial: "The timeline explorer is perfect for analyzing historical trends and patterns.", rating: 5,
|
||||
imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?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: "View Full History", onClick: () => alert("Full history view 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-4xl mx-auto">
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold mb-8">Platform Growth Timeline</h2>
|
||||
|
||||
{/* Timeline Slider */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<button className="p-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white">
|
||||
<ChevronLeft size={20} />
|
||||
</button>
|
||||
<div className="flex-1 bg-gray-700 h-2 rounded-full relative">
|
||||
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-6 h-6 bg-blue-500 rounded-full cursor-pointer"></div>
|
||||
</div>
|
||||
<button className="p-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white">
|
||||
<ChevronRight size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Timeline months */}
|
||||
<div className="flex justify-between mb-8 text-sm text-gray-400">
|
||||
{timelineEvents.map((event) => (
|
||||
<button
|
||||
key={event.id}
|
||||
onClick={() => setSelectedDate(event.date)}
|
||||
className={`px-3 py-1 rounded ${
|
||||
selectedDate === event.date
|
||||
? "bg-blue-600 text-white"
|
||||
: "hover:bg-gray-700"
|
||||
}`}
|
||||
>
|
||||
{event.date}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selected Event Details */}
|
||||
{selectedEvent && (
|
||||
<div className="p-8 rounded-lg bg-gradient-to-r from-blue-900 to-blue-800 border border-blue-700">
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<Calendar className="text-blue-300 mt-1" size={24} />
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold mb-2">{selectedEvent.title}</h3>
|
||||
<p className="text-gray-300 mb-4">{selectedEvent.description}</p>
|
||||
</div>
|
||||
<div className="text-right text-2xl font-bold text-blue-300">{selectedEvent.date}</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4 pt-4 border-t border-blue-700">
|
||||
{selectedEvent.metrics.map((metric, idx) => (
|
||||
<div key={idx} className="text-center">
|
||||
<p className="text-blue-200 text-sm">{metric}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Full Timeline View */}
|
||||
<div className="space-y-4">
|
||||
{timelineEvents.map((event, idx) => (
|
||||
<div
|
||||
key={event.id}
|
||||
className={`p-4 rounded-lg border transition-all ${
|
||||
selectedDate === event.date
|
||||
? "bg-blue-900 bg-opacity-30 border-blue-500"
|
||||
: "bg-gray-900 bg-opacity-30 border-gray-700 hover:border-gray-600"
|
||||
} cursor-pointer`}
|
||||
onClick={() => setSelectedDate(event.date)}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-lg font-bold text-blue-400 min-w-fit">{event.date}</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold">{event.title}</h4>
|
||||
<p className="text-sm text-gray-400">{event.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</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">Vehicle Timeline</h1>
|
||||
<p className="text-lg text-gray-600">Historical vehicle data and model evolution</p>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default TimelinePage;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user