feat: add breakdown charts

Author: ngnijland

docs/src/components/Insights.astro

@@ -7,7 +7,13 @@ import featureImage from "../assets/features/build-insights.png";
 
 <style>
   section {
-    padding: 8rem 0;
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+
+    @media (min-width: 800px) {
+      margin-top: 8rem;
+      margin-bottom: 8rem;
+    }
   }
 
   .header-wrapper {

docs/src/components/InsightsBreakdown.astro

@@ -14,7 +14,18 @@ const { title, chart, contentTitle } = Astro.props;
 ---
 
 <style>
+  section {
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+
+    @media (min-width: 800px) {
+      margin-top: 8rem;
+      margin-bottom: 8rem;
+    }
+  }
+
   .content-wrapper {
+    row-gap: 2rem;
     margin-top: 2rem;
 
     @media (min-width: 800px) {
@@ -33,6 +44,7 @@ const { title, chart, contentTitle } = Astro.props;
   .description-wrapper {
     @media (min-width: 800px) {
       grid-column: span 6;
+      align-content: center;
     }
   }
 
@@ -121,7 +133,7 @@ const { title, chart, contentTitle } = Astro.props;
                   <div
                     class="bar"
                     style={{ "--progress": `${item.width * 100}%` }}
-                  ></div>
+                  />
                   <span class="value">{item.value}s</span>
                 </div>
               </dd>
@@ -132,7 +144,7 @@ const { title, chart, contentTitle } = Astro.props;
     </figure>
     <div class="description-wrapper">
       <h3 class="title">{contentTitle}</h3>
-      <slot/>
+      <slot />
     </div>
   </div>
 </section>

docs/src/pages/team-insights.astro

@@ -48,26 +48,53 @@ import logoImage from "../assets/rocketsim-insights-logo.svg";
           {
             title: "Mac Studio 2023 / M2 Ultra 24-core / 192 RAM",
             value: 12,
-            width: 0.46,
+            width: 0.36,
           },
           {
             title: 'MacBook Pro 16" 2023 / M3 Max 16-core / 64 RAM',
             value: 14,
-            width: 0.54,
+            width: 0.42,
           },
           {
             title: 'MacBook Pro 16" 2021 / M1 Pro 10-core / 32 RAM',
             value: 26,
-            width: 1,
+            width: 0.77,
           },
-        ]
+        ],
       }}
       contentTitle="Benchmark your team's project"
-      >
-            With team licenses, your builds will be synced. You'll find out{" "}
-            <strong>which machine setup performs best</strong> for your Xcode
-            project.
-            </InsightsBreakdown>
+    >
+      With team licenses, your builds will be synced. You'll find out{" "}
+      <strong>which machine setup performs best</strong> for your Xcode project.
+    </InsightsBreakdown>
+    <InsightsBreakdown
+      title="Does Xcode 16 improve our project's build times?"
+      chart={{
+        title: "Build Duration by Xcode Version",
+        data: [
+          {
+            title: "Xcode 16.0 (16F3233f)",
+            value: 13.5,
+            width: 0.68,
+          },
+          {
+            title: "Xcode 15.4 (15F31d)",
+            value: 15,
+            width: 0.76,
+          },
+          {
+            title: "Xcode 15.3 (15E204a)",
+            value: 15.3,
+            width: 0.78,
+          },
+        ],
+      }}
+      contentTitle="Build duration grouped by Xcode version"
+    >
+      RocketSim Insights automatically benchmarks your team's build durations to
+      tell you <strong>how much an Xcode version improves build times</strong> for
+      your Xcode project.
+    </InsightsBreakdown>
   </main>
   <Footer />
 </BaseLayout>