cta-03

1import { ArrowRightIcon, AtSignIcon } from "lucide-react"
2 
3import { Ripple } from "./ripple-bg"
4 
5export function CallToAction() {
6  return (
7    <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">
8      <div className="pointer-events-none absolute -top-px left-1/2 w-screen -translate-x-1/2 border-t" />
9      <Ripple />
10 
11      <div className="space-y-1">
12        <h2 className="text-center text-2xl font-semibold tracking-tight md:text-4xl">
13          Join our community
14        </h2>
15        <p className="text-muted-foreground text-center text-sm text-balance md:text-base">
16          Connect with fellow builders, get early access, and stay in the loop
17          with product updates and exclusive events.
18        </p>
19        <div className="mt-4 flex items-center justify-center -space-x-[0.45rem]">
20          <img
21            alt="Avatar 01"
22            className="ring-background rounded-full ring-1"
23            height={24}
24            src="https://avatar.vercel.sh/avatar1"
25            width={24}
26          />
27          <img
28            alt="Avatar 02"
29            className="ring-background rounded-full ring-1"
30            height={24}
31            src="https://avatar.vercel.sh/avatar2"
32            width={24}
33          />
34          <img
35            alt="Avatar 03"
36            className="ring-background rounded-full ring-1"
37            height={24}
38            src="https://avatar.vercel.sh/avatar3"
39            width={24}
40          />
41          <img
42            alt="Avatar 04"
43            className="ring-background rounded-full ring-1"
44            height={24}
45            src="https://avatar.vercel.sh/avatar4"
46            width={24}
47          />
48          <img
49            alt="Avatar 05"
50            className="ring-background rounded-full ring-1"
51            height={24}
52            src="https://avatar.vercel.sh/avatar5"
53            width={24}
54          />
55          <img
56            alt="Avatar 06"
57            className="ring-background rounded-full ring-1"
58            height={24}
59            src="https://avatar.vercel.sh/avatar6"
60            width={24}
61          />
62        </div>
63      </div>
64      <div className="pointer-events-none absolute -bottom-px left-1/2 w-screen -translate-x-1/2 border-b" />
65    </div>
66  )
67}