split official partners and service partners (#3454)

Co-authored-by: Tony <68118705+Legend-Master@users.noreply.github.com>

Author: vasfvitor

src/components/sponsors/OfficialPartners.astro

@@ -0,0 +1,49 @@
+---
+import { Image } from 'astro:assets';
+import CrabNebulaLight from '@assets/partners/crabnebula/light.svg';
+import CrabNebulaDark from '@assets/partners/crabnebula/dark.svg';
+
+type SVG = ((_props: astroHTML.JSX.SVGAttributes) => any) & ImageMetadata;
+
+interface Partner {
+  name: string;
+  image?: ImageMetadata;
+  // https://docs.astro.build/en/guides/images/#svg-components
+  svg?: { light: SVG; dark: SVG };
+  url: string;
+  description?: string;
+}
+
+const officialPartners: Partner[] = [
+  {
+    name: 'CrabNebula',
+    url: 'https://crabnebula.dev/',
+    svg: { light: CrabNebulaLight, dark: CrabNebulaDark },
+  },
+];
+---
+
+<div class="partners-container">
+  <div class="official-partners">
+    {
+      officialPartners.map((partner) => (
+        <a
+          href={partner.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="partner official not-content"
+        >
+          <div class="partner-logo">
+            {partner.svg && (
+              <>
+                <partner.svg.light class="external-logo light" />
+                <partner.svg.dark class="external-logo dark" />
+              </>
+            )}
+            {partner.image && <Image src={partner.image} alt={partner.name} />}
+          </div>
+        </a>
+      ))
+    }
+  </div>
+</div>

src/components/sponsors/Partners.astro

@@ -1,7 +1,5 @@
 ---
 import { Image } from 'astro:assets';
-import CrabNebulaLight from '@assets/partners/crabnebula/light.svg';
-import CrabNebulaDark from '@assets/partners/crabnebula/dark.svg';
 import NetlifyLight from '@assets/partners/netlify/light.svg';
 import NetlifyDark from '@assets/partners/netlify/dark.svg';
 import MeiliSearchLight from '@assets/partners/meilisearch/light.svg';
@@ -18,14 +16,6 @@ interface Partner {
   description?: string;
 }
 
-const officialPartners: Partner[] = [
-  {
-    name: 'CrabNebula',
-    url: 'https://crabnebula.dev/',
-    svg: { light: CrabNebulaLight, dark: CrabNebulaDark },
-  },
-];
-
 const partners: Partner[] = [
   {
     name: 'Meilisearch',
@@ -41,29 +31,6 @@ const partners: Partner[] = [
 ---
 
 <div class="partners-container">
-  <div class="official-partners">
-    {
-      officialPartners.map((partner) => (
-        <a
-          href={partner.url}
-          target="_blank"
-          rel="noopener noreferrer"
-          class="partner official not-content"
-        >
-          <div class="partner-logo">
-            {partner.svg && (
-              <>
-                <partner.svg.light class="external-logo light" />
-                <partner.svg.dark class="external-logo dark" />
-              </>
-            )}
-            {partner.image && <Image src={partner.image} alt={partner.name} />}
-          </div>
-        </a>
-      ))
-    }
-  </div>
-
   <div class="partners">
     {
       partners.map((partner) => (

src/components/sponsors/SponsorList.astro

@@ -2,10 +2,15 @@
 import OpenCollective from './OpenCollective/Collective.astro';
 import GitHubSponsor from './GitHub/Sponsors.astro';
 import Partners from './Partners.astro';
+import OfficialPartners from './OfficialPartners.astro';
 ---
 
 <div class="not-content" style="margin-top: 6rem;">
   <section>
+    <div>
+      <h3 class="text-center">Supported by</h3>
+      <OfficialPartners />
+    </div>
     <div class="funding-source">
       <h4>Open Collective Sponsors</h4>
       <OpenCollective />
@@ -17,7 +22,7 @@ import Partners from './Partners.astro';
   </section>
 
   <section>
-    <h2 class="text-center">Supported by</h2>
+    <h3 class="text-center">Website powered by</h3>
     <Partners />
   </section>
 </div>
@@ -30,6 +35,12 @@ import Partners from './Partners.astro';
     font-weight: bold;
   }
 
+  h3 {
+    font-size: 2rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+  }
+
   h4 {
     /* border 50% opacity */
     border-bottom: 1px solid var(--sl-color-gray-6);