sudovanilla-website/src/pages/index.astro

---
// Layout
import Default from "@layouts/Default.astro";

// Components
import Hero from "@components/Hero.astro";
import { CallToAction } from "@sudovanilla/pandora";
---

<Default MobileTitle="SudoVanilla" NoSubHeader>
  <Fragment slot="body">
    <Hero
      Title="SudoVanilla"
      Description="Counting on the Open Web"
      UseImage
      Image="https://md.sudovanilla.org/images/pexels-asphotograpy-94842.jpg"
      Credit="Green Pine Trees. Shot by AS Photography on Pexels."
    />

    <CallToAction
      Title="Instances"
      Description="Clients, services, and frontends hosted by SudoVanilla"
      ImageSource="https://md.sudovanilla.org/images/8108969777692270658741264896182357708404070882901004771113430719.png"
      ImageAlt="Image"
      PrimaryActionText="View Instances"
      PrimaryAction="/instances"
    />

    <CallToAction
      Title="MinPluto"
      Description="SudoVanilla Studio"
      ImageSource="https://md.sudovanilla.org/images/mp-ba-1.png"
      ImageAlt="Image"
      PrimaryActionText="View Website"
      PrimaryAction="https://studio.sudovanilla.org/"
    />

    <CallToAction
      Title="Zorn Player"
      Description="Video Player for Astro"
      ImageSource="https://md.sudovanilla.org/images/Screenshot From 2024-12-03 22-07-36.png"
      ImageAlt="Image"
      PrimaryActionText="Documentation"
      PrimaryAction="/docs/zorn/introduction/"
    />

    <CallToAction
      Title="ButterflyVu"
      Description="Documention Site"
      ImageSource="https://md.sudovanilla.org/images/pexels-pixabay-326055.jpg"
      ImageAlt="Image"
      PrimaryActionText="Source Code"
      PrimaryAction="https://ark.sudovanilla.org/Korbs/butterflyvu"
    />

    <CallToAction
      Title="Init Privacy"
      Description="Taking Back Control"
      ImageSource="https://md.sudovanilla.org/images/6560385685.png"
      ImageAlt="Image"
      PrimaryActionText="Source Code"
      PrimaryAction="https://ark.sudovanilla.org/Korbs/butterflyvu"
      Label="Development Paused"
    />

    <CallToAction
      Title="Penpot Desktop"
      Description="A Desktop-Like Experience"
      ImageSource="https://md.sudovanilla.org/images/Z1.webp"
      ImageAlt="Image"
      PrimaryActionText="Source Code"
      PrimaryAction="https://ark.sudovanilla.org/Korbs/butterflyvu"
      Label="Discontinued"
    />
  </Fragment>
</Default>


<style lang="scss">
  .posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-gap: 12px;
    .card-post {
      border-radius: 6px;
      border: 1px var(--border-color) solid;
      position: relative;
      display: flex;
      flex-direction: column;
      &:hover {
        border-color: var(--border-color-hover);
      }
      img {
        width: 100%;
        border-radius: 6px 6px 0px 0px;
        aspect-ratio: 16/9;
        object-fit: cover;
      }
      #bg {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        opacity: 1;
        z-index: -1;
        border-radius: 8px;
      }
      .card-post-content {
        padding: 12px 16px 32px 16px;
        backdrop-filter: blur(24px) brightness(0.3);
        height: 100%;
        border-radius: 0px 0px 6px 6px;
        p {
          margin: 0px;
          font-size: 14px;
          font-weight: bold;
        }
        #date {
          font-size: 12px;
          text-align: right;
          color: gray;
          font-weight: normal;
          position: absolute;
          bottom: 0px;
          right: 0px;
          margin: 6px 24px;
        }
      }
    }
  }
</style>