Installation
npm install iconsax-reactjs lucide-reactSource Code
insider-waitlist-hero.tsx
1"use client";
2
3import { ArrowRightIcon, WandSparkles } from "lucide-react";
4import { Button } from "./ui/button";
5import { Global } from 'iconsax-reactjs';
6
7export const InsiderWaitlistHero = () => {
8 return (
9 <section className="relative min-h-screen overflow-hidden px-4 py-16 sm:px-6">
10 <div className="relative mx-auto flex w-full max-w-6xl items-center justify-center">
11 <div className="relative w-full overflow-hidden rounded-[48px]">
12 <div className="pointer-events-none absolute inset-0">
13 <div className="absolute left-1/2 top-1/2 h-245 w-245 -translate-x-1/2 -translate-y-1/2 rounded-full border border-dotted border-slate-200/70" />
14 <div className="absolute left-1/2 top-1/2 h-175 w-175 -translate-x-1/2 -translate-y-1/2 rounded-full border border-dotted border-slate-200/60" />
15 <div className="absolute left-1/2 top-1/2 h-105 w-105 -translate-x-1/2 -translate-y-1/2 rounded-full border border-dotted border-slate-200/50" />
16 </div>
17 <div className="relative z-10 flex flex-col items-center text-center">
18 <div className="flex items-center gap-2 text-sm font-semibold ">
19 <span className="flex h-7 w-7 items-center justify-center rounded-full bg-black shadow-sm">
20 <WandSparkles className="h-4 w-4 text-white" />
21 </span>
22 Insider
23 </div>
24
25 <div className="mt-20">
26 <div className="mt-6 inline-flex items-center gap-2 rounded-full bg-[#f1f1] px-1 py-1 text-xs font-medium border border-[#111116]/10">
27 <span className="flex size-6 items-center justify-center rounded-full bg-white">
28 <svg viewBox="0 0 24 24" className="size-4" fill="currentColor" aria-hidden="true">
29 <path d="M12 4.5 13.7 9.1 18.3 10.8 13.7 12.5 12 17.1 10.3 12.5 5.7 10.8 10.3 9.1 12 4.5Z" />
30 </svg>
31 </span>
32 Insider is launching soon
33 </div>
34
35 <h2 className="mt-6 text-5xl font-semibold leading-tighter tracking-tight">
36 Ready to launch your
37 <br />
38 next big product?
39 </h2>
40 </div>
41
42 <p className="mt-4 max-w-xl text-sm text-slate-500 sm:text-base">
43 Get early access to our upcoming release
44 <br />
45 and secure your spot on the waitlist.
46 </p>
47
48 <div className="mt-10 w-full max-w-2xl rounded-[28px] border border-slate-200 bg-white/95 p-6 text-left shadow-[0_30px_70px_-45px_rgba(86,94,120,0.55)] sm:p-7">
49 <div className="flex items-center gap-2">
50 <div className="flex -space-x-2">
51 {["AA", "BM", "JL"].map((initials) => (
52 <div
53 key={initials}
54 className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-white bg-linear-to-br from-[#ff9a62] to-[#f36d8b] text-[10px] font-semibold text-white shadow-sm"
55 >
56 {initials}
57 </div>
58 ))}
59 </div>
60 <span className="rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold">
61 +2K
62 </span>
63 </div>
64
65 <div className="mt-4 space-y-1">
66 <h3 className="text-base font-semibold text-slate-900">Join the waitlist</h3>
67 <p className="text-sm text-slate-500">Sign up to be one of the first to use Insider.</p>
68 </div>
69
70 <div className="mt-5 flex flex-col gap-3 rounded-full bg-slate-100 p-2 sm:flex-row sm:items-center">
71 <label className="sr-only" htmlFor="insider-email">
72 Email address
73 </label>
74 <input
75 id="insider-email"
76 type="email"
77 placeholder="Enter your email..."
78 className="w-full flex-1 bg-transparent px-4 py-3 text-sm ring-0 outline-0"
79 />
80 <Button size={"lg"} className="bg-[#27292D] rounded-full px-6 py-3 text-sm text-white shadow-sm">
81 Get Notified <ArrowRightIcon className="ml-2 h-4 w-4" />
82 </Button>
83 </div>
84 </div>
85
86 <div className="mt-8 flex flex-wrap items-center justify-center gap-3 text-xs text-slate-400">
87 <span>Follow us</span>
88 <div className="flex items-center gap-3 text-slate-500">
89 <span className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm">
90 <Global className="h-3.5 w-3.5" />
91 </span>
92 <span className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm">
93 <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="currentColor" aria-hidden="true">
94 <path d="M12 2.4c5.3 0 9.6 4.3 9.6 9.6 0 5.3-4.3 9.6-9.6 9.6-5.3 0-9.6-4.3-9.6-9.6 0-5.3 4.3-9.6 9.6-9.6Zm0 2a7.6 7.6 0 0 0-7.6 7.6 7.6 7.6 0 0 0 7.6 7.6 7.6 7.6 0 0 0 7.6-7.6A7.6 7.6 0 0 0 12 4.4Zm4.4 4.1-2.3 5.8-2.1-3.6-4.2 1.6 8.6-3.8Z" />
95 </svg>
96 </span>
97 <span className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm">
98 <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="currentColor" aria-hidden="true">
99 <path d="M20.7 7.3c-.6.2-1.1.4-1.7.5.6-.4 1-1 1.2-1.7-.6.3-1.2.6-1.9.7a3 3 0 0 0-5.2 2c0 .2 0 .5.1.7-2.5-.1-4.8-1.3-6.3-3.2-.3.4-.4.9-.4 1.4 0 1 .5 2 1.3 2.6-.5 0-1-.2-1.4-.4 0 1.5 1 2.7 2.4 3-.2.1-.5.1-.8.1-.2 0-.4 0-.6-.1.4 1.2 1.6 2.1 3 2.1A6 6 0 0 1 4.8 17a8.5 8.5 0 0 0 4.6 1.3c5.6 0 8.6-4.6 8.6-8.6v-.4c.6-.4 1-.9 1.4-1.4Z" />
100 </svg>
101 </span>
102 </div>
103 </div>
104
105 <div className="mt-12 text-xs text-slate-400">
106 Built in Framer + Designed by Rabii Mhamdi + Remix template
107 </div>
108 </div>
109 </div>
110 </div>
111 </section>
112 );
113};
114
