231 lines
11 KiB
TypeScript
231 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="largeSmall"
|
|
background="floatingGradient"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Features", id: "features"},
|
|
{
|
|
name: "Pricing", id: "pricing"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="SocioElevate"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
title="Level Up Your Content Game"
|
|
description="Save 10+ hours a week on content creation while doubling your reach with AI-optimized workflows."
|
|
buttons={[
|
|
{
|
|
text: "Start Elevating", href: "#features"},
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4db9l2", imageAlt: "content creator setup"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=17b8ka", imageAlt: "content creator setup"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u6imqs", imageAlt: "content creator setup"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=becs8e", imageAlt: "content creator setup"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q68zbr", imageAlt: "content creator setup"},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyNine
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "YouTube Title Generator", description: "Craft click-worthy titles that grab attention.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qzklez", titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mt1e31", buttonText: "Try Now"},
|
|
{
|
|
title: "Thumbnail Ideas", description: "AI-generated thumbnail concepts for higher CTR.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4svl47", titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=75axul", buttonText: "Try Now"},
|
|
{
|
|
title: "Viral Topic Finder", description: "Identify trending topics before they peak.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mtr03u", titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=87zzrq", buttonText: "Try Now"},
|
|
{
|
|
title: "Script AI", description: "Write engaging scripts in minutes.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y4mnj7", titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0i9ko5", buttonText: "Try Now"},
|
|
{
|
|
title: "Content Calendar", description: "Seamless scheduling for consistent growth.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wn6268", titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=674uix", buttonText: "Try Now"},
|
|
{
|
|
title: "Reel Idea Generator", description: "Endless inspiration for short-form video.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=b3e5vw", titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z5gfov", buttonText: "Try Now"},
|
|
]}
|
|
title="Everything You Need to Go Viral"
|
|
description="Powerful AI tools designed for creators, built for speed, and focused on growth."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardFive
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
tag="Limited Time Offer"
|
|
plans={[
|
|
{
|
|
id: "starter", tag: "Basic", price: "$19", period: "/mo", description: "Perfect for beginners getting started.", button: {
|
|
text: "Get Started"},
|
|
featuresTitle: "Included Features", features: [
|
|
"YouTube Title Gen", "Script AI", "Reel Ideas"],
|
|
},
|
|
{
|
|
id: "pro", tag: "Pro", price: "$49", period: "/mo", description: "For serious creators scaling up.", button: {
|
|
text: "Go Pro - Lock in 50% Off"},
|
|
featuresTitle: "Everything in Basic, plus:", features: [
|
|
"Viral Topic Finder", "Thumbnail AI", "Content Calendar", "Priority Support"],
|
|
},
|
|
{
|
|
id: "agency", tag: "Agency", price: "$199", period: "/mo", description: "High volume for teams and agencies.", button: {
|
|
text: "Contact Us"},
|
|
featuresTitle: "Everything in Pro, plus:", features: [
|
|
"Unlimited AI Generation", "Team Accounts", "Analytics Deep-Dive"],
|
|
},
|
|
]}
|
|
title="Simple Pricing for Every Creator"
|
|
description="Choose the plan that suits your production volume."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social" data-section="social">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"CreatorHub", "Streamline Media", "ViralFlow", "Trendsetters", "ContentLab", "InfluencerPro", "GrowthMedia"]}
|
|
title="Trusted by Creators Everywhere"
|
|
description="Join a global community of innovators building the future of content."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={true}
|
|
testimonial="SocioElevate completely transformed my content production process. I'm saving hours every day and my channel views have doubled!"
|
|
rating={5}
|
|
author="Sarah J., Tech Creator"
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c2nqsj", alt: "happy creator laptop"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l0f0iw", alt: "young vlogger studio"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=i7sykc", alt: "digital marketing expert"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=351elt", alt: "social media influencer filming"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jnoyyw", alt: "video editor studio"},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Does it support multiple languages?", content: "Yes, SocioElevate supports over 30 languages."},
|
|
{
|
|
id: "2", title: "How does the AI work?", content: "We use advanced machine learning models fine-tuned on viral social data."},
|
|
{
|
|
id: "3", title: "Can I cancel anytime?", content: "Yes, cancel your subscription at any time without questions."},
|
|
{
|
|
id: "4", title: "Do you offer refunds?", content: "We offer a 14-day money-back guarantee."},
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Need more info? Check our FAQs or reach out directly."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
title="Ready to Start Your Journey?"
|
|
description="Sign up today and get your first week on us."
|
|
buttonText="Sign Up Now"
|
|
tag="Get Started"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="SocioElevate"
|
|
columns={[
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About", href: "#"},
|
|
{
|
|
label: "Careers", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{
|
|
label: "Blog", href: "#"},
|
|
{
|
|
label: "Help", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{
|
|
label: "Privacy", href: "#"},
|
|
{
|
|
label: "Terms", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
<div style={{ position: 'fixed', bottom: 20, right: 20, zIndex: 9999 }}>
|
|
<iframe src="https://chatgpt.com/?model=gpt-4" style={{ width: '400px', height: '600px', borderRadius: '16px', boxShadow: '0 10px 25px rgba(0,0,0,0.2)', border: 'none' }} />
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |