160 lines
8.0 KiB
TypeScript
160 lines
8.0 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { TrendingUp, Users, Award, Globe } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="fluid"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="ShortForm"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Partners", id: "partners" }
|
|
]}
|
|
button={{ text: "Get Started", href: "contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Short-Form Content That Drives Real Results"
|
|
description="We create compelling short-form video content optimized for social platforms. From strategy to distribution, we handle everything to maximize your brand's reach and engagement."
|
|
background={{ variant: "plain" }}
|
|
tag="Short-Form Marketing"
|
|
buttons={[
|
|
{ text: "Start Your Campaign", href: "contact" },
|
|
{ text: "View Portfolio", href: "about" }
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU3p49k6zaYdztFFQqJDCJH6Dl/a-minimalist-dashboard-interface-for-sho-1772633550406-74b1b6ac.png?_wi=1"
|
|
imageAlt="Short-form video analytics dashboard"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardThree
|
|
title="Our Services"
|
|
description="End-to-end short-form video production and marketing solutions"
|
|
features={[
|
|
{
|
|
id: "01", title: "Content Creation", description: "Professional short-form video production tailored to your brand voice and audience.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU3p49k6zaYdztFFQqJDCJH6Dl/a-minimalist-workspace-showing-video-edi-1772633549844-548eed55.png", imageAlt: "Video editing workspace"
|
|
},
|
|
{
|
|
id: "02", title: "Strategy & Planning", description: "Data-driven content strategies optimized for maximum engagement and viral potential.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU3p49k6zaYdztFFQqJDCJH6Dl/a-minimalist-strategic-planning-session--1772633550392-0cb7456b.png", imageAlt: "Strategic planning session"
|
|
},
|
|
{
|
|
id: "03", title: "Multi-Platform Distribution", description: "Strategic distribution across TikTok, Instagram Reels, YouTube Shorts, and Snapchat.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU3p49k6zaYdztFFQqJDCJH6Dl/a-modern-digital-distribution-interface--1772633549198-e17d9331.png", imageAlt: "Multi-platform distribution dashboard"
|
|
},
|
|
{
|
|
id: "04", title: "Performance Analytics", description: "Detailed analytics and optimization recommendations to improve content performance.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU3p49k6zaYdztFFQqJDCJH6Dl/a-minimalist-dashboard-interface-for-sho-1772633550406-74b1b6ac.png?_wi=2", imageAlt: "Analytics dashboard"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
gridVariant="two-columns-alternating-heights"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
title="Trusted by Leading Brands to Drive Growth Through Short-Form Video"
|
|
metrics={[
|
|
{ icon: TrendingUp, label: "Average Engagement Increase", value: "340%" },
|
|
{ icon: Users, label: "Campaigns Completed", value: "150+" },
|
|
{ icon: Award, label: "Industry Awards", value: "12" },
|
|
{ icon: Globe, label: "Followers Generated", value: "50M+" }
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="partners" data-section="partners">
|
|
<SocialProofOne
|
|
title="Trusted by Industry Leaders"
|
|
description="Work with brands that understand the power of short-form content"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-vector/gradient-technology-logo_52683-8526.jpg", "http://img.b2bpic.net/free-vector/abstract-logo-gradient-style_23-2148135214.jpg", "http://img.b2bpic.net/free-vector/geometric-harmony-hills-private-school-logo-template_742173-18879.jpg", "http://img.b2bpic.net/free-vector/geometric-young-creative-agency-logo-template_742173-17664.jpg", "http://img.b2bpic.net/free-vector/technology-logo-template-with-abstract-shapes_23-2148240848.jpg", "http://img.b2bpic.net/free-vector/professional-business-card-with-abstract-shapes_23-2147947455.jpg", "http://img.b2bpic.net/free-vector/corporative-logo-design_1057-541.jpg"
|
|
]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get Started"
|
|
title="Ready to Elevate Your Brand?"
|
|
description="Let's create short-form video content that resonates with your audience and drives measurable results. Reach out today to discuss your project."
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Contact Us"
|
|
termsText="We respect your privacy. Unsubscribe at any time."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Content Creation", href: "#services" },
|
|
{ label: "Strategy", href: "#services" },
|
|
{ label: "Distribution", href: "#services" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Work", href: "#services" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Platforms", items: [
|
|
{ label: "TikTok", href: "#" },
|
|
{ label: "Instagram", href: "#" },
|
|
{ label: "YouTube", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2025 ShortForm. All rights reserved."
|
|
bottomRightText="Crafted with precision"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|