---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="About">
  <div class="max-w-3xl mx-auto">
    <header class="mb-12 text-center" transition:animate="fade">
      <h1 class="text-5xl mb-4">About</h1>
      <p class="text-xl text-muted-foreground">
        Learn more about Brook, a minimalist blog template
      </p>
    </header>
    
    <div class="prose prose-lg dark:prose-invert max-w-none" transition:animate="fade">
      <p>
        Brook is a minimalist blog template designed for developers and writers who value clean typography 
        and a distraction-free reading experience. Built with modern web technologies, Brook offers a 
        perfect balance of simplicity and functionality.
      </p>
      
      <h2>Features</h2>
      
      <ul>
        <li>Clean, minimalist design that puts your content first</li>
        <li>Full dark mode support</li>
        <li>Responsive layout for all devices</li>
        <li>Content collections for easy content management</li>
        <li>Markdown and MDX support for rich content</li>
        <li>Code syntax highlighting for developers</li>
        <li>Tags and categorization</li>
        <li>SEO optimized</li>
        <li>Fast performance with minimal JavaScript</li>
        <li>Smooth page transitions</li>
      </ul>
      
      <h2>Technology</h2>
      
      <p>
        Brook is built with <a href="https://astro.build" target="_blank" rel="noopener noreferrer">Astro</a>, 
        a modern static site generator that delivers lightning-fast performance with a great developer 
        experience. Combined with <a href="https://tailwindcss.com" target="_blank" rel="noopener noreferrer">Tailwind CSS</a> 
        for styling, Brook provides a solid foundation for your content.
      </p>
      
      <h2>Get Started</h2>
      
      <p>
        Whether you're a developer looking to share code snippets, a writer seeking a clean platform for your 
        stories, or anyone in between, Brook provides the perfect starting point for your content. Check out the 
        <a href="/journal">Journal</a> to see it in action.
      </p>
    </div>
  </div>
</BaseLayout>
