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",
+    },
 });

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@astrojs/react": "^3.0.4",
+    "@directus/sdk": "^13.0.2",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "astro": "^3.5.3",
@@ -21,10 +22,10 @@
   },
   "devDependencies": {
     "@typescript-eslint/parser": "^6.10.0",
-    "prettier-plugin-astro": "^0.12.1",
     "eslint": "^8.53.0",
     "eslint-plugin-astro": "^0.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
+    "prettier-plugin-astro": "^0.12.1",
     "sass": "^1.69.5"
   }
 }

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

@@ -0,0 +1,66 @@
+---
+import { Link } from "../../components/Link/Link";
+//import Icon from "../../components/Icon";
+import "./ReachNewHeights.scss";
+import getTranslatedContent from "../../utils/directus";
+
+const {lang} = Astro.params;
+const content = await getTranslatedContent("Hero_Section", lang!);
+---
+
+
+<section class="reach-new-heights" id="Home">
+  <div class="reach-new-heights__content">
+    <div>
+      <div class="reach-new-heights__headline">
+        <h1>{content.header}</h1>
+        <p>{content.paragraph}</p>
+      </div>
+      <div class="reach-new-heights__buttons">
+          <Link href="/new">{content.cta}</Link>
+              <Link href="#Features" tertiary>{content.detailsButton}</Link>
+      </div>
+    </div>
+    <img
+      src="assets/images/reach-new-heights_light.webp"
+      alt="Reach new heights"
+      class="reach-new-heights__image reach-new-heights__image--light"
+    />
+    <img
+      src="assets/images/reach-new-heights_dark.webp"
+      alt="Reach new heights"
+      class="reach-new-heights__image reach-new-heights__image--dark"
+    />
+    <div class="reach-new-heights__information">
+      <div class="reach-new-heights__information-item">
+        <img
+          src="assets/icons/icon_what-is-it-about_light.svg"
+          alt="What is it about?"
+          class="information-item__icon information-item__icon--light"
+        />
+        <img
+          src="assets/icons/icon_what-is-it-about_dark.svg"
+          alt="What is it about?"
+          class="information-item__icon information-item__icon--dark"
+        />
+        <h2>{content.detailsHeader1}</h2>
+        <p>{content.detailsText1}</p>
+      </div>
+
+      <div class="reach-new-heights__information-item">
+        <img
+          src="assets/icons/icon_how-can-it-be-used_light.svg"
+          alt="How can it be used?"
+          class="information-item__icon information-item__icon--light"
+        />
+        <img
+          src="assets/icons/icon_how-can-it-be-used_dark.svg"
+          alt="How can it be used?"
+          class="information-item__icon information-item__icon--dark"
+        />
+        <h2>{content.detailsHeader2}</h2>
+        <p>{content.detailsText2}</p>
+      </div>
+    </div>
+  </div>
+</section>