{"product_id":"ebbokk","title":"ebbokk","description":"\u003cp\u003eimport { Button } from \"@\/components\/ui\/button\"; import { Heart, Flower2, Sparkles, BookOpen, ArrowRight } from \"lucide-react\"; import { useState } from \"react\"; \/** * Landing Page for \"Cartas a mi niña interior\" Ebook * Premium watercolor aesthetic with warm, compassionate design * Design Philosophy: Emotional resonance, breathing space, authentic femininity *\/ export default function Home() { const [hoveredStation, setHoveredStation] = useState\u003cnumber null=\"\"\u003e(null);\n\n  const stations = [\n    {\n      id: 1,\n      title: \"Volver a encontrarte\",\n      description: \"Reconoce a la niña que fuiste y el viaje que te trajo hasta aquí\",\n      icon: \"🌿\",\n    },\n    {\n      id: 2,\n      title: \"Entender tu historia\",\n      description: \"Descubre las raíces de lo que sientes y por qué reaccionas así\",\n      icon: \"🤍\",\n    },\n    {\n      id: 3,\n      title: \"Tratarte con más amor\",\n      description: \"Aprende a ser tu propia aliada en lugar de tu crítica más dura\",\n      icon: \"🌸\",\n    },\n    {\n      id: 4,\n      title: \"Elegirte de verdad\",\n      description: \"Recuerda que mereces estar en el centro de tu propia vida\",\n      icon: \"🌅\",\n    },\n    {\n      id: 5,\n      title: \"Empezar de nuevo\",\n      description: \"Abre las puertas a una relación transformada contigo misma\",\n      icon: \"🕊️\",\n    },\n  ];\n\n  const benefits = [\n    {\n      title: \"Reflexión Profunda\",\n      description: \"Ejercicios guiados para reconectar con tu verdadero yo\",\n      icon: Heart,\n    },\n    {\n      title: \"Transformación\",\n      description: \"Un viaje de 5 estaciones hacia la autocompasión y el empoderamiento\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Herramientas Prácticas\",\n      description: \"Preguntas para escribir y pasos pequeños que generan grandes cambios\",\n      icon: BookOpen,\n    },\n    {\n      title: \"Diseño Premium\",\n      description: \"Ilustraciones en acuarela y tipografía elegante para una experiencia memorable\",\n      icon: Flower2,\n    },\n  ];\n\n  const testimonials = [\n    {\n      quote: \"Ojalá que, cuando cierres este libro, no solo conozcas mejor a la niña que fuiste.\",\n      author: \"Del Prólogo\",\n    },\n    {\n      quote: \"Nadie nace sintiéndose insuficiente. Esa es una idea que se aprende con el tiempo.\",\n      author: \"Carta 4\",\n    },\n    {\n      quote: \"Tu voz también merece existir. Y todo aquello que durante tantos años quedó guardado en silencio.\",\n      author: \"Carta 1\",\n    },\n  ];\n\n  return (\n    \u003cdiv classname=\"min-h-screen bg-background\"\u003e\n      {\/* Navigation *\/}\n      \u003cnav classname=\"sticky top-0 z-50 bg-white\/80 backdrop-blur-md border-b border-rose-light\/20\"\u003e\n        \u003cdiv classname=\"container mx-auto px-4 py-4 flex items-center justify-between\"\u003e\n          \u003cdiv classname=\"text-2xl font-serif-display text-primary\"\u003eCartas\u003c\/div\u003e\n          \u003cbutton classname=\"bg-primary hover:bg-primary\/90 text-white rounded-full\"\u003e\n            Descargar Ebook\n          \u003c\/button\u003e\n        \u003c\/div\u003e\n      \u003c\/nav\u003e\n\n      {\/* Hero Section *\/}\n      \u003csection classname=\"relative py-20 lg:py-32 overflow-hidden\"\u003e\n        {\/* Background watercolor accent *\/}\n        \u003cdiv classname=\"absolute top-0 right-0 w-96 h-96 bg-lavender-light\/30 rounded-full blur-3xl -z-10\"\u003e\n        \u003cdiv classname=\"absolute bottom-0 left-0 w-72 h-72 bg-rose-light\/20 rounded-full blur-3xl -z-10\"\u003e\n\n        \u003cdiv classname=\"container mx-auto px-4\"\u003e\n          \u003cdiv classname=\"grid lg:grid-cols-2 gap-12 items-center\"\u003e\n            {\/* Text Content *\/}\n            \u003cdiv classname=\"space-y-8\"\u003e\n              \u003cdiv classname=\"space-y-4\"\u003e\n                \u003ch1 classname=\"text-5xl lg:text-6xl font-serif-display text-foreground leading-tight\"\u003e\n                  Cartas a mi{\" \"}\n                  \u003cspan classname=\"text-primary\"\u003eniña interior\u003c\/span\u003e\n                \u003c\/h1\u003e\n                \u003cp classname=\"text-xl text-muted-foreground font-serif-body\"\u003e\n                  Un camino para sanar, soltar y volver a elegirte\n                \u003c\/p\u003e\n              \u003c\/div\u003e\n\n              \u003cp classname=\"text-lg text-foreground\/80 leading-relaxed max-w-lg\"\u003e\n                Un ebook premium diseñado para acompañarte en el viaje hacia la autocompasión, \n                la sanación y el reencuentro con tu verdadero yo. A través de 5 estaciones transformadoras \n                y reflexiones profundas, aprenderás a elegirte a ti misma con amor.\n              \u003c\/p\u003e\n\n              \u003cdiv classname=\"flex flex-col sm:flex-row gap-4 pt-4\"\u003e\n                \u003cbutton size=\"lg\" classname=\"bg-primary hover:bg-primary\/90 text-white rounded-full px-8 group\"\u003e\n                  Comienza tu viaje\n                  \u003carrowright classname=\"ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform\"\u003e\n                \u003c\/arrowright\u003e\u003c\/button\u003e\n                \u003cbutton size=\"lg\" variant=\"outline\" classname=\"border-primary text-primary hover:bg-rose-light\/10 rounded-full px-8\"\u003e\n                  Ver vista previa\n                \u003c\/button\u003e\n              \u003c\/div\u003e\n\n              \u003cdiv classname=\"flex items-center gap-6 pt-8 text-sm text-muted-foreground\"\u003e\n                \u003cdiv classname=\"flex items-center gap-2\"\u003e\n                  \u003cbookopen classname=\"w-4 h-4 text-primary\"\u003e\n                  \u003cspan\u003e81 páginas premium\u003c\/span\u003e\n                \u003c\/bookopen\u003e\n\u003c\/div\u003e\n                \u003cdiv classname=\"flex items-center gap-2\"\u003e\n                  \u003csparkles classname=\"w-4 h-4 text-primary\"\u003e\n                  \u003cspan\u003eIlustraciones en acuarela\u003c\/span\u003e\n                \u003c\/sparkles\u003e\n\u003c\/div\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            {\/* Hero Image Placeholder - Will be replaced with ebook cover *\/}\n            \u003cdiv classname=\"relative h-96 lg:h-full min-h-96 rounded-2xl overflow-hidden shadow-2xl\"\u003e\n              \u003cdiv classname=\"absolute inset-0 bg-gradient-to-br from-primary\/20 via-accent\/10 to-secondary\/20\"\u003e\n              \u003cdiv classname=\"absolute inset-0 flex items-center justify-center\"\u003e\n                \u003cdiv classname=\"text-center space-y-4\"\u003e\n                  \u003cflower2 classname=\"w-24 h-24 text-primary\/40 mx-auto\"\u003e\n                  \u003cp classname=\"text-muted-foreground\"\u003ePortada del Ebook\u003c\/p\u003e\n                \u003c\/flower2\u003e\n\u003c\/div\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\u003c\/section\u003e\n\n      {\/* Divider *\/}\n      \u003cdiv classname=\"h-px bg-gradient-to-r from-transparent via-border to-transparent\"\u003e\n\n      {\/* Value Proposition - The 5 Stations *\/}\n      \u003csection classname=\"py-20 lg:py-32 bg-gradient-to-b from-transparent to-lavender-light\/10\"\u003e\n        \u003cdiv classname=\"container mx-auto px-4\"\u003e\n          \u003cdiv classname=\"text-center space-y-4 mb-16\"\u003e\n            \u003ch2 classname=\"text-4xl lg:text-5xl font-serif-display text-foreground\"\u003e\n              Las 5 Estaciones del Viaje\n            \u003c\/h2\u003e\n            \u003cp classname=\"text-lg text-muted-foreground max-w-2xl mx-auto\"\u003e\n              Un recorrido transformador hacia la autocompasión y el reencuentro contigo misma\n            \u003c\/p\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv classname=\"grid md:grid-cols-2 lg:grid-cols-5 gap-6\"\u003e\n            {stations.map((station, idx) =\u0026gt; (\n              \u003cdiv key=\"{station.id}\" classname=\"group relative\" onmouseenter=\"{()\"\u003e setHoveredStation(station.id)}\n                onMouseLeave={() =\u0026gt; setHoveredStation(null)}\n              \u0026gt;\n                \u003cdiv classname=\"{`h-full\" p-6=\"\" rounded-xl=\"\" border=\"\" transition-all=\"\" duration-300=\"\" hoveredstation=\"==\" station.id=\"\" bg-rose-light=\"\" shadow-lg=\"\" scale-105 :=\"\" bg-white=\"\" hover:border-primary=\"\"\u003e\n                  \u003cdiv classname=\"text-4xl mb-4\"\u003e{station.icon}\u003c\/div\u003e\n                  \u003ch3 classname=\"font-serif-display text-lg text-foreground mb-3\"\u003e\n                    {station.title}\n                  \u003c\/h3\u003e\n                  \u003cp classname=\"text-sm text-muted-foreground leading-relaxed\"\u003e\n                    {station.description}\n                  \u003c\/p\u003e\n                  \u003cdiv classname=\"mt-4 text-xs font-medium text-primary opacity-0 group-hover:opacity-100 transition-opacity\"\u003e\n                    Estación {idx + 1}\n                  \u003c\/div\u003e\n                \u003c\/div\u003e\n              \u003c\/div\u003e\n            ))}\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      {\/* Benefits Section *\/}\n      \u003csection classname=\"py-20 lg:py-32\"\u003e\n        \u003cdiv classname=\"container mx-auto px-4\"\u003e\n          \u003cdiv classname=\"text-center space-y-4 mb-16\"\u003e\n            \u003ch2 classname=\"text-4xl lg:text-5xl font-serif-display text-foreground\"\u003e\n              ¿Qué encontrarás en este ebook?\n            \u003c\/h2\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv classname=\"grid md:grid-cols-2 gap-8\"\u003e\n            {benefits.map((benefit, idx) =\u0026gt; {\n              const Icon = benefit.icon;\n              return (\n                \u003cdiv key=\"{idx}\" classname=\"group p-8 rounded-xl border border-border hover:border-primary\/50 bg-white hover:bg-rose-light\/5 transition-all duration-300\"\u003e\n                  \u003cdiv classname=\"flex items-start gap-4\"\u003e\n                    \u003cdiv classname=\"p-3 rounded-lg bg-primary\/10 group-hover:bg-primary\/20 transition-colors\"\u003e\n                      \u003cicon classname=\"w-6 h-6 text-primary\"\u003e\n                    \u003c\/icon\u003e\n\u003c\/div\u003e\n                    \u003cdiv classname=\"flex-1\"\u003e\n                      \u003ch3 classname=\"font-serif-display text-xl text-foreground mb-2\"\u003e\n                        {benefit.title}\n                      \u003c\/h3\u003e\n                      \u003cp classname=\"text-muted-foreground leading-relaxed\"\u003e\n                        {benefit.description}\n                      \u003c\/p\u003e\n                    \u003c\/div\u003e\n                  \u003c\/div\u003e\n                \u003c\/div\u003e\n              );\n            })}\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      {\/* Testimonials Section *\/}\n      \u003csection classname=\"py-20 lg:py-32 bg-gradient-to-b from-lavender-light\/10 to-transparent\"\u003e\n        \u003cdiv classname=\"container mx-auto px-4\"\u003e\n          \u003cdiv classname=\"text-center space-y-4 mb-16\"\u003e\n            \u003ch2 classname=\"text-4xl lg:text-5xl font-serif-display text-foreground\"\u003e\n              Palabras del Ebook\n            \u003c\/h2\u003e\n            \u003cp classname=\"text-lg text-muted-foreground\"\u003e\n              Fragmentos que resuenan en el corazón\n            \u003c\/p\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv classname=\"grid md:grid-cols-3 gap-8\"\u003e\n            {testimonials.map((testimonial, idx) =\u0026gt; (\n              \u003cdiv key=\"{idx}\" classname=\"p-8 rounded-xl border border-border bg-white hover:shadow-lg transition-shadow\"\u003e\n                \u003cdiv classname=\"mb-4 text-primary text-3xl\"\u003e\"\u003c\/div\u003e\n                \u003cp classname=\"font-serif-italic text-lg text-foreground mb-6 leading-relaxed\"\u003e\n                  {testimonial.quote}\n                \u003c\/p\u003e\n                \u003cp classname=\"text-sm text-muted-foreground font-medium\"\u003e\n                  — {testimonial.author}\n                \u003c\/p\u003e\n              \u003c\/div\u003e\n            ))}\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      {\/* Final CTA Section *\/}\n      \u003csection classname=\"py-20 lg:py-32 relative overflow-hidden\"\u003e\n        \u003cdiv classname=\"absolute top-0 right-0 w-96 h-96 bg-primary\/10 rounded-full blur-3xl -z-10\"\u003e\n        \u003cdiv classname=\"absolute bottom-0 left-0 w-72 h-72 bg-accent\/10 rounded-full blur-3xl -z-10\"\u003e\n\n        \u003cdiv classname=\"container mx-auto px-4\"\u003e\n          \u003cdiv classname=\"max-w-2xl mx-auto text-center space-y-8\"\u003e\n            \u003cdiv classname=\"space-y-4\"\u003e\n              \u003ch2 classname=\"text-4xl lg:text-5xl font-serif-display text-foreground\"\u003e\n                Tu niña interior te está esperando\n              \u003c\/h2\u003e\n              \u003cp classname=\"text-xl text-muted-foreground\"\u003e\n                Cada página es un acto de amor hacia ti misma. Comienza tu viaje de sanación hoy.\n              \u003c\/p\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv classname=\"flex flex-col sm:flex-row gap-4 justify-center pt-8\"\u003e\n              \u003cbutton size=\"lg\" classname=\"bg-primary hover:bg-primary\/90 text-white rounded-full px-12 group\"\u003e\n                Descargar Ahora\n                \u003carrowright classname=\"ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform\"\u003e\n              \u003c\/arrowright\u003e\u003c\/button\u003e\n              \u003cbutton size=\"lg\" variant=\"outline\" classname=\"border-primary text-primary hover:bg-rose-light\/10 rounded-full px-12\"\u003e\n                Más información\n              \u003c\/button\u003e\n            \u003c\/div\u003e\n\n            \u003cp classname=\"text-sm text-muted-foreground pt-4\"\u003e\n              Formato PDF premium • 81 páginas • Ilustraciones en acuarela • Listo para impresión\n            \u003c\/p\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n\u003c\/div\u003e\u003c\/section\u003e\n\n      {\/* Footer *\/}\n      \u003cfooter classname=\"border-t border-border bg-white py-12\"\u003e\n        \u003cdiv classname=\"container mx-auto px-4\"\u003e\n          \u003cdiv classname=\"grid md:grid-cols-3 gap-8 mb-8\"\u003e\n            \u003cdiv\u003e\n              \u003ch3 classname=\"font-serif-display text-lg text-foreground mb-4\"\u003eCartas\u003c\/h3\u003e\n              \u003cp classname=\"text-sm text-muted-foreground\"\u003e\n                Un ebook premium para la sanación y el reencuentro contigo misma.\n              \u003c\/p\u003e\n            \u003c\/div\u003e\n            \u003cdiv\u003e\n              \u003ch4 classname=\"font-medium text-foreground mb-4\"\u003eEnlaces\u003c\/h4\u003e\n              \u003cul classname=\"space-y-2 text-sm text-muted-foreground\"\u003e\n                \u003cli\u003e\u003ca href=\"#\" classname=\"hover:text-primary transition-colors\"\u003eInicio\u003c\/a\u003e\u003c\/li\u003e\n                \u003cli\u003e\u003ca href=\"#\" classname=\"hover:text-primary transition-colors\"\u003eVista previa\u003c\/a\u003e\u003c\/li\u003e\n                \u003cli\u003e\u003ca href=\"#\" classname=\"hover:text-primary transition-colors\"\u003eContacto\u003c\/a\u003e\u003c\/li\u003e\n              \u003c\/ul\u003e\n            \u003c\/div\u003e\n            \u003cdiv\u003e\n              \u003ch4 classname=\"font-medium text-foreground mb-4\"\u003eSíguenos\u003c\/h4\u003e\n              \u003cul classname=\"space-y-2 text-sm text-muted-foreground\"\u003e\n                \u003cli\u003e\u003ca href=\"#\" classname=\"hover:text-primary transition-colors\"\u003eInstagram\u003c\/a\u003e\u003c\/li\u003e\n                \u003cli\u003e\u003ca href=\"#\" classname=\"hover:text-primary transition-colors\"\u003eFacebook\u003c\/a\u003e\u003c\/li\u003e\n                \u003cli\u003e\u003ca href=\"#\" classname=\"hover:text-primary transition-colors\"\u003eEmail\u003c\/a\u003e\u003c\/li\u003e\n              \u003c\/ul\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv classname=\"border-t border-border pt-8 text-center text-sm text-muted-foreground\"\u003e\n            \u003cp\u003e© 2026 Claro y Simple. Todos los derechos reservados.\u003c\/p\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/footer\u003e\n    \u003c\/div\u003e\n  );\u003c\/div\u003e\u003c\/number\u003e\u003c\/p\u003e","brand":"Mi tienda","offers":[{"title":"Default Title","offer_id":51567705161957,"sku":null,"price":20000.0,"currency_code":"ARS","in_stock":false}],"url":"https:\/\/claroysimple.digital\/products\/ebbokk","provider":"Mi tienda","version":"1.0","type":"link"}