add sponsors section in home page and stack builder

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

@@ -1,59 +1,139 @@
 "use client";
 
-import { motion } from "motion/react";
+import type { Sponsor } from "@/lib/types";
 import Image from "next/image";
+import { useEffect, useState } from "react";
 
 export default function SponsorsSection() {
-	const sectionVariants = {
-		hidden: { opacity: 0, y: 30 },
-		visible: {
-			opacity: 1,
-			y: 0,
-			transition: { duration: 0.6, ease: "easeOut" },
-		},
-	};
+	const [sponsors, setSponsors] = useState<Sponsor[]>([]);
+	const [loadingSponsors, setLoadingSponsors] = useState(true);
+	const [sponsorError, setSponsorError] = useState<string | null>(null);
+
+	useEffect(() => {
+		fetch(
+			"https://cdn.jsdelivr.net/gh/amanvarshney01/sponsors/sponsorkit/sponsors.json",
+		)
+			.then((res) => {
+				if (!res.ok) throw new Error("Failed to fetch sponsors");
+				return res.json();
+			})
+			.then((data) => {
+				setSponsors(Array.isArray(data) ? data : []);
+				setLoadingSponsors(false);
+			})
+			.catch(() => {
+				setSponsorError("Could not load sponsors");
+				setLoadingSponsors(false);
+			});
+	}, []);
 
 	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"
-			initial="hidden"
-			whileInView="visible"
-			viewport={{ once: true, amount: 0.2 }}
-			variants={sectionVariants}
-		>
-			<div className="text-center">
+		<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-10 text-center">
 				<h2 className="font-bold font-mono text-3xl text-foreground tracking-tight sm:text-4xl lg:text-5xl">
 					<span className="text-primary">Sponsors</span>
 				</h2>
+				<p className="mx-auto mt-2 max-w-xl text-base text-muted-foreground">
+					Thank you to our sponsors for supporting this project!
+				</p>
 			</div>
-
-			<motion.div
-				className="flex justify-center"
-				initial={{ opacity: 0, scale: 0.9 }}
-				whileInView={{ opacity: 1, scale: 1 }}
-				viewport={{ once: true, amount: 0.5 }}
-				transition={{ duration: 0.5, delay: 0.2 }}
-			>
-				<Image
-					src="https://cdn.jsdelivr.net/gh/amanvarshney01/sponsors/sponsorkit/sponsors.svg"
-					alt="Sponsors"
-					width={1000}
-					height={500}
-					className="h-auto max-w-full md:max-w-2xl"
-					style={{ colorScheme: "light" }}
-				/>
-			</motion.div>
-
-			<div className="text-center">
+			{loadingSponsors ? (
+				<div className="flex animate-pulse items-center justify-center py-8 text-muted-foreground text-sm">
+					Loading sponsors...
+				</div>
+			) : sponsorError ? (
+				<div className="flex items-center justify-center py-8 text-destructive text-sm">
+					{sponsorError}
+				</div>
+			) : sponsors.length === 0 ? (
+				<div className="flex items-center justify-center py-8 text-muted-foreground text-sm">
+					No sponsors yet.{" "}
+					<a
+						href="https://github.com/sponsors/AmanVarshney01"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="ml-2 text-primary underline"
+					>
+						Become a Sponsor
+					</a>
+				</div>
+			) : (
+				<div className="fade-in-sponsors flex flex-wrap justify-center gap-8">
+					{sponsors.map((entry) => {
+						const since = new Date(entry.createdAt).toLocaleDateString();
+						const title = `@${entry.sponsor.login}\n${entry.sponsor.type}${
+							entry.isOneTime ? " (One-time)" : " (Monthly)"
+						}\n${entry.tierName ? `${entry.tierName}\n` : ""}Since: ${since}`;
+						return (
+							<a
+								key={entry.sponsor.login}
+								href={entry.sponsor.websiteUrl || entry.sponsor.linkUrl}
+								target="_blank"
+								rel="noopener noreferrer"
+								className={
+									"group relative flex flex-col items-center gap-2 rounded-xl border border-border bg-background/80 px-6 py-5 shadow-sm transition-all duration-200 hover:scale-105 hover:border-primary hover:shadow-lg"
+								}
+								title={title}
+								style={{ minWidth: 140, maxWidth: 180 }}
+							>
+								<div className="relative">
+									<Image
+										src={entry.sponsor.avatarUrl}
+										alt={entry.sponsor.name || entry.sponsor.login}
+										width={64}
+										height={64}
+										className="rounded-full border-2 border-border bg-background transition-colors group-hover:border-primary"
+										unoptimized
+									/>
+								</div>
+								<span className="break-all text-center font-mono text-foreground text-xs">
+									{entry.sponsor.name || entry.sponsor.login}
+								</span>
+								{entry.tierName && (
+									<span className="text-center text-[11px] text-muted-foreground">
+										{entry.tierName}
+									</span>
+								)}
+								<span className="text-center text-[11px] text-muted-foreground">
+									{entry.monthlyDollars > 0
+										? `$${entry.monthlyDollars} / mo`
+										: entry.isOneTime && entry.monthlyDollars > 0
+											? `$${entry.monthlyDollars} one-time`
+											: "Supporter"}
+								</span>
+								<span className="text-center text-[10px] text-muted-foreground">
+									{entry.isOneTime ? "One-time" : "Monthly"}
+								</span>
+							</a>
+						);
+					})}
+				</div>
+			)}
+			<div className="mt-12 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"
+					className="inline-flex items-center gap-2 rounded-lg border-2 border-primary bg-primary/10 px-8 py-3 font-mono text-lg text-primary shadow-md transition-all hover:scale-105 hover:bg-primary/20 hover:shadow-lg"
 				>
+					<svg
+						className="mr-2 h-5 w-5"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2"
+						viewBox="0 0 24 24"
+					>
+						<title>Heart in Circle</title>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							d="M12 8c-1.657 0-3 1.343-3 3 0 2.25 3 5 3 5s3-2.75 3-5c0-1.657-1.343-3-3-3z"
+						/>
+						<circle cx="12" cy="11" r="9" />
+					</svg>
 					Become a Sponsor
 				</a>
 			</div>
-		</motion.section>
+		</section>
 	);
 }

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

