247 lines
9.3 KiB
TypeScript
247 lines
9.3 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
|
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
|
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import Link from "next/link";
|
|
import {
|
|
Star,
|
|
TrendingUp,
|
|
HelpCircle,
|
|
Twitter,
|
|
Instagram,
|
|
Linkedin,
|
|
Youtube,
|
|
Home,
|
|
Video,
|
|
Users,
|
|
} from "lucide-react";
|
|
|
|
export default function CommunityPage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Community", id: "testimonial" },
|
|
{ name: "Contact", id: "contact" },
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="large"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
{/* Navbar */}
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="SocialHub"
|
|
navItems={navItems}
|
|
button={{
|
|
text: "Join Premium",
|
|
href: "/signup",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Testimonials Section */}
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardSixteen
|
|
title="Creator Success Stories"
|
|
description="Hear from creators who've achieved extraordinary growth and earnings on our platform. Their journey could be yours."
|
|
tag="Community Voices"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
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=2",
|
|
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=2",
|
|
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=2",
|
|
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=2",
|
|
imageAlt: "Professional portrait of a Black man, Marcus Johnson, music producer",
|
|
},
|
|
]}
|
|
kpiItems={[
|
|
{ value: "10,000+", label: "Active Creators" },
|
|
{ value: "$50M+", label: "Earned by Creators" },
|
|
{ value: "5B+", label: "Monthly Views" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Metrics Section */}
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
title="Community Impact"
|
|
description="See the real numbers behind our thriving creator community and ecosystem"
|
|
tag="By The Numbers"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="scale-rotate"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
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: "3",
|
|
value: "98%",
|
|
title: "Creator Satisfaction",
|
|
items: [
|
|
"Based on surveys",
|
|
"Industry leading",
|
|
"Dedicated support team",
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* FAQ Section */}
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about SocialHub community, creator tools, and getting started."
|
|
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="A modern customer support scene showing a diverse team of friendly professionals helping creators online"
|
|
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>
|
|
|
|
{/* Footer */}
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="SocialHub"
|
|
copyrightText="© 2025 SocialHub. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com/socialhub",
|
|
ariaLabel: "Twitter",
|
|
},
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com/socialhub",
|
|
ariaLabel: "Instagram",
|
|
},
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com/company/socialhub",
|
|
ariaLabel: "LinkedIn",
|
|
},
|
|
{
|
|
icon: Youtube,
|
|
href: "https://youtube.com/socialhub",
|
|
ariaLabel: "YouTube",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |