mirror of
https://github.com/IT4Change/IT4C.dev.git
synced 2025-12-13 09:25:49 +00:00
249 lines
8.2 KiB
Markdown
249 lines
8.2 KiB
Markdown
---
|
|
layout: BlankLayout
|
|
---
|
|
|
|
<section class="full-width-section h-screen relative">
|
|
<!-- Desktop background image -->
|
|
<img
|
|
src="/images/hero-bg-desktop.jpg"
|
|
alt="Softwareentwicklung für eine bessere Welt"
|
|
class="w-full h-screen object-cover hidden md:block"
|
|
/>
|
|
|
|
<!-- 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>
|
|
|
|
<div class="w-full h-screen md:hidden relative overflow-hidden">
|
|
<!-- Mobile background image -->
|
|
<img
|
|
src="/images/hero-bg-mobile.jpg"
|
|
alt="Softwareentwicklung für eine bessere Welt"
|
|
class="absolute top-0 left-0 w-full h-auto object-cover max-h-none"
|
|
style="min-width: 100%;"
|
|
/>
|
|
</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"
|
|
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-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">
|
|
<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"
|
|
>
|
|
Software Entwicklung für neue Wege
|
|
</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 ein vielseitiges agil arbeitendes Team, das deine alternative Vision verstehen und umsetzen kann.<br>
|
|
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">
|
|
<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"
|
|
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"
|
|
profileUrl="./team/sebastian-stein.html"
|
|
image="./images/portrait/sebastian-stein.jpg"
|
|
/>
|
|
<TeamMember
|
|
name="Ulf"
|
|
role="Backend, Hosting"
|
|
profileUrl="./team/ulf-gebhardt.html"
|
|
image="./images/portrait/ulf-gebhardt.jpg"
|
|
/>
|
|
<TeamMember
|
|
name="Wolfgang"
|
|
role="Backend"
|
|
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="Ocelot.social ist eine Open-Source Alternative für soziale Netzwerke wie Facebook, Instagram oder TikTok"
|
|
image="./images/projects/ocelot.png"
|
|
:tags="['Social Media']"
|
|
href="/projekte/ocelot.social.html"
|
|
/>
|
|
<ProjectCard
|
|
title="DreamMall.earth"
|
|
description="DreamMall.earth ist eine Video & Projekt Management Plattform"
|
|
image="./images/projects/dreammall.png"
|
|
:tags="['Video-Konferenz', 'Projekt Management']"
|
|
href="/projekte/dreammall.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">
|
|
.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;
|
|
|
|
&: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%);
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|