CTA, offer

npx shadcn add @klarhimmel/cta-offer

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import CtaOffer from '@/components/klarhimmel/blocks/cta-offer';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <CtaOffer props={{
          "eyebrow": "Free this week",
          "title": "A free review of your website",
          "description": "We read your site as a visitor would and tell you what we would change, in writing.",
          "points": [
            "A page-by-page note on what works and what does not",
            "A plan for the pages we would rebuild, as a picture you can click through",
            "An honest answer on whether we are the right people"
          ],
          "pointsTitle": "What you get",
          "turnaround": "Within 24 hours",
          "turnaroundLabel": "Turnaround",
          "limit": "Five reviews this week",
          "limitLabel": "This week",
          "mode": "form",
          "link": {
            "label": "Ask for a review",
            "href": "#review"
          },
          "form": {
            "fieldLabel": "Your site's address",
            "fieldType": "domain",
            "submit": "Ask for a free review",
            "note": "We only use the address to read your site and reply to you."
          },
          "messages": {
            "sent": "Thank you. We have your address and will send the review within 24 hours.",
            "error": "Something went wrong. Please try again, or email us."
          },
          "errors": {
            "required": "Fill in this field.",
            "email": "Enter an email address like name@company.example.",
            "url": "Enter an address that starts with https://, like https://example.com.",
            "domain": "Enter a site address like yourcompany.se."
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}