update landing page ui

apps/web/src/app/showcase/_components/ShowcaseItem.tsx

@@ -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>
+	);
+}

apps/web/src/app/showcase/page.tsx

@@ -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>
+		</>
+	);
+}