Merge version_2 into main

Update src/app/page.tsx
2026-03-29 18:48:07 +00:00 · 2026-03-29 18:48:04 +00:00 · 2026-03-29 18:47:39 +00:00 · 2026-03-29 18:47:33 +00:00 · 2026-03-29 18:47:32 +00:00
2 changed files with 69 additions and 164 deletions
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,24 +3,25 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 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 +29,89 @@ 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"
+      useInvertedBackground={false}
    />
  </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"
      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."
+      useInvertedBackground={false}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
+      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" }}
      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.",
-        },
-      ]}
    />
  </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>
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -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);
Author	SHA1	Message	Date
bender	a677ce7630	Merge version_2 into main Merge version_2 into main	2026-03-29 18:48:07 +00:00
bender	707484efbe	Update src/app/page.tsx	2026-03-29 18:48:04 +00:00
bender	6732fa3cfc	Merge version_2 into main Merge version_2 into main	2026-03-29 18:47:39 +00:00
bender	f76e530008	Update src/app/styles/variables.css	2026-03-29 18:47:33 +00:00
bender	2dc25848ca	Update src/app/page.tsx	2026-03-29 18:47:32 +00:00