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): use image preprocessing for improved performance
+16
-4
+5
-1
app/components/Hero.tsx
+5
-1
app/components/Hero.tsx
···
1
1
"use client";
2
2
3
3
import { useState, useEffect } from "react";
4
+
import Image from "next/image";
4
5
import GrainedBlob from "./GrainedBlob";
5
6
import FadeIn from "./ui/FadeIn";
6
7
import NavMenu from "./ui/NavMenu";
···
139
140
style={{ clipPath: "url(#hero-blob)" }}
140
141
>
141
142
{slides.map((slide, index) => (
142
-
<img
143
+
<Image
143
144
key={slide.word}
144
145
src={slide.image}
145
146
alt={`People ${slide.word}`}
147
+
width={1200}
148
+
height={1200}
149
+
priority={index === 0}
146
150
className="absolute inset-[-12%] h-[124%] w-[124%] object-cover"
147
151
style={{
148
152
transition:
+4
-1
app/components/RememberWhen.tsx
+4
-1
app/components/RememberWhen.tsx
···
1
1
"use client";
2
2
3
+
import Image from "next/image";
3
4
import SectionIntroLabel from "./ui/SectionIntroLabel";
4
5
import FadeIn from "./ui/FadeIn";
5
6
···
69
70
className="relative w-[28vw] h-[32vw] max-w-[263px] max-h-[300px] overflow-hidden"
70
71
style={{ clipPath: `url(#${item.mask})` }}
71
72
>
72
-
<img
73
+
<Image
73
74
src={item.src}
74
75
alt=""
76
+
width={526}
77
+
height={600}
75
78
className="h-full w-full object-cover"
76
79
style={{ objectPosition: item.position }}
77
80
/>
+7
-2
app/components/WeBelieve.tsx
+7
-2
app/components/WeBelieve.tsx
···
1
1
"use client";
2
2
3
+
import Image from "next/image";
3
4
import SectionIntroLabel from "./ui/SectionIntroLabel";
4
5
import FadeIn from "./ui/FadeIn";
5
6
···
51
52
<div className="relative flex items-center justify-center gap-4">
52
53
{/* Circular photo */}
53
54
<div className="h-[25vw] w-[25vw] max-h-56 max-w-56 overflow-hidden rounded-full">
54
-
<img
55
+
<Image
55
56
src="/images/pexels-davner-ribeiro-2711547-4574405.jpg"
56
57
alt="Community"
58
+
width={448}
59
+
height={448}
57
60
className="h-full w-full object-cover"
58
61
/>
59
62
</div>
60
63
{/* Rounded rectangle photo */}
61
64
<div className="h-[30vw] w-[22vw] max-h-64 max-w-44 overflow-hidden rounded-3xl">
62
-
<img
65
+
<Image
63
66
src="/images/pexels-guilhermealmeida-1858175.png"
64
67
alt="Connection"
68
+
width={352}
69
+
height={512}
65
70
className="h-full w-full object-cover"
66
71
/>
67
72
</div>