FirstReply Architecture

Component

About

The FirstReply architecture marketing section, including its original product illustration and English copy.

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

Code

How FirstReply Architecture 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-architecture';

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>;
}