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

Add useSortedClasses rule to Biome configuration

Browse Source
This commit is contained in:
Aman Varshney
2025-04-04 12:40:46 +05:30
parent 73fc9880cd
commit b3c746cd49
23 changed files with 293 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/ten-teeth-help.md Normal file
View File

@@ -0,0 +1,5 @@
---
"create-better-t-stack": patch
---
Add useSortedClasses rule to Biome configuration

5
apps/cli/package.json
View File

@@ -7,10 +7,7 @@
"bin": {
"create-better-t-stack": "dist/index.js"
},
"files": [
"dist",
"template"
],
"files": ["template", "dist"],
"keywords": [
"typescript",
"scaffold",

2
apps/cli/src/helpers/db-setup.ts
View File

@@ -65,7 +65,7 @@ export async function setupDatabase(
orm === "prisma" &&
setupPrismaPostgresDb
) {
await setupPrismaPostgres(projectDir, true, packageManager);
await setupPrismaPostgres(projectDir, packageManager);
}
}
}

2
apps/cli/src/helpers/post-installation.ts
View File

@@ -68,7 +68,7 @@ function getNativeInstructions(): string {
}
function getLintingInstructions(runCmd?: string): string {
return `${pc.bold("\nLinting and formatting:")}\n${pc.cyan("•")} Format and lint fix: ${`${runCmd} check`}\n\n`;
return `${pc.bold("Linting and formatting:")}\n${pc.cyan("•")} Format and lint fix: ${`${runCmd} check`}\n\n`;
}
function getDatabaseInstructions(

11
apps/cli/src/helpers/prisma-postgres-setup.ts
View File

@@ -101,21 +101,10 @@ DATABASE_URL="your_database_url"`);
export async function setupPrismaPostgres(
projectDir: string,
shouldSetupPrisma: boolean,
packageManager: ProjectPackageManager = "npm",
) {
const serverDir = path.join(projectDir, "apps/server");
if (!shouldSetupPrisma) {
await writeEnvFile(projectDir);
log.info(
pc.blue(
"Using default Postgres configuration. You'll need to provide your own database.",
),
);
return;
}
try {
const config = await initPrismaDatabase(serverDir, packageManager);

9
apps/cli/template/with-biome/biome.json
View File

@@ -31,6 +31,15 @@
"recommended": true,
"correctness": {
"useExhaustiveDependencies": "info"
},
"nursery": {
"useSortedClasses": {
"level": "warn",
"fix": "safe",
"options": {
"functions": ["clsx", "cva", "cn"]
}
}
}
}
},

8
apps/web/src/app/(home)/_components/BackgroundGradients.tsx
View File

@@ -2,13 +2,13 @@ import React from "react";
const BackgroundGradients = () => {
return (
<div className="fixed inset-0 -z-10 overflow-hidden">
<div className="-z-10 fixed inset-0 overflow-hidden">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(59,130,246,0.04)_0%,transparent_40%),radial-gradient(circle_at_70%_60%,rgba(79,70,229,0.03)_0%,transparent_40%)] dark:bg-[radial-gradient(circle_at_30%_20%,rgba(59,130,246,0.1)_0%,transparent_40%),radial-gradient(circle_at_70%_60%,rgba(79,70,229,0.08)_0%,transparent_40%)]" />
<div className="absolute inset-0 opacity-20 dark:opacity-25">
<div className="absolute h-28 w-28 rounded-full bg-blue-300/30 dark:bg-blue-500/20 blur-[120px] top-1/4 left-1/3" />
<div className="absolute h-32 w-32 rounded-full bg-indigo-300/30 dark:bg-indigo-500/20 blur-[140px] top-2/3 right-1/4" />
<div className="absolute top-1/4 left-1/3 h-28 w-28 rounded-full bg-blue-300/30 blur-[120px] dark:bg-blue-500/20" />
<div className="absolute top-2/3 right-1/4 h-32 w-32 rounded-full bg-indigo-300/30 blur-[140px] dark:bg-indigo-500/20" />
</div>
<div className="absolute inset-0 bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#1f2937_1px,transparent_1px),linear-gradient(to_bottom,#1f2937_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-[0.15]" />
<div className="absolute inset-0 bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:4rem_4rem] opacity-[0.15] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] dark:bg-[linear-gradient(to_right,#1f2937_1px,transparent_1px),linear-gradient(to_bottom,#1f2937_1px,transparent_1px)]" />
</div>
);
};

14
apps/web/src/app/(home)/_components/CenterLines.tsx
View File

@@ -3,18 +3,8 @@ import React from "react";
const CenterLines = () => {
return (
<>
<div
className="absolute top-3/4 -translate-y-1/2 left-0 w-80 h-14
rounded-bl-3xl transform rotate-180
border-b-2 border-l-2 border-slate-700 dark:border-slate-300
shadow-lg backdrop-blur-sm"
/>
<div
className="absolute top-3/4 -translate-y-1/2 right-0 w-80 h-14
rounded-br-3xl transform rotate-180
border-b-2 border-r-2 border-slate-700 dark:border-slate-300
shadow-lg backdrop-blur-sm"
/>
<div className="-translate-y-1/2 absolute top-3/4 left-0 h-14 w-80 rotate-180 transform rounded-bl-3xl border-slate-700 border-b-2 border-l-2 shadow-lg backdrop-blur-sm dark:border-slate-300" />
<div className="-translate-y-1/2 absolute top-3/4 right-0 h-14 w-80 rotate-180 transform rounded-br-3xl border-slate-700 border-r-2 border-b-2 shadow-lg backdrop-blur-sm dark:border-slate-300" />
</>
);
};

80
apps/web/src/app/(home)/_components/CodeContainer.tsx
View File

@@ -53,15 +53,15 @@ const CodeContainer = () => {
}, [typingComplete, currentStep]);
return (
<div className="w-full max-w-3xl mx-auto mt-4 sm:mt-8">
<div className="rounded-xl overflow-hidden shadow-xl border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-black text-gray-800 dark:text-white">
<div className="bg-gray-200 dark:bg-gray-800 px-3 sm:px-4 py-2 flex items-center justify-between">
<div className="mx-auto mt-4 w-full max-w-3xl sm:mt-8">
<div className="overflow-hidden rounded-xl border border-gray-300 bg-gray-100 text-gray-800 shadow-xl dark:border-gray-700 dark:bg-black dark:text-white">
<div className="flex items-center justify-between bg-gray-200 px-3 py-2 sm:px-4 dark:bg-gray-800">
<div className="flex space-x-2">
<div className="w-3 h-3 rounded-full bg-red-500" />
<div className="w-3 h-3 rounded-full bg-yellow-500" />
<div className="w-3 h-3 rounded-full bg-green-500" />
<div className="h-3 w-3 rounded-full bg-red-500" />
<div className="h-3 w-3 rounded-full bg-yellow-500" />
<div className="h-3 w-3 rounded-full bg-green-500" />
</div>
<div className="font-mono text-[10px] sm:text-xs text-gray-600 dark:text-gray-400 hidden xs:block">
<div className="xs:block hidden font-mono text-[10px] text-gray-600 sm:text-xs dark:text-gray-400">
Quick Install Terminal
</div>
@@ -69,16 +69,16 @@ const CodeContainer = () => {
<button
type="button"
onClick={() => setIsOpen(!isOpen)}
className="flex items-center px-1.5 sm:px-2 py-1 text-[10px] sm:text-xs bg-gray-300/50 dark:bg-gray-800/50 rounded border border-gray-300 dark:border-gray-700 hover:bg-gray-300/80 dark:hover:bg-gray-700/50"
className="flex items-center rounded border border-gray-300 bg-gray-300/50 px-1.5 py-1 text-[10px] hover:bg-gray-300/80 sm:px-2 sm:text-xs dark:border-gray-700 dark:bg-gray-800/50 dark:hover:bg-gray-700/50"
>
<Terminal className="w-3 h-3 mr-1 text-gray-600 dark:text-gray-400">
<Terminal className="mr-1 h-3 w-3 text-gray-600 dark:text-gray-400">
<title>Package Manager</title>
</Terminal>
<span className="text-gray-700 dark:text-gray-300 mr-1">
<span className="mr-1 text-gray-700 dark:text-gray-300">
{selectedPM}
</span>
<svg
className="w-3 h-3 text-gray-700 dark:text-gray-400"
className="h-3 w-3 text-gray-700 dark:text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -97,7 +97,7 @@ const CodeContainer = () => {
<motion.div
initial={{ opacity: 0, y: -5 }}
animate={{ opacity: 1, y: 0 }}
className="absolute right-0 mt-1 w-32 sm:w-36 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-md shadow-lg z-50"
className="absolute right-0 z-50 mt-1 w-32 rounded-md border border-gray-300 bg-white shadow-lg sm:w-36 dark:border-gray-700 dark:bg-gray-900"
>
<ul>
{(Object.keys(commands) as Array<"npm" | "pnpm" | "bun">).map(
@@ -105,10 +105,10 @@ const CodeContainer = () => {
<li key={pm}>
<button
type="button"
className={`block w-full text-left px-3 py-1.5 text-[10px] sm:text-xs ${
className={`block w-full px-3 py-1.5 text-left text-[10px] sm:text-xs ${
selectedPM === pm
? "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-l-2 border-blue-500"
: "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
? "border-blue-500 border-l-2 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
: "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
}`}
onClick={() => copyToClipboard(pm)}
>
@@ -129,10 +129,10 @@ const CodeContainer = () => {
</div>
</div>
<div className="p-3 sm:p-4 font-mono text-xs sm:text-sm bg-gray-50 dark:bg-gray-900 overflow-x-auto">
<div className="overflow-x-auto bg-gray-50 p-3 font-mono text-xs sm:p-4 sm:text-sm dark:bg-gray-900">
<div className="flex items-center">
<div className="flex-grow overflow-x-auto">
<span className="text-green-600 dark:text-green-400 mr-2">$</span>
<span className="mr-2 text-green-600 dark:text-green-400">$</span>
<span className="text-gray-700 dark:text-gray-300">
{commands[selectedPM]}
</span>
@@ -140,7 +140,7 @@ const CodeContainer = () => {
className={
typingComplete
? "hidden"
: "text-blue-600 dark:text-blue-500 animate-pulse ml-1"
: "ml-1 animate-pulse text-blue-600 dark:text-blue-500"
}
>
▌
@@ -151,15 +151,15 @@ const CodeContainer = () => {
whileTap={{ scale: 0.95 }}
type="button"
onClick={() => copyToClipboard(selectedPM)}
className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors flex-shrink-0 ml-2"
className="ml-2 flex-shrink-0 text-gray-600 transition-colors hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
title="Copy command"
>
{copied ? (
<Check className="w-4 h-4">
<Check className="h-4 w-4">
<title>Copied!</title>
</Check>
) : (
<ClipboardCopy className="w-4 h-4">
<ClipboardCopy className="h-4 w-4">
<title>Copy to clipboard</title>
</ClipboardCopy>
)}
@@ -172,7 +172,7 @@ const CodeContainer = () => {
animate={{ opacity: 1 }}
className="overflow-x-auto"
>
<div className="mt-3 pl-2 sm:pl-4 text-amber-600 dark:text-amber-400">
<div className="mt-3 pl-2 text-amber-600 sm:pl-4 dark:text-amber-400">
{currentStep >= 1 && (
<motion.p
initial={{ opacity: 0, y: -5 }}
@@ -234,9 +234,9 @@ const CodeContainer = () => {
initial={{ opacity: 0, x: -5 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.4 }}
className="text-blue-600 dark:text-blue-400 flex items-center"
className="flex items-center text-blue-600 dark:text-blue-400"
>
<CircleCheck className="w-4 h-4 mr-1 flex-shrink-0">
<CircleCheck className="mr-1 h-4 w-4 flex-shrink-0">
<title>Completed</title>
</CircleCheck>
<span>Creating project structure</span>
@@ -247,9 +247,9 @@ const CodeContainer = () => {
initial={{ opacity: 0, x: -5 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.5 }}
className="text-blue-600 dark:text-blue-400 flex items-center"
className="flex items-center text-blue-600 dark:text-blue-400"
>
<CircleCheck className="w-4 h-4 mr-1 flex-shrink-0">
<CircleCheck className="mr-1 h-4 w-4 flex-shrink-0">
<title>Completed</title>
</CircleCheck>
<span>Installing dependencies</span>
@@ -265,9 +265,9 @@ const CodeContainer = () => {
initial={{ opacity: 0, x: -5 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.7 }}
className="text-blue-600 dark:text-blue-400 flex items-center"
className="flex items-center text-blue-600 dark:text-blue-400"
>
<CircleCheck className="w-4 h-4 mr-1 flex-shrink-0">
<CircleCheck className="mr-1 h-4 w-4 flex-shrink-0">
<title>Completed</title>
</CircleCheck>
<span>Setting up database schema</span>
@@ -276,9 +276,9 @@ const CodeContainer = () => {
initial={{ opacity: 0, x: -5 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.8 }}
className="text-blue-600 dark:text-blue-400 flex items-center"
className="flex items-center text-blue-600 dark:text-blue-400"
>
<CircleCheck className="w-4 h-4 mr-1 flex-shrink-0">
<CircleCheck className="mr-1 h-4 w-4 flex-shrink-0">
<title>Completed</title>
</CircleCheck>
<span>Configuring authentication</span>
@@ -287,10 +287,10 @@ const CodeContainer = () => {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.9 }}
className="mt-4 flex flex-col xs:flex-row xs:items-center px-2 py-2 rounded bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300 border border-blue-300 dark:border-blue-800/30 text-[10px] sm:text-xs"
className="mt-4 flex xs:flex-row flex-col xs:items-center rounded border border-blue-300 bg-blue-100 px-2 py-2 text-[10px] text-blue-800 sm:text-xs dark:border-blue-800/30 dark:bg-blue-900/20 dark:text-blue-300"
>
<svg
className="w-4 h-4 mb-1 xs:mb-0 xs:mr-2 text-blue-600 dark:text-blue-400 flex-shrink-0"
className="xs:mr-2 mb-1 xs:mb-0 h-4 w-4 flex-shrink-0 text-blue-600 dark:text-blue-400"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
@@ -304,11 +304,11 @@ const CodeContainer = () => {
</svg>
<div className="flex flex-wrap">
<span className="mr-1">Project ready! Run</span>
<code className="px-1 py-0.5 bg-blue-200 dark:bg-blue-800/50 rounded mb-1 xs:mb-0 mr-1">
<code className="mr-1 mb-1 xs:mb-0 rounded bg-blue-200 px-1 py-0.5 dark:bg-blue-800/50">
cd my-better-t-app
</code>
<span className="mr-1">and</span>
<code className="px-1 py-0.5 bg-blue-200 dark:bg-blue-800/50 rounded">
<code className="rounded bg-blue-200 px-1 py-0.5 dark:bg-blue-800/50">
{selectedPM === "npm" && "npm run dev"}
{selectedPM === "pnpm" && "pnpm dev"}
{selectedPM === "bun" && "bun dev"}
@@ -322,22 +322,22 @@ const CodeContainer = () => {
)}
<div
className={`flex mt-4 ${
className={`mt-4 flex ${
currentStep >= 5 && typingComplete ? "" : "hidden"
}`}
>
<span className="text-green-600 dark:text-green-400 mr-2">$</span>
<span className="text-blue-600 dark:text-blue-500 animate-pulse">
<span className="mr-2 text-green-600 dark:text-green-400">$</span>
<span className="animate-pulse text-blue-600 dark:text-blue-500">
▌
</span>
</div>
</div>
<div className="bg-gray-200 dark:bg-gray-900 border-t border-gray-300 dark:border-gray-700 px-2 sm:px-4 py-2">
<div className="flex items-center justify-center text-[10px] sm:text-xs text-gray-600 dark:text-gray-400 text-center">
<div className="border-gray-300 border-t bg-gray-200 px-2 py-2 sm:px-4 dark:border-gray-700 dark:bg-gray-900">
<div className="flex items-center justify-center text-center text-[10px] text-gray-600 sm:text-xs dark:text-gray-400">
<span className="inline-flex flex-wrap items-center justify-center gap-1">
<span>For custom options, use</span>
<code className="px-1 py-0.5 bg-gray-300 dark:bg-gray-700 rounded whitespace-nowrap">
<code className="whitespace-nowrap rounded bg-gray-300 px-1 py-0.5 dark:bg-gray-700">
{selectedPM === "npm" && "npx"}
{selectedPM === "pnpm" && "pnpm dlx"}
{selectedPM === "bun" && "bunx"} create-better-t-stack

10
apps/web/src/app/(home)/_components/CommandDisplay.tsx
View File

@@ -17,17 +17,17 @@ export function CommandDisplay({ command }: CommandDisplayProps) {
};
return (
<div className="relative group">
<div className="dark:bg-gray-950/20 bg-gray-100/80 w-fit backdrop-blur-xl border border-gray-200 dark:border-gray-800 rounded-lg p-4 font-mono text-sm text-gray-800 dark:text-gray-300 overflow-x-auto">
<div className="group relative">
<div className="w-fit overflow-x-auto rounded-lg border border-gray-200 bg-gray-100/80 p-4 font-mono text-gray-800 text-sm backdrop-blur-xl dark:border-gray-800 dark:bg-gray-950/20 dark:text-gray-300">
<button
type="button"
onClick={copyToClipboard}
className="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors"
className="-translate-y-1/2 absolute top-1/2 right-4 rounded-md p-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-800"
>
{copied ? (
<Check className="w-4 h-4 text-green-500" />
<Check className="h-4 w-4 text-green-500" />
) : (
<Copy className="w-4 h-4 text-gray-500 dark:text-gray-400" />
<Copy className="h-4 w-4 text-gray-500 dark:text-gray-400" />
)}
</button>
<pre className="pr-12 max-sm:text-xs">{command}</pre>

32
apps/web/src/app/(home)/_components/CustomizableSection.tsx
View File

@@ -4,8 +4,8 @@ import StackArchitect from "./StackArchitech";
export default function CustomizableSection() {
return (
<section className="w-full max-w-7xl mx-auto space-y-16 mt-20 relative z-10 px-4 sm:px-6">
<div className="text-center space-y-8 relative">
<section className="relative z-10 mx-auto mt-20 w-full max-w-7xl space-y-16 px-4 sm:px-6">
<div className="relative space-y-8 text-center">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -13,15 +13,15 @@ export default function CustomizableSection() {
transition={{ duration: 0.5 }}
className="relative"
>
<h2 className="text-3xl sm:text-4xl font-bold">
<span className="text-blue-500 dark:text-blue-400 font-mono mr-1">
<h2 className="font-bold text-3xl sm:text-4xl">
<span className="mr-1 font-mono text-blue-500 dark:text-blue-400">
{">"}
</span>
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-blue-400 dark:to-indigo-500">
<span className="bg-gradient-to-r from-blue-500 to-indigo-600 bg-clip-text text-transparent dark:from-blue-400 dark:to-indigo-500">
Your Stack, Your Choice
</span>
</h2>
<div className="absolute -inset-x-1/4 -inset-y-1/2 bg-gradient-to-r from-blue-300/0 via-blue-300/10 to-blue-300/0 dark:from-blue-800/0 dark:via-blue-800/10 dark:to-blue-800/0 blur-3xl -z-10" />
<div className="-inset-x-1/4 -inset-y-1/2 -z-10 absolute bg-gradient-to-r from-blue-300/0 via-blue-300/10 to-blue-300/0 blur-3xl dark:from-blue-800/0 dark:via-blue-800/10 dark:to-blue-800/0" />
</motion.div>
<motion.div
@@ -29,33 +29,33 @@ export default function CustomizableSection() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.5, delay: 0.2 }}
className="space-y-6 max-w-3xl mx-auto"
className="mx-auto max-w-3xl space-y-6"
>
<p className="text-lg sm:text-xl text-gray-700 dark:text-gray-300 leading-relaxed font-mono">
<p className="font-mono text-gray-700 text-lg leading-relaxed sm:text-xl dark:text-gray-300">
Configure your ideal TypeScript environment with all the options you
need
</p>
<div className="flex flex-wrap justify-center gap-2 sm:gap-3 text-xs sm:text-sm text-gray-700 dark:text-gray-300">
<div className="px-3 py-1.5 bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-md flex items-center gap-1.5 transition-colors shadow-sm">
<div className="flex flex-wrap justify-center gap-2 text-gray-700 text-xs sm:gap-3 sm:text-sm dark:text-gray-300">
<div className="flex items-center gap-1.5 rounded-md border border-gray-200 bg-gray-100 px-3 py-1.5 shadow-sm transition-colors dark:border-gray-800 dark:bg-gray-900/50">
<Terminal className="h-3.5 w-3.5">
<title>Runtime Options</title>
</Terminal>
<span>--runtime</span>
</div>
<div className="px-3 py-1.5 bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-md flex items-center gap-1.5 transition-colors shadow-sm">
<div className="flex items-center gap-1.5 rounded-md border border-gray-200 bg-gray-100 px-3 py-1.5 shadow-sm transition-colors dark:border-gray-800 dark:bg-gray-900/50">
<Code className="h-3.5 w-3.5">
<title>Framework Options</title>
</Code>
<span>--framework</span>
</div>
<div className="px-3 py-1.5 bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-md flex items-center gap-1.5 transition-colors shadow-sm">
<div className="flex items-center gap-1.5 rounded-md border border-gray-200 bg-gray-100 px-3 py-1.5 shadow-sm transition-colors dark:border-gray-800 dark:bg-gray-900/50">
<TerminalSquare className="h-3.5 w-3.5">
<title>Database Options</title>
</TerminalSquare>
<span>--database</span>
</div>
<div className="px-3 py-1.5 bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-md flex items-center gap-1.5 transition-colors shadow-sm">
<div className="flex items-center gap-1.5 rounded-md border border-gray-200 bg-gray-100 px-3 py-1.5 shadow-sm transition-colors dark:border-gray-800 dark:bg-gray-900/50">
<Sliders className="h-3.5 w-3.5">
<title>Addon Options</title>
</Sliders>
@@ -69,7 +69,7 @@ export default function CustomizableSection() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.4, delay: 0.3 }}
className="flex flex-wrap justify-center gap-2 sm:gap-3 pt-2"
className="flex flex-wrap justify-center gap-2 pt-2 sm:gap-3"
>
<Badge color="amber">Bun or Node</Badge>
<Badge color="blue">Hono or Elysia</Badge>
@@ -87,7 +87,7 @@ export default function CustomizableSection() {
transition={{ duration: 0.6, delay: 0.2 }}
className="relative"
>
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 via-transparent to-indigo-500/5 blur-3xl -z-10" />
<div className="-z-10 absolute inset-0 bg-gradient-to-r from-blue-500/5 via-transparent to-indigo-500/5 blur-3xl" />
<StackArchitect />
</motion.div>
</section>
@@ -113,7 +113,7 @@ function Badge({
return (
<span
className={`px-2.5 py-1 rounded-full text-xs font-medium border ${
className={`rounded-full border px-2.5 py-1 font-medium text-xs ${
colorMap[color as keyof typeof colorMap]
} shadow-sm`}
>

44
apps/web/src/app/(home)/_components/FeaturedSection.tsx
View File

@@ -4,8 +4,8 @@ import React from "react";
const Featured = () => {
return (
<>
<div className="w-full max-w-6xl mx-auto py-24 relative z-50">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="relative z-50 mx-auto w-full max-w-6xl py-24">
<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
{[
{
icon: Shield,
@@ -28,11 +28,11 @@ const Featured = () => {
].map((feature) => (
<div
key={feature.title}
className="relative group p-6 bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-700 transition-all"
className="group relative rounded-xl border border-gray-200 bg-white p-6 transition-all hover:border-gray-300 dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-gray-700"
>
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl" />
<feature.icon className="w-10 h-10 text-blue-500 dark:text-blue-400 mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 transition-opacity group-hover:opacity-100" />
<feature.icon className="mb-4 h-10 w-10 text-blue-500 dark:text-blue-400" />
<h3 className="mb-2 font-semibold text-gray-900 text-xl dark:text-white">
{feature.title}
</h3>
<p className="text-gray-600 dark:text-gray-400">
@@ -43,19 +43,19 @@ const Featured = () => {
</div>
</div>
<div className="w-full bg-gray-50 dark:bg-gray-900/50 border-y border-gray-200 dark:border-gray-800 relative z-50">
<div className="max-w-6xl mx-auto py-24">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
<div className="relative z-50 w-full border-gray-200 border-y bg-gray-50 dark:border-gray-800 dark:bg-gray-900/50">
<div className="mx-auto max-w-6xl py-24">
<div className="mb-12 text-center">
<h2 className="mb-4 font-bold text-3xl text-gray-900 md:text-4xl dark:text-white">
Write Better Code, Faster
</h2>
<p className="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
<p className="mx-auto max-w-2xl text-gray-600 dark:text-gray-400">
Leverage the power of TypeScript with our carefully selected tools
and frameworks.
</p>
</div>
<div className="grid md:grid-cols-2 gap-12 items-center">
<div className="grid items-center gap-12 md:grid-cols-2">
<div className="space-y-6">
{[
{
@@ -76,11 +76,11 @@ const Featured = () => {
].map((item) => (
<div
key={item.title}
className="flex items-start space-x-4 p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors"
className="flex items-start space-x-4 rounded-lg p-4 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800/50"
>
<ArrowRight className="w-6 h-6 text-blue-500 dark:text-blue-400 mt-1" />
<ArrowRight className="mt-1 h-6 w-6 text-blue-500 dark:text-blue-400" />
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
<h3 className="font-semibold text-gray-900 text-lg dark:text-white">
{item.title}
</h3>
<p className="text-gray-600 dark:text-gray-400">
@@ -93,8 +93,8 @@ const Featured = () => {
<div className="relative">
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 blur-xl" />
<div className="relative bg-white dark:bg-gray-900 rounded-lg p-6 border border-gray-200 dark:border-gray-800">
<pre className="text-sm text-gray-700 dark:text-gray-300 overflow-x-auto">
<div className="relative rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
<pre className="overflow-x-auto text-gray-700 text-sm dark:text-gray-300">
<code>{`// Type-safe API endpoint
export const userRouter = router({
get: publicProcedure
@@ -115,20 +115,20 @@ export const userRouter = router({
</div>
</div>
<div className="w-full max-w-6xl mx-auto py-24 text-center relative z-50">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
<div className="relative z-50 mx-auto w-full max-w-6xl py-24 text-center">
<h2 className="mb-6 font-bold text-3xl text-gray-900 md:text-4xl dark:text-white">
Ready to Build Something Amazing?
</h2>
<p className="text-gray-600 dark:text-gray-400 max-w-xl mx-auto mb-8">
<p className="mx-auto mb-8 max-w-xl text-gray-600 dark:text-gray-400">
Start your next project with Better-T Stack and experience the future
of web development.
</p>
<button
type="button"
className="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full font-semibold transition-colors inline-flex items-center group"
className="group inline-flex items-center rounded-full bg-blue-600 px-8 py-3 font-semibold text-white transition-colors hover:bg-blue-700"
>
Get Started
<ArrowRight className="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform" />
<ArrowRight className="ml-2 h-5 w-5 transform transition-transform group-hover:translate-x-1" />
</button>
</div>
</>

36
apps/web/src/app/(home)/_components/Footer.tsx
View File

@@ -3,14 +3,14 @@ import Link from "next/link";
const Footer = () => {
return (
<footer className="relative w-full font-mono border-t border-gray-200 dark:border-gray-800">
<div className="max-w-6xl mx-auto px-4 sm:px-6 py-12">
<div className="grid md:grid-cols-3 gap-8 mb-12">
<footer className="relative w-full border-gray-200 border-t font-mono dark:border-gray-800">
<div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
<div className="mb-12 grid gap-8 md:grid-cols-3">
<div>
<h3 className="text-gray-900 dark:text-white font-bold mb-4 text-lg flex items-center gap-2">
<h3 className="mb-4 flex items-center gap-2 font-bold text-gray-900 text-lg dark:text-white">
<span>Better-T Stack</span>
</h3>
<p className="text-gray-600 dark:text-gray-400 leading-relaxed">
<p className="text-gray-600 leading-relaxed dark:text-gray-400">
Type-safe, modern TypeScript scaffolding for full-stack web
development
</p>
@@ -19,7 +19,7 @@ const Footer = () => {
<Link
href="https://github.com/better-t-stack/create-better-t-stack"
target="_blank"
className="text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors"
className="text-gray-500 transition-colors hover:text-gray-900 dark:hover:text-white"
aria-label="GitHub"
>
<Github size={18} />
@@ -27,7 +27,7 @@ const Footer = () => {
<Link
href="https://www.npmjs.com/package/create-better-t-stack"
target="_blank"
className="text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors"
className="text-gray-500 transition-colors hover:text-gray-900 dark:hover:text-white"
aria-label="NPM"
>
<svg
@@ -44,15 +44,15 @@ const Footer = () => {
</div>
<div>
<h3 className="text-gray-900 dark:text-white font-bold mb-4 text-lg">
<h3 className="mb-4 font-bold text-gray-900 text-lg dark:text-white">
Resources
</h3>
<ul className="text-gray-600 dark:text-gray-400 space-y-2.5">
<ul className="space-y-2.5 text-gray-600 dark:text-gray-400">
<li>
<Link
target="_blank"
href="https://github.com/better-t-stack/create-better-t-stack"
className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
className="transition-colors hover:text-blue-600 dark:hover:text-blue-400"
>
GitHub Repository
</Link>
@@ -61,7 +61,7 @@ const Footer = () => {
<Link
target="_blank"
href="https://www.npmjs.com/package/create-better-t-stack"
className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
className="transition-colors hover:text-blue-600 dark:hover:text-blue-400"
>
NPM Package
</Link>
@@ -70,7 +70,7 @@ const Footer = () => {
<Link
target="_blank"
href="https://my-better-t-app-client.pages.dev/"
className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
className="transition-colors hover:text-blue-600 dark:hover:text-blue-400"
>
Demo Application
</Link>
@@ -88,12 +88,12 @@ const Footer = () => {
</div>
<div>
<h3 className="text-gray-900 dark:text-white font-bold mb-4 text-lg">
<h3 className="mb-4 font-bold text-gray-900 text-lg dark:text-white">
Contact
</h3>
<div className="text-gray-600 dark:text-gray-400 space-y-2.5">
<div className="space-y-2.5 text-gray-600 dark:text-gray-400">
<p className="flex items-center">
<span className="font-mono bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm mr-2">
<span className="mr-2 rounded bg-gray-100 px-2 py-1 font-mono text-sm dark:bg-gray-800">
$
</span>
<span>amanvarshney.work@gmail.com</span>
@@ -106,13 +106,13 @@ const Footer = () => {
</div>
</div>
<div className="mt-12 pt-6 border-t border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row justify-between items-center gap-4">
<div className="mt-12 flex flex-col items-center justify-between gap-4 border-gray-200 border-t pt-6 sm:flex-row dark:border-gray-800">
<p className="text-gray-500 text-sm">
© {new Date().getFullYear()} Better-T Stack. All rights reserved.
</p>
<p className="text-gray-500 text-sm flex items-center gap-1.5">
<p className="flex items-center gap-1.5 text-gray-500 text-sm">
Built with
<span className="bg-gradient-to-r from-blue-500 to-indigo-600 bg-clip-text text-transparent font-medium">
<span className="bg-gradient-to-r from-blue-500 to-indigo-600 bg-clip-text font-medium text-transparent">
TypeScript
</span>
</p>

86
apps/web/src/app/(home)/_components/Navbar.tsx
View File

@@ -47,10 +47,10 @@ const Navbar = () => {
return (
<>
<nav
className={`fixed top-0 right-0 z-[100] w-screen px-4 sm:px-8 py-4 flex justify-between items-center transition-all duration-300 ${
className={`fixed top-0 right-0 z-[100] flex w-screen items-center justify-between px-4 py-4 transition-all duration-300 sm:px-8 ${
scrolled
? "bg-transparent border-transparent"
: "dark:bg-gray-950/80 bg-gray-50/80 backdrop-blur-xl border-b border-gray-200 dark:border-gray-800/50"
? "border-transparent bg-transparent"
: "border-gray-200 border-b bg-gray-50/80 backdrop-blur-xl dark:border-gray-800/50 dark:bg-gray-950/80"
}`}
>
<div
@@ -58,22 +58,22 @@ const Navbar = () => {
scrolled ? "opacity-0" : "opacity-100"
}`}
>
<div className="w-4 h-4 rounded-sm flex items-center justify-center">
<span className="dark:text-blue-500 text-blue-600 text-md">$_</span>
<div className="flex h-4 w-4 items-center justify-center rounded-sm">
<span className="text-blue-600 text-md dark:text-blue-500">$_</span>
</div>
<span className="text-gray-600 dark:text-gray-100 font-semibold text-md">
<span className="font-semibold text-gray-600 text-md dark:text-gray-100">
Better-T Stack
</span>
</div>
<div className="hidden md:block absolute left-1/2 transform -translate-x-1/2">
<div className="-translate-x-1/2 absolute left-1/2 hidden transform md:block">
<div
className={`flex items-center backdrop-blur-sm bg-gray-100/90 dark:bg-gray-900/90 rounded-lg border border-gray-200 dark:border-gray-800 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${
className={`relative flex items-center rounded-lg border border-gray-200 bg-gray-100/90 px-1.5 py-1 text-sm backdrop-blur-sm transition-all duration-500 ease-out dark:border-gray-800 dark:bg-gray-900/90 ${
scrolled ? "w-[350px]" : "w-[240px]"
}`}
>
<div
className="absolute transition-all duration-200 ease-in-out bg-white dark:bg-gray-800 rounded-md shadow-sm"
className="absolute rounded-md bg-white shadow-sm transition-all duration-200 ease-in-out dark:bg-gray-800"
style={bgStyles}
/>
<Link
@@ -82,7 +82,7 @@ const Navbar = () => {
linkRefs.current.home = ref;
}}
onMouseOver={() => setActiveLink("home")}
className="text-gray-700 dark:text-gray-300 dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative font-mono"
className="relative rounded-md px-4 py-2 font-mono text-gray-700 transition-colors hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-300"
>
<span className="text-blue-600 dark:text-blue-400">~/</span>
home
@@ -96,7 +96,7 @@ const Navbar = () => {
}}
onMouseOver={() => setActiveLink("demo")}
onMouseLeave={() => setActiveLink("home")}
className="text-gray-700 dark:text-gray-300 dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono"
className="relative flex items-center gap-2 rounded-md px-4 py-2 font-mono text-gray-700 transition-colors hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-300"
>
<span>demo</span>
</Link>
@@ -109,9 +109,9 @@ const Navbar = () => {
}}
onMouseOver={() => setActiveLink("npm")}
onMouseLeave={() => setActiveLink("home")}
className="text-gray-700 dark:text-gray-300 dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono"
className="relative flex items-center gap-2 rounded-md px-4 py-2 font-mono text-gray-700 transition-colors hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-300"
>
<PackageIcon pm="npm" className="w-4 h-4 rounded-full" />{" "}
<PackageIcon pm="npm" className="h-4 w-4 rounded-full" />{" "}
<span>npm</span>
</Link>
@@ -123,13 +123,13 @@ const Navbar = () => {
}}
onMouseOver={() => setActiveLink("github")}
onMouseLeave={() => setActiveLink("home")}
className={`text-gray-700 dark:text-gray-300 dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono ${
className={`relative flex items-center gap-2 rounded-md px-4 py-2 font-mono text-gray-700 transition-colors hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-300 ${
scrolled
? "opacity-100 translate-y-0"
: "opacity-0 pointer-events-none"
? "translate-y-0 opacity-100"
: "pointer-events-none opacity-0"
}`}
>
<Github className="size-4 mr-1">
<Github className="mr-1 size-4">
<title>GitHub</title>
</Github>{" "}
Github
@@ -138,16 +138,16 @@ const Navbar = () => {
</div>
<div
className={`hidden md:flex justify-end transition-opacity duration-300 ${
scrolled ? "opacity-0 pointer-events-none" : "opacity-100"
className={`hidden justify-end transition-opacity duration-300 md:flex ${
scrolled ? "pointer-events-none opacity-0" : "opacity-100"
}`}
>
<Link
href="https://www.github.com/better-t-stack/create-better-t-stack"
target="_blank"
className="inline-flex items-center backdrop-blur-sm bg-gray-100/90 dark:bg-gray-900/90 rounded-lg border border-gray-200 dark:border-gray-800 py-1 px-4 text-sm font-mono text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-300 transition-colors"
className="inline-flex items-center rounded-lg border border-gray-200 bg-gray-100/90 px-4 py-1 font-mono text-gray-700 text-sm backdrop-blur-sm transition-colors hover:text-blue-600 dark:border-gray-800 dark:bg-gray-900/90 dark:text-gray-300 dark:hover:text-blue-300"
>
<Github className="size-4 mr-2">
<Github className="mr-2 size-4">
<title>GitHub</title>
</Github>
Star on GitHub
@@ -157,7 +157,7 @@ const Navbar = () => {
<button
type="button"
onClick={toggleMobileMenu}
className="md:hidden flex items-center justify-center p-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100/50 dark:hover:bg-gray-800/50 focus:outline-none"
className="flex items-center justify-center rounded-md p-2 text-gray-700 hover:bg-gray-100/50 focus:outline-none md:hidden dark:text-gray-300 dark:hover:bg-gray-800/50"
aria-expanded={mobileMenuOpen}
>
{mobileMenuOpen ? (
@@ -171,21 +171,21 @@ const Navbar = () => {
{/* Mobile Menu - Terminal Style */}
<div
className={`md:hidden fixed inset-0 z-[99] pt-16 backdrop-blur-md transition-all duration-300 ease-in-out ${
className={`fixed inset-0 z-[99] pt-16 backdrop-blur-md transition-all duration-300 ease-in-out md:hidden ${
mobileMenuOpen
? "opacity-100 pointer-events-auto"
: "opacity-0 pointer-events-none"
? "pointer-events-auto opacity-100"
: "pointer-events-none opacity-0"
}`}
>
<div className="mx-4 mt-4 bg-gray-100/95 dark:bg-gray-900/95 border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden shadow-lg">
<div className="mx-4 mt-4 overflow-hidden rounded-lg border border-gray-300 bg-gray-100/95 shadow-lg dark:border-gray-700 dark:bg-gray-900/95">
{/* Terminal Header */}
<div className="bg-gray-200 dark:bg-gray-800 px-4 py-2 flex items-center">
<div className="flex space-x-2 mr-4">
<div className="w-3 h-3 bg-red-500 rounded-full" />
<div className="w-3 h-3 bg-yellow-500 rounded-full" />
<div className="w-3 h-3 bg-green-500 rounded-full" />
<div className="flex items-center bg-gray-200 px-4 py-2 dark:bg-gray-800">
<div className="mr-4 flex space-x-2">
<div className="h-3 w-3 rounded-full bg-red-500" />
<div className="h-3 w-3 rounded-full bg-yellow-500" />
<div className="h-3 w-3 rounded-full bg-green-500" />
</div>
<div className="text-sm font-mono text-gray-600 dark:text-gray-300">
<div className="font-mono text-gray-600 text-sm dark:text-gray-300">
better-t-stack:~
</div>
</div>
@@ -202,10 +202,10 @@ const Navbar = () => {
</span>
</div>
<div className="space-y-2 pl-4 border-l-2 border-gray-300 dark:border-gray-700">
<div className="space-y-2 border-gray-300 border-l-2 pl-4 dark:border-gray-700">
<Link
href="/"
className="block text-blue-600 dark:text-blue-400 hover:underline"
className="block text-blue-600 hover:underline dark:text-blue-400"
onClick={() => setMobileMenuOpen(false)}
>
~/home
@@ -214,18 +214,18 @@ const Navbar = () => {
<Link
href="https://my-better-t-app-client.pages.dev/"
target="_blank"
className="block text-blue-600 dark:text-blue-400 hover:underline"
className="block text-blue-600 hover:underline dark:text-blue-400"
onClick={() => setMobileMenuOpen(false)}
>
~/demo
</Link>
<div className="flex items-center">
<PackageIcon pm="npm" className="w-4 h-4 mr-2" />
<PackageIcon pm="npm" className="mr-2 h-4 w-4" />
<Link
href="https://www.npmjs.com/package/create-better-t-stack"
target="_blank"
className="block text-blue-600 dark:text-blue-400 hover:underline"
className="block text-blue-600 hover:underline dark:text-blue-400"
onClick={() => setMobileMenuOpen(false)}
>
~/npm
@@ -233,11 +233,11 @@ const Navbar = () => {
</div>
<div className="flex items-center">
<Github className="size-4 mr-2 text-gray-700 dark:text-gray-300" />
<Github className="mr-2 size-4 text-gray-700 dark:text-gray-300" />
<Link
href="https://www.github.com/better-t-stack/create-better-t-stack"
target="_blank"
className="block text-blue-600 dark:text-blue-400 hover:underline"
className="block text-blue-600 hover:underline dark:text-blue-400"
onClick={() => setMobileMenuOpen(false)}
>
~/github
@@ -255,14 +255,14 @@ const Navbar = () => {
</span>
</div>
<div className="pl-4 border-l-2 border-gray-300 dark:border-gray-700 pb-2">
<div className="border-gray-300 border-l-2 pb-2 pl-4 dark:border-gray-700">
<Link
href="https://www.github.com/better-t-stack/create-better-t-stack"
target="_blank"
className="inline-flex items-center px-4 py-2 bg-gray-200 dark:bg-gray-800 rounded-md text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors"
className="inline-flex items-center rounded-md bg-gray-200 px-4 py-2 text-gray-800 transition-colors hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
onClick={() => setMobileMenuOpen(false)}
>
<Github className="size-5 mr-2" />
<Github className="mr-2 size-5" />
Star on GitHub
</Link>
</div>
@@ -272,7 +272,7 @@ const Navbar = () => {
user@better-t-stack
</span>
<span className="text-gray-600 dark:text-gray-400">:~$</span>
<span className="animate-pulse ml-2">█</span>
<span className="ml-2 animate-pulse">█</span>
</div>
</div>
</div>

6
apps/web/src/app/(home)/_components/NpmPackage.tsx
View File

@@ -20,9 +20,9 @@ const NpmPackage = () => {
}, []);
return (
<div className="flex items-center justify-center mt-2">
<span className="inline-block w-3 h-5 bg-blue-400 dark:bg-blue-500 animate-pulse mr-2" />
<span className="text-gray-700 dark:text-gray-300 text-xl font-mono">
<div className="mt-2 flex items-center justify-center">
<span className="mr-2 inline-block h-5 w-3 animate-pulse bg-blue-400 dark:bg-blue-500" />
<span className="font-mono text-gray-700 text-xl dark:text-gray-300">
{versionLoading ? "[v1.0.0]" : `[v${version}]`}
</span>
</div>

12
apps/web/src/app/(home)/_components/SideCircles.tsx
View File

@@ -2,14 +2,14 @@ const SideCircles = () => {
return (
<>
<div>
<div className="h-[50vh] w-[40vw] rounded-full bg-gradient-to-b from-transparent via-violet-950/20 to-transparent backdrop-blur-xl z-40 fixed top-1/2 -translate-y-1/2 -left-[30%]" />
<div className="h-[40vh] w-[40vw] rounded-full bg-gradient-to-b from-transparent via-violet-950/20 to-transparent backdrop-blur-xl z-50 fixed top-1/2 -translate-y-1/2 -left-[35%]" />
<div className="h-[60vh] w-[40vw] rounded-full bg-gradient-to-b from-transparent via-violet-950/20 to-transparent backdrop-blur-xl z-30 fixed top-1/2 -translate-y-1/2 -left-[25%]" />
<div className="-translate-y-1/2 -left-[30%] fixed top-1/2 z-40 h-[50vh] w-[40vw] rounded-full bg-gradient-to-b from-transparent via-violet-950/20 to-transparent backdrop-blur-xl" />
<div className="-translate-y-1/2 -left-[35%] fixed top-1/2 z-50 h-[40vh] w-[40vw] rounded-full bg-gradient-to-b from-transparent via-violet-950/20 to-transparent backdrop-blur-xl" />
<div className="-translate-y-1/2 -left-[25%] fixed top-1/2 z-30 h-[60vh] w-[40vw] rounded-full bg-gradient-to-b from-transparent via-violet-950/20 to-transparent backdrop-blur-xl" />
</div>
<div>
<div className="h-[40vh] w-[40vw] rounded-full bg-gradient-to-b from-transparent via-violet-950/20 to-transparent backdrop-blur-xl z-50 fixed top-1/2 -translate-y-1/2 -right-[35%]" />
<div className="h-[50vh] w-[40vw] rounded-full bg-gradient-to-b from-transparent via-violet-950/20 to-transparent backdrop-blur-xl z-40 fixed top-1/2 -translate-y-1/2 -right-[30%]" />
<div className="h-[60vh] w-[40vw] rounded-full bg-gradient-to-b from-transparent via-violet-950/20 to-transparent backdrop-blur-xl z-30 fixed top-1/2 -translate-y-1/2 -right-[25%]" />
<div className="-translate-y-1/2 -right-[35%] fixed top-1/2 z-50 h-[40vh] w-[40vw] rounded-full bg-gradient-to-b from-transparent via-violet-950/20 to-transparent backdrop-blur-xl" />
<div className="-translate-y-1/2 -right-[30%] fixed top-1/2 z-40 h-[50vh] w-[40vw] rounded-full bg-gradient-to-b from-transparent via-violet-950/20 to-transparent backdrop-blur-xl" />
<div className="-translate-y-1/2 -right-[25%] fixed top-1/2 z-30 h-[60vh] w-[40vw] rounded-full bg-gradient-to-b from-transparent via-violet-950/20 to-transparent backdrop-blur-xl" />
</div>
</>
);

94
apps/web/src/app/(home)/_components/StackArchitech.tsx
View File

@@ -758,22 +758,22 @@ const StackArchitect = () => {
}, [command]);
return (
<div className="w-full mx-auto">
<div className="rounded-xl overflow-hidden shadow-xl border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-white">
<div className="bg-gray-200 dark:bg-gray-800 px-4 py-2 flex items-center justify-between">
<div className="mx-auto w-full">
<div className="overflow-hidden rounded-xl border border-gray-300 bg-gray-100 text-gray-800 shadow-xl dark:border-gray-700 dark:bg-gray-900 dark:text-white">
<div className="flex items-center justify-between bg-gray-200 px-4 py-2 dark:bg-gray-800">
<div className="flex space-x-2">
<div className="w-3 h-3 rounded-full bg-red-500" />
<div className="w-3 h-3 rounded-full bg-yellow-500" />
<div className="w-3 h-3 rounded-full bg-green-500" />
<div className="h-3 w-3 rounded-full bg-red-500" />
<div className="h-3 w-3 rounded-full bg-yellow-500" />
<div className="h-3 w-3 rounded-full bg-green-500" />
</div>
<div className="font-mono text-xs text-gray-600 dark:text-gray-400">
<div className="font-mono text-gray-600 text-xs dark:text-gray-400">
Stack Architect Terminal
</div>
<div>
<button
type="button"
onClick={copyToClipboard}
className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors"
className="text-gray-600 transition-colors hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
title="Copy command"
>
{copied ? (
@@ -786,8 +786,8 @@ const StackArchitect = () => {
</div>
<div className="p-4 font-mono">
<div className="mb-4">
<label className="flex flex-col mb-2">
<span className="text-xs text-gray-600 dark:text-gray-400 mb-1">
<label className="mb-2 flex flex-col">
<span className="mb-1 text-gray-600 text-xs dark:text-gray-400">
Project Name:
</span>
<div className="flex items-center">
@@ -799,50 +799,50 @@ const StackArchitect = () => {
setStack((prev) => ({ ...prev, projectName: newValue }));
setProjectNameError(validateProjectName(newValue));
}}
className={`bg-gray-200 dark:bg-gray-800 border ${
className={`border bg-gray-200 dark:bg-gray-800 ${
projectNameError
? "border-red-500 dark:border-red-500"
: "border-gray-300 dark:border-gray-700"
} rounded px-2 py-1 font-mono text-sm focus:outline-none focus:border-blue-500 dark:focus:border-blue-400`}
} rounded px-2 py-1 font-mono text-sm focus:border-blue-500 focus:outline-none dark:focus:border-blue-400`}
placeholder="my-better-t-app"
/>
</div>
{projectNameError && (
<p className="text-red-500 text-xs mt-1">{projectNameError}</p>
<p className="mt-1 text-red-500 text-xs">{projectNameError}</p>
)}
</label>
</div>
<div className="mb-4">
<div className="flex">
<span className="text-green-600 dark:text-green-400 mr-2">$</span>
<span className="mr-2 text-green-600 dark:text-green-400">$</span>
<code className="text-gray-700 dark:text-gray-300">
{command}
</code>
</div>
</div>
{compatNotes[activeTab] && compatNotes[activeTab].length > 0 && (
<div className="mb-4 p-3 rounded-md bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
<div className="flex items-center gap-2 mb-2 text-sm font-medium text-blue-800 dark:text-blue-300">
<div className="mb-4 rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20">
<div className="mb-2 flex items-center gap-2 font-medium text-blue-800 text-sm dark:text-blue-300">
<InfoIcon className="h-4 w-4" />
<span>Compatibility Notes</span>
</div>
<ul className="list-disc list-inside text-xs text-blue-700 dark:text-blue-400 space-y-1">
<ul className="list-inside list-disc space-y-1 text-blue-700 text-xs dark:text-blue-400">
{compatNotes[activeTab].map((note) => (
<li key={note}>{note}</li>
))}
</ul>
</div>
)}
<div className="border-t border-gray-300 dark:border-gray-700 pt-4 mt-4">
<div className="mb-3 text-gray-600 dark:text-gray-400 flex items-center">
<Terminal className="w-4 h-4 mr-2" />
<div className="mt-4 border-gray-300 border-t pt-4 dark:border-gray-700">
<div className="mb-3 flex items-center text-gray-600 dark:text-gray-400">
<Terminal className="mr-2 h-4 w-4" />
<span>
Configure{" "}
{activeTab.charAt(0).toUpperCase() + activeTab.slice(1)}
</span>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mb-4">
<div className="mb-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
{TECH_OPTIONS[activeTab as keyof typeof TECH_OPTIONS].map(
(tech) => {
let isSelected = false;
@@ -880,13 +880,11 @@ const StackArchitect = () => {
return (
<motion.div
key={tech.id}
className={`
p-2 px-3 rounded
${isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
className={`p-2 px-3 rounded${isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
${
isSelected
? "bg-blue-100 dark:bg-blue-900/40 border border-blue-300 dark:border-blue-500/50"
: "hover:bg-gray-200 dark:hover:bg-gray-800 border border-gray-300 dark:border-gray-700"
? "border border-blue-300 bg-blue-100 dark:border-blue-500/50 dark:bg-blue-900/40"
: "border border-gray-300 hover:bg-gray-200 dark:border-gray-700 dark:hover:bg-gray-800"
}
`}
whileHover={!isDisabled ? { scale: 1.02 } : undefined}
@@ -900,7 +898,7 @@ const StackArchitect = () => {
}
>
<div className="flex items-center">
<div className="flex-shrink-0 mr-2">
<div className="mr-2 flex-shrink-0">
{isSelected ? (
<CircleCheck className="h-4 w-4 text-blue-600 dark:text-blue-400" />
) : (
@@ -920,12 +918,12 @@ const StackArchitect = () => {
{tech.name}
</span>
</div>
<p className="text-xs text-gray-500">
<p className="text-gray-500 text-xs">
{tech.description}
</p>
</div>
{tech.default && !isSelected && (
<span className="text-xs text-gray-500 dark:text-gray-600 ml-2">
<span className="ml-2 text-gray-500 text-xs dark:text-gray-600">
Default
</span>
)}
@@ -936,8 +934,8 @@ const StackArchitect = () => {
)}
</div>
<div className="border-t border-gray-300 dark:border-gray-700 pt-3 mb-3">
<div className="text-xs text-gray-600 dark:text-gray-400 mb-2">
<div className="mb-3 border-gray-300 border-t pt-3 dark:border-gray-700">
<div className="mb-2 text-gray-600 text-xs dark:text-gray-400">
Selected Stack
</div>
<div className="flex flex-wrap gap-1">
@@ -948,13 +946,13 @@ const StackArchitect = () => {
return frontend ? (
<span
key={frontendId}
className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border border-blue-300 dark:border-blue-700/30"
className="inline-flex items-center rounded border border-blue-300 bg-blue-100 px-1.5 py-0.5 text-blue-800 text-xs dark:border-blue-700/30 dark:bg-blue-900/30 dark:text-blue-300"
>
{frontend.icon} {frontend.name}
</span>
) : null;
})}
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300 border border-amber-300 dark:border-amber-700/30">
<span className="inline-flex items-center rounded border border-amber-300 bg-amber-100 px-1.5 py-0.5 text-amber-800 text-xs dark:border-amber-700/30 dark:bg-amber-900/30 dark:text-amber-300">
{
TECH_OPTIONS.runtime.find((t) => t.id === stack.runtime)
?.icon
@@ -965,7 +963,7 @@ const StackArchitect = () => {
}
</span>
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border border-blue-300 dark:border-blue-700/30">
<span className="inline-flex items-center rounded border border-blue-300 bg-blue-100 px-1.5 py-0.5 text-blue-800 text-xs dark:border-blue-700/30 dark:bg-blue-900/30 dark:text-blue-300">
{
TECH_OPTIONS.backendFramework.find(
(t) => t.id === stack.backendFramework,
@@ -978,7 +976,7 @@ const StackArchitect = () => {
}
</span>
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300 border border-indigo-300 dark:border-indigo-700/30">
<span className="inline-flex items-center rounded border border-indigo-300 bg-indigo-100 px-1.5 py-0.5 text-indigo-800 text-xs dark:border-indigo-700/30 dark:bg-indigo-900/30 dark:text-indigo-300">
{
TECH_OPTIONS.database.find((t) => t.id === stack.database)
?.icon
@@ -990,14 +988,14 @@ const StackArchitect = () => {
</span>
{stack.orm && stack.database !== "none" && (
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-cyan-100 dark:bg-cyan-900/30 text-cyan-800 dark:text-cyan-300 border border-cyan-300 dark:border-cyan-700/30">
<span className="inline-flex items-center rounded border border-cyan-300 bg-cyan-100 px-1.5 py-0.5 text-cyan-800 text-xs dark:border-cyan-700/30 dark:bg-cyan-900/30 dark:text-cyan-300">
{TECH_OPTIONS.orm.find((t) => t.id === stack.orm)?.icon}{" "}
{TECH_OPTIONS.orm.find((t) => t.id === stack.orm)?.name}
</span>
)}
{hasWebFrontend(stack.frontend) && (
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border border-green-300 dark:border-green-700/30">
<span className="inline-flex items-center rounded border border-green-300 bg-green-100 px-1.5 py-0.5 text-green-800 text-xs dark:border-green-700/30 dark:bg-green-900/30 dark:text-green-300">
{TECH_OPTIONS.auth.find((t) => t.id === stack.auth)?.icon}{" "}
{TECH_OPTIONS.auth.find((t) => t.id === stack.auth)?.name}
</span>
@@ -1006,7 +1004,7 @@ const StackArchitect = () => {
{stack.turso === "true" &&
stack.database === "sqlite" &&
stack.orm !== "prisma" && (
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-pink-100 dark:bg-pink-900/30 text-pink-800 dark:text-pink-300 border border-pink-300 dark:border-pink-700/30">
<span className="inline-flex items-center rounded border border-pink-300 bg-pink-100 px-1.5 py-0.5 text-pink-800 text-xs dark:border-pink-700/30 dark:bg-pink-900/30 dark:text-pink-300">
{
TECH_OPTIONS.turso.find((t) => t.id === stack.turso)
?.icon
@@ -1021,7 +1019,7 @@ const StackArchitect = () => {
{stack.prismaPostgres === "true" &&
stack.database === "postgres" &&
stack.orm === "prisma" && (
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300 border border-indigo-300 dark:border-indigo-700/30">
<span className="inline-flex items-center rounded border border-indigo-300 bg-indigo-100 px-1.5 py-0.5 text-indigo-800 text-xs dark:border-indigo-700/30 dark:bg-indigo-900/30 dark:text-indigo-300">
{
TECH_OPTIONS.prismaPostgres.find(
(t) => t.id === stack.prismaPostgres,
@@ -1042,7 +1040,7 @@ const StackArchitect = () => {
return addon ? (
<span
key={addonId}
className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-violet-100 dark:bg-violet-900/30 text-violet-800 dark:text-violet-300 border border-violet-300 dark:border-violet-700/30"
className="inline-flex items-center rounded border border-violet-300 bg-violet-100 px-1.5 py-0.5 text-violet-800 text-xs dark:border-violet-700/30 dark:bg-violet-900/30 dark:text-violet-300"
>
{addon.icon} {addon.name}
</span>
@@ -1057,7 +1055,7 @@ const StackArchitect = () => {
return example ? (
<span
key={exampleId}
className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-teal-100 dark:bg-teal-900/30 text-teal-800 dark:text-teal-300 border border-teal-300 dark:border-teal-700/30"
className="inline-flex items-center rounded border border-teal-300 bg-teal-100 px-1.5 py-0.5 text-teal-800 text-xs dark:border-teal-700/30 dark:bg-teal-900/30 dark:text-teal-300"
>
{example.icon} {example.name}
</span>
@@ -1067,18 +1065,16 @@ const StackArchitect = () => {
</div>
</div>
</div>
<div className="bg-gray-200 dark:bg-gray-900 border-t border-gray-300 dark:border-gray-700 flex overflow-x-auto">
<div className="flex overflow-x-auto border-gray-300 border-t bg-gray-200 dark:border-gray-700 dark:bg-gray-900">
{Object.keys(TECH_OPTIONS).map((category) => (
<button
type="button"
key={category}
className={`
py-2 px-4 text-xs font-mono whitespace-nowrap transition-colors
${
activeTab === category
? "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-t-2 border-blue-500"
: "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-800"
}
className={`whitespace-nowrap px-4 py-2 font-mono text-xs transition-colors${
activeTab === category
? "border-blue-500 border-t-2 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
: "text-gray-600 hover:bg-gray-300 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
}
`}
onClick={() => setActiveTab(category)}
>

42
apps/web/src/app/(home)/_components/TechShowcase.tsx
View File

@@ -132,11 +132,11 @@ export default function TechShowcase() {
: null;
return (
<section className="w-full max-w-6xl mx-auto py-16 px-4">
<section className="mx-auto w-full max-w-6xl px-4 py-16">
<div className="mb-8 flex flex-wrap justify-center gap-3">
<button
type="button"
className={`px-4 py-2 rounded-md font-mono text-sm transition-colors ${
className={`rounded-md px-4 py-2 font-mono text-sm transition-colors ${
activeCategory === null
? "bg-blue-500 text-white dark:text-white"
: "bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
@@ -150,7 +150,7 @@ export default function TechShowcase() {
<button
key={category}
type="button"
className={`px-4 py-2 rounded-md font-mono text-sm transition-colors ${
className={`rounded-md px-4 py-2 font-mono text-sm transition-colors ${
activeCategory === category
? "bg-blue-500 text-white dark:text-white"
: "bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
@@ -163,22 +163,22 @@ export default function TechShowcase() {
</div>
{activeCategory && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
{filteredTech.map((tech) => (
<motion.div
key={tech.name}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
className="bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm border border-gray-200 dark:border-gray-800 rounded-lg p-4 hover:border-blue-500/30 transition-colors"
className="rounded-lg border border-gray-200 bg-white/50 p-4 backdrop-blur-sm transition-colors hover:border-blue-500/30 dark:border-gray-800 dark:bg-gray-900/50"
>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
<h3 className="mb-2 font-semibold text-gray-900 text-lg dark:text-white">
{tech.name}
</h3>
<p className="text-gray-600 dark:text-gray-400 text-sm">
<p className="text-gray-600 text-sm dark:text-gray-400">
{tech.description}
</p>
<div className="mt-3 text-xs text-gray-500 dark:text-gray-500 font-mono">
<div className="mt-3 font-mono text-gray-500 text-xs dark:text-gray-500">
{tech.category === "tooling" || tech.category === "database" ? (
<span>
{tech.name === "Drizzle ORM" ||
@@ -203,40 +203,40 @@ export default function TechShowcase() {
<div className="space-y-12">
{groupedTech.map((group) => (
<div key={group.category} className="relative">
<div className="flex items-center mb-4">
<div className="w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-500/20 flex items-center justify-center text-blue-500 dark:text-blue-300 mr-3">
<div className="mb-4 flex items-center">
<div className="mr-3 flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-blue-500 dark:bg-blue-500/20 dark:text-blue-300">
{categoryIcons[group.category as keyof typeof categoryIcons]}
</div>
<h2 className="text-xl font-semibold text-blue-500 dark:text-blue-300 font-mono">
<h2 className="font-mono font-semibold text-blue-500 text-xl dark:text-blue-300">
{group.category}/
</h2>
</div>
<div className="border-l-2 border-gray-200 dark:border-gray-800 pl-6 ml-3 pb-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="ml-3 border-gray-200 border-l-2 pb-4 pl-6 dark:border-gray-800">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
{group.items.map((tech) => (
<motion.div
key={tech.name}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="bg-white/30 dark:bg-gray-900/30 backdrop-blur-sm border border-gray-200 dark:border-gray-800 rounded-md p-4 hover:bg-gray-100/50 dark:hover:bg-gray-800/30 transition-colors"
className="rounded-md border border-gray-200 bg-white/30 p-4 backdrop-blur-sm transition-colors hover:bg-gray-100/50 dark:border-gray-800 dark:bg-gray-900/30 dark:hover:bg-gray-800/30"
>
<div className="flex justify-between items-start">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
<div className="flex items-start justify-between">
<h3 className="font-semibold text-gray-900 text-lg dark:text-white">
{tech.name}
</h3>
<div className="bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-xs font-mono text-gray-600 dark:text-gray-400">
<div className="rounded bg-gray-100 px-2 py-1 font-mono text-gray-600 text-xs dark:bg-gray-800 dark:text-gray-400">
{group.category === "tooling" ||
tech.category === "database"
? "optional"
: "core"}
</div>
</div>
<p className="text-gray-600 dark:text-gray-400 text-sm mt-2">
<p className="mt-2 text-gray-600 text-sm dark:text-gray-400">
{tech.description}
</p>
<div className="mt-3 pt-2 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
<span className="text-xs text-gray-500 dark:text-gray-500 font-mono">
<div className="mt-3 flex items-center justify-between border-gray-200 border-t pt-2 dark:border-gray-800">
<span className="font-mono text-gray-500 text-xs dark:text-gray-500">
{group.category === "tooling" ||
tech.category === "database"
? tech.name === "Drizzle ORM" ||
@@ -261,7 +261,7 @@ export default function TechShowcase() {
)}
<div className="mt-10 text-center">
<div className="inline-block bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm border border-gray-200 dark:border-gray-800 rounded-md px-5 py-3 font-mono text-sm text-gray-600 dark:text-gray-400">
<div className="inline-block rounded-md border border-gray-200 bg-white/50 px-5 py-3 font-mono text-gray-600 text-sm backdrop-blur-sm dark:border-gray-800 dark:bg-gray-900/50 dark:text-gray-400">
<span className="text-green-500 dark:text-green-400">$</span> npx
create-better-t-stack
<span className="text-blue-500 dark:text-blue-400">

44
apps/web/src/app/(home)/_components/Testimonials.tsx
View File

@@ -73,8 +73,8 @@ export default function Testimonials() {
const currentPage = Math.floor(startIndex / tweetsPerPage) + 1;
return (
<section className="w-full max-w-7xl mx-auto space-y-16 mt-20 relative z-10 px-4 sm:px-6">
<div className="text-center space-y-8 relative">
<section className="relative z-10 mx-auto mt-20 w-full max-w-7xl space-y-16 px-4 sm:px-6">
<div className="relative space-y-8 text-center">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -82,15 +82,15 @@ export default function Testimonials() {
transition={{ duration: 0.5 }}
className="relative"
>
<h2 className="text-3xl sm:text-4xl font-bold">
<span className="text-blue-500 dark:text-blue-400 font-mono mr-1">
<h2 className="font-bold text-3xl sm:text-4xl">
<span className="mr-1 font-mono text-blue-500 dark:text-blue-400">
{">"}
</span>
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-blue-400 dark:to-indigo-500">
<span className="bg-gradient-to-r from-blue-500 to-indigo-600 bg-clip-text text-transparent dark:from-blue-400 dark:to-indigo-500">
Developer Feedback
</span>
</h2>
<div className="absolute -inset-x-1/4 -inset-y-1/2 bg-gradient-to-r from-blue-300/0 via-blue-300/10 to-blue-300/0 dark:from-blue-800/0 dark:via-blue-800/10 dark:to-blue-800/0 blur-3xl -z-10" />
<div className="-inset-x-1/4 -inset-y-1/2 -z-10 absolute bg-gradient-to-r from-blue-300/0 via-blue-300/10 to-blue-300/0 blur-3xl dark:from-blue-800/0 dark:via-blue-800/10 dark:to-blue-800/0" />
</motion.div>
<motion.p
@@ -98,7 +98,7 @@ export default function Testimonials() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.5, delay: 0.2 }}
className="text-lg sm:text-xl text-gray-700 dark:text-gray-300 leading-relaxed font-mono max-w-3xl mx-auto"
className="mx-auto max-w-3xl font-mono text-gray-700 text-lg leading-relaxed sm:text-xl dark:text-gray-300"
>
what devs are saying about Better-T-Stack
</motion.p>
@@ -111,14 +111,14 @@ export default function Testimonials() {
transition={{ duration: 0.5, delay: 0.3 }}
className="relative mt-8"
>
<div className="rounded-xl overflow-hidden shadow-xl border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-900">
<div className="bg-gray-200 dark:bg-gray-800 px-4 py-2 flex items-center justify-between">
<div className="overflow-hidden rounded-xl border border-gray-300 bg-gray-100 shadow-xl dark:border-gray-700 dark:bg-gray-900">
<div className="flex items-center justify-between bg-gray-200 px-4 py-2 dark:bg-gray-800">
<div className="flex space-x-2">
<div className="w-3 h-3 rounded-full bg-red-500" />
<div className="w-3 h-3 rounded-full bg-yellow-500" />
<div className="w-3 h-3 rounded-full bg-green-500" />
<div className="h-3 w-3 rounded-full bg-red-500" />
<div className="h-3 w-3 rounded-full bg-yellow-500" />
<div className="h-3 w-3 rounded-full bg-green-500" />
</div>
<div className="font-mono text-xs text-gray-600 dark:text-gray-400">
<div className="font-mono text-gray-600 text-xs dark:text-gray-400">
Developer Feedback Terminal
</div>
<div className="flex items-center gap-2">
@@ -126,7 +126,7 @@ export default function Testimonials() {
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={handlePrev}
className="h-6 w-6 flex items-center justify-center rounded bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors"
className="flex h-6 w-6 items-center justify-center rounded bg-gray-300 text-gray-700 transition-colors hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
title="Previous testimonials"
>
<ChevronLeft className="h-3 w-3" />
@@ -136,7 +136,7 @@ export default function Testimonials() {
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={handleNext}
className="h-6 w-6 flex items-center justify-center rounded bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors"
className="flex h-6 w-6 items-center justify-center rounded bg-gray-300 text-gray-700 transition-colors hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
title="Next testimonials"
>
<ChevronRight className="h-3 w-3" />
@@ -145,22 +145,22 @@ export default function Testimonials() {
</div>
<div className="p-2">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
{visibleTweets.map((tweetIndex) => (
<Tweet key={tweetIndex} id={TWEET_IDS[tweetIndex]} />
))}
</div>
</div>
<div className="bg-gray-200 dark:bg-gray-800 border-t border-gray-300 dark:border-gray-700 p-3 flex items-center justify-between">
<div className="flex items-center justify-between border-gray-300 border-t bg-gray-200 p-3 dark:border-gray-700 dark:bg-gray-800">
<div className="flex items-center gap-2">
<span className="text-xs text-gray-700 dark:text-gray-300">
<span className="text-gray-700 text-xs dark:text-gray-300">
Page {currentPage} of {totalPages}
</span>
</div>
<div className="flex items-center gap-3">
<div className="hidden sm:flex items-center gap-1">
<div className="hidden items-center gap-1 sm:flex">
{Array.from({ length: totalPages }).map((_, i) => {
const isActive = i === currentPage - 1;
return (
@@ -169,10 +169,10 @@ export default function Testimonials() {
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
key={i}
onClick={() => setStartIndex(i * tweetsPerPage)}
className={`w-1.5 h-1.5 rounded-full transition-colors ${
className={`h-1.5 w-1.5 rounded-full transition-colors ${
isActive
? "bg-blue-500"
: "bg-gray-400 dark:bg-gray-600 hover:bg-gray-500"
: "bg-gray-400 hover:bg-gray-500 dark:bg-gray-600"
}`}
aria-label={`Go to page ${i + 1}`}
/>
@@ -183,7 +183,7 @@ export default function Testimonials() {
</div>
</div>
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 via-transparent to-indigo-500/5 blur-3xl -z-10" />
<div className="-z-10 absolute inset-0 bg-gradient-to-r from-blue-500/5 via-transparent to-indigo-500/5 blur-3xl" />
</motion.div>
</section>
);

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

@@ -77,7 +77,7 @@ export const metadata: Metadata = {
export default function Layout({ children }: { children: ReactNode }) {
return (
<main className="relative z-10 min-h-svh bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-950 dark:to-black transition-color duration-300 overflow-hidden">
<main className="relative z-10 min-h-svh overflow-hidden bg-gradient-to-b from-gray-50 to-gray-100 transition-color duration-300 dark:from-gray-950 dark:to-black">
<Navbar />
{children}
<Footer />

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

@@ -9,13 +9,13 @@ import Testimonials from "./_components/Testimonials";
export default function HomePage() {
return (
<main className="flex flex-col items-center justify-start px-2 sm:px-4 md:px-8 pt-24 md:pt-28 pb-10 sm:pb-16">
<main className="flex flex-col items-center justify-start px-2 pt-24 pb-10 sm:px-4 sm:pb-16 md:px-8 md:pt-28">
<BackgroundGradients />
<div className="max-w-5xl mx-auto text-center mb-10 sm:mb-16 relative z-10">
<div className="relative z-10 mx-auto mb-10 max-w-5xl text-center sm:mb-16">
<div className="px-1 sm:px-6 lg:px-8">
<div className="flex flex-col items-center justify-center space-y-3 sm:space-y-4 text-center">
<h1 className="text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-bold tracking-tight text-gray-900 dark:text-white">
<span className="block bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-indigo-600 pb-1">
<div className="flex flex-col items-center justify-center space-y-3 text-center sm:space-y-4">
<h1 className="font-bold text-4xl text-gray-900 xs:text-5xl tracking-tight sm:text-6xl md:text-7xl dark:text-white">
<span className="block bg-gradient-to-r from-blue-500 to-indigo-600 bg-clip-text pb-1 text-transparent">
Better-T Stack
</span>
</h1>
@@ -24,43 +24,43 @@ export default function HomePage() {
<NpmPackage />
</div>
<p className="text-lg sm:text-xl font-medium text-gray-600 dark:text-gray-300 max-w-2xl px-1">
<p className="max-w-2xl px-1 font-medium text-gray-600 text-lg sm:text-xl dark:text-gray-300">
A modern CLI tool for scaffolding end-to-end type-safe TypeScript
projects with best practices and customizable configurations
</p>
<div className="w-full max-w-3xl mx-auto mt-1 sm:mt-2">
<div className="mx-auto mt-1 w-full max-w-3xl sm:mt-2">
<CodeContainer />
</div>
<ShinyText
text="Type-safe. Modern. Minimal. Fast."
speed={3}
className="text-xs xs:text-sm sm:text-base text-gray-600 dark:text-gray-400"
className="text-gray-600 text-xs xs:text-sm sm:text-base dark:text-gray-400"
/>
</div>
</div>
<div className="absolute inset-0 -z-10">
<div className="absolute inset-0 bg-gradient-to-r dark:from-purple-500/20 dark:to-indigo-500/20 from-blue-300/20 to-indigo-300/20 dark:blur-3xl blur-2xl transform -skew-y-12" />
<div className="-z-10 absolute inset-0">
<div className="-skew-y-12 absolute inset-0 transform bg-gradient-to-r from-blue-300/20 to-indigo-300/20 blur-2xl dark:from-purple-500/20 dark:to-indigo-500/20 dark:blur-3xl" />
</div>
</div>
<CustomizableSection />
<div className="w-full pt-8 sm:pt-12 relative">
<div className="max-w-5xl mx-auto relative">
<div className="relative w-full pt-8 sm:pt-12">
<div className="relative mx-auto max-w-5xl">
<div className="flex items-center justify-center">
<div className="hidden sm:flex items-center w-1/3">
<div className="hidden w-1/3 items-center sm:flex">
<div className="h-px flex-grow bg-gradient-to-r from-transparent to-blue-500/40" />
<div className="h-2 w-2 rounded-full bg-blue-500/50" />
</div>
<div className="px-4 sm:px-6">
<div className="h-7 w-7 sm:h-8 sm:w-8 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-md">
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 shadow-md sm:h-8 sm:w-8">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-3.5 w-3.5 sm:h-4 sm:w-4 text-white"
className="h-3.5 w-3.5 text-white sm:h-4 sm:w-4"
viewBox="0 0 20 20"
fill="currentColor"
>
@@ -74,13 +74,13 @@ export default function HomePage() {
</div>
</div>
<div className="hidden sm:flex items-center w-1/3">
<div className="hidden w-1/3 items-center sm:flex">
<div className="h-2 w-2 rounded-full bg-indigo-500/50" />
<div className="h-px flex-grow bg-gradient-to-l from-transparent to-indigo-500/40" />
</div>
</div>
<div className="sm:hidden h-px w-full mt-6 bg-gradient-to-r from-blue-500/20 via-indigo-500/40 to-blue-500/20" />
<div className="mt-6 h-px w-full bg-gradient-to-r from-blue-500/20 via-indigo-500/40 to-blue-500/20 sm:hidden" />
</div>
</div>

11
biome.json
View File

@@ -19,7 +19,16 @@
"linter": {
"enabled": true,
"rules": {
"recommended": true
"recommended": true,
"nursery": {
"useSortedClasses": {
"level": "warn",
"fix": "safe",
"options": {
"functions": ["clsx", "cva", "cn"]
}
}
}
},
"ignore": ["template"]
},

2
bun.lock
View File

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