Partners page dark mode

src/pages/partners.jsx

@@ -8,8 +8,8 @@ import RadialBlur from '../landing/RadialBlur';
 import { EnvelopeIcon, LinkIcon } from '@heroicons/react/20/solid';
 
 const roles = {
-    "Common Tree": {
-      name: "Common Tree",
+    "Common tree": {
+      name: "Common tree",
       colors: "bg-blue-50 text-blue-700",
       link: "/docs/misc/partners#common-tree-mandatory-for-all-partners"
     },
@@ -24,15 +24,15 @@ const people = [
 {
     name: 'José Governo Pais Neto',
     description: 'José Governo, CFA, CQF is from Brazil. José worked in an asset management firm where he used Windmill to build complex dashboard applications for his clients.',
-    roles: ['Common Tree', 'App editor'],
+    roles: ['Common tree', 'App editor'],
     email: '[email protected]',
     profile: 'https://www.linkedin.com/in/jose-governo/',
     imageUrl: 'https://media.licdn.com/dms/image/C4D03AQE2yXYlSoBQmg/profile-displayphoto-shrink_800_800/0/1594600574101?e=2147483647&v=beta&t=c2VZb77tUdnBRzlGVTuY23qDvGlUHy1xqy_zn1TNr40',
 },
 {
     name: 'Stephan Fitzpatrick',
     description: 'Stephan Fitzpatrick, a veteran software and cloud consultant, leverages Windmill to build automation solutions for business clients, streamline his own operations, and even manage his home automation.',
-    roles: ['Common Tree'],
+    roles: ['Common tree'],
     email: '[email protected]',
     profile: 'https://www.linkedin.com/in/fitzpatrickstephan/',
     imageUrl: '/images/partners/stphftzptrk.jpg'
@@ -43,12 +43,12 @@ function PartnersCatalog() {
     return (
         <ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
         {people.map((person) => (
-            <li key={person.email} className="col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg bg-white text-center shadow">
+            <li key={person.email} className="col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg bg-white dark:bg-[#1F232D] text-center shadow">
             <div className="flex flex-1 flex-col p-8">
                 <img alt="" src={person.imageUrl} className="mx-auto h-32 w-32 flex-shrink-0 rounded-full" />
-                <h3 className="mt-6 text-sm font-medium text-gray-900">{person.name}</h3>
+                <h3 className="mt-6 text-sm font-medium text-gray-900 dark:text-white">{person.name}</h3>
                 <dl className="mt-1 flex flex-grow flex-col justify-between">
-                <dd className="text-sm text-gray-500">{person.description}</dd>
+                <dd className="text-sm text-gray-500 dark:text-gray-200">{person.description}</dd>
                 <dd className="mt-3">
                     {person.roles.map(role => (
                     <a key={role} href={roles[role].link} className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium mx-0.5 ${roles[role].colors}`}>
@@ -61,14 +61,14 @@ function PartnersCatalog() {
             <div>
                 <div className="-mt-px flex divide-x divide-gray-200">
                 <div className="flex w-0 flex-1">
-                    <a href={`mailto:${person.email}`} className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900">
-                    <EnvelopeIcon aria-hidden="true" className="h-5 w-5 text-gray-400" />
+                    <a href={`mailto:${person.email}`} className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900 dark:text-white">
+                    <EnvelopeIcon aria-hidden="true" className="h-5 w-5 text-gray-400 dark:text-gray-200" />
                     Email
                     </a>
                 </div>
                 <div className="-ml-px flex w-0 flex-1">
-                    <a href={person.profile} className="relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-gray-900">
-                    <LinkIcon aria-hidden="true" className="h-5 w-5 text-gray-400" />
+                    <a href={person.profile} className="relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-gray-900 dark:text-white">
+                    <LinkIcon aria-hidden="true" className="h-5 w-5 text-gray-400 dark:text-gray-200" />
                     Profile
                     </a>
                 </div>
@@ -110,7 +110,7 @@ export default function About() {
             <p>More details on <a href="/docs/misc/partners#how-to-become-a-certified-partner" target="_blank">docs</a>.</p>
           </div>
         </section>
-        <div className="bg-gray-50 py-12 md:py-20">
+        <div className="bg-gray-50 dark:bg-gray-900 py-12 md:py-20">
           <div className="max-w-6xl mx-auto px-4 sm:px-6">
             <PartnersCatalog />
           </div>