FirstReply Product Detail hero

Component

About

A hero section from FirstReply's detailed product pages, with product-specific sample content.

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

Code

How FirstReply Product Detail hero 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-detail-hero';

const settings = { dark: false, product: "whatsapp-agents" };
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 product={s.product} /></div>;
}