mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
redesign landing page (fifth time :)
This commit is contained in:
Aman Varshney
@@ -1,4 +1,5 @@
|
||||
import type { Sponsor } from "@/lib/types";
|
||||
import { Github, Globe, Heart, Terminal } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
@@ -24,109 +25,192 @@ export default function SponsorsSection() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<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">
|
||||
<div className="mb-12 text-center">
|
||||
<h2 className="font-bold font-mono text-3xl text-foreground tracking-tight sm:text-4xl lg:text-5xl">
|
||||
<span className="text-primary">Our Sponsors</span>
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-xl text-lg text-muted-foreground">
|
||||
Supported by amazing organizations and individuals.
|
||||
</p>
|
||||
<div className="mb-12">
|
||||
<div className="mb-6 flex items-center gap-2">
|
||||
<Terminal className="terminal-glow h-4 w-4 text-primary" />
|
||||
<span className="terminal-glow font-bold font-mono text-lg">
|
||||
SPONSORS_DATABASE.JSON
|
||||
</span>
|
||||
<div className="h-px flex-1 bg-border" />
|
||||
<span className="font-mono text-muted-foreground text-xs">
|
||||
[{loadingSponsors ? "LOADING..." : sponsors.length} RECORDS]
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="terminal-block-hover mb-8 rounded border border-border bg-muted/20 p-4">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="terminal-glow text-primary">$</span>
|
||||
<span className="font-mono text-foreground">
|
||||
# Amazing organizations and individuals supporting this project
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center gap-2 text-sm">
|
||||
<span className="terminal-glow text-primary">$</span>
|
||||
<span className="font-mono text-muted-foreground">
|
||||
# Your support helps maintain and improve Better-T-Stack
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loadingSponsors ? (
|
||||
<div className="flex animate-pulse items-center justify-center py-12 text-base text-muted-foreground">
|
||||
Loading sponsors...
|
||||
<div className="terminal-block-hover rounded border border-border bg-muted/20 p-8">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div className="h-2 w-2 animate-pulse rounded-full bg-primary" />
|
||||
<span className="font-mono text-muted-foreground">
|
||||
LOADING_SPONSORS.EXE
|
||||
</span>
|
||||
<div className="h-2 w-2 animate-pulse rounded-full bg-primary" />
|
||||
</div>
|
||||
</div>
|
||||
) : sponsorError ? (
|
||||
<div className="flex items-center justify-center py-12 text-base text-destructive">
|
||||
{sponsorError}
|
||||
<div className="terminal-block-hover rounded border border-border bg-destructive/10 p-8">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<span className="text-destructive">✗</span>
|
||||
<span className="font-mono text-destructive">
|
||||
ERROR: {sponsorError}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : sponsors.length === 0 ? (
|
||||
<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="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"
|
||||
>
|
||||
<svg
|
||||
className="h-4 w-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
<div className="space-y-4">
|
||||
<div className="terminal-block-hover rounded border border-border bg-muted/20 p-8">
|
||||
<div className="text-center">
|
||||
<div className="mb-4 flex items-center justify-center gap-2">
|
||||
<span className="font-mono text-muted-foreground">
|
||||
NO_SPONSORS_FOUND.NULL
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2 text-sm">
|
||||
<span className="terminal-glow text-primary">$</span>
|
||||
<span className="font-mono text-muted-foreground">
|
||||
# Be the first to support this project!
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="terminal-block-hover rounded border border-border bg-background p-4">
|
||||
<a
|
||||
href="https://github.com/sponsors/AmanVarshney01"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-2 font-mono text-primary transition-colors hover:text-accent"
|
||||
>
|
||||
<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>
|
||||
<Heart className="h-4 w-4" />
|
||||
<span>BECOME_SPONSOR.EXE</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 items-center justify-center gap-8 sm:grid-cols-3 lg:grid-cols-4 lg:gap-12">
|
||||
{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 flex flex-col items-center gap-2 text-center transition-opacity hover:opacity-80"
|
||||
title={title}
|
||||
>
|
||||
<Image
|
||||
src={entry.sponsor.avatarUrl}
|
||||
alt={entry.sponsor.name || entry.sponsor.login}
|
||||
width={170}
|
||||
height={170}
|
||||
className="rounded-full border-2 border-border bg-background transition-colors duration-300 group-hover:border-primary"
|
||||
unoptimized
|
||||
/>
|
||||
<span className="truncate font-medium font-mono text-foreground text-sm group-hover:text-primary">
|
||||
{entry.sponsor.name || entry.sponsor.login}
|
||||
</span>
|
||||
{entry.tierName && (
|
||||
<span className="text-muted-foreground text-xs group-hover:text-primary/80">
|
||||
{entry.tierName}
|
||||
</span>
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{sponsors.map((entry, index) => {
|
||||
const since = new Date(entry.createdAt).toLocaleDateString(
|
||||
undefined,
|
||||
{ year: "numeric", month: "short" },
|
||||
);
|
||||
return (
|
||||
<div
|
||||
key={entry.sponsor.login}
|
||||
className="terminal-block-hover rounded border border-border bg-background"
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
>
|
||||
<div className="border-border border-b bg-muted/20 px-3 py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-primary text-xs">▶</span>
|
||||
<span className="truncate font-mono font-semibold text-xs">
|
||||
[SPONSOR_{String(index + 1).padStart(3, "0")}]
|
||||
</span>
|
||||
<div className="ml-auto flex items-center gap-2 text-muted-foreground text-xs">
|
||||
<span>{entry.isOneTime ? "ONE-TIME" : "MONTHLY"}</span>
|
||||
<span>•</span>
|
||||
<span>SINCE {since.toUpperCase()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<Image
|
||||
src={entry.sponsor.avatarUrl}
|
||||
alt={entry.sponsor.name || entry.sponsor.login}
|
||||
width={100}
|
||||
height={100}
|
||||
className="rounded border border-border bg-background transition-colors duration-300"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 space-y-2">
|
||||
<div>
|
||||
<h3 className="truncate font-mono font-semibold text-foreground text-sm">
|
||||
{entry.sponsor.name || entry.sponsor.login}
|
||||
</h3>
|
||||
{entry.tierName && (
|
||||
<p className="font-mono text-primary text-xs">
|
||||
{entry.tierName}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<a
|
||||
href={`https://github.com/${entry.sponsor.login}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group flex items-center gap-2 font-mono text-muted-foreground text-xs transition-colors hover:text-primary"
|
||||
>
|
||||
<Github className="h-4 w-4" />
|
||||
<span className="truncate">
|
||||
github.com/{entry.sponsor.login}
|
||||
</span>
|
||||
</a>
|
||||
{(entry.sponsor.websiteUrl ||
|
||||
entry.sponsor.linkUrl) && (
|
||||
<a
|
||||
href={
|
||||
entry.sponsor.websiteUrl ||
|
||||
entry.sponsor.linkUrl
|
||||
}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group flex items-center gap-2 font-mono text-muted-foreground text-xs transition-colors hover:text-primary"
|
||||
>
|
||||
<Globe className="h-4 w-4" />
|
||||
<span className="truncate">
|
||||
{(
|
||||
entry.sponsor.websiteUrl ||
|
||||
entry.sponsor.linkUrl
|
||||
)
|
||||
?.replace(/^https?:\/\//, "")
|
||||
?.replace(/\/$/, "")}
|
||||
</span>
|
||||
</a>
|
||||
)}
|
||||
|
||||
{/* <div className="flex items-center gap-2 font-mono text-muted-foreground text-xs">
|
||||
<span className="text-xs">👤</span>
|
||||
<span>{entry.sponsor.type.toUpperCase()}</span>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="terminal-block-hover rounded border border-border bg-background p-4">
|
||||
<a
|
||||
href="https://github.com/sponsors/AmanVarshney01"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-2 font-mono text-primary transition-colors hover:text-accent"
|
||||
>
|
||||
<Heart className="h-4 w-4" />
|
||||
<span>SUPPORT_PROJECT.EXE</span>
|
||||
</a>
|
||||
</div>
|
||||
</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-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"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<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>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user