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

redesign landing page (fifth time :)

Browse Source
This commit is contained in:
Aman Varshney
2025-05-28 10:07:10 +05:30
parent 66b52d6bfd
commit 07c8a59ef6
6 changed files with 691 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -94,7 +94,7 @@ export default function Navbar() {
: "border-transparent border-b bg-transparent", : "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"> <Link href="/" className="flex flex-shrink-0 items-center gap-2">
<Image <Image
src="/logo.svg" src="/logo.svg"

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

@@ -1,4 +1,5 @@
import type { Sponsor } from "@/lib/types"; import type { Sponsor } from "@/lib/types";
import { Github, Globe, Heart, Terminal } from "lucide-react";
import Image from "next/image"; import Image from "next/image";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -24,109 +25,192 @@ export default function SponsorsSection() {
}, []); }, []);
return ( 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">
<div className="mb-12 text-center"> <div className="mb-6 flex items-center gap-2">
<h2 className="font-bold font-mono text-3xl text-foreground tracking-tight sm:text-4xl lg:text-5xl"> <Terminal className="terminal-glow h-4 w-4 text-primary" />
<span className="text-primary">Our Sponsors</span> <span className="terminal-glow font-bold font-mono text-lg">
</h2> SPONSORS_DATABASE.JSON
<p className="mx-auto mt-4 max-w-xl text-lg text-muted-foreground"> </span>
Supported by amazing organizations and individuals. <div className="h-px flex-1 bg-border" />
</p> <span className="font-mono text-muted-foreground text-xs">
[{loadingSponsors ? "LOADING..." : sponsors.length} RECORDS]
</span>
</div> </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 ? ( {loadingSponsors ? (
<div className="flex animate-pulse items-center justify-center py-12 text-base text-muted-foreground"> <div className="terminal-block-hover rounded border border-border bg-muted/20 p-8">
Loading sponsors... <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> </div>
) : sponsorError ? ( ) : sponsorError ? (
<div className="flex items-center justify-center py-12 text-base text-destructive"> <div className="terminal-block-hover rounded border border-border bg-destructive/10 p-8">
{sponsorError} <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> </div>
) : sponsors.length === 0 ? ( ) : sponsors.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 text-base text-muted-foreground"> <div className="space-y-4">
No sponsors yet. <div className="terminal-block-hover rounded border border-border bg-muted/20 p-8">
<a <div className="text-center">
href="https://github.com/sponsors/AmanVarshney01" <div className="mb-4 flex items-center justify-center gap-2">
target="_blank" <span className="font-mono text-muted-foreground">
rel="noopener noreferrer" NO_SPONSORS_FOUND.NULL
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" </span>
> </div>
<svg <div className="flex items-center justify-center gap-2 text-sm">
className="h-4 w-4" <span className="terminal-glow text-primary">$</span>
fill="none" <span className="font-mono text-muted-foreground">
stroke="currentColor" # Be the first to support this project!
strokeWidth="2" </span>
viewBox="0 0 24 24" </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> <Heart className="h-4 w-4" />
<path <span>BECOME_SPONSOR.EXE</span>
strokeLinecap="round" </a>
strokeLinejoin="round" </div>
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>
) : ( ) : (
<div className="grid grid-cols-2 items-center justify-center gap-8 sm:grid-cols-3 lg:grid-cols-4 lg:gap-12"> <div className="space-y-6">
{sponsors.map((entry) => { <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
const since = new Date(entry.createdAt).toLocaleDateString( {sponsors.map((entry, index) => {
undefined, const since = new Date(entry.createdAt).toLocaleDateString(
{ year: "numeric", month: "short" }, undefined,
); { year: "numeric", month: "short" },
const title = `@${entry.sponsor.login} - ${entry.sponsor.type}${ );
entry.isOneTime ? " (One-time)" : " (Monthly)" return (
}\nTier: ${entry.tierName || "N/A"}\nSince: ${since}`; <div
return ( key={entry.sponsor.login}
<a className="terminal-block-hover rounded border border-border bg-background"
key={entry.sponsor.login} style={{ animationDelay: `${index * 50}ms` }}
href={entry.sponsor.websiteUrl || entry.sponsor.linkUrl} >
target="_blank" <div className="border-border border-b bg-muted/20 px-3 py-2">
rel="noopener noreferrer" <div className="flex items-center gap-2">
className="group flex flex-col items-center gap-2 text-center transition-opacity hover:opacity-80" <span className="text-primary text-xs">▶</span>
title={title} <span className="truncate font-mono font-semibold text-xs">
> [SPONSOR_{String(index + 1).padStart(3, "0")}]
<Image </span>
src={entry.sponsor.avatarUrl} <div className="ml-auto flex items-center gap-2 text-muted-foreground text-xs">
alt={entry.sponsor.name || entry.sponsor.login} <span>{entry.isOneTime ? "ONE-TIME" : "MONTHLY"}</span>
width={170} <span>•</span>
height={170} <span>SINCE {since.toUpperCase()}</span>
className="rounded-full border-2 border-border bg-background transition-colors duration-300 group-hover:border-primary" </div>
unoptimized </div>
/> </div>
<span className="truncate font-medium font-mono text-foreground text-sm group-hover:text-primary"> <div className="p-4">
{entry.sponsor.name || entry.sponsor.login} <div className="flex items-center gap-4">
</span> <div className="flex-shrink-0">
{entry.tierName && ( <Image
<span className="text-muted-foreground text-xs group-hover:text-primary/80"> src={entry.sponsor.avatarUrl}
{entry.tierName} alt={entry.sponsor.name || entry.sponsor.login}
</span> width={100}
)} height={100}
</a> 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> </div>
)} )}
{sponsors.length > 0 && ( </div>
<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>
); );
} }

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

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

411
apps/web/src/app/(home)/page.tsx
View File

@@ -1,13 +1,20 @@
"use client"; "use client";
import { Button } from "@/components/ui/button";
import { TECH_OPTIONS } from "@/lib/constant"; import { TECH_OPTIONS } from "@/lib/constant";
import { cn } from "@/lib/utils";
import discordLogo from "@/public/icon/discord.svg"; import discordLogo from "@/public/icon/discord.svg";
import { Github, Star, Terminal } from "lucide-react"; import {
Check,
ChevronRight,
Copy,
Github,
Star,
Terminal,
} from "lucide-react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import CodeContainer from "./_components/code-container";
import Footer from "./_components/footer"; import Footer from "./_components/footer";
import PackageIcon from "./_components/icons";
import Navbar from "./_components/navbar"; import Navbar from "./_components/navbar";
import NpmPackage from "./_components/npm-package"; import NpmPackage from "./_components/npm-package";
import SponsorsSection from "./_components/sponsors-section"; import SponsorsSection from "./_components/sponsors-section";
@@ -16,6 +23,14 @@ import Testimonials from "./_components/testimonials";
export default function HomePage() { export default function HomePage() {
const [stars, setStars] = useState<number | null>(null); const [stars, setStars] = useState<number | null>(null);
const [isLoadingStars, setIsLoadingStars] = useState(true); const [isLoadingStars, setIsLoadingStars] = useState(true);
const [copiedCommand, setCopiedCommand] = useState<string | null>(null);
const [selectedPM, setSelectedPM] = useState<"npm" | "pnpm" | "bun">("bun");
const commands = {
npm: "npx create-better-t-stack@latest my-app",
pnpm: "pnpm create better-t-stack@latest my-app",
bun: "bun create better-t-stack@latest my-app",
};
useEffect(() => { useEffect(() => {
async function fetchStars() { async function fetchStars() {
@@ -38,6 +53,12 @@ export default function HomePage() {
fetchStars(); fetchStars();
}, []); }, []);
const copyCommand = (command: string, packageManager: string) => {
navigator.clipboard.writeText(command);
setCopiedCommand(packageManager);
setTimeout(() => setCopiedCommand(null), 2000);
};
const frontendOptions = [ const frontendOptions = [
...TECH_OPTIONS.webFrontend.filter((option) => option.id !== "none"), ...TECH_OPTIONS.webFrontend.filter((option) => option.id !== "none"),
...TECH_OPTIONS.nativeFrontend.filter((option) => option.id !== "none"), ...TECH_OPTIONS.nativeFrontend.filter((option) => option.id !== "none"),
@@ -110,150 +131,288 @@ export default function HomePage() {
]; ];
return ( return (
<> <div className="terminal-scanlines min-h-screen bg-background font-mono">
<Navbar /> <Navbar />
<main className="min-h-svh bg-background"> <main className="terminal-matrix-bg p-6 pt-28">
<div className="min-h-svh"> <div className="mb-8 flex items-center justify-center">
<div className="relative px-4 pt-32 pb-16 sm:px-6 md:px-8"> <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-4 md:gap-6">
<div className="mx-auto max-w-4xl text-center"> <pre className="ascii-art terminal-glow text-primary text-xs leading-tight sm:text-sm">
<div> {`
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-border/50 bg-muted/50 px-3 py-1"> ██████╗ ██████╗ ██╗ ██╗
<Terminal className="h-4 w-4 text-primary" /> ██╔══██╗██╔═══██╗██║ ██║
<span className="font-medium text-sm"> ██████╔╝██║ ██║██║ ██║
CLI Tool for Developers ██╔══██╗██║ ██║██║ ██║
██║ ██║╚██████╔╝███████╗███████╗
╚═╝ ╚═╝ ╚═════╝ ╚══════╝╚══════╝`}
</pre>
<pre className="ascii-art terminal-glow text-primary text-xs leading-tight sm:text-sm">
{`
██╗ ██╗ ██████╗ ██╗ ██╗██████╗
╚██╗ ██╔╝██╔═══██╗██║ ██║██╔══██╗
╚████╔╝ ██║ ██║██║ ██║██████╔╝
╚██╔╝ ██║ ██║██║ ██║██╔══██╗
██║ ╚██████╔╝╚██████╔╝██║ ██║
╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝`}
</pre>
<pre className="ascii-art terminal-glow text-primary text-xs leading-tight sm:text-sm">
{`
██████╗ ██╗ ██╗███╗ ██╗
██╔═══██╗██║ ██║████╗ ██║
██║ ██║██║ █╗ ██║██╔██╗ ██║
██║ ██║██║███╗██║██║╚██╗██║
╚██████╔╝╚███╔███╔╝██║ ╚████║
╚═════╝ ╚══╝╚══╝ ╚═╝ ╚═══╝`}
</pre>
<pre className="ascii-art terminal-glow text-primary text-xs leading-tight sm:text-sm">
{`
███████╗████████╗ █████╗ ██████╗██╗ ██╗
██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
███████╗ ██║ ███████║██║ █████╔╝
╚════██║ ██║ ██╔══██║██║ ██╔═██╗
███████║ ██║ ██║ ██║╚██████╗██║ ██╗
╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝`}
</pre>
</div>
</div>
<div className="mb-6 text-center">
<p className="mx-auto max-w-2xl font-mono text-lg text-muted-foreground">
# Modern CLI for scaffolding end-to-end type-safe TypeScript
projects
</p>
<p className="mx-auto mt-2 max-w-2xl font-mono text-muted-foreground text-sm">
# Production-ready • Customizable • Best practices included
</p>
<NpmPackage />
</div>
<div className="terminal-block-hover mb-8 rounded border border-border bg-muted/20 p-4">
<div className="mb-4 flex items-center justify-between">
<div className="flex items-center gap-2">
<Terminal className="terminal-glow h-4 w-4 text-primary" />
<span className="terminal-glow font-semibold text-sm">
QUICK_START
</span>
</div>
<div className="flex items-center rounded border border-border bg-background p-0.5">
{(["bun", "pnpm", "npm"] as const).map((pm) => (
<button
type="button"
key={pm}
onClick={() => setSelectedPM(pm)}
className={cn(
"flex items-center gap-1.5 rounded px-2 py-1 font-mono text-xs transition-colors duration-150",
selectedPM === pm
? "terminal-glow bg-primary/20 text-primary"
: "text-muted-foreground hover:text-foreground",
)}
>
<PackageIcon pm={pm} className="h-3 w-3" />
{pm.toUpperCase()}
</button>
))}
</div>
</div>
<div className="space-y-3">
<div className="flex items-center justify-between rounded border border-border bg-background p-3">
<div className="flex items-center gap-2 text-sm">
<span className="terminal-glow text-primary">$</span>
<span className="font-mono text-foreground">
{commands[selectedPM]}
</span>
</div>
<button
type="button"
onClick={() => copyCommand(commands[selectedPM], selectedPM)}
className="terminal-block-hover flex items-center gap-1 rounded border border-border bg-muted/20 px-2 py-1 text-xs hover:bg-muted/50"
>
{copiedCommand === selectedPM ? (
<Check className="h-3 w-3 text-primary" />
) : (
<Copy className="h-3 w-3" />
)}
{copiedCommand === selectedPM ? "COPIED!" : "COPY"}
</button>
</div>
</div>
</div>
<div className="mb-12 grid grid-cols-1 gap-4 md:grid-cols-3">
<Link href="/new">
<div className="group terminal-block-hover cursor-pointer rounded border border-border bg-background p-4">
<div className="flex items-center gap-2">
<ChevronRight className="terminal-glow h-4 w-4 text-primary" />
<span className="font-mono font-semibold">
STACK_BUILDER.EXE
</span>
</div>
<p className="mt-2 font-mono text-muted-foreground text-sm">
[EXEC] Interactive configuration wizard
</p>
</div>
</Link>
<Link
href="https://github.com/amanvarshney01/create-better-t-stack"
target="_blank"
rel="noopener noreferrer"
>
<div className="group terminal-block-hover cursor-pointer rounded border border-border bg-background p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Github className="terminal-glow h-4 w-4 text-primary" />
<span className="font-mono font-semibold">
GITHUB_REPO.GIT
</span> </span>
</div> </div>
{stars !== null && !isLoadingStars && (
<div className="flex items-center gap-1 rounded border border-border bg-muted/30 px-2 py-1 font-mono text-xs">
<Star className="h-3 w-3 text-accent" />
{stars}
</div>
)}
</div> </div>
<p className="mt-2 font-mono text-muted-foreground text-sm">
<h1 className="font-bold text-5xl tracking-tight sm:text-6xl md:text-7xl lg:text-8xl"> [LINK] Star the repository on GitHub
<span className="text-foreground">Roll Your Own</span>
<br />
<span className="text-primary">Stack</span>
</h1>
<p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground sm:text-xl">
A modern CLI tool for scaffolding end-to-end type-safe
TypeScript projects with best practices and customizable
configurations.
</p> </p>
</div>
</Link>
<NpmPackage /> <Link
href="https://discord.com/invite/tMunxM5R"
target="_blank"
rel="noopener noreferrer"
>
<div className="group terminal-block-hover cursor-pointer rounded border border-border bg-background p-4">
<div className="flex items-center gap-2">
<Image src={discordLogo} alt="discord" className="h-4 w-4" />
<span className="font-mono font-semibold">
DISCORD_CHAT.IRC
</span>
</div>
<p className="mt-2 font-mono text-muted-foreground text-sm">
[JOIN] Connect to developer community
</p>
</div>
</Link>
</div>
<div className="mt-8 flex flex-col items-center justify-center gap-4"> <div className="mb-12">
<div className="flex flex-col items-center gap-3 sm:flex-row"> <div className="mb-6 flex items-center gap-2">
<Link href="/new"> <span className="terminal-glow font-bold font-mono text-lg">
<Button size="lg" className="w-full sm:w-auto"> TECH_STACK_MATRIX.DB
Stack Builder </span>
</Button> <div className="h-px flex-1 bg-border" />
</Link> <span className="font-mono text-muted-foreground text-xs">
<Link [
href="https://github.com/amanvarshney01/create-better-t-stack" {techStackCategories.reduce(
target="_blank" (acc, cat) => acc + cat.options.length,
rel="noopener noreferrer" 0,
> )}{" "}
<Button PACKAGES]
size="lg" </span>
variant="outline" </div>
className="w-full hover:bg-muted/50 hover:text-foreground sm:w-auto dark:hover:text-foreground"
disabled={isLoadingStars} <div className="terminal-block-hover rounded border border-border bg-background">
> <div className="border-border border-b bg-muted/20 px-4 py-3">
<Github className="mr-2 h-4 w-4" /> <div className="flex items-center gap-2">
Star on GitHub <Terminal className="terminal-glow h-4 w-4 text-primary" />
{stars !== null && !isLoadingStars && ( <span className="font-mono font-semibold text-sm">
<span className="ml-2 flex items-center gap-1 rounded bg-muted/30 px-1.5 py-0.5 text-xs"> /tech-stack/packages/
<Star className="h-3 w-3 text-yellow-400" /> </span>
{stars} </div>
</div>
<div className="space-y-3 p-4">
{techStackCategories.map((category, categoryIndex) => (
<div key={category.category} className="space-y-2">
<div className="directory-header flex items-center gap-2 rounded px-2 py-2 transition-colors">
<span className="font-mono font-semibold text-foreground text-sm">
{category.category.toLowerCase().replace(/\s+/g, "-")}/
</span>
<span className="font-mono text-muted-foreground text-xs">
({category.options.length} items)
</span>
</div>
<div className="ml-6 grid grid-cols-1 gap-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{category.options.map((option, optionIndex) => (
<div
key={option.id}
className="file-browser-item file-load-animation flex items-center gap-3 rounded border border-border bg-muted/10 px-3 py-2"
style={{
animationDelay: `${
categoryIndex * 100 + optionIndex * 30
}ms`,
}}
>
{option.icon !== "" && (
<Image
src={option.icon}
alt={option.name}
height={16}
width={16}
unoptimized
className="file-icon h-4 w-4 flex-shrink-0"
/>
)}
<span className="flex-1 truncate font-mono text-xs">
{option.name.toLowerCase().replace(/\s+/g, "-")}.pkg
</span> </span>
)} <span className="font-mono text-muted-foreground text-xs opacity-0 transition-opacity group-hover:opacity-100">
</Button> -rw-r--r--
</Link> </span>
<Link </div>
href="https://discord.com/invite/tMunxM5R" ))}
target="_blank" </div>
rel="noopener noreferrer"
>
<Button
size="lg"
variant="outline"
className="w-full hover:bg-muted/50 hover:text-foreground sm:w-auto dark:hover:text-foreground"
>
<Image
src={discordLogo}
alt="discord"
className="size-4"
/>
Join Discord
</Button>
</Link>
</div> </div>
<CodeContainer /> ))}
</div>
<div className="border-border border-t bg-muted/20 px-4 py-2">
<div className="flex items-center justify-between text-xs">
<span className="font-mono text-muted-foreground">
$ ls -la /tech-stack/packages/
</span>
<span className="font-mono text-muted-foreground">
{techStackCategories.length} directories,{" "}
{techStackCategories.reduce(
(acc, cat) => acc + cat.options.length,
0,
)}{" "}
files
</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="px-4 py-16 sm:px-6 md:px-8"> <div className="terminal-block-hover mb-8 rounded border border-border bg-muted/20 p-4">
<div className="mx-auto max-w-6xl"> <div className="terminal-glow mb-2 font-mono font-semibold text-sm">
<div className="mb-12 text-center"> SYSTEM_INFO.LOG
<h2 className="font-bold text-3xl tracking-tight sm:text-4xl"> </div>
Tech Stack Options <div className="grid grid-cols-1 gap-2 font-mono text-xs md:grid-cols-3">
</h2> <div>
<p className="mt-4 text-lg text-muted-foreground"> <span className="text-primary">OS:</span> TypeScript_Runtime_v5.x
Choose from modern, production-ready technologies
</p>
</div> </div>
<div>
<div className="overflow-hidden rounded-lg border"> <span className="text-primary">ARCH:</span> Full_Stack_Framework
<table className="w-full"> </div>
<thead className="bg-muted/50"> <div>
<tr> <span className="text-primary">STATUS:</span>{" "}
<th className="px-6 py-3 text-left font-medium text-muted-foreground text-sm"> <span className="terminal-glow text-accent">READY</span>
Category
</th>
<th className="px-6 py-3 text-left font-medium text-muted-foreground text-sm">
Options
</th>
</tr>
</thead>
<tbody className="divide-y divide-border">
{techStackCategories.map((category) => (
<tr key={category.category} className="hover:bg-muted/30">
<td className="px-6 py-4">
<div className="font-medium">{category.category}</div>
</td>
<td className="px-6 py-4">
<div className="flex flex-wrap gap-2">
{category.options.map((option) => (
<div
key={option.id}
className="flex items-center gap-2 rounded border bg-background px-2 py-1"
>
{option.icon !== "" && (
<Image
src={option.icon}
alt={option.name}
height={50}
width={50}
unoptimized
className="h-4 w-4"
/>
)}
<span className="text-sm">{option.name}</span>
</div>
))}
</div>
</td>
</tr>
))}
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
<Testimonials /> <Testimonials />
<SponsorsSection /> <SponsorsSection />
</main> </main>
<Footer /> <Footer />
</> </div>
); );
} }

118
apps/web/src/app/global.css
View File

@@ -5,9 +5,9 @@
@custom-variant dark (&:where(.dark, .dark *)); @custom-variant dark (&:where(.dark, .dark *));
.bg-noise { /* .bg-noise {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
} } */
.react-tweet-theme { .react-tweet-theme {
--tweet-container-margin: 0 !important; --tweet-container-margin: 0 !important;
@@ -274,3 +274,115 @@
letter-spacing: var(--tracking-normal); letter-spacing: var(--tracking-normal);
} }
} }
/* Terminal-style animations and effects */
.terminal-cursor {
animation: blink 1s infinite;
border-right: 2px solid currentColor;
padding-right: 2px;
}
@keyframes blink {
0%,
50% {
border-color: transparent;
}
51%,
100% {
border-color: currentColor;
}
}
.terminal-glow {
text-shadow: 0 0 5px currentColor;
}
.terminal-scanlines {
position: relative;
}
.terminal-scanlines::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255, 255, 255, 0.03) 2px,
rgba(255, 255, 255, 0.03) 4px
);
pointer-events: none;
}
.terminal-block-hover {
transition: all 0.2s ease;
border: 1px solid var(--border);
}
.terminal-block-hover:hover {
border-color: var(--primary);
box-shadow: 0 0 10px rgba(136, 57, 239, 0.3);
transform: translateY(-1px);
}
/* .terminal-matrix-bg {
background: linear-gradient(90deg, transparent 98%, var(--border) 100%),
linear-gradient(0deg, transparent 98%, var(--border) 100%);
background-size: 20px 20px;
} */
.ascii-art {
font-family: "Courier New", monospace;
line-height: 1;
letter-spacing: 0;
}
.terminal-prompt::before {
content: "> ";
color: var(--primary);
font-weight: bold;
}
/* File browser specific styles */
.file-browser-item {
transition: all 0.15s ease;
position: relative;
}
.file-browser-item:hover {
background-color: var(--accent);
color: var(--accent-foreground);
transform: translateX(2px);
}
.file-browser-item:hover .file-icon {
filter: brightness(1.2);
}
.directory-header {
position: relative;
cursor: pointer;
}
.directory-header:hover {
background-color: var(--muted);
}
@keyframes file-load {
0% {
opacity: 0;
transform: translateX(-10px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.file-load-animation {
animation: file-load 0.3s ease-out forwards;
}