```jsx import Link from "next/link"; import { Button } from "@/components/ui/button"; import { ChevronRightIcon } from "lucide-react"; import Particles, { initParticlesEngine } from "@tsparticles/react"; import { loadSlim } from "@tsparticles/slim"; import { useEffect, useMemo, useState } from "react"; export function CallToAction({ particlesColor = "#ffffff" }) { return (

Connect the World, Share Without Borders

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

); } const StarBackground = ({ backgroundColor = "transparent", particlesColor = "#ffffff", particlesSpeed = 1.5, particlesNumber = 250, particleSizeMax = 1.5, particleSizeMin = 0.5, animEnable = true, animSpeed = 2, }) => { const [init, setInit] = useState(false); useEffect(() => { const initParticles = async () => { await initParticlesEngine(async (engine) => { await loadSlim(engine); }); setInit(true); }; initParticles(); }, []); const options = useMemo( () => ({ background: { color: { value: backgroundColor, }, }, fpsLimit: 120, fullScreen: { enable: false, zIndex: 0, }, particles: { color: { value: particlesColor, }, move: { direction: "top", enable: true, outModes: { default: "out", }, random: false, speed: particlesSpeed, straight: false, }, number: { density: { enable: true, }, value: particlesNumber, }, opacity: { value: 0.5, }, shape: { type: "circle", }, size: { value: { min: particleSizeMin, max: particleSizeMax }, anim: { enable: animEnable, speed: animSpeed, minimumValue: particleSizeMin, sync: false, }, }, }, detectRetina: true, }), [ backgroundColor, particlesColor, particlesSpeed, particlesNumber, particleSizeMax, particleSizeMin, animEnable, animSpeed, ] ); if (init) { return (

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

); }; ``` ```tsx import Link from "next/link"; import { Button } from "@/components/ui/button"; import { ChevronRightIcon } from "lucide-react"; import Particles, { initParticlesEngine } from "@tsparticles/react"; import type { ISourceOptions } from "@tsparticles/engine"; import { loadSlim } from "@tsparticles/slim"; import { useEffect, useMemo, useState } from "react"; export function CallToAction({ particlesColor = "#ffffff" }) { return (

Connect the World, Share Without Borders

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

); } interface StarBackgroundProps { backgroundColor?: string; particlesColor?: string; particlesSpeed?: number; particlesNumber?: number; particleSizeMax?: number; particleSizeMin?: number; animEnable?: boolean; animSpeed?: number; } const StarBackground: React.FC = ({ backgroundColor = "transparent", particlesColor = "#ffffff", particlesSpeed = 1.5, particlesNumber = 250, particleSizeMax = 1.5, particleSizeMin = 0.5, animEnable = true, animSpeed = 2, }) => { const [init, setInit] = useState(false); useEffect(() => { const initParticles = async () => { await initParticlesEngine(async (engine) => { await loadSlim(engine); }); setInit(true); }; initParticles(); }, []); const options = useMemo( () => ({ background: { color: { value: backgroundColor, }, }, fpsLimit: 120, fullScreen: { enable: false, zIndex: 0, }, particles: { color: { value: particlesColor, }, move: { direction: "top", enable: true, outModes: { default: "out", }, random: false, speed: particlesSpeed, straight: false, }, number: { density: { enable: true, }, value: particlesNumber, }, opacity: { value: 0.5, }, shape: { type: "circle", }, size: { value: { min: particleSizeMin, max: particleSizeMax }, anim: { enable: animEnable, speed: animSpeed, minimumValue: particleSizeMin, sync: false, }, }, }, detectRetina: true, }), [ backgroundColor, particlesColor, particlesSpeed, particlesNumber, particleSizeMax, particleSizeMin, animEnable, animSpeed, ] ); if (init) { return (

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

); }; ``` ## Installation ### Install dependencies ```bash npm install @tsparticles/slim @tsparticles/engine @tsparticles/react lucide-react ``` ### 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 Space Call To Action Component Copy the `space-cta` component from the preview and adjust the imports if necessary. ## Credits

This component uses the Button component from Shadcn UI.