mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
Greg Kilmer
118 lines
4.1 KiB
Plaintext
118 lines
4.1 KiB
Plaintext
---
|
|
/**
|
|
* InterestHero.astro
|
|
* ---------------------------------------------------------------------------
|
|
* Shared header for every interest sub-page. Compact hero on the animated
|
|
* Milky Way field: a back-to-hub breadcrumb, a small icon mark, the title, and
|
|
* the italic tagline.
|
|
*
|
|
* Tuned for the dark starfield: text uses bright cream tones (not the dim
|
|
* --color-text-subtle/--color-text which vanish on the deep sky). The title is
|
|
* h2-sized (the page is a sub-page, not Home) so it doesn't dominate. An
|
|
* optional banner image sits above the heading.
|
|
*/
|
|
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" />
|
|
|
|
{/* Two-column layout: text on the left, image on the right. Putting the image
|
|
BESIDE the text (instead of stacked above it) means the hero height is
|
|
driven by the text column and stays consistent across interest pages
|
|
regardless of image presence. On small screens it stacks (image below). */}
|
|
<div class="container-prose relative z-10 grid items-center gap-6 py-6 sm:grid-cols-[1.4fr_1fr]">
|
|
{/* --- Left: text column --- */}
|
|
<div class="flex flex-col items-start gap-4">
|
|
<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-cream); opacity: 0.8;"
|
|
>
|
|
<Icon name="arrow-left" class="h-4 w-4" />
|
|
{eyebrow}
|
|
</a>
|
|
</Reveal>
|
|
|
|
<Reveal delay={60}>
|
|
<span
|
|
class="inline-flex h-12 w-12 items-center justify-center rounded-xl"
|
|
style="background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent);"
|
|
aria-hidden="true"
|
|
>
|
|
<Icon name={icon} class="h-6 w-6" />
|
|
</span>
|
|
</Reveal>
|
|
|
|
<Reveal delay={100}>
|
|
<h2
|
|
class="font-sans font-bold tracking-tight"
|
|
style="color: var(--color-cream); font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); line-height: 1.15;"
|
|
>
|
|
{title}
|
|
</h2>
|
|
</Reveal>
|
|
|
|
<Reveal delay={140}>
|
|
<p
|
|
class="max-w-xl border-l-2 pl-4 font-sans text-base italic sm:text-lg"
|
|
style="border-color: var(--color-accent); color: var(--color-cream); opacity: 0.92;"
|
|
>
|
|
{tagline}
|
|
</p>
|
|
</Reveal>
|
|
</div>
|
|
|
|
{/* --- Right: image column (only when an image is provided). A fixed
|
|
aspect keeps every interest hero the same height. --- */}
|
|
{image && (
|
|
<Reveal delay={80} 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-[4/3] 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>
|
|
)}
|
|
</div>
|
|
</section>
|