From 2d98da12e92aacbb881c4681c94852773e60f8bb Mon Sep 17 00:00:00 2001
From: sebastian2357 <80636200+sebastian2357@users.noreply.github.com>
Date: Wed, 19 Mar 2025 14:23:44 +0100
Subject: [PATCH] fix(content): hero section improvement (#296)

---
 docs/.vuepress/components/ContactForm.vue |  8 +++++++-
 docs/.vuepress/components/ProcessStep.vue |  4 ++--
 docs/.vuepress/components/ProjectCard.vue |  2 +-
 docs/.vuepress/styles/index.scss          |  7 +++++++
 docs/index.md                             | 12 +++++++++---
 5 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/docs/.vuepress/components/ContactForm.vue b/docs/.vuepress/components/ContactForm.vue
index 14d408d..2a583a8 100644
--- a/docs/.vuepress/components/ContactForm.vue
+++ b/docs/.vuepress/components/ContactForm.vue
@@ -80,7 +80,7 @@
           <button
               type="submit"
               :disabled="isSubmitting"
-              class="bg-green-700 text-white py-2 px-6 rounded-md hover:bg-green-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:highlight focus:ring-offset-2 disabled:bg-green-300 disabled:cursor-not-allowed"
+              class="text-white py-2 px-6 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:highlight focus:ring-offset-2"
           >
             <span v-if="isSubmitting">Wird gesendet...</span>
             <span v-else>Nachricht senden</span>
@@ -158,4 +158,10 @@ const handleSubmit = async () => {
 .focus\:highlight:focus {
   --tw-ring-color: var(--highlight-color);
 }
+button {
+  background-color: var(--highlight-color);
+  &:hover {
+    background-color: color-mix(in srgb, var(--highlight-color), black 15%);
+  }
+}
 </style>
\ No newline at end of file
diff --git a/docs/.vuepress/components/ProcessStep.vue b/docs/.vuepress/components/ProcessStep.vue
index d888970..5996aa6 100644
--- a/docs/.vuepress/components/ProcessStep.vue
+++ b/docs/.vuepress/components/ProcessStep.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="grid grid-cols-12 items-start mb-16">
     <div class="col-span-3 text-right pr-8">
-      <span class="text-6xl font-bold highlight-number">{{ number.padStart(2, '0') }}</span>
+      <span class="text-5xl sm:text-6xl font-bold highlight-number">{{ number.padStart(2, '0') }}</span>
     </div>
-    <div class="col-span-9 pt-4">
+    <div class="col-span-9 pt-0 sm:pt-2">
       <h3 class="text-xl font-semibold mb-2">{{ title }}</h3>
       <p class="text-gray-600">{{ description }}</p>
     </div>
diff --git a/docs/.vuepress/components/ProjectCard.vue b/docs/.vuepress/components/ProjectCard.vue
index fa70404..9fac5b0 100644
--- a/docs/.vuepress/components/ProjectCard.vue
+++ b/docs/.vuepress/components/ProjectCard.vue
@@ -1,7 +1,7 @@
 <template>
   <a :href="href">
     <div class="border border-gray-300 rounded-lg p-6">
-      <img :src="image" :alt="title" class="rounded-lg mb-4 w-full h-48 object-cover">
+      <img :src="image" :alt="title" class="rounded-lg mb-4 w-full h-auto object-contain">
       <h3 class="text-xl font-semibold mb-2">{{ title }}</h3>
       <p class="text-gray-600 mb-4">{{ description }}</p>
       <div class="flex flex-wrap gap-2">
diff --git a/docs/.vuepress/styles/index.scss b/docs/.vuepress/styles/index.scss
index f9b8b88..06bcf58 100644
--- a/docs/.vuepress/styles/index.scss
+++ b/docs/.vuepress/styles/index.scss
@@ -24,4 +24,11 @@ h1, h2 {
   max-width: var(--content-width);
   margin: 0 auto;
   padding: 0 2.5rem;
+
+  @media (max-width: 768px) {
+    padding: 0 1.75rem;
+  }
+  @media (max-width: 400px) {
+    padding: 0 1rem;
+  }
 }
diff --git a/docs/index.md b/docs/index.md
index 8eaa87e..b62082e 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -28,8 +28,14 @@ layout: BlankLayout
        style="height: 70vh;">
   </div>
 
+  <!-- XS Mobile gradient -->
+  <div class="absolute left-0 right-0 bottom-0 sm:hidden" 
+       style="height: 80vh; background-image: linear-gradient(to top, #22596c 70%, transparent 100%);">
+  </div>
+
+
   <!-- Content area -->
-  <div class="absolute inset-0 flex flex-col md:justify-start md:pt-45 justify-end pb-16">
+  <div class="absolute inset-0 flex flex-col md:justify-start md:pt-45 justify-end pb-8 md:pb-16">
     <div class="content-width mx-auto px-4 md:px-6">
       <!-- Für Desktop: Normal positioniert mit margin-top -->
       <!-- Für Mobile: Am unteren Rand fixiert ohne margin -->
@@ -37,12 +43,12 @@ layout: BlankLayout
         <div
           role="heading" 
           aria-level="1"
-          class="text-3xl md:text-4xl lg:text-5xl mb-6 text-white font-montserrat leading-tight text-shadow"
+          class="text-3xl md:text-4xl lg:text-5xl mb-6 text-white text-center sm:text-left font-montserrat leading-tight text-shadow"
         >
           Software­entwicklung für eine bessere Welt
         </div>
         <p 
-          class="text-xl md:text-2xl text-white font-sourcesans mb-8 max-w-2xl text-shadow-sm"
+          class="text-xl md:text-2xl text-white text-center sm:text-left font-sourcesans mb-8 max-w-2xl text-shadow-sm"
         >
           Wir sind Softwareentwickler, die deine alternative Vision verstehen und umsetzen. Mit technischer Expertise und persönlicher Betreuung unterstützen wir Projekte, die Positives bewirken.
         </p>