FooterGiant

npx shadcn@latest add "https://designpass.dev/r/FooterGiant-TS-TW.json"

/*!
 * FooterGiant, a DesignPass.dev block by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/blocks/footer-giant
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import type { ReactNode } from "react";
import LiveCopyright from "@/components/layout/LiveCopyright";
import SocialIcons, {
  type SocialIconItem,
} from "@/components/layout/SocialIcons";

export type FooterGiantLink = { label: string; href: string };
export type FooterGiantGroup = { title: string; links: FooterGiantLink[] };
export type FooterGiantSocial = SocialIconItem;

export type FooterGiantProps = {
  className?: string;
  /** Giant cut-off wordmark above the glare line. */
  brand?: string;
  /** Postal / office lines under the left rail. Pass `[]` to hide. */
  address?: string[];
  /** Social row. Pass `[]` to hide. */
  socials?: FooterGiantSocial[];
  groups?: FooterGiantGroup[];
  copyright?: ReactNode;
  copyrightOwner?: string;
  copyrightSuffix?: string;
};

const RAIL = "mx-auto w-full min-w-0 max-w-6xl px-4 sm:px-6 lg:px-8";

const DEFAULT_ADDRESS = [
  "418 Harbor Lane, Suite 12",
  "Portland, OR 97214",
];

const DEFAULT_SOCIALS: FooterGiantSocial[] = [
  { label: "X", href: "https://x.com", icon: "x" },
  { label: "GitHub", href: "https://github.com", icon: "github" },
  { label: "LinkedIn", href: "https://linkedin.com", icon: "linkedin" },
  { label: "YouTube", href: "https://youtube.com", icon: "youtube" },
];

const DEFAULT_GROUPS: FooterGiantGroup[] = [
  {
    title: "Product",
    links: [
      { label: "Inbox", href: "#inbox" },
      { label: "Routing", href: "#routing" },
      { label: "Approvals", href: "#approvals" },
      { label: "Integrations", href: "#integrations" },
    ],
  },
  {
    title: "Resources",
    links: [
      { label: "Docs", href: "#docs" },
      { label: "Guides", href: "#guides" },
      { label: "Blog", href: "#blog" },
      { label: "Changelog", href: "#changelog" },
    ],
  },
  {
    title: "Company",
    links: [
      { label: "About", href: "#about" },
      { label: "Careers", href: "#careers" },
      { label: "Brand", href: "#brand" },
      { label: "Contact", href: "#contact" },
    ],
  },
  {
    title: "Help",
    links: [
      { label: "Support", href: "#support" },
      { label: "Status", href: "#status" },
      { label: "Security", href: "#security" },
      { label: "Privacy", href: "#privacy" },
    ],
  },
  {
    title: "Community",
    links: [
      { label: "Discord", href: "#discord" },
      { label: "X", href: "#x" },
      { label: "GitHub", href: "#github" },
      { label: "YouTube", href: "#youtube" },
    ],
  },
];

/**
 * Footer with a giant cut-off brand word, soft radial wash above the glare
 * line, address + SocialIcons + LiveCopyright on the left rail, and
 * multi-column sitemap. Colors follow `--tpl-chrome*`.
 */
export default function FooterGiant({
  className = "",
  brand = "DesignPass",
  address = DEFAULT_ADDRESS,
  socials = DEFAULT_SOCIALS,
  groups = DEFAULT_GROUPS,
  copyright,
  copyrightOwner,
  copyrightSuffix,
}: FooterGiantProps) {
  const owner = copyrightOwner ?? brand;
  const showAddress = address.length > 0;
  const showSocials = socials.length > 0;

  return (
    <footer
      className={`relative w-full overflow-hidden bg-[var(--tpl-chrome,#000)] text-[color:var(--tpl-chrome-ink,#fff)] ${className}`.trim()}
    >
      {/* Soft radial above the glare (fades out before the top), then clipped wordmark. */}
      <div
        className="pointer-events-none relative h-[8rem] overflow-hidden sm:h-[10rem] lg:h-[11rem]"
        aria-hidden
      >
        {/* Anchored on the glare line so the wash soft-fades upward, never hard-cuts. */}
        <div
          className="absolute inset-x-0 bottom-0 z-0 h-full"
          style={{
            background:
              "radial-gradient(55% 85% at 50% 100%, color-mix(in srgb, var(--tpl-chrome-ink, #fff) 11%, transparent), transparent 70%)",
          }}
        />
        <p
          className="absolute inset-x-0 bottom-0 z-10 translate-y-[28%] text-center text-[clamp(4.5rem,18vw,11rem)] font-bold leading-none tracking-[-0.06em] text-white/[0.032] select-none"
          style={{
            textShadow: "0 12px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35)",
          }}
        >
          {brand}
        </p>
      </div>

      <div className="relative">
        {/* Center-bright glare line under the cut wordmark. */}
        <div
          className="relative h-px w-full"
          style={{
            background:
              "linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--tpl-chrome-ink, #fff) 12%, transparent) 16%, color-mix(in srgb, var(--tpl-chrome-ink, #fff) 38%, transparent) 50%, color-mix(in srgb, var(--tpl-chrome-ink, #fff) 12%, transparent) 84%, transparent 100%)",
          }}
          aria-hidden
        />

        <div className={`${RAIL} relative pb-12 pt-16 sm:pb-14 sm:pt-20 lg:pb-16 lg:pt-24`}>
          <div className="grid grid-cols-1 gap-12 lg:grid-cols-12 lg:gap-10">
            <div className="min-w-0 lg:col-span-3">
              {showAddress ? (
                <p className="max-w-[14rem] text-sm leading-relaxed text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.55))]">
                  {address.map((line, index) => (
                    <span key={`${line}-${index}`} className="block">
                      {line}
                    </span>
                  ))}
                </p>
              ) : null}

              {showSocials ? (
                <SocialIcons
                  items={socials}
                  className={showAddress ? "mt-6" : undefined}
                />
              ) : null}

              <p
                className={`text-xs text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.3))] ${
                  showAddress || showSocials ? "mt-5" : ""
                }`.trim()}
              >
                {copyright ?? <LiveCopyright owner={owner} suffix={copyrightSuffix} />}
              </p>
            </div>

            <nav aria-label="Footer" className="min-w-0 lg:col-span-9">
              <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-5">
                {groups.map((group) => (
                  <div key={group.title} className="min-w-0">
                    <p className="text-sm font-medium tracking-tight text-[color:var(--tpl-chrome-ink,#fff)]">
                      {group.title}
                    </p>
                    <ul className="mt-4 space-y-3">
                      {group.links.map((link) => (
                        <li key={link.label}>
                          <a
                            href={link.href}
                            className="text-sm text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.5))] transition-colors hover:text-[color:var(--tpl-chrome-ink,#fff)]"
                          >
                            {link.label}
                          </a>
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            </nav>
          </div>
        </div>
      </div>
    </footer>
  );
}