Skip to content

Commit 07c8a59

Browse files
AmanVarshney01AmanVarshney01
committed
redesign landing page (fifth time :)
1 parent 66b52d6 commit 07c8a59

File tree

6 files changed

+691
-311
lines changed

6 files changed

+691
-311
lines changed

‎apps/web/src/app/(home)/_components/footer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Link from "next/link";
44
const Footer = () => {
55
return (
66
<footer className="relative w-full border-border border-t font-mono">
7-
<div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
7+
<div className="px-4 py-12 sm:px-6">
88
<div className="mb-12 grid gap-8 md:grid-cols-3">
99
<div>
1010
<h3 className="mb-4 flex items-center gap-2 font-semibold text-base text-foreground">

‎apps/web/src/app/(home)/_components/navbar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export default function Navbar() {
9494
: "border-transparent border-b bg-transparent",
9595
)}
9696
>
97-
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
97+
<div className="flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
9898
<Link href="/" className="flex flex-shrink-0 items-center gap-2">
9999
<Image
100100
src="/logo.svg"

‎apps/web/src/app/(home)/_components/sponsors-section.tsx

Lines changed: 177 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Sponsor } from "@/lib/types";
2+
import { Github, Globe, Heart, Terminal } from "lucide-react";
23
import Image from "next/image";
34
import { useEffect, useState } from "react";
45

@@ -24,109 +25,192 @@ export default function SponsorsSection() {
2425
}, []);
2526

