Add Web Technologies to skill cards

blz-it · Oct 20, 2024 · eb1b821 · eb1b821
1 parent 57adca0
commit eb1b821
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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">