WIP: adding cards with styling, need to create filter for them

app/components/TypeCards.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+export default async function TypeCards() {
+  const types = [
+    {
+      type: 'Tutorials',
+      description:
+        'Learning-oriented, useful when studying or planning a project',
+    },
+    {
+      type: 'How-To Guides and Examples',
+      description:
+        'Problem-oriented, useful when building, specific and narrow in focus',
+    },
+    {
+      type: 'Non-Documentation Resources: Apps, Solid World Videos, etc.',
+      description:
+        'Very useful for seeing working examples, learning about the Solid ecosystem, and many othe purposes',
+    },
+    {
+      type: 'Explanations and Walk-Throughs',
+      description:
+        'Understanding-oriented, useful when learning, tying concepts together, doing deep dives',
+    },
+    {
+      type: 'Protocols, Specifications and other Reference Information',
+      description:
+        'Information-oriented, very practical, detailed official sources',
+    },
+    { type: 'View All', description: '' },
+  ]
+  return (
+    <div className="flex flex-row flex-wrap">
+      {types.map((type) => (
+        <div className="flex basis-1/3 mb-10" key={type.type}>
+          <div className="w-4/5 h-40 border-solid border-1 rounded-md shadow-lg">
+            <div className="h-16 bg-accent3-100 rounded-t-md">
+              <div className="text-lg flex justify-center px-2 pt-1">
+                {type.type}
+              </div>
+            </div>
+            <p className="text-accent3-900 text-md p-2">{type.description}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

app/page.tsx

@@ -1,6 +1,7 @@
 import { fetch } from '@inrupt/solid-client-authn-browser'
 import { getSolidDataset, getThingAll } from '@inrupt/solid-client'
 import Link from 'next/link'
+import TypeCards from './components/TypeCards'
 
 export default async function Home() {
   const linkDataset = await getData()
@@ -19,7 +20,7 @@ export default async function Home() {
 
   return (
     <main>
-      <header className="bg-primary-500 shadow-lg my-7">
+      <header className="bg-primary-500 shadow-lg my-7 mb-10">
         <div className="flex text-primary-900">
           <span className="flex pl-10 font-extrabold text-8xl tracking-tighter items-end">
             Solid
@@ -30,20 +31,23 @@ export default async function Home() {
         </div>
       </header>
       <div className="flex ml-10 gap-8">
-        <div className="basis-4/5">
-          <h2 className="text-2xl">Documentation and Other Resources</h2>
-          {linksList.length ? (
-            linksList.map((element: { name: string; url: string }) => (
-              <div key={element.url}>
-                <p className="mt-10">{element.name}</p>
-                <Link href={element.url}>{element.url}</Link>
-              </div>
-            ))
-          ) : (
-            <p className="mt-10">Loading...</p>
-          )}
+        <div className="basis-11/12">
+          <TypeCards></TypeCards>
+          <div className="hidden">
+            <h2 className="text-2xl">Documentation and Other Resources</h2>
+            {linksList.length ? (
+              linksList.map((resource: { name: string; url: string }) => (
+                <div key={resource.url}>
+                  <p className="mt-10">{resource.name}</p>
+                  <Link href={resource.url}>{resource.url}</Link>
+                </div>
+              ))
+            ) : (
+              <p className="mt-10">Loading...</p>
+            )}
+          </div>
         </div>
-        <div className="basis-1/5 text-2xl">Add a Resource Form</div>
+        <div className="basis-1/12 text-2xl mr-4">Add a Resource</div>
       </div>
     </main>
   )