export const title = "Inline CTA components"
export const description = "Powerful and customizable React inline CTA components built for modern applications and websites. These inline CTAs are built using React Aria and styled with Tailwind CSS."

import * as Demos from "@/components/application/inline-cta/inline-cta.demo";

<PreviewAndCode title="Inline CTA example" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-3xl">
            <Demos.InlineCTAImage />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inline-cta/InlineCTAImage" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

These inline CTA components do not require any installation, just copy and paste into your project once you've set up Untitled UI. Check out our [installation guide](/docs/installation) to get started.

<Divider />

## Inline CTA examples

Below are examples and variations of this inline CTA component:

### Actions {{ tocOnly:true }}

<PreviewAndCode title="Actions" isPublic={false}>
    <ResizablePreview id="preview"  className="flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-3xl">
            <Demos.InlineCTAActions />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode  component="inline-cta/InlineCTAActions" />
    </TabPanel>
</PreviewAndCode>

### Email field {{ tocOnly:true }}

<PreviewAndCode title="Email field" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-3xl">
            <Demos.InlineCTAEmailField />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode  component="inline-cta/InlineCTAEmailField" />
    </TabPanel>
</PreviewAndCode>

### Change plan {{ tocOnly:true }}

<PreviewAndCode title="Change plan" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-3xl">
            <Demos.InlineCTAChangePlan />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode  component="inline-cta/InlineCTAChangePlan" />
    </TabPanel>
</PreviewAndCode>

### Upgrade plan {{ tocOnly:true }}

<PreviewAndCode title="Upgrade plan" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-3xl">
            <Demos.InlineCTAUpgradePlan />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode  component="inline-cta/InlineCTAUpgradePlan" />
    </TabPanel>
</PreviewAndCode>

### Payment method {{ tocOnly:true }}

<PreviewAndCode title="Payment method" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-3xl">
            <Demos.InlineCTAPaymentMethod />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode  component="inline-cta/InlineCTAPaymentMethod" />
    </TabPanel>
</PreviewAndCode>

### Receipt {{ tocOnly:true }}

<PreviewAndCode title="Receipt" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-3xl">
            <Demos.InlineCTAReceipt />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode  component="inline-cta/InlineCTAReceipt" />
    </TabPanel>
</PreviewAndCode>