Footer Logo

npx shadcn@latest add https://framebrick.co/r/flip-button.json https://framebrick.co/r/underline-link.json

npx shadcn@latest add https://framebrick.co/r/blocks/tokens.json

import * as React from "react";
import Link from "next/link";
import { FlipButton } from "@/components/ui/flip-button";
import { UnderlineLink } from "@/components/ui/underline-link";
import { cn } from "@/lib/utils";

/*
 * Footer Logo — a calm footer: the brand as a large wordmark, a line, a short statement with an action beside three
 * link columns, another line, and the copyright with the legal links.
 * Source: marcframe/kalme → components/site/Footer.tsx (+ design-system TextLink, Button).
 *
 * Layout kept from Framer: on the page background with a line on top. The wordmark, a line, then the main row 48px
 * apart; the main row and the bottom row are split by a line, 64px apart (80px from 768px, 96px from 1024px).
 * Main row: below 768px the statement and button stack (up to 350px) above a grid of two link columns with the third
 * across the row under them; from 768px the statement and button share a row above the three columns; from 1024px the
 * statement and button (350px) sit at the left and the columns at the right, 96px apart. Bottom row: links above the
 * centred copyright on phones; copyright left, links right from 768px.
 * Motion kept: every link underlines from the left on hover (underline-link; Kalme uses a no-bounce spring, the
 * component a 0.2 bounce); the button rolls its label (flip-button). The column titles are h2 — a footer's parts are
 * top-level sections of the page — inside the footer landmark.
 */

type LinkItem = { label: string; href: string };

export type FooterLogoProps = {
  /** The wordmark at the top; `logo` (any node, e.g. an SVG) replaces the name. */
  brand?: { name: string; href: string; logo?: React.ReactNode };
  text?: string;
  action?: LinkItem;
  /** Two or three columns; the second goes across the row on phones. */
  columns?: { title: string; links: LinkItem[] }[];
  /** "{year}" becomes the current year. */
  copyright?: string;
  legal?: LinkItem[];
  className?: string;
};

const defaults = {
  brand: { name: "Kalme", href: "/" },
  text: "A digital marketing studio for brands that want growth they can explain. Tell us where you want to be next year.",
  action: { label: "Schedule a call", href: "/contact" },
  columns: [
    {
      title: "Quick links",
      links: [
        { label: "About", href: "/about" },
        { label: "Services", href: "/services" },
        { label: "Projects", href: "/projects" },
        { label: "Blog", href: "/blog" },
      ],
    },
    {
      title: "Get in touch",
      links: [
        { label: "hello@kalme.example", href: "mailto:hello@kalme.example" },
        { label: "+1 (555) 014 2290", href: "tel:+15550142290" },
      ],
    },
    {
      title: "Follow us",
      links: [
        { label: "Instagram", href: "https://instagram.com" },
        { label: "LinkedIn", href: "https://linkedin.com" },
        { label: "Dribbble", href: "https://dribbble.com" },
      ],
    },
  ],
  copyright: "© {year} Kalme. All rights reserved.",
  legal: [
    { label: "Privacy policy", href: "/privacy" },
    { label: "Terms", href: "/terms" },
  ],
};

export function FooterLogo({
  brand = defaults.brand,
  text = defaults.text,
  action = defaults.action,
  columns = defaults.columns,
  copyright = defaults.copyright,
  legal = defaults.legal,
  className,
}: FooterLogoProps) {
  return (
    <footer className={cn("border-t pt-(--section-y) pb-5 md:pb-6 lg:pb-7.5", className)}>
      <div className="mx-auto flex max-w-(--container) flex-col gap-16 px-(--gutter) md:gap-20 lg:gap-24">
        <div className="flex flex-col gap-12">
          <Link
            href={brand.href}
            className="w-fit rounded-md font-heading text-display leading-none font-semibold tracking-tight outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
          >
            {brand.logo ?? brand.name}
          </Link>
          <hr className="border-border" />
          <div className="flex flex-col gap-12 lg:flex-row lg:items-start lg:justify-between lg:gap-24">
            <div className="flex max-w-87.5 flex-col items-start gap-7.5 md:max-w-none md:flex-row md:items-end md:justify-between lg:max-w-87.5 lg:flex-col lg:items-start lg:justify-start">
              {text && <p className="text-pretty md:max-w-100 lg:max-w-none">{text}</p>}
              {action && <FlipButton href={action.href}>{action.label}</FlipButton>}
            </div>
            {columns.length > 0 && (
              <div className="grid grid-cols-2 gap-x-7.5 gap-y-12 md:flex md:justify-between lg:gap-24">
                {columns.map((column, i) => (
                  <div
                    key={column.title}
                    className={cn("flex min-w-0 flex-col items-start gap-4", columns.length === 3 && i === 1 && "col-span-2 row-start-2")}
                  >
                    <h2 className="text-muted-foreground">{column.title}</h2>
                    <ul className="flex flex-col items-start gap-2.5">
                      {column.links.map((link) => (
                        <li key={link.href} className="flex">
                          <UnderlineLink href={link.href} arrow={false}>
                            <span className="text-base font-normal">{link.label}</span>
                          </UnderlineLink>
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        <div className="flex flex-col-reverse items-center gap-5 border-t pt-16 md:flex-row md:justify-between md:pt-20 lg:pt-24">
          <p>{copyright.replace("{year}", String(new Date().getFullYear()))}</p>
          {legal.length > 0 && (
            <ul className="flex flex-wrap items-center justify-center gap-5">
              {legal.map((link) => (
                <li key={link.href} className="flex">
                  <UnderlineLink href={link.href} arrow={false}>
                    <span className="text-base font-normal">{link.label}</span>
                  </UnderlineLink>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </footer>
  );
}