From c922b1dae9483d117c6935b291c1094365bffe8c Mon Sep 17 00:00:00 2001
From: "Tom.DevTech" <Tom.Helling1234@gmail.com>
Date: Fri, 25 Apr 2025 18:41:13 +0200
Subject: [PATCH] Added landing page section

---
 src/App.css                         |  8 ++++++++
 src/components/ContentFrame.tsx     |  2 +-
 src/components/ContentFrameBox.tsx  |  4 ++++
 src/components/WelcomeComponent.tsx | 27 +++++++++++++++++++++++++++
 src/translations/translations.ts    | 14 ++++++++++++++
 5 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/components/WelcomeComponent.tsx

diff --git a/src/App.css b/src/App.css
index fdf4f00..8b1248d 100644
--- a/src/App.css
+++ b/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 
diff --git a/src/components/ContentFrame.tsx b/src/components/ContentFrame.tsx
index 3a9d496..2e5d684 100644
--- a/src/components/ContentFrame.tsx
+++ b/src/components/ContentFrame.tsx
@@ -27,4 +27,4 @@ export default function ContentFrame({ projectKey, link }: Props) {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/ContentFrameBox.tsx b/src/components/ContentFrameBox.tsx
index 4a9c41b..4056dcc 100644
--- a/src/components/ContentFrameBox.tsx
+++ b/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"
diff --git a/src/components/WelcomeComponent.tsx b/src/components/WelcomeComponent.tsx
new file mode 100644
index 0000000..d171c00
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/translations/translations.ts b/src/translations/translations.ts
index b901610..e8ede7a 100644
--- a/src/translations/translations.ts
+++ b/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",