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

update landing page ui

Browse Source
This commit is contained in:
Aman Varshney
2025-03-30 13:26:51 +05:30
parent 0cfce4a745
commit 32b0532927
9 changed files with 577 additions and 415 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/cli/package.json
View File

@@ -1,16 +1,13 @@
{
"name": "create-better-t-stack",
"version": "1.3.3",
"description": "CLI tool to scaffold Better-T Stack projects",
"description": "A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
"type": "module",
"license": "MIT",
"bin": {
"create-better-t-stack": "dist/index.js"
},
"files": [
"dist",
"template"
],
"files": ["dist", "template"],
"keywords": [],
"repository": {
"type": "git",

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

@@ -3,18 +3,11 @@ import React from "react";
const BackgroundGradients = () => {
return (
<div className="fixed inset-0 -z-10 overflow-hidden">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(168,85,247,0.08)_0%,transparent_40%),radial-gradient(circle_at_70%_60%,rgba(94,234,212,0.05)_0%,transparent_40%)] dark:bg-[radial-gradient(circle_at_30%_20%,rgba(168,85,247,0.15)_0%,transparent_40%),radial-gradient(circle_at_70%_60%,rgba(94,234,212,0.1)_0%,transparent_40%)]" />
<div className="absolute inset-0 opacity-20 dark:opacity-30">
<div className="absolute h-28 w-28 rounded-full bg-rose-300/30 dark:bg-amber-500/30 blur-[120px] top-1/4 left-1/3 " />
<div className="absolute h-32 w-32 rounded-full bg-teal-300/30 dark:bg-emerald-500/30 blur-[140px] top-2/3 right-1/4 delay-700" />
<div className="absolute h-36 w-36 rounded-full bg-purple-300/30 dark:bg-fuchsia-500/30 blur-[130px] bottom-1/4 right-1/3 delay-1000" />
<div className="absolute h-24 w-24 rounded-full bg-slate-300/30 dark:bg-slate-500/30 blur-[100px] top-1/2 left-1/2 delay-500" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(59,130,246,0.04)_0%,transparent_40%),radial-gradient(circle_at_70%_60%,rgba(79,70,229,0.03)_0%,transparent_40%)] dark:bg-[radial-gradient(circle_at_30%_20%,rgba(59,130,246,0.1)_0%,transparent_40%),radial-gradient(circle_at_70%_60%,rgba(79,70,229,0.08)_0%,transparent_40%)]" />
<div className="absolute inset-0 opacity-20 dark:opacity-25">
<div className="absolute h-28 w-28 rounded-full bg-blue-300/30 dark:bg-blue-500/20 blur-[120px] top-1/4 left-1/3" />
<div className="absolute h-32 w-32 rounded-full bg-indigo-300/30 dark:bg-indigo-500/20 blur-[140px] top-2/3 right-1/4" />
</div>
<div className="absolute inset-0 bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#1f2937_1px,transparent_1px),linear-gradient(to_bottom,#1f2937_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-[0.15]" />
</div>
);

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

