added image icon and styling

Author: evisdrenova

docs/docs/transformers/introduction.mdx

@@ -7,10 +7,46 @@ slug: /transformers/introduction
 
 import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
 
+import { CustomCardList } from '@site/src/CustomComponents/CustomCardList';
+
+import { IoBuildOutline } from 'react-icons/io5';
+
+import { GoCode } from 'react-icons/go';
+
+import { DocsImage } from '@site/src/CustomComponents/DocsImage';
+
 <DocPageHeader title="Transformers" />
 
 ## Introduction
 
-Transformers are data-type specific modules that anonymize or generate data. Tranformers are defined in the job workflow and are applied to every piece of data in the column they are assigned. Neosync ships with a number of transformers already built that handle common data types such as email, physical addresses, ssn, strings, integers and more. You can also create your own custom transformers using a regular expression or by writing javascript code.
+Transformers are data-type specific modules that anonymize or generate data. Tranformers are defined in the job workflow and are applied to every piece of data in the column they are assigned. Neosync ships with a number of transformers that are already built to handle common data types such as email, addresses, ssn, strings, integers and more.
+
+<DocsImage />
+
+## Transformer Types
+
+There are two types of transformers:
+
+1. **System Transformers** : Pre-built and configured transformers that automatically come with Neosync out of the box. These cannot be deleted but they can be cloned.
+2. **Custom Transformers** : System transformers that have been cloned, re-configured and renamed. These transformers can be edited and deleted.
+
+## Transformers
+
+You can browse our list of system transformers which come out of the box or you can see how to create you own custom transformer.
 
-## More coming soon!
+<CustomCardList
+  cards={[
+    {
+      title: 'System Transformers',
+      description: 'Pre-built transformers that are ready to use',
+      link: '/transformers/system/email',
+      icon: <IoBuildOutline />,
+    },
+    {
+      title: 'Custom Transformers',
+      description: 'Define your own transformers',
+      link: '/transformers/custom',
+      icon: <GoCode />,
+    },
+  ]}
+/>

docs/src/CustomComponents/DocsImage.tsx

@@ -0,0 +1,9 @@
+import React, { ReactElement } from 'react';
+
+export function DocsImage(): ReactElement {
+  return (
+    <div className="docsImage">
+      <img src="https://assets.nucleuscloud.com/neosync/docs/transformers-page.png" />
+    </div>
+  );
+}

docs/src/css/custom.css

@@ -140,4 +140,8 @@ this is the class for the sidebar categories that section headers
   .pagination-nav__sublabel {
     @apply text-xs;
   }
+
+  .docsImage {
+    @apply border border-gray-300 shadow-lg rounded-lg overflow-hidden;
+  }
 }