Added temp mapping content to section in tools

packages/website/ts/components/docs/sidebar/filters.tsx

@@ -36,9 +36,9 @@ export const Filters: React.FC<IFiltersProps> = ({ groups }) => {
     );
 };
 
-const FiltersWrapper = styled.div`
+const FiltersWrapper = styled.aside`
     position: relative;
-    max-width: 702px;
+    max-width: 700px;
 `;
 
 const FiltersGroupWrapper = styled.div`

packages/website/ts/pages/docs/guides.tsx

@@ -13,12 +13,10 @@ export const DocsGuides: React.FC = () => {
     return (
         <SiteWrap theme="light">
             <DocumentTitle {...documentConstants.DOCS} />
-            <Hero isHome={false} title={`Guides`} />
+            <Hero isHome={false} title="Guides" />
             <Section maxWidth={'1030px'} isPadded={false} padding="0 0">
                 <Columns>
-                    <aside>
                     <Filters groups={filterGroups} />
-                    </aside>
                     <article>
                         <Resource
                             heading="0x Mesh - your gateway to networked liquidity"

packages/website/ts/pages/docs/tools.tsx

@@ -16,67 +16,57 @@ export const DocsTools: React.FC = () => {
     return (
         <SiteWrap theme="light">
             <DocumentTitle {...documentConstants.DOCS} />
-            <Hero isHome={false} title={`Tools`} />
+            <Hero isHome={false} title="Tools" />
-            <Section maxWidth={'1030px'} isPadded={false} padding="0 0">
+            <Section maxWidth="1030px" isPadded={false}>
                 <Columns>
-                    <aside>
                     <Filters groups={filterGroups} />
-                    </aside>
                     <article>
+                        <FeaturedToolsWrapper>
                             <Heading asElement="h2" size="default">
                                 Featured Tools
                             </Heading>
+                            {featuredLinks.map((link, index) => (
                                 <FeatureLink
-                            heading="0x Code Sandbox"
+                                    key={`featuredLink-${index}`}
-                            description="A description could possibly go here but could be tight."
+                                    heading={link.heading}
-                            icon="flexibleIntegration"
+                                    description={link.description}
-                            url="https://0x.org"
+                                    icon={link.icon}
-                        />
+                                    url={link.url}
-                        <FeatureLink
-                            heading="RadarRelay SDK"
-                            description="A description could possibly go here but could be tight."
-                            icon="flexibleIntegration"
-                            url="https://0x.org"
-                        />
-                        <FeatureLink
-                            heading="RadarRelay SDK"
-                            description="A description could possibly go here but could be tight."
-                            icon="flexibleIntegration"
-                            url="https://0x.org"
                                 />
+                            ))}
+                        </FeaturedToolsWrapper>
+
+                        <ResourcesWrapper>
                             <Heading asElement="h2" size="default">
                                 Docker Images
                             </Heading>
 
+                            {resources.map((resource, index) => (
                                 <Resource
-                            heading="0x Mesh - your gateway to networked liquidity"
+                                    key={`resource-${index}`}
-                            description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity."
+                                    heading={resource.heading}
-                            tags={[{ label: 'Relayer' }]}
+                                    description={resource.description}
-                            url="https://0x.org"
+                                    tags={resource.tags}
+                                    url={resource.url}
                                 />
+                            ))}
+                        </ResourcesWrapper>
 
-                        <Resource
+                        <ResourcesWrapper>
-                            heading="0x Mesh - your gateway to networked liquidity"
-                            description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
-                            tags={[{ label: 'Community Maintained', isInverted: true }, { label: 'Relayer' }]}
-                            url="https://0x.org"
-                        />
                             <Heading asElement="h2" size="default">
                                 TypeScript Libraries
                             </Heading>
 
+                            {resources.map((resource, index) => (
                                 <Resource
-                            heading="0x Mesh - your gateway to networked liquidity"
+                                    key={`resource-${index}`}
-                            description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity."
+                                    heading={resource.heading}
-                            tags={[{ label: 'Relayer' }]}
+                                    description={resource.description}
-                            url="https://0x.org"
+                                    tags={resource.tags}
-                        />
+                                    url={resource.url}
-                        <Resource
-                            heading="0x Mesh - your gateway to networked liquidity"
-                            description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
-                            tags={[{ label: 'Community Maintained', isInverted: true }, { label: 'Relayer' }]}
-                            url="https://0x.org"
                                 />
+                            ))}
+                        </ResourcesWrapper>
                     </article>
                 </Columns>
             </Section>
@@ -91,6 +81,14 @@ const Columns = styled.div`
     grid-row-gap: 30px;
 `;
 
+const FeaturedToolsWrapper = styled.div`
+    margin-bottom: 50px;
+`;
+
+const ResourcesWrapper = styled.div`
+    margin-bottom: 40px;
+`;
+
 const filterGroups: FilterGroup[] = [
     {
         heading: 'Type',
@@ -173,3 +171,35 @@ const filterGroups: FilterGroup[] = [
         ],
     },
 ];
+
+const featuredLinks = [
+    {
+        heading: '0x Code Sandbox',
+        description: 'A description could possibly go here but could be tight.',
+        icon: 'flexibleIntegration',
+        url: 'https://0x.org',
+    },
+    {
+        heading: '0x Code Sandbox',
+        description: 'A description could possibly go here but could be tight.',
+        icon: 'flexibleIntegration',
+        url: 'https://0x.org',
+    },
+];
+
+const resources = [
+    {
+        heading: '0x Mesh - your gateway to networked liquidity',
+        description:
+            'Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity.',
+        tags: [{ label: 'Relayer' }],
+        url: 'https://0x.org',
+    },
+    {
+        heading: '0x Mesh - your gateway to networked liquidity',
+        description:
+            'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs',
+        tags: [{ label: 'Community Maintained', isInverted: true }, { label: 'Relayer' }],
+        url: 'https://0x.org',
+    },
+];