feat: add trades

openscript · openscript · commit 79da460c0306 · 2025-09-28T17:08:00.000Z
diff --git a/res/sprite/api.svg b/res/sprite/api.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5L7.5 9l1.875 4.5M6 13.5L5.5 15m.5-1.5h3.375m0 0L10 15m2.5-3V9.7c0-.186 0-.28.024-.355a.5.5 0 0 1 .322-.32C12.92 9 13.013 9 13.2 9h1.3a1.5 1.5 0 0 1 0 3zm0 0v3m6-6v6"/></g></svg>
diff --git a/res/sprite/architecture.svg b/res/sprite/architecture.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 7c.5 0 2-.5 3-2c1 1.5 3 4 6 4s5-2.5 6-4c1 1.5 2.5 2 3 2M6 4v16m-4-4h20M18 4v16M10 9v7m4-7v7"/></svg>
diff --git a/res/sprite/calendar.svg b/res/sprite/calendar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"><path stroke-width="1.5" d="M16 2v4M8 2v4m5-2h-2C7.229 4 5.343 4 4.172 5.172S3 8.229 3 12v2c0 3.771 0 5.657 1.172 6.828S7.229 22 11 22h2c3.771 0 5.657 0 6.828-1.172S21 17.771 21 14v-2c0-3.771 0-5.657-1.172-6.828S16.771 4 13 4M3 10h18"/><path stroke-width="2" d="M11.996 14h.008m-.008 4h.008m3.987-4H16m-8 0h.009M8 18h.009"/></g></svg>
diff --git a/res/sprite/course.svg b/res/sprite/course.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M20 15c0 1.864 0 2.796-.304 3.53a4 4 0 0 1-2.165 2.165C16.796 21 15.864 21 14 21h-3c-3.772 0-5.658 0-6.83-1.172C3 18.657 3 16.771 3 13V7a4 4 0 0 1 4-4"/><path d="m10 8.5l.434 3.969a.94.94 0 0 0 .552.753c.686.295 1.971.778 3.014.778s2.328-.483 3.014-.778a.94.94 0 0 0 .553-.753L18 8.5m2.5-1v3.77M14 4L7 7l7 3l7-3z"/></g></svg>
diff --git a/res/sprite/iam.svg b/res/sprite/iam.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4.268 18.845c.225 1.67 1.608 2.979 3.292 3.056c1.416.065 2.855.099 4.44.099s3.024-.034 4.44-.1c1.684-.076 3.067-1.385 3.292-3.055c.147-1.09.268-2.207.268-3.345s-.121-2.255-.268-3.345c-.225-1.67-1.608-2.979-3.292-3.056A95 95 0 0 0 12 9c-1.585 0-3.024.034-4.44.1c-1.684.076-3.067 1.385-3.292 3.055C4.12 13.245 4 14.362 4 15.5s.121 2.255.268 3.345Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 9V6.5a4.5 4.5 0 0 1 9 0V9"/><path stroke-linecap="round" d="M8 17.5V16a4 4 0 0 1 8 0v1.5"/><path stroke-linecap="round" d="M10.5 19v-3a1.5 1.5 0 0 1 3 0m0 3v-1"/></g></svg>
diff --git a/res/sprite/mobile.svg b/res/sprite/mobile.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M5 8c.01-2.644.108-4.059 1.024-4.975C7.049 2 8.699 2 11.999 2s4.95 0 5.975 1.025c.916.916 1.013 2.33 1.023 4.975M5 16c.01 2.644.108 4.059 1.024 4.975C7.049 22 8.699 22 11.999 22s4.95 0 5.975-1.025c.916-.916 1.013-2.33 1.023-4.975"/><path stroke-linejoin="round" d="M11 19h2m3-9l1.227 1.057c.515.445.773.667.773.943s-.258.498-.773.943L16 14m-8-4l-1.227 1.057C6.258 11.502 6 11.724 6 12s.258.498.773.943L8 14m5-5l-2 6"/></g></svg>
diff --git a/res/sprite/presentation.svg b/res/sprite/presentation.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2.5 11.5c0 2.828 0 4.243.879 5.121c.878.879 2.293.879 5.121.879h7c2.828 0 4.243 0 5.121-.879c.879-.878.879-2.293.879-5.121v-2c0-2.828 0-4.243-.879-5.121C19.743 3.5 18.328 3.5 15.5 3.5h-7c-2.828 0-4.243 0-5.121.879C2.5 5.257 2.5 6.672 2.5 9.5z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 2v1.5M7 22l5-3l5 3"/><path stroke-linecap="round" d="M12 17.778V22"/></g></svg>
diff --git a/res/sprite/review.svg b/res/sprite/review.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"><path stroke-width="1.5" d="M2 10.5c0-.77.013-1.523.04-2.25c.083-2.373.125-3.56 1.09-4.533c.965-.972 2.186-1.024 4.626-1.129A100 100 0 0 1 12 2.5c1.48 0 2.905.03 4.244.088c2.44.105 3.66.157 4.626 1.13c.965.972 1.007 2.159 1.09 4.532a64 64 0 0 1 0 4.5c-.083 2.373-.125 3.56-1.09 4.533c-.965.972-2.186 1.024-4.626 1.129q-1.102.047-2.275.07c-.74.014-1.111.02-1.437.145s-.6.358-1.148.828l-2.179 1.87A.73.73 0 0 1 8 20.77v-2.348l-.244-.01c-2.44-.105-3.66-.157-4.626-1.13c-.965-.972-1.007-2.159-1.09-4.532A64 64 0 0 1 2 10.5"/><path stroke-width="1.5" d="M17 10.5s-2.042 3-5 3s-5-3-5-3s2-3 5-3s5 3 5 3"/><path stroke-width="2" d="M11.991 10.5h.01"/></g></svg>
diff --git a/res/sprite/server.svg b/res/sprite/server.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.5 3h-13c-.465 0-.697 0-.89.038A2 2 0 0 0 3.038 4.61C3 4.803 3 5.035 3 5.5s0 .697.038.89A2 2 0 0 0 4.61 7.962C4.803 8 5.035 8 5.5 8h13c.465 0 .697 0 .89-.038a2 2 0 0 0 1.572-1.572C21 6.197 21 5.965 21 5.5s0-.697-.038-.89a2 2 0 0 0-1.572-1.572C19.197 3 18.965 3 18.5 3m0 8h-13c-.465 0-.697 0-.89.038a2 2 0 0 0-1.572 1.572C3 12.803 3 13.035 3 13.5s0 .697.038.89a2 2 0 0 0 1.572 1.572c.193.038.425.038.89.038h13c.465 0 .697 0 .89-.038a2 2 0 0 0 1.572-1.572c.038-.193.038-.425.038-.89s0-.697-.038-.89a2 2 0 0 0-1.572-1.572C19.197 11 18.965 11 18.5 11M12 19v2m-7 0h14M6 13.5h.01M6 5.5h.01m2.99 8h.01M9 5.5h.01"/></svg>
diff --git a/res/sprite/sprite.json b/res/sprite/sprite.json
@@ -1,4 +1,12 @@
 {
+  "api": {
+    "width": "24",
+    "height": "24"
+  },
+  "architecture": {
+    "width": "24",
+    "height": "24"
+  },
   "arrow": {
     "width": "9.387",
     "height": "10"
@@ -7,6 +15,10 @@
     "width": "52.089",
     "height": "35.334"
   },
+  "calendar": {
+    "width": "24",
+    "height": "24"
+  },
   "consulting": {
     "width": "24",
     "height": "24"
@@ -15,6 +27,10 @@
     "width": "279.47",
     "height": "271.35"
   },
+  "course": {
+    "width": "24",
+    "height": "24"
+  },
   "education": {
     "width": "24",
     "height": "24"
@@ -23,6 +39,10 @@
     "width": "66.234",
     "height": "64.4"
   },
+  "iam": {
+    "width": "24",
+    "height": "24"
+  },
   "illustration": {
     "width": "2000",
     "height": "668.01"
@@ -91,8 +111,36 @@
     "width": "21",
     "height": "20"
   },
+  "mobile": {
+    "width": "24",
+    "height": "24"
+  },
+  "presentation": {
+    "width": "24",
+    "height": "24"
+  },
+  "review": {
+    "width": "24",
+    "height": "24"
+  },
+  "server": {
+    "width": "24",
+    "height": "24"
+  },
   "software-development": {
     "width": "24",
     "height": "24"
+  },
+  "strategy": {
+    "width": "24",
+    "height": "24"
+  },
+  "web": {
+    "width": "24",
+    "height": "24"
+  },
+  "workshop": {
+    "width": "24",
+    "height": "24"
   }
 }
