colors!

packages/website/src/components/CreditsPromo.astro

@@ -17,13 +17,13 @@ const strings = getStrings(locale);
     display: flex;
     justify-content: center;
 
-    padding: var(--space-6) 0;
-    margin-bottom: var(--space-4);
+    padding: var(--space-4);
+    margin-top: var(--space-4);
 
     .inner {
       display: flex;
       flex-direction: column;
-      gap: var(--space-5);
+      gap: var(--space-2);
 
       width: 100%;
       max-width: 80rem;
@@ -50,7 +50,36 @@ const strings = getStrings(locale);
             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);
@@ -84,12 +113,21 @@ const strings = getStrings(locale);
         credits.map((person) => (
           <a 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 color="gray" highContrast>
+              <Text className="text" color="gray" highContrast>
                 {person.name}
               </Text>
-              <Text color="gray">{person.description}</Text>
+              <Text className="text" color="gray">
+                {person.description}
+              </Text>
             </div>
           </a>
         ))