Todos os componentes

CTA 2

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

SmoothUI MIT buttons

O que é

CTA 2 é um componente de botão para React e Tailwind CSS, da biblioteca SmoothUI, 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 motion

Licença

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

CTA 2

index.tsx
"use client";

import SmoothButton from "@/components/smoothui/smooth-button";
import { getImageKitUrl } from "@/lib/smoothui-data";
import { motion, useReducedMotion } from "motion/react";

const SPRING = {
  bounce: 0.1,
  duration: 0.25,
  type: "spring" as const,
};

export function CtaSplit() {
  const shouldReduceMotion = useReducedMotion();

  return (
    <section aria-labelledby="cta-split-heading">
      <div className="py-24 md:py-32">
        <div className="mx-auto grid max-w-6xl items-center gap-12 px-6 md:grid-cols-2">
          <motion.div
            initial={
              shouldReduceMotion ? { opacity: 1 } : { opacity: 0, x: -24 }
            }
            transition={shouldReduceMotion ? { duration: 0 } : SPRING}
            viewport={{ once: true }}
            whileInView={
              shouldReduceMotion ? { opacity: 1 } : { opacity: 1, x: 0 }
            }
          >
            <h2
              className="text-balance font-bold text-3xl tracking-tight md:text-4xl"
              id="cta-split-heading"
            >
              Ship faster with animated components
            </h2>
            <p className="mt-4 text-foreground/70 text-lg leading-relaxed">
              Stop building UI from scratch. Use production-ready, beautifully
              animated components that work with your existing design system.
            </p>
            <div className="mt-8 flex flex-wrap gap-4">
              <SmoothButton size="lg" variant="candy">
                Browse Components
              </SmoothButton>
              <SmoothButton size="lg" variant="outline">
                View on GitHub
              </SmoothButton>
            </div>
          </motion.div>

          <motion.div
            className="relative"
            initial={
              shouldReduceMotion ? { opacity: 1 } : { opacity: 0, x: 24 }
            }
            transition={shouldReduceMotion ? { duration: 0 } : SPRING}
            viewport={{ once: true }}
            whileInView={
              shouldReduceMotion ? { opacity: 1 } : { opacity: 1, x: 0 }
            }
          >
            <div className="overflow-hidden rounded-2xl border shadow-lg">
              <img
                alt="Product preview showing animated UI components"
                className="h-auto w-full object-cover"
                draggable={false}
                src={getImageKitUrl("/images/hero-smoothui.png", {
                  format: "auto",
                  quality: 85,
                  width: 800,
                })}
              />
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}

export default CtaSplit;

Componentes parecidos