The source code for our eny.social landing page, which is mirrored in a different repository as part of the CI setup.
eny.social
social-network
eny
local-first
feat(Waitlist): wow there are people (also ghost button works on hover now)
+30
-28
+22
-26
app/components/Waitlist.tsx
+22
-26
app/components/Waitlist.tsx
···
4
4
import SectionIntroLabel from "./ui/SectionIntroLabel";
5
5
6
6
const avatars = [
7
-
{ top: "8%", left: "10%", size: 48, delay: 0 },
8
-
{ top: "15%", right: "12%", size: 40, delay: 1.2 },
9
-
{ top: "60%", left: "5%", size: 36, delay: 0.8 },
10
-
{ top: "70%", right: "8%", size: 44, delay: 2 },
7
+
{ top: "8%", left: "10%", size: 48, delay: 0, img: "https://stinkhorn.us-west.host.bsky.network/xrpc/com.atproto.sync.getBlob?did=did:plc:vmqt4a4pf5jxvtalzjz2zsqk&cid=bafkreifed32u3tuknqoywdqij24vm4jqn35pvkx3q6spmqqoxiv654wtva" },
8
+
{ top: "15%", right: "12%", size: 40, delay: 1.2, img: "https://calocybe.us-west.host.bsky.network/xrpc/com.atproto.sync.getBlob?did=did:plc:xrdmnk5t6y5l2n3zq5pok4ua&cid=bafkreibddkvunzwhhtloccrzia6ugllqq7bow435sjclvhbhhkmwqu2d4a" },
9
+
{ top: "60%", left: "5%", size: 36, delay: 0.8, img: "https://panus.us-west.host.bsky.network/xrpc/com.atproto.sync.getBlob?did=did:plc:35gbbt2mb36gsl62tduilory&cid=bafkreigfixmlz4ynckkwtzuvxmowbozwlokr2aapgm36ne5sse4tzhxf3u" },
10
+
{ top: "70%", right: "8%", size: 44, delay: 2, img: "https://agrocybe.us-west.host.bsky.network/xrpc/com.atproto.sync.getBlob?did=did:plc:ymdvhm76z46uamksi25rffeh&cid=bafkreifp66m5ihkxuthf4vwo6b5ao3evl52fbezsvfkfucxedox3a7joli" },
11
11
{ top: "35%", left: "85%", size: 32, delay: 1.5 },
12
12
{ top: "80%", left: "20%", size: 38, delay: 0.4 },
13
13
{ top: "25%", left: "3%", size: 42, delay: 1.8 },
···
45
45
animationDelay: `${avatar.delay}s`,
46
46
}}
47
47
>
48
-
<div className="flex h-full items-center justify-center text-white/50">
49
-
<svg
50
-
className="h-1/2 w-1/2"
51
-
fill="currentColor"
52
-
viewBox="0 0 24 24"
53
-
>
54
-
<path d="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v2h20v-2c0-3.3-6.7-5-10-5z" />
55
-
</svg>
56
-
</div>
48
+
{"img" in avatar && avatar.img ? (
49
+
<img
50
+
src={avatar.img}
51
+
alt=""
52
+
className="h-full w-full rounded-full object-cover"
53
+
/>
54
+
) : (
55
+
<div className="flex h-full items-center justify-center text-white/50">
56
+
<svg
57
+
className="h-1/2 w-1/2"
58
+
fill="currentColor"
59
+
viewBox="0 0 24 24"
60
+
>
61
+
<path d="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v2h20v-2c0-3.3-6.7-5-10-5z" />
62
+
</svg>
63
+
</div>
64
+
)}
57
65
</div>
58
66
))}
59
67
···
78
86
/>
79
87
</svg>
80
88
81
-
{/* Small blob accents */}
82
-
<svg
83
-
className="absolute left-1/4 top-1/4 h-24 w-24 opacity-10"
84
-
viewBox="0 0 100 100"
85
-
fill="none"
86
-
>
87
-
<path
88
-
d="M70 50C70 70 60 85 50 90C40 95 20 80 15 60C10 40 25 15 45 10C65 5 70 25 70 50Z"
89
-
fill="var(--pacific-blue)"
90
-
/>
91
-
</svg>
92
-
93
89
<div className="relative mx-auto max-w-2xl text-center">
94
90
<SectionIntroLabel>Come on in</SectionIntroLabel>
95
91
···
103
99
data, and your voice.
104
100
</p>
105
101
106
-
<ButtonCta href="#" className="mt-10">join the waitlist</ButtonCta>
102
+
<ButtonCta href="#" variant="ghost" className="mt-10">join the waitlist</ButtonCta>
107
103
</div>
108
104
</section>
109
105
);
+8
-2
app/components/ui/ButtonCta.tsx
+8
-2
app/components/ui/ButtonCta.tsx
···
4
4
href: string;
5
5
children: React.ReactNode;
6
6
className?: string;
7
+
variant?: "default" | "ghost";
7
8
}
8
9
9
-
export default function ButtonCta({ href, children, className = "" }: ButtonCtaProps) {
10
+
export default function ButtonCta({ href, children, className = "", variant = "default" }: ButtonCtaProps) {
11
+
const base = "group inline-flex items-center gap-2 rounded-full py-0 pl-[14px] pr-[3px] font-['Instrument_Sans'] text-[20px] font-medium leading-[200%] tracking-[-0.6px] transition-all border-2";
12
+
const variants = {
13
+
default: "bg-charcoal border-transparent text-linen hover:bg-transparent hover:border-charcoal hover:text-charcoal",
14
+
ghost: "bg-transparent border-charcoal text-charcoal hover:bg-charcoal hover:border-transparent hover:text-linen",
15
+
};
10
16
return (
11
17
<a
12
18
href={href}
13
-
className={`group inline-flex items-center gap-2 rounded-full bg-charcoal py-0 pl-[14px] pr-[3px] font-['Instrument_Sans'] text-[20px] font-medium leading-[200%] tracking-[-0.6px] text-linen transition-all border-2 border-transparent hover:bg-transparent hover:border-charcoal hover:text-charcoal ${className}`}
19
+
className={`${base} ${variants[variant]} ${className}`}
14
20
>
15
21
{children}
16
22
<ArrowCircleRightIcon