{# # ============================================================================ # ORGANISM: LANDING DEMO SHOWCASE # ============================================================================ # # 2-column layout with rotating app mockup demonstrating all 6 tools. # Auto-cycles through tools every 5 seconds with smooth transitions. # Les textes (eyebrow, title, subtitle, bullet points, CTA) sont # recus en parametres. Les couleurs viennent du global `tool_color_details`. # Le mockup anime (panneau droit) reste hardcode. # # ============================================================================ # COMPOSITION # ============================================================================ # # - _atoms/icon/icon.html.twig # - _atoms/button/button.html.twig # - _atoms/logo/logo-with-text.html.twig # # ============================================================================ # PARAMETRES # ============================================================================ # # | Parametre | Type | Defaut | Description | # |--------------|--------|-------------------------------------------------|-------------------------------------| # | eyebrow | string | 'PLATEFORME UNIFIEE' | Texte au-dessus du titre | # | title | string | 'Tous vos outils, un seul ...' | Titre avec HTML pour gradient span | # | subtitle | string | 'Fini les dizaines d abonnements...' | Paragraphe sous le titre | # | bulletPoints | array | (3 items par defaut) | Liste de strings pour les bullets | # | ctaLabel | string | 'Decouvrir' | Label du bouton CTA | # | ctaUrl | string | '#beta-signup' | URL du bouton CTA | # | class | string | '' | Classes CSS additionnelles | # # ============================================================================ # USAGE # ============================================================================ # # {% include '_organisms/landing/demo-showcase.html.twig' with { # eyebrow: 'PLATEFORME UNIFIEE', # title: 'Tous vos outils, un seul workflow', # subtitle: 'Fini les dizaines d abonnements...', # bulletPoints: ['Point 1', 'Point 2', 'Point 3'], # ctaLabel: 'Decouvrir', # ctaUrl: '#beta-signup' # } only %} # # ============================================================================ #} {# ============================================================================ DEFAULT VALUES ============================================================================ #} {% set class = class ?? '' %} {% set eyebrow = eyebrow ?? 'PLATEFORME UNIFIÉE' %} {% set title = title ?? 'Tous vos outils, un seul workflow' %} {% set subtitle = subtitle ?? 'Fini les dizaines d\'abonnements et les exports manuels. Bubul connecte chaque outil dans un espace unique — votre progression, vos fichiers et vos tokens partagés en temps réel.' %} {% set bulletPoints = bulletPoints ?? [ '6 outils connectés, un seul espace de travail', 'Tout inclus, sans abonnement par outil', 'IA responsable — CO₂ et Wh visibles à chaque génération' ] %} {% set ctaLabel = ctaLabel ?? 'Découvrir' %} {% set ctaUrl = ctaUrl ?? '#beta-signup' %} {# ============================================================================ COULEURS DYNAMIQUES depuis la DB ============================================================================ #} {% set colMoodia = tool_color_details['moodia'].primary ?? '#0C81E4' %} {% set colSlidia = tool_color_details['slidia'].primary ?? '#E91E8C' %} {% set colSerenia = tool_color_details['serenia'].primary ?? '#7C3AED' %} {% set colMonalisia = tool_color_details['monalisia'].primary ?? '#EC4899' %} {% set colCastia = tool_color_details['castia'].primary ?? '#309344' %} {% set colSam = tool_color_details['sam'].primary ?? '#06B6D4' %} {% set colPromptly = tool_color_details['promptly'].primary ?? '#0EA5E9' %} {% set colPixia = tool_color_details['pixia'].primary ?? '#6366F1' %} {# ============================================================================ HTML OUTPUT ============================================================================ #}
{# ===== Left: Text ===== #}

{{ eyebrow }}

{{ title|raw }}

{{ subtitle }}

    {% for point in bulletPoints %}
  • {{ point }}
    • {% endfor %}
{% include '_atoms/button/button.html.twig' with { label: ctaLabel, href: ctaUrl, variant: 'primary', size: 'lg' } only %}
{# ===== Right: Mockup (hardcoded visual demo) ===== #}
{# Toolbar #}
🔒 bubul.app/moodia
{# Progress bar #}
{# Body #}
{# Sidebar #}
{# Logo #}
{% include '_atoms/logo/logo-with-text.html.twig' with { showIcon: true, showText: true, showBadge: false, size: 'sm' } only %}
{# Navigation #}
Navigation
Dashboard
{# Tools #}
Outils
{% set demoTools = [ { code: 'moodia', name: 'Moodia', tagline: 'PDF → cours LMS', color: colMoodia, icon: 'bubul-moodia' }, { code: 'slidia', name: 'Slidia', tagline: 'Diaporamas PPTX', color: colSlidia, icon: 'bubul-slidia' }, { code: 'serenia', name: 'Serenia', tagline: 'Assistant IA', color: colSerenia, icon: 'bubul-serenia' }, { code: 'monalisia', name: 'Monalisia', tagline: 'Infographies PNG', color: colMonalisia, icon: 'bubul-monalisia' }, { code: 'castia', name: 'Castia', tagline: 'Podcasts MP3', color: colCastia, icon: 'bubul-castia' }, { code: 'pixia', name: 'Pixia', tagline: 'Images IA PNG', color: colPixia, icon: 'bubul-pixia' }, { code: 'promptly', name: 'Promptly', tagline: 'Bibliothèque prompts', color: colPromptly, icon: 'bubul-promptly' }, { code: 'sam', name: 'SAM', tagline: 'Suivi LMS', color: colSam, icon: 'bubul-sam' } ] %} {% for tool in demoTools %}
{% include '_atoms/icon/icon.html.twig' with { name: tool.icon, size: 'xs', colorPrimary: tool.color, colorSecondary: tool.color } only %} {{ tool.name }}
{% endfor %}
{# Content area #}
{# Content injected by JS #}

Les visuels présentés sont à titre illustratif et ne sont pas contractuels.