# Componentes deluxe — Supplements Shop **Documento canónico de cada componente que hace al producto de primera línea.** Sirve como referencia para iterar y como plantilla para futuros productos shop-style. > Filosofía BewPro: producto simple, directo a la solución. Sin fricciones, sin promesas vacías, sin elementos decorativos que no aporten al objetivo comercial. --- ## A. WELCOME — Homepage ### A1. Hero Shop **Inspiración**: `optimumnutrition.com` (overlay oscuro + 2 CTAs) + `1stphorm.com` (foto atleta + urgencia). **Anatomía**: ``` ┌────────────────────────────────────────────────────┐ │ [Background image overlay 0.55] │ │ │ │ HEADLINE UPPERCASE GRANDE │ ← clamp(2.5, 6vw, 4.5rem) │ Subheadline normal-weight │ ← clamp(1.1, 2vw, 1.5rem) │ Caption opcional 540px max-width │ │ │ │ [COMPRAR AHORA] [WhatsApp] │ ← btn primary + outline-light │ │ │ ✓ Envíos ✓ ANMAT ✓ Asesoramiento │ ← trust signals fs-7 │ │ └────────────────────────────────────────────────────┘ • • o • ← carousel dots ``` **Customización**: - Settings `site.welcome.hero1_headline/subheadline/caption` (2 slides default) - CTAs configurables: `cta_primary_label/url` + `cta_secondary_label/url` - Por default secondary apunta a `wa.me/{contact.phone}` si existe - Altura desktop 680px (era 650px en medical) — más cinematic **Must-have**: - Overlay 0.55 (no 0.3) — protagonismo del texto - Headline UPPERCASE letter-spacing -1px - 2 CTAs (uno primario fuerte, uno secundario sutil) - Trust signals con icons en fila — "Por qué confiar" --- ### A2. Featured Products Grid **Inspiración**: ON "Bestsellers Trusted by Athletes". **Anatomía**: ``` PRODUCTOS DESTACADOS ← heading uppercase 800 weight Los más elegidos por nuestros clientes ┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐ │ [NUEVO]│ │ │ │ │ │ │ │ IMG │ │ IMG │ │ IMG │ │ IMG │ ← aspect 1/1 cuadrado │ │ │ │ │ │ │ │ ├───────┤ ├───────┤ ├───────┤ ├───────┤ │categ. │ │ │ │ │ │ │ │Title │ │ │ │ │ │ │ │$28500 │ │ │ │ │ │ │ ← precio prominente + btn-cart │ [🛒]│ │ │ │ │ │ │ └───────┘ └───────┘ └───────┘ └───────┘ [Ver todos los productos →] ← CTA outline-dark ``` **Customización**: - Heading configurable: `site.welcome.featured_heading + subtitle` - Products query: `Product::is_active=true ORDER BY id DESC LIMIT 4` - Si module products inactivo o no hay productos, sección no se renderiza **Must-have**: - Imagen cuadrada (1/1) — estándar e-commerce - Hover: imagen scale(1.05) + card translateY(-4px) + border accent - Add-to-cart inline (botón compacto, no form expandido) - Badge esquina superior izquierda (NUEVO/DIGITAL/AGOTADO) --- ### A3. Shop by Goal **Inspiración**: ON "What Are You Training For?" + 1stPhorm "SHOP BY GOALS". **Anatomía**: ``` ¿CUÁL ES TU OBJETIVO? Comprá por categoría según lo que querés lograr ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ │ │ │ │ │ │ │ │ [IMG] │ │ [IMG] │ │ [IMG] │ │ [IMG] │ ← aspect 1/1 │ │ │ │ │ │ │ │ │ ▔▔▔▔▔▔▔▔ │ │ ▔▔▔▔▔▔▔▔ │ │ ▔▔▔▔▔▔▔▔ │ │ ▔▔▔▔▔▔▔▔ │ ← gradient │ AUMENTAR │ │ DEFINICIÓN │ │ SALUD │ │RENDIMIENTO│ │ MASA → │ │ → │ │ DIARIA → │ │ → │ └────────────┘ └────────────┘ └────────────┘ └────────────┘ ``` **Customización**: - Goals hardcoded en blade (4 cards). Para customizar: - Edit `welcome.blade.php` `$shopByGoals` array (futuro: settings) - Cada goal tiene: title, subtitle, image, url **Must-have**: - Imagen + overlay gradient bottom-to-top con dark - Title UPPERCASE white sobre overlay - Hover: imagen scale(1.06) + opacity reduce - Linkea a `/products-catalogue/category/{slug}` para conversión directa --- ### A4. Athlete Spotlight **Inspiración**: ON "Train Like the Best — Dan Sheehan". **Anatomía**: ``` ┌─────────────────────────┬─────────────────────────┐ │ │ │ │ │ HISTORIAS REALES │ ← eyebrow letter-spacing 2px │ │ │ │ [BIG IMAGE] │ CLIENTES QUE NOS │ ← heading uppercase 800 │ overlay 0.3 │ RECOMIENDAN │ │ │ │ │ │ "Quote del cliente │ ← blockquote 1.1rem │ │ real del rubro..." │ │ │ │ │ │ │ Manuel R. │ ← accent bar + nombre │ │ │ Atleta amateur │ │ │ │ │ │ [Ver Producto] → │ ← CTA outline-light └─────────────────────────┴─────────────────────────┘ ``` **Customización**: - Settings: `athlete_enabled, athlete_name, athlete_title, athlete_quote, athlete_image, athlete_product_name, athlete_product_url` **Must-have**: - Split-screen 50/50 (imagen grande + texto) - Right side bg dark dramatic (#191919) - Eyebrow uppercase letter-spacing 2px en opacity 0.6 - Accent bar lateral (tertiary color) en attribution - CTA al producto recomendado por el cliente --- ### A5. Brands Gallery **Inspiración**: 1stPhorm brand bar / ON marca-partners. **Anatomía**: ``` NUESTRAS MARCAS Solo distribuidores oficiales y marcas certificadas ANMAT ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ LOGO │ │ LOGO │ │ LOGO │ │ LOGO │ │ LOGO │ │ LOGO │ ← grayscale 100% │ │ │ │ │ │ │ │ │ │ │ │ ← hover: color + border primary └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ ``` **Customización**: - Settings `site.welcome.brands_list` → array `[{name, logo}]` - Default placeholder con 6 marcas argentinas comunes: Star Nutrition, ENA Sport, Gentech, Universal, BSc, Pure Nutrition - Si no hay logo, fallback texto del nombre uppercase letter-spacing 1 **Must-have**: - Aspect 3/2 uniforme entre cards - Grayscale + opacity 0.6 en idle - Hover: grayscale 0 + opacity 1 + border primary + translateY(-2px) --- ### A6. Newsletter Capture **Inspiración**: ON / 1stPhorm "Join the community". **Anatomía**: ``` ┌──────────────────────────────────────────────────────┐ │ [bg primary color] │ │ │ │ SUMATE A LA COMUNIDAD [email____] [SUSCRIBIR]│ │ Recibí guías, novedades y │ │ descuentos exclusivos │ │ │ │ 🔒 No spam. │ └──────────────────────────────────────────────────────┘ ``` **Customización**: - Settings: `newsletter_enabled, newsletter_heading, newsletter_subtitle` - POST a endpoint existente `/newsletter-subscribe` **Must-have**: - bg primary color para protagonismo - Form input + submit single-line (input-group) - Microcopy "No spam, cancelás cuando quieras" + icono lock --- ### A7. About Preview **Inspiración**: About 1stPhorm con 3 pilares. **Anatomía**: ``` ┌──────────────────────────────────┬──────────────┐ │ Sobre nosotros │ │ │ PASIÓN POR EL DEPORTE... │ │ │ Lead text + descripción │ [IMAGEN] │ │ │ 4:5 ratio │ │ ✓ Marcas certificadas │ │ │ ✓ Asesoramiento real │ │ │ ✓ Envíos a todo el país │ │ │ │ │ │ [Conocer la tienda →] │ │ └──────────────────────────────────┴──────────────┘ ``` **Customización**: - Settings: `about_heading_shop, about_subtitle, about_text, about_image, about_eyebrow` - 3 pilares hardcoded (configurables en futuro) **Must-have**: - Imagen aspect 4/5 portrait (más alto que ancho — sensación premium) - 3 pilares con icon + título + descripción corta - CTA al `/about` con icono arrow --- ## B. CATÁLOGO — `/products-catalogue` **Layout**: 3 columnas — sidebar izquierda STICKY (search + categorías + tags + top productos) + grid productos. **Cards** (`catalog-product-card`): - Aspect 1/1 cuadrado (no 3/2 horizontal) - Imagen con triple capa de protección anti-vertical: 1. HTML class `img-fluid w-100 d-block` 2. Style inline `aspect-ratio: 1/1; object-fit: cover` 3. CSS defensive `.catalog-product-img { aspect-ratio:1/1 !important; height:auto !important; max-height:none !important; }` - Badges absolute esquina top-left (NUEVO/DIGITAL/AGOTADO) - Title min-height para alinear bottom de cards - Border-top en footer separa precio + add-to-cart inline - Hover scale(1.06) en imagen **URLs Cloudinary on-the-fly**: - Helper `$squareImg($url, 600)` aplica `/upload/w_600,h_600,c_fill,g_auto,q_auto,f_auto/` - Imágenes en DB se suben sin transformación; el template las pide al tamaño exacto del slot - Soporta también Unsplash (querystring `?w=X&h=Y&fit=crop`) **Sidebar STICKY** (desktop ≥992px): - `.sidebar-col-sticky` en col-lg-3 + `.sidebar-sticky` en aside - `position: sticky; top: 100px` (debajo header sticky-shrink) - `align-self: flex-start` CRÍTICO (sin esto Bootstrap row estira al alto del grid y rompe sticky) - `max-height: calc(100vh - 120px) + overflow-y: auto` con scrollbar discreta marca - Search input + button dark - Categorías como nav-list (active fw-bold cuando coincide) - Top productos rotador - En mobile (<992px) el sidebar va order-2 abajo y NO es sticky --- ## C. DETALLE PRODUCTO — `/products-catalogue/{slug}` **Layout**: Sidebar izq STICKY (Search + Categorías + Destacados x 2) + content 75%. **Content**: - **Thumb gallery Porto** (main 800×800 + thumbs cuadrados navegables, lightbox magnific) - **Resumen** (col-md-6): categoría + título + tagline + precio + disponibilidad + SKU + add-to-cart form + WhatsApp directo + share buttons - **Tabs**: Descripción / Info adicional - **Productos relacionados** (4 cards de la misma categoría): - Aspect 1/1 cuadrado (consistente con featured + catalog) - URL Cloudinary `w_600,h_600,c_fill` (no más 3:2 horizontal) - Class `related-product-img` con defensive rules CSS - Wrapper `.related-product-thumb` overflow:hidden + zoom 1.06 en hover - Si misma categoría no tiene hermanos, sección no renderiza - **JSON-LD Product + BreadcrumbList** para SEO **Sidebar STICKY** (idem catálogo): `.sidebar-col-sticky` + `.sidebar-sticky` en aside. **Must-have**: - 5 imágenes mínimo por producto (galería rica) - `og:image` dinámica (primera imagen del producto) - `product:price:amount` + `product:price:currency` para preview WhatsApp/FB - Share buttons WhatsApp / FB / X / Email / copy link --- ## D. HEADER **Estructura** (3 filas): 1. **Trust bar** (`shop-trust-bar`): 4 items uniformemente espaciados con bg quaternary 2. **Top bar**: dirección + teléfono + email (heredado, con border refinado) 3. **Main row**: logo + nav + cart icon + CTA "Hacer pedido" **Cart icon**: visible cuando `is_module_active('products')`, badge dinámico con `CartService->count()`. **Logo**: max-height 56px, max-width 220px (sticky: 42 + 180). Aspect-aware. --- ## E. FOOTER **4 columnas** + copyright bar: 1. **COMPRÁ** — categorías dinámicas + CTA "Ver todo" 2. **ATENCIÓN** — FAQs, Contacto, Mi carrito, Email + WhatsApp btn 3. **SOBRE NOSOTROS** — Description + links + dirección 4. **SEGUINOS + PAGOS** — social icons + payment methods (Visa, MC, Transferencia, Efectivo) + trust footer (ANMAT + Devoluciones) **Copyright**: copyright tradicional izq + "Powered by BewPro" derecha. --- ## F. PÁGINAS AUXILIARES ### `/about` Hereda del medical, settings copy adaptados al rubro (shop, no consultorio). ### `/contact` Hereda. WhatsApp prominente como CTA primario (no email form). ### `/blog` Fallback genérico. Posts categorías: Novedades / Guías de uso / Nutrición deportiva. ### `/faqs` Fallback genérico. 11 FAQs en 3 categorías (Pedidos / Productos / Pagos). --- ## ✅ Checklist deluxe — Producto listo para vender Para considerar un tenant **deluxe** del producto supplements-shop: - [ ] Demo activo: `demo-supplements-shop` (settings + tabla `demos`) - [ ] Paleta personalizada en `site.theme.colors.*` (o conservar default azul deep + verde menta) - [ ] Logo subido (main + sticky + favicon) vía /admin/onboarding - [ ] Site name + tagline + description shop-style - [ ] Phone real con WhatsApp habilitado (para wa.me) - [ ] GEO meta configurado (`site.seo.geo.enabled=1` + region + placename + position) - [ ] Schema type = `Store` - [ ] Currency = `ARS` (o el local del tenant) - [ ] Al menos 10 productos cargados con: - Nombre claro + tagline - 5 imágenes cada uno - SKU estructurado - Categoría asignada - Precio + quantity_label - is_digital/stock correctos - [ ] Categorías reales del rubro - [ ] 6+ marcas en `welcome.brands_list` - [ ] FAQs adaptadas al tenant (no las genéricas demo) - [ ] 3+ posts del blog - [ ] Athlete spotlight customizado (foto + quote real) - [ ] Settings: - `header.cta_button.title` = "Hacer pedido" - `header.cta_button.url` = `/products-catalogue` - `welcome.box2_title` = "Categorías" - `welcome.box4_title` = "Hacé tu pedido" - [ ] Hero copy customizado (no defaults) - [ ] Pages /about + /contact con copy real - [ ] Footer con redes activadas - [ ] Smoke test 6 rutas HTTP 200 - [ ] Preview WhatsApp del catálogo + 1 producto --- ## Plantilla customización por tenant ```bash # 1. Provisionar php artisan bewpro:new {email} "{nombre}" supplements-shop --db=bp-{slug} # 2. Cambiar DB sed -i '' 's/^DB_DATABASE=.*/DB_DATABASE=bp-{slug}/' .env # 3. Override settings shop-specific (UPDATE en settings) mysql ... -e " INSERT INTO settings (key, value) VALUES ('site.welcome.hero1_headline', 'TU HEADLINE'); ('site.welcome.athlete_quote', 'Quote real del cliente'); ('site.welcome.brands_list', '[...]'); ... ON DUPLICATE KEY UPDATE value=VALUES(value); " # 4. Cargar productos reales via /admin/products # 5. Validar visualmente cada componente A1-A7 ```