franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

update sponsor ui

Browse Source
This commit is contained in:
Aman Varshney
2025-05-18 19:11:29 +05:30
parent 6656862dc1
commit e3c1d5b9b4
3 changed files with 157 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
apps/web/src/app/(home)/_components/stack-builder.tsx
View File

@@ -1910,74 +1910,121 @@ const StackBuilder = () => {
);
})}
<div className="h-10" />
{/* Sponsors Section */}
<section className="mt-12 mb-8">
<div className="mb-6 text-center">
<h2 className="font-bold font-mono text-2xl text-foreground tracking-tight">
<span className="text-primary">Sponsors</span>
<div className="mb-12 text-center">
<h2 className="font-bold font-mono text-4xl text-foreground tracking-tight sm:text-5xl lg:text-6xl">
<span className="text-primary">Our Sponsors</span>
</h2>
<p className="mx-auto mt-4 max-w-xl text-lg text-muted-foreground">
This project is proudly supported by these amazing
organizations and individuals.
</p>
</div>
{loadingSponsors ? (
<div className="flex items-center justify-center py-8 text-muted-foreground text-sm">
<div className="flex animate-pulse items-center justify-center py-12 text-base text-muted-foreground">
Loading sponsors...
</div>
) : sponsorError ? (
<div className="flex items-center justify-center py-8 text-destructive text-sm">
<div className="flex items-center justify-center py-12 text-base text-destructive">
{sponsorError}
</div>
) : sponsors.length === 0 ? (
<div className="flex items-center justify-center py-8 text-muted-foreground text-sm">
No sponsors yet.{" "}
<div className="flex flex-col items-center justify-center py-12 text-base text-muted-foreground">
No sponsors yet.
<a
href="https://github.com/sponsors/AmanVarshney01"
target="_blank"
rel="noopener noreferrer"
className="ml-2 text-primary underline"
className="mt-4 inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 font-mono text-lg text-primary-foreground shadow-lg transition-all hover:bg-primary/90 hover:shadow-xl focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2"
>
<svg
className="h-6 w-6"
fill="none"
stroke="currentColor"
strokeWidth="2"
viewBox="0 0 24 24"
>
<title>Heart Icon</title>
<path
strokeLinecap="round"
strokeLinejoin="round"
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"
/>
</svg>
Become a Sponsor
</a>
</div>
) : (
<div className="flex flex-wrap justify-center gap-6">
{sponsors.map((entry) => (
<a
key={entry.sponsor.login}
href={entry.sponsor.websiteUrl || entry.sponsor.linkUrl}
target="_blank"
rel="noopener noreferrer"
className="flex flex-col items-center gap-2 rounded-lg border border-border bg-muted/30 px-4 py-3 shadow-sm transition-transform hover:scale-105 hover:border-primary"
title={entry.sponsor.name}
>
<Image
src={entry.sponsor.avatarUrl}
alt={entry.sponsor.name}
width={56}
height={56}
className="rounded-full border border-border bg-background"
unoptimized
/>
<span className="font-mono text-foreground text-xs">
{entry.sponsor.name || entry.sponsor.login}
</span>
{entry.tierName && (
<span className="text-[10px] text-muted-foreground">
{entry.tierName}
<div className="fade-in-sponsors grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 lg:gap-8 xl:grid-cols-5">
{sponsors.map((entry) => {
const since = new Date(
entry.createdAt,
).toLocaleDateString(undefined, {
year: "numeric",
month: "short",
});
const title = `@${entry.sponsor.login} - ${entry.sponsor.type}${
entry.isOneTime ? " (One-time)" : " (Monthly)"
}\nTier: ${entry.tierName || "N/A"}\nSince: ${since}`;
return (
<a
key={entry.sponsor.login}
href={
entry.sponsor.websiteUrl || entry.sponsor.linkUrl
}
target="_blank"
rel="noopener noreferrer"
className="group hover:-translate-y-1 relative flex flex-col items-center gap-3 rounded-xl border border-border bg-card p-6 shadow-md transition-all duration-300 ease-in-out hover:border-primary hover:shadow-xl"
title={title}
>
<div className="relative mb-2">
<Image
src={entry.sponsor.avatarUrl}
alt={entry.sponsor.name || entry.sponsor.login}
width={80}
height={80}
className="rounded-full border-2 border-border bg-background transition-colors duration-300 group-hover:border-primary"
unoptimized
/>
</div>
<span className="break-words text-center font-mono font-semibold text-foreground text-sm">
{entry.sponsor.name || entry.sponsor.login}
</span>
)}
</a>
))}
{entry.tierName && (
<span className="rounded-full bg-primary/10 px-3 py-1 text-center font-medium text-primary text-xs">
{entry.tierName}
</span>
)}
</a>
);
})}
</div>
)}
{sponsors.length > 0 && (
<div className="mt-16 text-center">
<a
href="https://github.com/sponsors/AmanVarshney01"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-3 rounded-xl bg-gradient-to-r from-primary to-accent px-8 py-4 font-mono font-semibold text-primary-foreground text-xl shadow-xl transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-2xl focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2"
>
<svg
className="h-7 w-7 animate-pulse"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Heart Icon</title>
<path
fillRule="evenodd"
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"
clipRule="evenodd"
/>
</svg>
Support Our Project!
</a>
</div>
)}
<div className="mt-8 text-center">
<a
href="https://github.com/sponsors/AmanVarshney01"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 rounded-md border border-primary/50 bg-primary/10 px-4 py-2 font-mono text-primary text-sm transition-colors hover:bg-primary/20"
>
Become a Sponsor
</a>
</div>
</section>
</main>
</ScrollArea>