mirror of
https://github.com/IT4Change/IT4C.dev.git
synced 2025-12-13 09:25:49 +00:00
02288fa1a7
* update used nodejsversion to current lts version * refactor: adapt to mobile requirements * linting --------- Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
317 lines
10 KiB
Markdown
317 lines
10 KiB
Markdown
---
|
||
layout: BlankLayout
|
||
---
|
||
|
||
<section class="full-width-section hero-section relative">
|
||
<!-- Desktop background image -->
|
||
<picture class="hidden md:block">
|
||
<source srcset="/images/hero-bg-desktop.webp" type="image/webp">
|
||
<img
|
||
src="/images/hero-bg-desktop.jpg"
|
||
alt="Technologie für den gesellschaftlichen Wandel"
|
||
class="w-full hero-height object-cover"
|
||
/>
|
||
</picture>
|
||
|
||
<!-- Desktop gradient -->
|
||
<div class="absolute inset-0 bg-gradient-to-r from-[#22596c]/100 via-[#22596c]/80 to-transparent dark:from-[#22596c]/100 dark:via-[#22596c]/80 dark:to-transparent hidden md:block" style="width: 65%;"></div>
|
||
|
||
<!-- Mobile background container -->
|
||
<div class="w-full hero-height md:hidden relative overflow-hidden">
|
||
<!-- Mobile background image -->
|
||
<picture class="absolute top-0 left-0 w-full h-full">
|
||
<source srcset="/images/hero-bg-mobile.webp" type="image/webp">
|
||
<img
|
||
src="/images/hero-bg-mobile.jpg"
|
||
alt="Technologie für den gesellschaftlichen Wandel"
|
||
class="absolute top-0 left-0 w-full h-full object-cover"
|
||
/>
|
||
</picture>
|
||
</div>
|
||
|
||
<!-- Mobile gradient -->
|
||
<div class="absolute left-0 right-0 bottom-0 md:hidden bg-gradient-to-t from-[#22596c]/100 via-[#22596c]/100 via-[#22596c]/90 to-transparent dark:from-[#22596c]/100 dark:via-[#22596c]/100 dark:via-[#22596c]/90 dark:to-transparent mobile-gradient">
|
||
</div>
|
||
|
||
<!-- XS Mobile gradient -->
|
||
<div class="absolute left-0 right-0 bottom-0 sm:hidden xs-mobile-gradient">
|
||
</div>
|
||
|
||
<!-- Content area -->
|
||
<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 -->
|
||
<div class="w-full md:w-3/5 lg:w-1/2 z-10 md:mt-0 relative hero-content">
|
||
<div
|
||
role="heading"
|
||
aria-level="1"
|
||
class="text-3xl md:text-4xl lg:text-5xl mb-6 text-white text-center sm:text-left font-montserrat leading-tight text-shadow"
|
||
>
|
||
IT4C ‒ Technologie für den gesellschaftlichen Wandel
|
||
</div>
|
||
<p
|
||
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>
|
||
<div class="flex flex-col sm:flex-row gap-4">
|
||
<a
|
||
href="#kontakt"
|
||
class="hero-button hero-button-primary px-6 py-3 bg-[#ececec] !text-black rounded-full font-medium text-center shadow-md no-underline relative overflow-hidden"
|
||
>
|
||
<span class="relative z-10">Projekt starten</span>
|
||
</a>
|
||
<a
|
||
href="#leistungen"
|
||
class="hero-button hero-button-secondary px-6 py-3 bg-black/20 !text-white rounded-full font-medium text-center border border-white shadow-md no-underline relative overflow-hidden"
|
||
>
|
||
<span class="relative z-10">Unsere Leistungen</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<ContentSection id="leistungen" title="Leistungen">
|
||
<p>
|
||
In unserem <b>IT Team for Change</b> bündeln wir die Expertise engagierter Persönlichkeiten, die in den nachfolgenden Bereichen bewandert sind.
|
||
</p>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-8">
|
||
<ServiceCard
|
||
title="Webentwicklung"
|
||
:items="['Frontend', 'Responsive Design', 'Barrierefreiheit', 'Backend']"
|
||
/>
|
||
<ServiceCard
|
||
title="Hosting"
|
||
:items="['Wordpress', 'Ocelot.social', 'Zugeschnittene Lösungen', 'Nachhaltige Serverinfrastrukturen']"
|
||
/>
|
||
<ServiceCard
|
||
title="Mobile Anwendungen"
|
||
:items="['Android', 'iOS', 'PWA']"
|
||
/>
|
||
<ServiceCard
|
||
title="Beratung & Betreuung"
|
||
:items="['Systemarchitektur', 'DevOps & Prozessbegleitung', 'Monitoring & Security', 'Technische Konzeption', 'Agiles Projektmanagement', 'Nachhaltigkeitsanalyse']"
|
||
/>
|
||
<ServiceCard
|
||
title="Software-Entwicklung"
|
||
:items="['API-Entwicklung', 'Datenbank-Design', 'Performance-Optimierung', 'Deployment-Automatisierung', 'Code-Qualität & Testing']"
|
||
/>
|
||
</div>
|
||
</ContentSection>
|
||
|
||
<ContentSection id="team" title="Team & Werte" backgroundColor="bg-gray-50 dark:bg-gray-800">
|
||
<p>Wir glauben an die Kraft von Technologie für positiven Wandel. Unser Team verbindet technische Expertise mit nachhaltigem Denken und sozialer Verantwortung.</p>
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-10">
|
||
<TeamMember
|
||
name="Hannes"
|
||
role="Backend"
|
||
profileUrl="./team/hannes-heine.html"
|
||
image="./images/portrait/hannes-heine.jpg"
|
||
/>
|
||
<TeamMember
|
||
name="Mathias"
|
||
role="Testing, Entwicklung"
|
||
profileUrl="./team/mathias-lenz.html"
|
||
image="./images/portrait/ml-portrait.jpg"
|
||
/>
|
||
<TeamMember
|
||
name="Max"
|
||
role="Frontend"
|
||
profileUrl="/team/maximilian-harz.html"
|
||
image="./images/portrait/max.jpg"
|
||
/>
|
||
<TeamMember
|
||
name="Moriz"
|
||
role="Backend"
|
||
profileUrl="/team/moriz-wahl.html"
|
||
image="./images/portrait/moriz-wahl.jpg"
|
||
/>
|
||
<TeamMember
|
||
name="Sebastian"
|
||
role="Frontend, UX"
|
||
profileUrl="./team/sebastian-stein.html"
|
||
image="./images/portrait/sebastian-stein.jpg"
|
||
/>
|
||
<TeamMember
|
||
name="Ulf"
|
||
role="Entwicklung, Hosting"
|
||
profileUrl="./team/ulf-gebhardt.html"
|
||
image="./images/portrait/ulf-gebhardt.jpg"
|
||
/>
|
||
<TeamMember
|
||
name="Wolfgang"
|
||
role="Kommunikation, Entwicklung"
|
||
profileUrl="./team/wolfgang-huss.html"
|
||
image="./images/portrait/Wolfgang_Huss.jpeg"
|
||
/>
|
||
</div>
|
||
</ContentSection>
|
||
|
||
<ContentSection id="projekte" title="Projekte">
|
||
<div class="grid md:grid-cols-2 gap-8">
|
||
<ProjectCard
|
||
title="Ocelot.Social"
|
||
description="Eine Open Source Alternative für soziale Netzwerke wie Facebook, Instagram oder TikTok, auch zum selbst Hosten"
|
||
image="./images/projects/ocelot.png"
|
||
:tags="['Social Media']"
|
||
href="/projekte/ocelot.social.html"
|
||
/>
|
||
<ProjectCard
|
||
title="Utopia Map"
|
||
description="Utopia Map ist eine interaktive Karte, die echte Verbindungen stärkt und Zusammenarbeit auf Augenhöhe ermöglicht"
|
||
image="./images/projects/utopia-map-cropped.png"
|
||
:tags="['Mapping', 'Gaming']"
|
||
href="/projekte/utopia.map.html"
|
||
/>
|
||
</div>
|
||
</ContentSection>
|
||
|
||
<ContentSection id="prozess" title="Unser Prozess" backgroundColor="bg-gray-50 dark:bg-gray-800">
|
||
<ProcessStep
|
||
number="1"
|
||
title="Kennenlernen & Vision"
|
||
description="Persönliches Gespräch und detaillierte Bedarfsanalyse"
|
||
/>
|
||
<ProcessStep
|
||
number="2"
|
||
title="Agile Entwicklung"
|
||
description="Technische Konzeption und iterative Umsetzung mit kontinuierlichem Feedback und automatisierten Tests"
|
||
/>
|
||
<ProcessStep
|
||
number="3"
|
||
title="Launch"
|
||
description="Deployment und Übergabe mit ausführlicher Dokumentation"
|
||
/>
|
||
<ProcessStep
|
||
number="4"
|
||
title="Support"
|
||
description="Langfristige Betreuung und Weiterentwicklung"
|
||
/>
|
||
</ContentSection>
|
||
|
||
<ContentSection id="kontakt" title="Kontakt">
|
||
<ContactForm />
|
||
</ContentSection>
|
||
|
||
<style lang="scss">
|
||
/* iOS Safari specific fixes */
|
||
.hero-section {
|
||
/* Fix for iOS Safari viewport height issues */
|
||
min-height: 100vh;
|
||
min-height: 100dvh; /* Dynamic viewport height for modern browsers */
|
||
|
||
/* iOS Safari specific height fallback */
|
||
@supports (-webkit-touch-callout: none) {
|
||
min-height: -webkit-fill-available;
|
||
}
|
||
}
|
||
|
||
.hero-height {
|
||
height: 100vh;
|
||
height: 100dvh; /* Dynamic viewport height for modern browsers */
|
||
|
||
/* iOS Safari specific height */
|
||
@supports (-webkit-touch-callout: none) {
|
||
height: -webkit-fill-available;
|
||
}
|
||
}
|
||
|
||
.mobile-gradient {
|
||
height: 70vh;
|
||
height: 70dvh;
|
||
|
||
@supports (-webkit-touch-callout: none) {
|
||
height: calc(-webkit-fill-available * 0.7);
|
||
}
|
||
}
|
||
|
||
.xs-mobile-gradient {
|
||
height: 80vh;
|
||
height: 80dvh;
|
||
background-image: linear-gradient(to top, #22596c 70%, transparent 100%);
|
||
|
||
@supports (-webkit-touch-callout: none) {
|
||
height: calc(-webkit-fill-available * 0.8);
|
||
}
|
||
}
|
||
|
||
.hero-content {
|
||
/* Prevent content from being cut off on iOS */
|
||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||
|
||
/* Fix for iOS Safari scrolling issues */
|
||
-webkit-transform: translateZ(0);
|
||
transform: translateZ(0);
|
||
}
|
||
|
||
.text-shadow {
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||
|
||
&-sm {
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||
}
|
||
}
|
||
|
||
.hero {
|
||
&-title {
|
||
font-family: 'Montserrat', sans-serif !important;
|
||
font-weight: 700 !important;
|
||
margin: 0 0 1.5rem 0 !important;
|
||
line-height: 1.1 !important;
|
||
}
|
||
|
||
&-button {
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
/* iOS Safari button fix */
|
||
-webkit-appearance: none;
|
||
-webkit-tap-highlight-color: transparent;
|
||
|
||
&:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
border-radius: 9999px;
|
||
opacity: 0;
|
||
transform: scale(0.5);
|
||
transition: transform 0.5s ease, opacity 0.5s ease;
|
||
z-index: 0;
|
||
}
|
||
|
||
&:hover::after {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
&-primary::after {
|
||
background: radial-gradient(circle, rgba(253, 224, 71, 0.3) 0%, rgba(253, 224, 71) 70%, rgba(253, 224, 71) 100%);
|
||
}
|
||
|
||
&-secondary::after {
|
||
background: radial-gradient(circle, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Global iOS Safari fixes */
|
||
@supports (-webkit-touch-callout: none) {
|
||
body {
|
||
/* Fix for iOS Safari bounce scrolling */
|
||
-webkit-overflow-scrolling: touch;
|
||
/* Prevent zoom on input focus */
|
||
-webkit-text-size-adjust: 100%;
|
||
}
|
||
}
|
||
|
||
</style>
|