Update src/pages/HomePage.tsx

This commit is contained in:
2026-06-14 15:25:30 +00:00
parent 7e8da2c625
commit 4f3136d3b4

View File

@@ -6,144 +6,142 @@ import FeaturesMediaCards from '@/components/sections/features/FeaturesMediaCard
import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
import { Bell, DollarSign, Video } from "lucide-react";
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
import { DollarSign, Video, Bell } from "lucide-react";
export default function HomePage() {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroBillboardTiltedCarousel
tag="Campus Partner Program"
title="A chance to build something big."
description="Join the Originals movement. Empower your campus, scale your influence, and earn real commission while you study."
primaryButton={{
text: "Start Winning", href: "#"}}
secondaryButton={{
text: "Learn More", href: "#"}}
items={[
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-searching-internet-funny-memes-holding-mobile-phone-hands-smiling-joyfully-cute-s_1258-133713.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/attractive-girl-fashionable-outfit-creats-influence-content-shows-peace-sign-smartphone-front-camera-poses-selfie-smiles-gladfully-poses-urban-place-spends-vacation-big-city_273609-56229.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/blogger-influencer-shooting-herself_1268-21898.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/unrecognizable-woman-browsing-smartphone-cafe_23-2147785375.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/group-friends-shopping-mall_53876-46893.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-scanning-qr_23-2149357916.jpg" },
]}
/>
</SectionErrorBoundary>
</div>
tag="Campus Partner Program"
title="A chance to build something big."
description="Join the Originals movement. Empower your campus, scale your influence, and earn real commission while you study."
primaryButton={{ text: "Start Winning", href: "#" }}
secondaryButton={{ text: "Learn More", href: "#" }}
items={[
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-searching-internet-funny-memes-holding-mobile-phone-hands-smiling-joyfully-cute-s_1258-133713.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/attractive-girl-fashionable-outfit-creats-influence-content-shows-peace-sign-smartphone-front-camera-poses-selfie-smiles-gladfully-poses-urban-place-spends-vacation-big-city_273609-56229.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/blogger-influencer-shooting-herself_1268-21898.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/unrecognizable-woman-browsing-smartphone-cafe_23-2147785375.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/group-friends-shopping-mall_53876-46893.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-scanning-qr_23-2149357916.jpg" },
]}
/>
</SectionErrorBoundary>
</div>
<div id="tiers" data-section="tiers">
<SectionErrorBoundary name="tiers">
<div id="tiers" data-section="tiers">
<SectionErrorBoundary name="tiers">
<MetricsFeatureCards
tag="Ascension System"
title="Vertical Tier Progression"
description="Climb the ranks from Junior to Partner based on your performance milestones."
metrics={[
{ value: "10%", title: "Junior", features: ["Onboarding", "Active Target", "Sales Start"] },
{ value: "20%", title: "Senior", features: ["5 Associates", "Consistent Sales", "Leadership"] },
{ value: "30%", title: "Lead", features: ["GHS 1,000 Volume", "Weekly Goals", "Squad Building"] },
{ value: "40%", title: "Principal", features: ["7 Team Members", "GHS 7,000 Monthly", "Senior Management"] },
{ value: "50%", title: "Partner", features: ["12+ Managees", "Consistency", "Executive Rank"] },
]}
/>
</SectionErrorBoundary>
</div>
tag="Ascension System"
title="Vertical Tier Progression"
description="Climb the ranks from Junior to Partner based on your performance milestones."
metrics={[
{ value: "10%", title: "Junior", features: ["Onboarding", "Active Target", "Sales Start"] },
{ value: "20%", title: "Senior", features: ["5 Associates", "Consistent Sales", "Leadership"] },
{ value: "30%", title: "Lead", features: ["GHS 1,000 Volume", "Weekly Goals", "Squad Building"] },
{ value: "40%", title: "Principal", features: ["7 Team Members", "GHS 7,000 Monthly", "Senior Management"] },
{ value: "50%", title: "Partner", features: ["12+ Managees", "Consistency", "Executive Rank"] },
]}
/>
</SectionErrorBoundary>
</div>
<div id="tracks" data-section="tracks">
<SectionErrorBoundary name="tracks">
<div id="tracks" data-section="tracks">
<SectionErrorBoundary name="tracks">
<AboutFeaturesSplit
tag="System Tracks"
title="Choose Your Operational Path"
description="Whether you are a salesperson, editor, or influencer, there's a specialized track for you to thrive in."
items={[
{ icon: "DollarSign", title: "Sales Personnel", description: "Manage localized inventory and drive direct peer-to-peer campus commerce." },
{ icon: "Video", title: "Content Editors", description: "Create high-engagement videos and WhatsApp status flyers to boost brand presence." },
{ icon: "Bell", title: "Campus Ambassadors", description: "Anchor live pop-up events and lead viral social media campus challenges." },
]}
imageSrc="http://img.b2bpic.net/free-photo/stock-exchange-trading-forex-finance-graphic-concept_53876-147935.jpg"
/>
</SectionErrorBoundary>
</div>
tag="System Tracks"
title="Choose Your Operational Path"
description="Whether you are a salesperson, editor, or influencer, there's a specialized track for you to thrive in."
items={[
{ icon: "DollarSign", title: "Sales Personnel", description: "Manage localized inventory and drive direct peer-to-peer campus commerce." },
{ icon: "Video", title: "Content Editors", description: "Create high-engagement videos and WhatsApp status flyers to boost brand presence." },
{ icon: "Bell", title: "Campus Ambassadors", description: "Anchor live pop-up events and lead viral social media campus challenges." },
]}
imageSrc="http://img.b2bpic.net/free-photo/stock-exchange-trading-forex-finance-graphic-concept_53876-147935.jpg"
/>
</SectionErrorBoundary>
</div>
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesMediaCards
tag="Platform Capabilities"
title="Powered by Originals Technology"
description="Seamless integration of commerce tools and management portals for every partner."
items={[
{ title: "Secure Verification", description: "AI-powered transaction approvals via MoMo screenshot verification system.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671595.jpg" },
{ title: "Squad Structure", description: "Track team collective volume and performance in real-time.", imageSrc: "http://img.b2bpic.net/free-photo/financial-assistant-working-smartphone-app-with-statistics-using-moible-phone-browse-internet-business-growth-strategy-male-employee-planning-research-presentation-office_482257-41142.jpg" },
{ title: "Smart Wallet", description: "Transparent breakdown of pending versus approved commissions.", imageSrc: "http://img.b2bpic.net/free-photo/computer-dark-room-with-graphs-screen_169016-57447.jpg" },
]}
/>
</SectionErrorBoundary>
</div>
tag="Platform Capabilities"
title="Powered by Originals Technology"
description="Seamless integration of commerce tools and management portals for every partner."
items={[
{ title: "Secure Verification", description: "AI-powered transaction approvals via MoMo screenshot verification system.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671595.jpg" },
{ title: "Squad Structure", description: "Track team collective volume and performance in real-time.", imageSrc: "http://img.b2bpic.net/free-photo/financial-assistant-working-smartphone-app-with-statistics-using-moible-phone-browse-internet-business-growth-strategy-male-employee-planning-research-presentation-office_482257-41142.jpg" },
{ title: "Smart Wallet", description: "Transparent breakdown of pending versus approved commissions.", imageSrc: "http://img.b2bpic.net/free-photo/computer-dark-room-with-graphs-screen_169016-57447.jpg" },
]}
/>
</SectionErrorBoundary>
</div>
<div id="products" data-section="products">
<SectionErrorBoundary name="products">
<div id="products" data-section="products">
<SectionErrorBoundary name="products">
<FeaturesImageBento
tag="Lifestyle Portfolio"
title="Campus Essentials"
description="A curated range of high-demand items for the modern student."
items={[
{ title: "Skincare", description: "Daily glow essentials.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-worker-s-personal-items_23-2149371255.jpg" },
{ title: "Digital Assets", description: "Virtual utility codes.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-entrepreneur-analyzing-company-profit_482257-20207.jpg" },
{ title: "Fashion", description: "Campus aesthetic wear.", imageSrc: "http://img.b2bpic.net/free-photo/team-working-together-project_23-2149325450.jpg" },
{ title: "Tech", description: "Mobile accessories.", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-using-tablet_53876-14784.jpg" },
{ title: "Wellness", description: "Health supplements.", imageSrc: "http://img.b2bpic.net/free-photo/employee-uses-phone-app-with-greenscreen_482257-81843.jpg" },
{ title: "Stationery", description: "Study productivity.", imageSrc: "http://img.b2bpic.net/free-photo/male-worker-holding-smartphone-with-horizontal-green-screen-business-office-young-adult-working-with-blank-chroma-key-isolated-template-with-mockup-background-mobile-phone-display_482257-40952.jpg" },
{ title: "Lifestyle", description: "Curated surprises.", imageSrc: "http://img.b2bpic.net/free-photo/old-couturier-checking-fashion-sketches-atelier-working-modern-designs-with-laptop-tablet-experienced-designer-searching-handmade-models-online-needlework-handheld-shot_482257-67826.jpg" },
]}
/>
</SectionErrorBoundary>
</div>
tag="Lifestyle Portfolio"
title="Campus Essentials"
description="A curated range of high-demand items for the modern student."
items={[
{ title: "Skincare", description: "Daily glow essentials.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-worker-s-personal-items_23-2149371255.jpg" },
{ title: "Digital Assets", description: "Virtual utility codes.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-entrepreneur-analyzing-company-profit_482257-20207.jpg" },
{ title: "Fashion", description: "Campus aesthetic wear.", imageSrc: "http://img.b2bpic.net/free-photo/team-working-together-project_23-2149325450.jpg" },
{ title: "Tech", description: "Mobile accessories.", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-using-tablet_53876-14784.jpg" },
{ title: "Wellness", description: "Health supplements.", imageSrc: "http://img.b2bpic.net/free-photo/employee-uses-phone-app-with-greenscreen_482257-81843.jpg" },
{ title: "Stationery", description: "Study productivity.", imageSrc: "http://img.b2bpic.net/free-photo/male-worker-holding-smartphone-with-horizontal-green-screen-business-office-young-adult-working-with-blank-chroma-key-isolated-template-with-mockup-background-mobile-phone-display_482257-40952.jpg" },
{ title: "Lifestyle", description: "Curated surprises.", imageSrc: "http://img.b2bpic.net/free-photo/old-couturier-checking-fashion-sketches-atelier-working-modern-designs-with-laptop-tablet-experienced-designer-searching-handmade-models-online-needlework-handheld-shot_482257-67826.jpg" },
]}
/>
</SectionErrorBoundary>
</div>
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialOverlayCards
tag="Our Queens"
title="Stories of Success"
description="See how our student partners are scaling their influence and income."
testimonials={[
{ name: "Sarah J.", role: "Senior Partner", company: "UG Campus", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/scenery-designers-work_23-2149741773.jpg" },
{ name: "Ama P.", role: "Lead", company: "KNUST Campus", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/photo-cheerful-lovely-diverse-couple-smile-positively-stand-each-other_273609-18015.jpg" },
{ name: "Efua B.", role: "Senior Partner", company: "UHAS Campus", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/vertical-portrait-young-successful-woman-employee-entrepreneur-office-hall-tutor-carry-laptop-notebooks-looking-away-with-satisfied-pleased-smile-like-her-job_197531-30584.jpg" },
{ name: "Kojo T.", role: "Lead", company: "UG Campus", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-african-student-woman-standing-college-corridor-smiling-holding-books-looking-side-education-learning-concept_176420-12458.jpg" },
{ name: "Adwoa O.", role: "Senior Partner", company: "KNUST Campus", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-stylish-hipster-woman-walking-street-girl-making-selfie-smiling-model-enjoy-her-weekends-with-backpack-female-listening-music-via-headphones_158538-16113.jpg" },
]}
/>
</SectionErrorBoundary>
</div>
tag="Our Queens"
title="Stories of Success"
description="See how our student partners are scaling their influence and income."
testimonials={[
{ name: "Sarah J.", role: "Senior Partner", company: "UG Campus", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/scenery-designers-work_23-2149741773.jpg" },
{ name: "Ama P.", role: "Lead", company: "KNUST Campus", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/photo-cheerful-lovely-diverse-couple-smile-positively-stand-each-other_273609-18015.jpg" },
{ name: "Efua B.", role: "Senior Partner", company: "UHAS Campus", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/vertical-portrait-young-successful-woman-employee-entrepreneur-office-hall-tutor-carry-laptop-notebooks-looking-away-with-satisfied-pleased-smile-like-her-job_197531-30584.jpg" },
{ name: "Kojo T.", role: "Lead", company: "UG Campus", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-african-student-woman-standing-college-corridor-smiling-holding-books-looking-side-education-learning-concept_176420-12458.jpg" },
{ name: "Adwoa O.", role: "Senior Partner", company: "KNUST Campus", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-stylish-hipster-woman-walking-street-girl-making-selfie-smiling-model-enjoy-her-weekends-with-backpack-female-listening-music-via-headphones_158538-16113.jpg" },
]}
/>
</SectionErrorBoundary>
</div>
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqTwoColumn
tag="Common Questions"
title="Everything You Need to Know"
description="We've got the answers to keep you winning."
items={[
{ question: "How do I log a sale?", answer: "Use the floating action button on your dashboard, fill in the details, and upload your MoMo receipt." },
{ question: "When can I cash out?", answer: "All verified commissions are ready for withdrawal every Friday." },
{ question: "How are squads managed?", answer: "Squads are automatically mapped based on your Manager_ID linkage." },
{ question: "Is image upload mandatory?", answer: "Yes, every transaction requires a proof-of-payment MoMo screenshot." },
]}
/>
</SectionErrorBoundary>
</div>
tag="Common Questions"
title="Everything You Need to Know"
description="We've got the answers to keep you winning."
items={[
{ question: "How do I log a sale?", answer: "Use the floating action button on your dashboard, fill in the details, and upload your MoMo receipt." },
{ question: "When can I cash out?", answer: "All verified commissions are ready for withdrawal every Friday." },
{ question: "How are squads managed?", answer: "Squads are automatically mapped based on your Manager_ID linkage." },
{ question: "Is image upload mandatory?", answer: "Yes, every transaction requires a proof-of-payment MoMo screenshot." },
]}
/>
</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 build your campus legacy?"
primaryButton={{ text: "Apply Now", href: "#" }}
secondaryButton={{ text: "Speak to Execs", href: "#" }}
/>
</SectionErrorBoundary>
</div>
tag="Get Started"
text="Ready to build your campus legacy?"
primaryButton={{ text: "Apply Now", href: "#" }}
secondaryButton={{ text: "Speak to Execs", href: "#" }}
/>
</SectionErrorBoundary>
</div>
</>
);
}