bender/dfa936be-e8bf-4f8b-bc7c-84d90d660201
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-04 10:27:58 +00:00
parent 4d280ccdad
commit 49e7833114
1 changed files with 130 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
src/app/page.tsx
View File

@@ -7,6 +7,9 @@ import FeatureBento from "@/components/sections/feature/FeatureBento";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import {
@@ -37,12 +40,10 @@ import {
Instagram,
Linkedin,
Youtube,
CircleDollarSign,
ArrowLeftRight,
Send,
House,
MessageSquareText,
Settings,
Rocket,
HelpCircle,
Archive,
Share,
} from "lucide-react";
export default function HomePage() {
@@ -73,9 +74,7 @@ export default function HomePage() {
brandName="SocialHub"
navItems={navItems}
button={{
text: "Join Premium",
href: "/signup",
}}
text: "Join Premium", href: "/signup"}}
/>
</div>
@@ -94,11 +93,8 @@ export default function HomePage() {
buttonAnimation="blur-reveal"
background={{ variant: "sparkles-gradient" }}
dashboard={{
title: "Creator Analytics Hub",
logoIcon: Zap,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATc8BgQr1zI2SXM9NI5O4yf07w/a-sleek-modern-social-media-dashboard-in-1772619911147-218c8d61.png",
searchPlaceholder: "Search creators, trends, communities...",
sidebarItems: [
title: "Creator Analytics Hub", logoIcon: Zap,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATc8BgQr1zI2SXM9NI5O4yf07w/a-sleek-modern-social-media-dashboard-in-1772619911147-218c8d61.png", searchPlaceholder: "Search creators, trends, communities...", sidebarItems: [
{ icon: Home, active: true },
{ icon: Video, active: false },
{ icon: Users, active: false },
@@ -109,43 +105,30 @@ export default function HomePage() {
],
stats: [
{
title: "Active Creators",
values: [2500, 3200, 4100],
description: "Growing creator community",
},
title: "Active Creators", values: [2500, 3200, 4100],
description: "Growing creator community"},
{
title: "Engagement Rate",
values: [8.5, 12.3, 15.8],
valueSuffix: "%",
description: "Average interaction rate",
},
title: "Engagement Rate", values: [8.5, 12.3, 15.8],
valueSuffix: "%", description: "Average interaction rate"},
{
title: "Rewards Distributed",
values: [125000, 187500, 250000],
valuePrefix: "$",
description: "Monthly creator earnings",
},
title: "Rewards Distributed", values: [125000, 187500, 250000],
valuePrefix: "$", description: "Monthly creator earnings"},
],
chartTitle: "Daily Active Users",
chartData: [
chartTitle: "Daily Active Users", chartData: [
{ value: 45 },
{ value: 62 },
{ value: 78 },
{ value: 55 },
{ value: 89 },
],
listTitle: "Recent Trending Content",
listItems: [
listTitle: "Recent Trending Content", listItems: [
{
icon: TrendingUp,
title: "#CreativeJourney",
status: "Trending 🔥",
},
title: "#CreativeJourney", status: "Trending 🔥"},
{ icon: Heart, title: "Creator Spotlight", status: "Featured ⭐" },
{ icon: MessageCircle, title: "Community Talks", status: "Live Now 🔴" },
],
}}
className="hero-premium"
/>
</div>
@@ -164,62 +147,37 @@ export default function HomePage() {
useInvertedBackground={true}
features={[
{
title: "Stream Setup",
description: "HD streaming with multi-camera support and interactive viewer engagement tools",
bentoComponent: "3d-task-list",
items: [
title: "Stream Setup", description: "HD streaming with multi-camera support and interactive viewer engagement tools", bentoComponent: "3d-task-list", items: [
{ icon: Radio, label: "Go Live", time: "Instant" },
{ icon: Share2, label: "Multi-Platform", time: "Sync" },
{ icon: Users, label: "Audience Tools", time: "Real-time" },
],
title: "Stream Setup",
},
{
title: "Advanced Analytics",
description: "Deep insights into audience behavior, content performance, and monetization metrics",
bentoComponent: "animated-bar-chart",
},
title: "Advanced Analytics", description: "Deep insights into audience behavior, content performance, and monetization metrics", bentoComponent: "animated-bar-chart"},
{
title: "Content Management",
description: "Organize, schedule, and distribute content across all platforms seamlessly",
bentoComponent: "3d-card-grid",
items: [
title: "Content Management", description: "Organize, schedule, and distribute content across all platforms seamlessly", bentoComponent: "3d-card-grid", items: [
{ name: "Schedule Posts", icon: Calendar },
{ name: "Collaborate", icon: Users },
{ name: "Distribute", icon: Share2 },
{ name: "Archive", icon: Layers },
{ name: "Distribute", icon: Share },
{ name: "Archive", icon: Archive },
],
centerIcon: Layers,
},
{
title: "Monetization Suite",
description: "Multiple revenue streams including subscriptions, tipping, sponsorships, and ad revenue",
bentoComponent: "icon-info-cards",
items: [
title: "Monetization Suite", description: "Multiple revenue streams including subscriptions, tipping, sponsorships, and ad revenue", bentoComponent: "icon-info-cards", items: [
{ icon: DollarSign, label: "Subscriptions", value: "$0-$99/mo" },
{ icon: Gift, label: "Tips & Gifts", value: "Direct" },
{ icon: Handshake, label: "Sponsorships", value: "Marketplace" },
],
},
{
title: "Community Hub",
description: "Build engaged communities with forums, exclusive groups, and member benefits",
bentoComponent: "marquee",
centerIcon: Users,
variant: "text",
texts: [
"Exclusive Access",
"Member Events",
"Direct Messaging",
"Custom Roles",
"Premium Content",
],
title: "Community Hub", description: "Build engaged communities with forums, exclusive groups, and member benefits", bentoComponent: "marquee", centerIcon: Users,
variant: "text", texts: [
"Exclusive Access", "Member Events", "Direct Messaging", "Custom Roles", "Premium Content"],
},
{
title: "Creator Network",
description: "Collaborate with other creators, share audiences, and grow together",
bentoComponent: "orbiting-icons",
centerIcon: Network,
title: "Creator Network", description: "Collaborate with other creators, share audiences, and grow together", bentoComponent: "orbiting-icons", centerIcon: Network,
items: [
{ icon: Palette, ring: 1 },
{ icon: Music, ring: 1 },
@@ -244,15 +202,7 @@ export default function HomePage() {
textboxLayout="default"
useInvertedBackground={false}
names={[
"TechCraft Studios",
"CreativeMinds Co",
"Digital Revolution",
"Content Kings",
"Influence Hub",
"Creator League",
"Media Masters",
"Trend Setters",
]}
"TechCraft Studios", "CreativeMinds Co", "Digital Revolution", "Content Kings", "Influence Hub", "Creator League", "Media Masters", "Trend Setters"]}
speed={40}
showCard={true}
/>
@@ -271,41 +221,17 @@ export default function HomePage() {
animationType="slide-up"
testimonials={[
{
id: "1",
name: "Maya Rodriguez",
role: "Lifestyle Creator",
company: "StyleGlow Studios",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATc8BgQr1zI2SXM9NI5O4yf07w/professional-portrait-photo-of-a-confide-1772619908985-9eff220b.png?_wi=1",
imageAlt: "Professional portrait photo of a confident Latina woman, Maya Rodriguez, lifestyle creator",
},
id: "1", name: "Maya Rodriguez", role: "Lifestyle Creator", company: "StyleGlow Studios", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATc8BgQr1zI2SXM9NI5O4yf07w/professional-portrait-photo-of-a-confide-1772619908985-9eff220b.png", imageAlt: "Professional portrait photo of a confident Latina woman, Maya Rodriguez, lifestyle creator"},
{
id: "2",
name: "James Chen",
role: "Tech Educator",
company: "CodeJourney",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATc8BgQr1zI2SXM9NI5O4yf07w/professional-headshot-of-an-asian-man-ja-1772619909157-1084e4e6.png?_wi=1",
imageAlt: "Professional headshot of an Asian man, James Chen, tech educator",
},
id: "2", name: "James Chen", role: "Tech Educator", company: "CodeJourney", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATc8BgQr1zI2SXM9NI5O4yf07w/professional-headshot-of-an-asian-man-ja-1772619909157-1084e4e6.png", imageAlt: "Professional headshot of an Asian man, James Chen, tech educator"},
{
id: "3",
name: "Sofia Bergström",
role: "Fitness Coach",
company: "FitFlow Community",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATc8BgQr1zI2SXM9NI5O4yf07w/professional-portrait-of-a-blonde-scandi-1772619909701-6b057727.png?_wi=1",
imageAlt: "Professional portrait of a blonde Scandinavian woman, Sofia Bergström, fitness coach",
},
id: "3", name: "Sofia Bergström", role: "Fitness Coach", company: "FitFlow Community", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATc8BgQr1zI2SXM9NI5O4yf07w/professional-portrait-of-a-blonde-scandi-1772619909701-6b057727.png", imageAlt: "Professional portrait of a blonde Scandinavian woman, Sofia Bergström, fitness coach"},
{
id: "4",
name: "Marcus Johnson",
role: "Music Producer",
company: "Beat Factory",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATc8BgQr1zI2SXM9NI5O4yf07w/professional-portrait-of-a-black-man-mar-1772619909331-1d16aaaf.png?_wi=1",
imageAlt: "Professional portrait of a Black man, Marcus Johnson, music producer",
},
id: "4", name: "Marcus Johnson", role: "Music Producer", company: "Beat Factory", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATc8BgQr1zI2SXM9NI5O4yf07w/professional-portrait-of-a-black-man-mar-1772619909331-1d16aaaf.png", imageAlt: "Professional portrait of a Black man, Marcus Johnson, music producer"},
]}
kpiItems={[
{ value: "10,000+", label: "Active Creators" },
@@ -328,39 +254,103 @@ export default function HomePage() {
useInvertedBackground={false}
metrics={[
{
id: "1",
value: "2.5M",
title: "Active Monthly Users",
items: [
"Growing 25% monthly",
"Across 150+ countries",
"Multi-language support",
],
id: "1", value: "2.5M", title: "Active Monthly Users", items: [
"Growing 25% monthly", "Across 150+ countries", "Multi-language support"],
},
{
id: "2",
value: "$500K",
title: "Average Creator Earnings",
items: [
"Within first 6 months",
"Multiple revenue streams",
"Transparent payouts",
],
id: "2", value: "$500K", title: "Average Creator Earnings", items: [
"Within first 6 months", "Multiple revenue streams", "Transparent payouts"],
},
{
id: "3",
value: "98%",
title: "Creator Satisfaction",
items: [
"Based on surveys",
"Industry leading",
"Dedicated support team",
],
id: "3", value: "98%", title: "Creator Satisfaction", items: [
"Based on surveys", "Industry leading", "Dedicated support team"],
},
]}
/>
</div>
{/* Pricing Section */}
<div id="pricing" data-section="pricing">
<PricingCardEight
title="Flexible Pricing Plans"
description="Choose the perfect plan for your creator journey. All plans include premium support."
tag="Transparent Pricing"
tagIcon={DollarSign}
tagAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={true}
plans={[
{
id: "starter", badge: "For Beginners", price: "Free", subtitle: "Start your creator journey", buttons: [{ text: "Get Started", href: "/signup" }],
features: [
"Unlimited uploads", "Basic analytics", "Community access", "Mobile app"],
},
{
id: "pro", badge: "Most Popular", badgeIcon: Sparkles,
price: "$9.99/mo", subtitle: "For growing creators", buttons: [{ text: "Start Trial", href: "/signup?plan=pro" }],
features: [
"Advanced analytics", "Monetization tools", "Priority support", "Custom branding", "Collaboration features", "Revenue insights"],
},
{
id: "premium", badge: "For Professionals", price: "$29.99/mo", subtitle: "Maximum earning potential", buttons: [{ text: "Start Trial", href: "/signup?plan=premium" }],
features: [
"All Pro features", "Exclusive partnerships", "Dedicated manager", "Custom tools", "International reach", "Event hosting"],
},
]}
/>
</div>
{/* FAQ Section */}
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Frequently Asked Questions"
description="Find answers to common questions about SocialHub and get started today."
tag="Help & Support"
tagIcon={HelpCircle}
tagAnimation="slide-up"
textboxLayout="split"
useInvertedBackground={false}
mediaAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATc8BgQr1zI2SXM9NI5O4yf07w/a-modern-customer-support-scene-showing--1772619910065-25b92624.png"
imageAlt="Customer support team helping creators"
mediaPosition="right"
faqsAnimation="blur-reveal"
faqs={[
{
id: "1", title: "How do I start earning on SocialHub?", content: "Once you create your account and reach 100 followers, you can enable monetization. Choose from subscriptions, tips, sponsorships, or join our ad revenue program. Most creators earn within their first month."},
{
id: "2", title: "What commission does SocialHub take?", content: "We keep it simple and fair. On subscriptions: 30% platform fee. On tips: 5% platform fee. Sponsorships and partnerships are negotiated directly. We believe in transparent, creator-first economics."},
{
id: "3", title: "Can I promote my content on other platforms?", content: "Absolutely! Cross-promotion is encouraged. Share your SocialHub content on Instagram, TikTok, YouTube, and more. Use our built-in tools to sync your content across multiple platforms."},
{
id: "4", title: "How often do I get paid?", content: "Payments are processed weekly to your bank account or preferred payment method. Minimum payout threshold is $10. You can track earnings in real-time through your creator dashboard."},
{
id: "5", title: "What kind of content is allowed?", content: "We support diverse content: vlogs, music, gaming, education, fitness, beauty, tech, and more. Content must comply with our community guidelines. We have a dedicated moderation team."},
{
id: "6", title: "Do you offer creator coaching?", content: "Yes! Premium members get access to exclusive courses, webinars, and one-on-one coaching. Our community also has peer mentorship programs to help creators grow."},
]}
/>
</div>
{/* Contact Section */}
<div id="contact" data-section="contact">
<ContactCTA
tag="Ready to Launch?"
tagIcon={Rocket}
tagAnimation="slide-up"
title="Join the Creator Revolution Today"
description="Start earning from your passion. No fees to join, no hidden costs. Just pure creator freedom and unlimited earning potential."
buttons={[
{ text: "Sign Up Free", href: "/signup" },
{ text: "Schedule Demo", href: "/demo" },
]}
buttonAnimation="blur-reveal"
background={{ variant: "radial-gradient" }}
useInvertedBackground={true}
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterCard
@@ -369,24 +359,16 @@ export default function HomePage() {
socialLinks={[
{
icon: Twitter,
href: "https://twitter.com/socialhub",
ariaLabel: "Twitter",
},
href: "https://twitter.com/socialhub", ariaLabel: "Twitter"},
{
icon: Instagram,
href: "https://instagram.com/socialhub",
ariaLabel: "Instagram",
},
href: "https://instagram.com/socialhub", ariaLabel: "Instagram"},
{
icon: Linkedin,
href: "https://linkedin.com/company/socialhub",
ariaLabel: "LinkedIn",
},
href: "https://linkedin.com/company/socialhub", ariaLabel: "LinkedIn"},
{
icon: Youtube,
href: "https://youtube.com/socialhub",
ariaLabel: "YouTube",
},
href: "https://youtube.com/socialhub", ariaLabel: "YouTube"},
]}
/>
</div>