Merge version_2_1781708358657 into main #2
@@ -1,238 +1,33 @@
|
||||
import AboutText from '@/components/sections/about/AboutText';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
|
||||
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
|
||||
import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
|
||||
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 CategoriesSection from './HomePage/sections/Categories';
|
||||
import AboutSection from './HomePage/sections/About';
|
||||
import ProductsSection from './HomePage/sections/Products';
|
||||
import BenefitsSection from './HomePage/sections/Benefits';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import SubscriptionSection from './HomePage/sections/Subscription';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplitMediaGrid
|
||||
tag="Bienestar Natural"
|
||||
title="Conectando bienestar y naturaleza"
|
||||
description="Productos botánicos cuidadosamente seleccionados para enriquecer tu estilo de vida."
|
||||
primaryButton={{
|
||||
text: "Explorar productos",
|
||||
href: "#products",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Conocer más",
|
||||
href: "#about",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-still-life-with-herbal-medicine_23-2149292044.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vacation-tourism-leisure-concept-happy-relaxed-attractive-tanned-brunette-woman-glasses-lying-hotel-lounge-zone-cafe-terrace-put-feet-coffee-table-smiling-feeling-paradise_197531-30314.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="categories" data-section="categories">
|
||||
<SectionErrorBoundary name="categories">
|
||||
<FeaturesBentoGrid
|
||||
tag="Colecciones"
|
||||
title="Categorías destacadas"
|
||||
description="Explora nuestra selección curada de productos inspirados en la naturaleza."
|
||||
features={[
|
||||
{
|
||||
title: "Plantas",
|
||||
description: "Vida verde para tu hogar.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/office-plant-cupboard_23-2148003037.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
title: "Bienestar Natural",
|
||||
description: "Esencias y cuidados.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wooden-spoon-with-herbs-arrangement_23-2149339766.jpg",
|
||||
},
|
||||
{
|
||||
title: "Productos Botánicos",
|
||||
description: "Ingredientes orgánicos puros.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/natural-cbd-oil-dropper-assortment_23-2149013567.jpg",
|
||||
},
|
||||
{
|
||||
title: "Regalos Especiales",
|
||||
description: "Detalles con alma.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-making-pretty-floral-arrangement_23-2148846542.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<CategoriesSection />
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutText
|
||||
title="Nuestra misión es conectar tu estilo de vida con la sabiduría de la botánica, priorizando siempre la sostenibilidad y el origen responsable de cada componente."
|
||||
primaryButton={{
|
||||
text: "Conoce nuestra historia",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<AboutSection />
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<SectionErrorBoundary name="products">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Tienda"
|
||||
title="Productos destacados"
|
||||
description="Elige lo mejor de la naturaleza."
|
||||
items={[
|
||||
{
|
||||
title: "Aceite esencial",
|
||||
description: "$25",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-arrangement-argan-oil-care-product_23-2148955832.jpg",
|
||||
},
|
||||
{
|
||||
title: "Difusor",
|
||||
description: "$45",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aroma-oil-diffuser-lamp-blurred-background-interior-room_169016-30279.jpg",
|
||||
},
|
||||
{
|
||||
title: "Serum botánico",
|
||||
description: "$35",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-skin-regeneration-products_23-2151242181.jpg",
|
||||
},
|
||||
{
|
||||
title: "Vela de soja",
|
||||
description: "$20",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-advent-wreath-ornaments-still-life_23-2150820774.jpg",
|
||||
},
|
||||
{
|
||||
title: "Jabón artesanal",
|
||||
description: "$15",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-with-festive-wrapped-christmas-gift_23-2149161152.jpg",
|
||||
},
|
||||
{
|
||||
title: "Kit de inicio",
|
||||
description: "$80",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gift-set-with-candles-vase-holiday_169016-18658.jpg",
|
||||
},
|
||||
{
|
||||
title: "Infusión herbal",
|
||||
description: "$12",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dry-tea-leaves-glass_114579-70343.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ProductsSection />
|
||||
|
||||
<div id="benefits" data-section="benefits">
|
||||
<SectionErrorBoundary name="benefits">
|
||||
<MetricsMediaCards
|
||||
tag="Nuestros Valores"
|
||||
title="Por qué elegirnos"
|
||||
description="Calidad y compromiso en cada entrega."
|
||||
metrics={[
|
||||
{
|
||||
value: "Premium",
|
||||
title: "Calidad superior",
|
||||
description: "Solo los mejores ingredientes naturales.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/plant-based-business-logo-vector-food-packaging-sticker_53876-126717.jpg",
|
||||
},
|
||||
{
|
||||
value: "Ético",
|
||||
title: "Origen responsable",
|
||||
description: "Comercio justo con proveedores locales.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ouija-board-flowers-arrangement_23-2149486491.jpg",
|
||||
},
|
||||
{
|
||||
value: "Veloz",
|
||||
title: "Entrega rápida",
|
||||
description: "Tu pedido en la puerta de casa.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/city-transport-concept-with-plane_23-2148996468.jpg",
|
||||
},
|
||||
{
|
||||
value: "Cercano",
|
||||
title: "Atención personalizada",
|
||||
description: "Estamos aquí para asesorarte.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/linear-flat-people-faces-professions-illustration_1416-527.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<BenefitsSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialOverlayCards
|
||||
tag="Comunidad"
|
||||
title="Testimonios de nuestros clientes"
|
||||
description="Lo que dicen de The Botanical Co."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Miller",
|
||||
role: "Cliente frecuente",
|
||||
company: "Lifestyle",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gentle-portrait-beautiful-young-woman-with-big-breasts-beige-suit-white-lace-bra-sits-chair-gray-white_343596-3214.jpg",
|
||||
},
|
||||
{
|
||||
name: "John Doe",
|
||||
role: "Diseñador",
|
||||
company: "Estudio N",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-handsome-businessman-blue-red-light_158595-4820.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena R.",
|
||||
role: "Empresaria",
|
||||
company: "EcoHub",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-posing-house_344912-1165.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mario Gómez",
|
||||
role: "Consultor",
|
||||
company: "BioGroup",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/transgender-person-wearing-red-jacket_23-2148827069.jpg",
|
||||
},
|
||||
{
|
||||
name: "Ana Sofia",
|
||||
role: "Arquitecta",
|
||||
company: "Diseño S",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="subscription" data-section="subscription">
|
||||
<SectionErrorBoundary name="subscription">
|
||||
<ContactCta
|
||||
tag="Newsletter"
|
||||
text="Únete a nuestra comunidad y recibe novedades, promociones y contenido exclusivo sobre bienestar natural."
|
||||
primaryButton={{
|
||||
text: "Suscribirme",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contáctanos",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<SubscriptionSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
72
src/pages/HomePage/sections/About.tsx
Normal file
72
src/pages/HomePage/sections/About.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import Tag from "@/components/ui/Tag";
|
||||
|
||||
const primaryButton = {
|
||||
text: "Conoce nuestra historia",
|
||||
href: "#"
|
||||
};
|
||||
|
||||
interface AboutTextProps {
|
||||
title: string;
|
||||
primaryButton?: { text: string; href: string };
|
||||
secondaryButton?: { text: string; href: string };
|
||||
}
|
||||
|
||||
const AboutInline = () => {
|
||||
return (
|
||||
<section aria-label="About section" className="py-24 bg-background">
|
||||
<div className="w-content-width mx-auto px-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="relative aspect-[4/5] w-full rounded-radius-lg overflow-hidden">
|
||||
<ImageOrVideo
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-still-life-with-herbal-medicine_23-2149292044.jpg"
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col items-start gap-6">
|
||||
<Tag text="Quiénes Somos" />
|
||||
<TextAnimation
|
||||
variant="slide-up"
|
||||
gradientText={false}
|
||||
tag="h2"
|
||||
text="Nuestra Historia"
|
||||
className="text-4xl md:text-5xl font-bold text-foreground"
|
||||
/>
|
||||
<div className="text-lg text-muted-foreground space-y-4">
|
||||
<p>
|
||||
Nuestra misión es conectar tu estilo de vida con la sabiduría de la botánica, priorizando siempre la sostenibilidad y el origen responsable de cada componente.
|
||||
</p>
|
||||
<ul className="space-y-2 mt-4">
|
||||
<li className="flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-primary-cta" />
|
||||
<span>Misión y Valores</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-primary-cta" />
|
||||
<span>Compromiso con la sostenibilidad</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-primary-cta" />
|
||||
<span>Compromiso con la calidad</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" className="mt-4" />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function AboutSection() {
|
||||
return (
|
||||
<div data-webild-section="about" id="about">
|
||||
<AboutInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
46
src/pages/HomePage/sections/Benefits.tsx
Normal file
46
src/pages/HomePage/sections/Benefits.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "benefits" section.
|
||||
|
||||
import React from 'react';
|
||||
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function BenefitsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="benefits" data-section="benefits">
|
||||
<SectionErrorBoundary name="benefits">
|
||||
<MetricsMediaCards
|
||||
tag="Nuestros Valores"
|
||||
title="Por qué elegirnos"
|
||||
description="Calidad y compromiso en cada entrega."
|
||||
metrics={[
|
||||
{
|
||||
value: "Premium",
|
||||
title: "Calidad superior",
|
||||
description: "Solo los mejores ingredientes naturales.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/plant-based-business-logo-vector-food-packaging-sticker_53876-126717.jpg",
|
||||
},
|
||||
{
|
||||
value: "Ético",
|
||||
title: "Origen responsable",
|
||||
description: "Comercio justo con proveedores locales.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ouija-board-flowers-arrangement_23-2149486491.jpg",
|
||||
},
|
||||
{
|
||||
value: "Veloz",
|
||||
title: "Entrega rápida",
|
||||
description: "Tu pedido en la puerta de casa.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/city-transport-concept-with-plane_23-2148996468.jpg",
|
||||
},
|
||||
{
|
||||
value: "Cercano",
|
||||
title: "Atención personalizada",
|
||||
description: "Estamos aquí para asesorarte.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/linear-flat-people-faces-professions-illustration_1416-527.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
42
src/pages/HomePage/sections/Categories.tsx
Normal file
42
src/pages/HomePage/sections/Categories.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "categories" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function CategoriesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="categories" data-section="categories">
|
||||
<SectionErrorBoundary name="categories">
|
||||
<FeaturesBentoGrid
|
||||
tag="Colecciones"
|
||||
title="Categorías destacadas"
|
||||
description="Explora nuestra selección curada de productos inspirados en la naturaleza."
|
||||
features={[
|
||||
{
|
||||
title: "Plantas",
|
||||
description: "Vida verde para tu hogar.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/office-plant-cupboard_23-2148003037.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
title: "Bienestar Natural",
|
||||
description: "Esencias y cuidados.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wooden-spoon-with-herbs-arrangement_23-2149339766.jpg",
|
||||
},
|
||||
{
|
||||
title: "Productos Botánicos",
|
||||
description: "Ingredientes orgánicos puros.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/natural-cbd-oil-dropper-assortment_23-2149013567.jpg",
|
||||
},
|
||||
{
|
||||
title: "Regalos Especiales",
|
||||
description: "Detalles con alma.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-making-pretty-floral-arrangement_23-2148846542.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
36
src/pages/HomePage/sections/Hero.tsx
Normal file
36
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
// 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 HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplitMediaGrid
|
||||
tag="Bienestar Natural"
|
||||
title="Conectando bienestar y naturaleza"
|
||||
description="Productos botánicos cuidadosamente seleccionados para enriquecer tu estilo de vida."
|
||||
primaryButton={{
|
||||
text: "Explorar productos",
|
||||
href: "#products",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Conocer más",
|
||||
href: "#about",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-still-life-with-herbal-medicine_23-2149292044.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vacation-tourism-leisure-concept-happy-relaxed-attractive-tanned-brunette-woman-glasses-lying-hotel-lounge-zone-cafe-terrace-put-feet-coffee-table-smiling-feeling-paradise_197531-30314.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
161
src/pages/HomePage/sections/Products.tsx
Normal file
161
src/pages/HomePage/sections/Products.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "Aceite esencial",
|
||||
description: "$25",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-arrangement-argan-oil-care-product_23-2148955832.jpg"
|
||||
},
|
||||
{
|
||||
title: "Difusor",
|
||||
description: "$45",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aroma-oil-diffuser-lamp-blurred-background-interior-room_169016-30279.jpg"
|
||||
},
|
||||
{
|
||||
title: "Serum botánico",
|
||||
description: "$35",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-skin-regeneration-products_23-2151242181.jpg"
|
||||
},
|
||||
{
|
||||
title: "Vela de soja",
|
||||
description: "$20",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-advent-wreath-ornaments-still-life_23-2150820774.jpg"
|
||||
},
|
||||
{
|
||||
title: "Jabón artesanal",
|
||||
description: "$15",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-with-festive-wrapped-christmas-gift_23-2149161152.jpg"
|
||||
},
|
||||
{
|
||||
title: "Kit de inicio",
|
||||
description: "$80",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gift-set-with-candles-vase-holiday_169016-18658.jpg"
|
||||
},
|
||||
{
|
||||
title: "Infusión herbal",
|
||||
description: "$12",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dry-tea-leaves-glass_114579-70343.jpg"
|
||||
}
|
||||
];
|
||||
|
||||
type FeatureItem = {
|
||||
title: string;
|
||||
description: string;
|
||||
href: string;
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
interface FeaturesRevealCardsBentoProps {
|
||||
tag: string;
|
||||
title: string;
|
||||
description: string;
|
||||
primaryButton?: { text: string; href: string };
|
||||
secondaryButton?: { text: string; href: string };
|
||||
items: [FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem];
|
||||
}
|
||||
|
||||
const FeaturesRevealCardsBento = () => {
|
||||
const gridClasses = [
|
||||
"md:col-span-2",
|
||||
"md:col-span-4",
|
||||
"md:col-span-3",
|
||||
"md:col-span-3",
|
||||
"md:col-span-2",
|
||||
"md:col-span-2",
|
||||
"md:col-span-2",
|
||||
];
|
||||
|
||||
const staggerDelays = [
|
||||
0,
|
||||
0.1,
|
||||
0,
|
||||
0.1,
|
||||
0,
|
||||
0.1,
|
||||
0.2,
|
||||
];
|
||||
|
||||
return (
|
||||
<section aria-label="Features reveal cards bento section" className="py-20">
|
||||
<div className="flex flex-col gap-8 md:gap-10">
|
||||
<div className="flex flex-col items-center w-content-width mx-auto gap-2">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{"Tienda"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"Productos destacados"}
|
||||
variant="fade-blur"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
text={"Elige lo mejor de la naturaleza."}
|
||||
variant="fade-blur"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
|
||||
/>
|
||||
|
||||
{(undefined || undefined) && (
|
||||
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
|
||||
{undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
|
||||
{undefined && <Button text={undefined.text} href={undefined.href} variant="secondary" animationDelay={0.1} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-content-width mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
|
||||
{items.map((item, index) => (
|
||||
<ScrollReveal
|
||||
key={index}
|
||||
variant="fade-blur"
|
||||
delay={0.1 * (index % 4)}
|
||||
className="col-span-1"
|
||||
>
|
||||
<div className="group relative flex flex-col h-full overflow-hidden card rounded-radius-lg border border-border">
|
||||
<div className="relative aspect-square overflow-hidden">
|
||||
<ImageOrVideo
|
||||
imageSrc={item.imageSrc}
|
||||
videoSrc={item.videoSrc}
|
||||
className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-6 flex flex-col items-center text-center gap-4 flex-grow">
|
||||
<h3 className="text-xl font-semibold text-foreground">{item.title}</h3>
|
||||
<p className="text-lg text-muted-foreground">{item.description}</p>
|
||||
<div className="flex flex-col w-full gap-2 mt-auto pt-4">
|
||||
<Button text="Agregar al carrito" variant="primary" className="w-full" />
|
||||
<Button text="Ver detalles" variant="secondary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function ProductsSection() {
|
||||
return (
|
||||
<div data-webild-section="products" id="products">
|
||||
<FeaturesRevealCardsBento />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
src/pages/HomePage/sections/Subscription.tsx
Normal file
27
src/pages/HomePage/sections/Subscription.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "subscription" section.
|
||||
|
||||
import React from 'react';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function SubscriptionSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="subscription" data-section="subscription">
|
||||
<SectionErrorBoundary name="subscription">
|
||||
<ContactCta
|
||||
tag="Newsletter"
|
||||
text="Únete a nuestra comunidad y recibe novedades, promociones y contenido exclusivo sobre bienestar natural."
|
||||
primaryButton={{
|
||||
text: "Suscribirme",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contáctanos",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
57
src/pages/HomePage/sections/Testimonials.tsx
Normal file
57
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
// 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 TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialOverlayCards
|
||||
tag="Comunidad"
|
||||
title="Testimonios de nuestros clientes"
|
||||
description="Lo que dicen de The Botanical Co."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Miller",
|
||||
role: "Cliente frecuente",
|
||||
company: "Lifestyle",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gentle-portrait-beautiful-young-woman-with-big-breasts-beige-suit-white-lace-bra-sits-chair-gray-white_343596-3214.jpg",
|
||||
},
|
||||
{
|
||||
name: "John Doe",
|
||||
role: "Diseñador",
|
||||
company: "Estudio N",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-handsome-businessman-blue-red-light_158595-4820.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena R.",
|
||||
role: "Empresaria",
|
||||
company: "EcoHub",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-posing-house_344912-1165.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mario Gómez",
|
||||
role: "Consultor",
|
||||
company: "BioGroup",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/transgender-person-wearing-red-jacket_23-2148827069.jpg",
|
||||
},
|
||||
{
|
||||
name: "Ana Sofia",
|
||||
role: "Arquitecta",
|
||||
company: "Diseño S",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user