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): large screens now look good yay
+6
-6
+5
-5
app/components/Hero.tsx
+5
-5
app/components/Hero.tsx
···
25
25
{/* Grained star blob — decorative, bleeds left edge, behind text */}
26
26
<GrainedBlob className="pointer-events-none absolute -left-[30%] -top-[10%] h-[120vh] w-[120vh]" />
27
27
28
-
<div className="relative mx-auto max-w-7xl">
28
+
<div className="relative mx-auto max-w-[1536px]">
29
29
<div className="grid gap-12 lg:grid-cols-12">
30
30
{/* Heading + Text (6 cols) */}
31
31
<div className="lg:col-span-6">
···
62
62
{/* Menu + sub-text side by side */}
63
63
<div className="mt-12 grid lg:grid-cols-6 gap-4">
64
64
{/* Menu links */}
65
-
<div className="hidden lg:col-span-2 lg:flex lg:flex-col lg:items-end">
65
+
<div className="hidden lg:col-span-1 lg:flex lg:flex-col lg:items-end">
66
66
{[
67
67
"What",
68
68
"How does it work",
···
77
77
</div>
78
78
79
79
{/* Sub-heading + body */}
80
-
<div className="lg:col-span-4">
80
+
<div className="lg:col-span-5 lg:pl-[calc(100%/5)]">
81
81
<h2 className="mb-3">
82
82
A social network that belongs to the people.
83
83
</h2>
···
112
112
</svg>
113
113
{/* Full-size blob-masked photo */}
114
114
<div
115
-
className="relative w-[160%] aspect-square -mr-[50%]"
115
+
className="relative w-[180%] aspect-square -mr-[80%]"
116
116
style={{
117
117
clipPath: "url(#hero-blob)",
118
-
transform: "translate(20%, -14%)",
118
+
transform: "translate(10%, -14%)",
119
119
}}
120
120
>
121
121
{slides.map((slide, index) => (