feat: add team page

src/assets/data/team.json

@@ -0,0 +1,70 @@
+[
+  {
+    "img": "/src/assets/img/team/Benjamin Frost.webp",
+    "name": "Benjamin Frost",
+    "lastRole": "Jury",
+    "hasMultipleRoles": true
+  },
+  {
+    "img": "/src/assets/img/team/Jonas Wanke.webp",
+    "name": "Jonas Wanke",
+    "lastRole": "Expert",
+    "skill": "Skill 08",
+    "hasMultipleRoles": true
+  },
+  {
+    "img": "/src/assets/img/team/Dr. Olaf Kappler.webp",
+    "name": "Dr. Olaf Kappler",
+    "lastRole": "Expert",
+    "skill": "Skill 09"
+  },
+  {
+    "img": "/src/assets/img/team/Doreen Kappler.webp",
+    "name": "Doreen Kappler",
+    "lastRole": "Good Fairy"
+  },
+  {
+    "img": "/src/assets/img/team/Glenn Skrzypczak.webp",
+    "name": "Glenn Skrzypczak",
+    "lastRole": "Expert",
+    "skill": "Skill 17",
+    "hasMultipleRoles": true
+  },
+  {
+    "img": "/src/assets/img/team/Elisa Boose.webp",
+    "name": "Elisa Boose",
+    "lastRole": "Trainer"
+  },
+  {
+    "img": "/src/assets/img/team/Michael Boose.webp",
+    "name": "Michael Boose",
+    "lastRole": "Trainer"
+  },
+  {
+    "img": "/src/assets/img/team/Joachim Schiller.webp",
+    "name": "Joachim Schiller",
+    "lastRole": "Jury",
+    "hasMultipleRoles": true
+  },
+  {
+    "img": "/src/assets/img/team/Justin Konratt.webp",
+    "name": "Justin Konratt",
+    "lastRole": "Jury",
+    "hasMultipleRoles": true
+  },
+  {
+    "img": "/src/assets/img/team/Kai Redmann.webp",
+    "name": "Kai Redmann",
+    "lastRole": "Workshop Manager"
+  },
+  {
+    "img": "/src/assets/img/team/Lukas Fischer.webp",
+    "name": "Lukas Fischer",
+    "lastRole": "Workshop Manager"
+  },
+  {
+    "img": "/src/assets/img/team/Thomas Steinfeld.webp",
+    "name": "Thomas Steinfeld",
+    "lastRole": "Mr. Speed Programming"
+  }
+]

src/components/Header.astro

@@ -24,11 +24,22 @@ const skills = [
   {
     name: t({
       de: "Web-Entwicklung",
-      en: "Web Technologies"
+      en: "Web Technologies",
     }),
     href: getRelativeLocaleUrl(lang, "web-technologies"),
   },
 ];
+
+const navigationItems = [
+  {
+    translation: { de: "Startseite", en: "Home" },
+    link: getRelativeLocaleUrl(lang, "/"),
+  },
+  {
+    translation: { de: "Unser Team", en: "Our Team" },
+    link: getRelativeLocaleUrl(lang, "/our-team"),
+  },
+];
 ---
 
 <header class="bg-wsg-orange-500 shadow">
