refactor: komplettsanierung

apps/web/src/components/blog/posts/Group3/GreenIT.tsx

@@ -3,6 +3,7 @@ import { H2, H3 } from "../../../ArticleHeading";
 import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
 import { IconList, IconListItem } from "../../../IconList";
 import { Mermaid } from "../../../Mermaid";
+import { DiagramPie } from "../../../DiagramPie";
 import { Marker } from "../../../Marker";
 import { ComparisonRow } from "../../../Landing/ComparisonRow";
 
@@ -56,6 +57,9 @@ export const GreenIT: React.FC = () => (
           Energy --> Profit["Geringere Hosting-Kosten"]
           style Profit fill:#4ade80,stroke:#333
           style Impact fill:#4ade80,stroke:#333`}
+        id="green-it-efficiency"
+        title="Green IT Effizienz-Kreislauf"
+        showShare={true}
       />
       <p className="text-center text-xs text-slate-400 mt-4 italic">
         Die grüne Rendite: Effizienz in der Software führt direkt zu
@@ -104,6 +108,19 @@ export const GreenIT: React.FC = () => (
       </IconListItem>
     </IconList>
 
+    <DiagramPie
+      data={[
+        { label: "Server Computing", value: 40 },
+        { label: "Data Transfer", value: 30 },
+        { label: "Client Rendering", value: 20 },
+        { label: "Asset Storage", value: 10 },
+      ]}
+      title="Website Energie-Verbrauch Breakdown"
+      caption="Wo Ihre Website Energie verbraucht: Optimierungspotenzial in jedem Bereich."
+      id="energy-consumption-pie"
+      showShare={true}
+    />
+
     <div className="my-12">
       <ComparisonRow
         description="Der Impact Ihres technologischen Fußabdrucks"