feat: improve values page

res/sprite/sprite.json

@@ -115,6 +115,10 @@
     "width": "24",
     "height": "24"
   },
+  "map": {
+    "width": "296",
+    "height": "420"
+  },
   "mobile": {
     "width": "24",
     "height": "24"

src/components/Sprite.astro

@@ -1,18 +1,21 @@
 ---
+import type { HTMLAttributes } from "astro/types";
 import SpriteData from "../../res/sprite/sprite.json";
 
 type Props = {
   name: keyof typeof SpriteData;
   class?: string;
+  style?: HTMLAttributes<"svg">["style"];
   viewBox?: string;
 };
 
 const dimensions = SpriteData[Astro.props.name];
-const { class: className, viewBox, name: spriteName } = Astro.props;
+const { class: className, style, viewBox, name: spriteName } = Astro.props;
 ---
 
 <svg
   class={className ?? undefined}
+  style={style}
   width={viewBox ? undefined : dimensions.width}
   height={viewBox ? undefined : dimensions.height}
   viewBox={viewBox}

src/content/pages/de/present/values.mdx

@@ -2,19 +2,44 @@
 path: werte
 title: Unsere Werte
 ---
+import Sprite from "../../../../components/Sprite.astro";
+import MainAside from "../../../../layouts/groups/MainAside.astro";
 
-<section>
+<MainAside>
+  <slot>
+    Wir sind ...
 
-  ### Anpassungsfähig
+    ## pragmatisch und neugierig
 
-  Wir verfolgen pragmatische Ansätze und gehen manchmal auch unkonventionelle Wege.
+    Wir verfolgen pragmatische Ansätze und gehen manchmal auch neue, unkonventionelle Wege. 
+    Dabei haben wir stets die Ziele unser Kunden im Auge und passen unsere Vorgehensweise daran an.
 
-  ### Kameradschaftlich
+    ## kameradschaftlich und menschlich
 
-  Wir gehen Abenteuer kameradschaftlich an.
+    Wir gehen Projekte wie Abenteuer kameradschaftlich an, denn gemeinsam geht's immer am besten. 
+    Der Mensch und die Zusammenarbeit sind uns wichtig und stehen stets im Vordergrund.
 
-  ### Nachhaltig
+    ## nachhaltig und nah
 
-  Wir suchen in der Zusammenarbeit und in Projekten die Nachhaltigkeit.
+    Wir setzen auf eine enge Zusammenarbeit mit unseren Kunden. Unsere Lösungen sind auf langfristige Wartbarkeit und
+    Stabilität ausgelegt.
 
-</section>
+    ## zuverlässig und verantwortungsbewusst
+
+    Wir übernehmen Verantwortung für unsere Arbeit und stehen unseren Kunden bei jeder Herausforderung
+    zur Seite. KI sehen wir als Werkzeug um unsere Arbeit qualitativ noch besser zu machen, nicht um quantitativ 
+    mehr zu leisten.
+  </slot>
+
+
+  <Sprite
+    name="map"
+    slot="aside"
+    style={{
+      width: "100%",
+      transform: "scaleX(-1)",
+      transformBox: "fill-box",
+      transformOrigin: "center",
+    }}
+  />
+</MainAside>

src/content/pages/en/present/values.mdx

@@ -3,15 +3,43 @@ path: values
 title: Our Values
 ---
 
-<section>
+import Sprite from "../../../../components/Sprite.astro";
+import MainAside from "../../../../layouts/groups/MainAside.astro";
 
-  ### Adaptability
-  We take pragmatic approaches and sometimes go unconventional.
+<MainAside>
+  <slot>
+    We are ...
 
-  ### Companionship
-  We approach projects like friends.
+    ## pragmatic and curious
 
-  ### Sustainability
-  We look for sustainability in cooperation and projects.
+    We pursue pragmatic approaches and sometimes take unconventional paths.
+    We keep our clients' goals in mind and adapt our way of working accordingly.
 
-</section>
+    ## companionship and humanity
+
+    We approach projects like adventures together, because things are always better as a team.
+    People and collaboration are important to us and are always at the center.
+
+    ## sustainable and close
+
+    We focus on close collaboration with our clients.
+    Our solutions are designed for long-term maintainability and stability.
+
+    ## reliable and responsible
+
+    We take responsibility for our work and stand by our clients in every challenge.
+    We see AI as a tool to improve the quality of our work, not to increase output quantitatively.
+
+  </slot>
+
+  <Sprite
+    name="map"
+    slot="aside"
+    style={{
+      width: "100%",
+      transform: "scaleX(-1)",
+      transformBox: "fill-box",
+      transformOrigin: "center",
+    }}
+  />
+</MainAside>

src/layouts/groups/MainAside.astro

@@ -0,0 +1,27 @@
+---
+// import Sprite from "../../components/Sprite.astro";
+---
+
+<section>
+  <main>
+    <slot />
+  </main>
+  <aside>
+    <slot name="aside" />
+  </aside>
+</section>
+
+<style>
+  section {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    gap: var(--size-gutter-big);
+    justify-items: center;
+
+    > aside {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+</style>