All components

CTA 03

CTA 03 is a React and Tailwind CSS button component from Eldora UI, licensed MIT. Copy it and paste it into your project.

Eldora UI MIT buttons

What it is

CTA 03 is a React and Tailwind CSS button component from Eldora UI, licensed MIT. Copy it and paste it into your project.

How to use it

Open it in the catalogue, press copy, and paste it into your project. The prompt you copy carries the code and the rules that tell your agent to reproduce it without changing anything.

Open in the catalogue

Five free copies a month. No card.

Needs

npm i lucide-react

Licence

This component comes from Eldora UI and is redistributed under the MIT licence, which permits commercial use. The copyright notice travels with the code.

CTA 03

registry/blocks/cta-03/page.tsx
import { CallToAction } from "@/registry/blocks/cta-03/components/cta-03"

export default function Page() {
  return (
    <div className="flex min-h-screen w-full flex-col items-center justify-center px-4">
      <CallToAction />
    </div>
  )
}
registry/blocks/cta-03/components/cta-03.tsx
import { ArrowRightIcon, AtSignIcon } from "lucide-react"

import { Ripple } from "./ripple-bg"

export function CallToAction() {
  return (
    <div className="bg-secondary/80 dark:bg-secondary/40 relative mx-auto flex min-h-[20rem] w-full max-w-3xl flex-col justify-between gap-y-8 border-x px-2 py-14 md:px-4 md:py-20">
      <div className="pointer-events-none absolute -top-px left-1/2 w-screen -translate-x-1/2 border-t" />
      <Ripple />

      <div className="space-y-1">
        <h2 className="text-center text-2xl font-semibold tracking-tight md:text-4xl">
          Join our community
        </h2>
        <p className="text-muted-foreground text-center text-sm text-balance md:text-base">
          Connect with fellow builders, get early access, and stay in the loop
          with product updates and exclusive events.
        </p>
        <div className="mt-4 flex items-center justify-center -space-x-[0.45rem]">
          <img
            alt="Avatar 01"
            className="ring-background rounded-full ring-1"
            height={24}
            src="https://avatar.vercel.sh/avatar1"
            width={24}
          />
          <img
            alt="Avatar 02"
            className="ring-background rounded-full ring-1"
            height={24}
            src="https://avatar.vercel.sh/avatar2"
            width={24}
          />
          <img
            alt="Avatar 03"
            className="ring-background rounded-full ring-1"
            height={24}
            src="https://avatar.vercel.sh/avatar3"
            width={24}
          />
          <img
            alt="Avatar 04"
            className="ring-background rounded-full ring-1"
            height={24}
            src="https://avatar.vercel.sh/avatar4"
            width={24}
          />
          <img
            alt="Avatar 05"
            className="ring-background rounded-full ring-1"
            height={24}
            src="https://avatar.vercel.sh/avatar5"
            width={24}
          />
          <img
            alt="Avatar 06"
            className="ring-background rounded-full ring-1"
            height={24}
            src="https://avatar.vercel.sh/avatar6"
            width={24}
          />
        </div>
      </div>
      <div className="pointer-events-none absolute -bottom-px left-1/2 w-screen -translate-x-1/2 border-b" />
    </div>
  )
}
registry/blocks/cta-03/components/ripple-bg.tsx
import React, { ComponentPropsWithoutRef, CSSProperties } from "react"

import { cn } from "@/lib/utils"

interface RippleProps extends ComponentPropsWithoutRef<"div"> {
  mainCircleSize?: number
  mainCircleOpacity?: number
  numCircles?: number
}

export const Ripple = React.memo(function Ripple({
  mainCircleSize = 210,
  mainCircleOpacity = 0.24,
  numCircles = 8,
  className,
  ...props
}: RippleProps) {
  return (
    <div
      className={cn(
        "pointer-events-none absolute inset-0 [mask-image:linear-gradient(to_bottom,white,transparent)] select-none",
        className
      )}
      {...props}
    >
      {Array.from({ length: numCircles }, (_, i) => {
        const size = mainCircleSize + i * 70
        const opacity = mainCircleOpacity - i * 0.03
        const animationDelay = `${i * 0.06}s`
        const borderStyle = "solid"

        return (
          <div
            key={i}
            className={`animate-ripple bg-foreground/25 absolute rounded-full border shadow-xl`}
            style={
              {
                "--i": i,
                width: `${size}px`,
                height: `${size}px`,
                opacity,
                animationDelay,
                borderStyle,
                borderWidth: "1px",
                borderColor: `var(--foreground)`,
                top: "50%",
                left: "50%",
                transform: "translate(-50%, -50%) scale(1)",
              } as CSSProperties
            }
          />
        )
      })}
    </div>
  )
})

Ripple.displayName = "Ripple"

Similar components