From 5255c218912b58cda0dc5fd21fc5e58bc13866fd Mon Sep 17 00:00:00 2001 From: Aman Varshney Date: Mon, 24 Mar 2025 03:00:24 +0530 Subject: [PATCH] light mode --- apps/cli/package.json | 5 +- .../app/(home)/_components/CenterLines.tsx | 12 +- .../app/(home)/_components/CodeContainer.tsx | 89 +++++++++----- .../app/(home)/_components/CodeExample.tsx | 61 ++++++---- .../app/(home)/_components/CommandDisplay.tsx | 6 +- .../_components/CustomizableSection.tsx | 26 ++-- .../(home)/_components/CustomizableStack.tsx | 16 +-- .../(home)/_components/FeaturedSection.tsx | 52 ++++---- .../web/src/app/(home)/_components/Footer.tsx | 33 ++--- .../web/src/app/(home)/_components/Navbar.tsx | 31 ++--- .../src/app/(home)/_components/NpmPackage.tsx | 4 +- .../src/app/(home)/_components/TechMatrix.tsx | 114 ++++++++++-------- .../(home)/_components/TechNodeComponent.tsx | 26 ++-- .../app/(home)/_components/TechSelector.tsx | 25 ++-- .../app/(home)/_components/TechShowcase.tsx | 46 ++++--- .../app/(home)/_components/Testimonials.tsx | 31 +++-- apps/web/src/app/(home)/layout.tsx | 2 +- apps/web/src/app/(home)/page.tsx | 35 +++--- apps/web/src/app/layout.tsx | 3 + 19 files changed, 346 insertions(+), 271 deletions(-) diff --git a/apps/cli/package.json b/apps/cli/package.json index a54da91..b8cad71 100644 --- a/apps/cli/package.json +++ b/apps/cli/package.json @@ -22,10 +22,7 @@ "test": "vitest run", "prepublishOnly": "npm run build" }, - "files": [ - "dist", - "template" - ], + "files": ["dist", "template"], "dependencies": { "@clack/prompts": "^0.10.0", "commander": "^13.1.0", diff --git a/apps/web/src/app/(home)/_components/CenterLines.tsx b/apps/web/src/app/(home)/_components/CenterLines.tsx index 46ff9e1..66cec8c 100644 --- a/apps/web/src/app/(home)/_components/CenterLines.tsx +++ b/apps/web/src/app/(home)/_components/CenterLines.tsx @@ -5,15 +5,15 @@ const CenterLines = () => { <>
); diff --git a/apps/web/src/app/(home)/_components/CodeContainer.tsx b/apps/web/src/app/(home)/_components/CodeContainer.tsx index c57b897..50fcc4a 100644 --- a/apps/web/src/app/(home)/_components/CodeContainer.tsx +++ b/apps/web/src/app/(home)/_components/CodeContainer.tsx @@ -52,15 +52,17 @@ const CodeContainer = () => { return (
-
-
+
+
-
terminal
+
+ terminal +
{/* Package Manager Selector */} @@ -68,11 +70,13 @@ const CodeContainer = () => { {isOpen && ( -
+
    {(Object.keys(commands) as Array<"npm" | "pnpm" | "bun">).map( (pm) => ( @@ -97,8 +101,8 @@ const CodeContainer = () => { type="button" className={`block w-full text-left px-4 py-2 text-sm ${ selectedPM === pm - ? "bg-blue-900/30 text-blue-400" - : "text-gray-300 hover:bg-blue-900/20" + ? "bg-gray-200 dark:bg-blue-900/30 text-gray-800 dark:text-blue-400" + : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-blue-900/20" }`} onClick={() => copyToClipboard(pm)} > @@ -113,14 +117,18 @@ const CodeContainer = () => {
-
+
- $ - {commands[selectedPM]} + $ + + {commands[selectedPM]} + ▌ @@ -129,7 +137,7 @@ const CodeContainer = () => { 
{command}
diff --git a/apps/web/src/app/(home)/_components/CustomizableSection.tsx b/apps/web/src/app/(home)/_components/CustomizableSection.tsx index 400c3bd..4d6bc40 100644 --- a/apps/web/src/app/(home)/_components/CustomizableSection.tsx +++ b/apps/web/src/app/(home)/_components/CustomizableSection.tsx @@ -4,7 +4,7 @@ import CustomizableStack from "./CustomizableStack"; export default function CustomizableSection() { return (
-
+
- + {">"} - + Your Stack, Your Choice -
+
-

- $ Better-T Stack with - defaults, - +

+ ${" "} + Better-T Stack with defaults, + {" "} customizable options {" "} for your perfect development environment

-
- +
+ --multiple-database-options - + --flexible-authentication - + --alternative-orms - + --framework-choices
diff --git a/apps/web/src/app/(home)/_components/CustomizableStack.tsx b/apps/web/src/app/(home)/_components/CustomizableStack.tsx index 195e968..91f2410 100644 --- a/apps/web/src/app/(home)/_components/CustomizableStack.tsx +++ b/apps/web/src/app/(home)/_components/CustomizableStack.tsx @@ -411,21 +411,21 @@ const CustomizableStack = () => {
-
-
+
+
-
+
-
-
+
+
Select technologies from the left panel to customize your stack. The graph will automatically update connections.
-
+
{ }} > diff --git a/apps/web/src/app/(home)/_components/FeaturedSection.tsx b/apps/web/src/app/(home)/_components/FeaturedSection.tsx index 3455315..1b6b74e 100644 --- a/apps/web/src/app/(home)/_components/FeaturedSection.tsx +++ b/apps/web/src/app/(home)/_components/FeaturedSection.tsx @@ -28,26 +28,28 @@ const Featured = () => { ].map((feature) => (
- -

+ +

{feature.title}

-

{feature.description}

+

+ {feature.description} +

))}
-
+
-

+

Write Better Code, Faster

-

+

Leverage the power of TypeScript with our carefully selected tools and frameworks.

@@ -74,14 +76,16 @@ const Featured = () => { ].map((item) => (
- +
-

+

{item.title}

-

{item.description}

+

+ {item.description} +

))} @@ -89,20 +93,20 @@ const Featured = () => {
-
- 
+							

+								
 									{`// Type-safe API endpoint
 export const userRouter = router({
-  get: publicProcedure
-    .input(z.string())
-    .query(async ({ input }) => {
-      const user = await db
-        .select()
-        .from(users)
-        .where(eq(users.id, input));
+		get: publicProcedure
+				.input(z.string())
+				.query(async ({ input }) => {
+						const user = await db
+								.select()
+								.from(users)
+								.where(eq(users.id, input));
 
-      return user;
-    })
+						return user;
+				})
 });`}
 								

 							

@@ -112,10 +116,10 @@ export const userRouter = router({
-

+

Ready to Build Something Amazing?

-

+

Start your next project with Better-T Stack and experience the future of web development.

diff --git a/apps/web/src/app/(home)/_components/Footer.tsx b/apps/web/src/app/(home)/_components/Footer.tsx index 5ddbbf8..311155b 100644 --- a/apps/web/src/app/(home)/_components/Footer.tsx +++ b/apps/web/src/app/(home)/_components/Footer.tsx @@ -2,28 +2,28 @@ import Link from "next/link"; const Footer = () => { return ( -
+
-

+

$ better-t.stack

-

+

The ultimate TypeScript scaffolding tool for modern web development

-

- $ links +

+ $ links

-
    +
    • - GitHub @@ -32,32 +32,33 @@ const Footer = () => { - NPM
      • -
    • + {/*
    • - Documentation -
      • + */}
-

- $ contact +

+ ${" "} + contact

-

+

echo{" "} - "hello@better-t-stack.dev" + "amanvarshney.work@gmail.com"

-
+

© {new Date().getFullYear()} Better-T Stack. All rights reserved.

diff --git a/apps/web/src/app/(home)/_components/Navbar.tsx b/apps/web/src/app/(home)/_components/Navbar.tsx index 497e2ed..71d15e4 100644 --- a/apps/web/src/app/(home)/_components/Navbar.tsx +++ b/apps/web/src/app/(home)/_components/Navbar.tsx @@ -1,4 +1,5 @@ "use client"; +import { Github } from "lucide-react"; import Link from "next/link"; import { useEffect, useRef, useState } from "react"; import PackageIcon from "./Icons"; @@ -43,7 +44,7 @@ const Navbar = () => { className={`fixed top-0 right-0 z-[100] w-screen px-8 py-5 grid grid-cols-1 md:grid-cols-3 items-center transition-all duration-300 ${ scrolled ? "bg-transparent border-transparent" - : "sm:bg-black/40 sm:backdrop-blur-xl sm:border-b border-blue-500/20" + : " dark:sm:bg-black/40 sm:backdrop-blur-xl sm:border-b sm:bg-white/40 border-blue-400/20" }`} >
{ }`} >
- $_ + $_
- + Better-T Stack
{ linkRefs.current.home = ref; }} onMouseOver={() => setActiveLink("home")} - className="text-gray-300 hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative font-mono" + className=" dark:text-gray-300 text-gray-700 dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative font-mono" > - ~/home + ~/ + home {/* { }} onMouseOver={() => setActiveLink("demo")} onMouseLeave={() => setActiveLink("home")} - className="text-gray-300 hidden hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative sm:flex gap-2 items-center font-mono" + className=" dark:text-gray-300 text-gray-700 hidden dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative sm:flex gap-2 items-center font-mono" > demo @@ -112,7 +114,7 @@ const Navbar = () => { }} onMouseOver={() => setActiveLink("npm")} onMouseLeave={() => setActiveLink("home")} - className="text-gray-300 hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono" + className=" dark:text-gray-300 text-gray-700 dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono" > {" "} npm @@ -155,14 +157,13 @@ const Navbar = () => { }} onMouseOver={() => setActiveLink("github")} onMouseLeave={() => setActiveLink("home")} - className={`text-gray-300 hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono ${ + className={` dark:text-gray-300 text-gray-700 dark:hover:text-blue-300 hover:text-blue-600 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono ${ scrolled ? "sm:opacity-100 sm:translate-y-0" : "sm:opacity-0 sm:pointer-events-none" }`} > - {" "} - github + Github
@@ -175,11 +176,11 @@ const Navbar = () => { - - github + + Github
diff --git a/apps/web/src/app/(home)/_components/NpmPackage.tsx b/apps/web/src/app/(home)/_components/NpmPackage.tsx index 7cced5e..6563cfb 100644 --- a/apps/web/src/app/(home)/_components/NpmPackage.tsx +++ b/apps/web/src/app/(home)/_components/NpmPackage.tsx @@ -21,8 +21,8 @@ const NpmPackage = () => { return (
- - + + {versionLoading ? "[v1.0.0]" : `[v${version}]`}
diff --git a/apps/web/src/app/(home)/_components/TechMatrix.tsx b/apps/web/src/app/(home)/_components/TechMatrix.tsx index d0775b0..c72dd9d 100644 --- a/apps/web/src/app/(home)/_components/TechMatrix.tsx +++ b/apps/web/src/app/(home)/_components/TechMatrix.tsx @@ -148,7 +148,7 @@ export default function TechMatrix() {
key={i} - className="absolute rounded-full bg-blue-500/10 blur-xl" + 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`, @@ -163,7 +163,7 @@ export default function TechMatrix() { {/* Main container */} {/* Terminal header */} -
+
-
- user@better-t-stack +
+ + user@better-t-stack + : - ~/tech-matrix + + ~/tech-matrix + $
-
v1.0.0
+
+ v1.0.0 +
{/* Command line interface effect */} -
- $ +
+ $ {typedCommand} - +
{/* Category filters */} @@ -213,8 +219,8 @@ export default function TechMatrix() { type="button" className={`px-3 py-1 text-xs font-mono rounded-md transition-all duration-300 ${ !selectedCategory - ? "bg-blue-500/20 text-blue-300 border border-blue-500/30 shadow-[0_0_10px_rgba(59,130,246,0.3)]" - : "bg-gray-800/60 border border-gray-700/50 text-gray-400 hover:bg-gray-700/30 hover:text-gray-300" + ? "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)} > @@ -227,8 +233,8 @@ export default function TechMatrix() { 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-300 border border-blue-500/30 shadow-[0_0_10px_rgba(59,130,246,0.3)]" - : "bg-gray-800/60 border border-gray-700/50 text-gray-400 hover:bg-gray-700/30 hover:text-gray-300" + ? "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)} > @@ -238,7 +244,7 @@ export default function TechMatrix() { {/* Tech stack display */} -
+
-
+
{"// Better-T Stack Tech Matrix"}
-
{"const techStack = {"}
+
+ {"const techStack = {"} +
-
+
{tech.logo && ( @@ -300,21 +308,25 @@ export default function TechMatrix() { )}
- + {tech.name} - : - + + :{" "} + + "{tech.description}" {index < filteredTech.length - 1 && ( - , + + , + )}
-
+
{`// ${tech.category}`} - + [installed]
@@ -326,15 +338,15 @@ export default function TechMatrix() { -
{"};"}
+
{"};"}
{/* Terminal footer */} -
+
- $ run better-t-stack - --with-typesafety + ${" "} + run better-t-stack --with-typesafety
-
+
Ready for deployment...
@@ -344,32 +356,32 @@ export default function TechMatrix() { {/* Add animated style tag for custom animations */} + @keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } + } + `}
); } diff --git a/apps/web/src/app/(home)/_components/TechNodeComponent.tsx b/apps/web/src/app/(home)/_components/TechNodeComponent.tsx index 311054c..b26f995 100644 --- a/apps/web/src/app/(home)/_components/TechNodeComponent.tsx +++ b/apps/web/src/app/(home)/_components/TechNodeComponent.tsx @@ -20,16 +20,16 @@ interface TechNodeData { 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 - border border-white/20 - before:content-[''] before:absolute before:left-0 before:top-0 before:w-1.5 before:h-full - before:rounded-l-xl ${categoryIndicators[data.category]} - `; + 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 bg-gradient-to-br from-indigo-900/10 to-violet-900/10" - : "opacity-80 hover:opacity-95 bg-slate-800"; + ? "opacity-100 dark:bg-gradient-to-br dark:from-indigo-900/10 dark:to-violet-900/10 bg-gradient-to-br from-indigo-100/40 to-violet-100/40" + : "opacity-80 hover:opacity-95 dark:bg-slate-800 bg-slate-100"; return (
@@ -37,19 +37,19 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) { )}
-
+
{data.label}
-
+
{data.description}
{!data.isDefault && !data.isStatic && ( -
+
Alternative Option
)} @@ -58,7 +58,7 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
); diff --git a/apps/web/src/app/(home)/_components/TechSelector.tsx b/apps/web/src/app/(home)/_components/TechSelector.tsx index d702aad..3865cb0 100644 --- a/apps/web/src/app/(home)/_components/TechSelector.tsx +++ b/apps/web/src/app/(home)/_components/TechSelector.tsx @@ -49,11 +49,10 @@ interface TechSelectorProps { onSelect: (category: string, techId: string) => void; activeNodes: ActiveNodes; } - export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) { return ( -
-
+
+
Options
@@ -61,16 +60,18 @@ export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) { .filter(([category]) => category !== "addons") .map(([category, options]) => (
-
{category}
+
+ {category} +
{options.map((option) => ( - ] === option.id && "bg-blue-600 text-white" + ] === option.id && "bg-blue-600 dark:text-white text-white" }`} onClick={() => onSelect(category, option.id)} > @@ -82,16 +83,16 @@ export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) { ))}
-
Addons
+
Addons
{techOptions.addons.map((option) => ( onSelect("addons", option.id)} > @@ -117,9 +118,9 @@ const Badge = ({ return ( diff --git a/apps/web/src/app/(home)/_components/TechShowcase.tsx b/apps/web/src/app/(home)/_components/TechShowcase.tsx index 9a9a290..eb36d1e 100644 --- a/apps/web/src/app/(home)/_components/TechShowcase.tsx +++ b/apps/web/src/app/(home)/_components/TechShowcase.tsx @@ -138,8 +138,8 @@ export default function TechShowcase() { type="button" className={`px-4 py-2 rounded-md font-mono text-sm transition-colors ${ activeCategory === null - ? "bg-blue-500 text-white" - : "bg-gray-800 text-gray-300 hover:bg-gray-700" + ? "bg-blue-500 text-white dark:text-white" + : "bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700" }`} onClick={() => setActiveCategory(null)} > @@ -152,8 +152,8 @@ export default function TechShowcase() { type="button" className={`px-4 py-2 rounded-md font-mono text-sm transition-colors ${ activeCategory === category - ? "bg-blue-500 text-white" - : "bg-gray-800 text-gray-300 hover:bg-gray-700" + ? "bg-blue-500 text-white dark:text-white" + : "bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700" }`} onClick={() => setActiveCategory(category)} > @@ -170,13 +170,15 @@ export default function TechShowcase() { initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} - className="bg-gray-900/50 backdrop-blur-sm border border-gray-800 rounded-lg p-4 hover:border-blue-500/30 transition-colors" + className="bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm border border-gray-200 dark:border-gray-800 rounded-lg p-4 hover:border-blue-500/30 transition-colors" > -

+

{tech.name}

-

{tech.description}

-
+

+ {tech.description} +

+
{tech.category === "tooling" || tech.category === "database" ? ( {tech.name === "Drizzle ORM" || @@ -202,39 +204,39 @@ export default function TechShowcase() { {groupedTech.map((group) => (
-
+
{categoryIcons[group.category as keyof typeof categoryIcons]}
-

+

{group.category}/

-
+
{group.items.map((tech) => (
-

+

{tech.name}

-
+
{group.category === "tooling" || tech.category === "database" ? "optional" : "core"}
-

+

{tech.description}

-
- +
+ {group.category === "tooling" || tech.category === "database" ? tech.name === "Drizzle ORM" || @@ -259,9 +261,13 @@ export default function TechShowcase() { )}
-
- $ npx create-better-t-stack - —your-options +
+ $ npx + create-better-t-stack + + {" "} + —your-options +
diff --git a/apps/web/src/app/(home)/_components/Testimonials.tsx b/apps/web/src/app/(home)/_components/Testimonials.tsx index c79cdf2..9435c16 100644 --- a/apps/web/src/app/(home)/_components/Testimonials.tsx +++ b/apps/web/src/app/(home)/_components/Testimonials.tsx @@ -27,15 +27,16 @@ const testimonials = [ const Testimonials = () => { return ( -
+
-

- $ cat testimonials.log +

+ $ cat + testimonials.log

-

+

Output: Users reporting success with Better-T Stack

@@ -45,24 +46,30 @@ const Testimonials = () => { {testimonials.map((testimonial) => (
-
+
{testimonial.avatar}
-

{testimonial.name}

+

+ {testimonial.name} +

- {testimonial.role} + + {testimonial.role} + @ - {testimonial.company} + + {testimonial.company} +

-

+

{testimonial.content}

@@ -70,9 +77,9 @@ const Testimonials = () => {
-
+
$ - + Join the growing community of developers
diff --git a/apps/web/src/app/(home)/layout.tsx b/apps/web/src/app/(home)/layout.tsx index ba450b9..a71729b 100644 --- a/apps/web/src/app/(home)/layout.tsx +++ b/apps/web/src/app/(home)/layout.tsx @@ -74,7 +74,7 @@ export const metadata: Metadata = { export default function Layout({ children }: { children: ReactNode }) { return ( -
+
{children}