2 lines
4.0 KiB
Plaintext
2 lines
4.0 KiB
Plaintext
<section class="kg-section" data-block="kindergarten:mascot_hero"><div class="kg-container"><div class="kg-hero-panel"><div class="kg-confetti" aria-hidden="true"></div><div style="position: relative; z-index: 1; display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center;" class="kg-mascot-hero-grid"><div>{% if headline %}<h1 class="kg-display kg-crayon-underline" style="font-size: clamp(2.5rem, 6vw, 4rem); margin: 0;">{{ headline }}</h1>{% else %}<h1 class="kg-display" style="font-size: clamp(2.5rem, 6vw, 4rem); margin: 0;" data-empty="true">Welcome!</h1>{% endif %}{% if tagline %}<p class="kg-text" style="font-size: 1.25rem; margin-top: 1.5rem;">{{ tagline }}</p>{% endif %}{% if ctaLabel and ctaHref %}<div style="margin-top: 2rem;"><a href="{{ ctaHref }}" class="kg-pill">{{ ctaLabel }}</a></div>{% endif %}</div><div style="display: flex; justify-content: center; align-items: center;">{% if mascot == "blocks" %}<svg viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Alphabet blocks mascot"><rect x="20" y="60" width="60" height="60" rx="12" fill="hsl(var(--primary))"></rect><rect x="90" y="40" width="60" height="60" rx="12" fill="hsl(var(--secondary))"></rect><rect x="60" y="120" width="60" height="60" rx="12" fill="hsl(var(--accent))"></rect><text x="50" y="98" text-anchor="middle" font-family="var(--font-heading, Quicksand)" font-weight="700" font-size="32" fill="hsl(var(--primary-foreground))">A</text><text x="120" y="78" text-anchor="middle" font-family="var(--font-heading, Quicksand)" font-weight="700" font-size="32" fill="hsl(var(--secondary-foreground))">B</text><text x="90" y="158" text-anchor="middle" font-family="var(--font-heading, Quicksand)" font-weight="700" font-size="32" fill="hsl(var(--accent-foreground))">C</text></svg>{% elif mascot == "star" %}<svg viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Friendly star mascot"><polygon points="100,10 122,75 190,75 135,115 155,180 100,140 45,180 65,115 10,75 78,75" fill="hsl(var(--accent))" stroke="hsl(var(--foreground))" stroke-width="4" stroke-linejoin="round"></polygon><circle cx="80" cy="95" r="6" fill="hsl(var(--foreground))"></circle><circle cx="120" cy="95" r="6" fill="hsl(var(--foreground))"></circle><path d="M 80 120 Q 100 135 120 120" stroke="hsl(var(--foreground))" stroke-width="4" fill="none" stroke-linecap="round"></path></svg>{% elif mascot == "balloon" %}<svg viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Balloon mascot"><ellipse cx="100" cy="80" rx="50" ry="60" fill="hsl(var(--primary))" stroke="hsl(var(--foreground))" stroke-width="4"></ellipse><path d="M 100 140 L 95 150 L 100 145 L 105 150 Z" fill="hsl(var(--foreground))"></path><path d="M 100 150 Q 90 175 100 195" stroke="hsl(var(--foreground))" stroke-width="2" fill="none"></path><circle cx="85" cy="65" r="6" fill="hsl(var(--foreground))"></circle><circle cx="115" cy="65" r="6" fill="hsl(var(--foreground))"></circle><path d="M 85 90 Q 100 105 115 90" stroke="hsl(var(--foreground))" stroke-width="4" fill="none" stroke-linecap="round"></path></svg>{% else %}<svg viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Pip the mascot"><circle cx="100" cy="115" r="70" fill="hsl(var(--accent))" stroke="hsl(var(--foreground))" stroke-width="4"></circle><circle cx="78" cy="100" r="8" fill="hsl(var(--foreground))"></circle><circle cx="122" cy="100" r="8" fill="hsl(var(--foreground))"></circle><circle cx="78" cy="98" r="3" fill="hsl(var(--background))"></circle><circle cx="122" cy="98" r="3" fill="hsl(var(--background))"></circle><path d="M 75 130 Q 100 155 125 130" stroke="hsl(var(--foreground))" stroke-width="5" fill="none" stroke-linecap="round"></path><circle cx="60" cy="115" r="6" fill="hsl(var(--secondary))"></circle><circle cx="140" cy="115" r="6" fill="hsl(var(--secondary))"></circle><path d="M 50 60 L 60 35 L 80 50 Z" fill="hsl(var(--primary))"></path><path d="M 150 60 L 140 35 L 120 50 Z" fill="hsl(var(--primary))"></path></svg>{% endif %}</div></div></div></div></section>
|