Changes

astro.config.mjs

@@ -4,8 +4,8 @@ import react from "@astrojs/react";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [react()],
-  redirects: {
-    "/legal": "/legal/privacy",
-  },
+    integrations: [react()],
+    redirects: {
+        "/legal": "/legal/privacy",
+    },
 });

src/pages/[lang]/index.astro

@@ -0,0 +1,29 @@
+---
+import type { GetStaticPaths } from "astro";
+import ReachNewHeights from "../../views/ReachNewHeights/ReachNewHeights.astro";
+import Choices from "../../components/Choices";
+import { Uniqueness } from "../../components/Uniqueness";
+import { Mobile } from "../../components/Mobile";
+import Layout from "../../layouts/Layout.astro";
+import TargetUser from "../../views/TargetUser/TargetUser.astro";
+import Features from "../../views/Features/Features.astro";
+import { AboutUs } from "../../views/AboutUs/AboutUs";
+
+export const getStaticPaths = (() => {
+    return [
+        {params: {lang: "en"}},
+        {params: {lang: "de"}},
+    ];
+}) satisfies GetStaticPaths;
+
+---
+
+<Layout title="Scrumlr">
+  <ReachNewHeights />
+  <Choices client:visible />
+  <Uniqueness />
+  <Mobile />
+  <Features />
+  <TargetUser />
+  <AboutUs />
+</Layout>

src/utils/directus.ts

@@ -0,0 +1,26 @@
+import {createDirectus, readItems, rest, staticToken} from '@directus/sdk';
+
+const directusUrl = import.meta.env.DIRECTUS_URL;
+const directusToken = import.meta.env.DIRECTUS_TOKEN;
+
+const directusClient = createDirectus(directusUrl)
+    .with(staticToken(directusToken))
+    .with(rest());
+
+export default async function getTranslatedContent(collection: string, language: string) {
+    const content = await directusClient.request<{id: string, translations: [Record<string, any>]}>(readItems(collection, {
+        deep: {
+            translations: {
+                _filter: {
+                    languages_code: {
+                        _eq: language
+                    },
+                },
+            },
+        },
+        fields: ['*', 'translations.*'],
+        limit: 1
+    }));
+
+    return content.translations[0];
+}

src/views/ReachNewHeights/ReachNewHeights.astro

@@ -1,27 +1,24 @@
 ---
-import { readItems } from "@directus/sdk";
 import { Link } from "../../components/Link/Link";
 //import Icon from "../../components/Icon";
 import "./ReachNewHeights.scss";
-import directusClient from "../../utils/client";
-
-const content = await directusClient.request(readItems("Hero_Section", {
-    fields: ["*.*"]
-}));
+import getTranslatedContent from "../../utils/directus";
 
+const {lang} = Astro.params;
+const content = await getTranslatedContent("Hero_Section", lang!);
 ---
 
+
 <section class="reach-new-heights" id="Home">
-    {JSON.stringify(content)}
   <div class="reach-new-heights__content">
     <div>
       <div class="reach-new-heights__headline">
-          <h1>{}</h1>
-        <p>{}</p>
+        <h1>{content.header}</h1>
+        <p>{content.paragraph}</p>
       </div>
       <div class="reach-new-heights__buttons">
-          <Link href="/new">{}</Link>
-              <Link href="#Features" tertiary>{}</Link>
+          <Link href="/new">{content.cta}</Link>
+              <Link href="#Features" tertiary>{content.detailsButton}</Link>
       </div>
     </div>
     <img
@@ -46,8 +43,8 @@ const content = await directusClient.request(readItems("Hero_Section", {
           alt="What is it about?"
           class="information-item__icon information-item__icon--dark"
         />
-        <h2>{}</h2>
-        <p>{}</p>
+        <h2>{content.detailsHeader1}</h2>
+        <p>{content.detailsText1}</p>
       </div>
 
       <div class="reach-new-heights__information-item">
@@ -61,8 +58,8 @@ const content = await directusClient.request(readItems("Hero_Section", {
           alt="How can it be used?"
           class="information-item__icon information-item__icon--dark"
         />
-        <h2>{}</h2>
-        <p>{}</p>
+        <h2>{content.detailsHeader2}</h2>
+        <p>{content.detailsText2}</p>
       </div>
     </div>
   </div>