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): align correctly and add the correct placeholders
+56
-69
+56
-69
app/components/ValueCards.tsx
+56
-69
app/components/ValueCards.tsx
···
1
1
export default function ValueCards() {
2
2
const cards = [
3
3
{
4
-
type: "text" as const,
4
+
label: "",
5
+
body: "",
6
+
bg: "var(--tangerine-dream)",
7
+
shape: "pill-right" as const,
8
+
},
9
+
{
5
10
label: "Everything in one place",
6
11
body: "People, media, and services. One home.",
7
12
bg: "var(--cotton-candy)",
8
13
},
9
-
{ type: "image" as const, gradient: "from-monte-carlo to-pacific" },
10
14
{
11
-
type: "text" as const,
12
15
label: "Secure by design",
13
16
body: "We don't sell your data. Period.",
14
17
bg: "var(--apricot-dream)",
15
18
shape: "star" as const,
16
19
},
17
-
{ type: "image" as const, gradient: "from-cotton-candy to-tangerine" },
18
20
{
19
-
type: "text" as const,
20
21
label: "Made in Europe",
21
22
body: "Built, hosted, and governed in Europe.",
22
23
bg: "var(--monte-carlo)",
23
24
shape: "pill-left" as const,
25
+
},
26
+
{
27
+
label: "",
28
+
body: "",
29
+
bg: "var(--pacific-blue)",
30
+
shape: "circle" as const,
24
31
},
25
32
];
26
33
···
86
93
</svg>
87
94
88
95
<div className="relative">
89
-
<div className="hide-scrollbar flex gap-6 overflow-x-auto px-6 pb-4 md:px-12">
90
-
{cards.map((card, i) =>
91
-
card.type === "text" ? (
96
+
<div className="hide-scrollbar flex gap-6 overflow-x-auto pb-4 -ml-[130px] -mr-[130px] pl-0 pr-0 lg:justify-center items-center">
97
+
{cards.map((card, i) => (
98
+
<div
99
+
key={i}
100
+
className={`relative shrink-0 overflow-hidden ${
101
+
card.shape === "star"
102
+
? "min-w-[320px] max-w-[320px] aspect-square flex items-center justify-center p-8"
103
+
: card.shape === "pill-left"
104
+
? "min-w-[280px] max-w-[320px] rounded-tl-[50%] rounded-bl-[50%] rounded-tr-3xl rounded-br-3xl pl-24 pr-4 py-8"
105
+
: card.shape === "pill-right"
106
+
? "min-w-[280px] max-w-[320px] h-[260px] rounded-tr-[50%] rounded-br-[50%] rounded-tl-3xl rounded-bl-3xl p-8"
107
+
: card.shape === "circle"
108
+
? "w-[260px] h-[260px] rounded-full"
109
+
: "min-w-[280px] max-w-[320px] rounded-3xl p-8"
110
+
}`}
111
+
style={{
112
+
backgroundColor: card.bg,
113
+
...(card.shape === "star"
114
+
? { clipPath: "url(#star-clip)" }
115
+
: {}),
116
+
}}
117
+
>
118
+
{/* Grain overlay */}
92
119
<div
93
-
key={i}
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
-
}}
120
+
className="pointer-events-none absolute inset-0"
121
+
style={{ filter: "url(#grain)" }}
107
122
>
108
-
{/* Grain overlay */}
123
+
<div
124
+
className="h-full w-full"
125
+
style={{ backgroundColor: card.bg }}
126
+
/>
127
+
</div>
128
+
{(card.label || card.body) && (
109
129
<div
110
-
className="pointer-events-none absolute inset-0"
111
-
style={{ filter: "url(#grain)" }}
130
+
className={`relative flex flex-col ${
131
+
card.shape === "star"
132
+
? "items-center text-center justify-center"
133
+
: "h-full"
134
+
}`}
112
135
>
113
-
<div
114
-
className="h-full w-full"
115
-
style={{ backgroundColor: card.bg }}
116
-
/>
117
-
</div>
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
-
}`}>
136
+
<span
137
+
className={`headline-label mb-6 ${
138
+
card.shape === "star" ? "" : "self-start"
139
+
}`}
140
+
>
126
141
{card.label}
127
142
</span>
128
143
<p className="card-headline">{card.body}</p>
129
144
</div>
130
-
</div>
131
-
) : (
132
-
<div
133
-
key={i}
134
-
className={`min-w-[220px] max-w-[260px] shrink-0 overflow-hidden rounded-3xl bg-gradient-to-br ${card.gradient}`}
135
-
>
136
-
{/* Mood image placeholder with blob overlay */}
137
-
<div className="relative h-64">
138
-
<svg
139
-
className="absolute inset-0 h-full w-full opacity-30"
140
-
viewBox="0 0 260 260"
141
-
fill="none"
142
-
>
143
-
<path
144
-
d="M180 130C180 170 160 210 130 220C100 230 60 200 40 160C20 120 50 60 90 40C130 20 180 70 180 130Z"
145
-
fill="white"
146
-
/>
147
-
</svg>
148
-
<div className="flex h-full items-center justify-center text-white/30">
149
-
<svg
150
-
className="h-16 w-16"
151
-
fill="currentColor"
152
-
viewBox="0 0 24 24"
153
-
>
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" />
155
-
</svg>
156
-
</div>
157
-
</div>
158
-
</div>
159
-
)
160
-
)}
145
+
)}
146
+
</div>
147
+
))}
161
148
</div>
162
149
</div>
163
150
</section>