@@ -1,9 +1,11 @@
"use client";
import { motion } from "framer-motion";
import { Check, CircleCheck, ClipboardCopy, Terminal } from "lucide-react";
import { useEffect, useRef, useState } from "react";
const CodeContainer = () => {
const [isOpen, setIsOpen] = useState(false);
const [selectedPM, setSelectedPM] = useState<"npm" | "pnpm" | "bun">("npm");
const [selectedPM, setSelectedPM] = useState<"npm" | "pnpm" | "bun">("bun");
const [copied, setCopied] = useState(false);
const menuRef = useRef<HTMLDivElement>(null);
const [typingComplete, setTypingComplete] = useState(false);
@@ -21,9 +23,9 @@ const CodeContainer = () => {
}, []);
const commands = {
npm: "npx create-better-t-stack@latest",
pnpm: "pnpm create better-t-stack@latest",
bun: "bun create better-t-stack@latest",
npm: "npx create-better-t-stack@latest my-better-t-app --yes",
pnpm: "pnpm create better-t-stack@latest my-better-t-app --yes",
bun: "bun create better-t-stack@latest my-better-t-app --yes",
};
const copyToClipboard = async (pm: "npm" | "pnpm" | "bun") => {
@@ -52,31 +54,31 @@ const CodeContainer = () => {
return (
<div className="w-full max-w-3xl mx-auto mt-8">
<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-gray-700 dark:text-blue-300 font-mono">
terminal
</div>
<div className="rounded-xl overflow-hidden shadow-xl border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-black text-gray-800 dark:text-white">
<div className="bg-gray-200 dark:bg-gray-800 px-4 py-2 flex items-center justify-between">
<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-xs text-gray-600 dark:text-gray-400">
Quick Install Terminal
</div>
{/* Package Manager Selector */}
<div className="relative" ref={menuRef}>
<button
type="button"
onClick={() => setIsOpen(!isOpen)}
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"
className="flex items-center px-2 py-1 text-xs bg-gray-300/50 dark:bg-gray-800/50 rounded border border-gray-300 dark:border-gray-700 hover:bg-gray-300/80 dark:hover:bg-gray-700/50"
>
<span className="text-gray-700 dark:text-blue-400 mr-2">
<Terminal className="w-3 h-3 mr-1 text-gray-600 dark:text-gray-400">
<title>Package Manager</title>
</Terminal>
<span className="text-gray-700 dark:text-gray-300 mr-1">
{selectedPM}
</span>
<svg
className="w-4 h-4 text-gray-700 dark:text-blue-400"
className="w-3 h-3 text-gray-700 dark:text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -92,36 +94,46 @@ const CodeContainer = () => {
</button>
{isOpen && (
<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">
<motion.div
initial={{ opacity: 0, y: -5 }}
animate={{ opacity: 1, y: 0 }}
className="absolute right-0 mt-1 w-36 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-md shadow-lg z-50"
>
<ul>
{(Object.keys(commands) as Array<"npm" | "pnpm" | "bun">).map(
(pm) => (
<li key={pm}>
<button
type="button"
className={`block w-full text-left px-4 py-2 text-sm ${
className={`block w-full text-left px-3 py-1.5 text-xs ${
selectedPM === pm
? "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"
? "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-l-2 border-blue-500"
: "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
}`}
onClick={() => copyToClipboard(pm)}
>
{pm}
{pm === "npm" && "npm"}
{pm === "pnpm" && "pnpm"}
{pm === "bun" && (
<span className="flex items-center">
<span className="mr-1">🥟</span> bun
</span>
)}
</button>
</li>
),
)}
</ul>
</div>
</motion.div>
)}
</div>
</div>
<div className="p-4 font-mono text-sm bg-white dark:bg-transparent">
<div className="p-4 font-mono text-sm bg-gray-50 dark:bg-gray-900">
<div className="flex items-center">
<div className="flex-grow">
<span className="text-blue-600 dark:text-blue-500 mr-2">$</span>
<span className="text-gray-800 dark:text-white">
<span className="text-green-600 dark:text-green-400 mr-2">$</span>
<span className="text-gray-700 dark:text-gray-300">
{commands[selectedPM]}
</span>
<span
@@ -134,142 +146,205 @@ const CodeContainer = () => {
▌
</span>
</div>
<button
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
type="button"
onClick={() => copyToClipboard(selectedPM)}
className="text-gray-600 dark:text-blue-400 hover:text-gray-800 dark:hover:text-blue-300"
title="Copy to clipboard"
className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
title="Copy command"
>
{copied ? (
<CheckIcon className="w-5 h-5" />
<Check className="w-4 h-4">
<title>Copied!</title>
</Check>
) : (
<CopyIcon className="w-5 h-5" />
<ClipboardCopy className="w-4 h-4">
<title>Copy to clipboard</title>
</ClipboardCopy>
)}
</button>
</motion.button>
</div>
{typingComplete && (
<>
<div className="mt-2 pl-4 text-amber-600 dark:text-yellow-400">
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
<div className="mt-3 pl-4 text-amber-600 dark:text-amber-400">
{currentStep >= 1 && (
<p
className={`transition-opacity duration-300 ${
currentStep >= 1 ? "opacity-100" : "opacity-0"
}`}
<motion.p
initial={{ opacity: 0, y: -5 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 }}
>
Creating a new Better-T-Stack project
</p>
</motion.p>
)}
{currentStep >= 2 && (
<div className="mt-2">
<p className="text-gray-800 dark:text-white">
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.2 }}
className="mt-2"
>
<p className="text-gray-700 dark:text-gray-300">
Project name:{" "}
<span className="text-amber-600 dark:text-yellow-400">
my-t-stack
<span className="text-amber-600 dark:text-amber-400">
my-better-t-app
</span>
</p>
<p className="text-gray-800 dark:text-white">
<p className="text-gray-700 dark:text-gray-300">
Frontend:{" "}
<span className="text-amber-600 dark:text-amber-400">
React Web
</span>
</p>
<p className="text-gray-700 dark:text-gray-300">
Runtime:{" "}
<span className="text-amber-600 dark:text-amber-400">
Bun
</span>
</p>
<p className="text-gray-700 dark:text-gray-300">
Backend:{" "}
<span className="text-amber-600 dark:text-amber-400">
Hono
</span>
</p>
<p className="text-gray-700 dark:text-gray-300">
Database:{" "}
<span className="text-amber-600 dark:text-yellow-400">
postgres
<span className="text-amber-600 dark:text-amber-400">
SQLite + Drizzle
</span>
</p>
<p className="text-gray-800 dark:text-white">
ORM:{" "}
<span className="text-amber-600 dark:text-yellow-400">
drizzle
</span>
</p>
<p className="text-gray-800 dark:text-white">
Authentication:{" "}
<span className="text-amber-600 dark:text-yellow-400">
yes
</span>
</p>
<p className="text-gray-800 dark:text-white">
Addons:{" "}
<span className="text-amber-600 dark:text-yellow-400">
docker, github-actions, SEO
</span>
</p>
</div>
</motion.div>
)}
</div>
{currentStep >= 3 && (
<div className="mt-3 pl-4">
<p className="text-blue-600 dark:text-blue-400">
✓ Creating project structure
</p>
{currentStep >= 4 && (
<p className="text-blue-600 dark:text-blue-400">
✓ Installing dependencies
</p>
)}
{currentStep >= 5 && (
<>
<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-gray-800 dark:text-white mt-2">
Project ready! Happy coding!
</p>
</>
)}
</div>
)}
</>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.3 }}
className="mt-3 pl-4"
>
{currentStep >= 3 && (
<motion.p
initial={{ opacity: 0, x: -5 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.4 }}
className="text-blue-600 dark:text-blue-400 flex items-center"
>
<CircleCheck className="w-4 h-4 mr-1">
<title>Completed</title>
</CircleCheck>
Creating project structure
</motion.p>
)}
{currentStep >= 4 && (
<motion.p
initial={{ opacity: 0, x: -5 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.5 }}
className="text-blue-600 dark:text-blue-400 flex items-center"
>
<CircleCheck className="w-4 h-4 mr-1">
<title>Completed</title>
</CircleCheck>
Installing dependencies
</motion.p>
)}
{currentStep >= 5 && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.6 }}
>
<motion.p
initial={{ opacity: 0, x: -5 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.7 }}
className="text-blue-600 dark:text-blue-400 flex items-center"
>
<CircleCheck className="w-4 h-4 mr-1">
<title>Completed</title>
</CircleCheck>
Setting up database schema
</motion.p>
<motion.p
initial={{ opacity: 0, x: -5 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.8 }}
className="text-blue-600 dark:text-blue-400 flex items-center"
>
<CircleCheck className="w-4 h-4 mr-1">
<title>Completed</title>
</CircleCheck>
Configuring authentication
</motion.p>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.9 }}
className="mt-4 flex items-center px-2 py-2 rounded bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300 border border-blue-300 dark:border-blue-800/30"
>
<svg
className="w-5 h-5 mr-2 text-blue-600 dark:text-blue-400"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<title>Success</title>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
<polyline points="22 4 12 14.01 9 11.01" />
</svg>
<span>
Project ready! Run{" "}
<code className="px-1.5 py-0.5 bg-blue-200 dark:bg-blue-800/50 rounded">
cd my-better-t-app
</code>{" "}
and{" "}
<code className="px-1.5 py-0.5 bg-blue-200 dark:bg-blue-800/50 rounded">
{selectedPM === "npm" && "npm run dev"}
{selectedPM === "pnpm" && "pnpm dev"}
{selectedPM === "bun" && "bun dev"}
</code>
</span>
</motion.div>
</motion.div>
)}
</motion.div>
</motion.div>
)}
<div className={`flex mt-4 ${typingComplete ? "" : "hidden"}`}>
<span className="text-blue-600 dark:text-blue-500 mr-2">$</span>
<div
className={`flex mt-4 ${
currentStep >= 5 && typingComplete ? "" : "hidden"
}`}
>
<span className="text-green-600 dark:text-green-400 mr-2">$</span>
<span className="text-blue-600 dark:text-blue-500 animate-pulse">
▌
</span>
</div>
</div>
<div className="bg-gray-200 dark:bg-gray-900 border-t border-gray-300 dark:border-gray-700 px-4 py-2">
<div className="flex items-center justify-center text-xs text-gray-600 dark:text-gray-400">
<span className="inline-flex items-center gap-1.5">
<span>For custom options, use</span>
<code className="px-1.5 py-0.5 bg-gray-300 dark:bg-gray-700 rounded">
{selectedPM === "npm" && "npx"}
{selectedPM === "pnpm" && "pnpm dlx"}
{selectedPM === "bun" && "bunx"} create-better-t-stack
</code>
<span>without flags</span>
</span>
</div>
</div>
</div>
</div>
);
};
const CopyIcon = ({ className = "" }) => (
<svg
className={className}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>copy</title>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
/>
</svg>
);
const CheckIcon = ({ className = "" }) => (
<svg
className={className}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>check</title>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 13l4 4L19 7"
/>
</svg>
);
export default CodeContainer;

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

@@ -4,57 +4,62 @@ import StackArchitect from "./StackArchitech";
export default function CustomizableSection() {
return (
<section className="w-full max-w-7xl mx-auto space-y-12 mt-24 relative z-50 px-4">
<div className="text-center space-y-6 relative z-10 border dark:border-gray-700/30 border-gray-500/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 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="relative sm:text-4xl text-3xl md:text-5xl font-bold pb-3 group"
>
<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-500 via-purple-500 to-pink-500 dark:from-blue-400 dark:via-purple-400 dark:to-pink-400 transition-all duration-300">
Your Stack, Your Choice
</span>
</motion.h2>
<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>
<section className="w-full max-w-6xl mx-auto space-y-16 mt-20 relative z-10 px-4 sm:px-6">
<div className="text-center space-y-8 relative">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
className="space-y-4 max-w-3xl mx-auto"
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.5 }}
className="relative"
>
<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
<h2 className="text-3xl sm:text-4xl font-bold">
<span className="text-blue-500 dark:text-blue-400 font-mono mr-1">
{">"}
</span>
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-blue-400 dark:to-indigo-500">
Your Stack, Your Choice
</span>
</h2>
<div className="absolute -inset-x-1/4 -inset-y-1/2 bg-gradient-to-r from-blue-300/0 via-blue-300/10 to-blue-300/0 dark:from-blue-800/0 dark:via-blue-800/10 dark:to-blue-800/0 blur-3xl -z-10" />
</motion.div>
<motion.div
initial={{ opacity: 0, y: 15 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.5, delay: 0.2 }}
className="space-y-6 max-w-3xl mx-auto"
>
<p className="text-lg sm:text-xl text-gray-700 dark:text-gray-300 leading-relaxed font-mono">
Configure your ideal TypeScript environment with all the options you
need
</p>
<div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs text-gray-600 dark:text-gray-400">
<div className="px-3 py-1 bg-gray-100 dark:bg-black/30 border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors flex items-center gap-1.5">
<Terminal className="h-3.5 w-3.5" />
<span>--multiple-runtimes</span>
<div className="flex flex-wrap justify-center gap-2 sm:gap-3 text-xs sm:text-sm text-gray-700 dark:text-gray-300">
<div className="px-3 py-1.5 bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-md flex items-center gap-1.5 transition-colors shadow-sm">
<Terminal className="h-3.5 w-3.5">
<title>Runtime Options</title>
</Terminal>
<span>--runtime</span>
</div>
<div className="px-3 py-1 bg-gray-100 dark:bg-black/30 border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors flex items-center gap-1.5">
<Code className="h-3.5 w-3.5" />
<span>--framework-choices</span>
<div className="px-3 py-1.5 bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-md flex items-center gap-1.5 transition-colors shadow-sm">
<Code className="h-3.5 w-3.5">
<title>Framework Options</title>
</Code>
<span>--framework</span>
</div>
<div className="px-3 py-1 bg-gray-100 dark:bg-black/30 border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors flex items-center gap-1.5">
<TerminalSquare className="h-3.5 w-3.5" />
<span>--database-options</span>
<div className="px-3 py-1.5 bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-md flex items-center gap-1.5 transition-colors shadow-sm">
<TerminalSquare className="h-3.5 w-3.5">
<title>Database Options</title>
</TerminalSquare>
<span>--database</span>
</div>
<div className="px-3 py-1 bg-gray-100 dark:bg-black/30 border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors flex items-center gap-1.5">
<Sliders className="h-3.5 w-3.5" />
<span>--customizable-addons</span>
<div className="px-3 py-1.5 bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-md flex items-center gap-1.5 transition-colors shadow-sm">
<Sliders className="h-3.5 w-3.5">
<title>Addon Options</title>
</Sliders>
<span>--addons</span>
</div>
</div>
</motion.div>
@@ -62,54 +67,55 @@ export default function CustomizableSection() {
<motion.div
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3, delay: 0.3 }}
className="flex flex-wrap justify-center gap-3 pt-2"
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.4, delay: 0.3 }}
className="flex flex-wrap justify-center gap-2 sm:gap-3 pt-2"
>
<Badge color="amber">Bun or Node</Badge>
<Badge color="blue">Hono or Elysia</Badge>
<Badge color="indigo">SQLite or PostgreSQL</Badge>
<Badge color="cyan">Drizzle or Prisma</Badge>
<Badge color="green">Authentication Options</Badge>
<Badge color="green">Authentication</Badge>
<Badge color="violet">Optional Addons</Badge>
</motion.div>
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 via-purple-500/5 to-pink-500/5 -z-10" />
</div>
<motion.div
initial={{ opacity: 0, y: 30 }}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.4 }}
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.6, delay: 0.2 }}
className="relative"
>
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 blur-3xl -z-10" />
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 via-transparent to-indigo-500/5 blur-3xl -z-10" />
<StackArchitect />
</motion.div>
</section>
);
}
// Helper component for colored badge pills
function Badge({
children,
color,
}: { children: React.ReactNode; color: string }) {
const colorMap = {
amber:
"bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
blue: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
"bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300 border-amber-200 dark:border-amber-800/30",
blue: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 border-blue-200 dark:border-blue-800/30",
indigo:
"bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300",
cyan: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-300",
"bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300 border-indigo-200 dark:border-indigo-800/30",
cyan: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-300 border-cyan-200 dark:border-cyan-800/30",
green:
"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 border-green-200 dark:border-green-800/30",
violet:
"bg-violet-100 text-violet-800 dark:bg-violet-900/30 dark:text-violet-300",
"bg-violet-100 text-violet-800 dark:bg-violet-900/30 dark:text-violet-300 border-violet-200 dark:border-violet-800/30",
};
return (
<span
className={`px-2.5 py-1 rounded-full text-xs font-medium ${colorMap[color as keyof typeof colorMap]}`}
className={`px-2.5 py-1 rounded-full text-xs font-medium border ${
colorMap[color as keyof typeof colorMap]
} shadow-sm`}
>
{children}
</span>

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

@@ -1,69 +1,120 @@
import { Github } from "lucide-react";
import Link from "next/link";
const Footer = () => {
return (
<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">
<footer className="relative w-full font-mono border-t border-gray-200 dark:border-gray-800">
<div className="max-w-6xl mx-auto px-4 sm:px-6 py-12">
<div className="grid md:grid-cols-3 gap-8 mb-12">
<div>
<h3 className="text-gray-900 dark:text-white font-bold mb-3 text-lg">
<span className="text-blue-500">$</span> better-t.stack
<h3 className="text-gray-900 dark:text-white font-bold mb-4 text-lg flex items-center gap-2">
<span>Better-T Stack</span>
</h3>
<p className="text-gray-600 dark:text-gray-400">
The ultimate TypeScript scaffolding tool for modern web
<p className="text-gray-600 dark:text-gray-400 leading-relaxed">
Type-safe, modern TypeScript scaffolding for full-stack web
development
</p>
<div className="mt-4 flex space-x-3">
<Link
href="https://github.com/better-t-stack/create-better-t-stack"
target="_blank"
className="text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors"
aria-label="GitHub"
>
<Github size={18} />
</Link>
<Link
href="https://www.npmjs.com/package/create-better-t-stack"
target="_blank"
className="text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors"
aria-label="NPM"
>
<svg
viewBox="0 0 24 24"
width="18"
height="18"
fill="currentColor"
>
<title>NPM</title>
<path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331z" />
</svg>
</Link>
</div>
</div>
<div>
<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 className="text-gray-900 dark:text-white font-bold mb-4 text-lg">
Resources
</h3>
<ul className="text-gray-600 dark:text-gray-400 space-y-2">
<ul className="text-gray-600 dark:text-gray-400 space-y-2.5">
<li>
<Link
target="_blank"
href="https://github.com/better-t-stack/create-better-t-stack"
className="hover:text-gray-900 dark:hover:text-white transition-colors"
className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
>
<span className="text-gray-500">-</span> GitHub
GitHub Repository
</Link>
</li>
<li>
<Link
target="_blank"
href="https://www.npmjs.com/package/create-better-t-stack"
className="hover:text-gray-900 dark:hover:text-white transition-colors"
className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
>
<span className="text-gray-500">-</span> NPM
NPM Package
</Link>
</li>
<li>
<Link
target="_blank"
href="https://my-better-t-app-client.pages.dev/"
className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
>
Demo Application
</Link>
</li>
{/* <li>
<Link
href="/docs"
className="hover:text-gray-900 dark:hover:text-white transition-colors"
target="_blank"
href="https://github.com/better-t-stack/create-better-t-stack#readme"
className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
>
<span className="text-gray-500">-</span> Documentation
Documentation
</Link>
</li> */}
</ul>
</div>
<div>
<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 className="text-gray-900 dark:text-white font-bold mb-4 text-lg">
Contact
</h3>
<p className="text-gray-600 dark:text-gray-400">
<span className="text-gray-500">echo</span>{" "}
&quot;amanvarshney.work@gmail.com&quot;
</p>
<div className="text-gray-600 dark:text-gray-400 space-y-2.5">
<p className="flex items-center">
<span className="font-mono bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm mr-2">
$
</span>
<span>amanvarshney.work@gmail.com</span>
</p>
<p className="mt-3">
Have questions or feedback? Feel free to reach out or open an
issue on GitHub.
</p>
</div>
</div>
</div>
<div className="mt-12 pt-8 border-t border-gray-300 dark:border-gray-800/30">
<p className="text-center text-gray-500">
<div className="mt-12 pt-6 border-t border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row justify-between items-center gap-4">
<p className="text-gray-500 text-sm">
© {new Date().getFullYear()} Better-T Stack. All rights reserved.
</p>
<p className="text-center text-gray-600 text-sm mt-2">
Made with <span className="text-blue-500">TypeScript</span> ♥
<p className="text-gray-500 text-sm flex items-center gap-1.5">
Built with
<span className="bg-gradient-to-r from-blue-500 to-indigo-600 bg-clip-text text-transparent font-medium">
TypeScript
</span>
</p>
</div>
</div>

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

@@ -1,5 +1,5 @@
"use client";
import { Github } from "lucide-react";
import { Github, Menu, X } from "lucide-react";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import PackageIcon from "./Icons";
@@ -8,6 +8,7 @@ const Navbar = () => {
const [activeLink, setActiveLink] = useState("home");
const [bgStyles, setBgStyles] = useState({});
const [scrolled, setScrolled] = useState(false);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const linkRefs = useRef<{ [key: string]: HTMLAnchorElement | null }>({});
useEffect(() => {
@@ -15,7 +16,7 @@ const Navbar = () => {
const linkElement = linkRefs.current[linkId];
if (linkElement) {
setBgStyles({
padding: "1rem 0rem",
padding: "0.75rem 0rem",
width: `${linkElement.clientWidth - 12}px`,
transform: `translateX(${linkElement.offsetLeft}px)`,
opacity: 1,
@@ -39,152 +40,191 @@ const Navbar = () => {
};
}, [activeLink]);
const toggleMobileMenu = () => {
setMobileMenuOpen(!mobileMenuOpen);
};
return (
<nav
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"
: " dark:sm:bg-black/40 sm:backdrop-blur-xl sm:border-b sm:bg-white/40 border-blue-400/20"
}`}
>
<div
className={`max-md:hidden flex flex-row items-center space-x-2 transition-opacity duration-300 ${
scrolled ? "opacity-0" : "opacity-100"
<>
<nav
className={`fixed top-0 right-0 z-[100] w-screen px-4 sm:px-8 py-4 flex justify-between items-center transition-all duration-300 ${
scrolled
? "bg-transparent border-transparent"
: "dark:bg-gray-950/80 bg-gray-50/80 backdrop-blur-xl border-b border-gray-200 dark:border-gray-800/50"
}`}
>
<div className="w-4 h-4 rounded-sm flex items-center justify-center">
<span className=" dark:text-blue-500 text-blue-600 text-md">$_</span>
</div>
<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 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-[350px]" : "sm:w-[240px] w-[280px]"
className={`flex flex-row items-center space-x-3 transition-opacity duration-300 ${
scrolled ? "opacity-0" : "opacity-100"
}`}
>
<div
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
href="/"
ref={(ref) => {
linkRefs.current.home = ref;
}}
onMouseOver={() => setActiveLink("home")}
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=" dark:text-blue-500 text-blue-600">~/</span>
home
</Link>
{/* <Link
href="https://www.github.com/better-t-stack/create-better-t-stack"
target="_blank"
ref={(ref) => {
linkRefs.current.github = ref;
}}
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"
>
<PackageIcon pm="github" className="w-4 h-4" />{" "}
<span className="max-sm:hidden">github</span>
</Link> */}
<Link
href="https://my-better-t-app-client.pages.dev/"
target="_blank"
ref={(ref) => {
linkRefs.current.demo = ref;
}}
onMouseOver={() => setActiveLink("demo")}
onMouseLeave={() => setActiveLink("home")}
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>
<Link
href="https://www.npmjs.com/package/create-better-t-stack"
target="_blank"
ref={(ref) => {
linkRefs.current.npm = ref;
}}
onMouseOver={() => setActiveLink("npm")}
onMouseLeave={() => setActiveLink("home")}
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>
</Link>
<div className="w-4 h-4 rounded-sm flex items-center justify-center">
<span className="dark:text-blue-500 text-blue-600 text-md">$_</span>
</div>
<span className="text-gray-600 dark:text-gray-100 font-semibold text-md">
Better-T Stack
</span>
</div>
{/* <span
className="text-blue-500 transition-all duration-300"
style={{
opacity: scrolled ? 1 : 0,
transform: scrolled ? "translateY(0)" : "translateY(-8px)",
}}
>
|
</span> */}
{/*
<Link
href="/docs"
ref={(ref) => {
linkRefs.current.documentation = ref;
}}
onMouseOver={() => setActiveLink("documentation")}
onMouseLeave={() => setActiveLink("home")}
style={{
transform: scrolled ? "translateY(0)" : "sm:translateY(-8px)",
}}
className={`hover:text-blue-300 text-gray-300 transition-all duration-300 py-2 px-4 rounded-md font-mono ${
scrolled
? "sm:opacity-100 sm:translate-y-0"
: "sm:opacity-0 sm:pointer-events-none"
<div className="hidden md:flex justify-center">
<div
className={`flex items-center backdrop-blur-sm bg-gray-100/90 dark:bg-gray-900/90 rounded-lg border border-gray-200 dark:border-gray-800 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${
scrolled ? "w-[350px]" : "w-[240px]"
}`}
>
documentation
</Link>
*/}
<div
className="absolute transition-all duration-200 ease-in-out bg-white dark:bg-gray-800 rounded-md shadow-sm"
style={bgStyles}
/>
<Link
href="/"
ref={(ref) => {
linkRefs.current.home = ref;
}}
onMouseOver={() => setActiveLink("home")}
className="text-gray-700 dark:text-gray-300 dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative font-mono"
>
<span className="text-blue-600 dark:text-blue-400">~/</span>
home
</Link>
<Link
href="https://my-better-t-app-client.pages.dev/"
target="_blank"
ref={(ref) => {
linkRefs.current.demo = ref;
}}
onMouseOver={() => setActiveLink("demo")}
onMouseLeave={() => setActiveLink("home")}
className="text-gray-700 dark:text-gray-300 dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono"
>
<span>demo</span>
</Link>
<Link
href="https://www.npmjs.com/package/create-better-t-stack"
target="_blank"
ref={(ref) => {
linkRefs.current.npm = ref;
}}
onMouseOver={() => setActiveLink("npm")}
onMouseLeave={() => setActiveLink("home")}
className="text-gray-700 dark:text-gray-300 dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono"
>
<PackageIcon pm="npm" className="w-4 h-4 rounded-full" />{" "}
<span>npm</span>
</Link>
<Link
href="https://www.github.com/better-t-stack/create-better-t-stack"
target="_blank"
ref={(ref) => {
linkRefs.current.github = ref;
}}
onMouseOver={() => setActiveLink("github")}
onMouseLeave={() => setActiveLink("home")}
className={`text-gray-700 dark:text-gray-300 dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono ${
scrolled
? "opacity-100 translate-y-0"
: "opacity-0 pointer-events-none"
}`}
>
<Github className="size-4 mr-1">
<title>GitHub</title>
</Github>{" "}
Github
</Link>
</div>
</div>
<div
className={`hidden md:flex justify-end transition-opacity duration-300 ${
scrolled ? "opacity-0 pointer-events-none" : "opacity-100"
}`}
>
<Link
href="https://www.github.com/better-t-stack/create-better-t-stack"
target="_blank"
ref={(ref) => {
linkRefs.current.github = ref;
}}
onMouseOver={() => setActiveLink("github")}
onMouseLeave={() => setActiveLink("home")}
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"
}`}
className="inline-flex items-center backdrop-blur-sm bg-gray-100/90 dark:bg-gray-900/90 rounded-lg border border-gray-200 dark:border-gray-800 py-1 px-4 text-sm font-mono text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-300 transition-colors"
>
<Github className="size-4 mr-2" /> Github
<Github className="size-4 mr-2">
<title>GitHub</title>
</Github>
Star on GitHub
</Link>
</div>
</div>
<div
className={`flex justify-end transition-opacity duration-300 ${
scrolled ? "opacity-0 pointer-events-none" : "opacity-100"
}`}
>
<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 dark:focus:ring-offset-black focus:ring-offset-white"
<button
type="button"
onClick={toggleMobileMenu}
className="md:hidden flex items-center justify-center p-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100/50 dark:hover:bg-gray-800/50 focus:outline-none"
aria-expanded="false"
>
<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 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>
</nav>
{mobileMenuOpen ? (
<X className="size-5" aria-hidden="true" />
) : (
<Menu className="size-5" aria-hidden="true" />
)}
<span className="sr-only">Toggle menu</span>
</button>
</nav>
{mobileMenuOpen && (
<div className="md:hidden fixed inset-0 z-[99] pt-16 bg-gray-50/95 dark:bg-gray-950/95 backdrop-blur-sm">
<div className="p-4 space-y-4">
<Link
href="/"
className="flex items-center w-full px-4 py-3 font-mono text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg"
onClick={() => setMobileMenuOpen(false)}
>
<span className="text-blue-600 dark:text-blue-400 mr-2">~/</span>
Home
</Link>
<Link
href="https://my-better-t-app-client.pages.dev/"
target="_blank"
className="flex items-center w-full px-4 py-3 font-mono text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg"
onClick={() => setMobileMenuOpen(false)}
>
Demo
</Link>
<Link
href="https://www.npmjs.com/package/create-better-t-stack"
target="_blank"
className="flex items-center w-full px-4 py-3 font-mono text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg"
onClick={() => setMobileMenuOpen(false)}
>
<PackageIcon pm="npm" className="w-5 h-5 mr-3" />
NPM Package
</Link>
<Link
href="https://www.github.com/better-t-stack/create-better-t-stack"
target="_blank"
className="flex items-center w-full px-4 py-3 font-mono text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg"
onClick={() => setMobileMenuOpen(false)}
>
<Github className="size-5 mr-3" />
GitHub Repository
</Link>
<div className="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800">
<Link
href="https://www.github.com/better-t-stack/create-better-t-stack"
target="_blank"
className="flex items-center justify-center w-full px-4 py-3 bg-gray-100 dark:bg-gray-800 rounded-lg font-medium text-gray-900 dark:text-gray-100"
onClick={() => setMobileMenuOpen(false)}
>
<Github className="size-5 mr-2" />
Star on GitHub
</Link>
</div>
</div>
</div>
)}
</>
);
};

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

@@ -695,7 +695,7 @@ const StackArchitect = () => {
return (
<div className="w-full mx-auto">
<div className="rounded-xl overflow-hidden shadow-xl border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-black text-gray-800 dark:text-white">
<div className="rounded-xl overflow-hidden shadow-xl border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-white">
<div className="bg-gray-200 dark:bg-gray-800 px-4 py-2 flex items-center justify-between">
<div className="flex space-x-2">
<div className="w-3 h-3 rounded-full bg-red-500" />

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

@@ -4,15 +4,18 @@ import Footer from "./_components/Footer";
import Navbar from "./_components/Navbar";
export const metadata: Metadata = {
title: "Better-T-Stack | TypeScript Project Scaffolding",
title: "Better-T-Stack",
description:
"Create modern TypeScript applications with complete type safety from frontend to backend. Features support for multiple databases, ORMs, authentication, and more.",
"A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
keywords: [
"TypeScript",
"project scaffolding",
"type safety",
"Drizzle",
"Prisma",
"hono",
"elysia",
"turborepo",
"libSQL",
"PostgreSQL",
"Better-Auth",
@@ -74,7 +77,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">
<main className="relative z-10 min-h-svh bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-950 dark:to-black transition-color duration-300 overflow-hidden">
<Navbar />
{children}
<Footer />

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

@@ -1,6 +1,7 @@
"use client";
import ShinyText from "@/app/(home)/_components/ShinyText";
import React from "react";
import BackgroundGradients from "./_components/BackgroundGradients";
import CodeContainer from "./_components/CodeContainer";
import CustomizableSection from "./_components/CustomizableSection";
import NpmPackage from "./_components/NpmPackage";
@@ -8,80 +9,76 @@ import NpmPackage from "./_components/NpmPackage";
export default function HomePage() {
return (
<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">
<main className="flex flex-col items-center justify-start px-4 sm:px-8 pt-28 pb-16">
<BackgroundGradients />
<div className="max-w-5xl mx-auto text-center mb-16 relative z-10">
<div className="px-4 sm:px-6 lg:px-8">
<div className="flex flex-col items-center justify-center space-y-4 text-center">
<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">
<h1 className="text-5xl sm:text-7xl font-bold tracking-tight text-gray-900 dark:text-white">
<span className="block bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-indigo-600 pb-1">
Better-T Stack
</span>
<span className="relative">
<span className="absolute -bottom-1 left-0 right-0 h-1 bg-gradient-to-r from-blue-400 to-indigo-500 transform origin-left transition-transform duration-300 ease-out scale-x-0 group-hover:scale-x-100" />
</span>
</h1>
<NpmPackage />
<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>{" "}
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-500">
production-ready
</span>{" "}
<span className="inline-block transition-transform duration-200">
Better-T projects in seconds
</span>
<div className="mb-2">
<NpmPackage />
</div>
<p className="text-xl font-medium text-gray-600 dark:text-gray-300 max-w-2xl">
A modern CLI tool for scaffolding end-to-end type-safe TypeScript
projects with best practices and customizable configurations
</p>
<CodeContainer />
<div className="w-full max-w-3xl mx-auto mt-2">
<CodeContainer />
</div>
<ShinyText
text="Be the safest developer with typesafe Typescript"
text="Type-safe. Modern. Minimal. Fast."
speed={3}
className="sm:text-lg text-md text-gray-600 dark:text-[#b5b5b5a4]"
className="text-sm sm:text-base text-gray-600 dark:text-gray-400"
/>
</div>
</div>
<div className="absolute inset-0 -z-10">
<div className="absolute inset-0 bg-gradient-to-r dark:from-purple-500/20 dark:to-indigo-500/20 from-blue-300/20 to-indigo-300/20 dark:blur-3xl blur-2xl transform -skew-y-12" />
</div>
</div>
<CustomizableSection />
<div className="w-full pt-16 relative overflow-hidden">
<div className="max-w-6xl mx-auto relative">
<div className="w-full pt-12 relative">
<div className="max-w-5xl mx-auto relative">
<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 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" }}
/>
</div>
<div className="h-px flex-grow bg-gradient-to-r from-transparent to-blue-500/40" />
<div className="h-2 w-2 rounded-full bg-blue-500/50" />
</div>
<div className="relative flex flex-col items-center justify-center px-6 z-10">
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-indigo-500/10 blur-xl -z-10" />
<div className="px-6">
<div className="h-8 w-8 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-md">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4 text-white"
viewBox="0 0 20 20"
fill="currentColor"
>
<title>Code Icon</title>
<path
fillRule="evenodd"
d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</div>
</div>
<div className="hidden sm:flex items-center w-1/3">
<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" }}
/>
</div>
<div className="h-px flex-grow bg-gradient-to-l from-transparent to-indigo-500/70" />
<div className="h-2 w-2 rounded-full bg-indigo-500/50" />
<div className="h-px flex-grow bg-gradient-to-l from-transparent to-indigo-500/40" />
</div>
</div>
<div className="sm:hidden h-px w-full mt-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 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 dark:text-gray-800/10 text-gray-300/20 font-mono transform -rotate-12">
{"}"}
</div>
<div className="sm:hidden h-px w-full mt-6 bg-gradient-to-r from-blue-500/20 via-indigo-500/40 to-blue-500/20" />
</div>
</div>
{/* <Testimonials /> */}