mirror of
https://github.com/IT4Change/IT4C.dev.git
synced 2025-12-13 09:25:49 +00:00
fix(content): hero section improvement (#296)
This commit is contained in:
parent
a6351efa10
commit
2d98da12e9
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"
|
||||
>
|
||||
Softwareentwicklung 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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user