diff --git a/apps/web/src/app/(home)/_components/footer.tsx b/apps/web/src/app/(home)/_components/footer.tsx index 4cba18e..c5f18cb 100644 --- a/apps/web/src/app/(home)/_components/footer.tsx +++ b/apps/web/src/app/(home)/_components/footer.tsx @@ -7,7 +7,7 @@ const Footer = () => {
-

+

Better-T Stack

@@ -44,7 +44,7 @@ const Footer = () => {

-

+

Resources

    @@ -90,7 +90,9 @@ const Footer = () => {
-

Contact

+

+ Contact +

diff --git a/apps/web/src/app/(home)/_components/navbar.tsx b/apps/web/src/app/(home)/_components/navbar.tsx index f75df39..6b86eef 100644 --- a/apps/web/src/app/(home)/_components/navbar.tsx +++ b/apps/web/src/app/(home)/_components/navbar.tsx @@ -47,6 +47,7 @@ export default function Navbar() { label: "Demo", target: "_blank", }, + { href: "/showcase", label: "Showcase" }, { href: "/docs", label: "Docs" }, { href: "https://www.npmjs.com/package/create-better-t-stack", @@ -67,6 +68,7 @@ export default function Navbar() { label: "Demo", target: "_blank", }, + { href: "/showcase", label: "Showcase" }, { href: "/docs", label: "Docs" }, { href: "https://www.npmjs.com/package/create-better-t-stack", diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx index 3d9c4f4..715ae86 100644 --- a/apps/web/src/app/(home)/page.tsx +++ b/apps/web/src/app/(home)/page.tsx @@ -1,14 +1,13 @@ "use client"; import { Button } from "@/components/ui/button"; import { TECH_OPTIONS } from "@/lib/constant"; -import { Github, Star } from "lucide-react"; -import { motion } from "motion/react"; +import { Github, Star, Terminal } from "lucide-react"; import Link from "next/link"; import { useEffect, useState } from "react"; -import FeatureCard from "./_components/FeatureCard"; import CodeContainer from "./_components/code-container"; import Footer from "./_components/footer"; import Navbar from "./_components/navbar"; +import NpmPackage from "./_components/npm-package"; import SponsorsSection from "./_components/sponsors-section"; import Testimonials from "./_components/testimonials"; @@ -37,191 +36,200 @@ export default function HomePage() { fetchStars(); }, []); - const containerVariants = { - hidden: { opacity: 0 }, - visible: { - opacity: 1, - transition: { - staggerChildren: 0.15, - }, - }, - }; - - const itemVariants = { - hidden: { opacity: 0, y: 20 }, - visible: { - opacity: 1, - y: 0, - transition: { - duration: 0.5, - ease: "easeOut", - }, - }, - }; - - const sectionVariants = { - hidden: { opacity: 0, y: 30 }, - visible: { - opacity: 1, - y: 0, - transition: { - duration: 0.6, - ease: "easeOut", - }, - }, - }; - - const webFrontendOptions = TECH_OPTIONS.webFrontend.filter( - (option) => option.id !== "none", - ); - const nativeFrontendOptions = TECH_OPTIONS.nativeFrontend.filter( - (option) => option.id !== "none", - ); - const combinedFrontendOptions = [ - ...webFrontendOptions, - ...nativeFrontendOptions, + const frontendOptions = [ + ...TECH_OPTIONS.webFrontend.filter((option) => option.id !== "none"), + ...TECH_OPTIONS.nativeFrontend.filter((option) => option.id !== "none"), ]; const backendOptions = TECH_OPTIONS.backend.filter( (option) => option.id !== "none", ); - const runtimeOptions = TECH_OPTIONS.runtime.filter( - (option) => option.id !== "none", - ); - const apiLayerOptions = TECH_OPTIONS.api.filter( - (option) => option.id !== "none", - ); const databaseOptions = TECH_OPTIONS.database.filter( (option) => option.id !== "none", ); + const runtimeOptions = TECH_OPTIONS.runtime; + const packageManagerOptions = TECH_OPTIONS.packageManager; + const apiOptions = TECH_OPTIONS.api.filter((option) => option.id !== "none"); const ormOptions = TECH_OPTIONS.orm.filter((option) => option.id !== "none"); const dbSetupOptions = TECH_OPTIONS.dbSetup.filter( (option) => option.id !== "none", ); - const addonsOptions = TECH_OPTIONS.addons.filter( - (option) => option.id !== "none", - ); - const examplesOptions = TECH_OPTIONS.examples.filter( - (option) => option.id !== "none", + const authOptions = TECH_OPTIONS.auth.filter( + (option) => option.id !== "false", ); + const addonsOptions = TECH_OPTIONS.addons; + const examplesOptions = TECH_OPTIONS.examples; + + const techStackCategories = [ + { + category: "Frontend Frameworks", + options: frontendOptions, + }, + { + category: "Backend Frameworks", + options: backendOptions, + }, + { + category: "Database Systems", + options: databaseOptions, + }, + { + category: "Runtime Environments", + options: runtimeOptions, + }, + { + category: "API Layers", + options: apiOptions, + }, + { + category: "ORM Solutions", + options: ormOptions, + }, + { + category: "Database Setup", + options: dbSetupOptions, + }, + { + category: "Authentication", + options: authOptions, + }, + { + category: "Package Managers", + description: "Dependency management tools", + options: packageManagerOptions, + }, + { + category: "Development Tools", + options: addonsOptions, + }, + { + category: "Example Projects", + options: examplesOptions, + }, + ]; return ( <> -

- -
- - - - Roll Your Own Stack - - +
+
+
+
+
+
+ + + CLI Tool for Developers + +
+
- +

+ Roll Your Own +
+ Stack +

+ +

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

- - - - - - - - {/* */} - - + - - -
- - - - - - - - - +
+
+ + + + + + +
+
- +
- +
- - - +
+
+
+

+ Tech Stack Options +

+

+ Choose from modern, production-ready technologies +

+
- - - +
+ + + + + + + + + {techStackCategories.map((category) => ( + + + + + ))} + +
+ Category + + Options +
+
{category.category}
+ 		+
+ {category.options.map((option) => ( +
+ {option.icon && ( + {option.name} + )} + {option.name} +
+ ))} +
+
+
+
+
+ +