🔧 Fix: SVG Loading Issues in Dark Mode for Case Studies (#1000)

* ✨ feat: Enhance UI components and assets

- 🎨 Refactor (card): Reorder CSS classes for improved readability and consistency, enhancing maintainability by standardizing class order.
- 🌐 Implement theme-based image URLs in case studies, adjusting image URLs based on the selected theme to improve layout structure and user experience.
- 🆕 Add new GitHub logo image file to maintain branding consistency.

* 🎨 refactor ♻️(assets): Update logos to SVG format

- Updated logo file format from PNG to SVG in case studies JSON
- Refactored image URL transformation logic for clarity
- Added new SVG files for 6river and GitHub logos in white
- Deleted old GitHub logo image file

These changes enhance logo quality and improve dark theme support.

Author: Michael-Obele

data/case-studies.json

@@ -2,7 +2,7 @@
   {
     "title": "How JSON Schema Was an Obvious Choice at GitHub",
     "summary": "At GitHub's Docs Engineering team, while shipping releases to production 20 times per day or more, JSON Schema is critical in increasing confidence in changes to data, content and APIs.",
-    "logo": "/img/logos/github-logo.png",
+    "logo": "/img/logos/github-logo.svg",
     "links": {
       "lang": "URL1",
       "url": "/blog/posts/github-case-study"

pages/overview/case-studies/index.page.tsx

@@ -6,10 +6,22 @@ import { SectionContext } from '~/context';
 import data from 'data/case-studies.json';
 import Card from '~/components/Card';
 import { DocsHelp } from '~/components/DocsHelp';
+import { useTheme } from 'next-themes';
 
 export default function ContentExample() {
   const newTitle = 'Case Studies';
   const markdownFile = '_indexPage';
+  const { resolvedTheme } = useTheme();
+
+  const imgUrl = (src: string): string => {
+    if (
+      resolvedTheme === 'dark' &&
+      ['github', '6river'].some((str) => src.includes(str))
+    ) {
+      return src.replace(/\.(svg)$/, '-white.$1');
+    }
+    return src;
+  };
 
   return (
     <SectionContext.Provider value='docs'>
@@ -23,13 +35,13 @@ export default function ContentExample() {
         Please replace this text with a two to three liner so that we can avoid
         the layout shifting bug.
       </p>
-      <div className='w-full lg:w-full grid grid-cols-1 sm:grid-cols-2 gap-6 my-[10px] mx-auto mt-8'>
+      <div className='mx-auto my-[10px] mt-8 grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:w-full'>
         {data.map((element, index) => (
           <Card
             key={index}
             title={element.title}
             body={element.summary}
-            image={element.logo}
+            image={imgUrl(element.logo)}
             extended={true}
             link={element.links.url}
           />