Update src/pages/HomePage.tsx

This commit is contained in:
2026-06-22 16:59:21 +00:00
parent 81c2135bda
commit 5a4f2065ff

View File

@@ -15,375 +15,198 @@ import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function HomePage() {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroBillboard
tag="Next-Gen Event Management"
title="Book Your Next Live Experience Instantly"
description="Discover thousands of events in your city. Secure your tickets in seconds with flexible payment options and instant digital delivery."
primaryButton={{
text: "Explore Events Now",
href: "#events",
}}
secondaryButton={{
text: "For Organizers",
href: "#contact",
}}
imageSrc="http://img.b2bpic.net/free-photo/hand-holding-smartphone-tickets_23-2149340924.jpg?_wi=1"
/>
</SectionErrorBoundary>
</div>
tag="Next-Gen Event Management"
title="Book Your Next Live Experience Instantly"
description="Discover thousands of events in your city. Secure your tickets in seconds with flexible payment options and instant digital delivery."
primaryButton={{ text: "Explore Events Now", href: "#events" }}
secondaryButton={{ text: "For Organizers", href: "#contact" }}
imageSrc="http://img.b2bpic.net/free-photo/hand-holding-smartphone-tickets_23-2149340924.jpg"
/>
</SectionErrorBoundary>
</div>
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutFeaturesSplit
tag="Why Crowd?"
title="Engineered for Seamless Event Discovery"
description="We bridge the gap between event enthusiasts and organizers, ensuring every booking is smooth, secure, and instant."
items={[
{
icon: Zap,
title: "Real-time Booking",
description: "Instant ticket confirmation with dynamic inventory management.",
},
{
icon: ShieldCheck,
title: "Secure Payments",
description: "PCI-compliant payment processing for your peace of mind.",
},
{
icon: Smartphone,
title: "Mobile First",
description: "Optimized for discovery on the go, anytime, anywhere.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg"
/>
</SectionErrorBoundary>
</div>
tag="Why Crowd?"
title="Engineered for Seamless Event Discovery"
description="We bridge the gap between event enthusiasts and organizers, ensuring every booking is smooth, secure, and instant."
items={[
{ icon: "Zap", title: "Real-time Booking", description: "Instant ticket confirmation with dynamic inventory management." },
{ icon: "ShieldCheck", title: "Secure Payments", description: "PCI-compliant payment processing for your peace of mind." },
{ icon: "Smartphone", title: "Mobile First", description: "Optimized for discovery on the go, anytime, anywhere." },
]}
imageSrc="http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg"
/>
</SectionErrorBoundary>
</div>
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesMediaCarousel
tag="Event Categories"
title="Curated Experiences Just For You"
description="From local music gigs to grand theater performances, find it all here."
items={[
{
title: "Live Music",
description: "Catch top-tier artists in concert.",
buttonIcon: "Music",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-smartphone-tickets_23-2149340980.jpg",
},
{
title: "Theater & Arts",
description: "Immersive cultural experiences.",
buttonIcon: "Theater",
imageSrc: "http://img.b2bpic.net/free-photo/navratri-highly-detailed-interior-decoration_23-2151193719.jpg",
},
{
title: "Sports Events",
description: "Get closer to the action.",
buttonIcon: "Trophy",
imageSrc: "http://img.b2bpic.net/free-photo/decorated-ceremonial-area-outdoors-with-modern-transparent-chairs-beautiful-festoon-with-lots-trees-plants_8353-10828.jpg",
},
{
title: "Audio Visual",
description: "High-end sound and visual productions.",
buttonIcon: "Headphones",
imageSrc: "http://img.b2bpic.net/free-photo/artist-composer-producing-music-using-stereo-panel-controls-electronic-gear_482257-83359.jpg",
},
{
title: "Festivals",
description: "Join the biggest crowds.",
buttonIcon: "Sparkles",
imageSrc: "http://img.b2bpic.net/free-photo/circular-shaped-neon-lights-background_23-2147815453.jpg",
},
{
title: "Event Access",
description: "Seamless entrance systems.",
buttonIcon: "QrCode",
imageSrc: "http://img.b2bpic.net/free-photo/person-paying-with-its-smartphone-wallet-app_23-2149167240.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
tag="Event Categories"
title="Curated Experiences Just For You"
description="From local music gigs to grand theater performances, find it all here."
items={[
{ title: "Live Music", description: "Catch top-tier artists in concert.", buttonIcon: "Music", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-smartphone-tickets_23-2149340980.jpg" },
{ title: "Theater & Arts", description: "Immersive cultural experiences.", buttonIcon: "Theater", imageSrc: "http://img.b2bpic.net/free-photo/navratri-highly-detailed-interior-decoration_23-2151193719.jpg" },
{ title: "Sports Events", description: "Get closer to the action.", buttonIcon: "Trophy", imageSrc: "http://img.b2bpic.net/free-photo/decorated-ceremonial-area-outdoors-with-modern-transparent-chairs-beautiful-festoon-with-lots-trees-plants_8353-10828.jpg" },
{ title: "Audio Visual", description: "High-end sound and visual productions.", buttonIcon: "Headphones", imageSrc: "http://img.b2bpic.net/free-photo/artist-composer-producing-music-using-stereo-panel-controls-electronic-gear_482257-83359.jpg" },
{ title: "Festivals", description: "Join the biggest crowds.", buttonIcon: "Sparkles", imageSrc: "http://img.b2bpic.net/free-photo/circular-shaped-neon-lights-background_23-2147815453.jpg" },
{ title: "Event Access", description: "Seamless entrance systems.", buttonIcon: "QrCode", imageSrc: "http://img.b2bpic.net/free-photo/person-paying-with-its-smartphone-wallet-app_23-2149167240.jpg" },
]}
/>
</SectionErrorBoundary>
</div>
<div id="product" data-section="product">
<SectionErrorBoundary name="product">
<div id="product" data-section="product">
<SectionErrorBoundary name="product">
<FeaturesRevealCardsBento
tag="For Organizers"
title="Everything You Need to Manage Events"
description="Powerful tools to list, sell, and track your events in real-time."
items={[
{
title: "Capacity Management",
description: "Define zones and seating.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/internationals-people-standing-cafe-with-mobile-phone_1157-31457.jpg",
},
{
title: "Dynamic Pricing",
description: "Automated price adjustments.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-particle-design_1048-13547.jpg",
},
{
title: "Revenue Tracking",
description: "Real-time dashboard analytics.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/eco-spa-lounge-ethno-interior-stone-wall_169016-68911.jpg",
},
{
title: "Instant Delivery",
description: "Digital tickets for all.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/elegant-wedding-venue-with-swimming-pool_637285-5705.jpg",
},
{
title: "Fan Insights",
description: "Know your audience better.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/male-composer-using-mixing-console-piano-edit-tracks_482257-121272.jpg",
},
{
title: "Promoter Portal",
description: "Collaborate easily.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-women-with-guitar_23-2149060534.jpg",
},
{
title: "Access Control",
description: "Secure scanning tools.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/japanese-subway-train-system-passenger-information-display-screen_23-2148954824.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
tag="For Organizers"
title="Everything You Need to Manage Events"
description="Powerful tools to list, sell, and track your events in real-time."
items={[
{ title: "Capacity Management", description: "Define zones and seating.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/internationals-people-standing-cafe-with-mobile-phone_1157-31457.jpg" },
{ title: "Dynamic Pricing", description: "Automated price adjustments.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-particle-design_1048-13547.jpg" },
{ title: "Revenue Tracking", description: "Real-time dashboard analytics.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/eco-spa-lounge-ethno-interior-stone-wall_169016-68911.jpg" },
{ title: "Instant Delivery", description: "Digital tickets for all.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/elegant-wedding-venue-with-swimming-pool_637285-5705.jpg" },
{ title: "Fan Insights", description: "Know your audience better.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/male-composer-using-mixing-console-piano-edit-tracks_482257-121272.jpg" },
{ title: "Promoter Portal", description: "Collaborate easily.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-women-with-guitar_23-2149060534.jpg" },
{ title: "Access Control", description: "Secure scanning tools.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/japanese-subway-train-system-passenger-information-display-screen_23-2148954824.jpg" },
]}
/>
</SectionErrorBoundary>
</div>
<div id="pricing" data-section="pricing">
<SectionErrorBoundary name="pricing">
<div id="pricing" data-section="pricing">
<SectionErrorBoundary name="pricing">
<PricingMediaCards
tag="Pricing Plans"
title="Flexible Solutions for Every Event"
description="Choose a tier that grows with your business."
plans={[
{
tag: "Essentials",
price: "$0",
period: "/event",
features: [
"Limited events",
"Base analytics",
],
primaryButton: {
text: "Get Started",
href: "#",
},
imageSrc: "http://img.b2bpic.net/free-vector/business-card-template-with-gradient-colors_23-2148875199.jpg",
},
{
tag: "Professional",
price: "$99",
period: "/event",
features: [
"Advanced analytics",
"Custom branding",
"Priority support",
],
primaryButton: {
text: "Upgrade",
href: "#",
},
imageSrc: "http://img.b2bpic.net/free-vector/dark-vip-card-template-with-golden-details-gradient_23-2149152245.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
tag="Pricing Plans"
title="Flexible Solutions for Every Event"
description="Choose a tier that grows with your business."
plans={[
{
tag: "Essentials", price: "$0", period: "/event", features: ["Limited events", "Base analytics"],
primaryButton: { text: "Get Started", href: "#" },
imageSrc: "http://img.b2bpic.net/free-vector/business-card-template-with-gradient-colors_23-2148875199.jpg"
},
{
tag: "Professional", price: "$99", period: "/event", features: ["Advanced analytics", "Custom branding", "Priority support"],
primaryButton: { text: "Upgrade", href: "#" },
imageSrc: "http://img.b2bpic.net/free-vector/dark-vip-card-template-with-golden-details-gradient_23-2149152245.jpg"
},
]}
/>
</SectionErrorBoundary>
</div>
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsIconCards
tag="Our Impact"
title="Powering Live Moments Daily"
description="Trusted by hundreds of organizers across the country."
metrics={[
{
icon: CreditCard,
title: "Tickets Sold",
value: "1.2M+",
},
{
icon: Calendar,
title: "Events Hosted",
value: "50k+",
},
{
icon: Users,
title: "Happy Fans",
value: "800k+",
},
]}
/>
</SectionErrorBoundary>
</div>
tag="Our Impact"
title="Powering Live Moments Daily"
description="Trusted by hundreds of organizers across the country."
metrics={[
{ icon: "CreditCard", title: "Tickets Sold", value: "1.2M+" },
{ icon: "Calendar", title: "Events Hosted", value: "50k+" },
{ icon: "Users", title: "Happy Fans", value: "800k+" },
]}
/>
</SectionErrorBoundary>
</div>
<div id="team" data-section="team">
<SectionErrorBoundary name="team">
<div id="team" data-section="team">
<SectionErrorBoundary name="team">
<TeamListCards
tag="Leadership"
title="Meet the Team Behind Crowd"
description="We are passionate about live experiences."
groups={[
{
title: "Management",
members: [
{
name: "Sarah Chen",
role: "CEO & Founder",
detail: "Expert in event tech platforms.",
imageSrc: "http://img.b2bpic.net/free-photo/teammates-working-late-office_23-2148991369.jpg",
},
{
name: "Mark Ross",
role: "CTO",
detail: "Leading our scaling efforts.",
imageSrc: "http://img.b2bpic.net/free-photo/colleagues-working-together-high-angle_23-2150152268.jpg",
},
{
name: "Julia Varga",
role: "COO",
detail: "Optimizing event operations.",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-laptop-planning-strategy-working-concept_53876-23016.jpg",
},
],
},
]}
/>
</SectionErrorBoundary>
</div>
tag="Leadership"
title="Meet the Team Behind Crowd"
description="We are passionate about live experiences."
groups={[
{
title: "Management", members: [
{
name: "Sarah Chen", role: "CEO & Founder", detail: "Expert in event tech platforms.", imageSrc: "http://img.b2bpic.net/free-photo/teammates-working-late-office_23-2148991369.jpg"
},
{
name: "Mark Ross", role: "CTO", detail: "Leading our scaling efforts.", imageSrc: "http://img.b2bpic.net/free-photo/colleagues-working-together-high-angle_23-2150152268.jpg"
},
{
name: "Julia Varga", role: "COO", detail: "Optimizing event operations.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-laptop-planning-strategy-working-concept_53876-23016.jpg"
},
]
}
]}
/>
</SectionErrorBoundary>
</div>
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialMarqueeCards
tag="Social Proof"
title="Loved by Organizers Worldwide"
description="What people say about their experience with Crowd."
testimonials={[
{
name: "Alice Green",
role: "Promoter",
quote: "Crowd makes event management so simple.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-16037.jpg",
},
{
name: "John Doe",
role: "Venue Director",
quote: "The analytics are game changing.",
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-portrait_93675-133802.jpg",
},
{
name: "Emma Smith",
role: "Organizer",
quote: "Seamless ticketing, happy fans.",
imageSrc: "http://img.b2bpic.net/free-photo/mobile-colleagues_1098-14113.jpg",
},
{
name: "David Wu",
role: "Promoter",
quote: "Best support team ever.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-confident-middle-aged-businessman-black-background_176420-5560.jpg",
},
{
name: "Sophia Lee",
role: "Venue Mgr",
quote: "Finally, a platform that works.",
imageSrc: "http://img.b2bpic.net/free-photo/pensive-shoe-master-glasses-is-working-his-new-shoes-collection-his-workshop_613910-17383.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
tag="Social Proof"
title="Loved by Organizers Worldwide"
description="What people say about their experience with Crowd."
testimonials={[
{ name: "Alice Green", role: "Promoter", quote: "Crowd makes event management so simple.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-16037.jpg" },
{ name: "John Doe", role: "Venue Director", quote: "The analytics are game changing.", imageSrc: "http://img.b2bpic.net/free-photo/business-woman-portrait_93675-133802.jpg" },
{ name: "Emma Smith", role: "Organizer", quote: "Seamless ticketing, happy fans.", imageSrc: "http://img.b2bpic.net/free-photo/mobile-colleagues_1098-14113.jpg" },
{ name: "David Wu", role: "Promoter", quote: "Best support team ever.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-confident-middle-aged-businessman-black-background_176420-5560.jpg" },
{ name: "Sophia Lee", role: "Venue Mgr", quote: "Finally, a platform that works.", imageSrc: "http://img.b2bpic.net/free-photo/pensive-shoe-master-glasses-is-working-his-new-shoes-collection-his-workshop_613910-17383.jpg" },
]}
/>
</SectionErrorBoundary>
</div>
<div id="social-proof" data-section="social-proof">
<SectionErrorBoundary name="social-proof">
<div id="social-proof" data-section="social-proof">
<SectionErrorBoundary name="social-proof">
<SocialProofMarquee
tag="Trusted By"
title="The Biggest Names in Live Events"
names={[
"The Sound Hall",
"Global Arena",
"City Theater",
"Grand Festival",
"SportWorld",
"Cultural Center",
"Arts Hub",
]}
/>
</SectionErrorBoundary>
</div>
tag="Trusted By"
title="The Biggest Names in Live Events"
names={[
"The Sound Hall", "Global Arena", "City Theater", "Grand Festival", "SportWorld", "Cultural Center", "Arts Hub"]}
/>
</SectionErrorBoundary>
</div>
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqTabbedAccordion
tag="Help Center"
title="Frequently Asked Questions"
description="Get the answers you need."
categories={[
{
name: "General",
items: [
{
question: "Is Crowd secure?",
answer: "Yes, we use PCI-compliant standards.",
},
{
question: "Can I list my own events?",
answer: "Yes, register as an organizer today.",
},
],
},
{
name: "Pricing",
items: [
{
question: "Are there hidden fees?",
answer: "No, our pricing model is transparent.",
},
],
},
]}
cta={{
name: "Support Team",
role: "Available 24/7",
buttonText: "Contact Support",
buttonHref: "#contact",
imageSrc: "http://img.b2bpic.net/free-photo/handsome-black-male-dressed-suit-from-wool_613910-15983.jpg",
}}
/>
</SectionErrorBoundary>
</div>
tag="Help Center"
title="Frequently Asked Questions"
description="Get the answers you need."
categories={[
{
name: "General", items: [
{ question: "Is Crowd secure?", answer: "Yes, we use PCI-compliant standards." },
{ question: "Can I list my own events?", answer: "Yes, register as an organizer today." },
],
},
{
name: "Pricing", items: [
{ question: "Are there hidden fees?", answer: "No, our pricing model is transparent." },
],
},
]}
cta={{
name: "Support Team", role: "Available 24/7", buttonText: "Contact Support", buttonHref: "#contact", imageSrc: "http://img.b2bpic.net/free-photo/handsome-black-male-dressed-suit-from-wool_613910-15983.jpg"
}}
/>
</SectionErrorBoundary>
</div>
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Get Started"
text="Ready to host your next event?"
primaryButton={{
text: "Contact Us",
href: "#",
}}
secondaryButton={{
text: "Learn More",
href: "#",
}}
/>
</SectionErrorBoundary>
</div>
tag="Get Started"
text="Ready to host your next event?"
primaryButton={{ text: "Contact Us", href: "#" }}
secondaryButton={{ text: "Learn More", href: "#" }}
/>
</SectionErrorBoundary>
</div>
</>
);
}