From b5f106dd47e8be024d85950e2d346bf3045fcc7b Mon Sep 17 00:00:00 2001 From: Aman Varshney Date: Sat, 5 Apr 2025 22:57:09 +0530 Subject: [PATCH] update landing page styles --- apps/cli/package.json | 7 +- apps/cli/src/helpers/create-readme.ts | 2 +- apps/cli/src/helpers/post-installation.ts | 2 +- .../template/base/apps/web-base/src/index.css | 2 +- .../app/(home)/_components/CodeContainer.tsx | 415 ++++++------------ .../_components/CustomizableSection.tsx | 7 +- .../app/(home)/_components/SideCircles.tsx | 18 - .../app/(home)/_components/Testimonials.tsx | 9 +- apps/web/src/app/(home)/page.tsx | 24 +- apps/web/src/app/global.css | 4 +- 10 files changed, 169 insertions(+), 321 deletions(-) delete mode 100644 apps/web/src/app/(home)/_components/SideCircles.tsx diff --git a/apps/cli/package.json b/apps/cli/package.json index af6edc3..ad790b4 100644 --- a/apps/cli/package.json +++ b/apps/cli/package.json @@ -7,10 +7,7 @@ "bin": { "create-better-t-stack": "dist/index.js" }, - "files": [ - "template", - "dist" - ], + "files": ["template", "dist"], "keywords": [ "better-t-stack", "typescript", @@ -39,7 +36,7 @@ ], "repository": { "type": "git", - "url": "git+https://github.com/better-t-stack/create-better-t-stack.git", + "url": "git+https://github.com/AmanVarshney01/create-better-t-stack.git", "directory": "apps/cli" }, "homepage": "https://better-t-stack.pages.dev/", diff --git a/apps/cli/src/helpers/create-readme.ts b/apps/cli/src/helpers/create-readme.ts index 0730123..606ce58 100644 --- a/apps/cli/src/helpers/create-readme.ts +++ b/apps/cli/src/helpers/create-readme.ts @@ -43,7 +43,7 @@ function generateReadmeContent(options: ProjectConfig): string { return `# ${projectName} -This project was created with [Better-T-Stack](https://github.com/better-t-stack/Better-T-Stack), a modern TypeScript stack that combines React, ${hasTanstackRouter ? "TanStack Router" : "React Router"}, Hono, tRPC, and more. +This project was created with [Better-T-Stack](https://github.com/AmanVarshney01/create-better-t-stack), a modern TypeScript stack that combines React, ${hasTanstackRouter ? "TanStack Router" : "React Router"}, Hono, tRPC, and more. ## Features diff --git a/apps/cli/src/helpers/post-installation.ts b/apps/cli/src/helpers/post-installation.ts index b8f8e1f..d046baa 100644 --- a/apps/cli/src/helpers/post-installation.ts +++ b/apps/cli/src/helpers/post-installation.ts @@ -60,7 +60,7 @@ ${ }${pc.cyan("•")} API: http://localhost:3000 ${nativeInstructions ? `\n${nativeInstructions.trim()}` : ""}${databaseInstructions ? `\n${databaseInstructions.trim()}` : ""}${tauriInstructions ? `\n${tauriInstructions.trim()}` : ""}${lintingInstructions ? `\n${lintingInstructions.trim()}` : ""}${pwaInstructions ? `\n${pwaInstructions.trim()}` : ""} \n${pc.bold("Like Better-T Stack?")} Please consider giving us a star on GitHub: -${pc.cyan("https://github.com/better-t-stack/create-better-t-stack")}`, +${pc.cyan("https://github.com/AmanVarshney01/create-better-t-stack")}`, "Next steps", ); } diff --git a/apps/cli/template/base/apps/web-base/src/index.css b/apps/cli/template/base/apps/web-base/src/index.css index 1c9e00a..437d1dc 100644 --- a/apps/cli/template/base/apps/web-base/src/index.css +++ b/apps/cli/template/base/apps/web-base/src/index.css @@ -1,7 +1,7 @@ @import "tailwindcss"; @import "tw-animate-css"; -@custom-variant dark (&:is(.dark *)); +@custom-variant dark (&:where(.dark, .dark *)); @theme { --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, diff --git a/apps/web/src/app/(home)/_components/CodeContainer.tsx b/apps/web/src/app/(home)/_components/CodeContainer.tsx index fb6a138..6fc4250 100644 --- a/apps/web/src/app/(home)/_components/CodeContainer.tsx +++ b/apps/web/src/app/(home)/_components/CodeContainer.tsx @@ -1,6 +1,6 @@ "use client"; import { motion } from "framer-motion"; -import { Check, CircleCheck, ClipboardCopy, Terminal } from "lucide-react"; +import { Check, ClipboardCopy, Terminal } from "lucide-react"; import { useEffect, useRef, useState } from "react"; const CodeContainer = () => { @@ -8,24 +8,37 @@ const CodeContainer = () => { const [selectedPM, setSelectedPM] = useState<"npm" | "pnpm" | "bun">("bun"); const [copied, setCopied] = useState(false); const menuRef = useRef(null); - const [typingComplete, setTypingComplete] = useState(false); - const [currentStep, setCurrentStep] = useState(0); + const [showCursor, setShowCursor] = useState(true); + const [step, setStep] = useState(0); useEffect(() => { - const handleClickOutside = (event: MouseEvent) => { - if (menuRef.current && !menuRef.current.contains(event.target as Node)) { + const handleClickOutside = (e: MouseEvent) => { + if (menuRef.current && !menuRef.current.contains(e.target as Node)) setIsOpen(false); - } }; - document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); + useEffect(() => { + const interval = setInterval(() => setShowCursor((p) => !p), 500); + return () => clearInterval(interval); + }, []); + + useEffect(() => { + if (step < 5) { + const timer = setTimeout( + () => setStep((s) => s + 1), + step === 0 ? 1000 : 400, + ); + return () => clearTimeout(timer); + } + }, [step]); + const commands = { - npm: "npx create-better-t-stack@latest my-better-t-app --yes", - pnpm: "pnpm create better-t-stack@latest my-better-t-app --yes", - bun: "bun create better-t-stack@latest my-better-t-app --yes", + npm: "npx create-better-t-stack@latest my-app", + pnpm: "pnpm create better-t-stack@latest my-app", + bun: "bun create better-t-stack@latest my-app", }; const copyToClipboard = async (pm: "npm" | "pnpm" | "bun") => { @@ -36,54 +49,35 @@ const CodeContainer = () => { setTimeout(() => setCopied(false), 2000); }; - useEffect(() => { - if (!typingComplete) { - const timer = setTimeout(() => { - setTypingComplete(true); - }, 1000); - return () => clearTimeout(timer); - } - - if (typingComplete && currentStep < 5) { - const timer = setTimeout(() => { - setCurrentStep((prev) => prev + 1); - }, 800); - return () => clearTimeout(timer); - } - }, [typingComplete, currentStep]); - return ( -
-
-
-
-
-
-
+
+
+
+
+
+
+
-
- Quick Install Terminal + +
+ Terminal
- - ), - )} - + {(["npm", "pnpm", "bun"] as const).map((pm) => ( + + ))} )}
-
+
-
- $ - + $ +
+ {commands[selectedPM]} - - ▌ - + {step === 0 && ( + + )}
- copyToClipboard(selectedPM)} - className="ml-2 flex-shrink-0 text-gray-600 transition-colors hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200" - title="Copy command" + className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300" > {copied ? ( - - Copied! - + ) : ( - - Copy to clipboard - + )} - +
- {typingComplete && ( - -
- {currentStep >= 1 && ( - - Creating a new Better-T-Stack project - - )} - {currentStep >= 2 && ( - -

- Project name:{" "} - - my-better-t-app - -

-

- Frontend:{" "} - - React Web - -

-

- Runtime:{" "} - - Bun - -

-

- Backend:{" "} - - Hono - -

-

- Database:{" "} - - SQLite + Drizzle - -

- - )} -
+ {step > 0 && ( +
+ {step > 0 && ( +
+ Creating a new Better-T-Stack project +
+ )} - - {currentStep >= 3 && ( - - - Completed - - Creating project structure - - )} - {currentStep >= 4 && ( - - - Completed - - Installing dependencies - - )} - {currentStep >= 5 && ( - - - - Completed - - Setting up database schema - - - - Completed - - Configuring authentication - - - - Success - - - -
- Project ready! Run - - cd my-better-t-app - - and - - {selectedPM === "npm" && "npm run dev"} - {selectedPM === "pnpm" && "pnpm dev"} - {selectedPM === "bun" && "bun dev"} - -
- - - )} - - + {step > 1 && ( +
+ Project: + + my-app + + Frontend: + + React Web + + Backend: + Hono + Database: + + SQLite + Drizzle + +
+ )} + + {step > 2 && ( +
+ ✓ Creating project structure +
+ )} + + {step > 3 && ( +
+ ✓ Installing dependencies +
+ )} + + {step > 4 && ( +
+ + Project created successfully! Run: + +
+ + cd my-app + + + and + + + {selectedPM === "npm" + ? "npm run dev" + : selectedPM === "pnpm" + ? "pnpm dev" + : "bun dev"} + +
+
+ )} +
)} -
= 5 && typingComplete ? "" : "hidden" - }`} - > - $ - - ▌ - -
+ {step > 4 && ( +
+ $ + +
+ )}
-
-
- - For custom options, use - - {selectedPM === "npm" && "npx"} - {selectedPM === "pnpm" && "pnpm dlx"} - {selectedPM === "bun" && "bunx"} create-better-t-stack - - without flags - -
+
+ For customization options:{" "} + + {selectedPM === "npm" + ? "npx" + : selectedPM === "pnpm" + ? "pnpm dlx" + : "bunx"}{" "} + create-better-t-stack +
diff --git a/apps/web/src/app/(home)/_components/CustomizableSection.tsx b/apps/web/src/app/(home)/_components/CustomizableSection.tsx index ea7a461..0313398 100644 --- a/apps/web/src/app/(home)/_components/CustomizableSection.tsx +++ b/apps/web/src/app/(home)/_components/CustomizableSection.tsx @@ -13,11 +13,8 @@ export default function CustomizableSection() { transition={{ duration: 0.5 }} className="relative" > -

- - {">"} - - +

+ Your Stack, Your Choice

diff --git a/apps/web/src/app/(home)/_components/SideCircles.tsx b/apps/web/src/app/(home)/_components/SideCircles.tsx deleted file mode 100644 index ef82875..0000000 --- a/apps/web/src/app/(home)/_components/SideCircles.tsx +++ /dev/null @@ -1,18 +0,0 @@ -const SideCircles = () => { - return ( - <> -
-
-
-
-
-
-
-
-
-
- - ); -}; - -export default SideCircles; diff --git a/apps/web/src/app/(home)/_components/Testimonials.tsx b/apps/web/src/app/(home)/_components/Testimonials.tsx index 8e7cbfa..ca54003 100644 --- a/apps/web/src/app/(home)/_components/Testimonials.tsx +++ b/apps/web/src/app/(home)/_components/Testimonials.tsx @@ -19,7 +19,9 @@ const TWEET_IDS = [ "1904301540422070671", "1904338606409531710", "1904318186750652606", + "1908568583799484519", "1904179661086556412", + "1908558365128876311", "1907772878139072851", "1906149740095705265", "1906001923456790710", @@ -82,11 +84,8 @@ export default function Testimonials() { transition={{ duration: 0.5 }} className="relative" > -

- - {">"} - - +

+ Developer Feedback

diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx index 889bf7e..d906820 100644 --- a/apps/web/src/app/(home)/page.tsx +++ b/apps/web/src/app/(home)/page.tsx @@ -9,13 +9,13 @@ import Testimonials from "./_components/Testimonials"; export default function HomePage() { return ( -
+
-

- +

+ Better-T Stack

@@ -24,7 +24,7 @@ export default function HomePage() {

-

+

A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations

@@ -36,14 +36,10 @@ export default function HomePage() {
- -
-
-
@@ -57,10 +53,10 @@ export default function HomePage() {

-
+
@@ -75,12 +71,12 @@ export default function HomePage() {
-
-
+
+
-
+
diff --git a/apps/web/src/app/global.css b/apps/web/src/app/global.css index a89ab7c..e2213fd 100644 --- a/apps/web/src/app/global.css +++ b/apps/web/src/app/global.css @@ -72,7 +72,7 @@ } /* custom scrollbar */ -::-webkit-scrollbar { +/* ::-webkit-scrollbar { width: 8px; } @@ -90,4 +90,4 @@ ::-webkit-scrollbar-thumb:hover { background: linear-gradient(45deg, #888, #aaa); -} +} */