---
import Layout from "@layouts/Layout.astro";
import { getCollection, type CollectionEntry } from "astro:content";
const all = await getCollection("about");
const abouts = all.filter((i) => i.slug !== "ports");
const ports = all.find((i) => i.slug === "ports");
ports ? abouts.push(ports) : null;
---

<Layout title="About Us" showTitle={true}>
  <div class="flex flex-col gap-5">
    {
      abouts.map(async (about) => {
        const { Content } = await about.render();
        return (
          <div
            id={about.slug}
            class="rounded-lg border border-blue-900/5  p-5 md:px-8 bg-white"
          >
            <h3 class="balance text-gray-600 text-[1.3rem] capitalize tracking-wider">
              {about.data.title}{" "}
            </h3>
            {about.data.image && (
              <div class="max-h-[12rem] md:max-h-[20rem] flex justify-center md:px-5">
                <img
                  class="rounded-2xl transition-all duration-500 border border-blue-900/5 max-w-full object-cover"
                  src={`${about.data.image}`}
                  alt={about.data.title}
                  loading="lazy"
                />
              </div>
            )}

            <div
              class:list={[
                " content ",
                { "py-3": about.data.image !== undefined },
              ]}
            >
              <Content />
            </div>
          </div>
        );
      })
    }
  </div>
</Layout>
