From c4cf353c5e16edc1682a5f34a9ddf44338b566e4 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Tue, 14 Oct 2025 01:31:40 +0000
Subject: [PATCH] Render platform highlights section

cgen-b2d55b89b7474a4ba0eb7ea66476b49d
---
 client/pages/docs/DocsGettingStarted.tsx | 27 ++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/client/pages/docs/DocsGettingStarted.tsx b/client/pages/docs/DocsGettingStarted.tsx
index 99162a82..a7f48f29 100644
--- a/client/pages/docs/DocsGettingStarted.tsx
+++ b/client/pages/docs/DocsGettingStarted.tsx
@@ -262,6 +262,33 @@ export default function DocsGettingStarted() {
         ))}
       </section>
 
+      <section id="platform-highlights" className="space-y-6">
+        <div className="flex items-center gap-3">
+          <LayoutDashboard className="h-6 w-6 text-purple-400" />
+          <h3 className="text-2xl font-semibold text-white">Explore the platform</h3>
+        </div>
+        <div className="grid gap-6 lg:grid-cols-2">
+          {platformHighlights.map((item) => {
+            const Icon = item.icon;
+            return (
+              <Card key={item.title} className="bg-slate-900/60 border-slate-700">
+                <CardHeader>
+                  <CardTitle className="text-white text-lg flex items-center gap-3">
+                    <Icon className="h-5 w-5 text-purple-300" />
+                    {item.title}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription className="text-gray-300 text-sm leading-relaxed">
+                    {item.description}
+                  </CardDescription>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </section>
+
       <section id="setup-workflow" className="space-y-6">
         <div className="flex items-center gap-3">
           <PlugZap className="h-6 w-6 text-purple-400" />