Switch to version 1: modified src/app/page.tsx
This commit is contained in:
418
src/app/page.tsx
418
src/app/page.tsx
@@ -1,144 +1,326 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/components/theme/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
|
||||
import SplitAbout from "@/components/sections/about/SplitAbout";
|
||||
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import { Zap, Shield, Flame, Gauge } from "lucide-react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import Link from "next/link";
|
||||
|
||||
const heroImages = [
|
||||
{ imageSrc: "/hero/car1.jpg", imageAlt: "Classic muscle car" },
|
||||
{ imageSrc: "/hero/car2.jpg", imageAlt: "High-performance supercar" },
|
||||
{ imageSrc: "/hero/car3.jpg", imageAlt: "Modern sports car" },
|
||||
{ imageSrc: "/hero/car4.jpg", imageAlt: "Custom tuned vehicle" },
|
||||
{ imageSrc: "/hero/car5.jpg", imageAlt: "Racing machine" },
|
||||
];
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Knowledge Base", id: "/knowledge-base" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Support", id: "contact" },
|
||||
{ name: "Resources", id: "resources" },
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: "Engine Performance", description: "Unleash maximum horsepower and torque", imageSrc: "/features/engine.jpg", imageAlt: "Engine performance", buttonIcon: Zap,
|
||||
buttonHref: "#features"},
|
||||
{
|
||||
title: "Safety Systems", description: "Advanced protection for every drive", imageSrc: "/features/safety.jpg", imageAlt: "Safety features", buttonIcon: Shield,
|
||||
buttonHref: "#features"},
|
||||
{
|
||||
title: "Turbo Boost", description: "Acceleration beyond expectations", imageSrc: "/features/turbo.jpg", imageAlt: "Turbo systems", buttonIcon: Flame,
|
||||
buttonHref: "#features"},
|
||||
{
|
||||
title: "Performance Tuning", description: "Optimize every aspect of your vehicle", imageSrc: "/features/tuning.jpg", imageAlt: "Performance tuning", buttonIcon: Gauge,
|
||||
buttonHref: "#features"},
|
||||
];
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Knowledge Base", href: "/knowledge-base" },
|
||||
{ label: "Team Directory", href: "#team" },
|
||||
{ label: "Support", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{ label: "Policies", href: "/policies" },
|
||||
{ label: "Benefits", href: "#" },
|
||||
{ label: "IT Help", href: "#" },
|
||||
{ label: "Learning Center", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{ label: "Contact Support", href: "mailto:support@company.com" },
|
||||
{ label: "Report an Issue", href: "mailto:bugs@company.com" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Feedback", href: "mailto:suggestions@company.com" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const aboutBullets = [
|
||||
{
|
||||
title: "Passion Driven", description: "We live and breathe automotive excellence", icon: Flame,
|
||||
},
|
||||
{
|
||||
title: "Community First", description: "Connect with fellow petrolheads worldwide", icon: Zap,
|
||||
},
|
||||
{
|
||||
title: "Pure Performance", description: "Every modification engineered for maximum impact", icon: Gauge,
|
||||
},
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Platform", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Checkout", href: "/checkout" },
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Features", href: "#features" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Community", items: [
|
||||
{ label: "Petrolheads", href: "/" },
|
||||
{ label: "Car Lovers", href: "/" },
|
||||
{ label: "Events", href: "#features" },
|
||||
{ label: "Forums", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Help Center", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Privacy", href: "/" },
|
||||
{ label: "Terms", href: "/" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLarge"
|
||||
background="fluid"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="noise"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Checkout", id: "/checkout" },
|
||||
]}
|
||||
brandName="PetrolHeads"
|
||||
/>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="CompanyHub"
|
||||
navItems={navItems.map((item) => ({
|
||||
name: item.name,
|
||||
id: item.id === "/" ? "/" : (item.id.startsWith("/") ? item.id : `#${item.id}`),
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Hero Section */}
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
title="Welcome to PetrolHeads"
|
||||
description="Where car passion meets performance. Join the community of true automotive enthusiasts."
|
||||
tag="Automotive"
|
||||
mediaItems={heroImages}
|
||||
<HeroLogoBillboardSplit
|
||||
logoText="COMPANYHUB"
|
||||
description="Your centralized internal knowledge platform. Access company information, policies, team directories, and resources all in one place."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
buttons={[
|
||||
{ text: "Explore Now", href: "#features" },
|
||||
{ text: "Join Community", href: "/checkout" },
|
||||
{ text: "Explore Knowledge", href: "#resources" },
|
||||
{ text: "View Resources", href: "/knowledge-base" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
title="About PetrolHeads"
|
||||
description="We are a community united by passion for automobiles. From classic cars to modern supercars, we celebrate the engineering, design, and raw power that drives us all."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
bulletPoints={aboutBullets}
|
||||
imageSrc="/about/community.jpg"
|
||||
imageAlt="Petrolheads community"
|
||||
imagePosition="right"
|
||||
layoutOrder="default"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/business-solution-colorful-landing-page_52683-8064.jpg?_wi=1"
|
||||
imageAlt="Company intranet dashboard overview"
|
||||
frameStyle="browser"
|
||||
mediaAnimation="slide-up"
|
||||
buttons={[{ text: "Learn More", href: "#features" }]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* About Section */}
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
title="About Our Organization"
|
||||
description="Learn about our company's mission, values, and culture. Understand how we operate and what drives our success as a unified team."
|
||||
tag="Company Overview"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/businessman-with-big-smile_1098-715.jpg?_wi=1"
|
||||
imageAlt="diverse team working together office"
|
||||
buttons={[{ text: "Learn More", href: "#" }]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Features Section */}
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
features={features}
|
||||
title="Performance Features"
|
||||
description="Discover what makes us the ultimate destination for car enthusiasts"
|
||||
tag="Innovation"
|
||||
<FeatureCardSixteen
|
||||
title="Traditional vs. Modern Knowledge Management"
|
||||
description="See how our intranet portal improves information accessibility and employee efficiency"
|
||||
tag="Why CompanyHub"
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Scattered information across multiple platforms",
|
||||
"Difficult to find company policies",
|
||||
"Limited collaboration tools",
|
||||
"No central source of truth",
|
||||
"Time-consuming onboarding process",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Centralized knowledge repository",
|
||||
"Easy access to all policies and procedures",
|
||||
"Integrated collaboration features",
|
||||
"Single reliable information source",
|
||||
"Streamlined onboarding experience",
|
||||
],
|
||||
}}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "View All", href: "/checkout" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterBaseReveal
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2025 PetrolHeads | United by Passion"
|
||||
/>
|
||||
{/* Products/Resources Section */}
|
||||
<div id="resources" data-section="resources">
|
||||
<ProductCardOne
|
||||
title="Quick Access Resources"
|
||||
description="Browse our most essential company resources and documentation"
|
||||
tag="Featured Resources"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Employee Handbook",
|
||||
price: "Always Available",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/senior-people-reading-retirement-plan-contract-terms-with-broker_482257-100599.jpg?_wi=1",
|
||||
imageAlt: "employee handbook document guidelines",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Benefits Guide",
|
||||
price: "Always Available",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/embraced-couple-reading-loan-agreement-while-having-meeting-with-their-bank-manager-office_637285-914.jpg?_wi=1",
|
||||
imageAlt: "benefits package healthcare employee",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "IT Resources",
|
||||
price: "Always Available",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-colleagues-discussing-digital-art_482257-121433.jpg?_wi=1",
|
||||
imageAlt: "IT support technical help desk",
|
||||
},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Metrics Section */}
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
title="Our Impact"
|
||||
description="Key metrics showing how CompanyHub improves workplace efficiency"
|
||||
tag="Achievements"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "95%",
|
||||
title: "User Satisfaction",
|
||||
description: "Employees rate platform usability",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/nps-infographic-design-template_23-2149916595.jpg?_wi=1",
|
||||
imageAlt: "customer satisfaction rating feedback",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "2,500+",
|
||||
title: "Documents",
|
||||
description: "Knowledge base articles and guides",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-book_23-2148680208.jpg?_wi=1",
|
||||
imageAlt: "stack documents paperwork organization",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "50%",
|
||||
title: "Time Saved",
|
||||
description: "Faster information access per employee",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/modern-productivity-concept-with-flat-design_23-2147972342.jpg?_wi=1",
|
||||
imageAlt: "time management productivity efficiency",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
value: "24/7",
|
||||
title: "Availability",
|
||||
description: "Platform uptime and accessibility",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/standard-quality-control-concept-m_23-2150041844.jpg?_wi=1",
|
||||
imageAlt: "server uptime availability monitoring",
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Team Section */}
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardOne
|
||||
title="Meet the Team"
|
||||
description="Dedicated professionals supporting your success"
|
||||
tag="Our People"
|
||||
members={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
role: "HR Director",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-woman-holding-phone-tablet-hands_1262-19394.jpg?_wi=1",
|
||||
imageAlt: "professional woman HR manager portrait",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Marcus Chen",
|
||||
role: "IT Manager",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-mature-businessman-using-laptop-near-office-building_74855-3639.jpg?_wi=1",
|
||||
imageAlt: "professional man IT manager portrait",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Rodriguez",
|
||||
role: "Operations Lead",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-wheelchair-with-short-hair_23-2148497294.jpg?_wi=1",
|
||||
imageAlt: "professional woman operations manager",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
role: "Support Specialist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-working-call-center-with-headphones-computer_23-2149256098.jpg?_wi=1",
|
||||
imageAlt: "friendly support specialist portrait",
|
||||
},
|
||||
]}
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex Thompson",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-person_23-2151098593.jpg?_wi=1",
|
||||
imageAlt: "professional employee portrait headshot",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jessica Martinez",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg?_wi=1",
|
||||
imageAlt: "female employee professional portrait",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Robert Wilson",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-business-man-with-backpack_23-2149915912.jpg?_wi=1",
|
||||
imageAlt: "male employee professional portrait",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Lisa Anderson",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-positive-female-workers-sitting-desk-modern-office_1262-12571.jpg?_wi=1",
|
||||
imageAlt: "female professional business portrait",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "James Taylor",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1676.jpg?_wi=1",
|
||||
imageAlt: "male professional business portrait",
|
||||
},
|
||||
]}
|
||||
cardTitle="Trusted by 1,200+ employees across all departments"
|
||||
cardTag="See what they say"
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="CompanyHub"
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2025 Company Hub. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user