Skip to content

Commit 4c2fb13

Browse files
ComputelessComputerComputelessComputer
committed
opensource section
1 parent f1c8734 commit 4c2fb13

File tree

1 file changed

+6
-39
lines changed

1 file changed

+6
-39
lines changed

‎apps/web/src/components/github-open-source.tsx‎

Lines changed: 6 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { cn } from "@hypr/utils";
2+
23
import { Icon } from "@iconify-icon/react";
34

45
const ORG_REPO = "fastrepl/hyprnote";
56

6-
// Curated list of profiles to display
77
const CURATED_PROFILES = [
88
{ username: "tobi", avatar: "https://avatars.githubusercontent.com/u/347?v=4" },
99
{ username: "DidierRLopes", avatar: "https://avatars.githubusercontent.com/u/25267873?v=4" },
@@ -82,9 +82,9 @@ function OpenSourceButton({ showStars = false, starCount }: { showStars?: boolea
8282
const renderCount = (n: number) => n > 1000 ? `${(n / 1000).toFixed(1)}k` : n;
8383

8484
return (
85-
<div className="text-center space-y-4 w-full">
86-
<h2 className="text-3xl font-serif text-stone-600">Open source</h2>
87-
<p className="text-lg text-neutral-600">
85+
<div className="text-center space-y-4 w-full max-w-md mx-auto">
86+
<h2 className="text-2xl font-serif text-stone-600">Open source</h2>
87+
<p className="text-neutral-600">
8888
{"Hyprnote values privacy and community, so it's been transparent from day one"}
8989
</p>
9090
<a
@@ -98,7 +98,7 @@ function OpenSourceButton({ showStars = false, starCount }: { showStars?: boolea
9898
"transition-all cursor-pointer",
9999
])}
100100
>
101-
<Icon icon="mdi:github" className="text-xl" />
101+
<Icon icon="mdi:github" className="text-lg" />
102102
View on GitHub
103103
{showStars && starCount && (
104104
<>
@@ -141,83 +141,66 @@ export function GitHubOpenSource() {
141141

142142
return (
143143
<section className="border-t border-neutral-100">
144-
<div className="py-16 px-4">
145-
{/* Small & Medium screens: button with star count */}
144+
<div className="px-4 py-8">
146145
<div className="lg:hidden max-w-4xl mx-auto">
147146
<OpenSourceButton showStars={true} starCount={STARS_COUNT} />
148147
</div>
149148

150-
{/* Large screen: 3-column layout with symmetric left and right sides */}
151149
<div className="hidden lg:flex justify-between max-w-7xl mx-auto items-center">
152-
{/* Left Side: 3 sub-columns with explicit widths */}
153150
<div className="flex gap-1">
154-
{/* Left Sub-column 1: 2x4 grid */}
155151
<div className="flex flex-col gap-1">
156-
{/* Row 1 */}
157152
<GridRow>
158153
{CURATED_PROFILES.slice(0, 2).map((profile) => (
159154
<Avatar key={`left-c1-r1-${profile.username}`} username={profile.username} avatar={profile.avatar} />
160155
))}
161156
</GridRow>
162-
{/* Row 2 */}
163157
<GridRow>
164158
{CURATED_PROFILES.slice(2, 4).map((profile) => (
165159
<Avatar key={`left-c1-r2-${profile.username}`} username={profile.username} avatar={profile.avatar} />
166160
))}
167161
</GridRow>
168-
{/* Row 3 */}
169162
<GridRow>
170163
{CURATED_PROFILES.slice(4, 6).map((profile) => (
171164
<Avatar key={`left-c1-r3-${profile.username}`} username={profile.username} avatar={profile.avatar} />
172165
))}
173166
</GridRow>
174-
{/* Row 4 */}
175167
<GridRow>
176168
{CURATED_PROFILES.slice(6, 8).map((profile) => (
177169
<Avatar key={`left-c1-r4-${profile.username}`} username={profile.username} avatar={profile.avatar} />
178170
))}
179171
</GridRow>
180172
</div>
181173

182-
{/* Left Sub-column 2: 2 avatars + Stars badge (spans 2 rows) + 2 avatars */}
183174
<div className="flex flex-col gap-1">
184-
{/* Row 1 */}
185175
<GridRow>
186176
{CURATED_PROFILES.slice(8, 10).map((profile) => (
187177
<Avatar key={`left-c2-r1-${profile.username}`} username={profile.username} avatar={profile.avatar} />
188178
))}
189179
</GridRow>
190-
{/* Rows 2-3: Stars badge - spans 2 rows (40px + 4px + 40px = 84px) */}
191180
<StatBadge type="stars" count={STARS_COUNT} />
192-
{/* Row 4 */}
193181
<GridRow>
194182
{CURATED_PROFILES.slice(10, 12).map((profile) => (
195183
<Avatar key={`left-c2-r4-${profile.username}`} username={profile.username} avatar={profile.avatar} />
196184
))}
197185
</GridRow>
198186
</div>
199187

200-
{/* Left Sub-column 3: 3x4 grid */}
201188
<div className="flex flex-col gap-1">
202-
{/* Row 1 */}
203189
<GridRow>
204190
{CURATED_PROFILES.slice(12, 15).map((profile) => (
205191
<Avatar key={`left-c3-r1-${profile.username}`} username={profile.username} avatar={profile.avatar} />
206192
))}
207193
</GridRow>
208-
{/* Row 2 */}
209194
<GridRow>
210195
{CURATED_PROFILES.slice(15, 18).map((profile) => (
211196
<Avatar key={`left-c3-r2-${profile.username}`} username={profile.username} avatar={profile.avatar} />
212197
))}
213198
</GridRow>
214-
{/* Row 3 */}
215199
<GridRow>
216200
{CURATED_PROFILES.slice(18, 21).map((profile) => (
217201
<Avatar key={`left-c3-r3-${profile.username}`} username={profile.username} avatar={profile.avatar} />
218202
))}
219203
</GridRow>
220-
{/* Row 4 */}
221204
<GridRow>
222205
{CURATED_PROFILES.slice(21, 24).map((profile) => (
223206
<Avatar key={`left-c3-r4-${profile.username}`} username={profile.username} avatar={profile.avatar} />
@@ -226,80 +209,64 @@ export function GitHubOpenSource() {
226209
</div>
227210
</div>
228211

229-
{/* Center Column: Open Source Button */}
230212
<div className="flex items-center justify-center">
231213
<OpenSourceButton />
232214
</div>
233215

234-
{/* Right Side: 3 sub-columns with explicit widths (symmetric) */}
235216
<div className="flex gap-1">
236-
{/* Right Sub-column 1: 3x4 grid */}
237217
<div className="flex flex-col gap-1">
238-
{/* Row 1 */}
239218
<GridRow>
240219
{CURATED_PROFILES.slice(24, 27).map((profile) => (
241220
<Avatar key={`right-c1-r1-${profile.username}`} username={profile.username} avatar={profile.avatar} />
242221
))}
243222
</GridRow>
244-
{/* Row 2 */}
245223
<GridRow>
246224
{CURATED_PROFILES.slice(27, 30).map((profile) => (
247225
<Avatar key={`right-c1-r2-${profile.username}`} username={profile.username} avatar={profile.avatar} />
248226
))}
249227
</GridRow>
250-
{/* Row 3 */}
251228
<GridRow>
252229
{CURATED_PROFILES.slice(30, 33).map((profile) => (
253230
<Avatar key={`right-c1-r3-${profile.username}`} username={profile.username} avatar={profile.avatar} />
254231
))}
255232
</GridRow>
256-
{/* Row 4 */}
257233
<GridRow>
258234
{CURATED_PROFILES.slice(33, 36).map((profile) => (
259235
<Avatar key={`right-c1-r4-${profile.username}`} username={profile.username} avatar={profile.avatar} />
260236
))}
261237
</GridRow>
262238
</div>
263239

264-
{/* Right Sub-column 2: 2 avatars + Forks badge (spans 2 rows) + 2 avatars */}
265240
<div className="flex flex-col gap-1">
266-
{/* Row 1 */}
267241
<GridRow>
268242
{CURATED_PROFILES.slice(36, 38).map((profile) => (
269243
<Avatar key={`right-c2-r1-${profile.username}`} username={profile.username} avatar={profile.avatar} />
270244
))}
271245
</GridRow>
272-
{/* Rows 2-3: Forks badge - spans 2 rows (40px + 4px + 40px = 84px) */}
273246
<StatBadge type="forks" count={FORKS_COUNT} />
274-
{/* Row 4 */}
275247
<GridRow>
276248
{CURATED_PROFILES.slice(38, 40).map((profile) => (
277249
<Avatar key={`right-c2-r4-${profile.username}`} username={profile.username} avatar={profile.avatar} />
278250
))}
279251
</GridRow>
280252
</div>
281253

282-
{/* Right Sub-column 3: 2x4 grid */}
283254
<div className="flex flex-col gap-1">
284-
{/* Row 1 */}
285255
<GridRow>
286256
{CURATED_PROFILES.slice(40, 42).map((profile) => (
287257
<Avatar key={`right-c3-r1-${profile.username}`} username={profile.username} avatar={profile.avatar} />
288258
))}
289259
</GridRow>
290-
{/* Row 2 */}
291260
<GridRow>
292261
{CURATED_PROFILES.slice(42, 44).map((profile) => (
293262
<Avatar key={`right-c3-r2-${profile.username}`} username={profile.username} avatar={profile.avatar} />
294263
))}
295264
</GridRow>
296-
{/* Row 3 */}
297265
<GridRow>
298266
{CURATED_PROFILES.slice(44, 46).map((profile) => (
299267
<Avatar key={`right-c3-r3-${profile.username}`} username={profile.username} avatar={profile.avatar} />
300268
))}
301269
</GridRow>
302-
{/* Row 4 */}
303270
<GridRow>
304271
{CURATED_PROFILES.slice(46, 48).map((profile) => (
305272
<Avatar key={`right-c3-r4-${profile.username}`} username={profile.username} avatar={profile.avatar} />

0 commit comments

Comments
 (0)