{# # ============================================================================ # ORGANISM: LANDING HERO # ============================================================================ # # Hero section with split layout: text left, orbital visual right. # Features animated tool nodes orbiting around the Bubul hub. # # ============================================================================ # COMPOSITION # ============================================================================ # # - _atoms/button/button.html.twig # - _atoms/icon/icon.html.twig # # ============================================================================ # PARAMETRES # ============================================================================ # # | Parametre | Type | Defaut | Description | # |-------------------|--------|---------------------------------|------------------------------| # | badge | string | '80+ formateurs nous font...' | Badge text above title | # | titleHtml | string | 'Créez vos formations...' | H1 title (HTML allowed) | # | description | string | 'Bubul centralise 6 outils...' | Description paragraph | # | ctaLabel | string | 'Commencer gratuitement' | Primary CTA label | # | ctaUrl | string | '#beta-signup' | Primary CTA URL | # | ctaSecondaryLabel | string | 'Découvrir les outils' | Secondary CTA label | # | ctaSecondaryUrl | string | '#outils' | Secondary CTA URL | # | class | string | '' | Additional CSS classes | # # ============================================================================ #} {% set badge = badge ?? '80+ formateurs nous font déjà confiance' %} {% set titleHtml = titleHtml ?? 'Créez vos formations 10x plus vite grâce à l\'IA' %} {% set description = description ?? 'Bubul centralise 9 outils IA pédagogiques dans une seule interface. Cours LMS, modules SCORM, diaporamas, podcasts, infographies — 20 minutes suffisent pour 7h de formation.' %} {% set ctaLabel = ctaLabel ?? 'Créer mon premier cours' %} {% set ctaUrl = ctaUrl ?? '#beta-signup' %} {% set ctaSecondaryLabel = ctaSecondaryLabel ?? 'Découvrir les outils' %} {% set ctaSecondaryUrl = ctaSecondaryUrl ?? '#outils' %} {% set class = class ?? '' %} {% set heroAvatars = heroAvatars ?? [] %} {% set activeUserCount = activeUserCount ?? 0 %} {# Palette de couleurs pour fallback initiales #} {% set avatarColors = [ 'linear-gradient(135deg, #0C81E4, #38B2FA)', 'linear-gradient(135deg, #7C3AED, #A78BFA)', 'linear-gradient(135deg, #E91E8C, #F472B6)', 'linear-gradient(135deg, #309344, #6EE7B7)' ] %}
{# ===== Background ===== #}
{# Background orbs #} {# Subtle grid pattern #}
{# Bottom fade #}
{# ===== Content ===== #}
{# ===== Left: Text ===== #}
{# Social proof #}
{# Avatars stackés — Gravatar avec fallback initiales #}
{% for avatar in heroAvatars %}
{{ avatar.initials }}
{% endfor %} {% if activeUserCount > heroAvatars|length %}
+{{ activeUserCount - heroAvatars|length }}
{% endif %}
{# Séparateur vertical #}
{# Texte #}
{{ badge }}
{# Title #}

{{ titleHtml|raw }}

{# Description #}

{{ description }}

{# CTAs #}
{% include '_atoms/button/button.html.twig' with { label: ctaLabel, href: ctaUrl, variant: 'primary', size: 'lg' } only %}
{# ===== Right: Orbital Visual ===== #}
{# Ambient glow #}
{# Orbit rings #}
{# Center hub #}
{% include '_atoms/logo/logo_simple.html.twig' %}
{# DB colors for orbital nodes — TOUJOURS depuis la base (tool_color_details). #} {% set hMoodia = tool_color_details['moodia'].primary ?? '#0C81E4' %} {% set hScormia = tool_color_details['scormia'].primary ?? '#1E40AF' %} {% set hSlidia = tool_color_details['slidia'].primary ?? '#E91E8C' %} {% set hSerenia = tool_color_details['serenia'].primary ?? '#7C3AED' %} {% set hMonalisia = tool_color_details['monalisia'].primary ?? '#ED8600' %} {% set hCastia = tool_color_details['castia'].primary ?? '#309344' %} {% set hSam = tool_color_details['sam'].primary ?? '#06B6D4' %} {% set hPromptly = tool_color_details['promptly'].primary ?? '#F97316' %} {% set hPixia = tool_color_details['pixia'].primary ?? '#6366F1' %} {# 9 nœuds équidistants — r=198px, conteneur 460×460, centre (230,230) Angle i = i × 40°, sens horaire depuis le sommet (0° = top) Position top-left du nœud 58px : x = 201 + 198·sin(θ), y = 201 − 198·cos(θ) left% = x/460, top% = y/460 ; endpoint SVG (centre nœud) = (x+29)/460, (y+29)/460 i=0 0° Moodia top-left (201,3) → SVG (50%, 7%) i=1 40° Scormia top-left (328,49) → SVG (77.7%, 17%) i=2 80° Slidia top-left (396,167) → SVG (92.4%, 42.5%) i=3 120° Serenia top-left (373,300) → SVG (87.3%, 71.5%) i=4 160° Monalisia top-left (269,387) → SVG (64.7%, 90.5%) i=5 200° Castia top-left (133,387) → SVG (35.3%, 90.5%) i=6 240° Promptly top-left (30,300) → SVG (12.7%, 71.5%) i=7 280° SAM top-left (6,167) → SVG (7.6%, 42.5%) i=8 320° Pixia top-left (74,49) → SVG (22.3%, 17%) #} {# SVG connector lines #} {# ── Tool nodes — 9 outils équidistants (360°/9 = 40° d'intervalle) ── #} {# Moodia — i=0, 0° — top center #}
{% include '_atoms/icon/icon.html.twig' with { name: 'bubul-moodia', size: 'lg', colorPrimary: hMoodia, colorSecondary: hMoodia } only %}
Moodia {# Scormia — i=1, 40° — top right #}
{% include '_atoms/icon/icon.html.twig' with { name: 'bubul-scormia', size: 'lg', colorPrimary: hScormia, colorSecondary: hScormia } only %}
Scormia {# Slidia — i=2, 80° — right #}
{% include '_atoms/icon/icon.html.twig' with { name: 'bubul-slidia', size: 'lg', colorPrimary: hSlidia, colorSecondary: hSlidia } only %}
Slidia {# Serenia — i=3, 120° — bottom right #}
{% include '_atoms/icon/icon.html.twig' with { name: 'bubul-serenia', size: 'lg', colorPrimary: hSerenia, colorSecondary: hSerenia } only %}
Serenia {# Monalisia — i=4, 160° — bottom, slightly right #}
{% include '_atoms/icon/icon.html.twig' with { name: 'bubul-monalisia', size: 'lg', colorPrimary: hMonalisia, colorSecondary: hMonalisia } only %}
Monalisia {# Castia — i=5, 200° — bottom, slightly left #}
{% include '_atoms/icon/icon.html.twig' with { name: 'bubul-castia', size: 'lg', colorPrimary: hCastia, colorSecondary: hCastia } only %}
Castia {# Promptly — i=6, 240° — left, lower #}
{% include '_atoms/icon/icon.html.twig' with { name: 'bubul-promptly', size: 'lg', colorPrimary: hPromptly, colorSecondary: hPromptly } only %}
Promptly {# SAM — i=7, 280° — left, upper #}
{% include '_atoms/icon/icon.html.twig' with { name: 'bubul-sam', size: 'lg', colorPrimary: hSam, colorSecondary: hSam } only %}
SAM {# Pixia — i=8, 320° — top left #}
{% include '_atoms/icon/icon.html.twig' with { name: 'bubul-pixia', size: 'lg', colorPrimary: hPixia, colorSecondary: hPixia } only %}
Pixia {# Orbit particles #}