Initial commit: Interactives site

Astro-based site with 40+ interactive math games, puzzles, and explorations.
Includes admin dashboard, todo system, blog, theme/subcategory navigation,
and embed pages for iframe embedding.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/sections/hatch-section-header.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type HatchSectionHeaderProps = {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  showLogo?: boolean;
+  logoSrc?: string;
+  logoAlt?: string;
+  logoWidth?: number;
+  logoHeight?: number;
+  logoClassName?: string;
+  className?: string;
+  innerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  aside?: React.ReactNode;
+};
+
+export function HatchSectionHeader({
+  title,
+  description,
+
+  showLogo = false,
+  logoSrc = '/images/layout/logo.svg',
+  logoAlt = 'Hatch',
+  logoWidth = 28,
+  logoHeight = 28,
+  logoClassName,
+
+  className,
+  innerClassName,
+  titleClassName,
+  descriptionClassName,
+
+  aside,
+}: HatchSectionHeaderProps) {
+  return (
+    <div className={cn('w-full', className)}>
+      {showLogo ? (
+        <div className="mb-4">
+          <img
+            src={logoSrc}
+            alt={logoAlt}
+            width={logoWidth}
+            height={logoHeight}
+            className={cn(
+              'brightness-[0.72] contrast-[1.08] dark:brightness-[0.88]',
+              logoClassName,
+            )}
+          />
+        </div>
+      ) : null}
+
+      <div
+        className={cn('flex items-start justify-between gap-8', innerClassName)}
+      >
+        <h2
+          className={cn(
+            'font-display text-foreground text-2xl sm:text-[28px]',
+            titleClassName,
+          )}
+        >
+          {title}
+        </h2>
+
+        {aside ? (
+          <div className="hidden sm:block">{aside}</div>
+        ) : description ? (
+          <p
+            className={cn(
+              'text-muted-foreground hidden min-w-0 flex-1 text-base sm:block sm:text-end',
+              descriptionClassName,
+            )}
+          >
+            {description}
+          </p>
+        ) : null}
+      </div>
+
+      {description ? (
+        <p
+          className={cn(
+            'text-muted-foreground mt-3 text-base sm:hidden',
+            descriptionClassName,
+          )}
+        >
+          {description}
+        </p>
+      ) : null}
+    </div>
+  );
+}