"use client";

import { ArrowRight, X } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useCallback, useState } from "react";
import { cn } from "@/lib/utils";

export default function Page() {
  const [open, setOpen] = useState(true);
  const prefersReducedMotion = useReducedMotion();

  const dismiss = useCallback(() => {
    setOpen(false);
  }, []);

  return (
    <div className="min-h-screen bg-[#FAFAF9] text-stone-900">
      <AnimatePresence initial={false}>
        {open ? (
          <motion.div
            animate={{ height: "auto", opacity: 1 }}
            className="overflow-hidden border-stone-200/80 border-b bg-white"
            exit={
              prefersReducedMotion
                ? { opacity: 0 }
                : { height: 0, opacity: 0, transition: { duration: 0.28, ease: "easeOut" } }
            }
            initial={false}
          >
            <div className="relative mx-auto flex max-w-5xl items-center justify-center gap-3 px-10 py-2.5 sm:px-12">
              <a
                className={cn(
                  "group inline-flex min-w-0 items-center justify-center gap-2 text-[13px] text-stone-600",
                  "transition-colors hover:text-stone-900"
                )}
                href="#"
              >
                <span className="relative flex h-1.5 w-1.5 shrink-0">
                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60" />
                  <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500" />
                </span>
                <span className="truncate">
                  Latest update —{" "}
                  <span className="text-stone-400" style={{ fontFamily: "var(--font-mono)" }}>
                    v7.9.4
                  </span>{" "}
                  released
                </span>
                <ArrowRight className="h-3 w-3 shrink-0 transition-transform group-hover:translate-x-0.5" />
              </a>
              <button
                aria-label="Dismiss announcement"
                className="absolute right-3 flex h-7 w-7 items-center justify-center rounded-full text-stone-400 transition-colors hover:bg-stone-100 hover:text-stone-600 sm:right-4"
                onClick={dismiss}
                type="button"
              >
                <X className="h-3.5 w-3.5" />
              </button>
            </div>
          </motion.div>
        ) : null}
      </AnimatePresence>

      <main className="mx-auto flex max-w-2xl flex-col items-center px-4 pt-24 text-center">
        <p
          className="mb-3 text-[12px] text-stone-400 uppercase tracking-[0.14em]"
          style={{ fontFamily: "var(--font-mono)" }}
        >
          Preview
        </p>
        <h1 className="font-semibold text-[clamp(1.75rem,4vw,2.5rem)] tracking-[-0.03em]">Announcement banner</h1>
        <p className="mt-3 max-w-md text-[15px] text-stone-500 leading-relaxed">
          A dismissible launch strip with a live status dot — drop it above any page in the Atelier family.
        </p>
        {open ? null : (
          <button
            className="mt-8 h-9 rounded-full border border-stone-200 bg-white px-4 text-[13px] text-stone-600 transition-colors hover:bg-stone-50"
            onClick={() => setOpen(true)}
            type="button"
          >
            Show banner again
          </button>
        )}
      </main>
    </div>
  );
}
Marketing Banner Atelier

Marketing Banner Atelier
