61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T5129,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface SettingsValues { name: string; email: string; bio: string; workspace: string; slug: string; timezone: string; language: string; appearance: "light" | "dark" | "system"; accent: string; density: "comfortable" | "compact"; } export interface SettingsScreenProps { values?: SettingsValues; onSave?: (values: SettingsValues) => Promise | void; onDeleteWorkspace?: () => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.36)", card: "#121212", nav: "#0F0F0F", border: "rgba(255,255,255,0.09)", chip: "rgba(255,255,255,0.06)", hover: "rgba(255,255,255,0.04)", input: "#0D0D0D", on: "#F5F4F1", onText: "#0A0A0A", red: "#F87171", green: "#4ADE80", ring: "rgba(245,244,241,0.6)", bar: "#1A1A1A", shadow: "0 20px 50px -16px rgba(0,0,0,0.8)" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", card: "#FFFFFF", nav: "#FAFAF8", border: "rgba(10,10,10,0.09)", chip: "rgba(10,10,10,0.05)", hover: "rgba(10,10,10,0.03)", input: "#FAFAF8", on: "#0A0A0A", onText: "#FAFAF8", red: "#DC2626", green: "#15803D", ring: "rgba(10,10,10,0.5)", bar: "#0A0A0A", shadow: "0 20px 50px -20px rgba(0,0,0,0.3)" }, }; const ACCENTS = ["#FB923C", "#F472B6", "#A78BFA", "#60A5FA", "#2DD4BF", "#4ADE80"]; const DEFAULT_VALUES: SettingsValues = { name: "Mara Okafor", email: "mara@nexora.io", bio: "Head of product. Coffee, maps and tidy spreadsheets.", workspace: "Nexora", slug: "nexora", timezone: "Europe/Berlin", language: "English", appearance: "dark", accent: "#FB923C", density: "comfortable" }; const SECTIONS = [ { id: "profile", label: "Profile", hint: "Your name and photo" }, { id: "workspace", label: "Workspace", hint: "Name, address, region" }, { id: "appearance", label: "Appearance", hint: "Theme and density" }, { id: "danger", label: "Danger zone", hint: "Delete the workspace" }, ] as const; type Section = (typeof SECTIONS)[number]["id"]; export function SettingsScreen({ values = DEFAULT_VALUES, onSave, onDeleteWorkspace, theme = "dark", className }: SettingsScreenProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [saved, setSaved] = React.useState(values); const [form, setForm] = React.useState(values); const [section, setSection] = React.useState

