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

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>
+  );
+}