mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
add stack architech component to landing page
This commit is contained in:
Aman Varshney
@@ -7,10 +7,7 @@
|
||||
"bin": {
|
||||
"create-better-t-stack": "dist/index.js"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"template"
|
||||
],
|
||||
"files": ["dist", "template"],
|
||||
"keywords": [],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@@ -10,8 +10,10 @@
|
||||
"postinstall": "fumadocs-mdx"
|
||||
},
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.2.0",
|
||||
"@xyflow/react": "^12.4.4",
|
||||
"babel-plugin-react-compiler": "^19.0.0-beta-3229e95-20250315",
|
||||
"canvas-confetti": "^1.9.3",
|
||||
"fumadocs-core": "15.1.2",
|
||||
"fumadocs-mdx": "11.5.7",
|
||||
"fumadocs-ui": "15.1.2",
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
/** eslint-disable react/jsx-no-comment-textnodes */
|
||||
import React from "react";
|
||||
|
||||
const CodeExample = () => {
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto mt-8 rounded-lg overflow-hidden bg-slate-100 dark:bg-slate-900 border border-slate-300 dark:border-slate-700">
|
||||
<div className="flex items-center px-4 py-2 bg-slate-200 dark:bg-slate-800">
|
||||
<div className="flex space-x-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500" />
|
||||
<div className="w-3 h-3 rounded-full bg-green-500" />
|
||||
</div>
|
||||
<span className="ml-4 text-sm text-slate-600 dark:text-slate-400">
|
||||
example.ts
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="p-4 font-mono text-sm relative">
|
||||
<div className="space-y-2">
|
||||
<div className="text-slate-600 dark:text-slate-400">
|
||||
{"// ❌ Without Type Safety"}
|
||||
</div>
|
||||
<div className="text-slate-900 dark:text-white">
|
||||
function processUser(user){" "}
|
||||
{
|
||||
<span className="text-red-600 dark:text-red-400">
|
||||
console.log(user.namee)
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<div className="text-red-600 dark:text-red-400 text-xs bg-red-100 dark:bg-red-900/30 p-2 rounded">
|
||||
Property 'namee' does not exist on type 'User'.
|
||||
Did you mean 'name'?
|
||||
</div>
|
||||
|
||||
<div className="mt-6 text-slate-600 dark:text-slate-400">
|
||||
{"// ✅ With Type Safety"}
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-blue-600 dark:text-blue-400">interface</span>
|
||||
<span className="text-green-600 dark:text-green-400"> User</span>
|
||||
<span className="text-slate-900 dark:text-white"> {"{"}</span>
|
||||
</div>
|
||||
<div className="pl-4 text-slate-700 dark:text-slate-200">
|
||||
name: string;
|
||||
<br />
|
||||
age: number;
|
||||
</div>
|
||||
<div className="text-slate-900 dark:text-white">{"}"}</div>
|
||||
<div>
|
||||
<span className="text-blue-600 dark:text-blue-400">function</span>
|
||||
<span className="text-yellow-600 dark:text-yellow-400">
|
||||
{" "}
|
||||
processUser
|
||||
</span>
|
||||
<span className="text-slate-900 dark:text-white">(user: </span>
|
||||
<span className="text-green-600 dark:text-green-400">User</span>
|
||||
<span className="text-slate-900 dark:text-white">) {"{"}</span>
|
||||
</div>
|
||||
<div className="pl-4 text-slate-700 dark:text-slate-200">
|
||||
console.log(user.name){" "}
|
||||
<span className="text-slate-600 dark:text-slate-400">
|
||||
{"// ✨ Type checked!"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-slate-900 dark:text-white">{"}"}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeExample;
|
||||
@@ -1,9 +1,10 @@
|
||||
import { motion } from "motion/react";
|
||||
import CustomizableStack from "./CustomizableStack";
|
||||
import { motion } from "framer-motion";
|
||||
import { Code, Sliders, Terminal, TerminalSquare } from "lucide-react";
|
||||
import StackArchitect from "./StackArchitech";
|
||||
|
||||
export default function CustomizableSection() {
|
||||
return (
|
||||
<section className="w-full max-w-6xl mx-auto space-y-12 mt-24 relative z-50">
|
||||
<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
|
||||
@@ -39,32 +40,78 @@ export default function CustomizableSection() {
|
||||
</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">
|
||||
<span className="px-3 py-1 bg-gray-100 dark:bg-black border border-gray-300 dark:border-gray-700 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors">
|
||||
--multiple-database-options
|
||||
</span>
|
||||
<span className="px-3 py-1 bg-gray-100 dark:bg-black border border-gray-300 dark:border-gray-700 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors">
|
||||
--flexible-authentication
|
||||
</span>
|
||||
<span className="px-3 py-1 bg-gray-100 dark:bg-black border border-gray-300 dark:border-gray-700 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors">
|
||||
--alternative-orms
|
||||
</span>
|
||||
<span className="px-3 py-1 bg-gray-100 dark:bg-black border border-gray-300 dark:border-gray-700 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-900/50 transition-colors">
|
||||
--framework-choices
|
||||
</span>
|
||||
<div 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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<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"
|
||||
>
|
||||
<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="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, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
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" />
|
||||
<CustomizableStack />
|
||||
<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" />
|
||||
<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",
|
||||
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",
|
||||
green:
|
||||
"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
|
||||
violet:
|
||||
"bg-violet-100 text-violet-800 dark:bg-violet-900/30 dark:text-violet-300",
|
||||
};
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`px-2.5 py-1 rounded-full text-xs font-medium ${colorMap[color as keyof typeof colorMap]}`}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,463 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Background,
|
||||
type Connection,
|
||||
ReactFlow,
|
||||
useEdgesState,
|
||||
useNodesState,
|
||||
} from "@xyflow/react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { TechSelector } from "./TechSelector";
|
||||
import "@xyflow/react/dist/style.css";
|
||||
import { initialNodes } from "@/lib/constant";
|
||||
import { CommandDisplay } from "./CommandDisplay";
|
||||
import { TechNodeComponent } from "./TechNodeComponent";
|
||||
|
||||
// Define initial edges with proper connections
|
||||
const initialEdges = [
|
||||
{ id: "bun-hono", source: "bun", target: "hono", animated: true },
|
||||
{ id: "bun-tanstack", source: "bun", target: "tanstack", animated: true },
|
||||
{ id: "hono-sqlite", source: "hono", target: "sqlite", animated: true },
|
||||
{ id: "sqlite-drizzle", source: "sqlite", target: "drizzle", animated: true },
|
||||
{
|
||||
id: "hono-better-auth",
|
||||
source: "hono",
|
||||
target: "better-auth",
|
||||
animated: true,
|
||||
},
|
||||
{ id: "bun-tailwind", source: "bun", target: "tailwind", animated: true },
|
||||
{
|
||||
id: "tailwind-shadcn",
|
||||
source: "tailwind",
|
||||
target: "shadcn",
|
||||
animated: true,
|
||||
},
|
||||
];
|
||||
|
||||
const nodeTypes = {
|
||||
techNode: TechNodeComponent,
|
||||
};
|
||||
|
||||
interface ActiveNodes {
|
||||
backend: string;
|
||||
database: string;
|
||||
orm: string;
|
||||
auth: string;
|
||||
packageManager: string;
|
||||
addons: {
|
||||
docker: boolean;
|
||||
githubActions: boolean;
|
||||
seo: boolean;
|
||||
git: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
const CustomizableStack = () => {
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
|
||||
const [activeNodes, setActiveNodes] = useState<ActiveNodes>({
|
||||
backend: "hono",
|
||||
database: "sqlite",
|
||||
orm: "drizzle",
|
||||
auth: "better-auth",
|
||||
packageManager: "npm",
|
||||
addons: {
|
||||
docker: false,
|
||||
githubActions: false,
|
||||
seo: false,
|
||||
git: true,
|
||||
},
|
||||
});
|
||||
const [windowSize, setWindowSize] = useState("lg");
|
||||
const [command, setCommand] = useState("npx create-better-t-stack my-app -y");
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth < 1024 && window.innerWidth > 768) {
|
||||
setWindowSize("md");
|
||||
} else if (window.innerWidth < 768) {
|
||||
setWindowSize("sm");
|
||||
} else {
|
||||
setWindowSize("lg");
|
||||
}
|
||||
};
|
||||
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
|
||||
useEffect(() => {
|
||||
// Generate command whenever activeNodes changes and update the command state
|
||||
setCommand(generateCommand());
|
||||
}, [activeNodes]);
|
||||
|
||||
// Function to remove connections related to specific category
|
||||
const removeConnectionsByCategory = useCallback(
|
||||
(category: string) => {
|
||||
setEdges((eds) => {
|
||||
return eds.filter((edge) => {
|
||||
// Find source and target nodes
|
||||
const sourceNode = nodes.find((n) => n.id === edge.source);
|
||||
const targetNode = nodes.find((n) => n.id === edge.target);
|
||||
|
||||
if (!sourceNode || !targetNode) return true;
|
||||
|
||||
// Remove edges connected to the category being changed
|
||||
if (targetNode.data.category === category) return false;
|
||||
|
||||
// Remove edges that connect from the category being changed
|
||||
if (sourceNode.data.category === category) return false;
|
||||
|
||||
// For database changes, also remove ORM connections
|
||||
if (category === "database" && targetNode.data.category === "orm")
|
||||
return false;
|
||||
|
||||
return true;
|
||||
});
|
||||
});
|
||||
},
|
||||
[nodes, setEdges],
|
||||
);
|
||||
|
||||
const handleTechSelect = useCallback(
|
||||
(category: string, techId: string) => {
|
||||
// Update active nodes state
|
||||
setActiveNodes((prev) => ({
|
||||
...prev,
|
||||
[category]: techId,
|
||||
...(category === "addons" && {
|
||||
addons: {
|
||||
...prev.addons,
|
||||
[techId]: !prev.addons[techId as keyof typeof prev.addons],
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
// Update node active states
|
||||
setNodes((nds) =>
|
||||
nds.map((node) => ({
|
||||
...node,
|
||||
data: {
|
||||
...node.data,
|
||||
isActive: node.data.isStatic
|
||||
? true
|
||||
: node.data.category === category
|
||||
? node.id === techId
|
||||
: node.data.isActive,
|
||||
},
|
||||
})),
|
||||
);
|
||||
|
||||
// Remove old connections for this category
|
||||
removeConnectionsByCategory(category);
|
||||
|
||||
// Create new connections based on the selected tech
|
||||
if (category === "backend") {
|
||||
// Connect backend to database, auth, and other core components
|
||||
const database = activeNodes.database;
|
||||
const auth = activeNodes.auth;
|
||||
|
||||
setEdges((eds) => [
|
||||
...eds,
|
||||
{
|
||||
id: `bun-${techId}`,
|
||||
source: "bun",
|
||||
target: techId,
|
||||
animated: true,
|
||||
},
|
||||
{
|
||||
id: `${techId}-${database}`,
|
||||
source: techId,
|
||||
target: database,
|
||||
animated: true,
|
||||
},
|
||||
{
|
||||
id: `${techId}-${auth}`,
|
||||
source: techId,
|
||||
target: auth,
|
||||
animated: true,
|
||||
},
|
||||
{
|
||||
id: `${techId}-tanstack`,
|
||||
source: techId,
|
||||
target: "tanstack",
|
||||
animated: true,
|
||||
},
|
||||
]);
|
||||
} else if (category === "database") {
|
||||
// Connect backend to database and database to ORM
|
||||
const orm = activeNodes.orm;
|
||||
|
||||
setEdges((eds) => [
|
||||
...eds,
|
||||
{
|
||||
id: `hono-${techId}`,
|
||||
source: "hono",
|
||||
target: techId,
|
||||
animated: true,
|
||||
},
|
||||
// Only add ORM connection if database is not "no-database"
|
||||
...(techId !== "no-database"
|
||||
? [
|
||||
{
|
||||
id: `${techId}-${orm}`,
|
||||
source: techId,
|
||||
target: orm,
|
||||
animated: true,
|
||||
},
|
||||
]
|
||||
: []),
|
||||
]);
|
||||
} else if (category === "orm") {
|
||||
// Connect database to ORM
|
||||
const database = activeNodes.database;
|
||||
|
||||
// Only add connection if database is not "no-database"
|
||||
if (database !== "no-database") {
|
||||
setEdges((eds) => [
|
||||
...eds,
|
||||
{
|
||||
id: `${database}-${techId}`,
|
||||
source: database,
|
||||
target: techId,
|
||||
animated: true,
|
||||
},
|
||||
]);
|
||||
}
|
||||
} else if (category === "auth") {
|
||||
// Connect backend to auth
|
||||
setEdges((eds) => [
|
||||
...eds,
|
||||
{
|
||||
id: `hono-${techId}`,
|
||||
source: "hono",
|
||||
target: techId,
|
||||
animated: true,
|
||||
},
|
||||
]);
|
||||
}
|
||||
},
|
||||
[activeNodes, setNodes, setEdges, removeConnectionsByCategory],
|
||||
);
|
||||
|
||||
const isValidConnection = useCallback(
|
||||
(connection: Connection) => {
|
||||
const sourceNode = nodes.find((n) => n.id === connection.source);
|
||||
const targetNode = nodes.find((n) => n.id === connection.target);
|
||||
|
||||
if (!sourceNode || !targetNode) return false;
|
||||
|
||||
// Define valid connection patterns
|
||||
if (sourceNode.id === "hono" && targetNode.data.category === "database") {
|
||||
return ["postgres", "sqlite", "no-database"].includes(targetNode.id);
|
||||
}
|
||||
|
||||
if (sourceNode.id === "hono" && targetNode.data.category === "auth") {
|
||||
return ["better-auth", "no-auth"].includes(targetNode.id);
|
||||
}
|
||||
|
||||
if (
|
||||
["postgres", "sqlite"].includes(sourceNode.id) &&
|
||||
targetNode.data.category === "orm"
|
||||
) {
|
||||
return ["drizzle", "prisma"].includes(targetNode.id);
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
[nodes],
|
||||
);
|
||||
|
||||
const onConnect = useCallback(
|
||||
(connection: Connection) => {
|
||||
if (!isValidConnection(connection)) return;
|
||||
|
||||
const targetNode = nodes.find((n) => n.id === connection.target);
|
||||
if (!targetNode || !targetNode.data.category) return;
|
||||
|
||||
// Remove existing connections for the category we're connecting to
|
||||
removeConnectionsByCategory(targetNode.data.category);
|
||||
|
||||
// Update active nodes state
|
||||
setActiveNodes((prev) => ({
|
||||
...prev,
|
||||
[targetNode.data.category]: connection.target,
|
||||
}));
|
||||
|
||||
// Update node active states
|
||||
setNodes((nds) =>
|
||||
nds.map((node) => ({
|
||||
...node,
|
||||
data: {
|
||||
...node.data,
|
||||
isActive: node.data.isStatic
|
||||
? true
|
||||
: node.data.category === targetNode.data.category
|
||||
? node.id === connection.target
|
||||
: node.data.isActive,
|
||||
},
|
||||
})),
|
||||
);
|
||||
|
||||
// Add the new connection
|
||||
setEdges((eds) => [
|
||||
...eds,
|
||||
{
|
||||
id: `${connection.source}-${connection.target}`,
|
||||
source: connection.source,
|
||||
target: connection.target,
|
||||
animated: true,
|
||||
},
|
||||
]);
|
||||
|
||||
// If connecting to database, also connect to the active ORM
|
||||
if (
|
||||
targetNode.data.category === "database" &&
|
||||
targetNode.id !== "no-database"
|
||||
) {
|
||||
const activeOrm = nodes.find(
|
||||
(n) => n.data.category === "orm" && n.data.isActive,
|
||||
);
|
||||
if (activeOrm) {
|
||||
setEdges((eds) => [
|
||||
...eds,
|
||||
{
|
||||
id: `${connection.target}-${activeOrm.id}`,
|
||||
source: connection.target,
|
||||
target: activeOrm.id,
|
||||
animated: true,
|
||||
},
|
||||
]);
|
||||
}
|
||||
}
|
||||
},
|
||||
[nodes, setEdges, setNodes, removeConnectionsByCategory, isValidConnection],
|
||||
);
|
||||
|
||||
const generateCommand = useCallback(() => {
|
||||
// Start with the base command
|
||||
const command = "npx create-better-t-stack my-app";
|
||||
const flags: string[] = [];
|
||||
|
||||
const isAllDefaults =
|
||||
activeNodes.database === "sqlite" &&
|
||||
activeNodes.auth === "better-auth" &&
|
||||
activeNodes.orm === "drizzle" &&
|
||||
activeNodes.packageManager === "npm" &&
|
||||
activeNodes.addons.git === true &&
|
||||
!activeNodes.addons.docker &&
|
||||
!activeNodes.addons.githubActions &&
|
||||
!activeNodes.addons.seo;
|
||||
|
||||
// If using all defaults, just use -y flag
|
||||
if (isAllDefaults) {
|
||||
return `${command} -y`;
|
||||
}
|
||||
|
||||
// Database options
|
||||
if (activeNodes.database === "postgres") {
|
||||
flags.push("--postgres");
|
||||
} else if (activeNodes.database === "sqlite") {
|
||||
flags.push("--sqlite");
|
||||
} else if (activeNodes.database === "no-database") {
|
||||
flags.push("--no-database");
|
||||
}
|
||||
|
||||
// Authentication options
|
||||
if (activeNodes.auth === "better-auth") {
|
||||
flags.push("--auth");
|
||||
} else if (activeNodes.auth === "no-auth") {
|
||||
flags.push("--no-auth");
|
||||
}
|
||||
|
||||
// ORM options
|
||||
if (activeNodes.orm === "drizzle") {
|
||||
flags.push("--drizzle");
|
||||
} else if (activeNodes.orm === "prisma") {
|
||||
flags.push("--prisma");
|
||||
}
|
||||
|
||||
// Package manager options
|
||||
if (activeNodes.packageManager !== "npm") {
|
||||
flags.push(`--${activeNodes.packageManager}`);
|
||||
}
|
||||
|
||||
// Feature flags
|
||||
if (activeNodes.addons.docker) {
|
||||
flags.push("--docker");
|
||||
}
|
||||
|
||||
if (activeNodes.addons.githubActions) {
|
||||
flags.push("--github-actions");
|
||||
}
|
||||
|
||||
if (activeNodes.addons.seo) {
|
||||
flags.push("--seo");
|
||||
}
|
||||
|
||||
if (!activeNodes.addons.git) {
|
||||
flags.push("--no-git");
|
||||
}
|
||||
|
||||
return flags.length > 0 ? `${command} ${flags.join(" ")}` : command;
|
||||
}, [activeNodes]);
|
||||
|
||||
return (
|
||||
<div className="relative w-full max-w-5xl mx-auto z-50 mt-24">
|
||||
<div className="absolute -top-16 left-0 right-0 mx-auto flex justify-center z-50">
|
||||
<CommandDisplay command={command} />
|
||||
</div>
|
||||
|
||||
<div className="relative rounded-xl border border-gray-800 dark:border-gray-800 border-gray-300 overflow-hidden">
|
||||
<div className="absolute inset-0 backdrop-blur-3xl bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 dark:from-blue-500/10 dark:via-purple-500/10 dark:to-pink-500/10 from-blue-500/5 via-purple-500/5 to-pink-500/5" />
|
||||
|
||||
<div className="absolute left-0 top-0 bottom-0 lg:w-52 md:w-44 w-36 z-50 bg-white/70 dark:bg-gray-950/30 border-r border-gray-300/50 dark:border-gray-800/50">
|
||||
<TechSelector onSelect={handleTechSelect} activeNodes={activeNodes} />
|
||||
</div>
|
||||
|
||||
<div className="max-sm:hidden bg-white/70 dark:bg-gray-950/30 lg:p-4 p-1 absolute lg:top-4 top-2 lg:right-4 right-2 z-50 w-80 rounded-xl border border-gray-300 dark:border-gray-800 backdrop-blur-3xl">
|
||||
<div className="lg:text-sm text-xs text-gray-700 dark:text-gray-300 text-center">
|
||||
Select technologies from the left panel to customize your stack. The
|
||||
graph will automatically update connections.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-[600px] lg:pl-52 md:pl-44 pl-36 relative backdrop-blur-sm bg-white/50 dark:bg-gray-950/50">
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onConnect={onConnect}
|
||||
nodeTypes={nodeTypes}
|
||||
fitView
|
||||
maxZoom={windowSize === "sm" ? 0.6 : windowSize === "md" ? 0.6 : 1}
|
||||
zoomOnScroll={false}
|
||||
zoomOnPinch={false}
|
||||
preventScrolling={false}
|
||||
nodesConnectable={true}
|
||||
nodesDraggable={true}
|
||||
connectOnClick={true}
|
||||
deleteKeyCode="Delete"
|
||||
selectionKeyCode="Shift"
|
||||
proOptions={{
|
||||
hideAttribution: true,
|
||||
}}
|
||||
>
|
||||
<Background
|
||||
className="bg-gray-100/30 dark:bg-gray-950/5"
|
||||
color="currentColor"
|
||||
gap={12}
|
||||
size={1}
|
||||
/>
|
||||
</ReactFlow>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomizableStack;
|
||||
@@ -1,16 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Spotlight = () => {
|
||||
return (
|
||||
<div className="fixed w-full h-96 -top-12 overflow-hidden">
|
||||
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 flex gap-24">
|
||||
<div className="w-12 h-[40vh] bg-gradient-to-b from-white/30 to-transparent blur-xl" />
|
||||
<div className="w-12 h-[50vh] bg-gradient-to-b from-white/30 to-transparent blur-xl" />
|
||||
<div className="w-12 h-[50vh] bg-gradient-to-b from-white/30 to-transparent blur-xl" />
|
||||
<div className="w-12 h-[40vh] bg-gradient-to-b from-white/30 to-transparent blur-xl" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Spotlight;
|
||||
690
apps/web/src/app/(home)/_components/StackArchitech.tsx
Normal file
690
apps/web/src/app/(home)/_components/StackArchitech.tsx
Normal file
@@ -0,0 +1,690 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
Check,
|
||||
Circle,
|
||||
CircleCheck,
|
||||
ClipboardCopy,
|
||||
Terminal,
|
||||
} from "lucide-react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
const triggerConfetti = () => {
|
||||
const createConfettiElement = (color: string) => {
|
||||
const confetti = document.createElement("div");
|
||||
confetti.style.position = "fixed";
|
||||
confetti.style.width = `${Math.random() * 10 + 5}px`;
|
||||
confetti.style.height = `${Math.random() * 10 + 5}px`;
|
||||
confetti.style.backgroundColor = color;
|
||||
confetti.style.borderRadius = "50%";
|
||||
confetti.style.zIndex = "9999";
|
||||
|
||||
const startX = window.innerWidth / 2 + (Math.random() - 0.5) * 200;
|
||||
const startY = window.innerHeight / 2;
|
||||
|
||||
confetti.style.left = `${startX}px`;
|
||||
confetti.style.top = `${startY}px`;
|
||||
|
||||
document.body.appendChild(confetti);
|
||||
|
||||
const angle = Math.random() * Math.PI * 2;
|
||||
const velocity = Math.random() * 5 + 3;
|
||||
const vx = Math.cos(angle) * velocity;
|
||||
let vy = Math.sin(angle) * velocity - 2;
|
||||
|
||||
let posX = startX;
|
||||
let posY = startY;
|
||||
let opacity = 1;
|
||||
let rotation = 0;
|
||||
|
||||
const animate = () => {
|
||||
posX += vx;
|
||||
posY += vy;
|
||||
vy += 0.1; // Gravity
|
||||
opacity -= 0.01;
|
||||
rotation += 5;
|
||||
|
||||
confetti.style.left = `${posX}px`;
|
||||
confetti.style.top = `${posY}px`;
|
||||
confetti.style.opacity = `${opacity}`;
|
||||
confetti.style.transform = `rotate(${rotation}deg)`;
|
||||
|
||||
if (opacity > 0 && posY < window.innerHeight) {
|
||||
requestAnimationFrame(animate);
|
||||
} else {
|
||||
confetti.remove();
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
const colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#ffd166", "#f8a5c2"];
|
||||
for (let i = 0; i < 30; i++) {
|
||||
setTimeout(() => {
|
||||
createConfettiElement(colors[Math.floor(Math.random() * colors.length)]);
|
||||
}, Math.random() * 500);
|
||||
}
|
||||
};
|
||||
|
||||
const TECH_OPTIONS = {
|
||||
runtime: [
|
||||
{
|
||||
id: "bun",
|
||||
name: "Bun",
|
||||
description: "Fast JavaScript runtime & toolkit",
|
||||
icon: "🥟",
|
||||
color: "from-amber-400 to-amber-600",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "node",
|
||||
name: "Node.js",
|
||||
description: "JavaScript runtime environment",
|
||||
icon: "🟩",
|
||||
color: "from-green-400 to-green-600",
|
||||
},
|
||||
],
|
||||
backendFramework: [
|
||||
{
|
||||
id: "hono",
|
||||
name: "Hono",
|
||||
description: "Ultrafast web framework",
|
||||
icon: "⚡",
|
||||
color: "from-blue-500 to-blue-700",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "elysia",
|
||||
name: "Elysia",
|
||||
description: "TypeScript web framework",
|
||||
icon: "🦊",
|
||||
color: "from-purple-500 to-purple-700",
|
||||
},
|
||||
],
|
||||
database: [
|
||||
{
|
||||
id: "sqlite",
|
||||
name: "SQLite",
|
||||
description: "File-based SQL database",
|
||||
icon: "🗃️",
|
||||
color: "from-blue-400 to-cyan-500",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "postgres",
|
||||
name: "PostgreSQL",
|
||||
description: "Advanced SQL database",
|
||||
icon: "🐘",
|
||||
color: "from-indigo-400 to-indigo-600",
|
||||
},
|
||||
{
|
||||
id: "none",
|
||||
name: "No Database",
|
||||
description: "Skip database integration",
|
||||
icon: "🚫",
|
||||
color: "from-gray-400 to-gray-600",
|
||||
},
|
||||
],
|
||||
orm: [
|
||||
{
|
||||
id: "drizzle",
|
||||
name: "Drizzle",
|
||||
description: "TypeScript ORM",
|
||||
icon: "💧",
|
||||
color: "from-cyan-400 to-cyan-600",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "prisma",
|
||||
name: "Prisma",
|
||||
description: "Next-gen ORM",
|
||||
icon: "◮",
|
||||
color: "from-purple-400 to-purple-600",
|
||||
},
|
||||
],
|
||||
auth: [
|
||||
{
|
||||
id: "true",
|
||||
name: "Better Auth",
|
||||
description: "Simple authentication",
|
||||
icon: "🔐",
|
||||
color: "from-green-400 to-green-600",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "false",
|
||||
name: "No Auth",
|
||||
description: "Skip authentication",
|
||||
icon: "🔓",
|
||||
color: "from-red-400 to-red-600",
|
||||
},
|
||||
],
|
||||
turso: [
|
||||
{
|
||||
id: "true",
|
||||
name: "Turso",
|
||||
description: "SQLite cloud database",
|
||||
icon: "☁️",
|
||||
color: "from-pink-400 to-pink-600",
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "false",
|
||||
name: "No Turso",
|
||||
description: "Skip Turso integration",
|
||||
icon: "🚫",
|
||||
color: "from-gray-400 to-gray-600",
|
||||
default: true,
|
||||
},
|
||||
],
|
||||
packageManager: [
|
||||
{
|
||||
id: "npm",
|
||||
name: "npm",
|
||||
description: "Default package manager",
|
||||
icon: "📦",
|
||||
color: "from-red-500 to-red-700",
|
||||
},
|
||||
{
|
||||
id: "pnpm",
|
||||
name: "pnpm",
|
||||
description: "Fast, disk space efficient",
|
||||
icon: "🚀",
|
||||
color: "from-orange-500 to-orange-700",
|
||||
},
|
||||
{
|
||||
id: "bun",
|
||||
name: "bun",
|
||||
description: "All-in-one toolkit",
|
||||
icon: "🥟",
|
||||
color: "from-amber-500 to-amber-700",
|
||||
default: true,
|
||||
},
|
||||
],
|
||||
addons: [
|
||||
{
|
||||
id: "pwa",
|
||||
name: "PWA",
|
||||
description: "Progressive Web App",
|
||||
icon: "📱",
|
||||
color: "from-blue-500 to-blue-700",
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "tauri",
|
||||
name: "Tauri",
|
||||
description: "Desktop app support",
|
||||
icon: "🖥️",
|
||||
color: "from-amber-500 to-amber-700",
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "biome",
|
||||
name: "Biome",
|
||||
description: "Linting & formatting",
|
||||
icon: "🌿",
|
||||
color: "from-green-500 to-green-700",
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "husky",
|
||||
name: "Husky",
|
||||
description: "Git hooks & lint-staged",
|
||||
icon: "🐶",
|
||||
color: "from-purple-500 to-purple-700",
|
||||
default: false,
|
||||
},
|
||||
],
|
||||
examples: [
|
||||
{
|
||||
id: "todo",
|
||||
name: "Todo Example",
|
||||
description: "Simple todo application",
|
||||
icon: "✅",
|
||||
color: "from-indigo-500 to-indigo-700",
|
||||
default: false,
|
||||
},
|
||||
],
|
||||
git: [
|
||||
{
|
||||
id: "true",
|
||||
name: "Git",
|
||||
description: "Initialize Git repository",
|
||||
icon: "📝",
|
||||
color: "from-gray-500 to-gray-700",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "false",
|
||||
name: "No Git",
|
||||
description: "Skip Git initialization",
|
||||
icon: "🚫",
|
||||
color: "from-red-400 to-red-600",
|
||||
},
|
||||
],
|
||||
install: [
|
||||
{
|
||||
id: "true",
|
||||
name: "Install Dependencies",
|
||||
description: "Install packages automatically",
|
||||
icon: "📥",
|
||||
color: "from-green-400 to-green-600",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "false",
|
||||
name: "Skip Install",
|
||||
description: "Skip dependency installation",
|
||||
icon: "⏭️",
|
||||
color: "from-yellow-400 to-yellow-600",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
interface StackState {
|
||||
runtime: string;
|
||||
backendFramework: string;
|
||||
database: string;
|
||||
orm: string | null;
|
||||
auth: string;
|
||||
turso: string;
|
||||
packageManager: string;
|
||||
addons: string[];
|
||||
examples: string[];
|
||||
git: string;
|
||||
install: string;
|
||||
}
|
||||
|
||||
const DEFAULT_STACK: StackState = {
|
||||
runtime: "bun",
|
||||
backendFramework: "hono",
|
||||
database: "sqlite",
|
||||
orm: "drizzle",
|
||||
auth: "true",
|
||||
turso: "false",
|
||||
packageManager: "bun",
|
||||
addons: [],
|
||||
examples: [],
|
||||
git: "true",
|
||||
install: "true",
|
||||
};
|
||||
|
||||
const StackArchitect = () => {
|
||||
const [stack, setStack] = useState<StackState>(DEFAULT_STACK);
|
||||
const [command, setCommand] = useState("npx create-better-t-stack my-app -y");
|
||||
const [activeTab, setActiveTab] = useState("database");
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const cmd = generateCommand(stack);
|
||||
setCommand(cmd);
|
||||
}, [stack]);
|
||||
|
||||
const generateCommand = useCallback((stackState: StackState) => {
|
||||
const base = "npx create-better-t-stack";
|
||||
const projectName = "my-better-t-app";
|
||||
const flags: string[] = ["-y"];
|
||||
|
||||
const isDefault =
|
||||
stackState.runtime === "bun" &&
|
||||
stackState.backendFramework === "hono" &&
|
||||
stackState.database === "sqlite" &&
|
||||
stackState.orm === "drizzle" &&
|
||||
stackState.auth === "true" &&
|
||||
stackState.turso === "false" &&
|
||||
stackState.packageManager === "bun" &&
|
||||
stackState.addons.length === 0 &&
|
||||
stackState.examples.length === 0 &&
|
||||
stackState.git === "true" &&
|
||||
stackState.install === "true";
|
||||
|
||||
if (isDefault) return `${base} ${projectName} -y`;
|
||||
|
||||
if (stackState.runtime === "node") {
|
||||
flags.push("--runtime node");
|
||||
}
|
||||
|
||||
if (stackState.backendFramework === "elysia") {
|
||||
flags.push("--elysia");
|
||||
}
|
||||
|
||||
if (stackState.database === "postgres") {
|
||||
flags.push("--postgres");
|
||||
} else if (stackState.database === "none") {
|
||||
flags.push("--no-database");
|
||||
}
|
||||
|
||||
if (stackState.orm === "prisma") {
|
||||
flags.push("--prisma");
|
||||
}
|
||||
|
||||
if (stackState.auth === "false") {
|
||||
flags.push("--no-auth");
|
||||
}
|
||||
|
||||
if (stackState.turso === "true") {
|
||||
flags.push("--turso");
|
||||
}
|
||||
|
||||
if (stackState.packageManager !== "bun") {
|
||||
flags.push(`--${stackState.packageManager}`);
|
||||
}
|
||||
|
||||
if (stackState.addons.length > 0) {
|
||||
for (const addon of stackState.addons) {
|
||||
flags.push(`--${addon}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (stackState.examples.length > 0) {
|
||||
flags.push(`--examples ${stackState.examples.join(",")}`);
|
||||
}
|
||||
|
||||
if (stackState.git === "false") {
|
||||
flags.push("--no-git");
|
||||
}
|
||||
|
||||
if (stackState.install === "false") {
|
||||
flags.push("--no-install");
|
||||
}
|
||||
|
||||
return flags.length > 0
|
||||
? `${base} ${projectName} ${flags.join(" ")}`
|
||||
: `${base} ${projectName}`;
|
||||
}, []);
|
||||
|
||||
const handleTechSelect = useCallback(
|
||||
(category: keyof typeof TECH_OPTIONS, techId: string) => {
|
||||
setStack((prev) => {
|
||||
if (category === "addons" || category === "examples") {
|
||||
const currentArray = [...(prev[category] || [])];
|
||||
const index = currentArray.indexOf(techId);
|
||||
|
||||
if (index >= 0) {
|
||||
currentArray.splice(index, 1);
|
||||
} else {
|
||||
currentArray.push(techId);
|
||||
}
|
||||
|
||||
return {
|
||||
...prev,
|
||||
[category]: currentArray,
|
||||
};
|
||||
}
|
||||
|
||||
if (category === "database") {
|
||||
if (techId === "none") {
|
||||
return {
|
||||
...prev,
|
||||
database: techId,
|
||||
orm: null,
|
||||
};
|
||||
}
|
||||
|
||||
if (prev.database === "none") {
|
||||
return {
|
||||
...prev,
|
||||
database: techId,
|
||||
orm: "drizzle",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (category === "database" && techId === "sqlite") {
|
||||
return {
|
||||
...prev,
|
||||
database: techId,
|
||||
turso: prev.turso,
|
||||
};
|
||||
}
|
||||
|
||||
if (category === "database" && techId !== "sqlite") {
|
||||
return {
|
||||
...prev,
|
||||
database: techId,
|
||||
turso: "false",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
...prev,
|
||||
[category]: techId,
|
||||
};
|
||||
});
|
||||
|
||||
triggerConfetti();
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const copyToClipboard = useCallback(() => {
|
||||
navigator.clipboard.writeText(command);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}, [command]);
|
||||
|
||||
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="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">
|
||||
Stack Architect Terminal
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={copyToClipboard}
|
||||
className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors"
|
||||
title="Copy command"
|
||||
>
|
||||
{copied ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<ClipboardCopy className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 font-mono">
|
||||
<div className="mb-4">
|
||||
<div className="flex">
|
||||
<span className="text-green-600 dark:text-green-400 mr-2">$</span>
|
||||
<code className="text-gray-700 dark:text-gray-300">
|
||||
{command}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-300 dark:border-gray-700 pt-4 mt-4">
|
||||
<div className="mb-3 text-gray-600 dark:text-gray-400 flex items-center">
|
||||
<Terminal className="w-4 h-4 mr-2" />
|
||||
<span>
|
||||
Configure{" "}
|
||||
{activeTab.charAt(0).toUpperCase() + activeTab.slice(1)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mb-4">
|
||||
{TECH_OPTIONS[activeTab as keyof typeof TECH_OPTIONS].map(
|
||||
(tech) => {
|
||||
let isSelected = false;
|
||||
if (activeTab === "addons" || activeTab === "examples") {
|
||||
isSelected = stack[activeTab].includes(tech.id);
|
||||
} else {
|
||||
isSelected =
|
||||
stack[activeTab as keyof StackState] === tech.id;
|
||||
}
|
||||
|
||||
const isDisabled =
|
||||
(activeTab === "orm" && stack.database === "none") ||
|
||||
(activeTab === "turso" && stack.database !== "sqlite");
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={tech.id}
|
||||
className={`
|
||||
p-2 px-3 rounded
|
||||
${isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
|
||||
${
|
||||
isSelected
|
||||
? "bg-blue-100 dark:bg-blue-900/40 border border-blue-300 dark:border-blue-500/50"
|
||||
: "hover:bg-gray-200 dark:hover:bg-gray-800 border border-gray-300 dark:border-gray-700"
|
||||
}
|
||||
`}
|
||||
whileHover={!isDisabled ? { scale: 1.02 } : undefined}
|
||||
whileTap={!isDisabled ? { scale: 0.98 } : undefined}
|
||||
onClick={() =>
|
||||
!isDisabled &&
|
||||
handleTechSelect(
|
||||
activeTab as keyof typeof TECH_OPTIONS,
|
||||
tech.id,
|
||||
)
|
||||
}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0 mr-2">
|
||||
{isSelected ? (
|
||||
<CircleCheck className="h-4 w-4 text-blue-600 dark:text-blue-400" />
|
||||
) : (
|
||||
<Circle className="h-4 w-4 text-gray-400 dark:text-gray-600" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<div className="flex items-center">
|
||||
<span className="mr-2">{tech.icon}</span>
|
||||
<span
|
||||
className={
|
||||
isSelected
|
||||
? "text-blue-700 dark:text-blue-300"
|
||||
: "text-gray-700 dark:text-gray-300"
|
||||
}
|
||||
>
|
||||
{tech.name}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">
|
||||
{tech.description}
|
||||
</p>
|
||||
</div>
|
||||
{tech.default && !isSelected && (
|
||||
<span className="text-xs text-gray-500 dark:text-gray-600 ml-2">
|
||||
Default
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-300 dark:border-gray-700 pt-3 mb-3">
|
||||
<div className="text-xs text-gray-600 dark:text-gray-400 mb-2">
|
||||
Selected Stack
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300 border border-amber-300 dark:border-amber-700/30">
|
||||
{
|
||||
TECH_OPTIONS.runtime.find((t) => t.id === stack.runtime)
|
||||
?.icon
|
||||
}{" "}
|
||||
{
|
||||
TECH_OPTIONS.runtime.find((t) => t.id === stack.runtime)
|
||||
?.name
|
||||
}
|
||||
</span>
|
||||
|
||||
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border border-blue-300 dark:border-blue-700/30">
|
||||
{
|
||||
TECH_OPTIONS.backendFramework.find(
|
||||
(t) => t.id === stack.backendFramework,
|
||||
)?.icon
|
||||
}{" "}
|
||||
{
|
||||
TECH_OPTIONS.backendFramework.find(
|
||||
(t) => t.id === stack.backendFramework,
|
||||
)?.name
|
||||
}
|
||||
</span>
|
||||
|
||||
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300 border border-indigo-300 dark:border-indigo-700/30">
|
||||
{
|
||||
TECH_OPTIONS.database.find((t) => t.id === stack.database)
|
||||
?.icon
|
||||
}{" "}
|
||||
{
|
||||
TECH_OPTIONS.database.find((t) => t.id === stack.database)
|
||||
?.name
|
||||
}
|
||||
</span>
|
||||
|
||||
{stack.orm && (
|
||||
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-cyan-100 dark:bg-cyan-900/30 text-cyan-800 dark:text-cyan-300 border border-cyan-300 dark:border-cyan-700/30">
|
||||
{TECH_OPTIONS.orm.find((t) => t.id === stack.orm)?.icon}{" "}
|
||||
{TECH_OPTIONS.orm.find((t) => t.id === stack.orm)?.name}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border border-green-300 dark:border-green-700/30">
|
||||
{TECH_OPTIONS.auth.find((t) => t.id === stack.auth)?.icon}{" "}
|
||||
{TECH_OPTIONS.auth.find((t) => t.id === stack.auth)?.name}
|
||||
</span>
|
||||
|
||||
{stack.turso === "true" && stack.database === "sqlite" && (
|
||||
<span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-pink-100 dark:bg-pink-900/30 text-pink-800 dark:text-pink-300 border border-pink-300 dark:border-pink-700/30">
|
||||
{TECH_OPTIONS.turso.find((t) => t.id === stack.turso)?.icon}{" "}
|
||||
{TECH_OPTIONS.turso.find((t) => t.id === stack.turso)?.name}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{stack.addons.map((addonId) => {
|
||||
const addon = TECH_OPTIONS.addons.find(
|
||||
(a) => a.id === addonId,
|
||||
);
|
||||
return addon ? (
|
||||
<span
|
||||
key={addonId}
|
||||
className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-violet-100 dark:bg-violet-900/30 text-violet-800 dark:text-violet-300 border border-violet-300 dark:border-violet-700/30"
|
||||
>
|
||||
{addon.icon} {addon.name}
|
||||
</span>
|
||||
) : null;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-200 dark:bg-gray-900 border-t border-gray-300 dark:border-gray-700 flex overflow-x-auto">
|
||||
{Object.keys(TECH_OPTIONS).map((category) => (
|
||||
<button
|
||||
type="button"
|
||||
key={category}
|
||||
className={`
|
||||
py-2 px-4 text-xs font-mono whitespace-nowrap transition-colors
|
||||
${
|
||||
activeTab === category
|
||||
? "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-t-2 border-blue-500"
|
||||
: "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-800"
|
||||
}
|
||||
`}
|
||||
onClick={() => setActiveTab(category)}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StackArchitect;
|
||||
@@ -1,263 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { technologies } from "@/lib/constant";
|
||||
import { type JSX, useEffect, useRef, useState } from "react";
|
||||
|
||||
type TechConstellationProp = {
|
||||
fromRef: React.RefObject<HTMLElement>;
|
||||
toRef: React.RefObject<HTMLElement>;
|
||||
containerRef: React.RefObject<HTMLElement>;
|
||||
delay?: number;
|
||||
curveDirection?: number;
|
||||
};
|
||||
|
||||
const AnimatedBeam = ({
|
||||
fromRef,
|
||||
toRef,
|
||||
containerRef,
|
||||
delay = 0,
|
||||
curveDirection = 50,
|
||||
}: TechConstellationProp) => {
|
||||
const [path, setPath] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const updatePath = () => {
|
||||
if (!fromRef.current || !toRef.current || !containerRef.current) return;
|
||||
|
||||
const containerRect = containerRef.current.getBoundingClientRect();
|
||||
const fromRect = fromRef.current.getBoundingClientRect();
|
||||
const toRect = toRef.current.getBoundingClientRect();
|
||||
|
||||
const fromX = fromRect.left - containerRect.left + fromRect.width / 2;
|
||||
const fromY = fromRect.top - containerRect.top + fromRect.height / 2;
|
||||
const toX = toRect.left - containerRect.left + toRect.width / 2;
|
||||
const toY = toRect.top - containerRect.top + toRect.height / 2;
|
||||
|
||||
setPath(
|
||||
`M ${fromX},${fromY} Q ${(fromX + toX) / 2},${(fromY + toY) / 2 - curveDirection} ${toX},${toY}`,
|
||||
);
|
||||
};
|
||||
|
||||
updatePath();
|
||||
window.addEventListener("resize", updatePath);
|
||||
return () => window.removeEventListener("resize", updatePath);
|
||||
}, [fromRef, toRef, containerRef, curveDirection]);
|
||||
|
||||
return (
|
||||
<svg className="absolute top-0 left-0 w-full h-full pointer-events-none">
|
||||
<title>Tech Stack</title>
|
||||
<path
|
||||
d={path}
|
||||
fill="none"
|
||||
stroke="url(#gradient)"
|
||||
strokeWidth="2"
|
||||
className="opacity-30"
|
||||
>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
values="0,1000;1000,0"
|
||||
dur="3s"
|
||||
begin={`${delay}s`}
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</path>
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#3B82F6" stopOpacity="0" />
|
||||
<stop offset="50%" stopColor="#3B82F6" />
|
||||
<stop offset="100%" stopColor="#3B82F6" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const TechConstellation = () => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const centerRef = useRef<HTMLDivElement>(null);
|
||||
const techRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [stars, setStars] = useState<
|
||||
Array<{
|
||||
left: string;
|
||||
top: string;
|
||||
delay: string;
|
||||
}>
|
||||
>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const newStars = Array.from({ length: 20 }, () => ({
|
||||
left: `${Math.random() * 100}%`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
delay: `${Math.random() * 5}s`,
|
||||
}));
|
||||
setStars(newStars);
|
||||
}, []);
|
||||
|
||||
const calculateRadius = (category: string) => {
|
||||
switch (category) {
|
||||
case "core":
|
||||
return 160;
|
||||
case "frontend":
|
||||
case "backend":
|
||||
return 240;
|
||||
default:
|
||||
return 200;
|
||||
}
|
||||
};
|
||||
|
||||
const renderCategoryBeams = (category: string) => {
|
||||
const categoryTechs = technologies.filter(
|
||||
(tech) => tech.category === category,
|
||||
);
|
||||
const beams: JSX.Element[] = [];
|
||||
|
||||
if (category !== "core") {
|
||||
categoryTechs.forEach((tech, index) => {
|
||||
const curveDirection = tech.category === "frontend" ? 50 : -50;
|
||||
beams.push(
|
||||
<AnimatedBeam
|
||||
key={`beam-center-${tech.name}`}
|
||||
fromRef={centerRef as React.RefObject<HTMLElement>}
|
||||
toRef={{ current: techRefs.current[tech.name] as HTMLElement }}
|
||||
containerRef={containerRef as React.RefObject<HTMLElement>}
|
||||
delay={index * 0.2}
|
||||
curveDirection={curveDirection}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
for (let i = 0; i < categoryTechs.length - 1; i++) {
|
||||
const curveDirection = category === "frontend" ? 30 : -30;
|
||||
beams.push(
|
||||
<AnimatedBeam
|
||||
key={`beam-${categoryTechs[i].name}-${categoryTechs[i + 1].name}`}
|
||||
fromRef={{
|
||||
current: techRefs.current[categoryTechs[i].name] as HTMLElement,
|
||||
}}
|
||||
toRef={{
|
||||
current: techRefs.current[categoryTechs[i + 1].name] as HTMLElement,
|
||||
}}
|
||||
containerRef={containerRef as React.RefObject<HTMLElement>}
|
||||
delay={(i + categoryTechs.length) * 0.2}
|
||||
curveDirection={curveDirection}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
if (category === "core") {
|
||||
beams.push(
|
||||
<AnimatedBeam
|
||||
key="beam-core-connection"
|
||||
fromRef={{ current: techRefs.current.Bun as HTMLElement }}
|
||||
toRef={{ current: techRefs.current.tRPC as HTMLElement }}
|
||||
containerRef={containerRef as React.RefObject<HTMLElement>}
|
||||
delay={0}
|
||||
curveDirection={0}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
return beams;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setIsVisible(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="relative z-50 w-full h-[90vh] bg-gradient-to-b from-transparent mt-8 via-gray-950 to-transparent overflow-auto flex items-center justify-center "
|
||||
>
|
||||
<div
|
||||
ref={centerRef}
|
||||
className={`absolute z-10 w-24 h-24 bg-blue-600 rounded-full flex items-center justify-center transform transition-all duration-1000 ${isVisible ? "scale-100 opacity-100" : "scale-0 opacity-0"}`}
|
||||
>
|
||||
<span className="text-3xl font-bold text-white">TS</span>
|
||||
</div>
|
||||
|
||||
{technologies.map((tech, index) => {
|
||||
const radius = calculateRadius(tech.category);
|
||||
const x = Math.cos((tech.angle * Math.PI) / 180) * radius;
|
||||
const y = Math.sin((tech.angle * Math.PI) / 180) * radius;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={tech.name}
|
||||
ref={(el) => {
|
||||
techRefs.current[tech.name] = el;
|
||||
}}
|
||||
className={`absolute z-20 transform -translate-x-1/2 -translate-y-1/2 transition-all duration-1000
|
||||
${isVisible ? "scale-100 opacity-100" : "scale-0 opacity-0"}`}
|
||||
style={{
|
||||
left: `calc(50% + ${x}px)`,
|
||||
top: `calc(50% + ${y}px)`,
|
||||
transitionDelay: `${index * 100}ms`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`w-12 h-12 ${tech.color} rounded-full flex items-center justify-center
|
||||
transform hover:scale-125 transition-all duration-300 cursor-pointer
|
||||
shadow-lg hover:shadow-xl hover:rotate-12`}
|
||||
>
|
||||
<tech.icon className={`w-6 h-6 ${tech.textColor}`} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`opacity-100 absolute ${tech.top ? tech.top : "-top-[48px]"} ${tech.left ? tech.left : "left-1/2"} transform -translate-x-1/2
|
||||
bg-gray-900 text-white px-3 py-1.5 rounded-lg shadow-xl transition-all duration-300
|
||||
whitespace-nowrap text-xs hover:scale-105`}
|
||||
>
|
||||
<strong>{tech.name}</strong>
|
||||
<p className="text-gray-300 text-[10px]">{tech.description}</p>
|
||||
</div>
|
||||
<div
|
||||
className={`absolute ${tech.top ? tech.top : "-top-[60px]"} ${tech.left ? tech.left : "left-1/2"}
|
||||
transform -translate-x-1/2 bg-gradient-to-br from-gray-900/90 to-gray-950/90
|
||||
text-white px-3 py-1.5 rounded-lg transition-all duration-300
|
||||
whitespace-nowrap text-xs hover:scale-105 backdrop-blur-sm
|
||||
border border-blue-800/30 shadow-[0_0_10px_rgba(0,0,0,0.4)]
|
||||
group min-w-[160px] text-center z-30`}
|
||||
>
|
||||
<div className="absolute inset-0 bg-noise opacity-10 rounded-lg" />
|
||||
<strong className="text-sm text-blue-200 block">
|
||||
{tech.name}
|
||||
</strong>
|
||||
<p className="text-gray-300 mt-1">{tech.description}</p>
|
||||
<div
|
||||
className="absolute h-0.5 w-0 bg-gradient-to-r from-blue-500/0 via-blue-500 to-blue-500/0
|
||||
bottom-0 left-0 group-hover:w-full transition-all duration-500 border-beam"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{isVisible && (
|
||||
<>
|
||||
{renderCategoryBeams("core")}
|
||||
{renderCategoryBeams("frontend")}
|
||||
{renderCategoryBeams("backend")}
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
{stars.map((star) => (
|
||||
<div
|
||||
key={star.top}
|
||||
className="absolute w-2 h-2 bg-blue-500 rounded-full opacity-20"
|
||||
style={{
|
||||
left: star.left,
|
||||
top: star.top,
|
||||
animationDelay: star.delay,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TechConstellation;
|
||||
@@ -1,387 +0,0 @@
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
interface TechItem {
|
||||
name: string;
|
||||
description: string;
|
||||
category: "frontend" | "backend" | "database" | "tooling" | "deployment";
|
||||
logo?: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
const techStack: TechItem[] = [
|
||||
{
|
||||
name: "Next.js",
|
||||
description: "React framework for production",
|
||||
category: "frontend",
|
||||
logo: "/tech/nextjs.svg",
|
||||
color: "#ffffff",
|
||||
},
|
||||
{
|
||||
name: "TypeScript",
|
||||
description: "Strongly typed programming language",
|
||||
category: "frontend",
|
||||
logo: "/tech/typescript.svg",
|
||||
color: "#3178c6",
|
||||
},
|
||||
{
|
||||
name: "tRPC",
|
||||
description: "End-to-end typesafe APIs",
|
||||
category: "backend",
|
||||
logo: "/tech/trpc.svg",
|
||||
color: "#398CCB",
|
||||
},
|
||||
{
|
||||
name: "Tailwind CSS",
|
||||
description: "Utility-first CSS framework",
|
||||
category: "frontend",
|
||||
logo: "/tech/tailwind.svg",
|
||||
color: "#38bdf8",
|
||||
},
|
||||
{
|
||||
name: "Prisma",
|
||||
description: "Next-generation ORM",
|
||||
category: "database",
|
||||
logo: "/tech/prisma.svg",
|
||||
color: "#5a67d8",
|
||||
},
|
||||
{
|
||||
name: "PostgreSQL",
|
||||
description: "Advanced open source database",
|
||||
category: "database",
|
||||
logo: "/tech/postgresql.svg",
|
||||
color: "#336791",
|
||||
},
|
||||
{
|
||||
name: "Zod",
|
||||
description: "TypeScript-first schema validation",
|
||||
category: "backend",
|
||||
logo: "/tech/zod.svg",
|
||||
color: "#3E67B1",
|
||||
},
|
||||
{
|
||||
name: "Auth.js",
|
||||
description: "Authentication for the web",
|
||||
category: "backend",
|
||||
logo: "/tech/authjs.svg",
|
||||
color: "#32383E",
|
||||
},
|
||||
{
|
||||
name: "Turborepo",
|
||||
description: "High-performance build system",
|
||||
category: "tooling",
|
||||
logo: "/tech/turborepo.svg",
|
||||
color: "#EF4444",
|
||||
},
|
||||
{
|
||||
name: "Docker",
|
||||
description: "Containerization platform",
|
||||
category: "deployment",
|
||||
logo: "/tech/docker.svg",
|
||||
color: "#2496ED",
|
||||
},
|
||||
{
|
||||
name: "ESLint",
|
||||
description: "Pluggable JavaScript linter",
|
||||
category: "tooling",
|
||||
logo: "/tech/eslint.svg",
|
||||
color: "#4B32C3",
|
||||
},
|
||||
{
|
||||
name: "Prettier",
|
||||
description: "Opinionated code formatter",
|
||||
category: "tooling",
|
||||
logo: "/tech/prettier.svg",
|
||||
color: "#F7B93E",
|
||||
},
|
||||
];
|
||||
|
||||
export default function TechMatrix() {
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||
const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
|
||||
const [typedCommand, setTypedCommand] = useState("");
|
||||
const [isTyping, setIsTyping] = useState(false);
|
||||
const fullCommand = "show tech-stack --category all";
|
||||
|
||||
useEffect(() => {
|
||||
if (isTyping) return;
|
||||
|
||||
setIsTyping(true);
|
||||
let index = 0;
|
||||
|
||||
const typeInterval = setInterval(() => {
|
||||
if (index < fullCommand.length) {
|
||||
setTypedCommand(fullCommand.substring(0, index + 1));
|
||||
index++;
|
||||
} else {
|
||||
clearInterval(typeInterval);
|
||||
}
|
||||
}, 80);
|
||||
|
||||
return () => clearInterval(typeInterval);
|
||||
}, [isTyping]);
|
||||
|
||||
const categories = Array.from(
|
||||
new Set(techStack.map((item) => item.category)),
|
||||
);
|
||||
|
||||
const filteredTech = selectedCategory
|
||||
? techStack.filter((tech) => tech.category === selectedCategory)
|
||||
: techStack;
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent) => {
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
setCursorPosition({
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-full max-w-6xl mx-auto py-16 px-4 relative"
|
||||
onMouseMove={handleMouseMove}
|
||||
>
|
||||
{/* Floating particles effect */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div
|
||||
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
|
||||
key={i}
|
||||
className="absolute rounded-full bg-blue-500/10 dark:bg-blue-500/10 blur-xl"
|
||||
style={{
|
||||
width: `${Math.random() * 200 + 50}px`,
|
||||
height: `${Math.random() * 200 + 50}px`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
left: `${Math.random() * 100}%`,
|
||||
animation: `float ${Math.random() * 10 + 10}s linear infinite`,
|
||||
opacity: Math.random() * 0.5,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Main container */}
|
||||
<motion.div
|
||||
className="relative border border-gray-200/50 dark:border-gray-700/50 rounded-lg overflow-hidden bg-white/60 dark:bg-black/60 backdrop-blur-sm shadow-lg"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
style={{
|
||||
boxShadow:
|
||||
"0 0 30px rgba(59, 130, 246, 0.15), 0 0 10px rgba(147, 51, 234, 0.1)",
|
||||
}}
|
||||
>
|
||||
{/* Gradient border effect */}
|
||||
<div className="absolute inset-0 rounded-lg p-[1px] pointer-events-none">
|
||||
<div className="absolute inset-0 rounded-lg bg-gradient-to-r from-blue-500/20 via-purple-500/20 to-blue-500/20 animate-gradient-x" />
|
||||
</div>
|
||||
|
||||
{/* Terminal header */}
|
||||
<div className="flex items-center justify-between p-3 bg-gray-100/80 dark:bg-gray-900/80 border-b border-gray-200/50 dark:border-gray-700/50">
|
||||
<div className="flex space-x-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500" />
|
||||
<div className="w-3 h-3 rounded-full bg-green-500" />
|
||||
</div>
|
||||
<div className="font-mono text-sm text-gray-600 dark:text-gray-400 flex items-center space-x-1">
|
||||
<span className="text-green-600 dark:text-green-400">
|
||||
user@better-t-stack
|
||||
</span>
|
||||
<span>:</span>
|
||||
<span className="text-blue-600 dark:text-blue-400">
|
||||
~/tech-matrix
|
||||
</span>
|
||||
<span>$</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-500 font-mono">
|
||||
v1.0.0
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 relative">
|
||||
{/* Command line interface effect */}
|
||||
<div className="font-mono text-sm text-gray-700 dark:text-gray-300 mb-6 flex items-center">
|
||||
<span className="text-green-600 dark:text-green-400 mr-2">$</span>
|
||||
<span>{typedCommand}</span>
|
||||
<span className="h-4 w-2 bg-gray-600 dark:bg-gray-400 animate-blink ml-1" />
|
||||
</div>
|
||||
|
||||
{/* Category filters */}
|
||||
<motion.div
|
||||
className="flex flex-wrap gap-2 mb-6 relative"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.3, duration: 0.5 }}
|
||||
>
|
||||
<div className="absolute inset-0 -m-2 bg-gradient-to-r from-blue-500/0 via-blue-500/5 to-purple-500/0 rounded-lg blur-md -z-10" />
|
||||
<button
|
||||
type="button"
|
||||
className={`px-3 py-1 text-xs font-mono rounded-md transition-all duration-300 ${
|
||||
!selectedCategory
|
||||
? "bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/30 shadow-[0_0_10px_rgba(59,130,246,0.3)]"
|
||||
: "bg-gray-200/60 dark:bg-gray-800/60 border border-gray-300/50 dark:border-gray-700/50 text-gray-600 dark:text-gray-400 hover:bg-gray-300/30 dark:hover:bg-gray-700/30 hover:text-gray-700 dark:hover:text-gray-300"
|
||||
}`}
|
||||
onClick={() => setSelectedCategory(null)}
|
||||
>
|
||||
all
|
||||
</button>
|
||||
|
||||
{categories.map((category) => (
|
||||
<button
|
||||
type="button"
|
||||
key={category}
|
||||
className={`px-3 py-1 text-xs font-mono rounded-md transition-all duration-300 ${
|
||||
selectedCategory === category
|
||||
? "bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/30 shadow-[0_0_10px_rgba(59,130,246,0.3)]"
|
||||
: "bg-gray-200/60 dark:bg-gray-800/60 border border-gray-300/50 dark:border-gray-700/50 text-gray-600 dark:text-gray-400 hover:bg-gray-300/30 dark:hover:bg-gray-700/30 hover:text-gray-700 dark:hover:text-gray-300"
|
||||
}`}
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Tech stack display */}
|
||||
<div className="font-mono text-sm text-gray-700 dark:text-gray-300 relative">
|
||||
<div
|
||||
className="absolute inset-0 -z-10 opacity-30"
|
||||
style={{
|
||||
background: `radial-gradient(circle at ${cursorPosition.x}px ${cursorPosition.y}px, rgba(59, 130, 246, 0.15), transparent 200px)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="text-blue-600 dark:text-blue-400 mb-4">
|
||||
{"// Better-T Stack Tech Matrix"}
|
||||
</div>
|
||||
<div className="text-purple-600 dark:text-purple-400">
|
||||
{"const techStack = {"}
|
||||
</div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={selectedCategory || "all"}
|
||||
className="ml-4 space-y-1"
|
||||
variants={{
|
||||
hidden: { opacity: 0 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.07,
|
||||
},
|
||||
},
|
||||
}}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
{filteredTech.map((tech, index) => (
|
||||
<motion.div
|
||||
key={tech.name}
|
||||
className="group relative"
|
||||
variants={{
|
||||
hidden: { y: 10, opacity: 0 },
|
||||
show: { y: 0, opacity: 1 },
|
||||
}}
|
||||
>
|
||||
<div className="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-2 py-3 px-2 rounded-md transition-colors duration-300 hover:bg-gray-100/30 dark:hover:bg-gray-800/30 border border-transparent hover:border-gray-300/40 dark:hover:border-gray-700/40">
|
||||
<div className="flex items-center">
|
||||
<div className="w-5 h-5 mr-2 relative overflow-hidden flex-shrink-0">
|
||||
{tech.logo && (
|
||||
<div
|
||||
className="w-4 h-4 relative"
|
||||
style={{
|
||||
filter:
|
||||
"drop-shadow(0 0 2px rgba(255,255,255,0.3))",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="w-4 h-4 absolute"
|
||||
style={{
|
||||
backgroundColor: tech.color || "transparent",
|
||||
opacity: 0.2,
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-yellow-600 dark:text-yellow-400 font-semibold">
|
||||
{tech.name}
|
||||
</span>
|
||||
<span className="text-gray-900 dark:text-white">
|
||||
:{" "}
|
||||
</span>
|
||||
<span className="text-green-600 group-hover:text-green-700 dark:text-green-400 dark:group-hover:text-green-300 transition-colors">
|
||||
"{tech.description}"
|
||||
</span>
|
||||
{index < filteredTech.length - 1 && (
|
||||
<span className="text-gray-900 dark:text-white">
|
||||
,
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:flex items-center justify-between text-gray-500 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
|
||||
<span>{`// ${tech.category}`}</span>
|
||||
<span className="text-gray-400 dark:text-gray-600 text-xs">
|
||||
[installed]
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="absolute -right-2 top-0 bottom-0 w-1 bg-gradient-to-b from-transparent via-blue-500/30 to-transparent scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-center" />
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
<div className="text-purple-600 dark:text-purple-400">{"};"}</div>
|
||||
|
||||
{/* Terminal footer */}
|
||||
<div className="mt-6 text-gray-600 dark:text-gray-400 border-t border-gray-200/50 dark:border-gray-800/50 pt-4 flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-green-600 dark:text-green-400">$</span>{" "}
|
||||
run better-t-stack --with-typesafety
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 dark:text-gray-600 animate-pulse">
|
||||
Ready for deployment...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Add animated style tag for custom animations */}
|
||||
<style jsx>{`
|
||||
@keyframes float {
|
||||
0% { transform: translate(0, 0) rotate(0deg); }
|
||||
50% { transform: translate(20px, 20px) rotate(5deg); }
|
||||
100% { transform: translate(0, 0) rotate(0deg); }
|
||||
}
|
||||
|
||||
@keyframes animate-gradient-x {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
.animate-gradient-x {
|
||||
background-size: 200% 200%;
|
||||
animation: animate-gradient-x 15s linear infinite;
|
||||
}
|
||||
|
||||
.animate-blink {
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
import { Handle, Position } from "@xyflow/react";
|
||||
|
||||
const categoryIndicators = {
|
||||
core: "before:bg-amber-500",
|
||||
frontend: "before:bg-blue-500",
|
||||
backend: "before:bg-emerald-500",
|
||||
database: "before:bg-purple-500",
|
||||
auth: "before:bg-red-500",
|
||||
orm: "before:bg-orange-500",
|
||||
};
|
||||
|
||||
interface TechNodeData {
|
||||
category: keyof typeof categoryIndicators;
|
||||
isActive: boolean;
|
||||
label: string;
|
||||
description: string;
|
||||
isDefault?: boolean;
|
||||
isStatic?: boolean;
|
||||
}
|
||||
|
||||
export function TechNodeComponent({ data }: { data: TechNodeData }) {
|
||||
const baseStyles = `
|
||||
relative lg:px-5 lg:py-4 px-3 py-1 rounded-lg
|
||||
transition-all duration-300
|
||||
dark:border-white/20 border-gray-300/30
|
||||
before:content-[''] before:absolute before:left-0 before:top-0 before:w-1.5 before:h-full
|
||||
before:rounded-l-xl ${categoryIndicators[data.category]}
|
||||
`;
|
||||
|
||||
const activeStyles = data.isActive
|
||||
? "opacity-100 dark:bg-gradient-to-br dark:from-indigo-900/30 dark:to-violet-900/30 bg-gradient-to-br from-indigo-50 to-violet-50"
|
||||
: "opacity-80 hover:opacity-95 dark:bg-slate-800 bg-slate-100";
|
||||
|
||||
return (
|
||||
<div className="relative group">
|
||||
{data.label !== "Bun" && (
|
||||
<Handle
|
||||
type="target"
|
||||
position={Position.Top}
|
||||
className="!w-2 !h-2 !bg-indigo-400/70 dark:!bg-indigo-400/70"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className={`${baseStyles} ${activeStyles} backdrop-blur-3xl`}>
|
||||
<div className="dark:text-white text-gray-800 font-medium lg:text-sm text-xs tracking-wide lg:mb-1.5 mb-1">
|
||||
{data.label}
|
||||
</div>
|
||||
<div className="lg:text-[11px] text-[9px] leading-relaxed dark:text-white/80 text-gray-700">
|
||||
{data.description}
|
||||
</div>
|
||||
{!data.isDefault && !data.isStatic && (
|
||||
<div className="lg:text-[10px] text-[8px] dark:text-indigo-200/70 text-indigo-500/70 mt-2 italic">
|
||||
Alternative Option
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Bottom}
|
||||
className="!w-2 !h-2 !bg-indigo-400/70 dark:!bg-indigo-400/70"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,130 +0,0 @@
|
||||
interface ActiveNodes {
|
||||
backend: string;
|
||||
database: string;
|
||||
orm: string;
|
||||
auth: string;
|
||||
packageManager: string;
|
||||
addons: {
|
||||
docker: boolean;
|
||||
githubActions: boolean;
|
||||
seo: boolean;
|
||||
git: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
type TechOption = {
|
||||
id: string;
|
||||
label: string;
|
||||
category: string;
|
||||
};
|
||||
|
||||
const techOptions: Record<string, TechOption[]> = {
|
||||
database: [
|
||||
{ id: "sqlite", label: "SQLite", category: "database" },
|
||||
{ id: "postgres", label: "PostgreSQL", category: "database" },
|
||||
{ id: "no-database", label: "No DB", category: "database" },
|
||||
],
|
||||
orm: [
|
||||
{ id: "drizzle", label: "Drizzle", category: "orm" },
|
||||
{ id: "prisma", label: "Prisma", category: "orm" },
|
||||
],
|
||||
auth: [
|
||||
{ id: "better-auth", label: "Auth", category: "auth" },
|
||||
{ id: "no-auth", label: "No Auth", category: "auth" },
|
||||
],
|
||||
packageManager: [
|
||||
{ id: "npm", label: "NPM", category: "packageManager" },
|
||||
{ id: "pnpm", label: "PNPM", category: "packageManager" },
|
||||
{ id: "bun", label: "Bun", category: "packageManager" },
|
||||
],
|
||||
addons: [
|
||||
{ id: "docker", label: "Docker", category: "addons" },
|
||||
{ id: "githubActions", label: "GitHub Actions", category: "addons" },
|
||||
{ id: "seo", label: "SEO", category: "addons" },
|
||||
{ id: "git", label: "Git", category: "addons" },
|
||||
],
|
||||
};
|
||||
|
||||
interface TechSelectorProps {
|
||||
onSelect: (category: string, techId: string) => void;
|
||||
activeNodes: ActiveNodes;
|
||||
}
|
||||
export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) {
|
||||
return (
|
||||
<div className="h-full overflow-y-auto p-3 space-y-5 dark:bg-gray-900 bg-white">
|
||||
<div className="text-sm font-medium dark:text-gray-200 text-gray-800 border-b dark:border-gray-700 border-gray-200 pb-2">
|
||||
Options
|
||||
</div>
|
||||
|
||||
{Object.entries(techOptions)
|
||||
.filter(([category]) => category !== "addons")
|
||||
.map(([category, options]) => (
|
||||
<div key={category} className="space-y-2">
|
||||
<div className="text-xs dark:text-gray-400 text-gray-500 capitalize">
|
||||
{category}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{options.map((option) => (
|
||||
<Badge
|
||||
key={option.id}
|
||||
variant="secondary"
|
||||
className={`cursor-pointer dark:hover:bg-gray-700 hover:bg-gray-200 dark:text-gray-300 text-gray-700 ${
|
||||
activeNodes[
|
||||
category as keyof Omit<ActiveNodes, "addons">
|
||||
] === option.id && "bg-blue-600 dark:text-white text-white"
|
||||
}`}
|
||||
onClick={() => onSelect(category, option.id)}
|
||||
>
|
||||
{option.label}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs dark:text-gray-400 text-gray-500">Addons</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{techOptions.addons.map((option) => (
|
||||
<Badge
|
||||
key={option.id}
|
||||
variant="secondary"
|
||||
className={`cursor-pointer dark:hover:bg-gray-700 hover:bg-gray-200 dark:text-gray-300 text-gray-700 ${
|
||||
activeNodes.addons[
|
||||
option.id as keyof typeof activeNodes.addons
|
||||
] === true && "bg-blue-600 dark:text-white text-white"
|
||||
}`}
|
||||
onClick={() => onSelect("addons", option.id)}
|
||||
>
|
||||
{option.label}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const Badge = ({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
variant: "primary" | "secondary";
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
}) => {
|
||||
return (
|
||||
<span
|
||||
className={`
|
||||
px-2 rounded-full py-1 text-xs font-medium
|
||||
${className}
|
||||
`}
|
||||
{...props}
|
||||
onClick={props.onClick}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
@@ -1,54 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const TerminalDisplay = () => {
|
||||
const TITLE_TEXT = `
|
||||
╔════════════════════════════════════════════════════════════╗
|
||||
║ ║
|
||||
║ ██████╗ ███████╗████████╗████████╗███████╗██████╗ ║
|
||||
║ ██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗ ║
|
||||
║ ██████╔╝█████╗ ██║ ██║ █████╗ ██████╔╝ ║
|
||||
║ ██╔══██╗██╔══╝ ██║ ██║ ██╔══╝ ██╔══██╗ ║
|
||||
║ ██████╔╝███████╗ ██║ ██║ ███████╗██║ ██║ ║
|
||||
║ ╚═════╝ ╚══════╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝ ║
|
||||
║ ║
|
||||
║ ████████╗ ███████╗████████╗ █████╗ ██████╗██╗ ██╗ ║
|
||||
║ ╚══██╔══╝ ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝ ║
|
||||
║ ██║ ███████╗ ██║ ███████║██║ █████╔╝ ║
|
||||
║ ██║ ╚════██║ ██║ ██╔══██║██║ ██╔═██╗ ║
|
||||
║ ██║ ███████║ ██║ ██║ ██║╚██████╗██║ ██╗ ║
|
||||
║ ╚═╝ ╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝ ║
|
||||
║ ║
|
||||
╚════════════════════════════════════════════════════════════╝
|
||||
`;
|
||||
|
||||
return (
|
||||
<div className="max-sm:w-[95%] max-w-6xl mx-auto p-2 sm:p-6 mt-6 sm:mt-12 relative z-50">
|
||||
<div className="bg-gray-900/30 backdrop-blur-3xl rounded-lg shadow-xl overflow-hidden">
|
||||
<div className="bg-gray-800/30 backdrop-blur-3xl px-2 sm:px-4 py-1 sm:py-2 flex items-center">
|
||||
<div className="flex space-x-1 sm:space-x-2">
|
||||
<div className="w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-red-500" />
|
||||
<div className="w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-yellow-500" />
|
||||
<div className="w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-green-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-2 sm:p-4 font-mono text-xs sm:text-sm flex flex-col">
|
||||
<div className="flex items-center text-gray-300 mb-2 sm:mb-4 overflow-x-auto">
|
||||
<span className="text-green-400">➜</span>
|
||||
<span className="text-blue-400 ml-1 sm:ml-2">~</span>
|
||||
<span className="ml-1 sm:ml-2">$</span>
|
||||
<span className="ml-1 sm:ml-2 max-sm:text-xs text-white">
|
||||
npx create-better-t-stack@latest
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<pre className="text-blue-400 whitespace-pre sm:overflow-x-auto px-8 max-sm:scale-50 max-sm:origin-left">
|
||||
{TITLE_TEXT}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TerminalDisplay;
|
||||
@@ -30,11 +30,7 @@ const testimonials = [
|
||||
const Testimonials = () => {
|
||||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const duplicatedTestimonials = [
|
||||
...testimonials,
|
||||
...testimonials,
|
||||
...testimonials,
|
||||
];
|
||||
const duplicatedTestimonials = [...testimonials];
|
||||
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden w-screen">
|
||||
|
||||
@@ -4,8 +4,7 @@ import React from "react";
|
||||
import CodeContainer from "./_components/CodeContainer";
|
||||
import CustomizableSection from "./_components/CustomizableSection";
|
||||
import NpmPackage from "./_components/NpmPackage";
|
||||
import TechShowcase from "./_components/TechShowcase";
|
||||
import Testimonials from "./_components/Testimonials";
|
||||
// import Testimonials from "./_components/Testimonials";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
@@ -46,46 +45,6 @@ export default function HomePage() {
|
||||
<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>
|
||||
{/* <TerminalDisplay /> */}
|
||||
|
||||
<div className="w-full max-w-6xl mx-auto space-y-12 mt-12 relative z-50">
|
||||
<div className="text-center space-y-6 relative z-10 border dark:border-gray-700/30 border-gray-500/50 p-6 rounded-md dark:bg-gray-950/30 bg-white/70 backdrop-blur-3xl">
|
||||
<div className="relative">
|
||||
<h2 className="relative sm:text-4xl text-3xl md:text-5xl font-bold pb-3 group">
|
||||
<span className="text-blue-400 font-mono mr-1 animate-pulse">
|
||||
{">"}
|
||||
</span>
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-blue-400 dark:to-indigo-500 hover:from-indigo-500 hover:to-blue-600 dark:hover:from-indigo-400 dark:hover:to-blue-500 transition-all duration-300">
|
||||
A Symphony of Modern Tech
|
||||
</span>
|
||||
</h2>
|
||||
<div className="absolute -inset-1 bg-gradient-to-r dark:from-gray-800/0 dark:via-gray-700/10 dark:to-gray-800/0 from-gray-200/0 via-gray-300/20 to-gray-200/0 blur-xl -z-10" />
|
||||
</div>
|
||||
<div className="space-y-4 max-w-3xl mx-auto">
|
||||
<p className="sm:text-xl dark:text-gray-300 text-gray-700 leading-relaxed font-mono">
|
||||
<span className="text-yellow-400">$</span> carefully orchestrated
|
||||
stack of{" "}
|
||||
<span className="text-blue-500 font-semibold">
|
||||
cutting-edge technologies
|
||||
</span>
|
||||
, working in perfect harmony
|
||||
</p>{" "}
|
||||
<div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs dark:text-gray-400 text-gray-600">
|
||||
<span className="px-3 py-1 dark:bg-black bg-gray-100 dark:border-gray-700 border-gray-300 rounded-sm dark:hover:bg-gray-900/50 hover:bg-gray-200/80 transition-colors">
|
||||
--end-to-end-type-safety
|
||||
</span>
|
||||
<span className="px-3 py-1 dark:bg-black bg-gray-100 dark:border-gray-700 border-gray-300 rounded-sm dark:hover:bg-gray-900/50 hover:bg-gray-200/80 transition-colors">
|
||||
--lightning-fast
|
||||
</span>
|
||||
<span className="px-3 py-1 dark:bg-black bg-gray-100 dark:border-gray-700 border-gray-300 rounded-sm dark:hover:bg-gray-900/50 hover:bg-gray-200/80 transition-colors">
|
||||
--modern-tools
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="absolute inset-0 bg-gradient-to-b from-black via-gray-900/10 to-transparent -z-10" /> */}
|
||||
</div>
|
||||
</div>
|
||||
<TechShowcase />
|
||||
<CustomizableSection />
|
||||
<div className="w-full pt-16 relative overflow-hidden">
|
||||
<div className="max-w-6xl mx-auto relative">
|
||||
@@ -125,7 +84,7 @@ export default function HomePage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Testimonials />
|
||||
{/* <Testimonials /> */}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
8
bun.lock
8
bun.lock
@@ -14,7 +14,7 @@
|
||||
},
|
||||
"apps/cli": {
|
||||
"name": "create-better-t-stack",
|
||||
"version": "1.0.10",
|
||||
"version": "1.2.0",
|
||||
"bin": {
|
||||
"create-better-t-stack": "dist/index.js",
|
||||
},
|
||||
@@ -37,8 +37,10 @@
|
||||
"name": "web",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.2.0",
|
||||
"@xyflow/react": "^12.4.4",
|
||||
"babel-plugin-react-compiler": "^19.0.0-beta-3229e95-20250315",
|
||||
"canvas-confetti": "^1.9.3",
|
||||
"fumadocs-core": "15.1.2",
|
||||
"fumadocs-mdx": "11.5.7",
|
||||
"fumadocs-ui": "15.1.2",
|
||||
@@ -209,6 +211,8 @@
|
||||
|
||||
"@formatjs/intl-localematcher": ["@formatjs/intl-localematcher@0.6.0", "", { "dependencies": { "tslib": "2" } }, "sha512-4rB4g+3hESy1bHSBG3tDFaMY2CH67iT7yne1e+0CLTsGLDcmoEWWpJjjpWVaYgYfYuohIRuo0E+N536gd2ZHZA=="],
|
||||
|
||||
"@heroicons/react": ["@heroicons/react@2.2.0", "", { "peerDependencies": { "react": ">= 16 || ^19.0.0-rc" } }, "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ=="],
|
||||
|
||||
"@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
|
||||
|
||||
"@humanfs/node": ["@humanfs/node@0.16.6", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.3.0" } }, "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw=="],
|
||||
@@ -613,6 +617,8 @@
|
||||
|
||||
"caniuse-lite": ["caniuse-lite@1.0.30001699", "", {}, "sha512-b+uH5BakXZ9Do9iK+CkDmctUSEqZl+SP056vc5usa0PL+ev5OHw003rZXcnjNDv3L8P5j6rwT6C0BPKSikW08w=="],
|
||||
|
||||
"canvas-confetti": ["canvas-confetti@1.9.3", "", {}, "sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g=="],
|
||||
|
||||
"ccount": ["ccount@2.0.1", "", {}, "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="],
|
||||
|
||||
"chalk": ["chalk@5.4.1", "", {}, "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w=="],
|
||||
|
||||
9989
package-lock.json
generated
9989
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user