8-bit Chapter Intro

1import { cn } from "@/lib/utils";
2 
3import { Card, CardContent } from "@/components/ui/8bit/card";
4 
5export interface ChapterIntroProps extends React.ComponentProps<"div"> {
6  title: string;
7  subtitle?: string;
8  backgroundSrc?: string;
9  align?: "left" | "center" | "right";
10  height?: "sm" | "md" | "lg";
11  darken?: number;
12}
13 
14export default function ChapterIntro({
15  className,
16  title,
17  subtitle,
18  backgroundSrc = "/placeholder.svg",
19  align = "center",
20  height = "md",
21  darken = 0.5,
22  ...props
23}: ChapterIntroProps) {
24  const heightClass =
25    height === "lg"
26      ? "min-h-[420px] md:min-h-[640px]"
27      : height === "sm"
28        ? "min-h-[240px] md:min-h-[360px]"
29        : "min-h-[320px] md:min-h-[480px]";
30 
31  const alignClass =
32    align === "left"
33      ? "justify-start text-left"
34      : align === "right"
35        ? "justify-end text-right"
36        : "justify-center text-center";
37 
38  return (
39    <Card className={cn(className)} {...props}>
40      <CardContent className={cn("relative p-0")}>
41        <div className={cn("relative w-full", heightClass)}>
42          {/* Background image */}
43          <img
44            src={backgroundSrc}
45            alt=""
46            className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.7]"
47            style={{ imageRendering: "pixelated" }}
48          />
49 
50          {/* Darken/gradient overlay for readability */}
51          <div
52            className="absolute inset-0 bg-background/60 mix-blend-multiply"
53            style={{ opacity: darken }}
54            aria-hidden="true"
55          />
56 
57          {/* Cinematic letterbox bars */}
58          <div
59            className="absolute top-0 left-0 right-0 h-6 md:h-10 bg-secondary/40"
60            aria-hidden="true"
61          />
62          <div
63            className="absolute bottom-0 left-0 right-0 h-6 md:h-10 bg-secondary/80"
64            aria-hidden="true"
65          />
66 
67          {/* Content overlay */}
68          <div
69            className={cn(
70              "relative z-10 flex h-full items-center p-8 md:p-12",
71              alignClass
72            )}
73          >
74            <div className="mx-auto max-w-3xl">
75              <h1 className="text-2xl md:text-4xl lg:text-5xl font-bold leading-tight drop-shadow-[0_3px_0_rgba(0,0,0,0.8)]">
76                {title}
77              </h1>
78              {subtitle && (
79                <p className="mt-4 text-xs md:text-base text-secondary/90 dark:text-muted-foreground/90 drop-shadow-[0_2px_0_rgba(0,0,0,0.8)]">
80// … truncated