Sign-off Footer

Footers

About

A portfolio page footer that closes like a letter, showing a copy-to-clipboard email pill, a live local-time clock with the visitor's time offset, an availability status dot, and a credits row with social links and a back-to-top action.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Sign-off Footer to your project and fits it to your theme.

Code

How Sign-off Footer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import SignOffFooter from "@/components/ui/sign-off-footer";

export default function Demo() {
  return (
    <div className="flex min-h-full w-full items-end bg-[#0c0b0a]">
      <SignOffFooter
        line="Let's make something careful."
        email="hello@hamza.dev"
        city="Muscat"
        timeZone="Asia/Muscat"
        owner="Hamza Al-Bulushi"
        links={[
          { label: "GitHub", href: "#" },
          { label: "LinkedIn", href: "#" },
          { label: "Read.cv", href: "#" },
        ]}
      />
    </div>
  );
}