diff --git a/res/sprite/strategy.svg b/res/sprite/strategy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="m18 11l2.346-2.151c.436-.4.654-.6.654-.849m-3-3l2.346 2.151c.436.4.654.6.654.849m0 0C3 8 3 21 3 21"/><circle cx="5.5" cy="5.5" r="2.5"/><path stroke-linecap="round" d="m13 21l5-5m0 5l-5-5"/></g></svg>
diff --git a/res/sprite/web.svg b/res/sprite/web.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M20 10.128c0-3.832 0-5.747-1.172-6.938S15.771 2 12 2h-2C6.229 2 4.343 2 3.172 3.19S2 6.296 2 10.128s0 5.747 1.172 6.938c.47.477 1.054.763 1.828.934"/><path d="M22 17.5c0-1.875 0-2.812-.477-3.47a2.5 2.5 0 0 0-.553-.553C20.312 13 19.375 13 17.5 13h-5c-1.875 0-2.812 0-3.47.477a2.5 2.5 0 0 0-.553.553C8 14.689 8 15.626 8 17.5s0 2.812.477 3.47a2.5 2.5 0 0 0 .554.553C9.688 22 10.625 22 12.5 22h5c1.875 0 2.812 0 3.47-.477a2.5 2.5 0 0 0 .553-.553C22 20.312 22 19.375 22 17.5Z"/><path stroke-linecap="round" stroke-linejoin="round" d="m16.5 16l.92.793c.387.333.58.5.58.707s-.193.374-.58.707L16.5 19m-3-3l-.92.793c-.387.333-.58.5-.58.707s.193.374.58.707l.92.793M2.5 6h17"/></g></svg>
diff --git a/res/sprite/workshop.svg b/res/sprite/workshop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M16 5.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0Z"/><path stroke-linecap="round" stroke-linejoin="round" d="m14.36 15l.944-.546c1.075-.622 1.612-.933 1.684-1.376a1 1 0 0 0 .01-.209c-.036-.446-.546-.79-1.565-1.478l-4.707-3.177C8.877 6.966 8.452 4.69 9.75 3"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.726 8.214C8.226 10.714 7 17.632 7 21m3.726-12.786C8.877 6.966 8.452 4.69 9.75 3m.975 5.214L13.372 10m.988 5l.944-.546c1.075-.622 1.612-.933 1.684-1.376a1 1 0 0 0 .01-.209c-.036-.446-.546-.79-1.565-1.478L13.373 10M15 21c-.973-1.135-1.974-2.7-2.95-4.142c-.683-1.01-1.025-1.516-1.065-2.045M13.373 10a15.6 15.6 0 0 0-1.77 2.894c-.44.927-.659 1.39-.618 1.92m0 0L8 14"/></g></svg>
diff --git a/src/content/sections/de/Services.mdx b/src/content/sections/de/Services.mdx
@@ -1,7 +1,115 @@
 import ServicesSection from '../../../layouts/sections/ServicesSection.astro';
