Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -6,11 +6,12 @@ import BlogCardOne from '@/components/sections/blog/BlogCardOne';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
+import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
 import TextAbout from '@/components/sections/about/TextAbout';
+import { LayoutGrid, FileText, BarChart3, Settings, User } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -18,13 +19,13 @@ export default function LandingPage() {
         defaultButtonVariant="icon-arrow"
         defaultTextAnimation="reveal-blur"
         borderRadius="soft"
-        contentWidth="small"
+        contentWidth="medium"
-        sizing="largeSmallSizeMediumTitles"
+        sizing="largeSizeMediumTitles"
-        background="grid"
+        background="noise"
-        cardStyle="solid"
+        cardStyle="glass-depth"
-        primaryButtonStyle="double-inset"
+        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
-        headingFontWeight="normal"
+        headingFontWeight="extrabold"
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
@@ -41,11 +42,23 @@ export default function LandingPage() {
         </div>
 
         <div id="home" data-section="home">
-      <HeroLogo
+          <HeroBillboardDashboard
-      logoText="MATÍAS LANFRANCONI"
+            title="Premium Digital Craftsmanship"
-      description="Web development for the modern age. Minimalist, premium, and built to convert."
+            description="Minimalist high-impact web design for modern brands."
-      buttons={[{ text: "View Portfolio" }, { text: "Get Started" }]}
+            background={{ variant: "plain" }}
-      className="py-20"
+            buttons={[{ text: "View Work" }, { text: "Hire Me" }]}
+            dashboard={{
+              title: "Project Metrics", stats: [
+                  { title: "Conversion", description: "Per visit", values: [85, 92, 98] },
+                  { title: "Efficiency", description: "Per process", values: [70, 75, 80] },
+                  { title: "Performance", description: "Per load", values: [90, 95, 99] }
+              ],
+              logoIcon: LayoutGrid,
+              sidebarItems: [{ icon: LayoutGrid, active: true }, { icon: FileText, active: false }, { icon: BarChart3, active: false }, { icon: Settings, active: false }],
+              listItems: [{ icon: User, title: "New Lead", status: "Active" }, { icon: FileText, title: "Project Alpha", status: "Pending" }],
+              buttons: [{ text: "Export" }, { text: "Refresh" }],
+              imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-with-computer_23-2149930993.jpg"
+            }}
           />
         </div>
 
@@ -58,31 +71,33 @@ export default function LandingPage() {
         </div>
 
         <div id="services" data-section="services">
-      <FeatureCardTwentySeven
+          <FeatureCardTwentyOne
-      animationType="slide-up"
+            title="Core Services"
-      textboxLayout="split"
+            description="Specialized digital expertise to accelerate your business growth."
-      title="Services"
+            accordionItems={[
-      description="Professional web solutions designed to scale with your business."
+              { id: "s1", title: "Web Design", content: "Premium minimalist aesthetic, custom built for your brand identity." },
-      useInvertedBackground={false}
+              { id: "s2", title: "E-Commerce", content: "High-performance shop architecture optimized for conversion." },
-      features={[
+              { id: "s3", title: "Performance", content: "Lightning-fast load speeds for optimal user experience." },
-        { id: "s1", title: "Web Design", descriptions: ["Premium aesthetic, custom built."] },
+              { id: "s4", title: "Security", content: "Robust backend protection and scalable infrastructure security." }
-        { id: "s2", title: "E-Commerce", descriptions: ["Scalable shop solutions."] },
-        { id: "s3", title: "Performance", descriptions: ["Fast, reliable loading speeds."] },
-        { id: "s4", title: "Security", descriptions: ["Robust infrastructure protection."] },
             ]}
+            imageSrc="http://img.b2bpic.net/free-photo/gaming-gear-desk-concept_23-2148734472.jpg?_wi=1"
+            useInvertedBackground={false}
+            mediaAnimation="blur-reveal"
           />
         </div>
 
         <div id="game-dev" data-section="game-dev">
-      <ProductCardTwo
+          <ProductCardOne
-      animationType="slide-up"
+            title="Professional Gaming & Pixel Art"
+            description="Custom digital assets and interactive experiences with a dark, professional aesthetic."
+            gridVariant="asymmetric-60-wide-40-narrow"
+            animationType="blur-reveal"
             textboxLayout="split"
-      gridVariant="bento-grid"
+            useInvertedBackground={false}
-      useInvertedBackground={true}
-      title="Game Development Portfolio"
-      description="Professional-grade interactive experiences with a pixel-art professional aesthetic."
             products={[
-        { id: "p1", brand: "Indie", name: "Retro Quest", price: "$49", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-with-computer_23-2149930993.jpg" }
+              { id: "p1", name: "Cyber Pixel Quest", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/gaming-gear-desk-concept_23-2148734472.jpg?_wi=2" },
+              { id: "p2", name: "Retro Asset Pack", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/gaming-gear-desk-concept_23-2148734472.jpg?_wi=3" },
+              { id: "p3", name: "Interactive Logic", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/gaming-gear-desk-concept_23-2148734472.jpg?_wi=4" }
             ]}
           />
         </div>
@@ -90,15 +105,14 @@ export default function LandingPage() {
         <div id="why-me" data-section="why-me">
           <FaqSplitText
             useInvertedBackground={false}
+            sideTitle="Más que una web."
+            sideDescription="Entiendo la tecnología como un vehículo de ventas, no solo una cara bonita."
             faqs={[
-        { id: "f1", title: "Experiencia en conversión y UX", content: "Optimizamos cada elemento para mejorar el rendimiento de ventas." },
+              { id: "f1", title: "Conversión y UX", content: "Cada píxel está diseñado para guiar al usuario hacia la acción." },
-        { id: "f2", title: "Sitios rápidos y seguros", content: "Velocidad de carga y protección constante ante amenazas." },
+              { id: "f2", title: "Sitios de Alta Velocidad", content: "Infraestructura técnica optimizada para carga inmediata." },
-        { id: "f3", title: "Diseño adaptable", content: "Perfecto en cualquier dispositivo, móvil o escritorio." },
+              { id: "f3", title: "Diseño Adaptativo", content: "Experiencia consistente en todos los tamaños de pantalla." },
-        { id: "f4", title: "Comunicación clara", content: "Soporte personalizado durante todo el proceso." },
             ]}
-      sideTitle="Tu web necesita más que un diseño bonito."
+            faqsAnimation="blur-reveal"
-      sideDescription="Cuando diseñás un sitio web, no solo necesitás que se vea bien — necesitás que funcione. Enfoco cada proyecto con mentalidad de marketing."
-      faqsAnimation="slide-up"
           />
         </div>
 
@@ -108,25 +122,22 @@ export default function LandingPage() {
             textboxLayout="split"
             useInvertedBackground={false}
             title="Mis últimos trabajos"
-      description="Explora algunos de mis proyectos más recientes."
+            description="Explora una selección de proyectos destacados."
             blogs={[
-        {
+              { id: "b1", category: "Web Design", title: "Indie Studio Launch", excerpt: "Landing page para Steam.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345406.jpg?_wi=1", authorName: "Matías L.", authorAvatar: "", date: "2024" },
-          id: "b1",          category: "Web Design",          title: "Landing Page para Indie Studio",          excerpt: "Sitio optimizado para campaña Steam.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-working-floor-from-home-with-device_23-2149208592.jpg",          authorName: "Matías L.",          authorAvatar: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345406.jpg",          date: "2024"},
+              { id: "b2", category: "E-Commerce", title: "Shopify Redesign", excerpt: "Aumento de conversión del 30%.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345406.jpg?_wi=2", authorName: "Matías L.", authorAvatar: "", date: "2024" }
-        {
-          id: "b2",          category: "E-Commerce",          title: "Boutique Online",          excerpt: "Diseño elegante para venta de lujo.",          imageSrc: "http://img.b2bpic.net/free-photo/people-look-clothing-kiosk-service_482257-89749.jpg",          authorName: "Matías L.",          authorAvatar: "http://img.b2bpic.net/free-photo/full-shot-woman-with-shopping-bags-smartphone_23-2148734472.jpg",          date: "2024"},
-        {
-          id: "b3",          category: "Corporate",          title: "SaaS Platform",          excerpt: "Dashboard eficiente y moderno.",          imageSrc: "http://img.b2bpic.net/free-photo/computers-data-center-running-server-rigs-diagnostic-tests_482257-118495.jpg",          authorName: "Matías L.",          authorAvatar: "http://img.b2bpic.net/free-photo/financial-software-ui-pc-screen-apartment-office-desk_482257-122945.jpg",          date: "2024"},
             ]}
           />
         </div>
 
         <div id="contact" data-section="contact">
           <ContactCenter
-      useInvertedBackground={false}
-      background={{ variant: "plain" }}
             tag="Contacto"
-      title="¿Querés un sitio que venda?"
+            title="¿Listo para elevar tu presencia digital?"
-      description="Contame sobre tu proyecto y te asesoro sin compromiso. Respondo dentro de las 24 horas."
+            description="Empecemos tu proyecto. Respuesta garantizada en 24h."
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
+            buttonText="Enviar"
           />
         </div>