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

update landing page ui

Browse Source
This commit is contained in:
Aman Varshney
2025-05-23 14:17:31 +05:30
parent 6c8e206e59
commit c01e751fe1
8 changed files with 381 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/src/app/(home)/_components/footer.tsx
View File

@@ -7,7 +7,7 @@ const Footer = () => {
<div className="mx-auto max-w-6xl px-4 py-12 sm:px-6"> <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
<div className="mb-12 grid gap-8 md:grid-cols-3"> <div className="mb-12 grid gap-8 md:grid-cols-3">
<div> <div>
<h3 className="mb-4 flex items-center gap-2 font-bold text-foreground text-lg"> <h3 className="mb-4 flex items-center gap-2 font-semibold text-base text-foreground">
<span>Better-T Stack</span> <span>Better-T Stack</span>
</h3> </h3>
<p className="text-muted-foreground leading-relaxed"> <p className="text-muted-foreground leading-relaxed">
@@ -44,7 +44,7 @@ const Footer = () => {
</div> </div>
<div> <div>
<h3 className="mb-4 font-bold text-foreground text-lg"> <h3 className="mb-4 font-semibold text-base text-foreground">
Resources Resources
</h3> </h3>
<ul className="space-y-2.5 text-muted-foreground"> <ul className="space-y-2.5 text-muted-foreground">
@@ -90,7 +90,9 @@ const Footer = () => {
</div> </div>
<div> <div>
<h3 className="mb-4 font-bold text-foreground text-lg">Contact</h3> <h3 className="mb-4 font-semibold text-base text-foreground">
Contact
</h3>
<div className="space-y-2.5 text-muted-foreground"> <div className="space-y-2.5 text-muted-foreground">
<p className="flex items-center"> <p className="flex items-center">
<span className="mr-2 rounded bg-muted px-2 py-1 font-mono text-sm"> <span className="mr-2 rounded bg-muted px-2 py-1 font-mono text-sm">

2
apps/web/src/app/(home)/_components/navbar.tsx
View File

@@ -47,6 +47,7 @@ export default function Navbar() {
label: "Demo", label: "Demo",
target: "_blank", target: "_blank",
}, },
{ href: "/showcase", label: "Showcase" },
{ href: "/docs", label: "Docs" }, { href: "/docs", label: "Docs" },
{ {
href: "https://www.npmjs.com/package/create-better-t-stack", href: "https://www.npmjs.com/package/create-better-t-stack",
@@ -67,6 +68,7 @@ export default function Navbar() {
label: "Demo", label: "Demo",
target: "_blank", target: "_blank",
}, },
{ href: "/showcase", label: "Showcase" },
{ href: "/docs", label: "Docs" }, { href: "/docs", label: "Docs" },
{ {
href: "https://www.npmjs.com/package/create-better-t-stack", href: "https://www.npmjs.com/package/create-better-t-stack",

330
apps/web/src/app/(home)/page.tsx
View File

@@ -1,14 +1,13 @@
"use client"; "use client";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { TECH_OPTIONS } from "@/lib/constant"; import { TECH_OPTIONS } from "@/lib/constant";
import { Github, Star } from "lucide-react"; import { Github, Star, Terminal } from "lucide-react";
import { motion } from "motion/react";
import Link from "next/link"; import Link from "next/link";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import FeatureCard from "./_components/FeatureCard";
import CodeContainer from "./_components/code-container"; import CodeContainer from "./_components/code-container";
import Footer from "./_components/footer"; import Footer from "./_components/footer";
import Navbar from "./_components/navbar"; import Navbar from "./_components/navbar";
import NpmPackage from "./_components/npm-package";
import SponsorsSection from "./_components/sponsors-section"; import SponsorsSection from "./_components/sponsors-section";
import Testimonials from "./_components/testimonials"; import Testimonials from "./_components/testimonials";
@@ -37,191 +36,200 @@ export default function HomePage() {
fetchStars(); fetchStars();
}, []); }, []);
const containerVariants = { const frontendOptions = [
hidden: { opacity: 0 }, ...TECH_OPTIONS.webFrontend.filter((option) => option.id !== "none"),
visible: { ...TECH_OPTIONS.nativeFrontend.filter((option) => option.id !== "none"),
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 backendOptions = TECH_OPTIONS.backend.filter( const backendOptions = TECH_OPTIONS.backend.filter(
(option) => option.id !== "none", (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( const databaseOptions = TECH_OPTIONS.database.filter(
(option) => option.id !== "none", (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 ormOptions = TECH_OPTIONS.orm.filter((option) => option.id !== "none");
const dbSetupOptions = TECH_OPTIONS.dbSetup.filter( const dbSetupOptions = TECH_OPTIONS.dbSetup.filter(
(option) => option.id !== "none", (option) => option.id !== "none",
); );
const addonsOptions = TECH_OPTIONS.addons.filter( const authOptions = TECH_OPTIONS.auth.filter(
(option) => option.id !== "none", (option) => option.id !== "false",
);
const examplesOptions = TECH_OPTIONS.examples.filter(
(option) => option.id !== "none",
); );
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 ( return (
<> <>
<Navbar /> <Navbar />
<main className="flex min-h-svh flex-col items-center justify-center overflow-x-hidden bg-background px-4 pt-24 pb-10 sm:px-6 md:px-8 md:pt-28 lg:pt-32"> <main className="min-h-svh bg-background">
<motion.div <div className="relative h-svh overflow-hidden">
className="mx-auto min-h-svh w-full max-w-6xl" <div className="relative px-4 pt-32 pb-16 sm:px-6 md:px-8">
initial="hidden" <div className="mx-auto max-w-4xl text-center">
animate="visible" <div>
variants={containerVariants} <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-border/50 bg-muted/50 px-3 py-1">
> <Terminal className="h-4 w-4 text-primary" />
<div className="grid grid-cols-1 items-start gap-8 lg:grid-cols-2 lg:gap-16"> <span className="font-medium text-sm">
<motion.div CLI Tool for Developers
className="mt-10 text-center lg:text-left" </span>
variants={itemVariants} </div>
> </div>
<motion.h1
className="font-bold font-mono text-5xl xs:text-6xl tracking-tight sm:text-7xl md:text-8xl lg:text-7xl xl:text-8xl"
variants={itemVariants}
>
<span className="text-foreground dark:text-primary">
Roll Your Own Stack
</span>
</motion.h1>
<motion.p <h1 className="font-bold text-4xl tracking-tight sm:text-6xl md:text-7xl lg:text-8xl">
className="mx-auto mt-6 max-w-xl font-mono text-lg text-muted-foreground sm:text-xl lg:mx-0" <span className="text-foreground">Roll Your Own</span>
variants={itemVariants} <br />
> <span className="text-primary">Stack</span>
</h1>
<p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground sm:text-xl">
A modern CLI tool for scaffolding end-to-end type-safe A modern CLI tool for scaffolding end-to-end type-safe
TypeScript projects with best practices and customizable TypeScript projects with best practices and customizable
configurations. configurations.
</motion.p> </p>
<motion.div <NpmPackage />
variants={itemVariants}
className="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row lg:justify-start"
>
<Link href="/new">
<Button
size="lg"
variant="default"
className="w-full font-mono sm:w-auto"
>
Go to Stack Builder
</Button>
</Link>
<Link
href="https://github.com/amanvarshney01/create-better-t-stack"
target="_blank"
rel="noopener noreferrer"
>
<Button
size="lg"
variant="outline"
className="w-full font-mono hover:bg-background hover:text-primary sm:w-auto"
disabled={isLoadingStars}
>
<Github className="mr-2 h-4 w-4" />
Star on GitHub
{stars !== null && !isLoadingStars && (
<span className="ml-2 flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs">
<Star className="h-3 w-3 text-yellow-400" />
{stars}
</span>
)}
{isLoadingStars && (
<span className="ml-2 h-4 w-10 animate-pulse rounded-sm" />
)}
</Button>
</Link>
{/* <ShinyText
text="Type-safe. Modern. Minimal. Fast."
speed={3}
className="font-mono text-muted-foreground text-xs xs:text-sm sm:text-base"
/> */}
</motion.div>
</motion.div>
<motion.div className="mx-auto w-full" variants={itemVariants}> <div className="mt-8 flex flex-col items-center justify-center gap-4">
<CodeContainer /> <div className="flex flex-col items-center gap-3 sm:flex-row">
<div className="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3"> <Link href="/new">
<FeatureCard <Button size="lg" className="w-full sm:w-auto">
title="Frontend" Stack Builder
options={combinedFrontendOptions} </Button>
/> </Link>
<FeatureCard title="Backend" options={backendOptions} /> <Link
<FeatureCard title="Runtime" options={runtimeOptions} /> href="https://github.com/amanvarshney01/create-better-t-stack"
<FeatureCard title="API Layer" options={apiLayerOptions} /> target="_blank"
<FeatureCard title="Database" options={databaseOptions} /> rel="noopener noreferrer"
<FeatureCard title="ORM" options={ormOptions} /> >
<FeatureCard title="Database Setup" options={dbSetupOptions} /> <Button
<FeatureCard title="Addons" options={addonsOptions} /> size="lg"
<FeatureCard title="Examples" options={examplesOptions} /> variant="outline"
className="w-full hover:text-primary sm:w-auto"
disabled={isLoadingStars}
>
<Github className="mr-2 h-4 w-4" />
Star on GitHub
{stars !== null && !isLoadingStars && (
<span className="ml-2 flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-xs">
<Star className="h-3 w-3 text-yellow-400" />
{stars}
</span>
)}
</Button>
</Link>
</div>
<CodeContainer />
</div> </div>
</motion.div> </div>
</div> </div>
</motion.div> </div>
<motion.div <div className="px-4 py-16 sm:px-6 md:px-8">
className="w-full" <div className="mx-auto max-w-6xl">
initial="hidden" <div className="mb-12 text-center">
whileInView="visible" <h2 className="font-bold text-3xl tracking-tight sm:text-4xl">
viewport={{ once: true, amount: 0.15 }} Tech Stack Options
variants={sectionVariants} </h2>
> <p className="mt-4 text-lg text-muted-foreground">
<Testimonials /> Choose from modern, production-ready technologies
</motion.div> </p>
</div>
<motion.div <div className="overflow-hidden rounded-lg border">
className="w-full" <table className="w-full">
initial="hidden" <thead className="bg-muted/50">
whileInView="visible" <tr>
viewport={{ once: true, amount: 0.15 }} <th className="px-6 py-3 text-left font-medium text-muted-foreground text-sm">
variants={sectionVariants} Category
> </th>
<SponsorsSection /> <th className="px-6 py-3 text-left font-medium text-muted-foreground text-sm">
</motion.div> Options
</th>
</tr>
</thead>
<tbody className="divide-y divide-border">
{techStackCategories.map((category) => (
<tr key={category.category} className="hover:bg-muted/30">
<td className="px-6 py-4">
<div className="font-medium">{category.category}</div>
</td>
<td className="px-6 py-4">
<div className="flex flex-wrap gap-2">
{category.options.map((option) => (
<div
key={option.id}
className="flex items-center gap-2 rounded border bg-background px-2 py-1"
>
{option.icon && (
<img
src={option.icon}
alt={option.name}
className="h-4 w-4"
/>
)}
<span className="text-sm">{option.name}</span>
</div>
))}
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
<Testimonials />
<SponsorsSection />
</main> </main>
<Footer /> <Footer />
</> </>

46
apps/web/src/app/global.css
View File

@@ -147,38 +147,38 @@
:root { :root {
--radius: 0.35rem; --radius: 0.35rem;
/* --background: oklch(0.96 0.01 264.53); */ /* --background: oklch(0.96 0.01 264.53); */
--background: oklch(1.0 0 0); --background: oklch(1 0 0);
--foreground: oklch(0.44 0.04 279.33); --foreground: oklch(0.44 0.04 279.33);
--card: oklch(1.0 0 0); --card: oklch(1 0 0);
--card-foreground: oklch(0.44 0.04 279.33); --card-foreground: oklch(0.44 0.04 279.33);
--popover: oklch(0.86 0.01 268.48); --popover: oklch(0.86 0.01 268.48);
--popover-foreground: oklch(0.44 0.04 279.33); --popover-foreground: oklch(0.44 0.04 279.33);
--primary: oklch(0.55 0.25 297.02); --primary: oklch(0.5 0.18 297.02);
--primary-foreground: oklch(1.0 0 0); --primary-foreground: oklch(1 0 0);
--secondary: oklch(0.86 0.01 268.48); --secondary: oklch(0.86 0.01 268.48);
--secondary-foreground: oklch(0.44 0.04 279.33); --secondary-foreground: oklch(0.44 0.04 279.33);
--muted: oklch(0.91 0.01 264.51); --muted: oklch(0.91 0.01 264.51);
--muted-foreground: oklch(0.55 0.03 279.08); --muted-foreground: oklch(0.55 0.03 279.08);
--accent: oklch(0.55 0.25 297.02 / 60%); --accent: oklch(0.5 0.18 297.02 / 60%);
--accent-foreground: oklch(1.0 0 0); --accent-foreground: oklch(1 0 0);
--destructive: oklch(0.55 0.22 19.81); --destructive: oklch(0.55 0.22 19.81);
--border: oklch(0.81 0.02 271.2); --border: oklch(0.81 0.02 271.2);
--input: oklch(0.86 0.01 268.48); --input: oklch(0.86 0.01 268.48);
--ring: oklch(0.55 0.25 297.02); --ring: oklch(0.5 0.18 297.02);
--chart-1: oklch(0.55 0.25 297.02); --chart-1: oklch(0.5 0.18 297.02);
--chart-2: oklch(0.55 0.25 297.02 / 60%); --chart-2: oklch(0.5 0.18 297.02 / 60%);
--chart-3: oklch(0.63 0.18 140.44); --chart-3: oklch(0.63 0.18 140.44);
--chart-4: oklch(0.69 0.2 42.43); --chart-4: oklch(0.69 0.2 42.43);
--chart-5: oklch(0.71 0.1 33.1); --chart-5: oklch(0.71 0.1 33.1);
--sidebar: oklch(0.93 0.01 264.52); --sidebar: oklch(0.93 0.01 264.52);
--sidebar-foreground: oklch(0.44 0.04 279.33); --sidebar-foreground: oklch(0.44 0.04 279.33);
--sidebar-primary: oklch(0.55 0.25 297.02); --sidebar-primary: oklch(0.5 0.18 297.02);
--sidebar-primary-foreground: oklch(1.0 0 0); --sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent: oklch(0.55 0.25 297.02 / 60%); --sidebar-accent: oklch(0.5 0.18 297.02 / 60%);
--sidebar-accent-foreground: oklch(1.0 0 0); --sidebar-accent-foreground: oklch(1 0 0);
--sidebar-border: oklch(0.81 0.02 271.2); --sidebar-border: oklch(0.81 0.02 271.2);
--sidebar-ring: oklch(0.55 0.25 297.02); --sidebar-ring: oklch(0.5 0.18 297.02);
--destructive-foreground: oklch(1.0 0 0); --destructive-foreground: oklch(1 0 0);
--font-sans: Montserrat, sans-serif; --font-sans: Montserrat, sans-serif;
--font-serif: Georgia, serif; --font-serif: Georgia, serif;
--font-mono: Fira Code, monospace; --font-mono: Fira Code, monospace;
@@ -213,31 +213,31 @@
--card-foreground: oklch(0.88 0.04 272.28); --card-foreground: oklch(0.88 0.04 272.28);
--popover: oklch(0.4 0.03 280.15); --popover: oklch(0.4 0.03 280.15);
--popover-foreground: oklch(0.88 0.04 272.28); --popover-foreground: oklch(0.88 0.04 272.28);
--primary: oklch(0.79 0.12 304.77); --primary: oklch(0.69 0.08 304.77);
--primary-foreground: oklch(0.24 0.03 283.91); --primary-foreground: oklch(0.24 0.03 283.91);
--secondary: oklch(0.48 0.03 278.64); --secondary: oklch(0.48 0.03 278.64);
--secondary-foreground: oklch(0.88 0.04 272.28); --secondary-foreground: oklch(0.88 0.04 272.28);
--muted: oklch(0.3 0.03 276.21); --muted: oklch(0.3 0.03 276.21);
--muted-foreground: oklch(0.75 0.04 273.93); --muted-foreground: oklch(0.75 0.04 273.93);
--accent: oklch(0.79 0.12 304.77 / 60%); --accent: oklch(0.69 0.08 304.77 / 60%);
--accent-foreground: oklch(0.24 0.03 283.91); --accent-foreground: oklch(0.24 0.03 283.91);
--destructive: oklch(0.76 0.13 2.76); --destructive: oklch(0.76 0.13 2.76);
--border: oklch(0.32 0.03 281.98); --border: oklch(0.32 0.03 281.98);
--input: oklch(0.32 0.03 281.98); --input: oklch(0.32 0.03 281.98);
--ring: oklch(0.79 0.12 304.77); --ring: oklch(0.69 0.08 304.77);
--chart-1: oklch(0.79 0.12 304.77); --chart-1: oklch(0.69 0.08 304.77);
--chart-2: oklch(0.79 0.12 304.77 / 60%); --chart-2: oklch(0.69 0.08 304.77 / 60%);
--chart-3: oklch(0.86 0.11 142.72); --chart-3: oklch(0.86 0.11 142.72);
--chart-4: oklch(0.82 0.1 52.63); --chart-4: oklch(0.82 0.1 52.63);
--chart-5: oklch(0.92 0.02 30.49); --chart-5: oklch(0.92 0.02 30.49);
--sidebar: oklch(0.18 0.02 284.2); --sidebar: oklch(0.18 0.02 284.2);
--sidebar-foreground: oklch(0.88 0.04 272.28); --sidebar-foreground: oklch(0.88 0.04 272.28);
--sidebar-primary: oklch(0.79 0.12 304.77); --sidebar-primary: oklch(0.69 0.08 304.77);
--sidebar-primary-foreground: oklch(0.24 0.03 283.91); --sidebar-primary-foreground: oklch(0.24 0.03 283.91);
--sidebar-accent: oklch(0.79 0.12 304.77 / 60%); --sidebar-accent: oklch(0.69 0.08 304.77 / 60%);
--sidebar-accent-foreground: oklch(0.24 0.03 283.91); --sidebar-accent-foreground: oklch(0.24 0.03 283.91);
--sidebar-border: oklch(0.4 0.03 280.15); --sidebar-border: oklch(0.4 0.03 280.15);
--sidebar-ring: oklch(0.79 0.12 304.77); --sidebar-ring: oklch(0.69 0.08 304.77);
--destructive-foreground: oklch(0.24 0.03 283.91); --destructive-foreground: oklch(0.24 0.03 283.91);
--radius: 0.35rem; --radius: 0.35rem;
--font-sans: Montserrat, sans-serif; --font-sans: Montserrat, sans-serif;

90
apps/web/src/app/showcase/_components/ShowcaseItem.tsx Normal file
View File

@@ -0,0 +1,90 @@
"use client";
import { motion } from "motion/react";
import Image from "next/image";
import Link from "next/link";
export interface ShowcaseItemProps {
title: string;
description: string;
imageUrl: string;
liveUrl?: string;
sourceUrl?: string;
tags: string[];
}
export default function ShowcaseItem({
title,
description,
imageUrl,
liveUrl,
sourceUrl,
tags,
}: ShowcaseItemProps) {
const itemVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.5,
ease: "easeOut",
},
},
};
return (
<motion.div
variants={itemVariants}
className="flex h-full flex-col overflow-hidden rounded-lg border border-border bg-card p-6 shadow-sm"
>
<div className="relative mb-4 aspect-[4/3] w-full overflow-hidden rounded-md">
<Image
src={imageUrl}
alt={title}
fill
className="object-cover transition-transform duration-300 ease-in-out hover:scale-105"
unoptimized
/>
</div>
<h3 className="mb-2 font-mono font-semibold text-primary text-xl">
{title}
</h3>
<p className="mb-4 flex-grow text-muted-foreground text-sm">
{description}
</p>
<div className="mb-4">
{tags.map((tag) => (
<span
key={tag}
className="mr-2 mb-2 inline-block rounded-full bg-muted px-2 py-1 font-mono text-muted-foreground text-xs"
>
{tag}
</span>
))}
</div>
<div className="mt-auto flex space-x-3">
{liveUrl && (
<Link
href={liveUrl}
target="_blank"
rel="noopener noreferrer"
className="font-mono text-primary text-sm hover:underline"
>
Live Demo
</Link>
)}
{sourceUrl && (
<Link
href={sourceUrl}
target="_blank"
rel="noopener noreferrer"
className="font-mono text-muted-foreground text-sm hover:underline"
>
Source Code
</Link>
)}
</div>
</motion.div>
);
}

90
apps/web/src/app/showcase/page.tsx Normal file
View File

@@ -0,0 +1,90 @@
"use client";
import { motion } from "motion/react";
import Navbar from "../(home)/_components/navbar";
import ShowcaseItem from "./_components/ShowcaseItem";
const showcaseProjects = [
{
title: "Project Alpha",
description: "A cool project built with Better-T-Stack.",
imageUrl: "https://via.placeholder.com/400x300?text=Project+Alpha",
liveUrl: "#",
sourceUrl: "#",
tags: ["Next.js", "tRPC", "Drizzle"],
},
{
title: "Beta App",
description: "Another awesome application powered by Better-T-Stack.",
imageUrl: "https://via.placeholder.com/400x300?text=Beta+App",
liveUrl: "#",
sourceUrl: "#",
tags: ["Hono", "React Native", "SQLite"],
},
{
title: "Gamma Platform",
description: "Showcasing the versatility of Better-T-Stack.",
imageUrl: "https://via.placeholder.com/400x300?text=Gamma+Platform",
liveUrl: "#",
tags: ["Convex", "TanStack Router"],
},
];
export default function ShowcasePage() {
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
delayChildren: 0.2,
},
},
};
const itemVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.5,
ease: "easeOut",
},
},
};
return (
<>
<Navbar />
<main className="flex min-h-svh flex-col items-center bg-background px-4 pt-24 pb-10 sm:px-6 md:px-8 md:pt-28 lg:pt-32">
<motion.div
className="mx-auto w-full max-w-6xl"
initial="hidden"
animate="visible"
variants={containerVariants}
>
<motion.div className="mb-12 text-center" variants={itemVariants}>
<h1 className="font-bold font-mono text-4xl tracking-tight sm:text-5xl md:text-6xl">
<span className="text-foreground dark:text-primary">
Showcase
</span>
</h1>
<p className="mx-auto mt-4 max-w-2xl font-mono text-lg text-muted-foreground sm:text-xl">
Discover amazing projects built with Better-T-Stack.
</p>
</motion.div>
<motion.div
className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"
variants={containerVariants}
>
{showcaseProjects.map((project) => (
<ShowcaseItem key={project.title} {...project} />
))}
</motion.div>
</motion.div>
</main>
</>
);
}

2
bun.lock
View File

@@ -14,7 +14,7 @@
}, },
"apps/cli": { "apps/cli": {
"name": "create-better-t-stack", "name": "create-better-t-stack",
"version": "2.11.0", "version": "2.12.0",
"bin": { "bin": {
"create-better-t-stack": "dist/index.js", "create-better-t-stack": "dist/index.js",
}, },

1
package.json
View File

@@ -10,6 +10,7 @@
"build:web": "turbo run build --filter=web", "build:web": "turbo run build --filter=web",
"build:cli": "turbo run build --filter=create-better-t-stack", "build:cli": "turbo run build --filter=create-better-t-stack",
"check": "turbo check", "check": "turbo check",
"format": "biome check --write .",
"publish-packages": "turbo run build --filter=create-better-t-stack && changeset publish", "publish-packages": "turbo run build --filter=create-better-t-stack && changeset publish",
"build:web:cloudflare": "bun install && bun run build:web", "build:web:cloudflare": "bun install && bun run build:web",
"deploy:web": "bun run build:web:cloudflare && bunx wrangler pages deploy ./apps/web/out" "deploy:web": "bun run build:web:cloudflare && bunx wrangler pages deploy ./apps/web/out"