Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #1.
This commit is contained in:
224
src/app/page.tsx
224
src/app/page.tsx
@@ -5,22 +5,24 @@ import ReactLenis from "lenis/react";
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import { Users, LayoutGrid, BarChart3, Mail } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="shadow"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
@@ -28,185 +30,87 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Work",
|
||||
id: "portfolio",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Portfolio", id: "portfolio" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Leon Design"
|
||||
brandName="Leon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "glowing-orb",
|
||||
}}
|
||||
logoText="LeonThumbnail"
|
||||
description="Turning clicks into 10M+ views for top creators worldwide."
|
||||
<HeroLogoBillboardSplit
|
||||
logoText="Leon"
|
||||
description="YouTube Thumbnail Architect. Turning clicks into 10M+ views through bold, high-conversion visual design."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Portfolio",
|
||||
href: "#portfolio",
|
||||
},
|
||||
{
|
||||
text: "Work with Me",
|
||||
href: "#contact",
|
||||
},
|
||||
{ text: "View Gallery", href: "#portfolio" },
|
||||
{ text: "Start Project", href: "#contact" }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdD1hXDgi5n61WdlkA73mzvW0Y/a-high-end-youtube-thumbnail-design-show-1774809928827-c3e8c8b1.png"
|
||||
imageAlt="Professional Thumbnail Showcase"
|
||||
mediaAnimation="slide-up"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
layoutOrder="default"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
title="Impact Overview"
|
||||
description="Measurable results that define my work ethic and success."
|
||||
animationType="blur-reveal"
|
||||
metrics={[
|
||||
{ id: "1", icon: BarChart3, title: "Views Generated", value: "10M+" },
|
||||
{ id: "2", icon: LayoutGrid, title: "Thumbnails Designed", value: "500+" },
|
||||
{ id: "3", icon: Users, title: "Happy Clients", value: "80+" }
|
||||
]}
|
||||
textboxLayout="split"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Creative Vision"
|
||||
description="At 19, I craft visual experiences that dominate the YouTube algorithm. My designs are built for high click-through rates."
|
||||
metrics={[
|
||||
{
|
||||
value: "10M+",
|
||||
title: "Views Generated",
|
||||
},
|
||||
{
|
||||
value: "200+",
|
||||
title: "Projects Completed",
|
||||
},
|
||||
]}
|
||||
<MediaAbout
|
||||
title="The Visionary"
|
||||
description="At 19, I've spent thousands of hours analyzing the psychology behind a click. My approach is simple: minimalist design language, maximum visual impact, and data-backed aesthetics."
|
||||
tag="About Me"
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdD1hXDgi5n61WdlkA73mzvW0Y/portrait-of-a-creative-19-year-old-desig-1774809930918-078a29ec.png"
|
||||
mediaAnimation="blur-reveal"
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardOne
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
<ProductCardTwo
|
||||
title="Thumbnail Gallery"
|
||||
description="A showcase of recent thumbnails designed to disrupt feeds and boost CTR."
|
||||
gridVariant="bento-grid"
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split-description"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Gaming Highlight",
|
||||
price: "High CTR",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdD1hXDgi5n61WdlkA73mzvW0Y/professional-gaming-youtube-thumbnail-wi-1774809932660-db5f1c66.png",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Tech Unboxing",
|
||||
price: "High CTR",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdD1hXDgi5n61WdlkA73mzvW0Y/tech-review-youtube-thumbnail-clean-layo-1774809928892-39797f37.png",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Vlog Momentum",
|
||||
price: "High CTR",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdD1hXDgi5n61WdlkA73mzvW0Y/vlog-style-high-energy-youtube-thumbnail-1774809929141-b4c3fbff.png",
|
||||
},
|
||||
{ id: "1", brand: "Gaming", name: "Epic Showdown", price: "Performance", rating: 5, reviewCount: "CTR", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdD1hXDgi5n61WdlkA73mzvW0Y/professional-gaming-youtube-thumbnail-wi-1774809932660-db5f1c66.png" },
|
||||
{ id: "2", brand: "Tech", name: "Unboxing Mastery", price: "Performance", rating: 5, reviewCount: "CTR", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdD1hXDgi5n61WdlkA73mzvW0Y/tech-review-youtube-thumbnail-clean-layo-1774809928892-39797f37.png" },
|
||||
{ id: "3", brand: "Lifestyle", name: "Daily Vibe", price: "Performance", rating: 5, reviewCount: "CTR", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdD1hXDgi5n61WdlkA73mzvW0Y/vlog-style-high-energy-youtube-thumbnail-1774809929141-b4c3fbff.png" },
|
||||
]}
|
||||
title="Portfolio Showcase"
|
||||
description="A curated collection of my top-performing thumbnails."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Available for booking"
|
||||
title="Let's skyrocket your views"
|
||||
description="Ready to give your content the visual edge it deserves? Send a message."
|
||||
buttons={[
|
||||
{
|
||||
text: "Send me an Email",
|
||||
href: "mailto:hello@leon.design",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about my design process."
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What is your typical turnaround time?",
|
||||
content: "Most thumbnails are delivered within 24-48 hours of receiving assets.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do you offer revision rounds?",
|
||||
content: "Yes, I offer up to two rounds of revisions to ensure you're happy with the final product.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "What file formats do you provide?",
|
||||
content: "I provide high-quality PNG and PSD source files for every project.",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Do you work with non-gaming channels?",
|
||||
content: "Absolutely. I design for tech, lifestyle, educational, and business channels as well.",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "How do we start a collaboration?",
|
||||
content: "Send me a message via the contact form or email, and let's discuss your channel goals.",
|
||||
},
|
||||
]}
|
||||
tag="Contact"
|
||||
tagIcon={Mail}
|
||||
title="Let's build something iconic"
|
||||
description="Ready to level up your YouTube performance? Let's discuss your project goals."
|
||||
buttons={[{ text: "Email me", href: "mailto:hello@leon.design" }]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Socials",
|
||||
items: [
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Links",
|
||||
items: [
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "#portfolio",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Work", items: [{ label: "Portfolio", href: "#portfolio" }] },
|
||||
{ title: "Socials", items: [{ label: "Twitter", href: "#" }, { label: "Instagram", href: "#" }] }
|
||||
]}
|
||||
bottomLeftText="© 2024 Leon Design"
|
||||
bottomRightText="Built for Creators"
|
||||
bottomLeftText="© 2024 Leon"
|
||||
bottomRightText="Minimalist Design"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
@@ -12,13 +12,13 @@
|
||||
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffffe6;
|
||||
--primary-cta: #e6e6e6;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #ffffff;
|
||||
--primary-cta-text: #0a0a0a;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta-text: #ffffffe6;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
--accent: #3b82f6;
|
||||
--background-accent: #1a1a1a;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user