```jsx import Link from "next/link"; import { Button } from "@/components/ui/button"; import { ChevronRightIcon } from "lucide-react"; import React, { memo } from "react"; import { cn } from "@/lib/utils"; export function CallToAction() { return (

Connect the World, Share Without Borders

Join thousands of developers who have already discovered the power of our platform.

); } const RippleEffect = memo(function Ripple({ circleCount = 5, baseSize = 180, sizeIncrement = 150, baseOpacity = 0.28, className, ...props }) { return (

{Array.from({ length: circleCount }).map((_, index) => { const size = baseSize + index * sizeIncrement; const opacity = Math.max(0.05, baseOpacity - index * 0.04); const delay = `${index * 0.08}s`; return (

); })}

); }); const Logo = () => { return (

); }; ``` ```tsx import Link from "next/link"; import { Button } from "@/components/ui/button"; import { ChevronRightIcon } from "lucide-react"; import React, { ComponentPropsWithoutRef } from "react"; import { cn } from "@/lib/utils"; export function CallToAction() { return (

Connect the World, Share Without Borders

Join thousands of developers who have already discovered the power of our platform.

); } interface RippleEffectProps extends ComponentPropsWithoutRef<"div"> { circleCount?: number; baseSize?: number; sizeIncrement?: number; baseOpacity?: number; rippleColor?: string; } const RippleEffect = React.memo(function Ripple({ circleCount = 5, baseSize = 180, sizeIncrement = 150, baseOpacity = 0.28, className, ...props }: RippleEffectProps) { return (

); })}

); }); const Logo = () => { return (

); }; ``` ## Installation ### Install dependencies ```bash npm install lucide-react ``` Add the utils file to the `@/lib` folder ```jsx import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { return twMerge(clsx(inputs)); } ``` ```tsx import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } ``` ### Update `tailwind.config.js` Add the following animations to your `tailwind.config.js` file: > ```js {5-13} /** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: { animation: { "pulse-ripple": "pulse-ripple var(--duration, 2.5s) ease-in-out infinite", }, keyframes: { "pulse-ripple": { "0%": { transform: "translate(-50%, -50%) scale(0.95)", opacity: "1", }, "50%": { transform: "translate(-50%, -50%) scale(1)", opacity: "0.5", }, "100%": { transform: "translate(-50%, -50%) scale(0.95)", opacity: "1", }, }, }, }, }, plugins: [require("tailwindcss-animate")], }; ``` ### Install the Button component

We use the Button from Shadcn UI. Make sure to install it in `@/components/ui`. (You can also use a classic HTML button instead of the Button component.)

### Copy the Ripple Call To Action Component Copy the `ripple-cta` component from the preview and adjust the imports if necessary. ## Credits

This component uses the Button component from Shadcn UI.