import { Footer } from "@/components/footer";
import { Header } from "@/components/header";
import { Button } from "@/components/ui/button";
import { CheckSquareIcon } from "lucide-react";
import Link from "next/link";

export default function Page() {
  return (
    <div>
      <Header />
      <section>
        <div className="container flex flex-col gap-8 mx-auto px-6 py-16 text-center">
          <h1 className="text-4xl md:text-6xl font-bold leading-tight">
            Full Stack TypeScript Scaffolding Framework
          </h1>
          <p className="text-3xl">Build Next.js Apps Faster With:</p>
          <div className="flex flex-col gap-2 m-auto">
            <p className="flex items-center gap-2 text-xl">
              <CheckSquareIcon /> Ruby on Rails Inspired Scaffolding Automations
            </p>
            <p className="flex items-center gap-2 text-xl">
              <CheckSquareIcon /> shadcn/ui Inspired Customizable Components
            </p>
            <p className="flex items-center gap-2 text-xl">
              <CheckSquareIcon /> Django Inspired Admin Dashboard
            </p>
          </div>
          <Link href="https://www.shadriz.com" className="mt-5 block">
            <Button className="rounded-full">Get Started</Button>
          </Link>
        </div>
      </section>

      <section className="container mx-auto px-6 py-8">
        <h2 className="text-3xl md:text-4xl font-bold text-center">
          Technologies
        </h2>
        <div className="mt-12 flex flex-wrap">
          <div className="w-full md:w-1/3 px-4 py-6">
            <h3 className="text-2xl font-bold">TypeScript</h3>
            <p className="mt-2 text-muted-foreground">
              JavaScript with syntax for types.
            </p>
          </div>
          <div className="w-full md:w-1/3 px-4 py-6">
            <h3 className="text-2xl font-bold">Next.js</h3>
            <p className="mt-2 text-muted-foreground">React Framework.</p>
          </div>
          <div className="w-full md:w-1/3 px-4 py-6">
            <h3 className="text-2xl font-bold">shadcn/ui</h3>
            <p className="mt-2 text-muted-foreground">
              Customizable UI Components.
            </p>
          </div>
          <div className="w-full md:w-1/3 px-4 py-6">
            <h3 className="text-2xl font-bold">Drizzle ORM</h3>
            <p className="mt-2 text-muted-foreground">
              Object Relational Mapper.
            </p>
          </div>
          <div className="w-full md:w-1/3 px-4 py-6">
            <h3 className="text-2xl font-bold">SQL</h3>
            <p className="mt-2 text-muted-foreground">
              PostgreSQL, MySQL, or SQLite.
            </p>
          </div>
          <div className="w-full md:w-1/3 px-4 py-6">
            <h3 className="text-2xl font-bold">TailwindCSS</h3>
            <p className="mt-2 text-muted-foreground">
              Utility-first CSS Framework.
            </p>
          </div>
          <div className="w-full md:w-1/3 px-4 py-6">
            <h3 className="text-2xl font-bold">Auth.js</h3>
            <p className="mt-2 text-muted-foreground">Authentication.</p>
          </div>
          <div className="w-full md:w-1/3 px-4 py-6">
            <h3 className="text-2xl font-bold">Stripe</h3>
            <p className="mt-2 text-muted-foreground">Payment Processing.</p>
          </div>
          <div className="w-full md:w-1/3 px-4 py-6">
            <h3 className="text-2xl font-bold">Zod</h3>
            <p className="mt-2 text-muted-foreground">Data Validations.</p>
          </div>
        </div>
      </section>
      <Footer />
    </div>
  );
}