Added landing page section

src/App.css

@@ -12,6 +12,10 @@
   transition-all duration-300 ease-in-out transform hover:scale-[1.02] backdrop-blur-sm;
 }
 
+.ContentFrameWithoutHover {
+  @apply mb-3 mr-3 ml-3 py-3 px-3 lg:ml-0 lg:mb-4 lg:mr-4 lg:py-4 lg:px-4 rounded-2xl font-sans backdrop-brightness-150 border-2 border-transparent;
+}
+
 .body {
   @apply py-5 sm:grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 font-sans gap-4;
 }
@@ -40,6 +44,10 @@
   @apply text-left text-base md:text-lg xl:text-xl font-semibold text-white font-sans whitespace-normal leading-relaxed;
 }
 
+.contentContentCentered {
+  @apply text-center text-base md:text-lg xl:text-xl font-semibold text-white font-sans whitespace-normal leading-relaxed;
+}
+
 .contentLink {
   @apply text-center text-base md:text-lg xl:text-xl font-semibold text-white hover:underline font-sans 
   sm:absolute sm:inset-x-0 sm:bottom-3 md:absolute md:inset-x-0 md:bottom-3 lg:absolute lg:inset-x-0 lg:bottom-3 

src/components/ContentFrame.tsx

@@ -27,4 +27,4 @@ export default function ContentFrame({ projectKey, link }: Props) {
       </div>
     </div>
   );
-}
+}

src/components/ContentFrameBox.tsx

@@ -3,6 +3,7 @@ import ContentFrame from "./ContentFrame";
 import { LanguageSelector } from "./LanguageSelector";
 import { useLanguage } from "../context/LanguageContext";
 import { translations } from "../translations/translations";
+import WelcomeComponent from "./WelcomeComponent";
 
 export function ContentFrameBox() {
   const { language } = useLanguage();
@@ -17,6 +18,9 @@ export function ContentFrameBox() {
             <LanguageSelector />
           </div>
         </header>
+        <WelcomeComponent
+          areaid="welcome"
+        />
         <div className="body">
           <ContentFrame
             projectKey="robert"

src/components/WelcomeComponent.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { useLanguage } from "../context/LanguageContext";
+import { translations } from "../translations/translations";
+
+interface Props {
+  areaid: string;
+}
+
+export default function WelcomeComponent({areaid: areaid}: Props) {
+  const { language } = useLanguage();
+  const welcomebox = translations[language].welcomebox[areaid as keyof typeof translations[typeof language]["welcomebox"]];
+
+  return (
+    <div className="ContentFrameWithoutHover">
+      <div className="contentHeadline">
+        {welcomebox.headline}
+      </div>
+      <div className="contentContentCentered">
+        {welcomebox.text}
+      </div>
+      <br/>
+      <div className="contentContentCentered">
+        "{welcomebox.quote}"
+      </div>
+    </div>
+  );
+}

src/translations/translations.ts

@@ -1,5 +1,12 @@
 export const translations = {
   de: {
+    welcomebox: {
+      welcome: {
+        headline: "Willkommen auf meiner Portfolio-Website",
+        text: "Ich bin Tom, ein leidenschaftlicher Softwareentwickler mit einem breiten Spektrum an Fähigkeiten und Erfahrungen. Hier finden Sie eine Auswahl meiner Projekte, die meine Leidenschaft für Technologie und Innovation widerspiegeln.",
+        quote: "Die einzige Grenze ist die, die du dir selbst setzt."
+      }
+    },
     projects: {
       robert: {
         title: "Robert Assistent",
@@ -91,6 +98,13 @@ export const translations = {
     }
   },
   en: {
+    welcomebox: {
+      welcome: {
+        headline: "Welcome to my Portfolio Website",
+        text: "I am Tom, a passionate software developer with a wide range of skills and experiences. Here you will find a selection of my projects that reflect my passion for technology and innovation.",
+        quote: "The only limit is the one you set for yourself."
+      }
+    },
     projects: {
       robert: {
         title: "Robert Assistant",