import { NAV_LINKS, SOCIAL_LINKS } from "./Footer04.types";
import "./Footer04.tailwind.css";
function AlexyLinkBrand() {
    return (<span className="inline-flex select-none items-center gap-2.5">
      <svg viewBox="0 0 523 713" className="h-8 w-auto shrink-0" aria-hidden="true">
        <path d="M305.5 296V325L284 348V645.5L261 713L238 645.5V348L218 325V296L261 227L305.5 296Z" fill="#39FF14"/>
        <path d="M219.5 142.5L124.5 295.5V378H162.5V407.5L84.5 453.5L162.5 511.5L192 651L124.5 588V540.5L0 453.5L69 407.5V278.5L219.5 0V142.5Z" fill="#39FF14"/>
        <path d="M453.5 278.5V407.5L522.5 453.5L398 540.5V588L330.5 651L360 511.5L438 453.5L360 407.5V378H398V295.5L303 142.5V0L453.5 278.5Z" fill="#39FF14"/>
      </svg>
      <span className="text-[21px] leading-none font-bold tracking-tight whitespace-nowrap text-foreground">ALEXY LINK</span>
    </span>);
}
function InstagramIcon() {
    return (<svg viewBox="0 0 24 24" className="size-4.5" fill="none" aria-hidden="true">
      <rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.6"/>
      <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.6"/>
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
    </svg>);
}
function LinkedInIcon() {
    return (<svg viewBox="0 0 24 24" className="size-4.5" fill="none" aria-hidden="true">
      <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M7.5 10v6.5M7.5 7.5v.01M11.5 16.5V13c0-1.5 1-2.5 2.25-2.5S16 11.5 16 13v3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>);
}
function MailIcon() {
    return (<svg viewBox="0 0 24 24" className="size-4.5" fill="none" aria-hidden="true">
      <rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.6"/>
      <path d="m4 7 8 6 8-6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>);
}
const SOCIAL_ICONS = {
    Instagram: <InstagramIcon />,
    LinkedIn: <LinkedInIcon />,
    Mail: <MailIcon />,
};
function SocialRow({ links }) {
    return (<div className="flex items-center gap-5">
      {links.map((social) => (<a key={social.platform} href={social.href} target={social.platform === "Mail" ? undefined : "_blank"} rel={social.platform === "Mail" ? undefined : "noopener noreferrer"} aria-label={`ALEXY LINK on ${social.platform}`} className="al-footer04-icon text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand">
          {SOCIAL_ICONS[social.platform]}
        </a>))}
    </div>);
}
/**
 * Footer 04 — a deliberately different rhythm from Footer 03: four
 * distinctly separated rows (nav, brand, social, copyright) each given
 * generous vertical space and a hairline divider, rather than one tight
 * centered stack. Icons here sit bare (no bordered circle) to keep the
 * composition visually lighter than Footer 03's.
 */
function Footer04() {
    const year = new Date().getFullYear();
    return (<footer className="al-footer04-root bg-white">
      <div className="mx-auto flex w-full max-w-2xl flex-col items-center divide-y divide-border px-4 text-center sm:px-6 lg:px-8">
        <nav aria-label="Primary" className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 py-8">
          {NAV_LINKS.map((link) => (<a key={link.label} href={link.href} className="text-sm font-medium text-foreground transition-opacity hover:opacity-60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand">
              {link.label}
            </a>))}
        </nav>

        <a href="#home" aria-label="ALEXY LINK home" className="py-8">
          <AlexyLinkBrand />
        </a>

        <div className="py-8">
          <SocialRow links={SOCIAL_LINKS}/>
        </div>

        <p className="py-8 text-xs text-muted-foreground">© {year} ALEXY LINK. All rights reserved.</p>
      </div>
    </footer>);
}
export { Footer04 };
Footer 04

Requirements

Dependencies

Usage
