From eb1b821c6e8d95839434fee395e60926fce3b872 Mon Sep 17 00:00:00 2001
From: Jonas Wanke <contact@jonas-wanke.com>
Date: Sun, 20 Oct 2024 20:07:09 +0200
Subject: [PATCH 1/3] Add Web Technologies to skill cards

---
 src/components/Cta.astro             |  2 +-
 src/components/skill/SkillCard.astro | 30 +++++++++++++
 src/pages/en/index.astro             | 32 +++++++++++++-
 src/pages/index.astro                | 63 +++++++++++++---------------
 4 files changed, 91 insertions(+), 36 deletions(-)
 create mode 100644 src/components/skill/SkillCard.astro

diff --git a/src/components/Cta.astro b/src/components/Cta.astro
index 2787e27..459b386 100644
--- a/src/components/Cta.astro
+++ b/src/components/Cta.astro
@@ -12,7 +12,7 @@ const { title, subtitle, action } = Astro.props;
 ---
 
 <div
-  class="overflow-hidden bg-wsi-blue-300 px-6 py-20 text-center shadow-2xl sm:rounded-3xl sm:px-16"
+  class="overflow-hidden rounded-3xl bg-wsi-blue-300 px-6 py-10 text-center shadow-2xl sm:px-16 sm:py-20"
 >
   <h2
     class="mx-auto max-w-2xl text-2xl font-bold tracking-tight text-white sm:text-3xl md:text-4xl"
diff --git a/src/components/skill/SkillCard.astro b/src/components/skill/SkillCard.astro
new file mode 100644
index 0000000..e825ced
--- /dev/null
+++ b/src/components/skill/SkillCard.astro
@@ -0,0 +1,30 @@
+---
+interface Props {
+  name: string;
+  description: string;
+  action: { label: string; url: string };
+}
+
+const { name, description, action } = Astro.props;
+---
+
+<div
+  class="overflow-hidden rounded-3xl bg-gray-50 px-6 py-6 text-center shadow-2xl sm:py-8 xl:px-10"
+>
+  <h2
+    class="mx-auto max-w-2xl text-lg font-bold tracking-tight text-gray-800 sm:text-xl md:text-2xl"
+  >
+    {name}
+  </h2>
+  <p class="text-md mx-auto mt-2 max-w-4xl leading-8 text-gray-600">
+    {description}
+  </p>
+  <div class="mt-8">
+    <a
+      href={action.url}
+      class="rounded-md bg-wsi-blue-300 px-8 py-2 text-base font-semibold leading-7 text-white shadow-sm hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white sm:text-lg"
+    >
+      {action.label}
+    </a>
+  </div>
+</div>
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
index aa741d6..d48c8ce 100644
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@@ -5,6 +5,7 @@ import Hero from "~/components/Hero.astro";
 import Link from "~/components/Link.astro";
 import HeadedSection from "~/components/sections/HeadedSection.astro";
 import WavedSection from "~/components/sections/WavedSection.astro";
+import SkillCard from "~/components/skill/SkillCard.astro";
 import { defaultLang, type Language } from "~/i18n";
 import Layout from "~/layouts/Layout.astro";
 
@@ -65,6 +66,34 @@ const lang = (Astro.currentLocale || defaultLang) as Language;
       are represented. More information on the individual skills can be found on
       the respective subpages.
     </p>
+    <div
+      class="mx-4 grid grid-cols-1 gap-x-8 gap-y-8 lg:grid-cols-3 lg:gap-x-12"
+    >
+      <SkillCard
+        name="Mobile Applications Development"
+        description="As a software developer with a specialization in mobile applications, you are a programmer and designer in one. You ensure that the apps work on users' mobile devices, look appealing, and are fun to use."
+        action={{
+          label: "Find out more",
+          url: getRelativeLocaleUrl(lang, "mobile-applications-development"),
+        }}
+      />
+      <SkillCard
+        name="IT Software Solutions for Business"
+        description="This skill represents the entire spectrum of software-developing IT professions. All full-stack programmers are suitable. This includes desktop, server, database, mobile app, and web development."
+        action={{
+          label: "Find out more",
+          url: getRelativeLocaleUrl(lang, "it-software-solutions-for-business"),
+        }}
+      />
+      <SkillCard
+        name="Web Technologies"
+        description="This skill is about planning, designing, and testing websites, as well as their maintenance and the integration of third-party and social media platforms."
+        action={{
+          label: "Find out more",
+          url: getRelativeLocaleUrl(lang, "web-technologies"),
+        }}
+      />
+    </div><!-- 
     <div class="mx-4 grid grid-cols-1 gap-x-24 gap-y-8 md:grid-cols-2">
       <div>
         <p class="border-b-2 border-white pb-1 text-xl">
