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(layout): add more content images and tweak stylings
+53
-14
+3
-2
app/components/Hero.tsx
+3
-2
app/components/Hero.tsx
···
6
6
7
7
const slides = [
8
8
{ word: "people", image: "/images/pexels-kindelmedia-7148409 1.png" },
9
-
{ word: "media", image: "/images/pexels-shvets-production-7533377 1.png" },
10
-
{ word: "communities", image: "/images/pexels-guilhermealmeida-1858175.png" },
9
+
{ word: "media", image: "/images/pexels-ezkol-arnak-221099453-12569692.jpg" },
10
+
{ word: "communities", image: "/images/pexels-gabby-k-5384621.jpg" },
11
+
{ word: "services", image: "/images/pexels-guilhermealmeida-1858175.png" },
11
12
];
12
13
13
14
export default function Hero() {
+17
-5
app/components/RememberWhen.tsx
+17
-5
app/components/RememberWhen.tsx
···
30
30
</defs>
31
31
</svg>
32
32
33
-
34
33
<div className="relative mx-auto max-w-4xl text-center">
35
34
<SectionIntroLabel>Remember when</SectionIntroLabel>
36
35
···
42
41
{/* Three masked photos */}
43
42
<div className="mt-12 flex items-center justify-center gap-6 md:gap-10">
44
43
{[
45
-
{ src: "/images/pexels-kindelmedia-7148409 1.png", mask: "mask-1" },
46
-
{ src: "/images/pexels-shvets-production-7533377 1.png", mask: "mask-2" },
47
-
{ src: "/images/pexels-guilhermealmeida-1858175.png", mask: "mask-3" },
44
+
{
45
+
src: "/images/pexels-shvets-production-7194971.jpg",
46
+
mask: "mask-1",
47
+
position: "bottom" as const,
48
+
},
49
+
{
50
+
src: "/images/pexels-didsss-7664407.jpg",
51
+
mask: "mask-2",
52
+
position: "center" as const,
53
+
},
54
+
{
55
+
src: "/images/pexels-shvets-production-7533377 1.png",
56
+
mask: "mask-3",
57
+
position: "top" as const,
58
+
},
48
59
].map((item, i) => (
49
60
<div
50
61
key={i}
···
54
65
<img
55
66
src={item.src}
56
67
alt=""
57
-
className="h-full w-full object-cover object-center"
68
+
className="h-full w-full object-cover"
69
+
style={{ objectPosition: item.position }}
58
70
/>
59
71
</div>
60
72
))}
+32
-6
app/components/Waitlist.tsx
+32
-6
app/components/Waitlist.tsx
···
4
4
import SectionIntroLabel from "./ui/SectionIntroLabel";
5
5
6
6
const avatars = [
7
-
{ top: "8%", left: "20%", 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: "20%", 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: "15%", 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: "18%", size: 44, delay: 2, img: "https://agrocybe.us-west.host.bsky.network/xrpc/com.atproto.sync.getBlob?did=did:plc:ymdvhm76z46uamksi25rffeh&cid=bafkreifp66m5ihkxuthf4vwo6b5ao3evl52fbezsvfkfucxedox3a7joli" },
7
+
{
8
+
top: "8%",
9
+
left: "20%",
10
+
size: 48,
11
+
delay: 0,
12
+
img: "https://stinkhorn.us-west.host.bsky.network/xrpc/com.atproto.sync.getBlob?did=did:plc:vmqt4a4pf5jxvtalzjz2zsqk&cid=bafkreifed32u3tuknqoywdqij24vm4jqn35pvkx3q6spmqqoxiv654wtva",
13
+
},
14
+
{
15
+
top: "15%",
16
+
right: "20%",
17
+
size: 40,
18
+
delay: 1.2,
19
+
img: "https://calocybe.us-west.host.bsky.network/xrpc/com.atproto.sync.getBlob?did=did:plc:xrdmnk5t6y5l2n3zq5pok4ua&cid=bafkreibddkvunzwhhtloccrzia6ugllqq7bow435sjclvhbhhkmwqu2d4a",
20
+
},
21
+
{
22
+
top: "60%",
23
+
left: "15%",
24
+
size: 36,
25
+
delay: 0.8,
26
+
img: "https://panus.us-west.host.bsky.network/xrpc/com.atproto.sync.getBlob?did=did:plc:35gbbt2mb36gsl62tduilory&cid=bafkreigfixmlz4ynckkwtzuvxmowbozwlokr2aapgm36ne5sse4tzhxf3u",
27
+
},
28
+
{
29
+
top: "70%",
30
+
right: "18%",
31
+
size: 44,
32
+
delay: 2,
33
+
img: "https://agrocybe.us-west.host.bsky.network/xrpc/com.atproto.sync.getBlob?did=did:plc:ymdvhm76z46uamksi25rffeh&cid=bafkreifp66m5ihkxuthf4vwo6b5ao3evl52fbezsvfkfucxedox3a7joli",
34
+
},
11
35
{ top: "35%", left: "75%", size: 32, delay: 1.5 },
12
36
{ top: "80%", left: "28%", size: 38, delay: 0.4 },
13
37
{ top: "25%", left: "12%", size: 42, delay: 1.8 },
···
32
56
{avatars.map((avatar, i) => (
33
57
<div
34
58
key={i}
35
-
className={`absolute rounded-full ${colors[i]} opacity-60`}
59
+
className={`absolute rounded-full ${colors[i]} opacity-90`}
36
60
style={{
37
61
top: avatar.top,
38
62
left: "left" in avatar ? avatar.left : undefined,
···
99
123
data, and your voice.
100
124
</p>
101
125
102
-
<ButtonCta href="#" variant="ghost" className="mt-10">join the waitlist</ButtonCta>
126
+
<ButtonCta href="#" variant="ghost" className="mt-10">
127
+
join the waitlist
128
+
</ButtonCta>
103
129
</div>
104
130
</section>
105
131
);
+1
-1
app/components/WeBelieve.tsx
+1
-1
app/components/WeBelieve.tsx
···
42
42
{/* Circular photo */}
43
43
<div className="h-48 w-48 overflow-hidden rounded-full md:h-56 md:w-56">
44
44
<img
45
-
src="/images/pexels-shvets-production-7533377 1.png"
45
+
src="/images/pexels-davner-ribeiro-2711547-4574405.jpg"
46
46
alt="Community"
47
47
className="h-full w-full object-cover"
48
48
/>
public/images/pexels-davner-ribeiro-2711547-4574405.jpg
public/images/pexels-davner-ribeiro-2711547-4574405.jpg
This is a binary file and will not be displayed.
public/images/pexels-didsss-7664407.jpg
public/images/pexels-didsss-7664407.jpg
This is a binary file and will not be displayed.
public/images/pexels-ezkol-arnak-221099453-12569692.jpg
public/images/pexels-ezkol-arnak-221099453-12569692.jpg
This is a binary file and will not be displayed.
public/images/pexels-gabby-k-5384621.jpg
public/images/pexels-gabby-k-5384621.jpg
This is a binary file and will not be displayed.
public/images/pexels-mertcoskunraw-28257515.jpg
public/images/pexels-mertcoskunraw-28257515.jpg
This is a binary file and will not be displayed.
public/images/pexels-shvets-production-7194971.jpg
public/images/pexels-shvets-production-7194971.jpg
This is a binary file and will not be displayed.