Improved docs page structure for better SEO and accessibility (#1701)

Utkarsh-123github · web-flow · commit 1ac0817529a2 · 2025-06-14T15:44:18.000+02:00
* Improved documentation page structure for better SEO and accessibility

* Fixed linting issues
diff --git a/pages/docs/index.page.tsx b/pages/docs/index.page.tsx
@@ -6,13 +6,75 @@ import { SectionContext } from '~/context';
 import Card from '~/components/Card';
 import { DocsHelp } from '~/components/DocsHelp';
 
+const cardsData = [
+  {
+    icon: '/icons/eye.svg',
+    title: 'Introduction',
+    body: 'Discover JSON Schema: its purpose and role in data validation.',
+    headerSize: 'medium',
+    bodyTextSize: 'small',
+    link: '/overview/what-is-jsonschema',
+  },
+  {
+    icon: '/icons/compass.svg',
+    title: 'Get started',
+    body: 'New to JSON Schema? Learn the basics of schema design.',
+    headerSize: 'medium',
+    bodyTextSize: 'small',
+    link: '/learn',
+  },
+  {
+    icon: '/icons/grad-cap.svg',
+    title: 'Guides',
+    body: 'Master advanced skills such as validation with our hands-on guides.',
+    headerSize: 'medium',
+    bodyTextSize: 'small',
+    link: '/learn/guides',
+  },
+  {
+    icon: '/icons/book.svg',
+    title: 'Reference',
+    body: 'Dive deeper into JSON Schema keywords with our clear explanations and usage examples.',
+    headerSize: 'medium',
+    bodyTextSize: 'small',
+    link: '/understanding-json-schema',
+  },
+  {
+    icon: '/icons/clipboard.svg',
+    title: 'Specification',
+    body: 'Understand the evolution of JSON Schema through its different versions',
+    headerSize: 'medium',
+    bodyTextSize: 'small',
+    link: '/specification',
+  },
+];
+
 export default function Welcome() {
   const newTitle = 'Welcome';
   const fileRenderType = 'tsx';
+  const renderCards = () => (
+    <div className='grid grid-cols-1 md:grid-cols-2 gap-6 mt-8'>
+      {cardsData.map((card) => (
+        <Card
+          key={card.title}
+          icon={card.icon}
+          title={card.title}
+          body={card.body}
+          headerSize='medium'
+          bodyTextSize='small'
+          link={card.link}
+        />
+      ))}
+    </div>
+  );
   return (
     <SectionContext.Provider value='docs'>
       <Head>
         <title>{newTitle}</title>
+        <meta
+          name='description'
+          content='JSON Schema - a declarative language for validating JSON documents'
+        />
       </Head>
       <Headline1>{newTitle}</Headline1>
       <p>
@@ -23,50 +85,10 @@ export default function Welcome() {
         Our documentation will guide you through the basics and beyond of
         defining and validating JSON data.
         <br />
+        <br />
         <span className='font-bold text-[1.3rem]'>Explore the docs</span>
       </p>
-      <div className='w-full lg:w-full grid grid-cols-1 sm:grid-cols-2 gap-6 my-[10px] mx-auto mt-8'>
-        <Card
-          icon='/icons/eye.svg'
-          title='Introduction'
-          body='Discover JSON Schema: its purpose and role in data validation.'
-          headerSize='medium'
-          bodyTextSize='small'
-          link='/overview/what-is-jsonschema'
-        />
-        <Card
-          icon='/icons/compass.svg'
-          title='Get started'
-          body='New to JSON Schema? Learn the basics of schema design.'
-          headerSize='medium'
-          bodyTextSize='small'
-          link='/learn'
-        />
-        <Card
-          icon='/icons/grad-cap.svg'
-          title='Guides'
-          body='Master advanced skills such as validation with our hands-on guides.'
-          headerSize='medium'
-          bodyTextSize='small'
-          link='/learn/guides'
-        />
-        <Card
-          icon='/icons/book.svg'
-          title='Reference'
-          body='Dive deeper into JSON Schema keywords with our clear explanations and usage examples.'
-          headerSize='medium'
-          bodyTextSize='small'
-          link='/understanding-json-schema'
-        />
-        <Card
-          icon='/icons/clipboard.svg'
-          title='Specification'
-          body='Understand the evolution of JSON Schema through its different versions'
-          headerSize='medium'
-          bodyTextSize='small'
-          link='/specification'
-        />
-      </div>
+      {renderCards()}
       <DocsHelp fileRenderType={fileRenderType} />
     </SectionContext.Provider>
   );
