bender/2631e056-2355-4824-beed-e22fa9f23eb6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2_1781989970758 into main #1

Merged
bender merged 1 commits from version_2_1781989970758 into main 2026-06-20 21:14:39 +00:00
Conversation 0 Commits 1 Files Changed 10 +405 -222
10 changed files with 405 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
src/pages/HomePage.tsx
View File

@@ -1,234 +1,38 @@
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
import ContactCta from '@/components/sections/contact/ContactCta';
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
import FeaturesComparison from '@/components/sections/features/FeaturesComparison';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import HeroCenteredLogos from '@/components/sections/hero/HeroCenteredLogos';
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
import { Globe, ShoppingBag, Users } from "lucide-react";
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
// AUTO-GENERATED shell by per-section-migrate.
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
// files directly. Non-block content (wrappers, non-inlinable sections) is
// preserved inline; extracted section blocks become <XSection/> refs.
export default function HomePage() {
import React from 'react';
import HeroSection from './HomePage/sections/Hero';
import ProductsSection from './HomePage/sections/Products';
import ComparisonSection from './HomePage/sections/Comparison';
import AboutSection from './HomePage/sections/About';
import MetricsSection from './HomePage/sections/Metrics';
import TestimonialsSection from './HomePage/sections/Testimonials';
import FaqSection from './HomePage/sections/Faq';
import ContactSection from './HomePage/sections/Contact';
import ProductDiscoverySection from './HomePage/sections/ProductDiscovery';export default function HomePage(): React.JSX.Element {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroCenteredLogos
avatarsSrc={[
"http://img.b2bpic.net/free-photo/attractive-armenian-guy-with-hat-yellow-black-wall_181624-32940.jpg",
"http://img.b2bpic.net/free-photo/medium-shot-woman-shopping-mall_23-2150585905.jpg",
"http://img.b2bpic.net/free-photo/medium-shot-excited-woman-holding-smartphone_23-2149313451.jpg",
"http://img.b2bpic.net/free-photo/trendy-woman-sunglasses-posing-with-shopping-gift-bag-laughing-smiling-standing-beige-background_1258-121949.jpg",
]}
avatarText="Más de 10,000 clientes satisfechos"
title="Descubre tu estilo"
description="Moda urbana premium diseñada para quienes definen su propio camino. Elegancia minimalista en cada prenda."
primaryButton={{
text: "Comprar ahora",
href: "#products",
}}
secondaryButton={{
text: "Nueva Colección",
href: "#products",
}}
names={[
"Vogue",
"Hypebeast",
"GQ",
"Complex",
"Highsnobiety",
"UrbanTrend",
]}
imageSrc="http://img.b2bpic.net/free-photo/elegant-fashionable-woman-white-jacket-dress-posing-ankle-boot-black-leather-autumn-collection-full-length_273443-3839.jpg"
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="products" data-section="products">
<SectionErrorBoundary name="products">
<FeaturesImageBento
tag="Colecciones"
title="Productos Destacados"
description="Explora nuestra selección curada de piezas esenciales para tu armario urbano."
items={[
{
title: "Denim Moderno",
description: "Estilo urbano con el mejor ajuste.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-sunglasses_8353-9373.jpg",
},
{
title: "Calzado Premium",
description: "Comodidad total en cada paso.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-woman-girl-model-with-nude-makeup-summer-hipster-clothes-posing-near-wall-sitting-floor_158538-9011.jpg",
},
{
title: "Básicos Urbanos",
description: "La pieza clave para tu outfit.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-walking-white-blouse-terracotta-pants-minimalist-setting_24972-2967.jpg",
},
{
title: "Vestidos Elegantes",
description: "Minimalismo para cualquier ocasión.",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-underground-hip-hop-musicians_23-2150932934.jpg",
},
{
title: "Relojería",
description: "Precisión y estilo en tu muñeca.",
imageSrc: "http://img.b2bpic.net/free-photo/shiny-elegant-gold-chain-display_23-2149635312.jpg",
},
{
title: "Bolsos Premium",
description: "Funcionalidad de alto nivel.",
imageSrc: "http://img.b2bpic.net/free-photo/hand-luggage-trips_23-2148927410.jpg",
},
{
title: "Gorras Urbanas",
description: "El toque final de tu estilo.",
imageSrc: "http://img.b2bpic.net/free-photo/fedora-hats-studio-still-life_23-2150744055.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<ProductsSection />
<ProductDiscoverySection />
<div id="comparison" data-section="comparison">
<SectionErrorBoundary name="comparison">
<FeaturesComparison
tag="Diferencia"
title="Calidad en cada detalle"
description="Entendemos la importancia de lo que vistes día a día."
negativeItems={[
"Materiales sintéticos",
"Diseño desechable",
"Producción masiva",
"Desperdicio",
]}
positiveItems={[
"Materiales premium",
"Diseño ergonómico",
"Producción ética",
"Sostenibilidad",
]}
/>
</SectionErrorBoundary>
</div>
<ComparisonSection />
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutTestimonial
tag="Nuestra Historia"
quote="Urban Style nació del deseo de fusionar la elegancia minimalista con la energía de la vida urbana."
author="Laura Martinez"
role="Fundadora y Directora Creativa"
imageSrc="http://img.b2bpic.net/free-photo/cheerful-african-young-lady-walking-outdoors_171337-15121.jpg"
/>
</SectionErrorBoundary>
</div>
<AboutSection />
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsIconCards
tag="Números"
title="Nuestro impacto"
description="La confianza de nuestros clientes nos impulsa a seguir creando."
metrics={[
{
icon: Users,
title: "Clientes felices",
value: "15K+",
},
{
icon: ShoppingBag,
title: "Productos vendidos",
value: "50K+",
},
{
icon: Globe,
title: "Envíos globales",
value: "20+",
},
]}
/>
</SectionErrorBoundary>
</div>
<MetricsSection />
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialTrustCard
quote="La calidad de las prendas de Urban Style es inigualable. Cada compra es una experiencia premium."
rating={5}
author="Carlos Ruiz"
avatars={[
{
name: "Sarah",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-with-long-hair-with-glass-coffee-is-smiling-laughing_1321-1556.jpg",
},
{
name: "Mike",
imageSrc: "http://img.b2bpic.net/free-photo/girl-with-dyed-green-hair-poses-chair-smiles-gladfully-uses-smartphone-headphones-listen-favorite-music-dressed-fashionable-clothes-red_273609-54728.jpg",
},
{
name: "Emma",
imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-brunette-woman-black-dress_613910-7042.jpg",
},
{
name: "John",
imageSrc: "http://img.b2bpic.net/free-photo/expressive-man-posing-outdoor_344912-3084.jpg",
},
{
name: "Ana",
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-portrait-with-stylish-blue-hair-pretty-face_158595-4339.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<TestimonialsSection />
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqTwoColumn
tag="Dudas"
title="Preguntas frecuentes"
description="Resolvemos tus dudas sobre compras, envíos y devoluciones."
items={[
{
question: "¿Cuáles son los tiempos de envío?",
answer: "Enviamos a todo el país en un plazo de 3-5 días hábiles.",
},
{
question: "¿Aceptan devoluciones?",
answer: "Sí, tienes 30 días para realizar cualquier cambio o devolución.",
},
{
question: "¿Es seguro pagar online?",
answer: "Tu información está protegida mediante encriptación SSL de grado bancario.",
},
{
question: "¿Puedo rastrear mi pedido?",
answer: "Te enviaremos un número de seguimiento tan pronto el paquete salga de bodega.",
},
]}
/>
</SectionErrorBoundary>
</div>
<FaqSection />
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Contacto"
text="¿Tienes alguna duda? Nuestro equipo está listo para ayudarte con tu compra."
primaryButton={{
text: "Contactar por Email",
href: "mailto:hola@urbanstyle.com",
}}
secondaryButton={{
text: "WhatsApp",
href: "https://wa.me/1234567890",
}}
/>
</SectionErrorBoundary>
</div>
<ContactSection />
</>
);
}

22
src/pages/HomePage/sections/About.tsx Normal file
View File

@@ -0,0 +1,22 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "about" section.
import React from 'react';
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function AboutSection(): React.JSX.Element {
return (
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutTestimonial
tag="Nuestra Historia"
quote="Urban Style nació del deseo de fusionar la elegancia minimalista con la energía de la vida urbana."
author="Laura Martinez"
role="Fundadora y Directora Creativa"
imageSrc="http://img.b2bpic.net/free-photo/cheerful-african-young-lady-walking-outdoors_171337-15121.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

32
src/pages/HomePage/sections/Comparison.tsx Normal file
View File

@@ -0,0 +1,32 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "comparison" section.
import React from 'react';
import FeaturesComparison from '@/components/sections/features/FeaturesComparison';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ComparisonSection(): React.JSX.Element {
return (
<div id="comparison" data-section="comparison">
<SectionErrorBoundary name="comparison">
<FeaturesComparison
tag="Diferencia"
title="Calidad en cada detalle"
description="Entendemos la importancia de lo que vistes día a día."
negativeItems={[
"Materiales sintéticos",
"Diseño desechable",
"Producción masiva",
"Desperdicio",
]}
positiveItems={[
"Materiales premium",
"Diseño ergonómico",
"Producción ética",
"Sostenibilidad",
]}
/>
</SectionErrorBoundary>
</div>
);
}

27
src/pages/HomePage/sections/Contact.tsx Normal file
View File

@@ -0,0 +1,27 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "contact" section.
import React from 'react';
import ContactCta from '@/components/sections/contact/ContactCta';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ContactSection(): React.JSX.Element {
return (
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Contacto"
text="¿Tienes alguna duda? Nuestro equipo está listo para ayudarte con tu compra."
primaryButton={{
text: "Contactar por Email",
href: "mailto:hola@urbanstyle.com",
}}
secondaryButton={{
text: "WhatsApp",
href: "https://wa.me/1234567890",
}}
/>
</SectionErrorBoundary>
</div>
);
}

38
src/pages/HomePage/sections/Faq.tsx Normal file
View File

@@ -0,0 +1,38 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "faq" section.
import React from 'react';
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FaqSection(): React.JSX.Element {
return (
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqTwoColumn
tag="Dudas"
title="Preguntas frecuentes"
description="Resolvemos tus dudas sobre compras, envíos y devoluciones."
items={[
{
question: "¿Cuáles son los tiempos de envío?",
answer: "Enviamos a todo el país en un plazo de 3-5 días hábiles.",
},
{
question: "¿Aceptan devoluciones?",
answer: "Sí, tienes 30 días para realizar cualquier cambio o devolución.",
},
{
question: "¿Es seguro pagar online?",
answer: "Tu información está protegida mediante encriptación SSL de grado bancario.",
},
{
question: "¿Puedo rastrear mi pedido?",
answer: "Te enviaremos un número de seguimiento tan pronto el paquete salga de bodega.",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

43
src/pages/HomePage/sections/Hero.tsx Normal file
View File

@@ -0,0 +1,43 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "hero" section.
import React from 'react';
import HeroCenteredLogos from '@/components/sections/hero/HeroCenteredLogos';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function HeroSection(): React.JSX.Element {
return (
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroCenteredLogos
avatarsSrc={[
"http://img.b2bpic.net/free-photo/attractive-armenian-guy-with-hat-yellow-black-wall_181624-32940.jpg",
"http://img.b2bpic.net/free-photo/medium-shot-woman-shopping-mall_23-2150585905.jpg",
"http://img.b2bpic.net/free-photo/medium-shot-excited-woman-holding-smartphone_23-2149313451.jpg",
"http://img.b2bpic.net/free-photo/trendy-woman-sunglasses-posing-with-shopping-gift-bag-laughing-smiling-standing-beige-background_1258-121949.jpg",
]}
avatarText="Más de 10,000 clientes satisfechos"
title="Descubre tu estilo"
description="Moda urbana premium diseñada para quienes definen su propio camino. Elegancia minimalista en cada prenda."
primaryButton={{
text: "Comprar ahora",
href: "#products",
}}
secondaryButton={{
text: "Nueva Colección",
href: "#products",
}}
names={[
"Vogue",
"Hypebeast",
"GQ",
"Complex",
"Highsnobiety",
"UrbanTrend",
]}
imageSrc="http://img.b2bpic.net/free-photo/elegant-fashionable-woman-white-jacket-dress-posing-ankle-boot-black-leather-autumn-collection-full-length_273443-3839.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

38
src/pages/HomePage/sections/Metrics.tsx Normal file
View File

@@ -0,0 +1,38 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "metrics" section.
import React from 'react';
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
import { Globe, ShoppingBag, Users } from "lucide-react";
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function MetricsSection(): React.JSX.Element {
return (
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsIconCards
tag="Números"
title="Nuestro impacto"
description="La confianza de nuestros clientes nos impulsa a seguir creando."
metrics={[
{
icon: Users,
title: "Clientes felices",
value: "15K+",
},
{
icon: ShoppingBag,
title: "Productos vendidos",
value: "50K+",
},
{
icon: Globe,
title: "Envíos globales",
value: "20+",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

80
src/pages/HomePage/sections/ProductDiscovery.tsx Normal file
View File

@@ -0,0 +1,80 @@
import Button from '@/components/ui/Button';
import ImageOrVideo from '@/components/ui/ImageOrVideo';
import TextAnimation from '@/components/ui/TextAnimation';
import ScrollReveal from '@/components/ui/ScrollReveal';
import Tag from '@/components/ui/Tag';
export default function ProductDiscoverySection() {
const products = [
{
name: "Chaqueta Denim Oversize",
price: "$89.99",
imageSrc: "http://img.b2bpic.net/free-photo/woman-sunglasses_8353-9373.jpg",
},
{
name: "Zapatillas Urban Pro",
price: "$120.00",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-woman-girl-model-with-nude-makeup-summer-hipster-clothes-posing-near-wall-sitting-floor_158538-9011.jpg",
},
{
name: "Pantalón Cargo Minimal",
price: "$65.00",
imageSrc: "http://img.b2bpic.net/free-photo/woman-walking-white-blouse-terracotta-pants-minimalist-setting_24972-2967.jpg",
},
{
name: "Sudadera Essential",
price: "$45.00",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-underground-hip-hop-musicians_23-2150932934.jpg",
}
];
return (
<section data-webild-section="product-discovery" id="product-discovery" className="relative w-full py-24 bg-background">
<div className="w-content-width mx-auto">
<div className="text-center mb-16 flex flex-col items-center">
<ScrollReveal variant="fade">
<Tag text="Catálogo" className="mb-4" />
</ScrollReveal>
<TextAnimation
text="Compra la Colección"
variant="fade-blur"
tag="h2"
gradientText={false}
className="text-4xl md:text-5xl font-bold text-foreground mb-6"
/>
<ScrollReveal variant="fade" delay={0.2}>
<p className="text-lg text-accent max-w-2xl mx-auto">
Descubre nuestra última colección y añade tus favoritos directamente al carrito.
</p>
</ScrollReveal>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
{products.map((product, index) => (
<ScrollReveal variant="fade" key={index} delay={0.1 * index} className="flex flex-col h-full">
<div className="card rounded-lg overflow-hidden flex flex-col h-full border border-black/5">
<div className="relative aspect-[4/5] overflow-hidden bg-background-accent">
<ImageOrVideo
imageSrc={product.imageSrc}
className="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
/>
</div>
<div className="p-6 flex flex-col flex-grow">
<h3 className="text-lg font-semibold text-foreground mb-2">{product.name}</h3>
<p className="text-accent mb-6">{product.price}</p>
<div className="mt-auto">
<Button
text="Agregar al carrito"
variant="primary"
className="w-full justify-center"
/>
</div>
</div>
</div>
</ScrollReveal>
))}
</div>
</div>
</section>
);
}

57
src/pages/HomePage/sections/Products.tsx Normal file
View File

@@ -0,0 +1,57 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "products" section.
import React from 'react';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ProductsSection(): React.JSX.Element {
return (
<div id="products" data-section="products">
<SectionErrorBoundary name="products">
<FeaturesImageBento
tag="Colecciones"
title="Productos Destacados"
description="Explora nuestra selección curada de piezas esenciales para tu armario urbano."
items={[
{
title: "Denim Moderno",
description: "Estilo urbano con el mejor ajuste.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-sunglasses_8353-9373.jpg",
},
{
title: "Calzado Premium",
description: "Comodidad total en cada paso.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-woman-girl-model-with-nude-makeup-summer-hipster-clothes-posing-near-wall-sitting-floor_158538-9011.jpg",
},
{
title: "Básicos Urbanos",
description: "La pieza clave para tu outfit.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-walking-white-blouse-terracotta-pants-minimalist-setting_24972-2967.jpg",
},
{
title: "Vestidos Elegantes",
description: "Minimalismo para cualquier ocasión.",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-underground-hip-hop-musicians_23-2150932934.jpg",
},
{
title: "Relojería",
description: "Precisión y estilo en tu muñeca.",
imageSrc: "http://img.b2bpic.net/free-photo/shiny-elegant-gold-chain-display_23-2149635312.jpg",
},
{
title: "Bolsos Premium",
description: "Funcionalidad de alto nivel.",
imageSrc: "http://img.b2bpic.net/free-photo/hand-luggage-trips_23-2148927410.jpg",
},
{
title: "Gorras Urbanas",
description: "El toque final de tu estilo.",
imageSrc: "http://img.b2bpic.net/free-photo/fedora-hats-studio-still-life_23-2150744055.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

42
src/pages/HomePage/sections/Testimonials.tsx Normal file
View File

@@ -0,0 +1,42 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "testimonials" section.
import React from 'react';
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function TestimonialsSection(): React.JSX.Element {
return (
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialTrustCard
quote="La calidad de las prendas de Urban Style es inigualable. Cada compra es una experiencia premium."
rating={5}
author="Carlos Ruiz"
avatars={[
{
name: "Sarah",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-with-long-hair-with-glass-coffee-is-smiling-laughing_1321-1556.jpg",
},
{
name: "Mike",
imageSrc: "http://img.b2bpic.net/free-photo/girl-with-dyed-green-hair-poses-chair-smiles-gladfully-uses-smartphone-headphones-listen-favorite-music-dressed-fashionable-clothes-red_273609-54728.jpg",
},
{
name: "Emma",
imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-brunette-woman-black-dress_613910-7042.jpg",
},
{
name: "John",
imageSrc: "http://img.b2bpic.net/free-photo/expressive-man-posing-outdoor_344912-3084.jpg",
},
{
name: "Ana",
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-portrait-with-stylish-blue-hair-pretty-face_158595-4339.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}