+import Tabs from '../../../components/Tabs.astro';
+import TabsList from '../../../components/TabsList.astro';
+import TabsTab from '../../../components/TabsTab.astro';
+import TabsPanel from '../../../components/TabsPanel.astro';
+import Sprite from '../../../components/Sprite.astro';
 
 <ServicesSection>
 
-Hallo
+  <Tabs>
+    <TabsList>
+      <TabsTab id="software" controls="software-panel" selected>
+        <Sprite name="software-development" />
+        <h3>Softwareentwicklung</h3>
+      </TabsTab>
+      <TabsTab id="education" controls="education-panel">
+        <Sprite name="education" />
+        <h3>Bildung</h3>
+      </TabsTab>
+      <TabsTab id="consulting" controls="consulting-panel">
+        <Sprite name="consulting" />
+        <h3>Beratung</h3>
+      </TabsTab>
+    </TabsList>
+
+    <TabsPanel id="software-panel" labelledby="software" selected>
+      <p>Wir entwickeln robuste Softwarelösungen, die auf unterschiedliche Bedürfnisse zugeschnitten sind.</p>
+      <ul>
+        <li>
+          <a href="#">
+            <Sprite name="web" />
+            Webanwendungen
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="mobile" />
+            Mobile Anwendungen
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="iam" />
+            Identity- und Access-Management-Systeme
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="api" />
+            Individuelle APIs
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="calendar" />
+            Kalenderlösungen
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="server" />
+            DevOps- und Hosting-Lösungen
+          </a>
+        </li>
+      </ul>
+    </TabsPanel>
+    <TabsPanel id="education-panel" labelledby="education">
+      <p>Wir teilen unser Wissen, um Ihre Lernreise zu unterstützen.</p>
+      <ul>
+        <li>
+          <a href="#">
+            <Sprite name="course" />
+            Kurse
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="workshop" />
+            Workshops
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="presentation" />
+            Präsentationen
+          </a>
+        </li>
+      </ul>
+    </TabsPanel>
+    <TabsPanel id="consulting-panel" labelledby="consulting">
+      <p>Wir begleiten Sie mit praxisnahen Ratschlägen durch technische Herausforderungen.</p>
+      <ul>
+        <li>
+          <a href="#">
+            <Sprite name="strategy" />
+            Technische Strategie
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="architecture" />
+            Systemarchitektur
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="review" />
+            Code-Reviews
+          </a>
+        </li>
+      </ul>
+    </TabsPanel>
+  </Tabs>
 
 </ServicesSection>
