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

light mode

Browse Source
This commit is contained in:
Aman Varshney
2025-03-24 03:00:24 +05:30
parent 4b7dc843ca
commit 5255c21891
19 changed files with 346 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/cli/package.json
View File

@@ -22,10 +22,7 @@
"test": "vitest run",
"prepublishOnly": "npm run build"
},
"files": [
"dist",
"template"
],
"files": ["dist", "template"],
"dependencies": {
"@clack/prompts": "^0.10.0",
"commander": "^13.1.0",

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

@@ -5,15 +5,15 @@ const CenterLines = () => {
<>
<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
shadow-lg backdrop-blur-sm"
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
shadow-lg backdrop-blur-sm"
rounded-br-3xl transform rotate-180
border-b-2 border-r-2 border-slate-700 dark:border-slate-300
shadow-lg backdrop-blur-sm"
/>
</>
);

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

@@ -52,15 +52,17 @@ const CodeContainer = () => {
return (
<div className="w-full max-w-3xl mx-auto mt-8">
<div className="rounded-md bg-gray-950/50 backdrop-blur-3xl border border-blue-500/30 overflow-hidden">
<div className="flex items-center justify-between bg-blue-900/10 px-4 py-2 border-b border-blue-800/30">
<div className="rounded-md bg-gray-50/90 dark:bg-gray-950/50 backdrop-blur-3xl border border-gray-300 dark:border-blue-500/30 overflow-hidden">
<div className="flex items-center justify-between bg-gray-200/80 dark:bg-blue-900/10 px-4 py-2 border-b border-gray-300 dark:border-blue-800/30">
<div className="flex items-center">
<div className="flex space-x-2">
<div className="w-3 h-3 rounded-full bg-red-500/60" />
<div className="w-3 h-3 rounded-full bg-yellow-500/60" />
<div className="w-3 h-3 rounded-full bg-green-500/60" />
</div>
<div className="ml-4 text-sm text-blue-300 font-mono">terminal</div>
<div className="ml-4 text-sm text-gray-700 dark:text-blue-300 font-mono">
terminal
</div>
</div>
{/* Package Manager Selector */}
@@ -68,11 +70,13 @@ const CodeContainer = () => {
<button
type="button"
onClick={() => setIsOpen(!isOpen)}
className="flex items-center px-2 py-1 text-sm bg-black/50 rounded border border-blue-500/30 hover:bg-blue-900/20"
className="flex items-center px-2 py-1 text-sm bg-white/50 dark:bg-black/50 rounded border border-gray-300 dark:border-blue-500/30 hover:bg-gray-200/80 dark:hover:bg-blue-900/20"
>
<span className="text-blue-400 mr-2">{selectedPM}</span>
<span className="text-gray-700 dark:text-blue-400 mr-2">
{selectedPM}
</span>
<svg
className="w-4 h-4 text-blue-400"
className="w-4 h-4 text-gray-700 dark:text-blue-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -88,7 +92,7 @@ const CodeContainer = () => {
</button>
{isOpen && (
<div className="absolute right-0 mt-2 w-36 bg-black border border-blue-500/30 rounded-md shadow-lg z-50">
<div className="absolute right-0 mt-2 w-36 bg-white dark:bg-black border border-gray-300 dark:border-blue-500/30 rounded-md shadow-lg z-50">
<ul>
{(Object.keys(commands) as Array<"npm" | "pnpm" | "bun">).map(
(pm) => (
@@ -97,8 +101,8 @@ const CodeContainer = () => {
type="button"
className={`block w-full text-left px-4 py-2 text-sm ${
selectedPM === pm
? "bg-blue-900/30 text-blue-400"
: "text-gray-300 hover:bg-blue-900/20"
? "bg-gray-200 dark:bg-blue-900/30 text-gray-800 dark:text-blue-400"
: "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-blue-900/20"
}`}
onClick={() => copyToClipboard(pm)}
>
@@ -113,14 +117,18 @@ const CodeContainer = () => {
</div>
</div>
<div className="p-4 font-mono text-sm">
<div className="p-4 font-mono text-sm bg-white dark:bg-transparent">
<div className="flex items-center">
<div className="flex-grow">
<span className="text-blue-500 mr-2">$</span>
<span className="text-white">{commands[selectedPM]}</span>
<span className="text-blue-600 dark:text-blue-500 mr-2">$</span>
<span className="text-gray-800 dark:text-white">
{commands[selectedPM]}
</span>
<span
className={
typingComplete ? "hidden" : "text-blue-500 animate-pulse ml-1"
typingComplete
? "hidden"
: "text-blue-600 dark:text-blue-500 animate-pulse ml-1"
}
>
▌
@@ -129,7 +137,7 @@ const CodeContainer = () => {
<button
type="button"
onClick={() => copyToClipboard(selectedPM)}
className="text-blue-400 hover:text-blue-300"
className="text-gray-600 dark:text-blue-400 hover:text-gray-800 dark:hover:text-blue-300"
title="Copy to clipboard"
>
{copied ? (
@@ -142,7 +150,7 @@ const CodeContainer = () => {
{typingComplete && (
<>
<div className="mt-2 pl-4 text-yellow-400">
<div className="mt-2 pl-4 text-amber-600 dark:text-yellow-400">
{currentStep >= 1 && (
<p
className={`transition-opacity duration-300 ${
@@ -154,24 +162,33 @@ const CodeContainer = () => {
)}
{currentStep >= 2 && (
<div className="mt-2">
<p className="text-white">
<p className="text-gray-800 dark:text-white">
Project name:{" "}
<span className="text-yellow-400">my-t-stack</span>
<span className="text-amber-600 dark:text-yellow-400">
my-t-stack
</span>
</p>
<p className="text-white">
<p className="text-gray-800 dark:text-white">
Database:{" "}
<span className="text-yellow-400">postgres</span>
<span className="text-amber-600 dark:text-yellow-400">
postgres
</span>
</p>
<p className="text-white">
ORM: <span className="text-yellow-400">drizzle</span>
<p className="text-gray-800 dark:text-white">
ORM:{" "}
<span className="text-amber-600 dark:text-yellow-400">
drizzle
</span>
</p>
<p className="text-white">
<p className="text-gray-800 dark:text-white">
Authentication:{" "}
<span className="text-yellow-400">yes</span>
<span className="text-amber-600 dark:text-yellow-400">
yes
</span>
</p>
<p className="text-white">
<p className="text-gray-800 dark:text-white">
Addons:{" "}
<span className="text-yellow-400">
<span className="text-amber-600 dark:text-yellow-400">
docker, github-actions, SEO
</span>
</p>
@@ -181,17 +198,23 @@ const CodeContainer = () => {
{currentStep >= 3 && (
<div className="mt-3 pl-4">
<p className="text-blue-400">✓ Creating project structure</p>
<p className="text-blue-600 dark:text-blue-400">
✓ Creating project structure
</p>
{currentStep >= 4 && (
<p className="text-blue-400">✓ Installing dependencies</p>
<p className="text-blue-600 dark:text-blue-400">
✓ Installing dependencies
</p>
)}
{currentStep >= 5 && (
<>
<p className="text-blue-400">✓ Setting up database</p>
<p className="text-blue-400">
<p className="text-blue-600 dark:text-blue-400">
✓ Setting up database
</p>
<p className="text-blue-600 dark:text-blue-400">
✓ Configuring authentication
</p>
<p className="text-white mt-2">
<p className="text-gray-800 dark:text-white mt-2">
Project ready! Happy coding!
</p>
</>
@@ -202,8 +225,10 @@ const CodeContainer = () => {
)}
<div className={`flex mt-4 ${typingComplete ? "" : "hidden"}`}>
<span className="text-blue-500 mr-2">$</span>
<span className="text-blue-500 animate-pulse">▌</span>
<span className="text-blue-600 dark:text-blue-500 mr-2">$</span>
<span className="text-blue-600 dark:text-blue-500 animate-pulse">
▌
</span>
</div>
</div>
</div>

61
apps/web/src/app/(home)/_components/CodeExample.tsx
View File

@@ -3,52 +3,67 @@ import React from "react";
const CodeExample = () => {
return (
<div className="max-w-2xl mx-auto mt-8 rounded-lg overflow-hidden bg-slate-900 border border-slate-700">
<div className="flex items-center px-4 py-2 bg-slate-800">
<div className="max-w-2xl mx-auto mt-8 rounded-lg overflow-hidden bg-slate-100 dark:bg-slate-900 border border-slate-300 dark:border-slate-700">
<div className="flex items-center px-4 py-2 bg-slate-200 dark:bg-slate-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>
<span className="ml-4 text-sm text-slate-400">example.ts</span>
<span className="ml-4 text-sm text-slate-600 dark:text-slate-400">
example.ts
</span>
</div>
<div className="p-4 font-mono text-sm relative">
<div className="space-y-2">
<div className="text-slate-400">{"// ❌ Without Type Safety"}</div>
<div className="text-white">
function processUser(user){" "}
{<span className="text-red-400">console.log(user.namee)</span>}
<div className="text-slate-600 dark:text-slate-400">
{"// ❌ Without Type Safety"}
</div>
<div className="text-red-400 text-xs bg-red-900/30 p-2 rounded">
<div className="text-slate-900 dark:text-white">
function processUser(user){" "}
{
<span className="text-red-600 dark:text-red-400">
console.log(user.namee)
</span>
}
</div>
<div className="text-red-600 dark:text-red-400 text-xs bg-red-100 dark:bg-red-900/30 p-2 rounded">
Property &apos;namee&apos; does not exist on type &apos;User&apos;.
Did you mean &apos;name&apos;?
</div>
<div className="mt-6 text-slate-400">{"// ✅ With Type Safety"}</div>
<div>
<span className="text-blue-400">interface</span>
<span className="text-green-400"> User</span>
<span className="text-white"> {"{"}</span>
<div className="mt-6 text-slate-600 dark:text-slate-400">
{"// ✅ With Type Safety"}
</div>
<div className="pl-4 text-slate-200">
<div>
<span className="text-blue-600 dark:text-blue-400">interface</span>
<span className="text-green-600 dark:text-green-400"> User</span>
<span className="text-slate-900 dark:text-white"> {"{"}</span>
</div>
<div className="pl-4 text-slate-700 dark:text-slate-200">
name: string;
<br />
age: number;
</div>
<div className="text-white">{"}"}</div>
<div className="text-slate-900 dark:text-white">{"}"}</div>
<div>
<span className="text-blue-400">function</span>
<span className="text-yellow-400"> processUser</span>
<span className="text-white">(user: </span>
<span className="text-green-400">User</span>
<span className="text-white">) {"{"}</span>
<span className="text-blue-600 dark:text-blue-400">function</span>
<span className="text-yellow-600 dark:text-yellow-400">
{" "}
processUser
</span>
<span className="text-slate-900 dark:text-white">(user: </span>
<span className="text-green-600 dark:text-green-400">User</span>
<span className="text-slate-900 dark:text-white">) {"{"}</span>
</div>
<div className="pl-4 text-slate-200">
<div className="pl-4 text-slate-700 dark:text-slate-200">
console.log(user.name){" "}
<span className="text-slate-400">{"// ✨ Type checked!"}</span>
<span className="text-slate-600 dark:text-slate-400">
{"// ✨ Type checked!"}
</span>
</div>
<div className="text-white">{"}"}</div>
<div className="text-slate-900 dark:text-white">{"}"}</div>
</div>
</div>
</div>

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

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

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

@@ -4,7 +4,7 @@ import CustomizableStack from "./CustomizableStack";
export default function CustomizableSection() {
return (
<section className="w-full max-w-6xl mx-auto space-y-12 mt-24 relative z-50">
<div className="text-center space-y-6 relative z-10 border border-gray-700/30 p-6 rounded-md bg-gray-950/30 backdrop-blur-sm">
<div className="text-center space-y-6 relative z-10 border dark:border-gray-700/30 border-gray-300/30 p-6 rounded-md bg-white/80 dark:bg-gray-950/30 backdrop-blur-sm">
<div className="relative">
<motion.h2
initial={{ opacity: 0, y: 20 }}
@@ -12,14 +12,14 @@ export default function CustomizableSection() {
transition={{ duration: 0.5 }}
className="relative sm:text-4xl text-3xl md:text-5xl font-bold pb-3 group"
>
<span className="text-blue-400 font-mono mr-1 animate-pulse">
<span className="text-blue-500 dark:text-blue-400 font-mono mr-1 animate-pulse">
{">"}
</span>
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:from-purple-400 hover:to-blue-500 transition-all duration-300">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-blue-400 dark:via-purple-400 dark:to-pink-400 hover:from-purple-500 hover:to-blue-600 dark:hover:from-purple-400 dark:hover:to-blue-500 transition-all duration-300">
Your Stack, Your Choice
</span>
</motion.h2>
<div className="absolute -inset-1 bg-gradient-to-r from-gray-800/0 via-gray-700/10 to-gray-800/0 blur-xl -z-10" />
<div className="absolute -inset-1 bg-gradient-to-r from-gray-300/0 via-gray-300/10 to-gray-300/0 dark:from-gray-800/0 dark:via-gray-700/10 dark:to-gray-800/0 blur-xl -z-10" />
</div>
<motion.div
@@ -28,27 +28,27 @@ export default function CustomizableSection() {
transition={{ duration: 0.5, delay: 0.2 }}
className="space-y-4 max-w-3xl mx-auto"
>
<p className="sm:text-xl text-gray-300 leading-relaxed font-mono">
<span className="text-yellow-400">$</span> Better-T Stack with
defaults,
<span className="text-blue-400 font-semibold">
<p className="sm:text-xl text-gray-700 dark:text-gray-300 leading-relaxed font-mono">
<span className="text-yellow-600 dark:text-yellow-400">$</span>{" "}
Better-T Stack with defaults,
<span className="text-blue-600 dark:text-blue-400 font-semibold">
{" "}
customizable options
</span>{" "}
for your perfect development environment
</p>
<div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs text-gray-400">
<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
<div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs text-gray-600 dark:text-gray-400">
<span className="px-3 py-1 bg-gray-100 dark:bg-black border border-gray-300 dark:border-gray-700 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors">
--multiple-database-options
</span>
<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
<span className="px-3 py-1 bg-gray-100 dark:bg-black border border-gray-300 dark:border-gray-700 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors">
--flexible-authentication
</span>
<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
<span className="px-3 py-1 bg-gray-100 dark:bg-black border border-gray-300 dark:border-gray-700 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors">
--alternative-orms
</span>
<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
<span className="px-3 py-1 bg-gray-100 dark:bg-black border border-gray-300 dark:border-gray-700 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors">
--framework-choices
</span>
</div>

16
apps/web/src/app/(home)/_components/CustomizableStack.tsx
View File

@@ -411,21 +411,21 @@ const CustomizableStack = () => {
<CommandDisplay command={command} />
</div>
<div className="relative rounded-xl border border-gray-800 overflow-hidden">
<div className="absolute inset-0 backdrop-blur-3xl bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10" />
<div className="relative rounded-xl border border-gray-800 dark:border-gray-800 border-gray-300 overflow-hidden">
<div className="absolute inset-0 backdrop-blur-3xl bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 dark:from-blue-500/10 dark:via-purple-500/10 dark:to-pink-500/10 from-blue-500/5 via-purple-500/5 to-pink-500/5" />
<div className="absolute left-0 top-0 bottom-0 lg:w-52 md:w-44 w-36 z-50 bg-gray-950/30 border-r border-gray-800/50">
<div className="absolute left-0 top-0 bottom-0 lg:w-52 md:w-44 w-36 z-50 bg-white/70 dark:bg-gray-950/30 border-r border-gray-300/50 dark:border-gray-800/50">
<TechSelector onSelect={handleTechSelect} activeNodes={activeNodes} />
</div>
<div className="max-sm:hidden bg-gray-950/30 lg:p-4 p-1 absolute lg:top-4 top-2 lg:right-4 right-2 z-50 w-80 rounded-xl border border-gray-800 backdrop-blur-3xl">
<div className="lg:text-sm text-xs text-gray-300 text-center">
<div className="max-sm:hidden bg-white/70 dark:bg-gray-950/30 lg:p-4 p-1 absolute lg:top-4 top-2 lg:right-4 right-2 z-50 w-80 rounded-xl border border-gray-300 dark:border-gray-800 backdrop-blur-3xl">
<div className="lg:text-sm text-xs text-gray-700 dark:text-gray-300 text-center">
Select technologies from the left panel to customize your stack. The
graph will automatically update connections.
</div>
</div>
<div className="h-[600px] lg:pl-52 md:pl-44 pl-36 relative backdrop-blur-sm bg-gray-950/50">
<div className="h-[600px] lg:pl-52 md:pl-44 pl-36 relative backdrop-blur-sm bg-white/50 dark:bg-gray-950/50">
<ReactFlow
nodes={nodes}
edges={edges}
@@ -448,8 +448,8 @@ const CustomizableStack = () => {
}}
>
<Background
className="bg-gray-950/5"
color="#1e293b"
className="bg-gray-100/30 dark:bg-gray-950/5"
color="currentColor"
gap={12}
size={1}
/>

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

@@ -28,26 +28,28 @@ const Featured = () => {
].map((feature) => (
<div
key={feature.title}
className="relative group p-6 bg-gray-900/50 rounded-xl border border-gray-800 hover:border-gray-700 transition-all"
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"
>
<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-400 mb-4" />
<h3 className="text-xl font-semibold text-white mb-2">
<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">
{feature.title}
</h3>
<p className="text-gray-400">{feature.description}</p>
<p className="text-gray-600 dark:text-gray-400">
{feature.description}
</p>
</div>
))}
</div>
</div>
<div className="w-full bg-gray-900/50 border-y border-gray-800 relative z-50">
<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-white mb-4">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
Write Better Code, Faster
</h2>
<p className="text-gray-400 max-w-2xl mx-auto">
<p className="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
Leverage the power of TypeScript with our carefully selected tools
and frameworks.
</p>
@@ -74,14 +76,16 @@ const Featured = () => {
].map((item) => (
<div
key={item.title}
className="flex items-start space-x-4 p-4 rounded-lg hover:bg-gray-800/50 transition-colors"
className="flex items-start space-x-4 p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors"
>
<ArrowRight className="w-6 h-6 text-blue-400 mt-1" />
<ArrowRight className="w-6 h-6 text-blue-500 dark:text-blue-400 mt-1" />
<div>
<h3 className="text-lg font-semibold text-white">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
{item.title}
</h3>
<p className="text-gray-400">{item.description}</p>
<p className="text-gray-600 dark:text-gray-400">
{item.description}
</p>
</div>
</div>
))}
@@ -89,20 +93,20 @@ 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-gray-900 rounded-lg p-6 border border-gray-800">
<pre className="text-sm text-gray-300 overflow-x-auto">
<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">
<code>{`// Type-safe API endpoint
export const userRouter = router({
get: publicProcedure
.input(z.string())
.query(async ({ input }) => {
const user = await db
.select()
.from(users)
.where(eq(users.id, input));
get: publicProcedure
.input(z.string())
.query(async ({ input }) => {
const user = await db
.select()
.from(users)
.where(eq(users.id, input));
return user;
})
return user;
})
});`}</code>
</pre>
</div>
@@ -112,10 +116,10 @@ export const userRouter = router({
</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-white mb-6">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
Ready to Build Something Amazing?
</h2>
<p className="text-gray-400 max-w-xl mx-auto mb-8">
<p className="text-gray-600 dark:text-gray-400 max-w-xl mx-auto mb-8">
Start your next project with Better-T Stack and experience the future
of web development.
</p>

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

@@ -2,28 +2,28 @@ import Link from "next/link";
const Footer = () => {
return (
<footer className="relative w-full font-mono">
<footer className="relative w-full font-mono dark:bg-gray-900 bg-gray-100">
<div className="max-w-6xl mx-auto px-4 py-12 relative">
<div className="grid md:grid-cols-3 gap-8 mb-12">
<div>
<h3 className="text-white font-bold mb-3 text-lg">
<h3 className="text-gray-900 dark:text-white font-bold mb-3 text-lg">
<span className="text-blue-500">$</span> better-t.stack
</h3>
<p className="text-gray-400">
<p className="text-gray-600 dark:text-gray-400">
The ultimate TypeScript scaffolding tool for modern web
development
</p>
</div>
<div>
<h3 className="text-white font-bold mb-3 text-lg">
<span className="text-gray-400">$</span> links
<h3 className="text-gray-900 dark:text-white font-bold mb-3 text-lg">
<span className="text-gray-500 dark:text-gray-400">$</span> links
</h3>
<ul className="text-gray-400 space-y-2">
<ul className="text-gray-600 dark:text-gray-400 space-y-2">
<li>
<Link
target="_blank"
href="https://github.com/better-t-stack/create-better-t-stack"
className="hover:text-white transition-colors"
className="hover:text-gray-900 dark:hover:text-white transition-colors"
>
<span className="text-gray-500">-</span> GitHub
</Link>
@@ -32,32 +32,33 @@ const Footer = () => {
<Link
target="_blank"
href="https://www.npmjs.com/package/create-better-t-stack"
className="hover:text-white transition-colors"
className="hover:text-gray-900 dark:hover:text-white transition-colors"
>
<span className="text-gray-500">-</span> NPM
</Link>
</li>
<li>
{/* <li>
<Link
href="/docs"
className="hover:text-white transition-colors"
className="hover:text-gray-900 dark:hover:text-white transition-colors"
>
<span className="text-gray-500">-</span> Documentation
</Link>
</li>
</li> */}
</ul>
</div>
<div>
<h3 className="text-white font-bold mb-3 text-lg">
<span className="text-gray-400">$</span> contact
<h3 className="text-gray-900 dark:text-white font-bold mb-3 text-lg">
<span className="text-gray-500 dark:text-gray-400">$</span>{" "}
contact
</h3>
<p className="text-gray-400">
<p className="text-gray-600 dark:text-gray-400">
<span className="text-gray-500">echo</span>{" "}
&quot;hello@better-t-stack.dev&quot;
&quot;amanvarshney.work@gmail.com&quot;
</p>
</div>
</div>
<div className="mt-12 pt-8 border-t border-gray-800/30">
<div className="mt-12 pt-8 border-t border-gray-300 dark:border-gray-800/30">
<p className="text-center text-gray-500">
© {new Date().getFullYear()} Better-T Stack. All rights reserved.
</p>

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

@@ -1,4 +1,5 @@
"use client";
import { Github } from "lucide-react";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import PackageIcon from "./Icons";
@@ -43,7 +44,7 @@ const Navbar = () => {
className={`fixed top-0 right-0 z-[100] w-screen px-8 py-5 grid grid-cols-1 md:grid-cols-3 items-center transition-all duration-300 ${
scrolled
? "bg-transparent border-transparent"
: "sm:bg-black/40 sm:backdrop-blur-xl sm:border-b border-blue-500/20"
: " dark:sm:bg-black/40 sm:backdrop-blur-xl sm:border-b sm:bg-white/40 border-blue-400/20"
}`}
>
<div
@@ -52,21 +53,21 @@ const Navbar = () => {
}`}
>
<div className="w-4 h-4 rounded-sm flex items-center justify-center">
<span className="text-blue-500 text-md">$_</span>
<span className=" dark:text-blue-500 text-blue-600 text-md">$_</span>
</div>
<span className="text-blue-400 font-semibold text-md">
<span className=" dark:text-blue-400 text-blue-500 font-semibold text-md">
Better-T Stack
</span>
</div>
<div className="flex justify-center">
<div
className={`flex items-center backdrop-blur-md bg-black/40 rounded-md border border-blue-500/30 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${
className={`flex items-center backdrop-blur-md dark:bg-black/40 bg-white/40 rounded-md border dark:border-blue-500/30 border-blue-400/30 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${
scrolled ? "w-[342px]" : "sm:w-[240px] w-[280px]"
}`}
>
<div
className="absolute transition-all duration-300 ease-in-out bg-blue-900/20 border border-blue-500/20 rounded-md py-2"
className="absolute transition-all duration-300 ease-in-out dark:bg-blue-900/20 bg-blue-200/40 border dark:border-blue-500/20 border-blue-400/20 rounded-md py-2"
style={bgStyles}
/>
<Link
@@ -75,9 +76,10 @@ const Navbar = () => {
linkRefs.current.home = ref;
}}
onMouseOver={() => setActiveLink("home")}
className="text-gray-300 hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative font-mono"
className=" dark:text-gray-300 text-gray-700 dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative font-mono"
>
<span className="text-blue-500">~/</span>home
<span className=" dark:text-blue-500 text-blue-600">~/</span>
home
</Link>
{/* <Link
href="https://www.github.com/better-t-stack/create-better-t-stack"
@@ -100,7 +102,7 @@ const Navbar = () => {
}}
onMouseOver={() => setActiveLink("demo")}
onMouseLeave={() => setActiveLink("home")}
className="text-gray-300 hidden hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative sm:flex gap-2 items-center font-mono"
className=" dark:text-gray-300 text-gray-700 hidden dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative sm:flex gap-2 items-center font-mono"
>
<span>demo</span>
</Link>
@@ -112,7 +114,7 @@ const Navbar = () => {
}}
onMouseOver={() => setActiveLink("npm")}
onMouseLeave={() => setActiveLink("home")}
className="text-gray-300 hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono"
className=" dark:text-gray-300 text-gray-700 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"
>
<PackageIcon pm="npm" className="w-4 h-4 rounded-full" />{" "}
<span>npm</span>
@@ -155,14 +157,13 @@ const Navbar = () => {
}}
onMouseOver={() => setActiveLink("github")}
onMouseLeave={() => setActiveLink("home")}
className={`text-gray-300 hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono ${
className={` dark:text-gray-300 text-gray-700 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 ${
scrolled
? "sm:opacity-100 sm:translate-y-0"
: "sm:opacity-0 sm:pointer-events-none"
}`}
>
<PackageIcon pm="github" className="w-4 h-4" />{" "}
<span className="">github</span>
<Github className="size-4 mr-2" /> Github
</Link>
</div>
</div>
@@ -175,11 +176,11 @@ const Navbar = () => {
<Link
href="https://www.github.com/better-t-stack/create-better-t-stack"
target="_blank"
className="relative max-sm:hidden inline-flex h-12 overflow-hidden rounded-md p-[1px] focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-black"
className="relative max-sm:hidden inline-flex h-12 overflow-hidden rounded-md p-[1px] focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-black focus:ring-offset-white"
>
<span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#3b82f6_0%,#6366f1_50%,#3b82f6_100%)]" />
<span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-md bg-black px-6 py-px text-sm font-medium text-blue-400 backdrop-blur-3xl font-mono">
<PackageIcon pm="github" className="w-4 h-4 mr-2" /> github
<span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-md dark:bg-black bg-white px-6 py-px text-sm font-medium dark:text-blue-400 text-blue-600 backdrop-blur-3xl font-mono">
<Github className="size-5 mr-2" /> Github
</span>
</Link>
</div>

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

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

114
apps/web/src/app/(home)/_components/TechMatrix.tsx
View File

@@ -148,7 +148,7 @@ export default function TechMatrix() {
<div
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
key={i}
className="absolute rounded-full bg-blue-500/10 blur-xl"
className="absolute rounded-full bg-blue-500/10 dark:bg-blue-500/10 blur-xl"
style={{
width: `${Math.random() * 200 + 50}px`,
height: `${Math.random() * 200 + 50}px`,
@@ -163,7 +163,7 @@ export default function TechMatrix() {
{/* Main container */}
<motion.div
className="relative border border-gray-700/50 rounded-lg overflow-hidden bg-black/60 backdrop-blur-sm shadow-lg"
className="relative border border-gray-200/50 dark:border-gray-700/50 rounded-lg overflow-hidden bg-white/60 dark:bg-black/60 backdrop-blur-sm shadow-lg"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
@@ -178,27 +178,33 @@ export default function TechMatrix() {
</div>
{/* Terminal header */}
<div className="flex items-center justify-between p-3 bg-gray-900/80 border-b border-gray-700/50">
<div className="flex items-center justify-between p-3 bg-gray-100/80 dark:bg-gray-900/80 border-b border-gray-200/50 dark:border-gray-700/50">
<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>
<div className="font-mono text-sm text-gray-400 flex items-center space-x-1">
<span className="text-green-400">user@better-t-stack</span>
<div className="font-mono text-sm text-gray-600 dark:text-gray-400 flex items-center space-x-1">
<span className="text-green-600 dark:text-green-400">
user@better-t-stack
</span>
<span>:</span>
<span className="text-blue-400">~/tech-matrix</span>
<span className="text-blue-600 dark:text-blue-400">
~/tech-matrix
</span>
<span>$</span>
</div>
<div className="text-xs text-gray-500 font-mono">v1.0.0</div>
<div className="text-xs text-gray-500 dark:text-gray-500 font-mono">
v1.0.0
</div>
</div>
<div className="p-6 relative">
{/* Command line interface effect */}
<div className="font-mono text-sm text-gray-300 mb-6 flex items-center">
<span className="text-green-400 mr-2">$</span>
<div className="font-mono text-sm text-gray-700 dark:text-gray-300 mb-6 flex items-center">
<span className="text-green-600 dark:text-green-400 mr-2">$</span>
<span>{typedCommand}</span>
<span className="h-4 w-2 bg-gray-400 animate-blink ml-1" />
<span className="h-4 w-2 bg-gray-600 dark:bg-gray-400 animate-blink ml-1" />
</div>
{/* Category filters */}
@@ -213,8 +219,8 @@ export default function TechMatrix() {
type="button"
className={`px-3 py-1 text-xs font-mono rounded-md transition-all duration-300 ${
!selectedCategory
? "bg-blue-500/20 text-blue-300 border border-blue-500/30 shadow-[0_0_10px_rgba(59,130,246,0.3)]"
: "bg-gray-800/60 border border-gray-700/50 text-gray-400 hover:bg-gray-700/30 hover:text-gray-300"
? "bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/30 shadow-[0_0_10px_rgba(59,130,246,0.3)]"
: "bg-gray-200/60 dark:bg-gray-800/60 border border-gray-300/50 dark:border-gray-700/50 text-gray-600 dark:text-gray-400 hover:bg-gray-300/30 dark:hover:bg-gray-700/30 hover:text-gray-700 dark:hover:text-gray-300"
}`}
onClick={() => setSelectedCategory(null)}
>
@@ -227,8 +233,8 @@ export default function TechMatrix() {
key={category}
className={`px-3 py-1 text-xs font-mono rounded-md transition-all duration-300 ${
selectedCategory === category
? "bg-blue-500/20 text-blue-300 border border-blue-500/30 shadow-[0_0_10px_rgba(59,130,246,0.3)]"
: "bg-gray-800/60 border border-gray-700/50 text-gray-400 hover:bg-gray-700/30 hover:text-gray-300"
? "bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/30 shadow-[0_0_10px_rgba(59,130,246,0.3)]"
: "bg-gray-200/60 dark:bg-gray-800/60 border border-gray-300/50 dark:border-gray-700/50 text-gray-600 dark:text-gray-400 hover:bg-gray-300/30 dark:hover:bg-gray-700/30 hover:text-gray-700 dark:hover:text-gray-300"
}`}
onClick={() => setSelectedCategory(category)}
>
@@ -238,7 +244,7 @@ export default function TechMatrix() {
</motion.div>
{/* Tech stack display */}
<div className="font-mono text-sm text-gray-300 relative">
<div className="font-mono text-sm text-gray-700 dark:text-gray-300 relative">
<div
className="absolute inset-0 -z-10 opacity-30"
style={{
@@ -246,10 +252,12 @@ export default function TechMatrix() {
}}
/>
<div className="text-blue-400 mb-4">
<div className="text-blue-600 dark:text-blue-400 mb-4">
{"// Better-T Stack Tech Matrix"}
</div>
<div className="text-purple-400">{"const techStack = {"}</div>
<div className="text-purple-600 dark:text-purple-400">
{"const techStack = {"}
</div>
<AnimatePresence mode="wait">
<motion.div
@@ -277,7 +285,7 @@ export default function TechMatrix() {
show: { y: 0, opacity: 1 },
}}
>
<div className="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-2 py-3 px-2 rounded-md transition-colors duration-300 hover:bg-gray-800/30 border border-transparent hover:border-gray-700/40">
<div className="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-2 py-3 px-2 rounded-md transition-colors duration-300 hover:bg-gray-100/30 dark:hover:bg-gray-800/30 border border-transparent hover:border-gray-300/40 dark:hover:border-gray-700/40">
<div className="flex items-center">
<div className="w-5 h-5 mr-2 relative overflow-hidden flex-shrink-0">
{tech.logo && (
@@ -300,21 +308,25 @@ export default function TechMatrix() {
)}
</div>
<div>
<span className="text-yellow-400 font-semibold">
<span className="text-yellow-600 dark:text-yellow-400 font-semibold">
{tech.name}
</span>
<span className="text-white">: </span>
<span className="text-green-400 group-hover:text-green-300 transition-colors">
<span className="text-gray-900 dark:text-white">
:{" "}
</span>
<span className="text-green-600 group-hover:text-green-700 dark:text-green-400 dark:group-hover:text-green-300 transition-colors">
&quot;{tech.description}&quot;
</span>
{index < filteredTech.length - 1 && (
<span className="text-white">,</span>
<span className="text-gray-900 dark:text-white">
,
</span>
)}
</div>
</div>
<div className="hidden md:flex items-center justify-between text-gray-500 group-hover:text-gray-400 transition-colors">
<div className="hidden md:flex items-center justify-between text-gray-500 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
<span>{`// ${tech.category}`}</span>
<span className="text-gray-600 text-xs">
<span className="text-gray-400 dark:text-gray-600 text-xs">
[installed]
</span>
</div>
@@ -326,15 +338,15 @@ export default function TechMatrix() {
</motion.div>
</AnimatePresence>
<div className="text-purple-400">{"};"}</div>
<div className="text-purple-600 dark:text-purple-400">{"};"}</div>
{/* Terminal footer */}
<div className="mt-6 text-gray-400 border-t border-gray-800/50 pt-4 flex items-center justify-between">
<div className="mt-6 text-gray-600 dark:text-gray-400 border-t border-gray-200/50 dark:border-gray-800/50 pt-4 flex items-center justify-between">
<div>
<span className="text-green-400">$</span> run better-t-stack
--with-typesafety
<span className="text-green-600 dark:text-green-400">$</span>{" "}
run better-t-stack --with-typesafety
</div>
<div className="text-xs text-gray-600 animate-pulse">
<div className="text-xs text-gray-400 dark:text-gray-600 animate-pulse">
Ready for deployment...
</div>
</div>
@@ -344,32 +356,32 @@ export default function TechMatrix() {
{/* Add animated style tag for custom animations */}
<style jsx>{`
@keyframes float {
0% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(20px, 20px) rotate(5deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes float {
0% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(20px, 20px) rotate(5deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes animate-gradient-x {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes animate-gradient-x {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.animate-gradient-x {
background-size: 200% 200%;
animation: animate-gradient-x 15s linear infinite;
}
.animate-gradient-x {
background-size: 200% 200%;
animation: animate-gradient-x 15s linear infinite;
}
.animate-blink {
animation: blink 1s step-end infinite;
}
.animate-blink {
animation: blink 1s step-end infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
`}</style>
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
`}</style>
</div>
);
}

26
apps/web/src/app/(home)/_components/TechNodeComponent.tsx
View File

@@ -20,16 +20,16 @@ interface TechNodeData {
export function TechNodeComponent({ data }: { data: TechNodeData }) {
const baseStyles = `
relative lg:px-5 lg:py-4 px-3 py-1 rounded-lg
transition-all duration-300
border border-white/20
before:content-[''] before:absolute before:left-0 before:top-0 before:w-1.5 before:h-full
before:rounded-l-xl ${categoryIndicators[data.category]}
`;
relative lg:px-5 lg:py-4 px-3 py-1 rounded-lg
transition-all duration-300
dark:border-white/20 border-gray-300/30
before:content-[''] before:absolute before:left-0 before:top-0 before:w-1.5 before:h-full
before:rounded-l-xl ${categoryIndicators[data.category]}
`;
const activeStyles = data.isActive
? "opacity-100 bg-gradient-to-br from-indigo-900/10 to-violet-900/10"
: "opacity-80 hover:opacity-95 bg-slate-800";
? "opacity-100 dark:bg-gradient-to-br dark:from-indigo-900/10 dark:to-violet-900/10 bg-gradient-to-br from-indigo-100/40 to-violet-100/40"
: "opacity-80 hover:opacity-95 dark:bg-slate-800 bg-slate-100";
return (
<div className="relative group">
@@ -37,19 +37,19 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
<Handle
type="target"
position={Position.Top}
className="!w-2 !h-2 !bg-indigo-400/70"
className="!w-2 !h-2 !bg-indigo-400/70 dark:!bg-indigo-400/70"
/>
)}
<div className={`${baseStyles} ${activeStyles} backdrop-blur-3xl`}>
<div className="text-white font-medium lg:text-sm text-xs tracking-wide lg:mb-1.5 mb-1">
<div className="dark:text-white text-gray-800 font-medium lg:text-sm text-xs tracking-wide lg:mb-1.5 mb-1">
{data.label}
</div>
<div className="lg:text-[11px] text-[9px] leading-relaxed text-white/80">
<div className="lg:text-[11px] text-[9px] leading-relaxed dark:text-white/80 text-gray-700">
{data.description}
</div>
{!data.isDefault && !data.isStatic && (
<div className="lg:text-[10px] text-[8px] text-indigo-200/70 mt-2 italic">
<div className="lg:text-[10px] text-[8px] dark:text-indigo-200/70 text-indigo-500/70 mt-2 italic">
Alternative Option
</div>
)}
@@ -58,7 +58,7 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
<Handle
type="source"
position={Position.Bottom}
className="!w-2 !h-2 !bg-indigo-400/70"
className="!w-2 !h-2 !bg-indigo-400/70 dark:!bg-indigo-400/70"
/>
</div>
);

25
apps/web/src/app/(home)/_components/TechSelector.tsx
View File

@@ -49,11 +49,10 @@ interface TechSelectorProps {
onSelect: (category: string, techId: string) => void;
activeNodes: ActiveNodes;
}
export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) {
return (
<div className="h-full overflow-y-auto p-3 space-y-5">
<div className="text-sm font-medium text-gray-200 border-b border-gray-700 pb-2">
<div className="h-full overflow-y-auto p-3 space-y-5 dark:bg-gray-900 bg-white">
<div className="text-sm font-medium dark:text-gray-200 text-gray-800 border-b dark:border-gray-700 border-gray-200 pb-2">
Options
</div>
@@ -61,16 +60,18 @@ export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) {
.filter(([category]) => category !== "addons")
.map(([category, options]) => (
<div key={category} className="space-y-2">
<div className="text-xs text-gray-400 capitalize">{category}</div>
<div className="text-xs dark:text-gray-400 text-gray-500 capitalize">
{category}
</div>
<div className="flex flex-wrap gap-1">
{options.map((option) => (
<Badge
key={option.id}
variant="secondary"
className={`cursor-pointer hover:bg-gray-700 text-gray-300 ${
className={`cursor-pointer dark:hover:bg-gray-700 hover:bg-gray-200 dark:text-gray-300 text-gray-700 ${
activeNodes[
category as keyof Omit<ActiveNodes, "addons">
] === option.id && "bg-blue-600 text-white"
] === option.id && "bg-blue-600 dark:text-white text-white"
}`}
onClick={() => onSelect(category, option.id)}
>
@@ -82,16 +83,16 @@ export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) {
))}
<div className="space-y-2">
<div className="text-xs text-gray-400">Addons</div>
<div className="text-xs dark:text-gray-400 text-gray-500">Addons</div>
<div className="flex flex-wrap gap-1">
{techOptions.addons.map((option) => (
<Badge
key={option.id}
variant="secondary"
className={`cursor-pointer hover:bg-gray-700 text-gray-300 ${
className={`cursor-pointer dark:hover:bg-gray-700 hover:bg-gray-200 dark:text-gray-300 text-gray-700 ${
activeNodes.addons[
option.id as keyof typeof activeNodes.addons
] === true && "bg-blue-600 text-white"
] === true && "bg-blue-600 dark:text-white text-white"
}`}
onClick={() => onSelect("addons", option.id)}
>
@@ -117,9 +118,9 @@ const Badge = ({
return (
<span
className={`
px-2 rounded-full py-1 text-xs font-medium
${className}
`}
px-2 rounded-full py-1 text-xs font-medium
${className}
`}
{...props}
onClick={props.onClick}
>

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

@@ -138,8 +138,8 @@ export default function TechShowcase() {
type="button"
className={`px-4 py-2 rounded-md font-mono text-sm transition-colors ${
activeCategory === null
? "bg-blue-500 text-white"
: "bg-gray-800 text-gray-300 hover:bg-gray-700"
? "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"
}`}
onClick={() => setActiveCategory(null)}
>
@@ -152,8 +152,8 @@ export default function TechShowcase() {
type="button"
className={`px-4 py-2 rounded-md font-mono text-sm transition-colors ${
activeCategory === category
? "bg-blue-500 text-white"
: "bg-gray-800 text-gray-300 hover:bg-gray-700"
? "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"
}`}
onClick={() => setActiveCategory(category)}
>
@@ -170,13 +170,15 @@ export default function TechShowcase() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
className="bg-gray-900/50 backdrop-blur-sm border border-gray-800 rounded-lg p-4 hover:border-blue-500/30 transition-colors"
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"
>
<h3 className="text-lg font-semibold text-white mb-2">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
{tech.name}
</h3>
<p className="text-gray-400 text-sm">{tech.description}</p>
<div className="mt-3 text-xs text-gray-500 font-mono">
<p className="text-gray-600 dark:text-gray-400 text-sm">
{tech.description}
</p>
<div className="mt-3 text-xs text-gray-500 dark:text-gray-500 font-mono">
{tech.category === "tooling" || tech.category === "database" ? (
<span>
{tech.name === "Drizzle ORM" ||
@@ -202,39 +204,39 @@ export default function TechShowcase() {
{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-500/20 flex items-center justify-center text-blue-300 mr-3">
<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">
{categoryIcons[group.category as keyof typeof categoryIcons]}
</div>
<h2 className="text-xl font-semibold text-blue-300 font-mono">
<h2 className="text-xl font-semibold text-blue-500 dark:text-blue-300 font-mono">
{group.category}/
</h2>
</div>
<div className="border-l-2 border-gray-800 pl-6 ml-3 pb-4">
<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">
{group.items.map((tech) => (
<motion.div
key={tech.name}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="bg-gray-900/30 backdrop-blur-sm border border-gray-800 rounded-md p-4 hover:bg-gray-800/30 transition-colors"
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"
>
<div className="flex justify-between items-start">
<h3 className="text-lg font-semibold text-white">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
{tech.name}
</h3>
<div className="bg-gray-800 px-2 py-1 rounded text-xs font-mono text-gray-400">
<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">
{group.category === "tooling" ||
tech.category === "database"
? "optional"
: "core"}
</div>
</div>
<p className="text-gray-400 text-sm mt-2">
<p className="text-gray-600 dark:text-gray-400 text-sm mt-2">
{tech.description}
</p>
<div className="mt-3 pt-2 border-t border-gray-800 flex items-center justify-between">
<span className="text-xs text-gray-500 font-mono">
<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">
{group.category === "tooling" ||
tech.category === "database"
? tech.name === "Drizzle ORM" ||
@@ -259,9 +261,13 @@ export default function TechShowcase() {
)}
<div className="mt-10 text-center">
<div className="inline-block bg-gray-900/50 backdrop-blur-sm border border-gray-800 rounded-md px-5 py-3 font-mono text-sm text-gray-400">
<span className="text-green-400">$</span> npx create-better-t-stack
<span className="text-blue-400"> —your-options</span>
<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">
<span className="text-green-500 dark:text-green-400">$</span> npx
create-better-t-stack
<span className="text-blue-500 dark:text-blue-400">
{" "}
—your-options
</span>
</div>
</div>
</section>

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

@@ -27,15 +27,16 @@ const testimonials = [
const Testimonials = () => {
return (
<section className="py-20 relative">
<section className="py-20 relative dark:bg-black">
<div className="absolute inset-0 opacity-90 z-0" />
<div className="max-w-6xl mx-auto relative z-10">
<div className="text-center mb-16">
<h2 className="text-4xl font-bold text-white">
<span className="text-gray-400">$</span> cat testimonials.log
<h2 className="text-4xl font-bold text-gray-900 dark:text-white">
<span className="text-gray-600 dark:text-gray-400">$</span> cat
testimonials.log
</h2>
<p className="text-gray-400 mt-4 text-lg font-mono">
<p className="text-gray-600 dark:text-gray-400 mt-4 text-lg font-mono">
<span className="text-gray-500">Output:</span> Users reporting
success with Better-T Stack
</p>
@@ -45,24 +46,30 @@ const Testimonials = () => {
{testimonials.map((testimonial) => (
<div
key={testimonial.name}
className="group rounded-md border border-gray-800 bg-black/30 p-6 hover:border-blue-500/30 transition-colors duration-200"
className="group rounded-md border border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-black/30 p-6 hover:border-blue-500/30 transition-colors duration-200"
>
<div className="flex items-center space-x-4 mb-4">
<div className="shrink-0">
<div className="w-10 h-10 rounded-sm bg-gradient-to-r from-gray-900 to-gray-800 flex items-center justify-center text-gray-300 font-mono">
<div className="w-10 h-10 rounded-sm bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center text-gray-700 dark:text-gray-300 font-mono">
{testimonial.avatar}
</div>
</div>
<div>
<h3 className="text-white font-mono">{testimonial.name}</h3>
<h3 className="text-gray-900 dark:text-white font-mono">
{testimonial.name}
</h3>
<p className="text-sm font-mono">
<span className="text-gray-400">{testimonial.role}</span>
<span className="text-gray-600 dark:text-gray-400">
{testimonial.role}
</span>
<span className="text-gray-500 mx-1">@</span>
<span className="text-gray-400">{testimonial.company}</span>
<span className="text-gray-600 dark:text-gray-400">
{testimonial.company}
</span>
</p>
</div>
</div>
<p className="text-gray-300 leading-relaxed font-mono border-l-2 border-blue-700 pl-4">
<p className="text-gray-700 dark:text-gray-300 leading-relaxed font-mono border-l-2 border-blue-700 pl-4">
{testimonial.content}
</p>
</div>
@@ -70,9 +77,9 @@ const Testimonials = () => {
</div>
<div className="text-center mt-12">
<div className="inline-block py-2 px-4 bg-black border border-gray-800 rounded-md">
<div className="inline-block py-2 px-4 bg-gray-50 dark:bg-black border border-gray-200 dark:border-gray-800 rounded-md">
<span className="text-blue-500 font-bold mr-2">$</span>
<span className="text-white font-mono">
<span className="text-gray-900 dark:text-white font-mono">
Join the growing community of developers
</span>
</div>

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

@@ -74,7 +74,7 @@ export const metadata: Metadata = {
export default function Layout({ children }: { children: ReactNode }) {
return (
<main className="relative z-10 min-h-svh bg-zinc-50 dark:bg-slate-950 transition-colors duration-300 overflow-hidden dark">
<main className="relative z-10 min-h-svh bg-zinc-50 dark:bg-slate-950 transition-colors duration-300 overflow-hidden">
<Navbar />
{children}
<Footer />

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

@@ -1,5 +1,6 @@
"use client";
import ShinyText from "@/app/(home)/_components/ShinyText";
import { useTheme } from "next-themes";
import React from "react";
import CodeContainer from "./_components/CodeContainer";
import CustomizableSection from "./_components/CustomizableSection";
@@ -9,12 +10,14 @@ import TechShowcase from "./_components/TechShowcase";
import Testimonials from "./_components/Testimonials";
export default function HomePage() {
const { theme } = useTheme();
return (
<main className="flex flex-col items-center justify-start sm:p-8 p-4 !pt-40">
<main className="flex flex-col items-center justify-start sm:p-8 p-4 !pt-40 dark:bg-gray-950 bg-gray-50 transition-colors duration-300">
<div className="max-w-6xl mx-auto text-center mb-16 relative z-50 ">
<div className="relative z-10">
<div className="flex flex-col items-center justify-center space-y-4 text-center">
<h1 className="text-6xl font-extrabold text-white">
<h1 className="text-6xl font-extrabold dark:text-white text-gray-900">
<span className="block sm:text-7xl text-6xl bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-500">
Better-T Stack
</span>
@@ -24,7 +27,7 @@ export default function HomePage() {
</h1>
<NpmPackage />
<p className="sm:text-2xl text-xl font-medium text-gray-300 max-w-2xl">
<p className="sm:text-2xl text-xl font-medium dark:text-gray-300 text-gray-700 max-w-2xl">
<span className="inline-block transform hover:scale-105 transition-transform duration-200">
Scaffold
</span>{" "}
@@ -44,26 +47,26 @@ export default function HomePage() {
</div>
</div>
<div className="absolute inset-0 -z-10">
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-indigo-500/20 blur-3xl transform -skew-y-12" />
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-indigo-500/20 dark:blur-3xl blur-2xl transform -skew-y-12" />
</div>
</div>
{/* <TerminalDisplay /> */}
<div className="w-full max-w-6xl mx-auto space-y-12 mt-12 relative z-50">
<div className="text-center space-y-6 relative z-10 border border-gray-700/30 p-6 rounded-md bg-gray-950/30 backdrop-blur-3xl">
<div className="text-center space-y-6 relative z-10 border dark:border-gray-700/30 border-gray-300/50 p-6 rounded-md dark:bg-gray-950/30 bg-white/70 backdrop-blur-3xl">
<div className="relative">
<h2 className="relative sm:text-4xl text-3xl md:text-5xl font-bold pb-3 group">
<span className="text-blue-400 font-mono mr-1 animate-pulse">
{">"}
</span>
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-white to-indigo-500 hover:from-indigo-400 hover:to-blue-500 transition-all duration-300">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-500 hover:from-indigo-400 hover:to-blue-500 transition-all duration-300 dark:via-white via-gray-800">
A Symphony of Modern Tech
</span>
</h2>
<div className="absolute -inset-1 bg-gradient-to-r from-gray-800/0 via-gray-700/10 to-gray-800/0 blur-xl -z-10" />
<div className="absolute -inset-1 bg-gradient-to-r dark:from-gray-800/0 dark:via-gray-700/10 dark:to-gray-800/0 from-gray-200/0 via-gray-300/20 to-gray-200/0 blur-xl -z-10" />
</div>
<div className="space-y-4 max-w-3xl mx-auto">
<p className="sm:text-xl text-gray-300 leading-relaxed font-mono">
<p className="sm:text-xl dark:text-gray-300 text-gray-700 leading-relaxed font-mono">
<span className="text-yellow-400">$</span> carefully orchestrated
stack of{" "}
<span className="text-blue-500 font-semibold">
@@ -71,14 +74,14 @@ export default function HomePage() {
</span>
, working in perfect harmony
</p>{" "}
<div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs text-gray-400">
<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
<div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs dark:text-gray-400 text-gray-600">
<span className="px-3 py-1 dark:bg-black bg-gray-100 dark:border-gray-700 border-gray-300 rounded-sm dark:hover:bg-gray-900/50 hover:bg-gray-200/80 transition-colors">
--end-to-end-type-safety
</span>
<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
<span className="px-3 py-1 dark:bg-black bg-gray-100 dark:border-gray-700 border-gray-300 rounded-sm dark:hover:bg-gray-900/50 hover:bg-gray-200/80 transition-colors">
--lightning-fast
</span>
<span className="px-3 py-1 bg-black border border-gray-700 rounded-sm hover:bg-gray-900/50 transition-colors">
<span className="px-3 py-1 dark:bg-black bg-gray-100 dark:border-gray-700 border-gray-300 rounded-sm dark:hover:bg-gray-900/50 hover:bg-gray-200/80 transition-colors">
--modern-tools
</span>
</div>
@@ -93,7 +96,7 @@ export default function HomePage() {
<div className="flex items-center justify-center">
<div className="hidden sm:flex items-center w-1/3">
<div className="h-px flex-grow bg-gradient-to-r from-transparent to-blue-500/70" />
<div className="h-8 w-8 rounded-full bg-gray-900 border border-gray-700 flex items-center justify-center relative">
<div className="h-8 w-8 rounded-full dark:bg-gray-900 bg-gray-100 dark:border-gray-700 border-gray-300 flex items-center justify-center relative">
<div
className="h-2 w-2 bg-blue-400 rounded-full animate-ping absolute"
style={{ animationDuration: "2.5s" }}
@@ -106,7 +109,7 @@ export default function HomePage() {
</div>
<div className="hidden sm:flex items-center w-1/3">
<div className="h-8 w-8 rounded-full bg-gray-900 border border-gray-700 flex items-center justify-center relative">
<div className="h-8 w-8 rounded-full dark:bg-gray-900 bg-gray-100 dark:border-gray-700 border-gray-300 flex items-center justify-center relative">
<div
className="h-2 w-2 bg-indigo-400 rounded-full animate-ping absolute"
style={{ animationDuration: "2.5s" }}
@@ -118,10 +121,10 @@ export default function HomePage() {
<div className="sm:hidden h-px w-full mt-4 bg-gradient-to-r from-blue-500/30 via-indigo-500 to-blue-500/30" />
<div className="absolute -top-10 left-1/4 text-6xl text-gray-800/10 font-mono transform rotate-12">
<div className="absolute -top-10 left-1/4 text-6xl dark:text-gray-800/10 text-gray-300/20 font-mono transform rotate-12">
{"{"}
</div>
<div className="absolute -bottom-10 right-1/4 text-6xl text-gray-800/10 font-mono transform -rotate-12">
<div className="absolute -bottom-10 right-1/4 text-6xl dark:text-gray-800/10 text-gray-300/20 font-mono transform -rotate-12">
{"}"}
</div>
</div>

3
apps/web/src/app/layout.tsx
View File

@@ -18,6 +18,9 @@ export default function Layout({ children }: { children: ReactNode }) {
type: "static",
},
}}
theme={{
enableSystem: true,
}}
>
{children}
</RootProvider>