Merge version_3 into main #3
220
src/app/page.tsx
220
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 FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import { LayoutGrid, Server, ShieldCheck, Zap } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -18,125 +19,120 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="grid"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="normal"
|
||||
contentWidth="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<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: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Portfolio", id: "portfolio" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="MATÍAS LANFRANCONI"
|
||||
/>
|
||||
</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="home" data-section="home">
|
||||
<HeroBillboardDashboard
|
||||
title="Premium Digital Craftsmanship"
|
||||
description="Minimalist high-impact web design for modern brands."
|
||||
buttons={[{ text: "View Work" }, { text: "Hire Me" }]}
|
||||
dashboard={{
|
||||
title: "Project Metrics", stats: [{ title: "Conversion", description: "Per visit", values: [85, 92, 98] }],
|
||||
logoIcon: LayoutGrid,
|
||||
sidebarItems: [{ icon: LayoutGrid, active: true }],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-with-computer_23-2149930993.jpg"
|
||||
}}
|
||||
/>
|
||||
</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">
|
||||
<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="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." }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="game-dev" data-section="game-dev">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
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" }
|
||||
]}
|
||||
/>
|
||||
</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"
|
||||
products={[
|
||||
{ id: "p1", name: "Cyber Pixel Quest", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/gaming-gear-desk-concept_23-2148734472.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why-me" data-section="why-me">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Experiencia en conversión y UX", content: "Optimizamos cada elemento para mejorar el rendimiento de ventas." },
|
||||
{ id: "f2", title: "Sitios rápidos y seguros", content: "Velocidad de carga y protección constante ante amenazas." },
|
||||
{ id: "f3", title: "Diseño adaptable", content: "Perfecto en cualquier dispositivo, móvil o escritorio." },
|
||||
{ id: "f4", title: "Comunicación clara", content: "Soporte personalizado durante todo el proceso." },
|
||||
]}
|
||||
sideTitle="Tu web necesita más que un diseño bonito."
|
||||
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>
|
||||
<div id="why-me" data-section="why-me">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
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." },
|
||||
]}
|
||||
sideTitle="Más que una web."
|
||||
sideDescription="Entiendo la tecnología como un vehículo de ventas, no solo una cara bonita."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<BlogCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Mis últimos trabajos"
|
||||
description="Explora algunos de mis proyectos más recientes."
|
||||
blogs={[
|
||||
{
|
||||
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: "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="portfolio" data-section="portfolio">
|
||||
<BlogCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
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", authorName: "Matías L.", authorAvatar: "", date: "2024" }
|
||||
]}
|
||||
/>
|
||||
</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="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Contacto"
|
||||
title="¿Listo para elevar tu presencia digital?"
|
||||
description="Empecemos tu proyecto. Respuesta garantizada en 24h."
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user