blitzkit/packages/website/src/components/CreditsPromo.astro

---
import { Grid, Heading, Text } from "@radix-ui/themes";
import { credits } from "../config/credits";
import { getStrings } from "../core/i18n/getStrings";

interface Props {
  locale: string;
}

const { locale } = Astro.props;

const strings = getStrings(locale);
---

<style>
  .credits {
    display: flex;
    justify-content: center;

    padding: var(--space-4);
    margin-top: var(--space-4);

    .inner {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);

      width: 100%;
      max-width: 80rem;

      .list {
        gap: var(--space-5);

        .link {
          display: contents;

          .person {
            --profile-size: 5rem;

            display: flex;
            flex-direction: column;

            background-color: var(--gray-3);

            padding: var(--space-4);
            padding-top: 0;
            margin-top: calc(var(--profile-size) / 2);
            gap: var(--space-1);

            box-shadow: var(--shadow-2);
            border-radius: var(--radius-3);

            position: relative;

            .background {
              position: absolute;
              top: 0;
              left: 0;

              width: 100%;
              height: 100%;

              border-radius: inherit;

              overflow: hidden;

              .image {
                width: 100%;
                height: 100%;

                background-size: cover;
                filter: saturate(5) blur(5rem) brightness(0.5);
              }
            }

            .text {
              position: relative;
            }

            img {
              position: relative;

              border-radius: 50%;

              margin-top: calc(var(--profile-size) / -2);

              object-fit: cover;
              width: var(--profile-size);
              height: var(--profile-size);

              margin-bottom: var(--space-2);
            }
          }
        }
      }
    }
  }
</style>

<div class="credits">
  <div class="inner">
    <Heading align="center">{strings.credits.title}</Heading>

    <Grid
      className="list"
      py="4"
      columns="repeat(auto-fill, minmax(12rem, 1fr))"
      flow="dense"
      gap="4"
      gapY="8"
    >
      {
        credits.map((person) => (
          <a target="_blank" href={person.url} class="link">
            <div class="person">
              <div class="background">
                <div
                  class="image"
                  style={`background-image: url(${person.image})`}
                />
              </div>

              <img src={person.image} />

              <Text className="text" color="gray" highContrast>
                {person.name}
              </Text>
              <Text className="text" color="gray">
                {person.description}
              </Text>
            </div>
          </a>
        ))
      }</Grid
    >
  </div>
</div>