franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

added terminal design and tech stack

Browse Source
This commit is contained in:
fgrreloaded
2025-02-16 14:56:18 +05:30
parent e5badb108c
commit d31b03bf77
8 changed files with 358 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
apps/web/src/app/(home)/_components/Terminal.tsx Normal file
View File

@@ -0,0 +1,56 @@
import React from "react";
const TerminalDisplay = () => {
const TITLE_TEXT = `
╔════════════════════════════════════════════════════════════╗
║ ║
║ ██████╗ ███████╗████████╗████████╗███████╗██████╗ ║
║ ██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗ ║
║ ██████╔╝█████╗ ██║ ██║ █████╗ ██████╔╝ ║
║ ██╔══██╗██╔══╝ ██║ ██║ ██╔══╝ ██╔══██╗ ║
║ ██████╔╝███████╗ ██║ ██║ ███████╗██║ ██║ ║
║ ╚═════╝ ╚══════╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝ ║
║ ║
║ ████████╗ ███████╗████████╗ █████╗ ██████╗██╗ ██╗ ║
║ ╚══██╔══╝ ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝ ║
║ ██║ ███████╗ ██║ ███████║██║ █████╔╝ ║
║ ██║ ╚════██║ ██║ ██╔══██║██║ ██╔═██╗ ║
║ ██║ ███████║ ██║ ██║ ██║╚██████╗██║ ██╗ ║
║ ╚═╝ ╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝ ║
║ ║
║ The Modern Full-Stack Framework ║
║ ║
╚════════════════════════════════════════════════════════════╝
`;
return (
<div className="max-w-6xl mx-auto p-6 mt-12">
<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-4 py-2 flex items-center">
<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>
<div className="p-4 font-mono text-sm flex flex-col">
<div className="flex items-center text-gray-300 mb-4">
<span className="text-green-400">➜</span>
<span className="text-blue-400 ml-2">~</span>
<span className="ml-2">$</span>
<span className="ml-2 text-white">
npx create-better-t-stack@latest
</span>
</div>
<pre className="text-blue-400 whitespace-pre overflow-x-auto px-8">
{TITLE_TEXT}
</pre>
</div>
</div>
</div>
);
};
export default TerminalDisplay;