mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
Greg Kilmer
106 lines
3.4 KiB
Plaintext
106 lines
3.4 KiB
Plaintext
---
|
|
/**
|
|
* InterestHero.astro
|
|
* ---------------------------------------------------------------------------
|
|
* Shared header for every interest sub-page, implementing the spec's
|
|
* per-interest template (Header: title + tagline; Overview: narrative). Uses the
|
|
* warm "interest" surface tone via InterestLayout.
|
|
*
|
|
* The decorative icon and the tagline (in mono, as a pull quote) give each page
|
|
* a consistent rhythm while the page supplies its own title + overview copy.
|
|
*
|
|
* An optional `image` prop renders a wide celestial-framed banner behind / above
|
|
* the heading so each interest page leads with a vibe-matched photo. A faint
|
|
* starfield + alchemical accent reinforces the esoteric mood.
|
|
*/
|
|
import Icon from '@components/Icon.astro';
|
|
import Reveal from '@components/motion/Reveal.astro';
|
|
import AnimatedBackground from '@components/hero/AnimatedBackground.tsx';
|
|
import StarBurst from '@components/mystic/StarBurst.astro';
|
|
|
|
interface Props {
|
|
/** mdi icon used as the decorative mark. */
|
|
icon: string;
|
|
title: string;
|
|
/** The italicized pull-quote tagline from the spec. */
|
|
tagline: string;
|
|
/** Back-to-hub breadcrumb label. */
|
|
eyebrow?: string;
|
|
/** Optional hero banner image (vibe-matched stock; swap for real photos). */
|
|
image?: string;
|
|
imageAlt?: string;
|
|
}
|
|
|
|
const {
|
|
icon,
|
|
title,
|
|
tagline,
|
|
eyebrow = 'Interests',
|
|
image,
|
|
imageAlt = '',
|
|
} = Astro.props;
|
|
---
|
|
|
|
<section class="relative overflow-hidden pb-8 pt-28 sm:pt-32">
|
|
<!-- Full animated Milky Way field + stars (matches the Home/Interests hero).
|
|
Carries the per-page morph name (one .vt-sky per page snapshot). -->
|
|
<AnimatedBackground client:idle className="vt-sky" />
|
|
|
|
<div class="container-prose relative z-10 flex flex-col items-start gap-6 py-8">
|
|
<Reveal>
|
|
<a
|
|
href="/interests"
|
|
class="inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-[0.18em] transition-colors"
|
|
style="color: var(--color-text-subtle);"
|
|
>
|
|
<Icon name="arrow-left" class="h-4 w-4" />
|
|
{eyebrow}
|
|
</a>
|
|
</Reveal>
|
|
|
|
{image && (
|
|
<Reveal delay={40} class="w-full">
|
|
<figure
|
|
class="relative w-full overflow-hidden rounded-2xl border"
|
|
style="border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);"
|
|
>
|
|
<img
|
|
src={image}
|
|
alt={imageAlt}
|
|
loading="lazy"
|
|
decoding="async"
|
|
class="aspect-[21/9] w-full object-cover"
|
|
/>
|
|
<StarBurst
|
|
class="pointer-events-none absolute left-3 top-3 h-5 w-5 drop-shadow-[0_0_6px_color-mix(in_srgb,var(--color-accent)_60%,transparent)]"
|
|
style="color: var(--color-accent);"
|
|
/>
|
|
</figure>
|
|
</Reveal>
|
|
)}
|
|
|
|
<Reveal delay={60}>
|
|
<span
|
|
class="inline-flex h-16 w-16 items-center justify-center rounded-2xl"
|
|
style="background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent);"
|
|
aria-hidden="true"
|
|
>
|
|
<Icon name={icon} class="h-8 w-8" />
|
|
</span>
|
|
</Reveal>
|
|
|
|
<Reveal delay={120}>
|
|
<h1 class="text-balance">{title}</h1>
|
|
</Reveal>
|
|
|
|
<Reveal delay={160}>
|
|
<p
|
|
class="max-w-2xl border-l-2 pl-5 font-sans text-lg italic sm:text-xl"
|
|
style="border-color: var(--color-accent); color: var(--color-text);"
|
|
>
|
|
{tagline}
|
|
</p>
|
|
</Reveal>
|
|
</div>
|
|
</section>
|