CTA

Call-to-action section component for home block.

Installation

This component is part of the Home block. Install the full block to use it:

CLI

npx shadcn@latest add "https://ui.xaclabs.dev/r/home.json"

Usage

import { CTA } from "@/registry/blocks/home/components/home-cta"

View component source

home-cta.tsx

tsx

"use client"

import { motion } from "motion/react"
import { Button, type ButtonProps } from "@/components/ui/button"
import { cn, hlcn, resolveLink } from "@/lib/utils"
import { Container } from "@/registry/components/container"

export interface HomeCtaProps {
  cta: {
    title: string
    description: string
    variant: "primary" | "secondary"
    action: {
      title: string
      href: string
      variant?: ButtonProps["variant"]
    }
  }
}

export function HomeCta({ cta }: HomeCtaProps) {
  const { variant, title, description, action } = cta
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
      className={cn("mx-4", hlcn(variant), "rounded-2xl")}
    >
      <Container className="gap-24 py-32">
        <div className="flex gap-4 basis-2/3">
          <div className="flex flex-col gap-4 basis-2/3">
            <h1 className="text-3xl font-bold">{title}</h1>
            <p className="text-lg text-muted-foreground">{description}</p>
          </div>
          <div className="flex flex-col gap-4 my-auto basis-1/3">
            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
              <Button
                variant="secondary"
                size="lg"
                className="border border-border"
                asChild
              >
                <a href={resolveLink(action.href)}>{action.title}</a>
              </Button>
            </motion.div>
          </div>
        </div>
      </Container>
    </motion.div>
  )
}

PreviousLogo Cloud NextOverview