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(ValueCards): polish the star-ish card
+81
-15
+78
-15
app/components/ValueCards.tsx
+78
-15
app/components/ValueCards.tsx
···
12
12
label: "Secure by design",
13
13
body: "We don't sell your data. Period.",
14
14
bg: "var(--apricot-dream)",
15
+
shape: "star" as const,
15
16
},
16
17
{ type: "image" as const, gradient: "from-cotton-candy to-tangerine" },
17
18
{
···
19
20
label: "Made in Europe",
20
21
body: "Built, hosted, and governed in Europe.",
21
22
bg: "var(--monte-carlo)",
23
+
shape: "pill-left" as const,
22
24
},
23
25
];
24
26
···
27
29
{/* Grain filter definition */}
28
30
<svg className="absolute h-0 w-0" aria-hidden="true">
29
31
<defs>
30
-
<filter id="grain" x="0" y="0" width="100%" height="100%" filterUnits="objectBoundingBox" colorInterpolationFilters="sRGB">
31
-
<feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="3" stitchTiles="stitch" seed="1581" result="noise" />
32
-
<feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" />
32
+
{/* Star clip-path (330x336 → objectBoundingBox) */}
33
+
<clipPath id="star-clip" clipPathUnits="objectBoundingBox">
34
+
<path
35
+
transform="scale(0.003030, 0.002976)"
36
+
d="M269.049 70.5681C302.25 60.8121 326.225 102.338 301.176 126.212C285.271 141.371 288.453 167.64 307.572 178.467L314.263 182.256C343.038 198.551 329.55 242.538 296.568 240.162C274.702 238.586 258.156 259.678 264.971 280.513C275.346 312.232 234.971 335.542 212.689 310.698C198.052 294.378 171.514 298.162 161.945 317.886C147.512 347.638 102.674 337.325 102.95 304.258L103.014 296.569C103.197 274.598 82.0388 258.707 60.9583 264.902C27.7579 274.658 3.78289 233.132 28.832 209.258C44.737 194.099 41.5545 167.83 22.4355 157.003L15.7443 153.214C-13.0301 136.919 0.457428 92.9322 33.44 95.3084C55.3054 96.8837 71.8515 75.7925 65.0365 54.9565C54.6619 23.238 95.0367 -0.0723286 117.318 24.7715C131.955 41.0915 158.494 37.3078 168.062 17.5841C182.496 -12.1677 227.333 -1.85504 227.058 31.2118L226.994 38.9011C226.811 60.8722 247.969 76.7627 269.049 70.5681Z"
37
+
/>
38
+
</clipPath>
39
+
<filter
40
+
id="grain"
41
+
x="0"
42
+
y="0"
43
+
width="100%"
44
+
height="100%"
45
+
filterUnits="objectBoundingBox"
46
+
colorInterpolationFilters="sRGB"
47
+
>
48
+
<feTurbulence
49
+
type="fractalNoise"
50
+
baseFrequency="0.5"
51
+
numOctaves="3"
52
+
stitchTiles="stitch"
53
+
seed="1581"
54
+
result="noise"
55
+
/>
56
+
<feColorMatrix
57
+
in="noise"
58
+
type="luminanceToAlpha"
59
+
result="alphaNoise"
60
+
/>
33
61
<feComponentTransfer in="alphaNoise" result="coloredNoise">
34
-
<feFuncA type="discrete" 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" />
62
+
<feFuncA
63
+
type="discrete"
64
+
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"
65
+
/>
35
66
</feComponentTransfer>
36
-
<feComposite operator="in" in2="SourceGraphic" in="coloredNoise" result="noiseClipped" />
67
+
<feComposite
68
+
operator="in"
69
+
in2="SourceGraphic"
70
+
in="coloredNoise"
71
+
result="noiseClipped"
72
+
/>
37
73
<feFlood floodColor="rgba(0, 0, 0, 0.05)" result="colorFlood" />
38
-
<feComposite operator="in" in2="noiseClipped" in="colorFlood" result="colorNoise" />
74
+
<feComposite
75
+
operator="in"
76
+
in2="noiseClipped"
77
+
in="colorFlood"
78
+
result="colorNoise"
79
+
/>
39
80
<feMerge>
40
81
<feMergeNode in="SourceGraphic" />
41
82
<feMergeNode in="colorNoise" />
···
50
91
card.type === "text" ? (
51
92
<div
52
93
key={i}
53
-
className="relative min-w-[280px] max-w-[320px] shrink-0 overflow-hidden rounded-3xl p-8"
54
-
style={{ backgroundColor: card.bg }}
94
+
className={`relative shrink-0 overflow-hidden ${
95
+
"shape" in card && card.shape === "star"
96
+
? "min-w-[320px] max-w-[320px] aspect-square flex items-center justify-center p-8"
97
+
: "shape" in card && card.shape === "pill-left"
98
+
? "min-w-[280px] max-w-[320px] rounded-tl-[50%] rounded-bl-[50%] rounded-tr-3xl rounded-br-3xl pl-24 pr-4 py-8"
99
+
: "min-w-[280px] max-w-[320px] rounded-3xl p-8"
100
+
}`}
101
+
style={{
102
+
backgroundColor: card.bg,
103
+
...("shape" in card && card.shape === "star"
104
+
? { clipPath: "url(#star-clip)" }
105
+
: {}),
106
+
}}
55
107
>
56
108
{/* Grain overlay */}
57
109
<div
58
110
className="pointer-events-none absolute inset-0"
59
111
style={{ filter: "url(#grain)" }}
60
112
>
61
-
<div className="h-full w-full" style={{ backgroundColor: card.bg }} />
113
+
<div
114
+
className="h-full w-full"
115
+
style={{ backgroundColor: card.bg }}
116
+
/>
62
117
</div>
63
-
<div className="relative flex h-full flex-col justify-between">
64
-
<span className="headline-label mb-6 self-start">
118
+
<div className={`relative flex flex-col ${
119
+
"shape" in card && card.shape === "star"
120
+
? "items-center text-center justify-center"
121
+
: "h-full"
122
+
}`}>
123
+
<span className={`headline-label mb-6 ${
124
+
"shape" in card && card.shape === "star" ? "" : "self-start"
125
+
}`}>
65
126
{card.label}
66
127
</span>
67
-
<p className="card-headline">
68
-
{card.body}
69
-
</p>
128
+
<p className="card-headline">{card.body}</p>
70
129
</div>
71
130
</div>
72
131
) : (
···
87
146
/>
88
147
</svg>
89
148
<div className="flex h-full items-center justify-center text-white/30">
90
-
<svg className="h-16 w-16" fill="currentColor" viewBox="0 0 24 24">
149
+
<svg
150
+
className="h-16 w-16"
151
+
fill="currentColor"
152
+
viewBox="0 0 24 24"
153
+
>
91
154
<path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" />
92
155
</svg>
93
156
</div>
+3
public/shapes/star.svg
+3
public/shapes/star.svg
···
1
+
<svg width="330" height="336" viewBox="0 0 330 336" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+
<path d="M269.049 70.5681C302.25 60.8121 326.225 102.338 301.176 126.212C285.271 141.371 288.453 167.64 307.572 178.467L314.263 182.256C343.038 198.551 329.55 242.538 296.568 240.162C274.702 238.586 258.156 259.678 264.971 280.513C275.346 312.232 234.971 335.542 212.689 310.698C198.052 294.378 171.514 298.162 161.945 317.886C147.512 347.638 102.674 337.325 102.95 304.258L103.014 296.569C103.197 274.598 82.0388 258.707 60.9583 264.902C27.7579 274.658 3.78289 233.132 28.832 209.258C44.737 194.099 41.5545 167.83 22.4355 157.003L15.7443 153.214C-13.0301 136.919 0.457428 92.9322 33.44 95.3084C55.3054 96.8837 71.8515 75.7925 65.0365 54.9565C54.6619 23.238 95.0367 -0.0723286 117.318 24.7715C131.955 41.0915 158.494 37.3078 168.062 17.5841C182.496 -12.1677 227.333 -1.85504 227.058 31.2118L226.994 38.9011C226.811 60.8722 247.969 76.7627 269.049 70.5681Z" fill="#FBD1A2"/>
3
+
</svg>
