FirstReply Product Suite

Component

About

The FirstReply product suite 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 Product Suite to your project and fits it to your theme.

Code

How FirstReply Product Suite 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-product-suite';

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