@@ -86,8 +115,7 @@ const lang = (Astro.currentLocale || defaultLang) as Language;
           programmers are suitable. This includes desktop, server, database,
           mobile app, and web development.
         </p>
-      </div>
-    </div>
+      </div> -->
   </WavedSection>
   <WavedSection type="bottom">
     <Cta
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4057675..384c16e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,6 +5,7 @@ import Hero from "~/components/Hero.astro";
 import Link from "~/components/Link.astro";
 import HeadedSection from "~/components/sections/HeadedSection.astro";
 import WavedSection from "~/components/sections/WavedSection.astro";
+import SkillCard from "~/components/skill/SkillCard.astro";
 import { defaultLang, type Language } from "~/i18n";
 import Layout from "~/layouts/Layout.astro";
 
@@ -51,40 +52,36 @@ const lang = (Astro.currentLocale || defaultLang) as Language;
       Die Bundesleistungszentren der Softwareentwicklung haben ihren Standort am
       <Link href="https://aeg-nb.de" isExternal>
         Albert-Einstein-Gymnasium Neubrandenburg</Link
-      >. An diesem Standort sind die Disziplinen
-      <Link
-        href={getRelativeLocaleUrl(lang, "mobile-applications-development")}
-      >
-        App-Entwicklung
-      </Link>
-      und
-      <Link
-        href={getRelativeLocaleUrl(lang, "it-software-solutions-for-business")}
-      >
-        Software-Entwicklung
-      </Link>
-      vertreten. Mehr Informationen zu den einzelnen Disziplinen finden sich auf
-      den jeweiligen Unterseiten.
+      >. Mehr Informationen zu den einzelnen Disziplinen finden sich auf den
+      jeweiligen Unterseiten:
     </p>
-    <div class="mx-4 grid grid-cols-1 gap-x-24 gap-y-8 md:grid-cols-2">
-      <div>
-        <p class="border-b-2 border-white pb-1 text-xl">App-Entwicklung</p>
-        <p class="pt-4 md:text-justify">
-          Als Softwareentwickler*in mit der Spezialisierung auf mobile Apps bist
-          du Programmierer*in und Designer*in in einem. Du sorgst dafür, dass
-          die Apps auf den mobilen Endgeräten der Benutzer*innen funktionieren,
-          ansprechend aussehen und Spaß machen.
-        </p>
-      </div>
-      <div>
-        <p class="border-b-2 border-white pb-1 text-xl">Software-Entwicklung</p>
-        <p class="pt-4 md:text-justify">
-          Die Disziplin Software-Entwicklung bildet das gesamte Spektrum der
-          Software-entwickelnden IT-Berufe ab. Geeignet sind alle
-          Full-Stack-Programmierer*innen. Dazu zählen Desktop-, Server-,
-          Datenbank-, Mobile-App- und Webentwicklung.
-        </p>
-      </div>
+    <div
+      class="mx-4 grid grid-cols-1 gap-x-8 gap-y-8 lg:grid-cols-3 lg:gap-x-12"
+    >
+      <SkillCard
+        name="App-Entwicklung"
+        description="Als Softwareentwickler*in mit der Spezialisierung auf mobile Apps bist du Programmierer*in und Designer*in in einem. Du sorgst dafür, dass die Apps auf den mobilen Endgeräten der Benutzer*innen funktionieren, ansprechend aussehen und Spaß machen."
+        action={{
+          label: "Mehr erfahren",
+          url: getRelativeLocaleUrl(lang, "mobile-applications-development"),
+        }}
+      />
+      <SkillCard
+        name="Software-Entwicklung"
+        description="Diese Disziplin bildet das gesamte Spektrum der Software-entwickelnden IT-Berufe ab. Geeignet sind alle Full-Stack-Programmierer*innen. Dazu zählen Desktop-, Server-, Datenbank-, Mobile-App- und Webentwicklung."
+        action={{
+          label: "Mehr erfahren",
+          url: getRelativeLocaleUrl(lang, "it-software-solutions-for-business"),
+        }}
+      />
+      <SkillCard
+        name="Web-Entwicklung"
+        description="Hier geht es um die Planung und Gestaltung sowie das Testen von Webseiten, deren Pflege, Einbindung von Plattformen Dritter und Integration von Social-Media-Plattformen."
+        action={{
+          label: "Mehr erfahren",
+          url: getRelativeLocaleUrl(lang, "web-technologies"),
+        }}
+      />
     </div>
   </WavedSection>
   <WavedSection type="bottom">

From 35fd254da7eac2b8744a82afcfac072a7a39b13c Mon Sep 17 00:00:00 2001
From: Jonas Wanke <contact@jonas-wanke.com>
Date: Sun, 20 Oct 2024 20:08:12 +0200
Subject: [PATCH 2/3] Remove old text

