---
import Layout from '../layouts/Default.astro';
import RecentBlogPosts from '../components/generic/RecentBlogPosts.astro';
import MobileSocials from '../components/home/MobileSocials.astro';
import { Card } from '@eliancodes/brutal-ui';
import { getPosts, getSettings, invariant } from "@matthiesenxyz/astro-ghostcms/api";
const { posts } = await getPosts();
const settings = await getSettings();
invariant(settings, 'Settings not found');
const title = settings.title;
const description = settings.description;

---

<Layout
  title='Home'
  pageTitle=`${title} | Home`
  description={description}
>
  <main class='bg-pink p-6'>
    <MobileSocials />
    <section id='about' class='col mt-4'>
      <h2 class='hidden'>{title}</h2>
      <div class='flex'>
        <Card>
          <div class='flex flex-col justify-between items-start gap-4'>
            <p class='mt-4 outfit text-2xl md:text-5xl lg:text-7xl'>
              {title}
            </p>
            <p class='mt-2 outfit text-xl md:text-3xl lg:text-5xl'>
              {description}
            </p>
          </div>
        </Card>
      </div>
    </section>
    <RecentBlogPosts posts={posts} settings={settings} />
  </main>
</Layout>