@@ -16,6 +16,7 @@ import {
 	isStackDefault,
 } from "@/lib/constant";
 import { stackParsers, stackQueryStatesOptions } from "@/lib/stack-url-state";
+import type { Sponsor } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import {
 	Check,
@@ -890,6 +891,9 @@ const StackBuilder = () => {
 	const [, setLastChanges] = useState<
 		Array<{ category: string; message: string }>
 	>([]);
+	const [sponsors, setSponsors] = useState<Sponsor[]>([]);
+	const [loadingSponsors, setLoadingSponsors] = useState(true);
+	const [sponsorError, setSponsorError] = useState<string | null>(null);
 
 	const sectionRefs = useRef<Record<string, HTMLElement | null>>({});
 	const contentRef = useRef<HTMLDivElement>(null);
@@ -1416,6 +1420,24 @@ const StackBuilder = () => {
 		setProjectNameError(validateProjectName(stack.projectName || ""));
 	}, [stack.projectName]);
 
+	useEffect(() => {
+		fetch(
+			"https://cdn.jsdelivr.net/gh/amanvarshney01/sponsors/sponsorkit/sponsors.json",
+		)
+			.then((res) => {
+				if (!res.ok) throw new Error("Failed to fetch sponsors");
+				return res.json();
+			})
+			.then((data) => {
+				setSponsors(Array.isArray(data) ? data : []);
+				setLoadingSponsors(false);
+			})
+			.catch(() => {
+				setSponsorError("Could not load sponsors");
+				setLoadingSponsors(false);
+			});
+	}, []);
+
 	const handleTechSelect = (
 		category: keyof typeof TECH_OPTIONS,
 		techId: string,
@@ -1873,6 +1895,75 @@ 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>
+									</h2>
+								</div>
+								{loadingSponsors ? (
+									<div className="flex items-center justify-center py-8 text-muted-foreground text-sm">
+										Loading sponsors...
+									</div>
+								) : sponsorError ? (
+									<div className="flex items-center justify-center py-8 text-destructive text-sm">
+										{sponsorError}
+									</div>
+								) : sponsors.length === 0 ? (
+									<div className="flex items-center justify-center py-8 text-muted-foreground text-sm">
+										No sponsors yet.{" "}
+										<a
+											href="https://github.com/sponsors/AmanVarshney01"
+											target="_blank"
+											rel="noopener noreferrer"
+											className="ml-2 text-primary underline"
+										>
+											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}
+													</span>
+												)}
+											</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>
 				</div>

apps/web/src/app/(home)/page.tsx

@@ -2,13 +2,12 @@
 import ShinyText from "@/app/(home)/_components/shiny-text";
 import { cn } from "@/lib/utils";
 import { motion } from "motion/react";
-import React from "react";
 import CodeContainer from "./_components/code-container";
 import CustomizableSection from "./_components/customizable-section";
 import Footer from "./_components/footer";
 import Navbar from "./_components/navbar";
 import NpmPackage from "./_components/npm-package";
-// import SponsorsSection from "./_components/SponsorsSection";
+import SponsorsSection from "./_components/sponsors-section";
 import Testimonials from "./_components/testimonials";
 
 export default function HomePage() {
@@ -161,7 +160,7 @@ export default function HomePage() {
 					<Testimonials />
 				</motion.div>
 
-				{/* <motion.div
+				<motion.div
 					className="w-full"
 					initial="hidden"
 					whileInView="visible"
@@ -169,7 +168,7 @@ export default function HomePage() {
 					variants={sectionVariants}
 				>
 					<SponsorsSection />
-				</motion.div> */}
+				</motion.div>
 			</main>
 			<Footer />
 		</>

apps/web/src/lib/types.ts

@@ -30,3 +30,20 @@ export interface TechEdge {
 	type?: string;
 	animated?: boolean;
 }
+
+export interface Sponsor {
+	sponsor: {
+		login: string;
+		name: string;
+		avatarUrl: string;
+		websiteUrl?: string;
+		linkUrl: string;
+		type: string;
+	};
+	isOneTime: boolean;
+	monthlyDollars: number;
+	privacyLevel: string;
+	tierName: string;
+	createdAt: string;
+	provider: string;
+}

bun.lock

@@ -14,7 +14,7 @@
     },
     "apps/cli": {
       "name": "create-better-t-stack",
-      "version": "2.10.0",
+      "version": "2.10.1",
       "bin": {
         "create-better-t-stack": "dist/index.js",
       },