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

import React from "react";
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";

export const GreenIT: React.FC = () => (
  <>
    <LeadParagraph>
      Das Internet verbraucht mehr Energie als der weltweite Flugverkehr.
    </LeadParagraph>
    <LeadParagraph>
      In meiner Rolle als Digital Architect sehe ich Nachhaltigkeit nicht als
      "Nice-to-Have", sondern als Ausdruck technischer Reife.
    </LeadParagraph>
    <LeadParagraph>
      Effizienter Code ist grüner Code.{" "}
      <Marker>
        Schlanke Systeme sparen nicht nur CO2, sondern auch bares Geld.
      </Marker>
    </LeadParagraph>
    <LeadParagraph>
      Ich zeige Ihnen, warum ökologische Verantwortung und ökonomische
      Profitabilität Hand in Hand gehen.
    </LeadParagraph>

    <H2>Der ökologische Fußabdruck von schlechtem Code</H2>
    <Paragraph>
      Jedes unnötige Kilobyte, das durch das Netz geschickt wird, frisst Strom –
      im Rechenzentrum, in den Leitungen und am Endgerät des Nutzers.
    </Paragraph>
    <Paragraph>
      Viele moderne Websites sind heute "Adipös". Sie schleppen Megabytes an
      Ballast mit sich herum.
    </Paragraph>
    <Paragraph>
      Das führt zu erhitzten Smartphones und überlasteten Servern.
    </Paragraph>
    <Paragraph>
      Ich nenne das <Marker>digitale Verschwendung</Marker>.
    </Paragraph>
    <Paragraph>
      Durch radikale Optimierung senken wir die CPU-Last um bis zu 80 %. Das
      schont die Umwelt und beschleunigt Ihre UX.
    </Paragraph>

    <div className="my-12">
      <Mermaid
        graph={`graph TD
          Code["Schlanke Code-Architektur"] --> Compute["Weniger CPU-Zyklen am Server"]
          Code --> Bytes["Weniger Traffic (CDN)"]
          Compute --> Energy["Niedrigerer Stromverbrauch"]
          Bytes --> Impact["Schnellere UX & Weniger CO2"]
          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
        ökologischen und finanziellen Einsparungen.
      </p>
    </div>

    <H3>Boutique-Engineering als Klimaschutz</H3>
    <Paragraph>
      Standard-Agenturen greifen oft zu überladenen Baukästen, um Zeit zu
      sparen.
    </Paragraph>
    <Paragraph>
      Der Preis dafür ist eine gigantische technische Ineffizienz.
    </Paragraph>
    <Paragraph>Ich investiere lieber Zeit in präzises Handwerk.</Paragraph>
    <Paragraph>
      Ein maßgeschneidertes System verbraucht nur einen Bruchteil der Ressourcen
      eines WordPress-Monolithen.
    </Paragraph>
    <Paragraph>
      Das ist <Marker>Nachhaltigkeit durch technologische Brillanz</Marker>.
    </Paragraph>

    <H2>Meine Hebel für eine nachhaltige Infrastruktur</H2>
    <Paragraph>Grüne IT beginnt bei der Wahl der Waffen.</Paragraph>
    <Paragraph>
      Hier sind drei Wege, wie ich Ihren digitalen Fußabdruck minimiere:
    </Paragraph>

    <IconList>
      <IconListItem check>
        <strong>Static-First Architektur:</strong> Wir berechnen Seiten nicht
        bei jedem Aufruf neu. Einmal generiert, tausende Male effizient
        ausgeliefert.
      </IconListItem>
      <IconListItem check>
        <strong>Intelligentes Asset-Management:</strong> Keine unnötigen Fonts
        oder Tracking-Skripte. Wir senden nur das absolute Minimum an Daten an
        den Browser.
      </IconListItem>
      <IconListItem check>
        <strong>Grünes Server-Partnering:</strong> Ich wähle Hostinganbieter,
        die zu 100 % mit erneuerbaren Energien arbeiten.{" "}
        <Marker>Nachhaltigkeit über den gesamten Stack.</Marker>
      </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"
        negativeLabel="Standard Legacy-Website"
        negativeText="Hohe Serverlast, überladene Scripte, unnötiger CO2-Ausstoß"
        positiveLabel="Eco-Performance Architecture"
        positiveText="Minimale CPU-Last, schlanke Datenübertragung, 100% Green Hosting"
      />
    </div>

    <H2>Wirtschaftliche Vorteile von Green IT</H2>
    <Paragraph>Effizienz zahlt sich aus.</Paragraph>
    <Paragraph>
      Weniger Datentransfer und geringere Serverlast bedeuten niedrigere
      laufende Kosten.
    </Paragraph>
    <Paragraph>
      Gleichzeitig belohnt Google schnelle, schlanke Seiten mit besseren
      Rankings.
    </Paragraph>
    <Paragraph>
      Nachhaltigkeit ist also kein Verzicht, sondern ein{" "}
      <Marker>Wettbewerbsvorteil</Marker>.
    </Paragraph>
    <Paragraph>
      Positionieren Sie Ihr Unternehmen als Vorreiter einer neuen, bewussten
      digitalen Ära.
    </Paragraph>

    <H2>Wann macht Green IT für Sie Sinn?</H2>
    <Paragraph>
      Ich baue für Marken, die <Marker>Werte über kurzfristige Trends</Marker>{" "}
      stellen.
    </Paragraph>
    <Paragraph>
      Wenn Sie Ihre CSR-Ziele auch digital ernst nehmen, bin ich Ihr Architekt.
    </Paragraph>
    <Paragraph>
      Schaffen wir Systeme, die auch für die nächste Generation noch vorbildlich
      sind.
    </Paragraph>

    <H2>Fazit: Weniger ist mehr Zukunft</H2>
    <Paragraph>Gutes Design ist immer auch sparsames Design.</Paragraph>
    <Paragraph>
      Lassen wir gemeinsam Ihren digitalen Ballast abwerfen und stattdessen in
      echte Effizienz investieren.
    </Paragraph>
    <Paragraph>
      <Marker>Purer Output bei minimalem Input.</Marker> Das ist das Ziel meines
      Boutique-Ansatzes.
    </Paragraph>
    <Paragraph>Für Ihr Business und unseren Planeten.</Paragraph>
  </>
);