FirstReply Footer

Component

About

The compact homepage footer with brand, documentation, contact and policy links.

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

Code

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

Usage.tsx

"use client";
import React from 'react';
import Section from '@/components/ui/firstreply-footer';

const settings = { dark: false };
const colors = {
  "light": {
    "background": "#ffffff",
    "foreground": "#18181b",
    "card": "#ffffff",
    "card-foreground": "#18181b",
    "primary": "#007a48",
    "primary-foreground": "#ffffff",
    "muted": "#f4f4f5",
    "muted-foreground": "#52525b",
    "border": "#d4d4d8",
    "input": "#71717a",
    "secondary": "#f4f4f5",
    "secondary-foreground": "#18181b",
    "accent": "#f4f4f5",
    "accent-foreground": "#18181b",
    "ring": "#007a48"
  },
  "dark": {
    "background": "#090e0b",
    "foreground": "#fafafa",
    "card": "#111713",
    "card-foreground": "#fafafa",
    "primary": "#00d887",
    "primary-foreground": "#080c0a",
    "muted": "#232c26",
    "muted-foreground": "#a2afa6",
    "border": "#526057",
    "input": "#657369",
    "secondary": "#232c26",
    "secondary-foreground": "#fafafa",
    "accent": "#232c26",
    "accent-foreground": "#fafafa",
    "ring": "#00d887"
  }
};
export default function Demo(props: Partial<typeof settings>) {
 const s = {...settings,...props};
 const theme = colors[s.dark ? 'dark' : 'light'];
 const style = Object.fromEntries(Object.entries(theme).flatMap(([key,value]) => [[`--color-${key}`,value],[`--${key}`,value]])) as React.CSSProperties;
 return <div className={s.dark ? 'dark' : ''} style={style}><Section /></div>;
}