("profile"); const [saving, setSaving] = React.useState(false); const [toast, setToast] = React.useState(null); const [confirmText, setConfirmText] = React.useState(""); const [shake, setShake] = React.useState(0); const timer = React.useRef | null>(null); React.useEffect( () => () => { if (timer.current) clearTimeout(timer.current); }, [], ); const dirtyKeys = (Object.keys(form) as (keyof SettingsValues)[]).filter((k) => form[k] !== saved[k]); const dirty = dirtyKeys.length > 0; const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email); const nameOk = form.name.trim().length > 1; const set = (k: K, v: SettingsValues[K]) => setForm((f) => ({ ...f, [k]: v })); const save = async () => { if (!emailOk || !nameOk) { setShake((s) => s + 1); return; } setSaving(true); if (onSave) await onSave(form); else await new Promise((r) => setTimeout(r, reduce ? 100 : 700)); setSaving(false); setSaved(form); setToast("Settings saved"); if (timer.current) clearTimeout(timer.current); timer.current = setTimeout(() => setToast(null), 2000); }; const go = (s: Section) => { setSection(s); setConfirmText(""); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.card } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const field = cn("h-10 w-full rounded-lg border px-3 text-[14px]", focus); const fs = (bad?: boolean) => ({ borderColor: bad ? p.red : p.border, background: p.input, color: p.text, ...ring }) as React.CSSProperties; const row = (label: string, hint: string, control: React.ReactNode, id?: string) => (

{label}

{hint}

{control}

); const panels: Record = { profile: ( <> {row( "Photo", "PNG or JPG, at least 256px.",

{/* eslint-disable-next-line @next/next/no-img-element */}

, )} {row( "Full name", "Shown on comments and mentions.", <> set("name", e.target.value)} aria-invalid={!nameOk} className={field} style={fs(!nameOk)} /> {!nameOk && (

Enter your name.

)} , `${uid}-name`, )} {row( "Email", "We send sign-in links and receipts here.", <> set("email", e.target.value)} aria-invalid={!emailOk} className={field} style={fs(!emailOk)} /> {!emailOk && (

That doesn't look like an email address.

)} , `${uid}-email`, )} {row( "Bio", "A line about you for your teammates.", <>

set("bio", e.target.value)} className={cn("w-full resize-none rounded-lg border px-3 py-2 text-[14px]", focus)} style={fs()} />
            <p className="m-0 mt-1 text-right text-[11.5px] tabular-nums" style={{ color: form.bio.length > 140 ? p.red : p.faint }}>
              {form.bio.length}/160
            </p>
          </>,
          `${uid}-bio`,
        )}
      </>
    ),
    workspace: (
      <>
        {row("Workspace name", "Visible to everyone in the workspace.", <input id={`${uid}-ws`} value={form.workspace} onChange={(e) => set("workspace", e.target.value)} className={field} style={fs()} />, `${uid}-ws`)}
        {row(
          "Web address",
          "Changing it breaks old links.",
          <div className="flex h-10 items-center overflow-hidden rounded-lg border focus-within:ring-2" style={fs()}>
            <span className="pl-3 text-[14px]" style={{ color: p.faint }}>
              nexora.app/
            </span>
            <input id={`${uid}-slug`} value={form.slug} onChange={(e) => set("slug", e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ""))} className="h-full min-w-0 flex-1 border-0 bg-transparent pr-3 text-[14px] outline-none" style={{ color: p.text }} />
          </div>,
          `${uid}-slug`,
        )}
        {row(
          "Time zone",
          "Used for due dates and reports.",
          <select id={`${uid}-tz`} value={form.timezone} onChange={(e) => set("timezone", e.target.value)} className={cn(field, "cursor-pointer")} style={fs()}>
            {["Europe/Berlin", "Europe/Istanbul", "Europe/London", "America/New_York", "America/Los_Angeles", "Asia/Tokyo"].map((z) => (
              <option key={z}>{z}</option>
            ))}
          </select>,
          `${uid}-tz`,
        )}
        {row(
          "Language",
          "For menus, emails and dates.",
          <select id={`${uid}-lang`} value={form.language} onChange={(e) => set("language", e.target.value)} className={cn(field, "cursor-pointer")} style={fs()}>
            {["English", "Deutsch", "Español", "Français", "Türkçe", "日本語"].map((z) => (
              <option key={z}>{z}</option>
            ))}
          </select>,
          `${uid}-lang`,
        )}
      </>
    ),
    appearance: (
      <>
        {row(
          "Theme",
          "Follow your system or pick one.",
          <div role="radiogroup" aria-label="Theme" className="grid grid-cols-3 gap-2.5">
            {(["light", "dark", "system"] as const).map((m) => {
              const on = form.appearance === m;
              return (
                <button key={m} type="button" role="radio" aria-checked={on} onClick={() => set("appearance", m)} className={cn("cursor-pointer rounded-xl border bg-transparent p-2 text-left", focus)} style={{ borderColor: on ? form.accent : p.border, color: p.text, ...ring }}>
                  <span className="block h-14 overflow-hidden rounded-lg" style={{ background: m === "light" ? "#F4F4F1" : m === "dark" ? "#141414" : "linear-gradient(90deg,#F4F4F1 50%,#141414 50%)" }} aria-hidden="true">
                    <span className="mt-2.5 ml-2.5 block h-1.5 w-10 rounded-full" style={{ background: form.accent }} />
                    <span className="mt-1.5 ml-2.5 block h-1.5 w-14 rounded-full" style={{ background: m === "dark" ? "#333" : "#CFCFCA" }} />
                  </span>
                  <span className="mt-2 flex items-center gap-1.5 px-0.5 text-[12.5px] capitalize">
                    <span className="flex h-3.5 w-3.5 items-center justify-center rounded-full border" style={{ borderColor: on ? form.accent : p.faint }}>
                      {on && <motion.span layoutId={reduce ? undefined : `${uid}-theme`} className="h-2 w-2 rounded-full" style={{ background: form.accent }} />}
                    </span>
                    {m}
                  </span>
                </button>
              );
            })}
          </div>,
        )}
        {row(
          "Accent colour",
          "Buttons, links and highlights.",
          <div role="radiogroup" aria-label="Accent colour" className="flex flex-wrap gap-2.5">
            {ACCENTS.map((a) => {
              const on = form.accent === a;
              return (
                <button key={a} type="button" role="radio" aria-checked={on} aria-label={a} onClick={() => set("accent", a)} className={cn("relative flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border-0", focus)} style={{ background: a, ...ring }}>
                  <AnimatePresence>
                    {on && (
                      <motion.svg initial={reduce ? false : { scale: 0 }} animate={{ scale: 1 }} exit={reduce ? undefined : { scale: 0 }} width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#0A0A0A" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                        <path d="m3 8.5 3 3 7-7" />
                      </motion.svg>
                    )}
                  </AnimatePresence>
                </button>
              );
            })}
          </div>,
        )}
        {row(
          "Density",
          "How much fits on screen.",
          <div role="radiogroup" aria-label="Density" className="flex w-fit rounded-lg border p-0.5" style={{ borderColor: p.border }}>
            {(["comfortable", "compact"] as const).map((d) => (
              <button key={d} type="button" role="radio" aria-checked={form.density === d} onClick={() => set("density", d)} className={cn("relative h-8 cursor-pointer rounded-md border-0 bg-transparent px-3.5 text-[13px] capitalize", focus)} style={{ color: form.density === d ? p.text : p.faint, ...ring }}>
                {form.density === d && <motion.span layoutId={`${uid}-dens`} className="absolute inset-0 rounded-md" style={{ background: p.chip }} transition={reduce ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 38 }} />}
                <span className="relative">{d}</span>
              </button>
            ))}
          </div>,
        )}
      </>
    ),
    danger: (
      <div className="rounded-xl border p-5" style={{ borderColor: p.red }}>
        <h3 className="m-0 text-[15px] font-semibold" style={{ color: p.red }}>
          Delete workspace
        </h3>
        <p className="m-0 mt-1.5 text-[13.5px] leading-[1.6]" style={{ color: p.muted }}>
          This deletes {saved.workspace}, its projects, files and history for everyone. It cannot be undone. Type <span className="font-mono font-semibold" style={{ color: p.text }}>{saved.slug}</span> to confirm.
        </p>
        <div className="mt-4 flex flex-col gap-2 @[560px]:flex-row">
          <label htmlFor={`${uid}-confirm`} className="sr-only">
            Type {saved.slug} to confirm
          </label>
          <input id={`${uid}-confirm`} value={confirmText} onChange={(e) => setConfirmText(e.target.value)} placeholder={saved.slug} autoComplete="off" className={cn(field, "font-mono @[560px]:max-w-xs")} style={fs()} />
          <button type="button" disabled={confirmText !== saved.slug} onClick={() => onDeleteWorkspace?.()} className={cn("h-10 cursor-pointer rounded-lg border-0 px-4 text-[13.5px] font-medium disabled:cursor-not-allowed disabled:opacity-40", focus)} style={{ background: p.red, color: "#fff", ...ring }}>
            Delete workspace
          </button>
        </div>
      </div>
    ),
  };

