Update src/app/web-design/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -4,14 +4,11 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 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 HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
 import TextAbout from '@/components/sections/about/TextAbout';
-import { LayoutGrid, FileText, BarChart3, Settings, User } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -19,136 +16,79 @@ export default function LandingPage() {
         defaultButtonVariant="icon-arrow"
         defaultTextAnimation="reveal-blur"
         borderRadius="soft"
-        contentWidth="medium"
-        sizing="largeSizeMediumTitles"
-        background="noise"
-        cardStyle="glass-depth"
-        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="layered"
-        headingFontWeight="extrabold"
+        contentWidth="small"
+        sizing="largeSmallSizeMediumTitles"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
-        <div id="nav" data-section="nav">
-          <NavbarStyleApple
-            navItems={[
-              { name: "Home", id: "home" },
-              { name: "About", id: "about" },
-              { name: "Services", id: "services" },
-              { name: "Portfolio", id: "portfolio" },
-              { name: "Contact", id: "contact" },
-            ]}
-            brandName="MATÍAS LANFRANCONI"
-          />
-        </div>
+  <div id="nav" data-section="nav">
+      <NavbarStyleApple
+      navItems={[
+        { name: "Home", id: "home" },
+        { name: "Web Design", id: "/web-design" },
+        { name: "About", id: "about" },
+        { name: "Services", id: "services" },
+        { name: "Contact", id: "contact" },
+      ]}
+      brandName="MATÍAS LANFRANCONI"
+    />
+  </div>
 
-        <div id="home" data-section="home">
-          <HeroBillboardDashboard
-            title="Premium Digital Craftsmanship"
-            description="Minimalist high-impact web design for modern brands."
-            background={{ variant: "plain" }}
-            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>
+  <div id="home" data-section="home">
+      <HeroLogo
+      logoText="MATÍAS LANFRANCONI"
+      description="Web development for the modern age. Minimalist, premium, and built to convert."
+      buttons={[{ text: "View Portfolio" }, { text: "Get Started" }]}
+      className="py-20"
+    />
+  </div>
 
-        <div id="about" data-section="about">
-          <TextAbout
-            useInvertedBackground={false}
-            tag="About Me"
-            title="Soy Matías Lanfranconi — Diseñador y desarrollador web especializado en WordPress."
-          />
-        </div>
+  <div id="about" data-section="about">
+      <TextAbout
+      useInvertedBackground={false}
+      tag="About Me"
+      title="Soy Matías Lanfranconi — Diseñador y desarrollador web especializado en WordPress."
+    />
+  </div>
 
-        <div id="services" data-section="services">
-          <FeatureCardTwentyOne
-            title="Core Services"
-            description="Specialized digital expertise to accelerate your business growth."
-            accordionItems={[
-              { id: "s1", title: "Web Design", content: "Premium minimalist aesthetic, custom built for your brand identity." },
-              { id: "s2", title: "E-Commerce", content: "High-performance shop architecture optimized for conversion." },
-              { id: "s3", title: "Performance", content: "Lightning-fast load speeds for optimal user experience." },
-              { id: "s4", title: "Security", content: "Robust backend protection and scalable infrastructure security." }
-            ]}
-            imageSrc="http://img.b2bpic.net/free-photo/gaming-gear-desk-concept_23-2148734472.jpg?_wi=1"
-            useInvertedBackground={false}
-            mediaAnimation="blur-reveal"
-          />
-        </div>
+  <div id="services" data-section="services">
+      <FeatureCardTwentySeven
+      animationType="slide-up"
+      textboxLayout="split"
+      title="Services"
+      description="Professional web solutions designed to scale with your business."
+      useInvertedBackground={false}
+      features={[
+        { id: "s1", title: "Web Design", descriptions: ["Premium aesthetic, custom built."] },
+        { 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."] },
+      ]}
+    />
+  </div>
 
-        <div id="game-dev" data-section="game-dev">
-          <ProductCardOne
-            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"
-            useInvertedBackground={false}
-            products={[
-              { 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>
+  <div id="contact" data-section="contact">
+      <ContactCenter
+      useInvertedBackground={false}
+      background={{ variant: "plain" }}
+      tag="Contacto"
+      title="¿Querés un sitio que venda?"
+      description="Contame sobre tu proyecto y te asesoro sin compromiso. Respondo dentro de las 24 horas."
+    />
+  </div>
 
-        <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: "Conversión y UX", content: "Cada píxel está diseñado para guiar al usuario hacia la acción." },
-              { id: "f2", title: "Sitios de Alta Velocidad", content: "Infraestructura técnica optimizada para carga inmediata." },
-              { id: "f3", title: "Diseño Adaptativo", content: "Experiencia consistente en todos los tamaños de pantalla." },
-            ]}
-            faqsAnimation="blur-reveal"
-          />
-        </div>
-
-        <div id="portfolio" data-section="portfolio">
-          <BlogCardOne
-            animationType="slide-up"
-            textboxLayout="split"
-            useInvertedBackground={false}
-            title="Mis últimos trabajos"
-            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: "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" }
-            ]}
-          />
-        </div>
-
-        <div id="contact" data-section="contact">
-          <ContactCenter
-            tag="Contacto"
-            title="¿Listo para elevar tu presencia digital?"
-            description="Empecemos tu proyecto. Respuesta garantizada en 24h."
-            background={{ variant: "plain" }}
-            useInvertedBackground={false}
-            buttonText="Enviar"
-          />
-        </div>
-
-        <div id="footer" data-section="footer">
-          <FooterLogoReveal
-            logoText="MATÍAS LANFRANCONI"
-            leftLink={{ text: "Privacy Policy", href: "#" }}
-            rightLink={{ text: "© 2024 All Rights Reserved", href: "#" }}
-          />
-        </div>
+  <div id="footer" data-section="footer">
+      <FooterLogoReveal
+      logoText="MATÍAS LANFRANCONI"
+      leftLink={{ text: "Privacy Policy", href: "#" }}
+      rightLink={{ text: "© 2024 All Rights Reserved", href: "#" }}
+    />
+  </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/web-design/page.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+
+export default function WebDesignPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="small"
+        sizing="largeSmallSizeMediumTitles"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Web Design", id: "/web-design" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          brandName="MATÍAS LANFRANCONI"
+        />
+        <HeroLogo
+          logoText="Web Design"
+          description="High-end digital solutions, clean typography, and minimalist agency aesthetics."
+          buttons={[{ text: "Get Started", href: "/contact" }]}
+        />
+        <FeatureCardTwentySeven
+          animationType="slide-up"
+          textboxLayout="split"
+          title="Core Web Services"
+          description="Minimalist and typography-driven solutions for your brand."
+          useInvertedBackground={false}
+          features={[
+            { id: "s1", title: "E-Commerce", descriptions: ["Premium shop experiences."] },
+            { id: "s2", title: "Web Institucional", descriptions: ["Professional corporate branding."] },
+            { id: "s3", title: "Landing / One-page", descriptions: ["Focused high-conversion design."] },
+            { id: "s4", title: "Custom Project", descriptions: ["Bespoke development tailored for you."] }
+          ]}
+        />
+        <div className="bg-neutral-900 text-white p-16">
+            <ProductCardTwo
+              title="Game Development Portfolio"
+              description="Dark-themed, pixel-art inspired unique experiences."
+              gridVariant="bento-grid"
+              animationType="slide-up"
+              textboxLayout="split"
+              useInvertedBackground={true}
+              products={[
+                { id: "g1", brand: "Indie", name: "Pixel Hero", price: "Custom", rating: 5, reviewCount: "0", imageSrc: "" },
+                { id: "g2", brand: "Indie", name: "Dungeon Runner", price: "Custom", rating: 4, reviewCount: "0", imageSrc: "" },
+                { id: "g3", brand: "Indie", name: "Space Shooter", price: "Custom", rating: 5, reviewCount: "0", imageSrc: "" }
+              ]}
+            />
+        </div>
+        <FeatureCardTwentySeven
+          animationType="slide-up"
+          textboxLayout="split"
+          title="Additional Solutions"
+          description="Comprehensive services for agencies and specialized firms."
+          useInvertedBackground={false}
+          features={[
+            { id: "a1", title: "Agencies", descriptions: ["White-label development partners."] },
+            { id: "a2", title: "Consulting", descriptions: ["Strategic digital planning."] }
+          ]}
+        />
+        <ContactCenter
+            tag="Let's Talk"
+            title="Start your project"
+            description="High-end design requires precision. Let's work together."
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
+        />
+        <FooterLogoReveal
+          logoText="MATÍAS LANFRANCONI"
+          leftLink={{ text: "Back to Home", href: "/" }}
+          rightLink={{ text: "© 2024", href: "#" }}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}