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", "test": "vitest run",
"prepublishOnly": "npm run build" "prepublishOnly": "npm run build"
}, },
"files": [ "files": ["dist", "template"],
"dist",
"template"
],
"dependencies": { "dependencies": {
"@clack/prompts": "^0.10.0", "@clack/prompts": "^0.10.0",
"commander": "^13.1.0", "commander": "^13.1.0",

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

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

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

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

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

@@ -3,52 +3,67 @@ import React from "react";
const CodeExample = () => { const CodeExample = () => {
return ( return (
<div className="max-w-2xl mx-auto mt-8 rounded-lg overflow-hidden bg-slate-900 border border-slate-700"> <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-800"> <div className="flex items-center px-4 py-2 bg-slate-200 dark:bg-slate-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="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-yellow-500" />
<div className="w-3 h-3 rounded-full bg-green-500" /> <div className="w-3 h-3 rounded-full bg-green-500" />
</div> </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>
<div className="p-4 font-mono text-sm relative"> <div className="p-4 font-mono text-sm relative">
<div className="space-y-2"> <div className="space-y-2">
<div className="text-slate-400">{"// ❌ Without Type Safety"}</div> <div className="text-slate-600 dark:text-slate-400">
<div className="text-white"> {"// ❌ Without Type Safety"}
function processUser(user){" "}
{<span className="text-red-400">console.log(user.namee)</span>}
</div> </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;. Property &apos;namee&apos; does not exist on type &apos;User&apos;.
Did you mean &apos;name&apos;? Did you mean &apos;name&apos;?
</div> </div>
<div className="mt-6 text-slate-400">{"// ✅ With Type Safety"}</div> <div className="mt-6 text-slate-600 dark:text-slate-400">
<div> {"// ✅ With Type Safety"}
<span className="text-blue-400">interface</span>
<span className="text-green-400"> User</span>
<span className="text-white"> {"{"}</span>
</div> </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; name: string;
<br /> <br />
age: number; age: number;
</div> </div>
<div className="text-white">{"}"}</div> <div className="text-slate-900 dark:text-white">{"}"}</div>
<div> <div>
<span className="text-blue-400">function</span> <span className="text-blue-600 dark:text-blue-400">function</span>
<span className="text-yellow-400"> processUser</span> <span className="text-yellow-600 dark:text-yellow-400">
<span className="text-white">(user: </span> {" "}
<span className="text-green-400">User</span> processUser
<span className="text-white">) {"{"}</span> </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>
<div className="pl-4 text-slate-200"> <div className="pl-4 text-slate-700 dark:text-slate-200">
console.log(user.name){" "} 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>
<div className="text-white">{"}"}</div> <div className="text-slate-900 dark:text-white">{"}"}</div>
</div> </div>
</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 ( return (
<div className="relative group"> <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 <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-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 ? ( {copied ? (
<Check className="w-4 h-4 text-green-500" /> <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> </button>
<pre className="pr-12 max-sm:text-xs">{command}</pre> <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() { export default function CustomizableSection() {
return ( return (
<section className="w-full max-w-6xl mx-auto space-y-12 mt-24 relative z-50"> <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"> <div className="relative">
<motion.h2 <motion.h2
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@@ -12,14 +12,14 @@ export default function CustomizableSection() {
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
className="relative sm:text-4xl text-3xl md:text-5xl font-bold pb-3 group" 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>
<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 Your Stack, Your Choice
</span> </span>
</motion.h2> </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> </div>
<motion.div <motion.div
@@ -28,27 +28,27 @@ export default function CustomizableSection() {
transition={{ duration: 0.5, delay: 0.2 }} transition={{ duration: 0.5, delay: 0.2 }}
className="space-y-4 max-w-3xl mx-auto" 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 text-gray-700 dark:text-gray-300 leading-relaxed font-mono">
<span className="text-yellow-400">$</span> Better-T Stack with <span className="text-yellow-600 dark:text-yellow-400">$</span>{" "}
defaults, Better-T Stack with defaults,
<span className="text-blue-400 font-semibold"> <span className="text-blue-600 dark:text-blue-400 font-semibold">
{" "} {" "}
customizable options customizable options
</span>{" "} </span>{" "}
for your perfect development environment for your perfect development environment
</p> </p>
<div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs text-gray-400"> <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-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">
--multiple-database-options --multiple-database-options
</span> </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 --flexible-authentication
</span> </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 --alternative-orms
</span> </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 --framework-choices
</span> </span>
</div> </div>

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

@@ -411,21 +411,21 @@ const CustomizableStack = () => {
<CommandDisplay command={command} /> <CommandDisplay command={command} />
</div> </div>
<div className="relative rounded-xl border border-gray-800 overflow-hidden"> <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" /> <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} /> <TechSelector onSelect={handleTechSelect} activeNodes={activeNodes} />
</div> </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="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-300 text-center"> <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 Select technologies from the left panel to customize your stack. The
graph will automatically update connections. graph will automatically update connections.
</div> </div>
</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 <ReactFlow
nodes={nodes} nodes={nodes}
edges={edges} edges={edges}
@@ -448,8 +448,8 @@ const CustomizableStack = () => {
}} }}
> >
<Background <Background
className="bg-gray-950/5" className="bg-gray-100/30 dark:bg-gray-950/5"
color="#1e293b" color="currentColor"
gap={12} gap={12}
size={1} size={1}
/> />

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

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

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

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

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

@@ -1,4 +1,5 @@
"use client"; "use client";
import { Github } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import PackageIcon from "./Icons"; 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 ${ 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 scrolled
? "bg-transparent border-transparent" ? "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 <div
@@ -52,21 +53,21 @@ const Navbar = () => {
}`} }`}
> >
<div className="w-4 h-4 rounded-sm flex items-center justify-center"> <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> </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 Better-T Stack
</span> </span>
</div> </div>
<div className="flex justify-center"> <div className="flex justify-center">
<div <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]" scrolled ? "w-[342px]" : "sm:w-[240px] w-[280px]"
}`} }`}
> >
<div <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} style={bgStyles}
/> />
<Link <Link
@@ -75,9 +76,10 @@ const Navbar = () => {
linkRefs.current.home = ref; linkRefs.current.home = ref;
}} }}
onMouseOver={() => setActiveLink("home")} 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>
{/* <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"
@@ -100,7 +102,7 @@ const Navbar = () => {
}} }}
onMouseOver={() => setActiveLink("demo")} onMouseOver={() => setActiveLink("demo")}
onMouseLeave={() => setActiveLink("home")} 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> <span>demo</span>
</Link> </Link>
@@ -112,7 +114,7 @@ const Navbar = () => {
}} }}
onMouseOver={() => setActiveLink("npm")} onMouseOver={() => setActiveLink("npm")}
onMouseLeave={() => setActiveLink("home")} 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" />{" "} <PackageIcon pm="npm" className="w-4 h-4 rounded-full" />{" "}
<span>npm</span> <span>npm</span>
@@ -155,14 +157,13 @@ const Navbar = () => {
}} }}
onMouseOver={() => setActiveLink("github")} onMouseOver={() => setActiveLink("github")}
onMouseLeave={() => setActiveLink("home")} 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 scrolled
? "sm:opacity-100 sm:translate-y-0" ? "sm:opacity-100 sm:translate-y-0"
: "sm:opacity-0 sm:pointer-events-none" : "sm:opacity-0 sm:pointer-events-none"
}`} }`}
> >
<PackageIcon pm="github" className="w-4 h-4" />{" "} <Github className="size-4 mr-2" /> Github
<span className="">github</span>
</Link> </Link>
</div> </div>
</div> </div>
@@ -175,11 +176,11 @@ const Navbar = () => {
<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="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="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"> <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">
<PackageIcon pm="github" className="w-4 h-4 mr-2" /> github <Github className="size-5 mr-2" /> Github
</span> </span>
</Link> </Link>
</div> </div>

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

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

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

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

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

@@ -20,16 +20,16 @@ interface TechNodeData {
export function TechNodeComponent({ data }: { data: TechNodeData }) { export function TechNodeComponent({ data }: { data: TechNodeData }) {
const baseStyles = ` const baseStyles = `
relative lg:px-5 lg:py-4 px-3 py-1 rounded-lg relative lg:px-5 lg:py-4 px-3 py-1 rounded-lg
transition-all duration-300 transition-all duration-300
border border-white/20 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:content-[''] before:absolute before:left-0 before:top-0 before:w-1.5 before:h-full
before:rounded-l-xl ${categoryIndicators[data.category]} before:rounded-l-xl ${categoryIndicators[data.category]}
`; `;
const activeStyles = data.isActive const activeStyles = data.isActive
? "opacity-100 bg-gradient-to-br from-indigo-900/10 to-violet-900/10" ? "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 bg-slate-800"; : "opacity-80 hover:opacity-95 dark:bg-slate-800 bg-slate-100";
return ( return (
<div className="relative group"> <div className="relative group">
@@ -37,19 +37,19 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
<Handle <Handle
type="target" type="target"
position={Position.Top} 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={`${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} {data.label}
</div> </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} {data.description}
</div> </div>
{!data.isDefault && !data.isStatic && ( {!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 Alternative Option
</div> </div>
)} )}
@@ -58,7 +58,7 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
<Handle <Handle
type="source" type="source"
position={Position.Bottom} 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> </div>
); );

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

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

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

@@ -138,8 +138,8 @@ export default function TechShowcase() {
type="button" type="button"
className={`px-4 py-2 rounded-md font-mono text-sm transition-colors ${ className={`px-4 py-2 rounded-md font-mono text-sm transition-colors ${
activeCategory === null activeCategory === null
? "bg-blue-500 text-white" ? "bg-blue-500 text-white dark:text-white"
: "bg-gray-800 text-gray-300 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"
}`} }`}
onClick={() => setActiveCategory(null)} onClick={() => setActiveCategory(null)}
> >
@@ -152,8 +152,8 @@ export default function TechShowcase() {
type="button" type="button"
className={`px-4 py-2 rounded-md font-mono text-sm transition-colors ${ className={`px-4 py-2 rounded-md font-mono text-sm transition-colors ${
activeCategory === category activeCategory === category
? "bg-blue-500 text-white" ? "bg-blue-500 text-white dark:text-white"
: "bg-gray-800 text-gray-300 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"
}`} }`}
onClick={() => setActiveCategory(category)} onClick={() => setActiveCategory(category)}
> >
@@ -170,13 +170,15 @@ export default function TechShowcase() {
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-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} {tech.name}
</h3> </h3>
<p className="text-gray-400 text-sm">{tech.description}</p> <p className="text-gray-600 dark:text-gray-400 text-sm">
<div className="mt-3 text-xs text-gray-500 font-mono"> {tech.description}
</p>
<div className="mt-3 text-xs text-gray-500 dark:text-gray-500 font-mono">
{tech.category === "tooling" || tech.category === "database" ? ( {tech.category === "tooling" || tech.category === "database" ? (
<span> <span>
{tech.name === "Drizzle ORM" || {tech.name === "Drizzle ORM" ||
@@ -202,39 +204,39 @@ export default function TechShowcase() {
{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="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]} {categoryIcons[group.category as keyof typeof categoryIcons]}
</div> </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}/ {group.category}/
</h2> </h2>
</div> </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"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{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-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"> <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} {tech.name}
</h3> </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" || {group.category === "tooling" ||
tech.category === "database" tech.category === "database"
? "optional" ? "optional"
: "core"} : "core"}
</div> </div>
</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} {tech.description}
</p> </p>
<div className="mt-3 pt-2 border-t border-gray-800 flex items-center justify-between"> <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 font-mono"> <span className="text-xs text-gray-500 dark:text-gray-500 font-mono">
{group.category === "tooling" || {group.category === "tooling" ||
tech.category === "database" tech.category === "database"
? tech.name === "Drizzle ORM" || ? tech.name === "Drizzle ORM" ||
@@ -259,9 +261,13 @@ export default function TechShowcase() {
)} )}
<div className="mt-10 text-center"> <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"> <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-400">$</span> npx create-better-t-stack <span className="text-green-500 dark:text-green-400">$</span> npx
<span className="text-blue-400"> —your-options</span> create-better-t-stack
<span className="text-blue-500 dark:text-blue-400">
{" "}
—your-options
</span>
</div> </div>
</div> </div>
</section> </section>

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

@@ -27,15 +27,16 @@ const testimonials = [
const Testimonials = () => { const Testimonials = () => {
return ( 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="absolute inset-0 opacity-90 z-0" />
<div className="max-w-6xl mx-auto relative z-10"> <div className="max-w-6xl mx-auto relative z-10">
<div className="text-center mb-16"> <div className="text-center mb-16">
<h2 className="text-4xl font-bold text-white"> <h2 className="text-4xl font-bold text-gray-900 dark:text-white">
<span className="text-gray-400">$</span> cat testimonials.log <span className="text-gray-600 dark:text-gray-400">$</span> cat
testimonials.log
</h2> </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 <span className="text-gray-500">Output:</span> Users reporting
success with Better-T Stack success with Better-T Stack
</p> </p>
@@ -45,24 +46,30 @@ const Testimonials = () => {
{testimonials.map((testimonial) => ( {testimonials.map((testimonial) => (
<div <div
key={testimonial.name} 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="flex items-center space-x-4 mb-4">
<div className="shrink-0"> <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} {testimonial.avatar}
</div> </div>
</div> </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"> <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-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> </p>
</div> </div>
</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} {testimonial.content}
</p> </p>
</div> </div>
@@ -70,9 +77,9 @@ const Testimonials = () => {
</div> </div>
<div className="text-center mt-12"> <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-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 Join the growing community of developers
</span> </span>
</div> </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 }) { export default function Layout({ children }: { children: ReactNode }) {
return ( 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 /> <Navbar />
{children} {children}
<Footer /> <Footer />

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

@@ -1,5 +1,6 @@
"use client"; "use client";
import ShinyText from "@/app/(home)/_components/ShinyText"; import ShinyText from "@/app/(home)/_components/ShinyText";
import { useTheme } from "next-themes";
import React from "react"; import React from "react";
import CodeContainer from "./_components/CodeContainer"; import CodeContainer from "./_components/CodeContainer";
import CustomizableSection from "./_components/CustomizableSection"; import CustomizableSection from "./_components/CustomizableSection";
@@ -9,12 +10,14 @@ import TechShowcase from "./_components/TechShowcase";
import Testimonials from "./_components/Testimonials"; import Testimonials from "./_components/Testimonials";
export default function HomePage() { export default function HomePage() {
const { theme } = useTheme();
return ( 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="max-w-6xl mx-auto text-center mb-16 relative z-50 ">
<div className="relative z-10"> <div className="relative z-10">
<div className="flex flex-col items-center justify-center space-y-4 text-center"> <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"> <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 Better-T Stack
</span> </span>
@@ -24,7 +27,7 @@ export default function HomePage() {
</h1> </h1>
<NpmPackage /> <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"> <span className="inline-block transform hover:scale-105 transition-transform duration-200">
Scaffold Scaffold
</span>{" "} </span>{" "}
@@ -44,26 +47,26 @@ export default function HomePage() {
</div> </div>
</div> </div>
<div className="absolute inset-0 -z-10"> <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>
</div> </div>
{/* <TerminalDisplay /> */} {/* <TerminalDisplay /> */}
<div className="w-full max-w-6xl mx-auto space-y-12 mt-12 relative z-50"> <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"> <div className="relative">
<h2 className="relative sm:text-4xl text-3xl md:text-5xl font-bold pb-3 group"> <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 className="text-blue-400 font-mono mr-1 animate-pulse">
{">"} {">"}
</span> </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 A Symphony of Modern Tech
</span> </span>
</h2> </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>
<div className="space-y-4 max-w-3xl mx-auto"> <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 <span className="text-yellow-400">$</span> carefully orchestrated
stack of{" "} stack of{" "}
<span className="text-blue-500 font-semibold"> <span className="text-blue-500 font-semibold">
@@ -71,14 +74,14 @@ export default function HomePage() {
</span> </span>
, working in perfect harmony , working in perfect harmony
</p>{" "} </p>{" "}
<div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs text-gray-400"> <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 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">
--end-to-end-type-safety --end-to-end-type-safety
</span> </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 --lightning-fast
</span> </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 --modern-tools
</span> </span>
</div> </div>
@@ -93,7 +96,7 @@ export default function HomePage() {
<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 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-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 <div
className="h-2 w-2 bg-blue-400 rounded-full animate-ping absolute" className="h-2 w-2 bg-blue-400 rounded-full animate-ping absolute"
style={{ animationDuration: "2.5s" }} style={{ animationDuration: "2.5s" }}
@@ -106,7 +109,7 @@ export default function HomePage() {
</div> </div>
<div className="hidden sm:flex items-center w-1/3"> <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 <div
className="h-2 w-2 bg-indigo-400 rounded-full animate-ping absolute" className="h-2 w-2 bg-indigo-400 rounded-full animate-ping absolute"
style={{ animationDuration: "2.5s" }} 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="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>
<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>
</div> </div>

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

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