return (
    <section className={cn("@container w-full", className)} style={{ background: p.bg, color: p.text }}>
      <div className="relative mx-auto max-w-5xl px-4 py-10 @[640px]:px-6 @[640px]:py-14">
        <div className="relative grid min-h-[600px] grid-cols-[minmax(0,1fr)] overflow-hidden rounded-2xl border @[760px]:grid-cols-[230px_minmax(0,1fr)]" style={{ background: p.card, borderColor: p.border }}>
          <nav aria-label="Settings" className="border-b p-4 @[760px]:border-r @[760px]:border-b-0 @[760px]:p-5" style={{ background: p.nav, borderColor: p.border }}>
            <h2 className="m-0 mb-3 text-[18px] font-semibold tracking-[-0.01em] @[760px]:mb-5">Settings</h2>
            <ul className="m-0 flex list-none gap-1 overflow-x-auto p-0 @[760px]:flex-col">
              {SECTIONS.map((s) => {
                const on = section === s.id;
                const has = s.id === "profile" ? ["name", "email", "bio"].some((k) => dirtyKeys.includes(k as keyof SettingsValues)) : s.id === "workspace" ? ["workspace", "slug", "timezone", "language"].some((k) => dirtyKeys.includes(k as keyof SettingsValues)) : s.id === "appearance" ? ["appearance", "accent", "density"].some((k) => dirtyKeys.includes(k as keyof SettingsValues)) : false;
                return (
                  <li key={s.id} className="shrink-0">
                    <button type="button" aria-current={on ? "page" : undefined} onClick={() => go(s.id)} className={cn("relative flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-3 py-2 text-left", focus)} style={{ color: on ? p.text : s.id === "danger" ? p.red : p.muted, ...ring }}>
                      {on && <motion.span layoutId={`${uid}-sec`} className="absolute inset-0 rounded-lg" style={{ background: p.chip }} transition={reduce ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 38 }} />}
                      <span className="relative min-w-0 flex-1">
                        <span className="block text-[13.5px] font-medium whitespace-nowrap">{s.label}</span>
                        <span className="hidden text-[11.5px] @[760px]:block" style={{ color: p.faint }}>
                          {s.hint}
                        </span>
                      </span>
                      {has && <span className="relative h-1.5 w-1.5 rounded-full" style={{ background: form.accent }} aria-label="Unsaved changes" />}
                    </button>
                  </li>
                );
              })}
            </ul>
          </nav>

