Merge version_1 into main #1

Merged
bender merged 1 commits from version_1 into main 2026-04-18 05:56:51 +00:00

View File

@@ -16,375 +16,164 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Home",
id: "home",
},
{
name: "About",
id: "about",
},
{
name: "Projects",
id: "projects",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="SONIC"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "Home", id: "home" },
{ name: "About", id: "about" },
{ name: "Projects", id: "projects" },
{ name: "Contact", id: "contact" },
]}
brandName="SONIC"
/>
</div>
<div id="home" data-section="home">
<HeroBillboard
background={{
variant: "sparkles-gradient",
}}
title="SONIC: Professional Video Editor"
description="Turning raw footage into cinematic experiences. Specialist in Premiere Pro, DaVinci Resolve, After Effects, and CapCut."
buttons={[
{
text: "View My Work",
href: "#projects",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/remotely-working-company-financial-advisor-analyzing-statistical-graphs_482257-92945.jpg"
imageAlt="video editing suite dark theme"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/female-videographer-making-movie-montage-green-screen-display_482257-125140.jpg",
alt: "Female videographer making a movie montage next to green screen display",
},
{
src: "http://img.b2bpic.net/free-photo/creative-team-improving-footage-visuals_482257-121439.jpg",
alt: "Creative team improving footage visuals",
},
{
src: "http://img.b2bpic.net/free-photo/young-woman-video-editor-working-with-dual-monitors-creative-agency_482257-126903.jpg",
alt: "Young woman video editor working with dual monitors in creative agency",
},
{
src: "http://img.b2bpic.net/free-photo/electronic-gadgets-used-podcasting_482257-91517.jpg",
alt: "Electronic gadgets used for podcasting",
},
{
src: "http://img.b2bpic.net/free-photo/side-view-woman-working-as-photographer_23-2150506075.jpg",
alt: "Side view woman working as a photographer",
},
]}
avatarText="Trusted by 500+ creators"
marqueeItems={[
{
type: "text",
text: "4K Editing",
},
{
type: "text",
text: "Color Grade",
},
{
type: "text",
text: "Motion Graphics",
},
{
type: "text",
text: "VFX Design",
},
{
type: "text",
text: "Post Production",
},
]}
/>
</div>
<div id="home" data-section="home">
<HeroBillboard
background={{ variant: "sparkles-gradient" }}
title="SONIC: Professional Video Editor"
description="Turning raw footage into cinematic experiences. Specialist in Premiere Pro, DaVinci Resolve, After Effects, and CapCut."
buttons={[{ text: "View My Work", href: "#projects" }]}
imageSrc="http://img.b2bpic.net/free-photo/remotely-working-company-financial-advisor-analyzing-statistical-graphs_482257-92945.jpg"
imageAlt="video editing suite dark theme"
mediaAnimation="slide-up"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/female-videographer-making-movie-montage-green-screen-display_482257-125140.jpg", alt: "Female videographer making a movie montage next to green screen display" },
{ src: "http://img.b2bpic.net/free-photo/creative-team-improving-footage-visuals_482257-121439.jpg", alt: "Creative team improving footage visuals" },
{ src: "http://img.b2bpic.net/free-photo/young-woman-video-editor-working-with-dual-monitors-creative-agency_482257-126903.jpg", alt: "Young woman video editor working with dual monitors in creative agency" },
{ src: "http://img.b2bpic.net/free-photo/electronic-gadgets-used-podcasting_482257-91517.jpg", alt: "Electronic gadgets used for podcasting" },
{ src: "http://img.b2bpic.net/free-photo/side-view-woman-working-as-photographer_23-2150506075.jpg", alt: "Side view woman working as a photographer" }
]}
avatarText="Trusted by 500+ creators"
marqueeItems={[{ type: "text", text: "4K Editing" }, { type: "text", text: "Color Grade" }, { type: "text", text: "Motion Graphics" }, { type: "text", text: "VFX Design" }, { type: "text", text: "Post Production" }]}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={false}
title="Crafting Visual Stories"
description="With a keen eye for rhythm, color, and pacing, I help creators and brands tell compelling stories. Whether it's rapid-fire social media shorts or cinematic long-form narrative, I deliver high-quality, polished results."
metrics={[
{
value: "500+",
title: "Projects Edited",
},
{
value: "4",
title: "Editing Suites",
},
{
value: "24/7",
title: "Dedication",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/portrait-smart-blonde-female-photographer-white-blouse-black-leather-jacket-posing-with-camera-studio-isolated-gray-background_613910-18599.jpg"
imageAlt="video editor creative professional"
mediaAnimation="blur-reveal"
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={false}
title="Crafting Visual Stories"
description="With a keen eye for rhythm, color, and pacing, I help creators and brands tell compelling stories. Whether it's rapid-fire social media shorts or cinematic long-form narrative, I deliver high-quality, polished results."
metrics={[{ value: "500+", title: "Projects Edited" }, { value: "4", title: "Editing Suites" }, { value: "24/7", title: "Dedication" }]}
imageSrc="http://img.b2bpic.net/free-photo/portrait-smart-blonde-female-photographer-white-blouse-black-leather-jacket-posing-with-camera-studio-isolated-gray-background_613910-18599.jpg"
imageAlt="video editor creative professional"
mediaAnimation="blur-reveal"
metricsAnimation="slide-up"
/>
</div>
<div id="projects" data-section="projects">
<ProductCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
products={[
{
id: "p1",
brand: "Cinematic",
name: "Showreel 2024",
price: "High End",
rating: 5,
reviewCount: "New",
imageSrc: "http://img.b2bpic.net/free-photo/videographer-using-computer-with-chroma-key-mock-up-isolated-display-editing-video-audio-footage_482257-3410.jpg",
},
{
id: "p2",
brand: "Social",
name: "Fast Cuts",
price: "Trending",
rating: 5,
reviewCount: "New",
imageSrc: "http://img.b2bpic.net/free-photo/photographer-capturing-photos-world-photography-day-war-zone-conflict-area_23-2151671634.jpg",
},
{
id: "p3",
brand: "Motion",
name: "FX Intro",
price: "Vibrant",
rating: 5,
reviewCount: "New",
imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-blogger-records-video-her-room-has-camera-coffee-table-shows-eyeshadow-palette_1258-254172.jpg",
},
{
id: "p4",
brand: "VFX",
name: "Composition",
price: "Complex",
rating: 5,
reviewCount: "New",
imageSrc: "http://img.b2bpic.net/free-photo/young-adult-losing-shooting-video-games-strategy-feeling-frustrated-angry-about-lost-competition-game-sad-person-being-irritated-after-shooter-gaming-lose-gathering-with-friends_482257-47378.jpg",
},
{
id: "p5",
brand: "Grade",
name: "Color Grade",
price: "Cinematic",
rating: 5,
reviewCount: "New",
imageSrc: "http://img.b2bpic.net/free-photo/isolated-green-screen-running-laptop-fintech-annual-trends_482257-126576.jpg",
},
{
id: "p6",
brand: "Shorts",
name: "Edit Pack",
price: "Fast",
rating: 5,
reviewCount: "New",
imageSrc: "http://img.b2bpic.net/free-photo/photography-negative-background_23-2148133196.jpg",
},
]}
title="Selected Works"
description="Explore the range of projects I have crafted."
/>
</div>
<div id="projects" data-section="projects">
<ProductCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
title="Selected Works"
description="Explore the range of projects I have crafted."
products={[
{ id: "p1", brand: "Cinematic", name: "Showreel 2024", price: "High End", rating: 5, reviewCount: "New", imageSrc: "http://img.b2bpic.net/free-photo/videographer-using-computer-with-chroma-key-mock-up-isolated-display-editing-video-audio-footage_482257-3410.jpg" },
{ id: "p2", brand: "Social", name: "Fast Cuts", price: "Trending", rating: 5, reviewCount: "New", imageSrc: "http://img.b2bpic.net/free-photo/photographer-capturing-photos-world-photography-day-war-zone-conflict-area_23-2151671634.jpg" },
{ id: "p3", brand: "Motion", name: "FX Intro", price: "Vibrant", rating: 5, reviewCount: "New", imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-blogger-records-video-her-room-has-camera-coffee-table-shows-eyeshadow-palette_1258-254172.jpg" },
{ id: "p4", brand: "VFX", name: "Composition", price: "Complex", rating: 5, reviewCount: "New", imageSrc: "http://img.b2bpic.net/free-photo/young-adult-losing-shooting-video-games-strategy-feeling-frustrated-angry-about-lost-competition-game-sad-person-being-irritated-after-shooter-gaming-lose-gathering-with-friends_482257-47378.jpg" },
{ id: "p5", brand: "Grade", name: "Color Grade", price: "Cinematic", rating: 5, reviewCount: "New", imageSrc: "http://img.b2bpic.net/free-photo/isolated-green-screen-running-laptop-fintech-annual-trends_482257-126576.jpg" },
{ id: "p6", brand: "Shorts", name: "Edit Pack", price: "Fast", rating: 5, reviewCount: "New", imageSrc: "http://img.b2bpic.net/free-photo/photography-negative-background_23-2148133196.jpg" }
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardFourteen
useInvertedBackground={false}
title="Technical Expertise"
tag="Capabilities"
metrics={[
{
id: "m1",
value: "Premiere",
description: "Expert Narrative Editing",
},
{
id: "m2",
value: "DaVinci",
description: "Advanced Color Grading",
},
{
id: "m3",
value: "AfterEff",
description: "Dynamic Motion Graphics",
},
{
id: "m4",
value: "CapCut",
description: "Mobile Optimized Edits",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardFourteen
useInvertedBackground={false}
title="Technical Expertise"
tag="Capabilities"
metrics={[
{ id: "m1", value: "Premiere", description: "Expert Narrative Editing" },
{ id: "m2", value: "DaVinci", description: "Advanced Color Grading" },
{ id: "m3", value: "AfterEff", description: "Dynamic Motion Graphics" },
{ id: "m4", value: "CapCut", description: "Mobile Optimized Edits" }
]}
metricsAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Alex R.",
handle: "@creator",
testimonial: "SONIC transformed my raw footage into something magical.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-mature-businessman-looking-away_23-2147955371.jpg",
},
{
id: "2",
name: "Sarah K.",
handle: "@influencer",
testimonial: "Fast, professional, and exactly the style I wanted.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrit-trendy-handsome-man-sunglasses-photo-studio_613910-5880.jpg",
},
{
id: "3",
name: "Mark D.",
handle: "@director",
testimonial: "The attention to detail in the color grading is unparalleled.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/male-director-looking-script-his-new-movie_23-2149066359.jpg",
},
{
id: "4",
name: "Emily V.",
handle: "@brand",
testimonial: "SONIC is my go-to editor for all high-stakes projects.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-airport-terminal_107420-85119.jpg",
},
{
id: "5",
name: "James L.",
handle: "@gamer",
testimonial: "The pacing on my gaming shorts is absolutely spot on.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-content-creator_23-2151912394.jpg",
},
]}
showRating={true}
title="Client Feedback"
description="What creators have to say about the final edits."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={false}
showRating={true}
title="Client Feedback"
description="What creators have to say about the final edits."
testimonials={[
{ id: "1", name: "Alex R.", handle: "@creator", testimonial: "SONIC transformed my raw footage into something magical.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-mature-businessman-looking-away_23-2147955371.jpg" },
{ id: "2", name: "Sarah K.", handle: "@influencer", testimonial: "Fast, professional, and exactly the style I wanted.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrit-trendy-handsome-man-sunglasses-photo-studio_613910-5880.jpg" },
{ id: "3", name: "Mark D.", handle: "@director", testimonial: "The attention to detail in the color grading is unparalleled.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/male-director-looking-script-his-new-movie_23-2149066359.jpg" },
{ id: "4", name: "Emily V.", handle: "@brand", testimonial: "SONIC is my go-to editor for all high-stakes projects.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-airport-terminal_107420-85119.jpg" },
{ id: "5", name: "James L.", handle: "@gamer", testimonial: "The pacing on my gaming shorts is absolutely spot on.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-content-creator_23-2151912394.jpg" }
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "How do you handle footage delivery?",
content: "I use secure cloud storage links (Drive, Dropbox) for all footage exchanges.",
},
{
id: "f2",
title: "Which software do you use?",
content: "I specialize in the full Adobe Creative Suite, DaVinci Resolve, and CapCut.",
},
{
id: "f3",
title: "Can you handle complex motion graphics?",
content: "Yes, I use After Effects to create high-end visual effects and dynamic text.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-specialized-photographer-working-studio_23-2150247207.jpg"
imageAlt="video editor creative professional"
title="Questions & Answers"
description="Information regarding the workflow and collaboration process."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={false}
title="Questions & Answers"
description="Information regarding the workflow and collaboration process."
faqsAnimation="slide-up"
faqs={[
{ id: "f1", title: "How do you handle footage delivery?", content: "I use secure cloud storage links (Drive, Dropbox) for all footage exchanges." },
{ id: "f2", title: "Which software do you use?", content: "I specialize in the full Adobe Creative Suite, DaVinci Resolve, and CapCut." },
{ id: "f3", title: "Can you handle complex motion graphics?", content: "Yes, I use After Effects to create high-end visual effects and dynamic text." }
]}
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-specialized-photographer-working-studio_23-2150247207.jpg"
imageAlt="video editor creative professional"
/>
</div>
<div id="proof" data-section="proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"Adobe Premiere",
"DaVinci Resolve",
"After Effects",
"CapCut Pro",
"4K HDR",
"Motion Graphics",
"Color Grading",
]}
title="Software Tools"
description="Tools of the trade."
/>
</div>
<div id="proof" data-section="proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={["Adobe Premiere", "DaVinci Resolve", "After Effects", "CapCut Pro", "4K HDR", "Motion Graphics", "Color Grading"]}
title="Software Tools"
description="Tools of the trade."
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "sparkles-gradient",
}}
tag="Let's Collaborate"
title="Ready to bring your vision to life?"
description="Send a message to discuss your next project timeline and requirements."
buttons={[
{
text: "Email Me",
href: "mailto:sonic@editor.com",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{ variant: "sparkles-gradient" }}
tag="Let's Collaborate"
title="Ready to bring your vision to life?"
description="Send a message to discuss your next project timeline and requirements."
buttons={[{ text: "Email Me", href: "mailto:sonic@editor.com" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Portfolio",
items: [
{
label: "Recent Work",
href: "#projects",
},
{
label: "Testimonials",
href: "#testimonials",
},
],
},
{
title: "Connect",
items: [
{
label: "Email",
href: "mailto:sonic@editor.com",
},
{
label: "Twitter",
href: "#",
},
],
},
]}
logoText="SONIC"
copyrightText="© 2025 SONIC Edits"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{ title: "Portfolio", items: [{ label: "Recent Work", href: "#projects" }, { label: "Testimonials", href: "#testimonials" }] },
{ title: "Connect", items: [{ label: "Email", href: "mailto:sonic@editor.com" }, { label: "Twitter", href: "#" }] }
]}
logoText="SONIC"
copyrightText="© 2025 SONIC Edits"
/>
</div>
</ReactLenis>
</ThemeProvider>
);