redesign landing page (fifth time :)

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

@@ -4,7 +4,7 @@ import Link from "next/link";
 const Footer = () => {
 	return (
 		<footer className="relative w-full border-border border-t font-mono">
-			<div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
+			<div className="px-4 py-12 sm:px-6">
 				<div className="mb-12 grid gap-8 md:grid-cols-3">
 					<div>
 						<h3 className="mb-4 flex items-center gap-2 font-semibold text-base text-foreground">

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

@@ -94,7 +94,7 @@ export default function Navbar() {
 						: "border-transparent border-b bg-transparent",
 				)}
 			>
-				<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+				<div className="flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
 					<Link href="/" className="flex flex-shrink-0 items-center gap-2">
 						<Image
 							src="/logo.svg"

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

@@ -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>
 	);
 }

apps/web/src/app/(home)/_components/testimonials.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight, Terminal } from "lucide-react";
 import { motion } from "motion/react";
 import { useMemo, useState } from "react";
 import { Tweet } from "react-tweet";
@@ -113,105 +113,130 @@ export default function Testimonials() {
 	};
 
 	return (
-		<motion.section className="relative z-10 mx-auto w-full max-w-7xl space-y-12 px-4 py-16 sm:px-6 sm:py-24 lg:space-y-16 lg:px-8">
-			<div className="text-center">
-				<h2 className="font-bold font-mono text-3xl text-foreground tracking-tight sm:text-4xl lg:text-5xl">
-					Loved by <span className="text-primary">Developers</span>
-				</h2>
-				<p className="mx-auto mt-4 max-w-2xl font-mono text-lg text-muted-foreground leading-relaxed">
-					See what people are saying about Better-T-Stack on X.
-				</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">
+					DEVELOPER_TESTIMONIALS.LOG
+				</span>
+				<div className="h-px flex-1 bg-border" />
+				<span className="font-mono text-muted-foreground text-xs">
+					[{TWEET_IDS.length} ENTRIES]
+				</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">
+						# Community feedback from X (Twitter)
+					</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">
+						# Real developers sharing their experience
+					</span>
+				</div>
 			</div>
 
 			<motion.div
-				className={cn("grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3")}
+				className={cn("grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3")}
 				variants={gridVariants}
+				initial="hidden"
+				animate="visible"
 			>
-				{visibleTweetIndices.map((index) => (
-					<div
+				{visibleTweetIndices.map((index, i) => (
+					<motion.div
 						key={TWEET_IDS[index]}
-						className="overflow-hidden rounded-lg border border-border"
+						className="terminal-block-hover overflow-hidden rounded border border-border bg-background"
+						style={{ animationDelay: `${i * 50}ms` }}
+						initial={{ opacity: 0, y: 20 }}
+						animate={{ opacity: 1, y: 0 }}
+						transition={{ delay: i * 0.1 }}
 					>
-						<Tweet id={TWEET_IDS[index]} />
-					</div>
+						<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="font-mono font-semibold text-xs">
+									[TWEET_{String(index + 1).padStart(3, "0")}]
+								</span>
+							</div>
+						</div>
+						<div className="p-0">
+							<Tweet id={TWEET_IDS[index]} />
+						</div>
+					</motion.div>
 				))}
 			</motion.div>
 
 			{totalPages > 1 && (
-				<motion.div
-					className="mt-10 flex items-center justify-between sm:mt-12"
-					initial={{ opacity: 0 }}
-					animate={{ opacity: 1 }}
-					transition={{ delay: 0.5, duration: 0.5 }}
-				>
-					<motion.button
-						whileHover={{ scale: 1.05 }}
-						whileTap={{ scale: 0.95 }}
-						onClick={handlePrev}
-						disabled={currentPage === 1}
-						className={cn(
-							"inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50",
-						)}
-						aria-label="Previous page"
-					>
-						<ChevronLeft className="size-4" />
-						Prev
-					</motion.button>
+				<div className="terminal-block-hover mt-8 rounded border border-border bg-muted/20 p-4">
+					<div className="flex items-center justify-between">
+						<button
+							type="button"
+							onClick={handlePrev}
+							disabled={currentPage === 1}
+							className={cn(
+								"terminal-block-hover flex items-center gap-1.5 rounded border border-border bg-background px-3 py-1.5 font-mono text-xs transition-colors",
+								currentPage === 1
+									? "cursor-not-allowed opacity-50"
+									: "hover:bg-muted/50",
+							)}
+						>
+							<ChevronLeft className="h-3 w-3" />
+							PREV
+						</button>
 
-					<div className="hidden items-center gap-1 sm:flex">
-						{paginationDots.map((page, index) =>
-							typeof page === "number" ? (
-								<button
-									type="button"
-									key={`${page}-${
-										// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-										index
-									}`}
-									onClick={() => goToPage(page)}
-									className={cn(
-										"flex h-8 w-8 items-center justify-center rounded-md font-medium text-sm transition-colors",
-										currentPage === page
-											? "bg-primary/10 text-primary"
-											: "text-muted-foreground hover:bg-muted",
-									)}
-									aria-label={`Go to page ${page}`}
-									aria-current={currentPage === page ? "page" : undefined}
-								>
-									{page}
-								</button>
-							) : (
-								<span
-									key={`ellipsis-${
-										// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-										index
-									}`}
-									className="flex h-8 w-8 items-center justify-center text-muted-foreground text-sm"
-									aria-hidden="true"
-								>
-									...
-								</span>
-							),
-						)}
-					</div>
-					<div className="text-muted-foreground text-sm sm:hidden">
-						Page {currentPage} of {totalPages}
-					</div>
+						<div className="flex items-center gap-1">
+							<span className="font-mono text-muted-foreground text-xs">
+								PAGE:
+							</span>
+							{paginationDots.map((page, index) =>
+								typeof page === "number" ? (
+									<button
+										type="button"
+										key={`page-${page}`}
+										onClick={() => goToPage(page)}
+										className={cn(
+											"terminal-block-hover flex h-6 w-6 items-center justify-center rounded border border-border font-mono text-xs transition-colors",
+											currentPage === page
+												? "terminal-glow bg-primary/20 text-primary"
+												: "bg-background text-muted-foreground hover:text-foreground",
+										)}
+									>
+										{page}
+									</button>
+								) : (
+									<span
+										key={`ellipsis-${
+											index < paginationDots.length / 2 ? "start" : "end"
+										}`}
+										className="flex h-6 w-6 items-center justify-center font-mono text-muted-foreground text-xs"
+									>
+										...
+									</span>
+								),
+							)}
+						</div>
 
-					<motion.button
-						whileHover={{ scale: 1.05 }}
-						whileTap={{ scale: 0.95 }}
-						onClick={handleNext}
-						disabled={currentPage === totalPages}
-						className={cn(
-							"inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50",
-						)}
-						aria-label="Next page"
-					>
-						Next
-						<ChevronRight className="size-4" />
-					</motion.button>
-				</motion.div>
+						<button
+							type="button"
+							onClick={handleNext}
+							disabled={currentPage === totalPages}
+							className={cn(
+								"terminal-block-hover flex items-center gap-1.5 rounded border border-border bg-background px-3 py-1.5 font-mono text-xs transition-colors",
+								currentPage === totalPages
+									? "cursor-not-allowed opacity-50"
+									: "hover:bg-muted/50",
+							)}
+						>
+							NEXT
+							<ChevronRight className="h-3 w-3" />
+						</button>
+					</div>
+				</div>
 			)}
-		</motion.section>
+		</div>
 	);
 }