Update src/app/page.tsx
This commit is contained in:
154
src/app/page.tsx
154
src/app/page.tsx
@@ -1,15 +1,22 @@
|
||||
"use client";
|
||||
import { ThemeProvider } from "@/components/theme/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
|
||||
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
|
||||
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
||||
import { Star, Zap, TrendingUp, Clock, Users, Award } from "lucide-react";
|
||||
|
||||
const page = () => {
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import { Heart } from 'lucide-react';
|
||||
|
||||
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 Home() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
@@ -18,100 +25,111 @@ const page = () => {
|
||||
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 id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Compare", id: "compare" },
|
||||
]}
|
||||
brandName="Webild"
|
||||
button={{ text: "Search", href: "search" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{ variant: "glowing-orb" }}
|
||||
title="Compare, Explore, and Track Like Never Before"
|
||||
description="Advanced tools for comparing data, exploring timelines, and making informed decisions with real-time insights and analytics."
|
||||
tag="Next Generation Tools"
|
||||
imagePosition="right"
|
||||
imageSrc="https://images.unsplash.com/photo-1633356122544-f134324ef6db?w=800&q=80"
|
||||
imageAlt="Analytics dashboard"
|
||||
title="Find Your Perfect Car"
|
||||
description="Explore our comprehensive database of vehicles with detailed specifications, pricing, and real owner testimonials."
|
||||
background={{ variant: "circleGradient" }}
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Chen", handle: "CEO, DataFlow Inc", testimonial: "Transformed how we analyze competitor strategies with crystal clarity.", rating: 5,
|
||||
imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"},
|
||||
name: "Alex Johnson", handle: "@alexj", testimonial: "The database is incredibly comprehensive. Found exactly what I was looking for!", rating: 5,
|
||||
imageSrc: testCarImages[0],
|
||||
},
|
||||
{
|
||||
name: "Marcus Johnson", handle: "Director, Analytics Pro", testimonial: "The timeline explorer is a game-changer for historical data analysis.", rating: 5,
|
||||
imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"},
|
||||
name: "Sarah Chen", handle: "@sarahchen", testimonial: "Best car comparison tool I've used. Made my purchase decision so much easier.", rating: 5,
|
||||
imageSrc: testCarImages[1],
|
||||
},
|
||||
{
|
||||
name: "Mike Rodriguez", handle: "@mikerod", testimonial: "The specifications are detailed and accurate. Highly recommended for car shoppers.", rating: 5,
|
||||
imageSrc: testCarImages[2],
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{ src: testCarImages[0], alt: "User 1" },
|
||||
{ src: testCarImages[1], alt: "User 2" },
|
||||
{ src: testCarImages[2], alt: "User 3" },
|
||||
]}
|
||||
avatarText="Trusted by 10,000+ car shoppers"
|
||||
buttons={[
|
||||
{ text: "Explore Tools", href: "/compare" },
|
||||
{ text: "View Timeline", href: "/timeline" },
|
||||
{ text: "Browse Cars", href: "browse" },
|
||||
{ text: "Compare Now", href: "compare" },
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
tagAnimation="opacity"
|
||||
imageSrc={testCarImages[0]}
|
||||
imageAlt="Premium sedan showcase"
|
||||
imagePosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
title="Why Choose Webild?"
|
||||
description="Comprehensive tools for car shopping and comparison"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Smart Comparison", description: "Compare multiple datasets side-by-side with advanced filtering and metrics visualization.", imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80", imageAlt: "Comparison tool interface"},
|
||||
title: "Detailed Specifications", description: "Complete technical specs for every vehicle in our database", imageSrc: testCarImages[0],
|
||||
imageAlt: "Specifications icon"},
|
||||
{
|
||||
id: 2,
|
||||
title: "Timeline Exploration", description: "Navigate through historical data with interactive timeline controls and detailed metrics.", imageSrc: "https://images.unsplash.com/photo-1460925895917-afdab655c891?w=800&q=80", imageAlt: "Timeline visualization"},
|
||||
title: "Price Tracking", description: "Monitor price changes and find the best deals", imageSrc: testCarImages[1],
|
||||
imageAlt: "Price tracking icon"},
|
||||
{
|
||||
id: 3,
|
||||
title: "Real-Time Insights", description: "Get instant notifications and updates as data changes with predictive analytics.", imageSrc: "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&q=80", imageAlt: "Real-time analytics dashboard"},
|
||||
{
|
||||
id: 4,
|
||||
title: "Custom Reporting", description: "Generate comprehensive reports tailored to your specific analysis needs.", imageSrc: "https://images.unsplash.com/photo-1516321318423-f06f70d504f0?w=800&q=80", imageAlt: "Report generation interface"},
|
||||
title: "Side-by-Side Comparison", description: "Compare multiple vehicles with detailed analytics", imageSrc: testCarImages[2],
|
||||
imageAlt: "Comparison icon"},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Explore More", href: "database" },
|
||||
]}
|
||||
title="How Our Platform Works"
|
||||
description="Master your data with our comprehensive suite of analytical tools designed for precision and insight."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttonAnimation="slide-up"
|
||||
tagAnimation="opacity"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Emma Rodriguez", role: "Product Manager", company: "TechVision", rating: 5,
|
||||
imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=500&h=500&fit=crop", imageAlt: "Emma Rodriguez"},
|
||||
{
|
||||
id: "2", name: "James Mitchell", role: "Analyst", company: "DataStream", rating: 5,
|
||||
imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=500&h=500&fit=crop", imageAlt: "James Mitchell"},
|
||||
{
|
||||
id: "3", name: "Lisa Park", role: "CEO", company: "InsightCorp", rating: 5,
|
||||
imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=500&h=500&fit=crop", imageAlt: "Lisa Park"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "500K+", label: "Active Users" },
|
||||
{ value: "99.9%", label: "Uptime" },
|
||||
{ value: "24/7", label: "Support" },
|
||||
]}
|
||||
title="What Our Users Say"
|
||||
description="Join thousands of professionals using our platform for data comparison and timeline exploration."
|
||||
title="Customer Reviews"
|
||||
description="Real testimonials from car shoppers who found their perfect vehicle"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Jessica Martinez", role: "First-time Buyer", company: "Tech Startup", rating: 5,
|
||||
imageSrc: testCarImages[0],
|
||||
imageAlt: "Jessica Martinez"},
|
||||
{
|
||||
id: "2", name: "David Wong", role: "Car Enthusiast", company: "Automotive Blog", rating: 5,
|
||||
imageSrc: testCarImages[1],
|
||||
imageAlt: "David Wong"},
|
||||
{
|
||||
id: "3", name: "Emma Thompson", role: "Fleet Manager", company: "Logistics Corp", rating: 5,
|
||||
imageSrc: testCarImages[2],
|
||||
imageAlt: "Emma Thompson"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "10K+", description: "Active Users", icon: Heart },
|
||||
{ value: "50K+", description: "Vehicles Listed", icon: Heart },
|
||||
{ value: "100K+", description: "Comparisons Made", icon: Heart },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user