mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
update landing page ui
This commit is contained in:
Aman Varshney
@@ -1,16 +1,13 @@
|
|||||||
{
|
{
|
||||||
"name": "create-better-t-stack",
|
"name": "create-better-t-stack",
|
||||||
"version": "1.3.3",
|
"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",
|
"type": "module",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"bin": {
|
"bin": {
|
||||||
"create-better-t-stack": "dist/index.js"
|
"create-better-t-stack": "dist/index.js"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": ["dist", "template"],
|
||||||
"dist",
|
|
||||||
"template"
|
|
||||||
],
|
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|||||||
@@ -3,18 +3,11 @@ import React from "react";
|
|||||||
const BackgroundGradients = () => {
|
const BackgroundGradients = () => {
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 -z-10 overflow-hidden">
|
<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 bg-[radial-gradient(circle_at_30%_20%,rgba(59,130,246,0.04)_0%,transparent_40%),radial-gradient(circle_at_70%_60%,rgba(79,70,229,0.03)_0%,transparent_40%)] dark:bg-[radial-gradient(circle_at_30%_20%,rgba(59,130,246,0.1)_0%,transparent_40%),radial-gradient(circle_at_70%_60%,rgba(79,70,229,0.08)_0%,transparent_40%)]" />
|
||||||
|
<div className="absolute inset-0 opacity-20 dark:opacity-25">
|
||||||
<div className="absolute inset-0 opacity-20 dark:opacity-30">
|
<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-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-indigo-300/30 dark:bg-indigo-500/20 blur-[140px] top-2/3 right-1/4" />
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#1f2937_1px,transparent_1px),linear-gradient(to_bottom,#1f2937_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-[0.15]" />
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] 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>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,9 +1,11 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Check, CircleCheck, ClipboardCopy, Terminal } from "lucide-react";
|
||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
|
||||||
const CodeContainer = () => {
|
const CodeContainer = () => {
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
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 [copied, setCopied] = useState(false);
|
||||||
const menuRef = useRef<HTMLDivElement>(null);
|
const menuRef = useRef<HTMLDivElement>(null);
|
||||||
const [typingComplete, setTypingComplete] = useState(false);
|
const [typingComplete, setTypingComplete] = useState(false);
|
||||||
@@ -21,9 +23,9 @@ const CodeContainer = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const commands = {
|
const commands = {
|
||||||
npm: "npx create-better-t-stack@latest",
|
npm: "npx create-better-t-stack@latest my-better-t-app --yes",
|
||||||
pnpm: "pnpm create better-t-stack@latest",
|
pnpm: "pnpm create better-t-stack@latest my-better-t-app --yes",
|
||||||
bun: "bun create better-t-stack@latest",
|
bun: "bun create better-t-stack@latest my-better-t-app --yes",
|
||||||
};
|
};
|
||||||
|
|
||||||
const copyToClipboard = async (pm: "npm" | "pnpm" | "bun") => {
|
const copyToClipboard = async (pm: "npm" | "pnpm" | "bun") => {
|
||||||
@@ -52,31 +54,31 @@ 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-50/90 dark:bg-gray-950/50 backdrop-blur-3xl border border-gray-300 dark:border-blue-500/30 overflow-hidden">
|
<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="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="bg-gray-200 dark:bg-gray-800 px-4 py-2 flex items-center justify-between">
|
||||||
<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" />
|
||||||
<div className="w-3 h-3 rounded-full bg-red-500/60" />
|
<div className="w-3 h-3 rounded-full bg-yellow-500" />
|
||||||
<div className="w-3 h-3 rounded-full bg-yellow-500/60" />
|
<div className="w-3 h-3 rounded-full bg-green-500" />
|
||||||
<div className="w-3 h-3 rounded-full bg-green-500/60" />
|
</div>
|
||||||
</div>
|
<div className="font-mono text-xs text-gray-600 dark:text-gray-400">
|
||||||
<div className="ml-4 text-sm text-gray-700 dark:text-blue-300 font-mono">
|
Quick Install Terminal
|
||||||
terminal
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Package Manager Selector */}
|
|
||||||
<div className="relative" ref={menuRef}>
|
<div className="relative" ref={menuRef}>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setIsOpen(!isOpen)}
|
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}
|
{selectedPM}
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<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"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
@@ -92,36 +94,46 @@ const CodeContainer = () => {
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
{isOpen && (
|
{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>
|
<ul>
|
||||||
{(Object.keys(commands) as Array<"npm" | "pnpm" | "bun">).map(
|
{(Object.keys(commands) as Array<"npm" | "pnpm" | "bun">).map(
|
||||||
(pm) => (
|
(pm) => (
|
||||||
<li key={pm}>
|
<li key={pm}>
|
||||||
<button
|
<button
|
||||||
type="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
|
selectedPM === pm
|
||||||
? "bg-gray-200 dark:bg-blue-900/30 text-gray-800 dark:text-blue-400"
|
? "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-blue-900/20"
|
: "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||||
}`}
|
}`}
|
||||||
onClick={() => copyToClipboard(pm)}
|
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>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
),
|
),
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</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 items-center">
|
||||||
<div className="flex-grow">
|
<div className="flex-grow">
|
||||||
<span className="text-blue-600 dark:text-blue-500 mr-2">$</span>
|
<span className="text-green-600 dark:text-green-400 mr-2">$</span>
|
||||||
<span className="text-gray-800 dark:text-white">
|
<span className="text-gray-700 dark:text-gray-300">
|
||||||
{commands[selectedPM]}
|
{commands[selectedPM]}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
@@ -134,142 +146,205 @@ const CodeContainer = () => {
|
|||||||
▌
|
▌
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<motion.button
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => copyToClipboard(selectedPM)}
|
onClick={() => copyToClipboard(selectedPM)}
|
||||||
className="text-gray-600 dark:text-blue-400 hover:text-gray-800 dark:hover:text-blue-300"
|
className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
|
||||||
title="Copy to clipboard"
|
title="Copy command"
|
||||||
>
|
>
|
||||||
{copied ? (
|
{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>
|
</div>
|
||||||
|
|
||||||
{typingComplete && (
|
{typingComplete && (
|
||||||
<>
|
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
|
||||||
<div className="mt-2 pl-4 text-amber-600 dark:text-yellow-400">
|
<div className="mt-3 pl-4 text-amber-600 dark:text-amber-400">
|
||||||
{currentStep >= 1 && (
|
{currentStep >= 1 && (
|
||||||
<p
|
<motion.p
|
||||||
className={`transition-opacity duration-300 ${
|
initial={{ opacity: 0, y: -5 }}
|
||||||
currentStep >= 1 ? "opacity-100" : "opacity-0"
|
animate={{ opacity: 1, y: 0 }}
|
||||||
}`}
|
transition={{ delay: 0.1 }}
|
||||||
>
|
>
|
||||||
Creating a new Better-T-Stack project
|
Creating a new Better-T-Stack project
|
||||||
</p>
|
</motion.p>
|
||||||
)}
|
)}
|
||||||
{currentStep >= 2 && (
|
{currentStep >= 2 && (
|
||||||
<div className="mt-2">
|
<motion.div
|
||||||
<p className="text-gray-800 dark:text-white">
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
className="mt-2"
|
||||||
|
>
|
||||||
|
<p className="text-gray-700 dark:text-gray-300">
|
||||||
Project name:{" "}
|
Project name:{" "}
|
||||||
<span className="text-amber-600 dark:text-yellow-400">
|
<span className="text-amber-600 dark:text-amber-400">
|
||||||
my-t-stack
|
my-better-t-app
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</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:{" "}
|
Database:{" "}
|
||||||
<span className="text-amber-600 dark:text-yellow-400">
|
<span className="text-amber-600 dark:text-amber-400">
|
||||||
postgres
|
SQLite + Drizzle
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="text-gray-800 dark:text-white">
|
</motion.div>
|
||||||
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>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{currentStep >= 3 && (
|
<motion.div
|
||||||
<div className="mt-3 pl-4">
|
initial={{ opacity: 0 }}
|
||||||
<p className="text-blue-600 dark:text-blue-400">
|
animate={{ opacity: 1 }}
|
||||||
✓ Creating project structure
|
transition={{ delay: 0.3 }}
|
||||||
</p>
|
className="mt-3 pl-4"
|
||||||
{currentStep >= 4 && (
|
>
|
||||||
<p className="text-blue-600 dark:text-blue-400">
|
{currentStep >= 3 && (
|
||||||
✓ Installing dependencies
|
<motion.p
|
||||||
</p>
|
initial={{ opacity: 0, x: -5 }}
|
||||||
)}
|
animate={{ opacity: 1, x: 0 }}
|
||||||
{currentStep >= 5 && (
|
transition={{ delay: 0.4 }}
|
||||||
<>
|
className="text-blue-600 dark:text-blue-400 flex items-center"
|
||||||
<p className="text-blue-600 dark:text-blue-400">
|
>
|
||||||
✓ Setting up database
|
<CircleCheck className="w-4 h-4 mr-1">
|
||||||
</p>
|
<title>Completed</title>
|
||||||
<p className="text-blue-600 dark:text-blue-400">
|
</CircleCheck>
|
||||||
✓ Configuring authentication
|
Creating project structure
|
||||||
</p>
|
</motion.p>
|
||||||
<p className="text-gray-800 dark:text-white mt-2">
|
)}
|
||||||
Project ready! Happy coding!
|
{currentStep >= 4 && (
|
||||||
</p>
|
<motion.p
|
||||||
</>
|
initial={{ opacity: 0, x: -5 }}
|
||||||
)}
|
animate={{ opacity: 1, x: 0 }}
|
||||||
</div>
|
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"}`}>
|
<div
|
||||||
<span className="text-blue-600 dark:text-blue-500 mr-2">$</span>
|
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 className="text-blue-600 dark:text-blue-500 animate-pulse">
|
||||||
▌
|
▌
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gray-200 dark:bg-gray-900 border-t border-gray-300 dark:border-gray-700 px-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>
|
||||||
</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;
|
export default CodeContainer;
|
||||||
|
|||||||
@@ -4,57 +4,62 @@ import StackArchitect from "./StackArchitech";
|
|||||||
|
|
||||||
export default function CustomizableSection() {
|
export default function CustomizableSection() {
|
||||||
return (
|
return (
|
||||||
<section className="w-full max-w-7xl mx-auto space-y-12 mt-24 relative z-50 px-4">
|
<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-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="text-center space-y-8 relative">
|
||||||
<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>
|
|
||||||
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.5, delay: 0.2 }}
|
viewport={{ once: true, margin: "-100px" }}
|
||||||
className="space-y-4 max-w-3xl mx-auto"
|
transition={{ duration: 0.5 }}
|
||||||
|
className="relative"
|
||||||
>
|
>
|
||||||
<p className="sm:text-xl text-gray-700 dark:text-gray-300 leading-relaxed font-mono">
|
<h2 className="text-3xl sm:text-4xl font-bold">
|
||||||
<span className="text-yellow-600 dark:text-yellow-400">$</span>{" "}
|
<span className="text-blue-500 dark:text-blue-400 font-mono mr-1">
|
||||||
Better-T Stack with defaults,
|
{">"}
|
||||||
<span className="text-blue-600 dark:text-blue-400 font-semibold">
|
</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">
|
||||||
customizable options
|
Your Stack, Your Choice
|
||||||
</span>{" "}
|
</span>
|
||||||
for your perfect development environment
|
</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>
|
</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="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 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">
|
<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" />
|
<Terminal className="h-3.5 w-3.5">
|
||||||
<span>--multiple-runtimes</span>
|
<title>Runtime Options</title>
|
||||||
|
</Terminal>
|
||||||
|
<span>--runtime</span>
|
||||||
</div>
|
</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">
|
<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" />
|
<Code className="h-3.5 w-3.5">
|
||||||
<span>--framework-choices</span>
|
<title>Framework Options</title>
|
||||||
|
</Code>
|
||||||
|
<span>--framework</span>
|
||||||
</div>
|
</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">
|
<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" />
|
<TerminalSquare className="h-3.5 w-3.5">
|
||||||
<span>--database-options</span>
|
<title>Database Options</title>
|
||||||
|
</TerminalSquare>
|
||||||
|
<span>--database</span>
|
||||||
</div>
|
</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">
|
<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" />
|
<Sliders className="h-3.5 w-3.5">
|
||||||
<span>--customizable-addons</span>
|
<title>Addon Options</title>
|
||||||
|
</Sliders>
|
||||||
|
<span>--addons</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
@@ -62,54 +67,55 @@ export default function CustomizableSection() {
|
|||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 10 }}
|
initial={{ opacity: 0, y: 10 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.3, delay: 0.3 }}
|
viewport={{ once: true, margin: "-100px" }}
|
||||||
className="flex flex-wrap justify-center gap-3 pt-2"
|
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="amber">Bun or Node</Badge>
|
||||||
<Badge color="blue">Hono or Elysia</Badge>
|
<Badge color="blue">Hono or Elysia</Badge>
|
||||||
<Badge color="indigo">SQLite or PostgreSQL</Badge>
|
<Badge color="indigo">SQLite or PostgreSQL</Badge>
|
||||||
<Badge color="cyan">Drizzle or Prisma</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>
|
<Badge color="violet">Optional Addons</Badge>
|
||||||
</motion.div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 30 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
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"
|
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 />
|
<StackArchitect />
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Helper component for colored badge pills
|
|
||||||
function Badge({
|
function Badge({
|
||||||
children,
|
children,
|
||||||
color,
|
color,
|
||||||
}: { children: React.ReactNode; color: string }) {
|
}: { children: React.ReactNode; color: string }) {
|
||||||
const colorMap = {
|
const colorMap = {
|
||||||
amber:
|
amber:
|
||||||
"bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-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",
|
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:
|
indigo:
|
||||||
"bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-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",
|
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:
|
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:
|
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 (
|
return (
|
||||||
<span
|
<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}
|
{children}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -1,69 +1,120 @@
|
|||||||
|
import { Github } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
const Footer = () => {
|
const Footer = () => {
|
||||||
return (
|
return (
|
||||||
<footer className="relative w-full font-mono dark:bg-gray-900 bg-gray-100">
|
<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 py-12 relative">
|
<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 className="grid md:grid-cols-3 gap-8 mb-12">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-gray-900 dark:text-white font-bold mb-3 text-lg">
|
<h3 className="text-gray-900 dark:text-white font-bold mb-4 text-lg flex items-center gap-2">
|
||||||
<span className="text-blue-500">$</span> better-t.stack
|
<span>Better-T Stack</span>
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-gray-600 dark:text-gray-400">
|
<p className="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||||
The ultimate TypeScript scaffolding tool for modern web
|
Type-safe, modern TypeScript scaffolding for full-stack web
|
||||||
development
|
development
|
||||||
</p>
|
</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>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-gray-900 dark:text-white font-bold mb-3 text-lg">
|
<h3 className="text-gray-900 dark:text-white font-bold mb-4 text-lg">
|
||||||
<span className="text-gray-500 dark:text-gray-400">$</span> links
|
Resources
|
||||||
</h3>
|
</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>
|
<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-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>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<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-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>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
{/* <li>
|
{/* <li>
|
||||||
<Link
|
<Link
|
||||||
href="/docs"
|
target="_blank"
|
||||||
className="hover:text-gray-900 dark:hover:text-white transition-colors"
|
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>
|
</Link>
|
||||||
</li> */}
|
</li> */}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-gray-900 dark:text-white font-bold mb-3 text-lg">
|
<h3 className="text-gray-900 dark:text-white font-bold mb-4 text-lg">
|
||||||
<span className="text-gray-500 dark:text-gray-400">$</span>{" "}
|
Contact
|
||||||
contact
|
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-gray-600 dark:text-gray-400">
|
<div className="text-gray-600 dark:text-gray-400 space-y-2.5">
|
||||||
<span className="text-gray-500">echo</span>{" "}
|
<p className="flex items-center">
|
||||||
"amanvarshney.work@gmail.com"
|
<span className="font-mono bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm mr-2">
|
||||||
</p>
|
$
|
||||||
|
</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>
|
</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.
|
© {new Date().getFullYear()} Better-T Stack. All rights reserved.
|
||||||
</p>
|
</p>
|
||||||
<p className="text-center text-gray-600 text-sm mt-2">
|
<p className="text-gray-500 text-sm flex items-center gap-1.5">
|
||||||
Made with <span className="text-blue-500">TypeScript</span> ♥
|
Built with
|
||||||
|
<span className="bg-gradient-to-r from-blue-500 to-indigo-600 bg-clip-text text-transparent font-medium">
|
||||||
|
TypeScript
|
||||||
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import { Github } from "lucide-react";
|
import { Github, Menu, X } 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";
|
||||||
@@ -8,6 +8,7 @@ const Navbar = () => {
|
|||||||
const [activeLink, setActiveLink] = useState("home");
|
const [activeLink, setActiveLink] = useState("home");
|
||||||
const [bgStyles, setBgStyles] = useState({});
|
const [bgStyles, setBgStyles] = useState({});
|
||||||
const [scrolled, setScrolled] = useState(false);
|
const [scrolled, setScrolled] = useState(false);
|
||||||
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||||
const linkRefs = useRef<{ [key: string]: HTMLAnchorElement | null }>({});
|
const linkRefs = useRef<{ [key: string]: HTMLAnchorElement | null }>({});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -15,7 +16,7 @@ const Navbar = () => {
|
|||||||
const linkElement = linkRefs.current[linkId];
|
const linkElement = linkRefs.current[linkId];
|
||||||
if (linkElement) {
|
if (linkElement) {
|
||||||
setBgStyles({
|
setBgStyles({
|
||||||
padding: "1rem 0rem",
|
padding: "0.75rem 0rem",
|
||||||
width: `${linkElement.clientWidth - 12}px`,
|
width: `${linkElement.clientWidth - 12}px`,
|
||||||
transform: `translateX(${linkElement.offsetLeft}px)`,
|
transform: `translateX(${linkElement.offsetLeft}px)`,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
@@ -39,152 +40,191 @@ const Navbar = () => {
|
|||||||
};
|
};
|
||||||
}, [activeLink]);
|
}, [activeLink]);
|
||||||
|
|
||||||
|
const toggleMobileMenu = () => {
|
||||||
|
setMobileMenuOpen(!mobileMenuOpen);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
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 ${
|
<nav
|
||||||
scrolled
|
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 ${
|
||||||
? "bg-transparent border-transparent"
|
scrolled
|
||||||
: " dark:sm:bg-black/40 sm:backdrop-blur-xl sm:border-b sm:bg-white/40 border-blue-400/20"
|
? "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={`max-md:hidden flex flex-row items-center space-x-2 transition-opacity duration-300 ${
|
|
||||||
scrolled ? "opacity-0" : "opacity-100"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="w-4 h-4 rounded-sm flex items-center justify-center">
|
|
||||||
<span className=" dark:text-blue-500 text-blue-600 text-md">$_</span>
|
|
||||||
</div>
|
|
||||||
<span className=" dark:text-blue-400 text-blue-500 font-semibold text-md">
|
|
||||||
Better-T Stack
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-center">
|
|
||||||
<div
|
<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 ${
|
className={`flex flex-row items-center space-x-3 transition-opacity duration-300 ${
|
||||||
scrolled ? "w-[350px]" : "sm:w-[240px] w-[280px]"
|
scrolled ? "opacity-0" : "opacity-100"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div
|
<div className="w-4 h-4 rounded-sm flex items-center justify-center">
|
||||||
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"
|
<span className="dark:text-blue-500 text-blue-600 text-md">$_</span>
|
||||||
style={bgStyles}
|
</div>
|
||||||
/>
|
<span className="text-gray-600 dark:text-gray-100 font-semibold text-md">
|
||||||
<Link
|
Better-T Stack
|
||||||
href="/"
|
</span>
|
||||||
ref={(ref) => {
|
</div>
|
||||||
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>
|
|
||||||
|
|
||||||
{/* <span
|
<div className="hidden md:flex justify-center">
|
||||||
className="text-blue-500 transition-all duration-300"
|
<div
|
||||||
style={{
|
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 ${
|
||||||
opacity: scrolled ? 1 : 0,
|
scrolled ? "w-[350px]" : "w-[240px]"
|
||||||
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"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
documentation
|
<div
|
||||||
</Link>
|
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
|
<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"
|
||||||
ref={(ref) => {
|
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"
|
||||||
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"
|
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<Github className="size-4 mr-2" /> Github
|
<Github className="size-4 mr-2">
|
||||||
|
<title>GitHub</title>
|
||||||
|
</Github>
|
||||||
|
Star on GitHub
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
<button
|
||||||
className={`flex justify-end transition-opacity duration-300 ${
|
type="button"
|
||||||
scrolled ? "opacity-0 pointer-events-none" : "opacity-100"
|
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"
|
||||||
<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"
|
|
||||||
>
|
>
|
||||||
<span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#3b82f6_0%,#6366f1_50%,#3b82f6_100%)]" />
|
{mobileMenuOpen ? (
|
||||||
<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">
|
<X className="size-5" aria-hidden="true" />
|
||||||
<Github className="size-5 mr-2" /> Github
|
) : (
|
||||||
</span>
|
<Menu className="size-5" aria-hidden="true" />
|
||||||
</Link>
|
)}
|
||||||
</div>
|
<span className="sr-only">Toggle menu</span>
|
||||||
</nav>
|
</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>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -695,7 +695,7 @@ const StackArchitect = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full mx-auto">
|
<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="bg-gray-200 dark:bg-gray-800 px-4 py-2 flex items-center justify-between">
|
||||||
<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" />
|
||||||
|
|||||||
@@ -4,15 +4,18 @@ import Footer from "./_components/Footer";
|
|||||||
import Navbar from "./_components/Navbar";
|
import Navbar from "./_components/Navbar";
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Better-T-Stack | TypeScript Project Scaffolding",
|
title: "Better-T-Stack",
|
||||||
description:
|
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: [
|
keywords: [
|
||||||
"TypeScript",
|
"TypeScript",
|
||||||
"project scaffolding",
|
"project scaffolding",
|
||||||
"type safety",
|
"type safety",
|
||||||
"Drizzle",
|
"Drizzle",
|
||||||
"Prisma",
|
"Prisma",
|
||||||
|
"hono",
|
||||||
|
"elysia",
|
||||||
|
"turborepo",
|
||||||
"libSQL",
|
"libSQL",
|
||||||
"PostgreSQL",
|
"PostgreSQL",
|
||||||
"Better-Auth",
|
"Better-Auth",
|
||||||
@@ -74,7 +77,7 @@ export const metadata: Metadata = {
|
|||||||
|
|
||||||
export default function Layout({ children }: { children: ReactNode }) {
|
export default function Layout({ children }: { children: ReactNode }) {
|
||||||
return (
|
return (
|
||||||
<main className="relative z-10 min-h-svh bg-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 />
|
<Navbar />
|
||||||
{children}
|
{children}
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import ShinyText from "@/app/(home)/_components/ShinyText";
|
import ShinyText from "@/app/(home)/_components/ShinyText";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import BackgroundGradients from "./_components/BackgroundGradients";
|
||||||
import CodeContainer from "./_components/CodeContainer";
|
import CodeContainer from "./_components/CodeContainer";
|
||||||
import CustomizableSection from "./_components/CustomizableSection";
|
import CustomizableSection from "./_components/CustomizableSection";
|
||||||
import NpmPackage from "./_components/NpmPackage";
|
import NpmPackage from "./_components/NpmPackage";
|
||||||
@@ -8,80 +9,76 @@ import NpmPackage from "./_components/NpmPackage";
|
|||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
return (
|
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">
|
<main className="flex flex-col items-center justify-start px-4 sm:px-8 pt-28 pb-16">
|
||||||
<div className="max-w-6xl mx-auto text-center mb-16 relative z-50 ">
|
<BackgroundGradients />
|
||||||
<div className="relative z-10">
|
<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">
|
<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">
|
<h1 className="text-5xl sm:text-7xl font-bold tracking-tight text-gray-900 dark:text-white">
|
||||||
<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 bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-indigo-600 pb-1">
|
||||||
Better-T Stack
|
Better-T Stack
|
||||||
</span>
|
</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>
|
</h1>
|
||||||
<NpmPackage />
|
|
||||||
|
|
||||||
<p className="sm:text-2xl text-xl font-medium dark:text-gray-300 text-gray-700 max-w-2xl">
|
<div className="mb-2">
|
||||||
<span className="inline-block transform hover:scale-105 transition-transform duration-200">
|
<NpmPackage />
|
||||||
Scaffold
|
</div>
|
||||||
</span>{" "}
|
|
||||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-500">
|
<p className="text-xl font-medium text-gray-600 dark:text-gray-300 max-w-2xl">
|
||||||
production-ready
|
A modern CLI tool for scaffolding end-to-end type-safe TypeScript
|
||||||
</span>{" "}
|
projects with best practices and customizable configurations
|
||||||
<span className="inline-block transition-transform duration-200">
|
|
||||||
Better-T projects in seconds
|
|
||||||
</span>
|
|
||||||
</p>
|
</p>
|
||||||
<CodeContainer />
|
|
||||||
|
<div className="w-full max-w-3xl mx-auto mt-2">
|
||||||
|
<CodeContainer />
|
||||||
|
</div>
|
||||||
|
|
||||||
<ShinyText
|
<ShinyText
|
||||||
text="Be the safest developer with typesafe Typescript"
|
text="Type-safe. Modern. Minimal. Fast."
|
||||||
speed={3}
|
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>
|
</div>
|
||||||
|
|
||||||
<div className="absolute inset-0 -z-10">
|
<div className="absolute inset-0 -z-10">
|
||||||
<div className="absolute inset-0 bg-gradient-to-r dark:from-purple-500/20 dark:to-indigo-500/20 from-blue-300/20 to-indigo-300/20 dark:blur-3xl blur-2xl transform -skew-y-12" />
|
<div className="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>
|
||||||
</div>
|
</div>
|
||||||
<CustomizableSection />
|
<CustomizableSection />
|
||||||
<div className="w-full pt-16 relative overflow-hidden">
|
<div className="w-full pt-12 relative">
|
||||||
<div className="max-w-6xl mx-auto relative">
|
<div className="max-w-5xl mx-auto relative">
|
||||||
<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/40" />
|
||||||
<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 rounded-full bg-blue-500/50" />
|
||||||
<div
|
|
||||||
className="h-2 w-2 bg-blue-400 rounded-full animate-ping absolute"
|
|
||||||
style={{ animationDuration: "2.5s" }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative flex flex-col items-center justify-center px-6 z-10">
|
<div className="px-6">
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-indigo-500/10 blur-xl -z-10" />
|
<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>
|
||||||
|
|
||||||
<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 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 rounded-full bg-indigo-500/50" />
|
||||||
<div
|
<div className="h-px flex-grow bg-gradient-to-l from-transparent to-indigo-500/40" />
|
||||||
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>
|
</div>
|
||||||
</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="sm:hidden h-px w-full mt-6 bg-gradient-to-r from-blue-500/20 via-indigo-500/40 to-blue-500/20" />
|
||||||
|
|
||||||
<div className="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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* <Testimonials /> */}
|
{/* <Testimonials /> */}
|
||||||
|
|||||||
Reference in New Issue
Block a user