---
 src/pages/en/index.astro | 42 ++++------------------------------------
 1 file changed, 4 insertions(+), 38 deletions(-)

diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
index d48c8ce..4801062 100644
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@@ -48,23 +48,11 @@ const lang = (Astro.currentLocale || defaultLang) as Language;
   </HeadedSection>
   <WavedSection type="top" title="Our Skills">
     <p class="sm:text-xl">
-      The National Training Centres in Software Development are located at the
+      The National Training Centers in Software Development are located at the
       <Link href="https://aeg-nb.de" isExternal>
         Albert-Einstein-Gymnasium Neubrandenburg</Link
-      >. At this location,
-      <Link
-        href={getRelativeLocaleUrl(lang, "mobile-applications-development")}
-      >
-        Mobile Applications Development
-      </Link>
-      und
-      <Link
-        href={getRelativeLocaleUrl(lang, "it-software-solutions-for-business")}
-      >
-        IT Software Solutions for Business
-      </Link>
-      are represented. More information on the individual skills can be found on
-      the respective subpages.
+      >. More information on the individual skills can be found on their
+      respective pages:
     </p>
     <div
       class="mx-4 grid grid-cols-1 gap-x-8 gap-y-8 lg:grid-cols-3 lg:gap-x-12"
@@ -93,29 +81,7 @@ const lang = (Astro.currentLocale || defaultLang) as Language;
           url: getRelativeLocaleUrl(lang, "web-technologies"),
         }}
       />
-    </div><!-- 
-    <div class="mx-4 grid grid-cols-1 gap-x-24 gap-y-8 md:grid-cols-2">
-      <div>
-        <p class="border-b-2 border-white pb-1 text-xl">
-          Mobile Applications Development
-        </p>
-        <p class="pt-4 md:text-justify">
-          As a software developer with a specialization in mobile applications,
-          you are a programmer and designer in one. You ensure that the apps
-          work on users' mobile devices, look appealing, and are fun to use.
-        </p>
-      </div>
-      <div>
-        <p class="border-b-2 border-white pb-1 text-xl">
-          IT Software Solutions for Business
-        </p>
-        <p class="pt-4 md:text-justify">
-          The skill IT Software Solutions for Business represents the entire
-          spectrum of software-developing IT professions. All full-stack
-          programmers are suitable. This includes desktop, server, database,
-          mobile app, and web development.
-        </p>
-      </div> -->
+    </div>
   </WavedSection>
   <WavedSection type="bottom">
     <Cta

From 798317df395ac72aebccc22a20118ac67c4c1131 Mon Sep 17 00:00:00 2001
From: Jonas Wanke <contact@wanke.dev>
Date: Mon, 28 Oct 2024 17:32:07 +0100
Subject: [PATCH 3/3] Align buttons

Co-authored-by: Benjamin Frost <58258541+Benjamin-Frost@users.noreply.github.com>
---
 src/components/skill/SkillCard.astro | 30 ++++++++++++++--------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/skill/SkillCard.astro b/src/components/skill/SkillCard.astro
index e825ced..e021daf 100644
--- a/src/components/skill/SkillCard.astro
+++ b/src/components/skill/SkillCard.astro
@@ -9,22 +9,22 @@ const { name, description, action } = Astro.props;
 ---
 
 <div
-  class="overflow-hidden rounded-3xl bg-gray-50 px-6 py-6 text-center shadow-2xl sm:py-8 xl:px-10"
+  class="flex flex-col justify-between gap-8 rounded-3xl bg-gray-50 px-6 py-6 text-center shadow-2xl sm:py-8 xl:px-10"
 >
-  <h2
-    class="mx-auto max-w-2xl text-lg font-bold tracking-tight text-gray-800 sm:text-xl md:text-2xl"
-  >
-    {name}
-  </h2>
-  <p class="text-md mx-auto mt-2 max-w-4xl leading-8 text-gray-600">
-    {description}
-  </p>
-  <div class="mt-8">
-    <a
-      href={action.url}
-      class="rounded-md bg-wsi-blue-300 px-8 py-2 text-base font-semibold leading-7 text-white shadow-sm hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white sm:text-lg"
+  <div>
+    <h2
+      class="mx-auto max-w-2xl text-lg font-bold tracking-tight text-gray-800 sm:text-xl md:text-2xl"
     >
-      {action.label}
-    </a>
+      {name}
+    </h2>
+    <p class="text-md mx-auto mt-2 max-w-4xl leading-8 text-gray-600">
+      {description}
+    </p>
   </div>
+  <a
+    href={action.url}
+    class="rounded-md bg-wsi-blue-300 px-8 py-2 text-base font-semibold leading-7 text-white shadow-sm hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white sm:text-lg"
+  >
+    {action.label}
+  </a>
 </div>