---
import BaseLayout from "../layouts/BaseLayout.astro";
import Navbar from "../components/Navbar.astro";
---

<BaseLayout
    title="About - Astro Starter Kit"
    description="À propos de ce starter kit Astro"
>
    <Navbar />

    <main class="max-w-4xl mx-auto px-6 py-16">
        <div class="mb-16">
            <h1 class="text-5xl font-bold tracking-tight mb-4">About</h1>
            <p class="text-xl text-gray-600 leading-relaxed">
                Un starter kit pensé pour la simplicité et l'élégance.
            </p>
            <div class="mt-4">
                <span
                    class="inline-block px-3 py-1 text-xs font-medium bg-gray-100 text-gray-700 rounded-full"
                >
                    v2.0 - Test auto-deploy
                </span>
            </div>
        </div>

        <div class="prose prose-gray max-w-none">
            <h2 class="text-2xl font-semibold mb-4">Philosophie</h2>
            <p class="text-gray-600 leading-relaxed mb-8">
                Ce starter kit adopte une approche minimaliste : fournir une
                base solide sans superflu, avec les outils essentiels pour
                démarrer rapidement un projet web moderne.
            </p>

            <h2 class="text-2xl font-semibold mb-4">Technologies</h2>
            <ul class="space-y-3 text-gray-600">
                <li class="flex items-start">
                    <span class="font-medium text-gray-900 mr-2">Astro</span>
                    <span>— Framework web moderne avec génération statique</span
                    >
                </li>
                <li class="flex items-start">
                    <span class="font-medium text-gray-900 mr-2">React</span>
                    <span
                        >— Bibliothèque UI pour les composants interactifs</span
                    >
                </li>
                <li class="flex items-start">
                    <span class="font-medium text-gray-900 mr-2"
                        >Tailwind CSS</span
                    >
                    <span>— Framework CSS utility-first</span>
                </li>
                <li class="flex items-start">
                    <span class="font-medium text-gray-900 mr-2">Docker</span>
                    <span>— Containerisation pour un déploiement simplifié</span
                    >
                </li>
            </ul>

            <div class="mt-12 pt-8 border-t border-gray-200">
                <p class="text-sm text-gray-500">
                    Construit avec attention aux détails et à la performance.
                </p>
            </div>
        </div>
    </main>
</BaseLayout>