Initial Commit

2026-11-08 04:08:24 +00:00 · 2026-07-04 07:42:24 -04:00
commit 71bffad507
77 changed files with 14437 additions and 0 deletions
@@ -0,0 +1,104 @@
+---
+/**
+ * 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 pt-28 sm:pt-32">
+  <!-- Calmer background: gradient only, no particles on interest pages. -->
+  <AnimatedBackground client:idle particles={false} />
+
+  <div class="container-prose relative z-10 flex flex-col items-start gap-6 py-12">
+    <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>