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
refactor(Hero): make some font adjustments
+63
-7
+57
app/components/GrainedBlob.tsx
+57
app/components/GrainedBlob.tsx
···
1
+
interface GrainedBlobProps {
2
+
className?: string;
3
+
}
4
+
5
+
export default function GrainedBlob({ className }: GrainedBlobProps) {
6
+
return (
7
+
<svg
8
+
className={className}
9
+
viewBox="0 0 1271 1302"
10
+
fill="none"
11
+
xmlns="http://www.w3.org/2000/svg"
12
+
>
13
+
<g filter="url(#grain-filter)">
14
+
<path
15
+
d="M994.079 254.763C1273.76 285.396 1370.84 647.705 1143.95 814.073C1074.74 864.815 1030.37 943.802 1023.8 1029.36C1002.5 1306.34 644.568 1402.24 487.638 1173.02C439.161 1102.22 361.242 1056 275.94 1046.65C-3.73878 1016.02 -100.819 653.713 126.073 487.345C195.276 436.603 239.646 357.615 246.224 272.056C267.52 -4.91779 625.452 -100.825 782.381 128.393C830.858 199.2 908.777 245.42 994.079 254.763Z"
16
+
fill="#F89F9F"
17
+
/>
18
+
</g>
19
+
<defs>
20
+
<filter
21
+
id="grain-filter"
22
+
x="0"
23
+
y="0"
24
+
width="1270.02"
25
+
height="1301.42"
26
+
filterUnits="userSpaceOnUse"
27
+
colorInterpolationFilters="sRGB"
28
+
>
29
+
<feFlood floodOpacity="0" result="BackgroundImageFix" />
30
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
31
+
<feTurbulence
32
+
type="fractalNoise"
33
+
baseFrequency="2 2"
34
+
stitchTiles="stitch"
35
+
numOctaves={3}
36
+
result="noise"
37
+
seed={939}
38
+
/>
39
+
<feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" />
40
+
<feComponentTransfer in="alphaNoise" result="coloredNoise1">
41
+
<feFuncA
42
+
type="discrete"
43
+
tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
44
+
/>
45
+
</feComponentTransfer>
46
+
<feComposite operator="in" in2="shape" in="coloredNoise1" result="noise1Clipped" />
47
+
<feFlood floodColor="#DF6666" result="color1Flood" />
48
+
<feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" />
49
+
<feMerge result="effect1_noise">
50
+
<feMergeNode in="shape" />
51
+
<feMergeNode in="color1" />
52
+
</feMerge>
53
+
</filter>
54
+
</defs>
55
+
</svg>
56
+
);
57
+
}
+2
-5
app/components/Hero.tsx
+2
-5
app/components/Hero.tsx
···
2
2
3
3
import { useState, useEffect } from "react";
4
4
import NavLink from "./ui/NavLink";
5
+
import GrainedBlob from "./GrainedBlob";
5
6
6
7
const slides = [
7
8
{ word: "people", image: "/images/pexels-kindelmedia-7148409 1.png" },
···
22
23
return (
23
24
<section className="relative min-h-screen px-6 pt-28 pb-20">
24
25
{/* Grained star blob — decorative, bleeds left edge, behind text */}
25
-
<img
26
-
src="/shapes/star-grained.svg"
27
-
alt=""
28
-
className="pointer-events-none absolute -left-[30%] -top-[10%] h-[120vh] w-[120vh]"
29
-
/>
26
+
<GrainedBlob className="pointer-events-none absolute -left-[30%] -top-[10%] h-[120vh] w-[120vh]" />
30
27
31
28
<div className="relative mx-auto max-w-7xl">
32
29
<div className="grid gap-12 lg:grid-cols-12">
+4
-2
app/globals.css
+4
-2
app/globals.css
···
80
80
.stage-heading-1 {
81
81
font-family: var(--font-instrument-sans);
82
82
font-size: 130px;
83
+
font-style: normal;
83
84
font-weight: 700;
84
-
line-height: normal;
85
+
line-height: 105%;
85
86
color: var(--charcoal);
86
87
}
87
88
···
89
90
.stage-heading-2 {
90
91
font-family: var(--font-instrument-serif);
91
92
font-size: 150px;
93
+
font-style: normal;
92
94
font-weight: 400;
93
-
line-height: normal;
95
+
line-height: 100%;
94
96
color: var(--charcoal);
95
97
}
96
98