263 lines
8.5 KiB
TypeScript
263 lines
8.5 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { Mail } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="medium"
|
|
background="noise"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Portfolio",
|
|
id: "portfolio",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="LyricalEdit"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="LYRICAL EDIT"
|
|
description="Crafting cinematic lyric experiences that turn every beat into a visual story. Specializing in kinetic typography and immersive music motion design."
|
|
buttons={[
|
|
{
|
|
text: "View My Work",
|
|
href: "#portfolio",
|
|
},
|
|
{
|
|
text: "Let's Collaborate",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bf8QIBGt3Oe4FVAr82WBvu3ihG/cinematic-neon-lyric-video-edit-display--1774868795266-7ab3e533.png?_wi=1"
|
|
imageAlt="Cinematic neon lyric video edit display with glowing text animation on a dark music studio background."
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={true}
|
|
title="Bringing Lyrics to Life"
|
|
description={[
|
|
"I don't just add text to videos; I build visual identities for your music. With a background in motion design and deep passion for audio-visual synchronization, I translate feelings into motion.",
|
|
"Every edit is tailored to capture the unique rhythm and vibe of your track, ensuring your fans get an immersive experience from the first line to the last.",
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<FeatureCardTwentyFour
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "f1",
|
|
title: "Midnight Haze",
|
|
author: "Soundscape Collective",
|
|
description: "Experimental kinetic typography using glitch aesthetic and neon purple light pulses.",
|
|
tags: [
|
|
"Motion Graphics",
|
|
"Lyrics",
|
|
],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bf8QIBGt3Oe4FVAr82WBvu3ihG/dynamic-music-video-edit-screenshot-with-1774868795732-ff2ac629.png?_wi=1",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "Neon Pulse",
|
|
author: "Beat Maker X",
|
|
description: "High-energy rhythmic lyric video syncing text bounces to bass kicks and heavy synths.",
|
|
tags: [
|
|
"Rhythmic",
|
|
"Glow",
|
|
],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bf8QIBGt3Oe4FVAr82WBvu3ihG/abstract-music-visualizer-screen-with-fl-1774868797019-adc240d8.png?_wi=1",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "Velvet Echo",
|
|
author: "Dreamy Vocalist",
|
|
description: "Atmospheric soft typography flowing with cinematic slow-motion visuals for a moody track.",
|
|
tags: [
|
|
"Cinematic",
|
|
"Elegant",
|
|
],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bf8QIBGt3Oe4FVAr82WBvu3ihG/atmospheric-cinematic-video-edit-frame-w-1774868795244-3f87fd7c.png?_wi=1",
|
|
},
|
|
]}
|
|
title="Selected Works"
|
|
description="Showcasing some of my most impactful collaborations with independent artists and labels."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
animationType="slide-up"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "q1",
|
|
title: "What's your typical turnaround time?",
|
|
content: "Depending on project complexity, most lyric edits are delivered within 5-7 business days.",
|
|
},
|
|
{
|
|
id: "q2",
|
|
title: "Can you match a specific art style?",
|
|
content: "Absolutely! I specialize in mimicking various aesthetics, from handwritten notes to high-fashion glitch.",
|
|
},
|
|
{
|
|
id: "q3",
|
|
title: "Do you offer revisions?",
|
|
content: "Yes, every package includes two rounds of revisions to ensure you're 100% happy with the rhythm and flow.",
|
|
},
|
|
]}
|
|
ctaTitle="Start Your Project"
|
|
ctaDescription="Ready to bring your lyrics to life? Send me a message and let's discuss your next visual masterpiece."
|
|
ctaButton={{
|
|
text: "Contact Me",
|
|
href: "#",
|
|
}}
|
|
ctaIcon={Mail}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardSixteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
title="Artist Voices"
|
|
description="See what musicians and labels are saying about my motion graphics and lyric video services."
|
|
kpiItems={[
|
|
{
|
|
value: "100+",
|
|
label: "Videos Edited",
|
|
},
|
|
{
|
|
value: "50+",
|
|
label: "Happy Artists",
|
|
},
|
|
{
|
|
value: "10M+",
|
|
label: "Total Views",
|
|
},
|
|
]}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Julian V.",
|
|
role: "Independent Artist",
|
|
company: "Solo Records",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bf8QIBGt3Oe4FVAr82WBvu3ihG/dynamic-music-video-edit-screenshot-with-1774868795732-ff2ac629.png?_wi=2",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Sarah Chen",
|
|
role: "Producer",
|
|
company: "SoundCloud Collective",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bf8QIBGt3Oe4FVAr82WBvu3ihG/abstract-music-visualizer-screen-with-fl-1774868797019-adc240d8.png?_wi=2",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Marcus Thorne",
|
|
role: "Label Manager",
|
|
company: "Dreamy Beats",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bf8QIBGt3Oe4FVAr82WBvu3ihG/atmospheric-cinematic-video-edit-frame-w-1774868795244-3f87fd7c.png?_wi=2",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "Luna Ray",
|
|
role: "Vocalist",
|
|
company: "Night Sky Studio",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bf8QIBGt3Oe4FVAr82WBvu3ihG/cinematic-neon-lyric-video-edit-display--1774868795266-7ab3e533.png?_wi=2",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="LYRICAL EDIT"
|
|
columns={[
|
|
{
|
|
title: "Navigate",
|
|
items: [
|
|
{
|
|
label: "Home",
|
|
href: "#hero",
|
|
},
|
|
{
|
|
label: "Portfolio",
|
|
href: "#portfolio",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Connect",
|
|
items: [
|
|
{
|
|
label: "Instagram",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "TikTok",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Twitter",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 LyricalEdit. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|