Several changes

- Convert React component to Astro component
- Add utils for directus client

src/pages/index.astro

@@ -1,5 +1,5 @@
 ---
-import { ReachNewHeights } from "../views/ReachNewHeights/ReachNewHeights";
+import ReachNewHeights from "../views/ReachNewHeights/ReachNewHeights.astro";
 import Choices from "../components/Choices";
 import { Uniqueness } from "../components/Uniqueness";
 import { Mobile } from "../components/Mobile";

src/utils/client.js

@@ -0,0 +1,10 @@
+import {createDirectus, 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 directusClient;

src/views/ReachNewHeights/ReachNewHeights.astro

@@ -0,0 +1,69 @@
+---
+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: ["*.*"]
+}));
+
+---
+
+<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>
+      </div>
+      <div class="reach-new-heights__buttons">
+          <Link href="/new">{}</Link>
+              <Link href="#Features" tertiary>{}</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>{}</h2>
+        <p>{}</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>{}</h2>
+        <p>{}</p>
+      </div>
+    </div>
+  </div>
+</section>