Corporate Footer

1"use client";
2 
3import * as React from "react";
4import Link from "next/link";
5 
6/* ── types ─────────────────────────────────────────────────────── */
7interface FooterLink {
8  label: string;
9  href: string;
10}
11 
12interface FooterColumn {
13  title: string;
14  links: FooterLink[];
15}
16 
17interface FooterSocial {
18  icon: React.ComponentType<{ className?: string }>;
19  href: string;
20  label?: string;
21}
22 
23interface CorporateFooterProps {
24  /** Custom brand mark — any ReactNode (SVG, icon, emoji). Falls back to a default geometric mark. */
25  brandMark?: React.ReactNode;
26  brandName?: string;
27  tagline?: string;
28  columns?: FooterColumn[];
29  socials?: FooterSocial[];
30  copyright?: string;
31}
32 
33/* ── decorative watermark ─────────────────────────────────────── */
34function Watermark() {
35  return (
36    <svg
37      className="pointer-events-none absolute inset-0 size-full translate-y-2/3 text-muted-foreground/[0.035]"
38      viewBox="0 0 180 220"
39      fill="none"
40      xmlns="http://www.w3.org/2000/svg"
41      aria-hidden="true"
42    >
43      <rect width="100" height="100" rx="28" fill="currentColor" />
44      <rect
45        x="80"
46        y="80"
47        width="100"
48        height="140"
49        rx="28"
50        fill="currentColor"
51      />
52    </svg>
53  );
54}
55 
56/* ── default mark ─────────────────────────────────────────────── */
57function DefaultMark() {
58  return (
59    <svg
60      width="18"
61      height="18"
62      viewBox="0 0 18 18"
63      fill="none"
64      className="size-[18px]"
65      aria-hidden="true"
66    >
67      <rect width="18" height="18" rx="5" className="fill-foreground" />
68    </svg>
69  );
70}
71 
72/* ── defaults ─────────────────────────────────────────────────── */
73const defaults = {
74  brandName: "ruixen ui",
75  tagline: "Modern components for modern interfaces.",
76  columns: [
77    {
78      title: "Product",
79      links: [
80        { label: "Components", href: "#" },
81        { label: "Templates", href: "#" },
82        { label: "Pro", href: "#" },
83        { label: "Changelog", href: "#" },
84      ],
85    },
86    {
87      title: "Resources",
88      links: [
89        { label: "Documentation", href: "#" },
90// … truncated