2627
return (
27-
<section className="relative z-10 mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
28-
<div className="mb-12 text-center">
29-
<h2 className="font-bold font-mono text-3xl text-foreground tracking-tight sm:text-4xl lg:text-5xl">
30-
<span className="text-primary">Our Sponsors</span>
31-
</h2>
32-
<p className="mx-auto mt-4 max-w-xl text-lg text-muted-foreground">
33-
Supported by amazing organizations and individuals.
34-
</p>
28+
<div className="mb-12">
29+
<div className="mb-6 flex items-center gap-2">
30+
<Terminal className="terminal-glow h-4 w-4 text-primary" />
31+
<span className="terminal-glow font-bold font-mono text-lg">
32+
SPONSORS_DATABASE.JSON
33+
</span>
34+
<div className="h-px flex-1 bg-border" />
35+
<span className="font-mono text-muted-foreground text-xs">
36+
[{loadingSponsors ? "LOADING..." : sponsors.length} RECORDS]
37+
</span>
3538
</div>
39+
40+
<div className="terminal-block-hover mb-8 rounded border border-border bg-muted/20 p-4">
41+
<div className="flex items-center gap-2 text-sm">
42+
<span className="terminal-glow text-primary">$</span>
43+
<span className="font-mono text-foreground">
44+
# Amazing organizations and individuals supporting this project
45+
</span>
46+
</div>
47+
<div className="mt-2 flex items-center gap-2 text-sm">
48+
<span className="terminal-glow text-primary">$</span>
49+
<span className="font-mono text-muted-foreground">
50+
# Your support helps maintain and improve Better-T-Stack
51+
</span>
52+
</div>
53+
</div>
54+
3655
{loadingSponsors ? (
37-
<div className="flex animate-pulse items-center justify-center py-12 text-base text-muted-foreground">
38-
Loading sponsors...
56+
<div className="terminal-block-hover rounded border border-border bg-muted/20 p-8">
57+
<div className="flex items-center justify-center gap-2">
58+
<div className="h-2 w-2 animate-pulse rounded-full bg-primary" />
59+
<span className="font-mono text-muted-foreground">
60+
LOADING_SPONSORS.EXE
61+
</span>
62+
<div className="h-2 w-2 animate-pulse rounded-full bg-primary" />
63+
</div>
3964
</div>
4065
) : sponsorError ? (
41-
<div className="flex items-center justify-center py-12 text-base text-destructive">
42-
{sponsorError}
66+
<div className="terminal-block-hover rounded border border-border bg-destructive/10 p-8">
67+
<div className="flex items-center justify-center gap-2">
68+
<span className="text-destructive">✗</span>
69+
<span className="font-mono text-destructive">
70+
ERROR: {sponsorError}
71+
</span>
72+
</div>
4373
</div>
4474
) : sponsors.length === 0 ? (
45-
<div className="flex flex-col items-center justify-center py-12 text-base text-muted-foreground">
46-
No sponsors yet.
47-
<a
48-
href="https://github.com/sponsors/AmanVarshney01"
49-
target="_blank"
50-
rel="noopener noreferrer"
51-
className="mt-4 inline-flex items-center gap-2 rounded-lg border border-primary bg-transparent px-4 py-2 font-mono text-primary text-sm shadow-sm transition-all hover:bg-primary hover:text-primary-foreground focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2"
52-
>
53-
<svg
54-
className="h-4 w-4"
55-
fill="none"
56-
stroke="currentColor"
57-
strokeWidth="2"
58-
viewBox="0 0 24 24"
75+
<div className="space-y-4">
76+
<div className="terminal-block-hover rounded border border-border bg-muted/20 p-8">
77+
<div className="text-center">
78+
<div className="mb-4 flex items-center justify-center gap-2">
79+
<span className="font-mono text-muted-foreground">
80+
NO_SPONSORS_FOUND.NULL
81+
</span>
82+
</div>
83+
<div className="flex items-center justify-center gap-2 text-sm">
84+
<span className="terminal-glow text-primary">$</span>
85+
<span className="font-mono text-muted-foreground">
86+
# Be the first to support this project!
87+
</span>
88+
</div>
89+
</div>
90+
</div>
91+
<div className="terminal-block-hover rounded border border-border bg-background p-4">
92+
<a
93+
href="https://github.com/sponsors/AmanVarshney01"
94+
target="_blank"
95+
rel="noopener noreferrer"
96+
className="flex items-center justify-center gap-2 font-mono text-primary transition-colors hover:text-accent"
5997
>
60-
<title>Heart Icon</title>
61-
<path
62-
strokeLinecap="round"
63-
strokeLinejoin="round"
64-
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
65-
/>
66-
</svg>
67-
Become a Sponsor
68-
</a>
98+
<Heart className="h-4 w-4" />
99+
<span>BECOME_SPONSOR.EXE</span>
100+
</a>
101+
</div>
69102
</div>
70103
) : (
71-
<div className="grid grid-cols-2 items-center justify-center gap-8 sm:grid-cols-3 lg:grid-cols-4 lg:gap-12">
72-
{sponsors.map((entry) => {
73-
const since = new Date(entry.createdAt).toLocaleDateString(
74-
undefined,
75-
{ year: "numeric", month: "short" },
76-
);
77-
const title = `@${entry.sponsor.login} - ${entry.sponsor.type}${
78-
entry.isOneTime ? " (One-time)" : " (Monthly)"
79-
}\nTier: ${entry.tierName || "N/A"}\nSince: ${since}`;
80-
return (
81-
<a
82-
key={entry.sponsor.login}
83-
href={entry.sponsor.websiteUrl || entry.sponsor.linkUrl}
84-
target="_blank"
85-
rel="noopener noreferrer"
86-
className="group flex flex-col items-center gap-2 text-center transition-opacity hover:opacity-80"
87-
title={title}
88-
>
89-
<Image
90-
src={entry.sponsor.avatarUrl}
91-
alt={entry.sponsor.name || entry.sponsor.login}
92-
width={170}
93-
height={170}
94-
className="rounded-full border-2 border-border bg-background transition-colors duration-300 group-hover:border-primary"
95-
unoptimized
96-
/>
97-
<span className="truncate font-medium font-mono text-foreground text-sm group-hover:text-primary">
98-
{entry.sponsor.name || entry.sponsor.login}
99-
</span>
100-
{entry.tierName && (
101-
<span className="text-muted-foreground text-xs group-hover:text-primary/80">
102-
{entry.tierName}
103-
</span>
104-
)}
105-
</a>
106-
);
107-
})}
108-
</div>
109-
)}
110-
{sponsors.length > 0 && (
111-
<div className="mt-16 text-center">
112-
<a
113-
href="https://github.com/sponsors/AmanVarshney01"
114-
target="_blank"
115-
rel="noopener noreferrer"
116-
className="inline-flex items-center gap-2 rounded-lg border border-primary bg-transparent px-5 py-2.5 font-mono font-semibold text-base text-primary shadow-sm transition-all duration-300 ease-in-out hover:bg-primary hover:text-primary-foreground focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2"
117-
>
118-
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
119-
<title>Heart Icon</title>
120-
<path
121-
fillRule="evenodd"
122-
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
123-
clipRule="evenodd"
124-
/>
125-
</svg>
126-
Support Our Project!
127-
</a>
104+
<div className="space-y-6">
105+
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
106+
{sponsors.map((entry, index) => {
107+
const since = new Date(entry.createdAt).toLocaleDateString(
108+
undefined,
109+
{ year: "numeric", month: "short" },
110+
);
111+
return (
112+
<div
113+
key={entry.sponsor.login}
114+
className="terminal-block-hover rounded border border-border bg-background"
115+
style={{ animationDelay: `${index * 50}ms` }}
116+
>
117+
<div className="border-border border-b bg-muted/20 px-3 py-2">
118+
<div className="flex items-center gap-2">
119+
<span className="text-primary text-xs">▶</span>
120+
<span className="truncate font-mono font-semibold text-xs">
121+
[SPONSOR_{String(index + 1).padStart(3, "0")}]
122+
</span>
123+
<div className="ml-auto flex items-center gap-2 text-muted-foreground text-xs">
124+
<span>{entry.isOneTime ? "ONE-TIME" : "MONTHLY"}</span>
125+
<span>•</span>
126+
<span>SINCE {since.toUpperCase()}</span>
127+
</div>
128+
</div>
129+
</div>
130+
<div className="p-4">
131+
<div className="flex items-center gap-4">
132+
<div className="flex-shrink-0">
133+
<Image
134+
src={entry.sponsor.avatarUrl}
135+
alt={entry.sponsor.name || entry.sponsor.login}
136+
width={100}
137+
height={100}
138+
className="rounded border border-border bg-background transition-colors duration-300"
139+
unoptimized
140+
/>
141+
</div>
142+
<div className="min-w-0 flex-1 space-y-2">
143+
<div>
144+
<h3 className="truncate font-mono font-semibold text-foreground text-sm">
145+
{entry.sponsor.name || entry.sponsor.login}
146+
</h3>
147+
{entry.tierName && (
148+
<p className="font-mono text-primary text-xs">
149+
{entry.tierName}
150+
</p>
151+
)}
152+
</div>
153+
<div className="flex flex-col gap-1">
154+
<a
155+
href={`https://github.com/${entry.sponsor.login}`}
156+
target="_blank"
157+
rel="noopener noreferrer"
158+
className="group flex items-center gap-2 font-mono text-muted-foreground text-xs transition-colors hover:text-primary"
159+
>
160+
<Github className="h-4 w-4" />
161+
<span className="truncate">
162+
github.com/{entry.sponsor.login}
163+
</span>
164+
</a>
165+
{(entry.sponsor.websiteUrl ||
166+
entry.sponsor.linkUrl) && (
167+
<a
168+
href={
169+
entry.sponsor.websiteUrl ||
170+
entry.sponsor.linkUrl
171+
}
172+
target="_blank"
173+
rel="noopener noreferrer"
174+
className="group flex items-center gap-2 font-mono text-muted-foreground text-xs transition-colors hover:text-primary"
175+
>
176+
<Globe className="h-4 w-4" />
177+
<span className="truncate">
178+
{(
179+
entry.sponsor.websiteUrl ||
180+
entry.sponsor.linkUrl
181+
)
182+
?.replace(/^https?:\/\//, "")
183+
?.replace(/\/$/, "")}
184+
</span>
185+
</a>
186+
)}
187+
188+
{/* <div className="flex items-center gap-2 font-mono text-muted-foreground text-xs">
189+
<span className="text-xs">👤</span>
190+
<span>{entry.sponsor.type.toUpperCase()}</span>
191+
</div> */}
192+
</div>
193+
</div>
194+
</div>
195+
</div>
196+
</div>
197+
);
198+
})}
199+
</div>
200+
201+
<div className="terminal-block-hover rounded border border-border bg-background p-4">
202+
<a
203+
href="https://github.com/sponsors/AmanVarshney01"
204+
target="_blank"
205+
rel="noopener noreferrer"
206+
className="flex items-center justify-center gap-2 font-mono text-primary transition-colors hover:text-accent"
207+
>
208+
<Heart className="h-4 w-4" />
209+
<span>SUPPORT_PROJECT.EXE</span>
210+
</a>
211+
</div>
128212
</div>
129213
)}
130-
</section>
214+
</div>
131215
);
132216
}

0 commit comments

Comments
 (0)