Files
echospace/src/app/(public)/page.tsx
2024-12-14 00:11:55 +01:00

105 lines
4.9 KiB
TypeScript

// https://v0.dev/r/DxCSk58T8pM
import { Button } from "@/components/ui/button";
import Link from "next/link";
export default function Home() {
return (
<>
<main className="flex-1">
<section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
<div className="container px-4 md:px-6">
<div className="flex flex-col items-center space-y-4 text-center">
<div className="space-y-2">
<h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
The modern tech stack for your next(.js) project
</h1>
<p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
stack is a comprehensive tech stack that includes everything you need to build and deploy your next
web application.
</p>
</div>
<div className="space-x-4">
<Link href="https://github.com/SrIzan10/stack">
<Button>Start right NOW!</Button>
</Link>
</div>
</div>
</div>
</section>
<section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-900" id="features">
<div className="container px-4 md:px-6">
<div className="flex flex-col items-center justify-center space-y-4 text-center">
<div className="space-y-2">
<div className="inline-block rounded-lg bg-gray-100 px-3 py-1 text-sm dark:bg-gray-800">
Key Features
</div>
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
Everything you need to build and deploy
</h2>
<p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
Stack is a comprehensive tech stack that includes everything you need to build and deploy your next
web application.
</p>
</div>
</div>
<div className="mx-auto max-w-5xl items-center gap-6 py-12 lg:grid-cols-2 lg:gap-12">
<div className="flex flex-col justify-center items-center text-center space-y-4">
<ul className="grid gap-6">
<li>
<div className="grid gap-1">
<h3 className="text-xl font-bold">Next.js</h3>
<p className="text-gray-500 dark:text-gray-400">
Build server-rendered React applications with Next.js.
</p>
</div>
</li>
<li>
<div className="grid gap-1">
<h3 className="text-xl font-bold">Prisma</h3>
<p className="text-gray-500 dark:text-gray-400">
Access your database with Prisma, the best way to work with databases in Ethan&apos;s opinion
</p>
</div>
</li>
<li>
<div className="grid gap-1">
<h3 className="text-xl font-bold">Tailwind CSS</h3>
<p className="text-gray-500 dark:text-gray-400">
Style your application with Tailwind CSS, the utility-first CSS framework.
</p>
</div>
</li>
<li>
<div className="grid gap-1">
<h3 className="text-xl font-bold">shadcn/ui</h3>
<p className="text-gray-500 dark:text-gray-400">
The customizability of the components makes it one of the best UI libraries out there.
</p>
</div>
</li>
<li>
<div className="grid gap-1">
<h3 className="text-xl font-bold">Vercel</h3>
<p className="text-gray-500 dark:text-gray-400">
Deploy your application to the cloud with Vercel, the serverless platform.
</p>
</div>
</li>
<li>
<div className="grid gap-1">
<h3 className="text-xl font-bold">Lucia</h3>
<p className="text-gray-500 dark:text-gray-400">
Manage authentication with Lucia auth, the best selfhosted authentication library.
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
</main>
</>
);
}