fix(content): hero section improvement (#296)

This commit is contained in:
sebastian2357 2025-03-19 14:23:44 +01:00 committed by GitHub
parent a6351efa10
commit 2d98da12e9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 26 additions and 7 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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">

View File

@ -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;
}
}

View File

@ -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>