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(Hero): add staggered hero content
+109
-52
+1
-1
app/components/GrainedBlob.tsx
+1
-1
app/components/GrainedBlob.tsx
+62
-45
app/components/Hero.tsx
+62
-45
app/components/Hero.tsx
···
1
1
"use client";
2
2
3
3
import { useState, useEffect } from "react";
4
-
import NavLink from "./ui/NavLink";
5
4
import GrainedBlob from "./GrainedBlob";
6
5
import FadeIn from "./ui/FadeIn";
6
+
import NavMenu from "./ui/NavMenu";
7
7
8
8
const slides = [
9
9
{ word: "people", image: "/images/pexels-kindelmedia-7148409 1.png" },
···
33
33
<div className="relative z-10 lg:col-span-6">
34
34
{/* Heading indented 1 col */}
35
35
<div className="lg:pl-[calc(100%/6)]">
36
-
<p className="headline-label mb-4">a place where you can</p>
36
+
<FadeIn>
37
+
<p className="headline-label mb-4">a place where you can</p>
38
+
</FadeIn>
37
39
<h1>
38
-
<span className="stage-heading-1 block text-left">Connect</span>
39
-
<span className="stage-heading-1 block text-right">with</span>
40
-
<span className="relative block text-right">
41
-
{slides.map((slide, index) => (
42
-
<span
43
-
key={slide.word}
44
-
className="stage-heading-2 absolute right-0 top-0 transition-all duration-500"
45
-
style={{
46
-
opacity: currentIndex === index ? 1 : 0,
47
-
transform:
48
-
currentIndex === index
49
-
? "translateY(0)"
50
-
: currentIndex > index
51
-
? "translateY(-20px)"
52
-
: "translateY(20px)",
53
-
}}
54
-
>
55
-
{slide.word}
40
+
<FadeIn delay={100}>
41
+
<span className="stage-heading-1 block text-left">
42
+
Connect
43
+
</span>
44
+
</FadeIn>
45
+
<FadeIn delay={200}>
46
+
<span className="stage-heading-1 block text-right">with</span>
47
+
</FadeIn>
48
+
<FadeIn delay={300}>
49
+
<span className="relative block text-right">
50
+
{slides.map((slide, index) => (
51
+
<span
52
+
key={slide.word}
53
+
className="stage-heading-2 absolute right-0 top-0 transition-all duration-500"
54
+
style={{
55
+
opacity: currentIndex === index ? 1 : 0,
56
+
transform:
57
+
currentIndex === index
58
+
? "translateY(0)"
59
+
: currentIndex > index
60
+
? "translateY(-20px)"
61
+
: "translateY(20px)",
62
+
}}
63
+
>
64
+
{slide.word}
65
+
</span>
66
+
))}
67
+
{/* Invisible placeholder for sizing */}
68
+
<span className="stage-heading-2 invisible">
69
+
communities
56
70
</span>
57
-
))}
58
-
{/* Invisible placeholder for sizing */}
59
-
<span className="stage-heading-2 invisible">communities</span>
60
-
</span>
71
+
</span>
72
+
</FadeIn>
61
73
</h1>
62
74
</div>
63
75
64
76
{/* Menu + sub-text side by side */}
65
77
<div className="mt-12 grid lg:grid-cols-6 gap-4">
66
78
{/* Menu links */}
67
-
<div className="hidden lg:col-span-1 lg:flex lg:flex-col lg:items-end">
68
-
{[
69
-
"What",
70
-
"How does it work",
71
-
"offenbach.social",
72
-
"Blog",
73
-
"Contact",
74
-
].map((link) => (
75
-
<NavLink key={link} href="#">
76
-
{link}
77
-
</NavLink>
78
-
))}
79
-
</div>
79
+
<NavMenu
80
+
items={[
81
+
{ label: "What", href: "#" },
82
+
{ label: "How does it work", href: "#" },
83
+
{ label: "offenbach.social", href: "#" },
84
+
{ label: "Blog", href: "#" },
85
+
{ label: "Contact", href: "#" },
86
+
]}
87
+
className="hidden lg:col-span-1 lg:flex lg:flex-col lg:items-end"
88
+
itemClassName="self-end text-right"
89
+
baseDelay={400}
90
+
stagger={80}
91
+
/>
80
92
81
93
{/* Sub-heading + body */}
82
94
<div className="lg:col-span-5 lg:pl-[calc(100%/5)]">
83
-
<h2 className="mb-3">
84
-
A social network that belongs to the people.
85
-
</h2>
86
-
<p className="section-copy lg:pl-[calc(100%/4)] text-right">
87
-
<strong>No algorithms</strong> shaping your reality.
88
-
Decentralized. Built and hosted in <strong>Europe</strong>.
89
-
</p>
95
+
<FadeIn delay={500}>
96
+
<h2 className="mb-3">
97
+
A social network that belongs to the people.
98
+
</h2>
99
+
</FadeIn>
100
+
<FadeIn delay={600}>
101
+
<p className="section-copy lg:pl-[calc(100%/4)] text-right">
102
+
<strong>No algorithms</strong> shaping your reality.
103
+
Decentralized. Built and hosted in <strong>Europe</strong>.
104
+
</p>
105
+
</FadeIn>
90
106
</div>
91
107
</div>
92
108
</div>
···
126
142
alt={`People ${slide.word}`}
127
143
className="absolute inset-[-12%] h-[124%] w-[124%] object-cover"
128
144
style={{
129
-
transition: "opacity 500ms ease-out, transform 3000ms ease-out",
145
+
transition:
146
+
"opacity 500ms ease-out, transform 3000ms ease-out",
130
147
opacity: currentIndex === index ? 1 : 0,
131
148
transform:
132
149
currentIndex === index ? "scale(1)" : "scale(1.06)",