Added Case Studies page in Overview Section

components/Card.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import Link from 'next/link';
+import TextTruncate from 'react-text-truncate';
+interface CardProps {
+  title: string;
+  body: string;
+  icon?: string;
+  link?: string;
+  image?: string;
+}
+
+const CardBody = ({ title, body, icon, link, image }: CardProps) => {
+  return (
+    <div className='group relative h-full w-full max-w-lg rounded-lg border border-gray-200 bg-white p-6 px-12 shadow-3xl transition-colors delay-[150ms] ease-in-out hover:bg-slate-100'>
+      <div className='flex justify-center '>
+        {image && <img src={image} className='h-32 p-2' />}
+      </div>
+      <div className='flex flex-row items-start mb-6'>
+        {icon && (
+          <span className='mr-6 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-lg border bg-blue-200 px-3 text-gray-900'>
+            <img src={icon} alt={title} className='h-full w-full' />
+          </span>
+        )}
+        <p className='mt-1 items-center text-[0.9rem] font-bold text-gray-900'>
+          {title}
+        </p>
+      </div>
+      <hr className='mb-4 mt-3.5 h-px border-0 bg-gray-400' />
+      <p className='text-lg mb-8 mt-5'>
+        <TextTruncate element='span' line={3} text={body} />
+      </p>
+      {link && (
+        <p className='absolute bottom-3 right-5 font-medium opacity-0 transition-opacity delay-150 ease-in-out group-hover:opacity-100'>
+          Read More
+        </p>
+      )}
+    </div>
+  );
+};
+
+const Card: React.FC<CardProps> = ({ title, body, icon, link, image }) => {
+  return (
+    <>
+      {link ? (
+        <Link href={link}>
+          <CardBody {...{ title, body, icon, link, image }} />
+        </Link>
+      ) : (
+        <CardBody {...{ title, body, icon, link, image }} />
+      )}
+    </>
+  );
+};
+
+export default Card;

components/Sidebar.tsx

@@ -67,6 +67,7 @@ const SegmentSubtitle = ({ label }: { label: string }) => {
 };
 const getDocsPath = [
   '/overview/what-is-jsonschema',
+  '/overview/casestudies',
   '/overview/sponsors',
   '/overview/similar-technologies',
   '/overview/code-of-conduct',
@@ -286,6 +287,7 @@ export const DocsNav = () => {
             label='Similar Technologies'
           />
           <DocLink uri='/overview/code-of-conduct' label='Code of Conduct' />
+          <DocLink uri='/overview/casestudies' label='Case Studies' />
         </div>
       </div>
       {/* Get Started */}

data/casestudies.json

@@ -0,0 +1,78 @@
+[
+  {
+    "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",
+    "links": 
+      {
+        "lang": "URL1",
+        "url": "/blog/posts/github-case-study"
+      }
+    },    
+    {
+      "title":"How 6 River Systems saves time and boosts collaboration with JSON Schema",
+      "summary":"Explore the powerful impact of JSON Schema on 6 River Systems' fulfillment operations. Discover how they enabled enhanced collaboration, time savings, and data quality assurance, propelling their successful scaling journey.",
+      "logo": "/img/logos/6river-logo.svg",
+      "links": 
+        {
+          "lang": "URL1",
+          "url": "/blog/posts/6-river-systems-case-study"
+        }
+
+    },
+    {
+      "title":"Transforming the technical recruiting industry with JSON Schema",
+      "summary":"Learn how Manfred used JSON Schema to transform the technical recruiting industry.",
+      "logo": "/img/logos/manfred-color.svg",
+      "links": 
+        {
+          "lang": "URL1",
+          "url": "/blog/posts/manfred-case-study"
+        }
+
+    },
+    {
+      "title":"How Postman uses JSON Schema",
+      "summary":"Learn how JSON Schema continues to be a crucial component of the Postman API Platform and the API ecosystem.",
+      "logo": "/img/logos/sponsors/Postman_logo-orange.svg",
+      "links": 
+        {
+          "lang": "URL1",
+          "url": "/blog/posts/postman-case-study"
+        }
+
+    },
+    {
+      "title":"Using JSON Schema at Remote to scale forms and data validations",
+      "summary":"Using JSON Schema at Remote was the first step to solving data validation and form generation problems across all levels at Remote.",
+      "logo": "/img/logos/remote-logo.png",
+      "links": 
+        {
+          "lang": "URL1",
+          "url": "/blog/posts/remote-case-study"
+        }
+
+    },
+    {
+      "title":"How Tyler Technologies reduced its client feedback loop with JSON Schema",
+      "summary":"Using JSON Schema at Tyler Technologies meant showing added value to clients could take minutes rather than days or in some cases weeks.",
+      "logo": "/img/logos/tyler-tech-logo.svg",
+      "links": 
+        {
+          "lang": "URL1",
+          "url": "/blog/posts/tyler-technologies-case-study"
+        }
+
+    },
+    {
+      "title":"How the W3C Web of Things brings JSON Schema to the Internet of Things",
+      "summary":"Using JSON Schema at the W3C Web of Things to create an interoperability layer so that different IoT platforms, protocols and standards can operate together",
+      "logo": "/img/logos/wot-logo.png",
+      "links": 
+        {
+          "lang": "URL1",
+          "url": "/blog/posts/w3c-wot-case-study"
+        }
+
+    }
+]

pages/overview/casestudies/index.page.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { getLayout } from '~/components/Sidebar';
+import Head from 'next/head';
+import { Headline1 } from '~/components/Headlines';
+import { SectionContext } from '~/context';
+import data from 'data/casestudies.json';
+import Card from '~/components/Card';
+
+export default function ContentExample() {
+  const newTitle = 'Case Studies';
+  return (
+    <SectionContext.Provider value='docs'>
+      <Head>
+        <title>{newTitle}</title>
+      </Head>
+      <Headline1>{newTitle}</Headline1>
+      <p>
+        111Veniam ea fugiat exercitation laboris non est nulla id pariatur ex.
+        Qui occaecat fugiat sunt exercitation adipisicing culpa reprehenderit
+        consectetur amet in. Qui fugiat amet do eu.
+      </p>
+      <div className='w-full lg:w-full grid grid-cols-1 md:grid-cols-2 gap-6 my-[10px] mx-auto mt-8'>
+        {data.map((element, index) => (
+          <Card
+            key={index}
+            title={element.title}
+            body={element.summary}
+            image={element.logo}
+            link={element.links.url}
+          />
+        ))}
+      </div>
+    </SectionContext.Provider>
+  );
+}
+ContentExample.getLayout = getLayout;