Merge branch 'chore/dependency-bump-3-24' into 'main'

chore: dependency update 3/24

See merge request !54

package.json

@@ -24,20 +24,19 @@
     "astro": "astro"
   },
   "devDependencies": {
-    "@astrojs/mdx": "^0.19.7",
-    "@astrojs/react": "^2.2.1",
-    "@astrojs/tailwind": "^4.0.0",
-    "@carbon/icons-react": "^11.23.1",
+    "@astrojs/mdx": "^2.2.2",
+    "@astrojs/react": "^3.1.0",
+    "@astrojs/tailwind": "^5.1.0",
+    "@carbon/icons-react": "^11.39.0",
     "@fchh/fcos-suite-map": "^0.1.4",
-    "@fchh/fcos-suite-ui": "^0.2.16",
-    "@types/carbon__icons-react": "^11.20.0",
-    "@types/react": "^18.2.17",
-    "@types/react-dom": "^18.2.7",
-    "astro": "^2.9.6",
-    "astro-auto-import": "^0.3.0",
+    "@fchh/fcos-suite-ui": "^0.2.18",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
+    "astro": "^4.5.12",
+    "astro-auto-import": "^0.4.2",
     "keen-slider": "^6.8.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-lite-youtube-embed": "^2.3.52"
+    "react-lite-youtube-embed": "^2.4.0"
   }
 }

src/components/AccordionWrapper.tsx

-import type React from "react";
+import React from "react";
 import { Accordion } from "@fchh/fcos-suite-ui";
 import { useEffect } from "react";
 

src/components/ButtonWrapper.tsx

-import type React from "react";
+import React from "react";
 import { Button } from "@fchh/fcos-suite-ui";
 import Icon from "@components/Icon";
 import type { IconPackageName } from "@config/index";

src/components/ContentWrapper.tsx

-import type React from "react";
+import React from "react";
 import { HeroSection } from "@fchh/fcos-suite-ui";
 
 interface Props {

src/components/FooterNewsletterWrapper.tsx

-import type React from "react";
+import React from "react";
 import { NewsletterForm } from "@components";
 import { Footer } from "@fchh/fcos-suite-ui";
 

src/components/GridCardIconWrapper.tsx

-import type React from "react";
+import React from "react";
 import { GridCard } from "@fchh/fcos-suite-ui";
 import Icon from "@components/Icon";
 import type { IconPackageName } from "@config/index";

src/components/Icon.tsx

-import React, { CSSProperties, Fragment } from "react";
+import React from "react";
+import type { CSSProperties } from "react";
 import type { Color } from "@interfaces/ICommon";
 import { ICON_PACKS } from "@config/index";
 import type { IconPackageName } from "@config/index";
@@ -21,11 +22,11 @@ const Icon: React.FC<Props> = ({
   const Comp = ICON_PACKS[pkg][name];
   const inlineStyle: CSSProperties = color ? { color } : {};
   return (
-    <Fragment>
+    <>
       {Comp ? (
         <Comp style={inlineStyle} size={size} className={className} />
       ) : null}
-    </Fragment>
+    </>
   );
 };
 

src/components/NewsletterForm.tsx

-import type React from "react";
+import React from "react";
 import { Button } from "@fchh/fcos-suite-ui";
 import { SENDINBLUE_ENDPOINTS } from "@config/index";
 

src/components/NewsletterFullWidth.tsx

-import type React from "react";
+import React from "react";
 import type { CSSProperties } from "react";
 import NewsletterForm from "@components/NewsletterForm";
 

src/components/PillWrapper.tsx

-import type React from "react";
+import React from "react";
 import { Fragment } from "react";
 import { Pill } from "@fchh/fcos-suite-ui";
 import Icon from "@components/Icon";

src/pages/de/dokumentation/beispiele.mdx

@@ -11,7 +11,7 @@ headerImageTag: Moritz Kindler (Unsplash)
 ## Markdown Bilder
 
 Bilder können in Markdown fie folgt verwendet werden: `![](images/slider/hamburg_unsplash.jpg)`
-![](images/slider/hamburg_unsplash.jpg)
+![](/images/slider/hamburg_unsplash.jpg)
 
 ## Bilder mit Beschriftung
 

src/pages/de/index.mdx

 ---
 layout: "@layouts/HomeLayout.astro"
-title: Home
+title: Home Deutsch
 headerImage: images/home/hamburg_2054.jpg
 headerImageAlt: Hamburg 2054 Collage
 description: "Lokal produzieren, alles recyceln, global vernetzt sein: Das ist die Idee der Fab City. Die Fab City ist die Antwort auf die Herausforderungen der Gegenwart, allen voran den Klimawandel."
@@ -15,7 +15,7 @@ description: "Lokal produzieren, alles recyceln, global vernetzt sein: Das ist d
         <p class="fc-text-xl fc-mb-10">Diese Demo-Seite dient dazu, den Umfang und die Funktionalität der FCOS Suite zu präsentieren. Bitte schauen Sie sich auch die anderen Seiten in der Menüleiste an.</p>
         <Button
           text="Zur Beschreibung der Features"
-          href="de/fabcity/association/"
+          href="de/dokumentation/beispiele"
           type="primary"
           icon="ArrowRight"
           iconSize="24"

src/pages/en/index.mdx

 ---
 layout: "@layouts/HomeLayout.astro"
-title: EN Hello to the Fab City Website
-headerImage: images/hero/palms_unsplash.jpg
-headerImageAlt: Picture of two metal palm trees
+title: Home English
+headerImage: images/home/hamburg_2054.jpg
+headerImageAlt: Hamburg 2054 Collage
+description: "Produce locally, recycle everything, connect globally: That's what the fab city is about. It's an answer to the challenges of today, especially climate change."
 ---
 
-### Hello to this new website
-
-Astro leverages a routing strategy called **file-based routing.** Every `.astro` file in your `src/pages` directory becomes a page or an endpoint on your site based on its file path.
-
-Hello
+<div class="fc-relative-width-full fc-bg-pearl-500 lg:fc-pt-32 fc-pt-16 lg:fc-pb-16 fc-pb-10">
+  <div class="fc-container font-plex text-grey-900">
+    <div class="fc-grid fc-grid-cols-1 lg:fc-grid-cols-[18%_64%_18%]">
+      <div class="lg:fc-col-start-2">
+        <h2 class="fc-text-5xl fc-leading-none fc-mb-10">Collaborative websites with FCOS Suite</h2>
+        <p class="fc-text-xl fc-mb-4">FCOS Suite is a template for creating simple websites with the help of a static site generator. Compared to other ways of building websites, this allows public collaboration via Git and results in very performance and efficient websites.</p>
+        <p class="fc-text-xl fc-mb-10">This demo page is supposed to demonstate the scope and functionality of FCOS suite. Please look at the other pages in the main menu.</p>
+        <Button
+          text="To the feature list"
+          href="de/dokumentation/beispiele"
+          type="primary"
+          icon="ArrowRight"
+          iconSize="24"
+        />
+      </div>
+    </div>
+  </div>
+</div>