Inner Page Hero
HeroCompact centered hero for interior pages — optional badge, large heading, subtext, and a single CTA over a hexagon-pattern background.
Create a Svelte 5 (runes) compact hero for secondary/interior pages (About, Team, Careers, etc). A hexagon-pattern background component wraps a centered, max-w-4xl content column. Optional outlined badge (icon + label). Large shimmering-text heading. Optional subtext paragraph. Optional row of one or two CTA buttons (each with a looping shine/sheen hover effect), only rendered if at least one CTA is provided. Every field except `heading` is optional, since this hero is reused across many page types with varying content richness. Use a scroll-reveal 'up' action on the whole content block. Data-driven via `content: { badge?, heading, subtext?, primary_cta?:{label,href}, secondary_cta?:{label,href} }`.
<script lang="ts">
import { Button } from '$lib/components/ui/button';
import { Badge } from '$lib/components/ui/badge';
import ShimmeringText from '$lib/components/animate-ui/ShimmeringText.svelte';
import Shine from '$lib/components/animate-ui/Shine.svelte';
import HexagonBackground from '$lib/components/backgrounds/HexagonBackground.svelte';
import UsersIcon from '@lucide/svelte/icons/users';
import { reveal } from '$lib/actions/reveal';
type Props = {
content: {
badge?: string;
heading: string;
subtext?: string;
primary_cta?: { label: string; href: string };
secondary_cta?: { label: string; href: string };
};
};
let { content }: Props = $props();
</script>
<section class="relative z-0 w-full overflow-hidden">
<HexagonBackground class="w-full py-16 md:py-24 lg:py-28">
<div class="relative z-10 mx-auto w-full max-w-4xl px-4 sm:px-6 lg:px-8 text-center" use:reveal={{ animation: 'up' }}>
{#if content.badge}
<Badge
variant="outline"
class="mb-6 inline-flex h-auto font-semibold rounded-md text-muted-foreground gap-2 px-4 py-2"
>
<UsersIcon class="w-4 h-4" aria-hidden="true" />
{content.badge}
</Badge>
{/if}
<h2 class="text-4xl font-bold tracking-tight text-balance md:text-5xl lg:text-6xl">
<ShimmeringText text={content.heading} />
</h2>
{#if content.subtext}
<p class="mt-6 text-lg text-muted-foreground text-balance max-w-2xl mx-auto">
{content.subtext}
</p>
{/if}
{#if content.primary_cta || content.secondary_cta}
<div class="mt-8 flex flex-wrap items-center justify-center gap-4">
{#if content.primary_cta}
<Shine loop loopDelay={3000} delay={0} color="#ffffff" opacity={0.4} class="rounded-lg">
<Button size="lg" class="h-10 px-8" href={content.primary_cta.href}>
{content.primary_cta.label}
</Button>
</Shine>
{/if}
{#if content.secondary_cta}
<Shine loop loopDelay={3000} delay={400} color="#0078B7" opacity={0.3} class="rounded-lg">
<Button variant="outline" size="lg" class="h-10 px-8 bg-background" href={content.secondary_cta.href}>
{content.secondary_cta.label}
</Button>
</Shine>
{/if}
</div>
{/if}
</div>
</HexagonBackground>
</section>