Restructure Lab docs & Lab 3.2

components/social-card/CommunityLinks.tsx

@@ -14,18 +14,21 @@ export function CommunityLinks() {
         title="Discord"
         body="Join the community"
         href="https://discord.gg/memgraph"
+        is_external={true}
       />
       <SocialCard 
         icon={<GitHub />}
         title="GitHub"
         body="Ask a question"
         href="https://github.com/memgraph/memgraph/discussions"
+        is_external={true}
       />
       <SocialCard 
         icon={<Calendar />}
         title="Office hours"
         body="Talk with Memgraph engineers"
         href="https://memgraph.com/office-hours"
+        is_external={true}
       />
       </SocialCards>
       </div>

components/social-card/LabOverview.tsx

@@ -0,0 +1,33 @@
+import { SocialCards } from './SocialCards';
+import { SocialCard } from './SocialCard';
+
+// TODO: Make this customizable - forward a list of icon?, title and body and create social cards
+export function LabOverview() {
+  return (
+    <div>
+    <SocialCards>
+      <SocialCard 
+        title="Getting started →"
+        body="Learn the Memgraph Lab installation and deployment best practices."
+        href="/docs/memgraph-lab/getting-started"
+      />
+      <SocialCard 
+        title="Querying →"
+        body="Discover how to execute Cypher queries, explore query results, and optimize performance."
+        href="/docs/memgraph-lab/querying"
+      />
+      <SocialCard 
+        title="Features →"
+        body="Explore features such as GraphChat, monitoring, sharing features, and more."
+        href="/docs/memgraph-lab/features"
+      />
+      <SocialCard 
+        title="Configuration →"
+        body="Learn how to configure Memgraph Lab in Docker environment using environment variables."
+        href="/docs/memgraph-lab/configuration"
+      />
+      </SocialCards>
+      </div>
+  );
+}
+

components/social-card/SocialCard.tsx

@@ -1,25 +1,31 @@
 import type { ReactNode } from 'react';
 
 interface SocialCardProps {
-  icon: ReactNode;
+  icon?: ReactNode;
   title: string;
   href: string;
-  body: string;
+  body?: string;
+  is_external?: boolean;
 }
 
-export function SocialCard({ icon, title, href, body }: SocialCardProps) {
+export function SocialCard({ icon, title, href, body, is_external }: SocialCardProps) {
+  let target = is_external ? "_blank" : "";
   return (
     <a
       href={href}
-      target='_blank'
+      target={target}
       className="social-card group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200 hover:border-gray-300 bg-transparent shadow-sm dark:border-neutral-800 hover:bg-slate-50 hover:shadow-md dark:hover:border-neutral-700 dark:hover:bg-neutral-900"
     >
       <div className="p-4 flex flex-col gap-2 dark:bg-[#3a3436]">
         <div className="flex font-semibold items-start gap-2 text-gray-700 dark:text-gray-100 items-center">
           {icon}
           <span>{title}</span>
         </div>
-        <p className="mt-2 text-sm font-medium text-gray-600 dark:text-gray-300">{body}</p>
+        {body && (
+          <p className="mt-2 text-sm font-medium text-gray-600 dark:text-gray-300">
+            {body}
+          </p>
+        )}
       </div>
     </a>
   );