Bob AI: Changed hero section to use 3D tilted cards layout
This commit is contained in:
kudinDmitriyUp
@@ -1,125 +1,31 @@
|
||||
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FeaturesBento from '@/components/sections/features/FeaturesBento';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in the sibling sections/ folder (one file per section).
|
||||
// Edit those section files directly. Non-block content (wrappers,
|
||||
// non-inlinable sections) is preserved inline; extracted section blocks
|
||||
// become component refs.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import ProductosSection from './HomePage/sections/Productos';
|
||||
import PorQueElegirnosSection from './HomePage/sections/PorQueElegirnos';
|
||||
import GaleriaSection from './HomePage/sections/Galeria';
|
||||
import OpinionesSection from './HomePage/sections/Opiniones';
|
||||
import ContactoSection from './HomePage/sections/Contacto';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBillboardCarousel
|
||||
tag="Calidad Premium"
|
||||
title="Transforma tu estilo hoy mismo"
|
||||
description="Extensiones de cabello 100% natural para un look radiante y lleno de volumen."
|
||||
primaryButton={{ text: "Ver Catálogo", href: "#productos" }}
|
||||
secondaryButton={{ text: "Contactar", href: "#contacto" }}
|
||||
items={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/fashion-girls-city_1157-4965.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/graceful-lady-with-long-blonde-hair-having-fun-weekend-posing-with-pleasure-enthusiastic-caucasian-woman-with-tanned-skin-laughing-while-standing-near-window_197531-9221.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/man-barbershop_1303-5406.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-model-lady-posing-black-dress_549566-282.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/female-model-sport-bra-blowing-her-hairs-two-sides_114579-21763.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-beautiful-young-woman-looking-camera_1301-4449.jpg" },
|
||||
]}
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="productos" data-section="productos">
|
||||
<SectionErrorBoundary name="productos">
|
||||
<FeaturesImageBento
|
||||
tag="Nuestra Selección"
|
||||
title="Extensiones de alta gama"
|
||||
description="Elige entre nuestra amplia variedad de tonos y texturas diseñadas para mezclarse perfectamente."
|
||||
items={[
|
||||
{ title: "Clip-in Premium", description: "Fáciles y versátiles.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-caucasian-smiling-brunette-woman-model-bright-pink-summer-stylish-clothes-isolated-white-background_158538-2977.jpg" },
|
||||
{ title: "Tape-in Invisible", description: "Efecto natural garantizado.", imageSrc: "http://img.b2bpic.net/free-photo/showing-cute-portrait-fresh-holding_1187-6233.jpg" },
|
||||
{ title: "Keratin Fusion", description: "Durabilidad a largo plazo.", imageSrc: "http://img.b2bpic.net/free-photo/beauty-product-composition-with-basket_23-2147817685.jpg" },
|
||||
{ title: "Micro Rings", description: "Sin adhesivos químicos.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-curly-hair-shampoo_23-2151307479.jpg" },
|
||||
{ title: "Bundles de seda", description: "Brillo incomparable.", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-shiny-flowing-brown-hair-beauty-portrait_23-2151989124.jpg" },
|
||||
{ title: "Kit de Mantenimiento", description: "Todo para tu cuidado.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-eco-friendly-products-assortment_23-2148491140.jpg" },
|
||||
{ title: "Técnicas Personalizadas", description: "Adapta tu diseño.", imageSrc: "http://img.b2bpic.net/free-photo/hairdressing-supplies-spray-bottle_23-2148352921.jpg" },
|
||||
]}
|
||||
textAnimation="fade-blur"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ProductosSection />
|
||||
|
||||
<div id="por-que-elegirnos" data-section="por-que-elegirnos">
|
||||
<SectionErrorBoundary name="por-que-elegirnos">
|
||||
<AboutTestimonial
|
||||
tag="Experiencia"
|
||||
quote="Nuestras extensiones son seleccionadas manualmente para asegurar la máxima calidad, suavidad y durabilidad, proporcionando una experiencia de lujo en cada aplicación."
|
||||
author="María Elena"
|
||||
role="Fundadora y Estilista Senior"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg"
|
||||
textAnimation="fade"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<PorQueElegirnosSection />
|
||||
|
||||
<div id="galeria" data-section="galeria">
|
||||
<SectionErrorBoundary name="galeria">
|
||||
<FeaturesBento
|
||||
tag="Estilos Realizados"
|
||||
title="Inspiración para tu nuevo look"
|
||||
description="Mira cómo nuestras clientas han transformado su cabello con nuestros servicios."
|
||||
features={[
|
||||
{
|
||||
title: "Transformaciones Increíbles",
|
||||
description: "Mira el antes y después de nuestras clientas.",
|
||||
bentoComponent: "media-stack",
|
||||
mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-outdoor_624325-2509.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/portrait-sensual-brunette-female-with-long-curly-hair-dressed-warm-black-pullover_613910-7398.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-black-crop-top-standing-white-background-high-quality-photo_114579-52859.jpg" }]
|
||||
},
|
||||
{
|
||||
title: "Calidad Certificada",
|
||||
description: "Nuestros estándares de seguridad.",
|
||||
bentoComponent: "checklist-timeline",
|
||||
heading: "Pasos hacia la excelencia",
|
||||
subheading: "Desde la selección hasta el mantenimiento",
|
||||
checklistItems: [{ label: "Selección del cabello", detail: "100% natural, grado premium." }, { label: "Aplicación profesional", detail: "Respetando la salud capilar." }, { label: "Guía de mantenimiento", detail: "Cuidado duradero garantizado." }],
|
||||
completedLabel: "Look final"
|
||||
}
|
||||
]}
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<GaleriaSection />
|
||||
|
||||
<div id="opiniones" data-section="opiniones">
|
||||
<SectionErrorBoundary name="opiniones">
|
||||
<TestimonialTrustCard
|
||||
quote="¡Simplemente fascinada! El color es exacto y la textura increíblemente suave. Son las mejores extensiones que he usado en años."
|
||||
rating={5}
|
||||
author="Sofía C."
|
||||
avatars={[
|
||||
{ name: "Ana", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230959.jpg" },
|
||||
{ name: "Beatriz", imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-girl-with-blonde-wavy-hair-modern-luxury-room-young-woman-smiling-wearing-stylish-elegant-black-dress-with-paillettes-sleeves_197531-2859.jpg" },
|
||||
{ name: "Carla", imageSrc: "http://img.b2bpic.net/free-photo/girl-adult-white-hair-blond_1139-778.jpg" },
|
||||
{ name: "Diana", imageSrc: "http://img.b2bpic.net/free-photo/sexy-woman-lingerie-home_624325-3118.jpg" },
|
||||
{ name: "Elena", imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-femininity-concept-positive-beautiful-young-european-woman-blue-shirt-looking-camera-with-broad-happy-smile-being-good-mood-kitchen-interior-background_343059-2087.jpg" }
|
||||
]}
|
||||
textAnimation="fade-blur"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<OpinionesSection />
|
||||
|
||||
<div id="contacto" data-section="contacto">
|
||||
<SectionErrorBoundary name="contacto">
|
||||
<ContactCta
|
||||
tag="Reserva tu cita"
|
||||
text="¿Lista para el cambio que siempre quisiste? Escríbenos hoy y recibe una asesoría personalizada sin costo."
|
||||
primaryButton={{ text: "WhatsApp", href: "https://wa.me/1234567890" }}
|
||||
secondaryButton={{ text: "Llamar ahora", href: "tel:1234567890" }}
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactoSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
22
src/pages/HomePage/sections/Contacto.tsx
Normal file
22
src/pages/HomePage/sections/Contacto.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "contacto" section.
|
||||
|
||||
import React from 'react';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ContactoSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contacto" data-section="contacto">
|
||||
<SectionErrorBoundary name="contacto">
|
||||
<ContactCta
|
||||
tag="Reserva tu cita"
|
||||
text="¿Lista para el cambio que siempre quisiste? Escríbenos hoy y recibe una asesoría personalizada sin costo."
|
||||
primaryButton={{ text: "WhatsApp", href: "https://wa.me/1234567890" }}
|
||||
secondaryButton={{ text: "Llamar ahora", href: "tel:1234567890" }}
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
src/pages/HomePage/sections/Galeria.tsx
Normal file
38
src/pages/HomePage/sections/Galeria.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "galeria" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesBento from '@/components/sections/features/FeaturesBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function GaleriaSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="galeria" data-section="galeria">
|
||||
<SectionErrorBoundary name="galeria">
|
||||
<FeaturesBento
|
||||
tag="Estilos Realizados"
|
||||
title="Inspiración para tu nuevo look"
|
||||
description="Mira cómo nuestras clientas han transformado su cabello con nuestros servicios."
|
||||
features={[
|
||||
{
|
||||
title: "Transformaciones Increíbles",
|
||||
description: "Mira el antes y después de nuestras clientas.",
|
||||
bentoComponent: "media-stack",
|
||||
mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-outdoor_624325-2509.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/portrait-sensual-brunette-female-with-long-curly-hair-dressed-warm-black-pullover_613910-7398.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-black-crop-top-standing-white-background-high-quality-photo_114579-52859.jpg" }]
|
||||
},
|
||||
{
|
||||
title: "Calidad Certificada",
|
||||
description: "Nuestros estándares de seguridad.",
|
||||
bentoComponent: "checklist-timeline",
|
||||
heading: "Pasos hacia la excelencia",
|
||||
subheading: "Desde la selección hasta el mantenimiento",
|
||||
checklistItems: [{ label: "Selección del cabello", detail: "100% natural, grado premium." }, { label: "Aplicación profesional", detail: "Respetando la salud capilar." }, { label: "Guía de mantenimiento", detail: "Cuidado duradero garantizado." }],
|
||||
completedLabel: "Look final"
|
||||
}
|
||||
]}
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
20
src/pages/HomePage/sections/Hero.tsx
Normal file
20
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
// Created by add_section_from_catalog (HeroTiltedCards).
|
||||
|
||||
import React from 'react';
|
||||
import HeroTiltedCards from '@/components/sections/hero/HeroTiltedCards';
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div data-webild-section="hero" data-section="hero" id="hero">
|
||||
<HeroTiltedCards
|
||||
secondaryButton={{"href":"#contacto","text":"Contactar"}}
|
||||
textAnimation="slide-up"
|
||||
title="Transforma tu estilo hoy mismo"
|
||||
primaryButton={{"href":"#productos","text":"Ver Catálogo"}}
|
||||
description="Extensiones de cabello 100% natural para un look radiante y lleno de volumen."
|
||||
tag="Calidad Premium"
|
||||
items={[{"imageSrc":"http://img.b2bpic.net/free-photo/fashion-girls-city_1157-4965.jpg"},{"imageSrc":"http://img.b2bpic.net/free-photo/graceful-lady-with-long-blonde-hair-having-fun-weekend-posing-with-pleasure-enthusiastic-caucasian-woman-with-tanned-skin-laughing-while-standing-near-window_197531-9221.jpg"},{"imageSrc":"http://img.b2bpic.net/free-photo/man-barbershop_1303-5406.jpg"}]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
28
src/pages/HomePage/sections/Opiniones.tsx
Normal file
28
src/pages/HomePage/sections/Opiniones.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "opiniones" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function OpinionesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="opiniones" data-section="opiniones">
|
||||
<SectionErrorBoundary name="opiniones">
|
||||
<TestimonialTrustCard
|
||||
quote="¡Simplemente fascinada! El color es exacto y la textura increíblemente suave. Son las mejores extensiones que he usado en años."
|
||||
rating={5}
|
||||
author="Sofía C."
|
||||
avatars={[
|
||||
{ name: "Ana", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230959.jpg" },
|
||||
{ name: "Beatriz", imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-girl-with-blonde-wavy-hair-modern-luxury-room-young-woman-smiling-wearing-stylish-elegant-black-dress-with-paillettes-sleeves_197531-2859.jpg" },
|
||||
{ name: "Carla", imageSrc: "http://img.b2bpic.net/free-photo/girl-adult-white-hair-blond_1139-778.jpg" },
|
||||
{ name: "Diana", imageSrc: "http://img.b2bpic.net/free-photo/sexy-woman-lingerie-home_624325-3118.jpg" },
|
||||
{ name: "Elena", imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-femininity-concept-positive-beautiful-young-european-woman-blue-shirt-looking-camera-with-broad-happy-smile-being-good-mood-kitchen-interior-background_343059-2087.jpg" }
|
||||
]}
|
||||
textAnimation="fade-blur"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
23
src/pages/HomePage/sections/PorQueElegirnos.tsx
Normal file
23
src/pages/HomePage/sections/PorQueElegirnos.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "por-que-elegirnos" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function PorQueElegirnosSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="por-que-elegirnos" data-section="por-que-elegirnos">
|
||||
<SectionErrorBoundary name="por-que-elegirnos">
|
||||
<AboutTestimonial
|
||||
tag="Experiencia"
|
||||
quote="Nuestras extensiones son seleccionadas manualmente para asegurar la máxima calidad, suavidad y durabilidad, proporcionando una experiencia de lujo en cada aplicación."
|
||||
author="María Elena"
|
||||
role="Fundadora y Estilista Senior"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg"
|
||||
textAnimation="fade"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
30
src/pages/HomePage/sections/Productos.tsx
Normal file
30
src/pages/HomePage/sections/Productos.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "productos" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ProductosSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="productos" data-section="productos">
|
||||
<SectionErrorBoundary name="productos">
|
||||
<FeaturesImageBento
|
||||
tag="Nuestra Selección"
|
||||
title="Extensiones de alta gama"
|
||||
description="Elige entre nuestra amplia variedad de tonos y texturas diseñadas para mezclarse perfectamente."
|
||||
items={[
|
||||
{ title: "Clip-in Premium", description: "Fáciles y versátiles.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-caucasian-smiling-brunette-woman-model-bright-pink-summer-stylish-clothes-isolated-white-background_158538-2977.jpg" },
|
||||
{ title: "Tape-in Invisible", description: "Efecto natural garantizado.", imageSrc: "http://img.b2bpic.net/free-photo/showing-cute-portrait-fresh-holding_1187-6233.jpg" },
|
||||
{ title: "Keratin Fusion", description: "Durabilidad a largo plazo.", imageSrc: "http://img.b2bpic.net/free-photo/beauty-product-composition-with-basket_23-2147817685.jpg" },
|
||||
{ title: "Micro Rings", description: "Sin adhesivos químicos.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-curly-hair-shampoo_23-2151307479.jpg" },
|
||||
{ title: "Bundles de seda", description: "Brillo incomparable.", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-shiny-flowing-brown-hair-beauty-portrait_23-2151989124.jpg" },
|
||||
{ title: "Kit de Mantenimiento", description: "Todo para tu cuidado.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-eco-friendly-products-assortment_23-2148491140.jpg" },
|
||||
{ title: "Técnicas Personalizadas", description: "Adapta tu diseño.", imageSrc: "http://img.b2bpic.net/free-photo/hairdressing-supplies-spray-bottle_23-2148352921.jpg" },
|
||||
]}
|
||||
textAnimation="fade-blur"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user