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": { "bin": {
"create-better-t-stack": "dist/index.js" "create-better-t-stack": "dist/index.js"
}, },
"files": [ "files": ["template", "dist"],
"dist",
"template"
],
"keywords": [ "keywords": [
"typescript", "typescript",
"scaffold", "scaffold",

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

@@ -65,7 +65,7 @@ export async function setupDatabase(
orm === "prisma" && orm === "prisma" &&
setupPrismaPostgresDb 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 { 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( 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( export async function setupPrismaPostgres(
projectDir: string, projectDir: string,
shouldSetupPrisma: boolean,
packageManager: ProjectPackageManager = "npm", packageManager: ProjectPackageManager = "npm",
) { ) {
const serverDir = path.join(projectDir, "apps/server"); 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 { try {
const config = await initPrismaDatabase(serverDir, packageManager); const config = await initPrismaDatabase(serverDir, packageManager);

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

@@ -31,6 +31,15 @@
"recommended": true, "recommended": true,
"correctness": { "correctness": {
"useExhaustiveDependencies": "info" "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 = () => { const BackgroundGradients = () => {
return ( 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 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 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 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 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-2/3 right-1/4 h-32 w-32 rounded-full bg-indigo-300/30 blur-[140px] dark:bg-indigo-500/20" />
</div> </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> </div>
); );
}; };

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

@@ -3,18 +3,8 @@ import React from "react";
const CenterLines = () => { const CenterLines = () => {
return ( return (
<> <>
<div <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" />
className="absolute top-3/4 -translate-y-1/2 left-0 w-80 h-14 <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" />
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"
/>
</> </>
); );
}; };

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

@@ -53,15 +53,15 @@ const CodeContainer = () => {
}, [typingComplete, currentStep]); }, [typingComplete, currentStep]);
return ( return (
<div className="w-full max-w-3xl mx-auto mt-4 sm:mt-8"> <div className="mx-auto mt-4 w-full max-w-3xl 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="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="bg-gray-200 dark:bg-gray-800 px-3 sm:px-4 py-2 flex items-center justify-between"> <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="flex space-x-2">
<div className="w-3 h-3 rounded-full bg-red-500" /> <div className="h-3 w-3 rounded-full bg-red-500" />
<div className="w-3 h-3 rounded-full bg-yellow-500" /> <div className="h-3 w-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-green-500" />
</div> </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 Quick Install Terminal
</div> </div>
@@ -69,16 +69,16 @@ const CodeContainer = () => {
<button <button
type="button" type="button"
onClick={() => setIsOpen(!isOpen)} 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> <title>Package Manager</title>
</Terminal> </Terminal>
<span className="text-gray-700 dark:text-gray-300 mr-1"> <span className="mr-1 text-gray-700 dark:text-gray-300">
{selectedPM} {selectedPM}
</span> </span>
<svg <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" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -97,7 +97,7 @@ const CodeContainer = () => {
<motion.div <motion.div
initial={{ opacity: 0, y: -5 }} initial={{ opacity: 0, y: -5 }}
animate={{ opacity: 1, y: 0 }} 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> <ul>
{(Object.keys(commands) as Array<"npm" | "pnpm" | "bun">).map( {(Object.keys(commands) as Array<"npm" | "pnpm" | "bun">).map(
@@ -105,10 +105,10 @@ const CodeContainer = () => {
<li key={pm}> <li key={pm}>
<button <button
type="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 selectedPM === pm
? "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-l-2 border-blue-500" ? "border-blue-500 border-l-2 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
: "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800" : "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
}`} }`}
onClick={() => copyToClipboard(pm)} onClick={() => copyToClipboard(pm)}
> >
@@ -129,10 +129,10 @@ const CodeContainer = () => {
</div> </div>
</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 items-center">
<div className="flex-grow overflow-x-auto"> <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"> <span className="text-gray-700 dark:text-gray-300">
{commands[selectedPM]} {commands[selectedPM]}
</span> </span>
@@ -140,7 +140,7 @@ const CodeContainer = () => {
className={ className={
typingComplete typingComplete
? "hidden" ? "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 }} whileTap={{ scale: 0.95 }}
type="button" type="button"
onClick={() => copyToClipboard(selectedPM)} 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" title="Copy command"
> >
{copied ? ( {copied ? (
<Check className="w-4 h-4"> <Check className="h-4 w-4">
<title>Copied!</title> <title>Copied!</title>
</Check> </Check>
) : ( ) : (
<ClipboardCopy className="w-4 h-4"> <ClipboardCopy className="h-4 w-4">
<title>Copy to clipboard</title> <title>Copy to clipboard</title>
</ClipboardCopy> </ClipboardCopy>
)} )}
@@ -172,7 +172,7 @@ const CodeContainer = () => {
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
className="overflow-x-auto" 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 && ( {currentStep >= 1 && (
<motion.p <motion.p
initial={{ opacity: 0, y: -5 }} initial={{ opacity: 0, y: -5 }}
@@ -234,9 +234,9 @@ const CodeContainer = () => {
initial={{ opacity: 0, x: -5 }} initial={{ opacity: 0, x: -5 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.4 }} 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> <title>Completed</title>
</CircleCheck> </CircleCheck>
<span>Creating project structure</span> <span>Creating project structure</span>
@@ -247,9 +247,9 @@ const CodeContainer = () => {
initial={{ opacity: 0, x: -5 }} initial={{ opacity: 0, x: -5 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.5 }} 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> <title>Completed</title>
</CircleCheck> </CircleCheck>
<span>Installing dependencies</span> <span>Installing dependencies</span>
@@ -265,9 +265,9 @@ const CodeContainer = () => {
initial={{ opacity: 0, x: -5 }} initial={{ opacity: 0, x: -5 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.7 }} 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> <title>Completed</title>
</CircleCheck> </CircleCheck>
<span>Setting up database schema</span> <span>Setting up database schema</span>
@@ -276,9 +276,9 @@ const CodeContainer = () => {
initial={{ opacity: 0, x: -5 }} initial={{ opacity: 0, x: -5 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.8 }} 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> <title>Completed</title>
</CircleCheck> </CircleCheck>
<span>Configuring authentication</span> <span>Configuring authentication</span>
@@ -287,10 +287,10 @@ const CodeContainer = () => {
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ delay: 0.9 }} 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 <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" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
@@ -304,11 +304,11 @@ const CodeContainer = () => {
</svg> </svg>
<div className="flex flex-wrap"> <div className="flex flex-wrap">
<span className="mr-1">Project ready! Run</span> <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 cd my-better-t-app
</code> </code>
<span className="mr-1">and</span> <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 === "npm" && "npm run dev"}
{selectedPM === "pnpm" && "pnpm dev"} {selectedPM === "pnpm" && "pnpm dev"}
{selectedPM === "bun" && "bun dev"} {selectedPM === "bun" && "bun dev"}
@@ -322,22 +322,22 @@ const CodeContainer = () => {
)} )}
<div <div
className={`flex mt-4 ${ className={`mt-4 flex ${
currentStep >= 5 && typingComplete ? "" : "hidden" currentStep >= 5 && typingComplete ? "" : "hidden"
}`} }`}
> >
<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-blue-600 dark:text-blue-500 animate-pulse"> <span className="animate-pulse text-blue-600 dark:text-blue-500">
▌ ▌
</span> </span>
</div> </div>
</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="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-[10px] sm:text-xs text-gray-600 dark:text-gray-400 text-center"> <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 className="inline-flex flex-wrap items-center justify-center gap-1">
<span>For custom options, use</span> <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 === "npm" && "npx"}
{selectedPM === "pnpm" && "pnpm dlx"} {selectedPM === "pnpm" && "pnpm dlx"}
{selectedPM === "bun" && "bunx"} create-better-t-stack {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 ( return (
<div className="relative group"> <div className="group relative">
<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="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 <button
type="button" type="button"
onClick={copyToClipboard} 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 ? ( {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> </button>
<pre className="pr-12 max-sm:text-xs">{command}</pre> <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() { export default function CustomizableSection() {
return ( return (
<section className="w-full max-w-7xl mx-auto space-y-16 mt-20 relative z-10 px-4 sm:px-6"> <section className="relative z-10 mx-auto mt-20 w-full max-w-7xl space-y-16 px-4 sm:px-6">
<div className="text-center space-y-8 relative"> <div className="relative space-y-8 text-center">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -13,15 +13,15 @@ export default function CustomizableSection() {
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
className="relative" className="relative"
> >
<h2 className="text-3xl sm:text-4xl font-bold"> <h2 className="font-bold text-3xl sm:text-4xl">
<span className="text-blue-500 dark:text-blue-400 font-mono mr-1"> <span className="mr-1 font-mono text-blue-500 dark:text-blue-400">
{">"} {">"}
</span> </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 Your Stack, Your Choice
</span> </span>
</h2> </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>
<motion.div <motion.div
@@ -29,33 +29,33 @@ export default function CustomizableSection() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }} viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.5, delay: 0.2 }} 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 Configure your ideal TypeScript environment with all the options you
need need
</p> </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="flex flex-wrap justify-center gap-2 text-gray-700 text-xs sm:gap-3 sm:text-sm 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 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"> <Terminal className="h-3.5 w-3.5">
<title>Runtime Options</title> <title>Runtime Options</title>
</Terminal> </Terminal>
<span>--runtime</span> <span>--runtime</span>
</div> </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"> <Code className="h-3.5 w-3.5">
<title>Framework Options</title> <title>Framework Options</title>
</Code> </Code>
<span>--framework</span> <span>--framework</span>
</div> </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"> <TerminalSquare className="h-3.5 w-3.5">
<title>Database Options</title> <title>Database Options</title>
</TerminalSquare> </TerminalSquare>
<span>--database</span> <span>--database</span>
</div> </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"> <Sliders className="h-3.5 w-3.5">
<title>Addon Options</title> <title>Addon Options</title>
</Sliders> </Sliders>
@@ -69,7 +69,7 @@ export default function CustomizableSection() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }} viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.4, delay: 0.3 }} 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="amber">Bun or Node</Badge>
<Badge color="blue">Hono or Elysia</Badge> <Badge color="blue">Hono or Elysia</Badge>
@@ -87,7 +87,7 @@ export default function CustomizableSection() {
transition={{ duration: 0.6, delay: 0.2 }} transition={{ duration: 0.6, delay: 0.2 }}
className="relative" 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 /> <StackArchitect />
</motion.div> </motion.div>
</section> </section>
@@ -113,7 +113,7 @@ function Badge({
return ( return (
<span <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] colorMap[color as keyof typeof colorMap]
} shadow-sm`} } shadow-sm`}
> >

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

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

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

@@ -3,14 +3,14 @@ import Link from "next/link";
const Footer = () => { const Footer = () => {
return ( return (
<footer className="relative w-full font-mono border-t border-gray-200 dark:border-gray-800"> <footer className="relative w-full border-gray-200 border-t font-mono dark:border-gray-800">
<div className="max-w-6xl mx-auto px-4 sm:px-6 py-12"> <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
<div className="grid md:grid-cols-3 gap-8 mb-12"> <div className="mb-12 grid gap-8 md:grid-cols-3">
<div> <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> <span>Better-T Stack</span>
</h3> </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 Type-safe, modern TypeScript scaffolding for full-stack web
development development
</p> </p>
@@ -19,7 +19,7 @@ const Footer = () => {
<Link <Link
href="https://github.com/better-t-stack/create-better-t-stack" href="https://github.com/better-t-stack/create-better-t-stack"
target="_blank" 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" aria-label="GitHub"
> >
<Github size={18} /> <Github size={18} />
@@ -27,7 +27,7 @@ const Footer = () => {
<Link <Link
href="https://www.npmjs.com/package/create-better-t-stack" href="https://www.npmjs.com/package/create-better-t-stack"
target="_blank" 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" aria-label="NPM"
> >
<svg <svg
@@ -44,15 +44,15 @@ const Footer = () => {
</div> </div>
<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 Resources
</h3> </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> <li>
<Link <Link
target="_blank" target="_blank"
href="https://github.com/better-t-stack/create-better-t-stack" 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 GitHub Repository
</Link> </Link>
@@ -61,7 +61,7 @@ const Footer = () => {
<Link <Link
target="_blank" target="_blank"
href="https://www.npmjs.com/package/create-better-t-stack" 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 NPM Package
</Link> </Link>
@@ -70,7 +70,7 @@ const Footer = () => {
<Link <Link
target="_blank" target="_blank"
href="https://my-better-t-app-client.pages.dev/" 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 Demo Application
</Link> </Link>
@@ -88,12 +88,12 @@ const Footer = () => {
</div> </div>
<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 Contact
</h3> </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"> <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>
<span>amanvarshney.work@gmail.com</span> <span>amanvarshney.work@gmail.com</span>
@@ -106,13 +106,13 @@ const Footer = () => {
</div> </div>
</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"> <p className="text-gray-500 text-sm">
© {new Date().getFullYear()} Better-T Stack. All rights reserved. © {new Date().getFullYear()} Better-T Stack. All rights reserved.
</p> </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 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 TypeScript
</span> </span>
</p> </p>

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

@@ -47,10 +47,10 @@ const Navbar = () => {
return ( return (
<> <>
<nav <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 scrolled
? "bg-transparent border-transparent" ? "border-transparent bg-transparent"
: "dark:bg-gray-950/80 bg-gray-50/80 backdrop-blur-xl border-b border-gray-200 dark:border-gray-800/50" : "border-gray-200 border-b bg-gray-50/80 backdrop-blur-xl dark:border-gray-800/50 dark:bg-gray-950/80"
}`} }`}
> >
<div <div
@@ -58,22 +58,22 @@ const Navbar = () => {
scrolled ? "opacity-0" : "opacity-100" scrolled ? "opacity-0" : "opacity-100"
}`} }`}
> >
<div className="w-4 h-4 rounded-sm flex items-center justify-center"> <div className="flex h-4 w-4 items-center justify-center rounded-sm">
<span className="dark:text-blue-500 text-blue-600 text-md">$_</span> <span className="text-blue-600 text-md dark:text-blue-500">$_</span>
</div> </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 Better-T Stack
</span> </span>
</div> </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 <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]" scrolled ? "w-[350px]" : "w-[240px]"
}`} }`}
> >
<div <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} style={bgStyles}
/> />
<Link <Link
@@ -82,7 +82,7 @@ const Navbar = () => {
linkRefs.current.home = ref; linkRefs.current.home = ref;
}} }}
onMouseOver={() => setActiveLink("home")} 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> <span className="text-blue-600 dark:text-blue-400">~/</span>
home home
@@ -96,7 +96,7 @@ const Navbar = () => {
}} }}
onMouseOver={() => setActiveLink("demo")} onMouseOver={() => setActiveLink("demo")}
onMouseLeave={() => setActiveLink("home")} 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> <span>demo</span>
</Link> </Link>
@@ -109,9 +109,9 @@ const Navbar = () => {
}} }}
onMouseOver={() => setActiveLink("npm")} onMouseOver={() => setActiveLink("npm")}
onMouseLeave={() => setActiveLink("home")} 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> <span>npm</span>
</Link> </Link>
@@ -123,13 +123,13 @@ const Navbar = () => {
}} }}
onMouseOver={() => setActiveLink("github")} onMouseOver={() => setActiveLink("github")}
onMouseLeave={() => setActiveLink("home")} 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 scrolled
? "opacity-100 translate-y-0" ? "translate-y-0 opacity-100"
: "opacity-0 pointer-events-none" : "pointer-events-none opacity-0"
}`} }`}
> >
<Github className="size-4 mr-1"> <Github className="mr-1 size-4">
<title>GitHub</title> <title>GitHub</title>
</Github>{" "} </Github>{" "}
Github Github
@@ -138,16 +138,16 @@ const Navbar = () => {
</div> </div>
<div <div
className={`hidden md:flex justify-end transition-opacity duration-300 ${ className={`hidden justify-end transition-opacity duration-300 md:flex ${
scrolled ? "opacity-0 pointer-events-none" : "opacity-100" scrolled ? "pointer-events-none opacity-0" : "opacity-100"
}`} }`}
> >
<Link <Link
href="https://www.github.com/better-t-stack/create-better-t-stack" href="https://www.github.com/better-t-stack/create-better-t-stack"
target="_blank" 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> <title>GitHub</title>
</Github> </Github>
Star on GitHub Star on GitHub
@@ -157,7 +157,7 @@ const Navbar = () => {
<button <button
type="button" type="button"
onClick={toggleMobileMenu} 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} aria-expanded={mobileMenuOpen}
> >
{mobileMenuOpen ? ( {mobileMenuOpen ? (
@@ -171,21 +171,21 @@ const Navbar = () => {
{/* Mobile Menu - Terminal Style */} {/* Mobile Menu - Terminal Style */}
<div <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 mobileMenuOpen
? "opacity-100 pointer-events-auto" ? "pointer-events-auto opacity-100"
: "opacity-0 pointer-events-none" : "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 */} {/* Terminal Header */}
<div className="bg-gray-200 dark:bg-gray-800 px-4 py-2 flex items-center"> <div className="flex items-center bg-gray-200 px-4 py-2 dark:bg-gray-800">
<div className="flex space-x-2 mr-4"> <div className="mr-4 flex space-x-2">
<div className="w-3 h-3 bg-red-500 rounded-full" /> <div className="h-3 w-3 rounded-full bg-red-500" />
<div className="w-3 h-3 bg-yellow-500 rounded-full" /> <div className="h-3 w-3 rounded-full bg-yellow-500" />
<div className="w-3 h-3 bg-green-500 rounded-full" /> <div className="h-3 w-3 rounded-full bg-green-500" />
</div> </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:~ better-t-stack:~
</div> </div>
</div> </div>
@@ -202,10 +202,10 @@ const Navbar = () => {
</span> </span>
</div> </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 <Link
href="/" 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)} onClick={() => setMobileMenuOpen(false)}
> >
~/home ~/home
@@ -214,18 +214,18 @@ const Navbar = () => {
<Link <Link
href="https://my-better-t-app-client.pages.dev/" href="https://my-better-t-app-client.pages.dev/"
target="_blank" 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)} onClick={() => setMobileMenuOpen(false)}
> >
~/demo ~/demo
</Link> </Link>
<div className="flex items-center"> <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 <Link
href="https://www.npmjs.com/package/create-better-t-stack" href="https://www.npmjs.com/package/create-better-t-stack"
target="_blank" 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)} onClick={() => setMobileMenuOpen(false)}
> >
~/npm ~/npm
@@ -233,11 +233,11 @@ const Navbar = () => {
</div> </div>
<div className="flex items-center"> <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 <Link
href="https://www.github.com/better-t-stack/create-better-t-stack" href="https://www.github.com/better-t-stack/create-better-t-stack"
target="_blank" 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)} onClick={() => setMobileMenuOpen(false)}
> >
~/github ~/github
@@ -255,14 +255,14 @@ const Navbar = () => {
</span> </span>
</div> </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 <Link
href="https://www.github.com/better-t-stack/create-better-t-stack" href="https://www.github.com/better-t-stack/create-better-t-stack"
target="_blank" 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)} onClick={() => setMobileMenuOpen(false)}
> >
<Github className="size-5 mr-2" /> <Github className="mr-2 size-5" />
Star on GitHub Star on GitHub
</Link> </Link>
</div> </div>
@@ -272,7 +272,7 @@ const Navbar = () => {
user@better-t-stack user@better-t-stack
</span> </span>
<span className="text-gray-600 dark:text-gray-400">:~$</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> </div>
</div> </div>

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

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

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

@@ -2,14 +2,14 @@ const SideCircles = () => {
return ( return (
<> <>
<div> <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="-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="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="-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="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-[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> <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="-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="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="-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="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-[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>
</> </>
); );

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

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

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

@@ -132,11 +132,11 @@ export default function TechShowcase() {
: null; : null;
return ( 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"> <div className="mb-8 flex flex-wrap justify-center gap-3">
<button <button
type="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 activeCategory === null
? "bg-blue-500 text-white dark:text-white" ? "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" : "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 <button
key={category} key={category}
type="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 === category activeCategory === category
? "bg-blue-500 text-white dark:text-white" ? "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" : "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> </div>
{activeCategory && ( {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) => ( {filteredTech.map((tech) => (
<motion.div <motion.div
key={tech.name} key={tech.name}
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 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} {tech.name}
</h3> </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} {tech.description}
</p> </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" ? ( {tech.category === "tooling" || tech.category === "database" ? (
<span> <span>
{tech.name === "Drizzle ORM" || {tech.name === "Drizzle ORM" ||
@@ -203,40 +203,40 @@ export default function TechShowcase() {
<div className="space-y-12"> <div className="space-y-12">
{groupedTech.map((group) => ( {groupedTech.map((group) => (
<div key={group.category} className="relative"> <div key={group.category} className="relative">
<div className="flex items-center mb-4"> <div className="mb-4 flex items-center">
<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="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]} {categoryIcons[group.category as keyof typeof categoryIcons]}
</div> </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}/ {group.category}/
</h2> </h2>
</div> </div>
<div className="border-l-2 border-gray-200 dark:border-gray-800 pl-6 ml-3 pb-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 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">
{group.items.map((tech) => ( {group.items.map((tech) => (
<motion.div <motion.div
key={tech.name} key={tech.name}
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} 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"> <div className="flex items-start justify-between">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white"> <h3 className="font-semibold text-gray-900 text-lg dark:text-white">
{tech.name} {tech.name}
</h3> </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" || {group.category === "tooling" ||
tech.category === "database" tech.category === "database"
? "optional" ? "optional"
: "core"} : "core"}
</div> </div>
</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} {tech.description}
</p> </p>
<div className="mt-3 pt-2 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between"> <div className="mt-3 flex items-center justify-between border-gray-200 border-t pt-2 dark:border-gray-800">
<span className="text-xs text-gray-500 dark:text-gray-500 font-mono"> <span className="font-mono text-gray-500 text-xs dark:text-gray-500">
{group.category === "tooling" || {group.category === "tooling" ||
tech.category === "database" tech.category === "database"
? tech.name === "Drizzle ORM" || ? tech.name === "Drizzle ORM" ||
@@ -261,7 +261,7 @@ export default function TechShowcase() {
)} )}
<div className="mt-10 text-center"> <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 <span className="text-green-500 dark:text-green-400">$</span> npx
create-better-t-stack create-better-t-stack
<span className="text-blue-500 dark:text-blue-400"> <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; const currentPage = Math.floor(startIndex / tweetsPerPage) + 1;
return ( return (
<section className="w-full max-w-7xl mx-auto space-y-16 mt-20 relative z-10 px-4 sm:px-6"> <section className="relative z-10 mx-auto mt-20 w-full max-w-7xl space-y-16 px-4 sm:px-6">
<div className="text-center space-y-8 relative"> <div className="relative space-y-8 text-center">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -82,15 +82,15 @@ export default function Testimonials() {
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
className="relative" className="relative"
> >
<h2 className="text-3xl sm:text-4xl font-bold"> <h2 className="font-bold text-3xl sm:text-4xl">
<span className="text-blue-500 dark:text-blue-400 font-mono mr-1"> <span className="mr-1 font-mono text-blue-500 dark:text-blue-400">
{">"} {">"}
</span> </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 Developer Feedback
</span> </span>
</h2> </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>
<motion.p <motion.p
@@ -98,7 +98,7 @@ export default function Testimonials() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }} viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.5, delay: 0.2 }} 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 what devs are saying about Better-T-Stack
</motion.p> </motion.p>
@@ -111,14 +111,14 @@ export default function Testimonials() {
transition={{ duration: 0.5, delay: 0.3 }} transition={{ duration: 0.5, delay: 0.3 }}
className="relative mt-8" 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="overflow-hidden rounded-xl border border-gray-300 bg-gray-100 shadow-xl dark:border-gray-700 dark:bg-gray-900">
<div className="bg-gray-200 dark:bg-gray-800 px-4 py-2 flex items-center justify-between"> <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="flex space-x-2">
<div className="w-3 h-3 rounded-full bg-red-500" /> <div className="h-3 w-3 rounded-full bg-red-500" />
<div className="w-3 h-3 rounded-full bg-yellow-500" /> <div className="h-3 w-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-green-500" />
</div> </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 Developer Feedback Terminal
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -126,7 +126,7 @@ export default function Testimonials() {
whileHover={{ scale: 1.05 }} whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
onClick={handlePrev} 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" title="Previous testimonials"
> >
<ChevronLeft className="h-3 w-3" /> <ChevronLeft className="h-3 w-3" />
@@ -136,7 +136,7 @@ export default function Testimonials() {
whileHover={{ scale: 1.05 }} whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
onClick={handleNext} 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" title="Next testimonials"
> >
<ChevronRight className="h-3 w-3" /> <ChevronRight className="h-3 w-3" />
@@ -145,22 +145,22 @@ export default function Testimonials() {
</div> </div>
<div className="p-2"> <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) => ( {visibleTweets.map((tweetIndex) => (
<Tweet key={tweetIndex} id={TWEET_IDS[tweetIndex]} /> <Tweet key={tweetIndex} id={TWEET_IDS[tweetIndex]} />
))} ))}
</div> </div>
</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"> <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} Page {currentPage} of {totalPages}
</span> </span>
</div> </div>
<div className="flex items-center gap-3"> <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) => { {Array.from({ length: totalPages }).map((_, i) => {
const isActive = i === currentPage - 1; const isActive = i === currentPage - 1;
return ( return (
@@ -169,10 +169,10 @@ export default function Testimonials() {
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation> // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
key={i} key={i}
onClick={() => setStartIndex(i * tweetsPerPage)} 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 isActive
? "bg-blue-500" ? "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}`} aria-label={`Go to page ${i + 1}`}
/> />
@@ -183,7 +183,7 @@ export default function Testimonials() {
</div> </div>
</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> </motion.div>
</section> </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 }) { export default function Layout({ children }: { children: ReactNode }) {
return ( 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 /> <Navbar />
{children} {children}
<Footer /> <Footer />

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

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

11
biome.json
View File

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

2
bun.lock
View File

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