# Footer 06

> Two-part footer: a bordered CTA panel over a rotated, blurred image with a headline, sub-copy and a wide sign-up button, above a brand block with social icons, two link columns and a hairline copyright row.

A shadcn/ui block from the [@hirael](https://hirael.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/hirael/footer-06).

- Page, with a live preview: https://shadcn.exchange/r/hirael/footer-06
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/hirael/footer-06-light-de0e6e94730198b0.png
- Registry item: https://hirael.com/r/footer-06.json
- Categories: blocks, footer
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://hirael.com/r/footer-06.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `button`

## Files

### `registry/hirael/bases/radix/blocks/footer-06/footer-06.tsx`

```tsx
// Footer 06 from Hirael <https://hirael.com/blocks/footer/footer-06>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import type * as React from 'react';
import Image from 'next/image';
import { ArrowRight } from 'lucide-react';

import { cn } from '@/lib/utils';
import { Button } from '@/registry/hirael/bases/radix/ui/button';

const ENTER =
  'animate-in fade-in slide-in-from-bottom-4 duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] fill-mode-both motion-reduce:animate-none';

const stagger = (index: number): React.CSSProperties => ({ animationDelay: `${index * 60}ms` });

const GithubIcon = (props: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg viewBox="0 0 24 24" aria-hidden {...props}>
      <path
        fill="currentColor"
        d="M12 2C6.48 2 2 6.58 2 12.22c0 4.5 2.87 8.32 6.84 9.67.5.1.68-.22.68-.49 0-.24-.01-.87-.01-1.7-2.78.61-3.37-1.36-3.37-1.36-.45-1.18-1.11-1.49-1.11-1.49-.91-.63.07-.62.07-.62 1 .07 1.53 1.05 1.53 1.05.9 1.56 2.35 1.11 2.92.85.09-.66.35-1.11.63-1.37-2.22-.26-4.55-1.13-4.55-5.04 0-1.11.39-2.02 1.03-2.74-.1-.26-.45-1.3.1-2.7 0 0 .84-.27 2.75 1.04A9.4 9.4 0 0 1 12 7.04c.85 0 1.7.12 2.5.34 1.9-1.31 2.74-1.04 2.74-1.04.55 1.4.2 2.44.1 2.7.64.72 1.03 1.63 1.03 2.74 0 3.92-2.34 4.78-4.57 5.03.36.32.68.94.68 1.9 0 1.37-.01 2.47-.01 2.81 0 .27.18.6.69.49A10.04 10.04 0 0 0 22 12.22C22 6.58 17.52 2 12 2Z"
      />
    </svg>
  );
};

const LinkedinIcon = (props: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg viewBox="0 0 24 24" aria-hidden {...props}>
      <path
        fill="currentColor"
        d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28ZM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14ZM7.12 20.45H3.55V9h3.57v11.45ZM22.22 0H1.77C.8 0 0 .78 0 1.74v20.52C0 23.22.8 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.74V1.74C24 .78 23.2 0 22.22 0Z"
      />
    </svg>
  );
};

const XIcon = (props: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg viewBox="0 0 24 24" aria-hidden {...props}>
      <path
        fill="currentColor"
        d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
      />
    </svg>
  );
};

interface BrandMarkProps {
  className?: string;
}

const BrandMark = ({ className }: BrandMarkProps) => {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className={className}>
      <path d="M2.3 12h2.4v10.95h6.2V14.6h4.6v8.35h6.2V12h-2.4V1.05h-6.2V9.4H8.5V1.05H2.3Z" />
    </svg>
  );
};

const COLUMNS = [
  {
    label: 'Product',
    links: [
      { label: 'Features', href: '#' },
      { label: 'FAQs', href: '#' },
      { label: 'Get started', href: '#' },
    ],
  },
  {
    label: 'Resources',
    links: [
      { label: 'Documentation', href: '#' },
      { label: 'Changelog', href: '#' },
      { label: 'Contact us', href: '#' },
    ],
  },
];

const SOCIALS = [
  { label: 'GitHub', href: 'https://github.com/mohammadshehadeh', icon: GithubIcon },
  { label: 'LinkedIn', href: 'https://linkedin.com/in/mohammadshhadeh', icon: LinkedinIcon },
  { label: 'X', href: 'https://x.com/_mshehadeh', icon: XIcon },
];

const Footer06 = () => {
  return (
    <footer data-slot="footer" className="w-full rounded-xs border border-border bg-muted/10 p-2">
      <div
        data-slot="footer-cta"
        className="relative min-h-72 w-full overflow-hidden rounded-xs border border-border sm:h-80"
      >
        <Image
          src="https://hirael.com/media/blocks/footer-06/fractal-maze.jpg"
          alt="Fractal maze of interlocking paths"
          width={1920}
          height={1080}
          quality={75}
          className="absolute inset-0 h-full w-full rotate-180 object-cover blur-[1px] md:blur-[2px] dark:opacity-40"
        />
        <div aria-hidden className="absolute inset-0 bg-linear-to-t from-black/70 via-black/40 to-black/10" />
        <div className="relative z-10 flex h-full flex-col items-start justify-between px-4 pt-2 pb-2 sm:justify-center sm:pb-4 md:px-8">
          <div className={cn(ENTER, 'relative flex flex-col items-start justify-start')}>
            <p className="mt-2 max-w-lg text-start text-lg font-semibold tracking-tight text-white sm:mt-3 sm:text-xl md:text-3xl">
              Stop fighting YAML. Start orchestrating CI/CD.
            </p>
            <p className="max-w-xl pt-2 text-start text-xs text-white/80 sm:pt-3 sm:text-sm">
              Connect a repository, see every workflow as a graph, and edit it without leaving the page.
            </p>
          </div>
          <div className="mt-4 flex w-full animate-in flex-row flex-wrap items-stretch justify-center gap-2 delay-150 duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] fill-mode-both fade-in slide-in-from-bottom-4 motion-reduce:animate-none sm:mt-6 md:items-start md:justify-start md:gap-4">
            <Button asChild className="group h-10 w-full sm:h-12 md:w-52">
              <a href="#">
                Get started
                <ArrowRight className="size-4 transition-transform duration-150 group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
              </a>
            </Button>
          </div>
        </div>
      </div>

      <div className="px-4 pt-12 pb-2 md:pb-12">
        <div className="mx-auto max-w-6xl">
          <div className="mb-8 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
            <div data-slot="footer-brand" className={cn(ENTER, 'lg:col-span-2')}>
              <a href="#" className="mb-2 flex w-fit items-center gap-2 text-foreground">
                <BrandMark className="size-5" />
                <span className="text-base font-semibold tracking-tight">Hirael</span>
              </a>
              <p className="mb-4 max-w-sm text-sm text-balance text-muted-foreground">
                A visual editor for CI pipelines. Your workflow files stay in the repo, and the graph stays in sync.
              </p>
              <div className="flex gap-1">
                {SOCIALS.map((social) => (
                  <Button key={social.label} asChild variant="ghost" size="icon">
                    <a href={social.href} target="_blank" rel="noopener noreferrer" aria-label={social.label}>
                      <social.icon className="size-5" />
                    </a>
                  </Button>
                ))}
              </div>
            </div>

            {COLUMNS.map((section, index) => (
              <div key={section.label} data-slot="footer-column" style={stagger(index + 1)} className={ENTER}>
                <h3 className="mb-4 font-semibold text-foreground">{section.label}</h3>
                <ul className="space-y-3 text-sm">
                  {section.links.map((link) => (
                    <li key={link.label}>
                      <a
                        href={link.href}
                        className="text-muted-foreground transition-colors duration-150 hover:text-foreground"
                      >
                        {link.label}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          <div data-slot="footer-legal" style={stagger(3)} className={cn(ENTER, 'border-t border-border/50 pt-8')}>
            <div className="flex flex-col items-center justify-between md:flex-row">
              <p className="text-sm text-muted-foreground">© 2026 Hirael. All rights reserved.</p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer06;
```