chore: update components folder structure, add constants, update existing layout components, scaffold pages

components/content/Hero.tsx

@@ -0,0 +1,11 @@
+export default function Hero({ label, subtitle, children }: { label: string; subtitle?: string; children?: React.ReactNode }) {
+  return (
+    <section className="space-y-8">
+      <h1 className="font-serif text-[88px] leading-none tracking-tight">
+        {label}
+      </h1>
+      {subtitle && <p className="text-xl text-neutral-400 text-muted">{subtitle}</p>}
+      {children}
+    </section>
+  );
+}

components/content/RotatingHeadline.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type RotatingHeadlineProps = {
+  items: string[];
+  subtext: string;
+  intervalSeconds?: number;
+};
+
+export default function RotatingHeadline({
+  items,
+  subtext,
+  intervalSeconds = 3,
+}: RotatingHeadlineProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  useEffect(() => {
+    if (items.length <= 1) return;
+
+    const id = setInterval(() => {
+      setActiveIndex((i) => (i + 1) % items.length);
+    }, intervalSeconds * 1000);
+
+    return () => clearInterval(id);
+  }, [items.length, intervalSeconds]);
+
+  return (
+    <div className="space-y-2">
+      {/* rotating row — key forces remount so a CSS transition can fire */}
+      <div className="text-2xl">
+        <span key={activeIndex}>{items[activeIndex]}</span>
+      </div>
+
+      {/* static row */}
+      <div className="text-neutral-400">{subtext}</div>
+    </div>
+  );
+}

components/content/Testimonials.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { IconPlayerPauseFilled, IconPlayerPlayFilled, IconPoint, IconPointFilled } from '@tabler/icons-react';
+
+type Testimonial = {
+  name: string;
+  title: string;
+  avatar?: string;
+  quote: string;
+};
+
+type TestimonialsProps = {
+  items: Testimonial[];
+};
+
+export default function Testimonials({ items }: TestimonialsProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(true);
+  const active = items[activeIndex];
+
+  if (!active) return null;
+
+  useEffect(() => {
+    if (items.length <= 1 || !isPlaying) return;
+
+    const id = setInterval(() => {
+      setActiveIndex((i) => (i + 1) % items.length);
+    }, 5000);
+
+    return () => clearInterval(id);
+  }, [items.length, isPlaying]);
+
+  return (
+    <section className="w-full">
+      {/* header: avatar + name + title */}
+      <header className="flex items-center gap-3">
+        {/* TODO: avatar */}
+        <div>
+          <div>{active.name}</div>
+          <div>{active.title}</div>
+        </div>
+      </header>
+
+      <blockquote>{active.quote}</blockquote>
+
+      <footer className="flex items-center justify-between">
+        <div className="flex mt-3">
+          {items.map((_, i) => (
+            <button
+              key={i}
+              onClick={() => setActiveIndex(i)}
+              aria-label={`Go to testimonial ${i + 1}`}
+            >
+              {i === activeIndex ? <IconPointFilled /> : <IconPoint />}
+            </button>
+          ))}
+        </div>
+
+        {/* TODO: play/pause button + auto-rotate timer */}
+        <button onClick={() => setIsPlaying(!isPlaying)} aria-label={isPlaying ? "Pause" : "Play"}>
+          {isPlaying ? <IconPlayerPauseFilled /> : <IconPlayerPlayFilled />}
+        </button>
+      </footer>
+    </section>
+  );
+}