```jsx "use client"; import Link from "next/link"; import { Button } from "@/components/ui/button"; import { ChevronRightIcon } from "lucide-react"; import Image from "next/image"; import { useTheme } from "next-themes"; import { useEffect, useState } from "react"; export function CallToAction() { const { theme } = useTheme(); const [imageSrc, setImageSrc] = useState("/images/saas-dark.png"); useEffect(() => { setImageSrc( theme === "light" ? "/images/saas-light.png" : "/images/saas-dark.png" ); }, [theme]); return (

Connect the World, Share Without Borders

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

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

); }; ``` ```tsx "use client"; import Link from "next/link"; import { Button } from "@/components/ui/button"; import { ChevronRightIcon } from "lucide-react"; import Image from "next/image"; import { useTheme } from "next-themes"; import { useEffect, useState } from "react"; export function CallToAction() { const { theme } = useTheme(); const [imageSrc, setImageSrc] = useState("/images/saas-dark.png"); useEffect(() => { setImageSrc( theme === "light" ? "/images/saas-light.png" : "/images/saas-dark.png" ); }, [theme]); return (

Connect the World, Share Without Borders

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

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

); }; ``` ## Installation ### Install dependencies ```bash npm install lucide-react next-themes ``` ### 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 Basic Call To Action Component Copy the `basic-cta` component from the preview and adjust the imports if necessary. ## Credits

This component uses the Button component from Shadcn UI.