diff --git a/src/content/sections/en/Services.mdx b/src/content/sections/en/Services.mdx
@@ -26,28 +26,88 @@ import Sprite from '../../../components/Sprite.astro';
     <TabsPanel id="software-panel" labelledby="software" selected>
       <p>We build robust software solutions tailored to diverse needs.</p>
       <ul>
-        <li>Web applications</li>
-        <li>Mobile applications</li>
-        <li>Identity and access management systems</li>
-        <li>Custom APIs</li>
-        <li>Calendaring solutions</li>
-        <li>Development operations</li>
+        <li>
+          <a href="#">
+            <Sprite name="web" />
+            Web applications
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="mobile" />
+            Mobile applications
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="iam" />
+            Identity and access management systems
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="api" />
+            Custom APIs
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="calendar" />
+            Calendaring solutions
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="server" />
+            DevOps and hosting solutions
+          </a>
+        </li>
       </ul>
     </TabsPanel>
     <TabsPanel id="education-panel" labelledby="education">
       <p>We share our expertise to empower your learning journey.</p>
       <ul>
-        <li>Courses</li>
-        <li>Workshops</li>
-        <li>Presentations</li>
+        <li>
+          <a href="#">
+            <Sprite name="course" />
+            Courses
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="workshop" />
+            Workshops
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="presentation" />
+            Presentations
+          </a>
+        </li>
       </ul>
     </TabsPanel>
     <TabsPanel id="consulting-panel" labelledby="consulting">
       <p>We guide you through technical challenges with practical advice.</p>
       <ul>
-        <li>Technical strategy</li>
-        <li>System architecture</li>
-        <li>Code reviews</li>
+        <li>
+          <a href="#">
+            <Sprite name="strategy" />
+            Technical strategy
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="architecture" />
+            System architecture
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <Sprite name="review" />
+            Code reviews
+          </a>
+        </li>
       </ul>
     </TabsPanel>
   </Tabs>
diff --git a/src/layouts/sections/ServicesSection.astro b/src/layouts/sections/ServicesSection.astro
@@ -20,6 +20,28 @@
 
     .tab-panel {
       font-size: 1.125rem;
+
+      ul {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-wrap: wrap;
+        list-style: none;
+        gap: var(--size-gutter-big);
+
+        li a {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
+          min-width: 10rem;
+
+          svg {
+            width: 2rem;
+            height: auto;
+          }
+        }
+      }
     }
   }
 </style>
