bender/af85fbbd-6ea1-409e-9943-6bd6b042c5ec
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: bender:version_1
Branches Tags
bender:main bender:version_2 bender:version_1
..
compare: bender:version_2
Branches Tags
bender:main bender:version_2 bender:version_1

4 Commits
version_1 ... version_2

Author SHA1 Message Date
bender
bd4a0d2f03 Update src/app/page.tsx 2026-05-18 13:59:12 +00:00
bender
e5054e7d5a Update src/app/styles/variables.css 2026-05-18 13:58:42 +00:00
bender
ec058b0697 Update src/app/page.tsx 2026-05-18 13:58:42 +00:00
bender
a13e42acfb Merge version_1 into main 
Merge version_1 into main
 2026-05-18 13:57:22 +00:00
2 changed files with 101 additions and 183 deletions
Expand all files Collapse all files

272
src/app/page.tsx
View File

@@ -25,190 +25,108 @@ export default function LandingPage() {
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Servicios", id: "services"},
{
name: "Proceso", id: "process"},
{
name: "Ejemplos", id: "examples"},
{
name: "Contacto", id: "contact"},
]}
brandName="AI Web Studio"
button={{
text: "Solicitar mi web ahora", href: "#contact"}}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Servicios", id: "services" },
{ name: "Proceso", id: "process" },
{ name: "Ejemplos", id: "examples" },
{ name: "Contacto", id: "contact" },
]}
brandName="AI Web Studio"
button={{ text: "Solicitar mi web ahora", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{
variant: "sparkles-gradient"}}
title="Te creo una web profesional con IA en tiempo récord"
description="Diseños modernos, rápidos y optimizados. Sin complicaciones."
avatars={[
{ src: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg", alt: "Client 1" },
{ src: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg", alt: "Client 2" },
{ src: "http://img.b2bpic.net/free-photo/close-up-computer-peripherals-server-room-desk_482257-118044.jpg", alt: "Client 3" },
{ src: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg", alt: "Client 4" },
{ src: "http://img.b2bpic.net/free-photo/network-graphic-overlay-banner-laptop_53876-120748.jpg", alt: "Client 5" },
]}
buttons={[
{
text: "Solicitar mi web ahora", href: "#contact"},
{
text: "Ver ejemplos", href: "#examples"},
]}
buttonAnimation="slide-up"
marqueeItems={[
{ type: "text", text: "Carga ultra rápida" },
{ type: "text", text: "Optimización SEO" },
{ type: "text", text: "Diseño Responsive" },
{ type: "text", text: "IA integrada" },
{ type: "text", text: "Soporte 24/7" },
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{ variant: "sparkles-gradient" }}
title="Te creo una web profesional con IA en tiempo récord"
description="Diseños modernos, rápidos y optimizados. Sin complicaciones."
avatars={[
{ src: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg", alt: "Client 1" },
{ src: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg", alt: "Client 2" }
]}
buttons={[{ text: "Solicitar mi web ahora", href: "#contact" }, { text: "Ver ejemplos", href: "#examples" }]}
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwentyFour
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
id: "f1", title: "Landing Page", author: "IA Powered", description: "Web de una sola página de alto impacto para convertir visitantes en clientes.", tags: ["Rapidez"],
imageSrc: "http://img.b2bpic.net/free-photo/professional-person-engaging-with-ai-chatbot-computer-screen_482257-126263.jpg"},
{
id: "f2", title: "Web Multi-página", author: "IA Powered", description: "Portafolios, tiendas online o webs corporativas completas.", tags: ["Versátil"],
imageSrc: "http://img.b2bpic.net/free-photo/african-american-software-developer-does-visual-coding-creating-software_482257-127024.jpg"},
{
id: "f3", title: "Web para Restaurantes", author: "IA Powered", description: "Menú online interactivo y sistema de reservas directo.", tags: ["Experiencia"],
imageSrc: "http://img.b2bpic.net/free-photo/handsome-businessman-working-office_158595-1170.jpg"},
]}
title="Servicios Profesionales"
description="Soluciones web de alta calidad adaptadas a tus necesidades."
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwentyFour
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
title="Servicios Profesionales"
description="Soluciones web de alta calidad adaptadas a tus necesidades."
features={[
{ id: "s1", title: "Landing Pages", author: "IA-Driven", description: "Conversión enfocada con IA.", tags: ["IA", "Velocidad"], imageSrc: "http://img.b2bpic.net/free-photo/professional-person-engaging-with-ai-chatbot-computer-screen_482257-126263.jpg" },
{ id: "s2", title: "Tiendas Online", author: "IA-Driven", description: "Comercio electrónico escalable.", tags: ["IA", "Tienda"], imageSrc: "http://img.b2bpic.net/free-photo/african-american-software-developer-does-visual-coding-creating-software_482257-127024.jpg" }
]}
/>
</div>
<div id="process" data-section="process">
<FeatureCardTwentyFour
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: "p1", title: "1. Consulta", author: "Paso 1", description: "Tú me cuentas qué necesitas para tu proyecto.", tags: ["Comunicación"],
imageSrc: "http://img.b2bpic.net/free-photo/top-view-workplace-night-study-work-late-evening_169016-18177.jpg"},
{
id: "p2", title: "2. Propuesta", author: "Paso 2", description: "Te hago una propuesta con precio cerrado.", tags: ["Transparencia"],
imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126876.jpg"},
{
id: "p3", title: "3. Creación IA", author: "Paso 3", description: "Te creo la web optimizada mediante tecnología IA.", tags: ["Tecnología"],
imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg"},
]}
title="Proceso de Trabajo"
description="De la idea a la realidad en 5 sencillos pasos."
/>
</div>
<div id="process" data-section="process">
<FeatureCardTwentyFour
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Proceso de Trabajo"
description="5 pasos para transformar tu idea en una web funcional."
features={[
{ id: "p1", title: "Consulta", author: "1/5", description: "Definición de objetivos.", tags: ["IA"], imageSrc: "http://img.b2bpic.net/free-photo/top-view-workplace-night-study-work-late-evening_169016-18177.jpg" },
{ id: "p2", title: "Estrategia", author: "2/5", description: "Planificación inteligente.", tags: ["IA"], imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126876.jpg" },
{ id: "p3", title: "Diseño IA", author: "3/5", description: "Generación de prototipos.", tags: ["IA"], imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg" },
{ id: "p4", title: "Desarrollo", author: "4/5", description: "Codificación optimizada.", tags: ["IA"], imageSrc: "http://img.b2bpic.net/free-photo/man-with-vr-headset-touching-holographic-screen_53876-101150.jpg" },
{ id: "p5", title: "Entrega", author: "5/5", description: "Lanzamiento al mercado.", tags: ["IA"], imageSrc: "http://img.b2bpic.net/free-photo/woman-typing-prompts-into-ai-powered-chat-system-her-computer_482257-124123.jpg" }
]}
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardFifteen
useInvertedBackground={true}
testimonial="¡Increíble! Mi nueva web estuvo lista en 3 días y ha duplicado mis contactos. La IA realmente marca la diferencia."
rating={5}
author="Laura M., Dueña de Restaurante"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/intercultural-economists_1098-14116.jpg", alt: "Laura" },
{ src: "http://img.b2bpic.net/free-photo/medium-shot-man-painting-watercolors_23-2150170387.jpg", alt: "Client B" },
{ src: "http://img.b2bpic.net/free-photo/positive-confident-business-coach-posing-training-room_74855-3026.jpg", alt: "Client C" },
{ src: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg", alt: "Client D" },
{ src: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924139.jpg", alt: "Client E" },
]}
ratingAnimation="blur-reveal"
avatarsAnimation="blur-reveal"
/>
</div>
<div id="examples" data-section="examples">
<ProductCardOne
animationType="blur-reveal"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
title="Galería de Trabajos"
description="Ejemplos reales desarrollados con IA."
products={[
{ id: "e1", name: "Web Corporativa", price: "Completa", imageSrc: "http://img.b2bpic.net/free-photo/bearded-tattooed-man-blank-white-t-shirt-works-his-computer-home-side-view-summer-time_346278-1821.jpg" },
{ id: "e2", name: "Landing Page", price: "Rápida", imageSrc: "http://img.b2bpic.net/free-photo/technology-venture-workspace-using-machine-learning-streamline-coding-process_482257-120287.jpg" }
]}
/>
</div>
<div id="examples" data-section="examples">
<ProductCardOne
animationType="blur-reveal"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "ex1", name: "Restaurante Gourmet", price: "Web Completa", imageSrc: "http://img.b2bpic.net/free-photo/special-operations-engineer-following-enemy-warships-submarines_482257-89765.jpg"},
{
id: "ex2", name: "Tienda Boutique", price: "Tienda Online", imageSrc: "http://img.b2bpic.net/free-photo/bearded-tattooed-man-blank-white-t-shirt-works-his-computer-home-side-view-summer-time_346278-1821.jpg"},
{
id: "ex3", name: "Portafolio Creativo", price: "Landing Page", imageSrc: "http://img.b2bpic.net/free-photo/technology-venture-workspace-using-machine-learning-streamline-coding-process_482257-120287.jpg"},
{
id: "ex4", name: "Negocio Local", price: "Web Corporativa", imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-entrepreneur-analyzing-company-profit_482257-20207.jpg"},
{
id: "ex5", name: "Coach Personal", price: "Web Servicios", imageSrc: "http://img.b2bpic.net/free-photo/man-with-vr-headset-touching-holographic-screen_53876-101150.jpg"},
{
id: "ex6", name: "Tech Startup", price: "SAAS Landing", imageSrc: "http://img.b2bpic.net/free-photo/woman-typing-prompts-into-ai-powered-chat-system-her-computer_482257-124123.jpg"},
]}
title="Galería de Ejemplos"
description="Mira la calidad de los proyectos realizados."
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardFifteen
testimonial="Un servicio impecable. Mi web está funcionando perfectamente desde el primer día."
rating={5}
author="Cliente Satisfecho"
ratingAnimation="blur-reveal"
avatarsAnimation="blur-reveal"
useInvertedBackground={false}
avatars={[{ src: "http://img.b2bpic.net/free-photo/intercultural-economists_1098-14116.jpg", alt: "Autor" }]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="¿Quieres que te cree tu web?"
description="Rellena el formulario y comencemos a trabajar en tu éxito digital."
inputs={[
{
name: "nombre", type: "text", placeholder: "Nombre completo", required: true,
},
{
name: "telefono", type: "tel", placeholder: "Teléfono / WhatsApp", required: true,
},
{
name: "email", type: "email", placeholder: "Correo electrónico", required: true,
},
]}
multiSelect={{
name: "tipo", label: "Tipo de web", options: [
"Restaurante", "Tienda online", "Portafolio", "Negocio local", "Landing Page", "Otro"],
}}
textarea={{
name: "desc", placeholder: "Describe tu proyecto...", rows: 4,
}}
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-disabled-man-working-desk_23-2149313753.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
title="Solicitar servicios"
description="Cuéntame sobre tu proyecto y te contactaré pronto."
inputs={[{ name: "nombre", type: "text", placeholder: "Nombre", required: true }, { name: "email", type: "email", placeholder: "Email", required: true }]}
textarea={{ name: "desc", placeholder: "Descripción del proyecto" }}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-disabled-man-working-desk_23-2149313753.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Contacto", items: [
{
label: "WhatsApp: +34 000 000 000", href: "https://wa.me/34000000000"},
{
label: "Email: contacto@webia.com", href: "mailto:contacto@webia.com"},
],
},
{
title: "Legal", items: [
{
label: "Privacidad", href: "#"},
{
label: "Términos", href: "#"},
],
},
]}
bottomLeftText="© 2024 AI Web Studio"
bottomRightText="Hecho con IA profesional"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[{ title: "Servicios", items: [{ label: "Webs IA", href: "#" }] }, { title: "Contacto", items: [{ label: "Email", href: "mailto:me@iaweb.com" }] }]}
bottomLeftText="© 2024 AI Web Studio"
bottomRightText="Profesional & Moderno"
/>
</div>
</ReactLenis>
</ThemeProvider>
);

12
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #ffffff;
--card: #f9f9f9;
--foreground: #000612;
--primary-cta: #15479c;
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #f5fffae6;
--primary-cta: #0a7039;
--primary-cta-text: #ffffff;
--secondary-cta: #ffffff;
--secondary-cta: #1a1a1a;
--secondary-cta-text: #000612;
--accent: #0a7039;
--background-accent: #f0fdf4;
--background-accent: #0a7039;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);