@@ -46,20 +57,27 @@ const skills = [
         </a>
         <div class="ml-10 hidden space-x-8 lg:block">
           <a
-            href={getRelativeLocaleUrl(lang)}
+            href={getRelativeLocaleUrl(lang, "/")}
             class="text-base font-medium text-white hover:text-gray-100"
           >
             {t({ de: "Startseite", en: "Home" })}
           </a>
         </div>
-
         <div class="ml-10 hidden lg:block">
           <SkillsDropdown
             client:load
             title={t({ de: "Unsere Disziplinen", en: "Our Skills" })}
             skills={skills}
           />
         </div>
+        <div class="ml-10 hidden space-x-8 lg:block">
+          <a
+            href={getRelativeLocaleUrl(lang, "/our-team")}
+            class="text-base font-medium text-white hover:text-gray-100"
+          >
+            {t({ de: "Unser Team", en: "Our Team" })}
+          </a>
+        </div>
       </div>
       <LanguageDropdown
         client:load

src/components/Hero.astro

@@ -6,7 +6,7 @@ import HeroBgImage from "~/assets/img/hero-bg.jpg";
 
 interface Props {
   title: string;
-  subtitle: string;
+  subtitle?: string;
   img?: ImageMetadata;
   size?: "md" | "lg";
 }
@@ -27,7 +27,7 @@ const { title, subtitle, img = HeroBgImage, size = "lg" } = Astro.props;
     class={clsx(
       "relative mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8",
       { "py-8 sm:py-16 md:py-32": size === "md" },
-      { "py-16 sm:py-32 md:py-64": size === "lg" },
+      { "py-16 sm:py-32 md:py-64": size === "lg" }
     )}
   >
     <h1

src/components/team/Person.astro

@@ -1,24 +1,32 @@
 ---
-import { TeamMember } from "../../utils/async_helper";
-import type { PropsOf } from "../../utils/types";
-import SocialMediaList from "../social_media/SocialMediaList.astro";
+import { getLangFromUrl, useTranslations } from "~/i18n/utils";
+import { type TeamMember } from "../../utils/async_helper";
 import { PersonImage } from "./PersonImage";
 
-type Props = TeamMember;
+interface Props {
+  name: string;
+  lastRole: string;
+  img?: string;
+  skill?: string;
+  hasMultipleRoles?: boolean;
+}
 
-const { name, img, lastRole, skill, hasMultipleRoles } = Astro.props;
+const { name, img, lastRole, skill, hasMultipleRoles = false } = Astro.props;
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
 ---
 
 <div class="space-y-6">
   <PersonImage img={img} />
-  <div class="text-center text-md font-light">
-    <h3 class="text-lg font-medium mb-1">{name}</h3>
+  <div class="text-md text-center font-light">
+    <h3 class="mb-1 text-lg font-medium">{name}</h3>
     <div>
       <p class="inline-block">
         {lastRole}
       </p>
       <p class="inline-block">
-        {hasMultipleRoles && t("team.more")}
+        {hasMultipleRoles && t({ de: "und mehr", en: "and more" })}
       </p>
     </div>
     <p>

src/components/team/PersonImage.tsx

@@ -6,7 +6,7 @@ export const PersonImage = ({ img }: PersonImageProps) => {
   const padding = !img ? "p-5" : "";
   return (
     <img
-      className={`mx-auto h-40 w-40 rounded-full shadow-lg xl:h-56 xl:w-56 object-cover ${padding}`}
+      className={`mx-auto h-40 w-40 rounded-full object-cover shadow-lg xl:h-56 xl:w-56 ${padding}`}
       src={img ?? "/imgs/wsg/wsg_hands.svg"}
       alt=""
     />

src/components/team/Team.astro

@@ -1,13 +1,11 @@
 ---
-import { load_team } from "../../utils/async_helper";
 import Person from "./Person.astro";
-
-const team = await load_team();
+import team from "~/assets/data/team.json";
 ---
 
 <div class="bg-white py-16">
   <div
-    class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-y-16 mx-8 md:mx-24 mx-32"
+    class="mx-8 grid grid-cols-2 gap-y-16 md:mx-24 md:grid-cols-3 lg:grid-cols-4"
   >
     {
       team

src/pages/[lang]/our-team.astro

@@ -1,18 +1,17 @@
 ---
+import { getLangFromUrl, localeParams, useTranslations } from "~/i18n/utils";
 import Hero from "../../components/Hero.astro";
 import TeamPage from "../../components/team/Team.astro";
 import Layout from "../../layouts/Layout.astro";
-import { getStaticLangPaths, updateLang } from "../../routing/lang";
-import { t } from "i18next";
+import TeamImage from "~/assets/img/team.webp";
 
-export const getStaticPaths = getStaticLangPaths;
-updateLang(Astro.url.pathname);
+export const getStaticPaths = localeParams;
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
 ---
 
-<Layout title={t("team.title")}>
-  <Hero
-    title={t("team.title")}
-    img="https:////live.staticflickr.com/65535/52434467221_676ae1bf70_h.jpg"
-  />
+<Layout title={t({ de: "Unser Team", en: "Our Team" })}>
+  <Hero title={t({ de: "Unser Team", en: "Our Team" })} img={TeamImage} />
   <TeamPage />
 </Layout>