FirstReply Voice Call to Action

Component

About

The FirstReply voice call to action 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 Voice Call to Action to your project and fits it to your theme.

Code

How FirstReply Voice Call to Action 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-voice-cta';

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