<div className="min-w-0 p-5 pb-24 @[640px]:p-7 @[640px]:pb-24">
            <AnimatePresence mode="wait" initial={false}>
              <motion.div key={section} initial={reduce ? false : { opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={reduce ? undefined : { opacity: 0 }} transition={{ duration: 0.16 }}>
                <h3 className="m-0 text-[17px] font-semibold tracking-[-0.01em]">
                  {SECTIONS.find((s) => s.id === section)?.label}
                </h3>
                <p className="m-0 mt-1 mb-6 text-[13px]" style={{ color: p.muted }}>
                  {SECTIONS.find((s) => s.id === section)?.hint}.
                </p>
                {panels[section]}
              </motion.div>
            </AnimatePresence>
          </div>

{/* Unsaved changes bar */}
          <AnimatePresence>
            {dirty && (
              <motion.div initial={reduce ? false : { y: 80, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={reduce ? undefined : { y: 80, opacity: 0 }} transition={{ type: "spring", stiffness: 420, damping: 34 }} className="absolute inset-x-3 bottom-3 z-20 @[760px]:left-[248px]" role="region" aria-label="Unsaved changes">
                <motion.div key={shake} initial={{ x: 0 }} animate={shake && !reduce ? { x: [0, -8, 8, -5, 5, 0] } : { x: 0 }} transition={{ duration: 0.4 }} className="flex flex-wrap items-center justify-between gap-3 rounded-xl px-4 py-3" style={{ background: p.bar, color: "#F5F4F1", boxShadow: p.shadow }}>
                <span className="text-[13px]">
                  {dirtyKeys.length} unsaved {dirtyKeys.length === 1 ? "change" : "changes"}
                </span>
                <span className="flex gap-2">
                  <button type="button" onClick={() => setForm(saved)} className={cn("h-8 cursor-pointer rounded-lg border-0 bg-transparent px-3 text-[13px]", focus)} style={{ color: "rgba(245,244,241,0.7)", ...ring }}>
                    Discard
                  </button>
                  <button type="button" onClick={save} disabled={saving} className={cn("flex h-8 cursor-pointer items-center gap-2 rounded-lg border-0 px-3.5 text-[13px] font-medium disabled:cursor-wait", focus)} style={{ background: form.accent, color: "#0A0A0A", ...ring }}>
                    {saving && <motion.span className="h-3 w-3 rounded-full border-2" style={{ borderTopColor: "transparent", borderRightColor: "#0A0A0A", borderBottomColor: "#0A0A0A", borderLeftColor: "#0A0A0A" }} animate={reduce ? undefined : { rotate: 360 }} transition={{ duration: 0.7, repeat: Infinity, ease: "linear" }} aria-hidden="true" />}
                    {saving ? "Saving…" : "Save changes"}
                  </button>
                </span>
                </motion.div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>

<div className="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center px-4" aria-live="polite">
          <AnimatePresence>
            {toast && (
              <motion.div initial={reduce ? false : { opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={reduce ? undefined : { opacity: 0, y: 6 }} className="flex items-center gap-2 rounded-full px-4 py-2 text-[13px] font-medium shadow-lg" style={{ background: p.on, color: p.onText }}>
                <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="m3 8.5 3 3 7-7" />
                </svg>
                {toast}
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </div>
    </section>
  );
}

export default SettingsScreen;
60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L61",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/new-york/settings-screen/settings-screen.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>