Todos os componentes

CTA 03

CTA 03 é um componente de botão para React e Tailwind CSS, da biblioteca Eldora UI, com licença MIT. Copia e cola no teu projeto.

Eldora UI MIT buttons

O que é

CTA 03 é um componente de botão para React e Tailwind CSS, da biblioteca Eldora UI, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Precisa de

npm i lucide-react

Licença

Este componente vem de Eldora UI e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

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"

Componentes parecidos