A centered conversion section with a signup link and supporting reassurance.
"use client";
import React from 'react';
import Section from '@/components/ui/firstreply-final-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>;
}
Part of FirstReply — browse the full library on 21st.dev.