Files
4f0da2e7-6079-4df9-87cf-e13…/src/app/page.tsx
2026-04-22 20:27:32 +00:00

239 lines
10 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="medium"
sizing="mediumSizeLargeTitles"
background="aurora"
cardStyle="glass-elevated"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Features", id: "features"},
{
name: "Showcase", id: "metrics"},
{
name: "Testimonials", id: "testimonials"},
{
name: "FAQ", id: "faq"},
]}
brandName="EditFlow"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{
variant: "plain"}}
title="Edit Like A Pro, Instantly."
description="Unleash your creativity with AI-powered video editing tools. Create, edit, and share high-quality content in seconds."
buttons={[
{
text: "Start Editing", href: "#"},
]}
imageSrc="http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038907.jpg"
imageAlt="AI-powered video editing dashboard"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smart-watch_23-2150201853.jpg", alt: "User 1"},
{
src: "http://img.b2bpic.net/free-photo/artist-using-tablet-stylus-pen_23-2152007744.jpg", alt: "User 2"},
{
src: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg", alt: "User 3"},
{
src: "http://img.b2bpic.net/free-photo/circle-round-badge-banner-vector_53876-120995.jpg", alt: "User 4"},
{
src: "http://img.b2bpic.net/free-photo/dynamic-light-painting-background_23-2149679076.jpg", alt: "User 5"},
]}
avatarText="Join 10M+ creative professionals"
marqueeItems={[
{
type: "text", text: "Ultra-Fast Rendering"},
{
type: "text", text: "AI-Powered Enhancements"},
{
type: "text", text: "Cloud Sync"},
{
type: "text", text: "4K Export Support"},
{
type: "text", text: "Intuitive Workflow"},
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyThree
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
id: "f1", title: "Smart AI Cutting", tags: [
"AI", "Speed"],
imageSrc: "http://img.b2bpic.net/free-photo/close-up-retouching-software-touch-screen-computer-studio-hands-photographer-editing-pictures-with-professional-technology-photography-project-retouch-media-editor_482257-34139.jpg"},
{
id: "f2", title: "Cinematic Color Grade", tags: [
"Pro", "Color"],
imageSrc: "http://img.b2bpic.net/free-photo/photographer-using-professional-photo-editing-tools-close-up-shot-pc-display_482257-82193.jpg"},
{
id: "f3", title: "Multi-Layer Exports", tags: [
"Output", "Quality"],
imageSrc: "http://img.b2bpic.net/free-photo/pause-icon-multimedia-entertainment-perforated-paper_53876-31067.jpg"},
]}
title="Professional Tools, Simple Interface"
description="Everything you need to produce cinematic content without the complexity of traditional editors."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{
id: "m1", value: "10M+", title: "Creators", items: [
"Active creators", "Global community"],
},
{
id: "m2", value: "50M+", title: "Projects", items: [
"Successfully exported", "High-quality renders"],
},
{
id: "m3", value: "99.9%", title: "Uptime", items: [
"Reliable cloud sync", "Always available"],
},
]}
title="Global Impact"
description="Join millions of creators transforming the media landscape."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "1", name: "Sarah J.", role: "Film Producer", testimonial: "The best AI editor I've ever used. Incredibly fast.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-movie-producer_23-2148915842.jpg"},
{
id: "2", name: "Marcus C.", role: "YouTuber", testimonial: "Simplified my workflow by hours every single week.", imageSrc: "http://img.b2bpic.net/free-photo/female-editor-designer-retouches-photos-dual-monitors-desktop_482257-126858.jpg"},
{
id: "3", name: "Elena R.", role: "Creative Director", testimonial: "Studio-quality results directly in my browser.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-with-microphone_23-2149200039.jpg"},
{
id: "4", name: "David K.", role: "Editor", testimonial: "Intuitive, powerful, and perfectly responsive.", imageSrc: "http://img.b2bpic.net/free-photo/happy-young-pretty-woman-listening-music-chatting-by-phone_171337-7510.jpg"},
{
id: "5", name: "Lila P.", role: "Social Media Manager", testimonial: "My content has never looked this professional.", imageSrc: "http://img.b2bpic.net/free-photo/woman-looks-through-blinds-early-morning-sunlight_169016-17897.jpg"},
]}
title="Trusted by Creators"
description="See why professional editors worldwide choose our platform."
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="split"
useInvertedBackground={false}
names={[
"Netflix", "YouTube", "Adobe", "Disney", "Amazon", "Apple", "Spotify"]}
title="Used by Leading Media Houses"
description="Industry leaders rely on our infrastructure for their creative output."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "q1", title: "Is it free to start?", content: "Yes, our free tier gives you access to core editing features, 720p exports, and cloud storage for up to 3 projects, allowing you to master your workflow with no upfront cost."},
{
id: "q2", title: "Do I need a powerful computer?", content: "No, our cloud processing handles the heavy work."},
{
id: "q3", title: "Can I export in 4K?", content: "Absolutely, all tiers support 4K exports."},
]}
title="Frequently Asked Questions"
description="Get quick answers to common questions about our platform."
faqsAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/filmmaker-holding-blank-white-clapper-board_114579-54032.jpg"
imageAlt="FAQ Support"
mediaAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{
variant: "plain"}}
tag="Join Us"
title="Start Your First Pro Project"
description="Claim your free trial now and unlock professional-grade editing tools instantly. Sign up today—limited spots available!"
buttonText="Get Started Now"
mediaAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/smiling-positive-brunette-female-eyeglasses-taking-pictures-with-professional-photo-camera-isolated-grey-background_613910-7166.jpg"
imageAlt="Contact Us"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="EditFlow"
columns={[
{
title: "Product", items: [
{
label: "Features", href: "#features"},
{
label: "Pricing", href: "#"},
],
},
{
title: "Company", items: [
{
label: "About", href: "#"},
{
label: "Careers", href: "#"},
],
},
{
title: "Legal", items: [
{
label: "Privacy", href: "#"},
{
label: "Terms", href: "#"},
],
},
]}
copyrightText="© 2024 EditFlow Inc."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}