Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pivot website content and tech stack to target website development for small businesses

Browse Source
This commit is contained in:
DanielS
2026-06-30 23:15:20 +02:00
parent c29497eae4
commit 79745eb127
7 changed files with 94 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/About.astro
View File

@@ -15,28 +15,28 @@ import { FaEye, FaRocket, FaHandshake } from 'react-icons/fa';
<div class="fade-in-section opacity-0 translate-y-8 transition-all duration-1000 ease-out">
<h2 class="text-xs font-bold tracking-widest text-brand-cyan uppercase mb-3">Unternehmensprofil</h2>
<h3 class="text-4xl md:text-5xl font-bold text-brand-primary dark:text-white mb-6">
Wir schlagen die Brücke zwischen Business und modernster IT.
Wir machen Webdesign einfach und bezahlbar für Kleinbetriebe.
</h3>
<p class="text-gray-600 dark:text-gray-300 text-lg leading-relaxed mb-6 font-light">
N&D i-t SOLUTIONS wurde gegründet, um mittelständischen Unternehmen IT-Dienstleistungen auf Enterprise-Niveau anzubieten. Wir verknüpfen fundierte technologische Expertise mit strategischem Verständnis für Ihre Geschäftsprozesse.
N&D i-t SOLUTIONS wurde gegründet, um kleinen Unternehmen, Handwerkern und Dienstleistern eine professionelle Online-Präsenz zu ermöglichen. Wir bieten erstklassige Websites ohne die unerschwinglichen Kosten großer Agenturen.
</p>
<p class="text-gray-600 dark:text-gray-300 text-lg leading-relaxed mb-8 font-light">
Unser Team besteht aus zertifizierten Cloud-Architekten, erfahrenen Full-Stack-Entwicklern und passionierten IT-Security-Spezialisten.
Unser Fokus liegt auf schnellen Ladezeiten, optimaler Bedienung auf dem Smartphone (Mobile First) und lokaler Auffindbarkeit bei Google.
</p>
<!-- Fun facts -->
<div class="grid grid-cols-3 gap-6 text-center">
<div class="p-4 rounded-2xl bg-white/40 dark:bg-white/5 border border-black/5 dark:border-white/5 backdrop-blur-sm">
<span class="block text-3xl sm:text-4xl font-extrabold bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">100%</span>
<span class="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider">Erfolgsquote</span>
<span class="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider">Zufriedenheit</span>
</div>
<div class="p-4 rounded-2xl bg-white/40 dark:bg-white/5 border border-black/5 dark:border-white/5 backdrop-blur-sm">
<span class="block text-3xl sm:text-4xl font-extrabold bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">24/7</span>
<span class="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider">Bereitschaft</span>
<span class="block text-3xl sm:text-4xl font-extrabold bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">48h</span>
<span class="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider">Feedback-Zeit</span>
</div>
<div class="p-4 rounded-2xl bg-white/40 dark:bg-white/5 border border-black/5 dark:border-white/5 backdrop-blur-sm">
<span class="block text-3xl sm:text-4xl font-extrabold bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">15+</span>
<span class="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider">Tech-Experten</span>
<span class="block text-3xl sm:text-4xl font-extrabold bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">50+</span>
<span class="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider">Webprojekte</span>
</div>
</div>
</div>
@@ -53,7 +53,7 @@ import { FaEye, FaRocket, FaHandshake } from 'react-icons/fa';
<div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Unsere Mission</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed font-light">
Wir machen komplexe IT-Herausforderungen beherrschbar und machen Ihr Business agil, skalierbar und absolut ausfallsicher.
Wir verhelfen lokalen Betrieben zu einer erstklassigen Online-Präsenz, die neue Kunden anzieht und Ihre Marke perfekt widerspiegelt.
</p>
</div>
</div>
@@ -68,7 +68,7 @@ import { FaEye, FaRocket, FaHandshake } from 'react-icons/fa';
<div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Unsere Vision</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed font-light">
Eine Welt, in der B2B-Unternehmen durch modernste Cloud-Native Technologien und Softwarelösungen ihr volles Potenzial ausschöpfen können.
Eine digitale Landschaft, in der auch kleine Händler und lokale Handwerker die gleichen digitalen Chancen haben wie Großkonzerne.
</p>
</div>
</div>
@@ -83,7 +83,7 @@ import { FaEye, FaRocket, FaHandshake } from 'react-icons/fa';
<div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Unser Versprechen</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed font-light">
Keine Knebelverträge, keine unfertigen Insellösungen. Nur ehrliche Partnerschaft auf Augenhöhe und erstklassige Ergebnisse.
Keine versteckten monatlichen Gebühren oder Bindungen. Ihre Website gehört zu 100% Ihnen – mit ehrlichem Support auf Augenhöhe.
</p>
</div>
</div>

2
src/components/Footer.astro
View File

@@ -13,7 +13,7 @@ const currentYear = new Date().getFullYear();
N&D <span class="bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">i-t SOLUTIONS</span>
</a>
<p class="mt-2 text-xs text-gray-500 max-w-sm">
Ihr Partner für zukunftssichere IT-Dienstleistungen, Softwareentwicklung und IT-Sicherheit.
Ihr Partner für professionelles Webdesign, Website-Entwicklung und lokale SEO für Kleinbetriebe & KMU.
</p>
</div>

4
src/components/Hero.astro
View File

@@ -37,7 +37,7 @@ import { FaArrowRight } from 'react-icons/fa';
<!-- Neon badge -->
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-brand-cyan/30 bg-brand-cyan/5 text-brand-cyan text-xs font-semibold uppercase tracking-widest mb-6 animate-bounce">
<span class="w-2 h-2 rounded-full bg-brand-cyan animate-ping"></span>
IT-Consulting & Development
Webdesign & Entwicklung
</div>
<!-- Title with cyan/magenta highlights -->
@@ -46,7 +46,7 @@ import { FaArrowRight } from 'react-icons/fa';
</h1>
<p class="text-lg md:text-2xl text-gray-300 mb-10 max-w-2xl mx-auto font-light drop-shadow-md">
Zukunftssichere IT-Dienstleistungen und modernste Softwareentwicklung für Ihr Unternehmen.
Moderne, schnelle und bezahlbare Websites für Kleinbetriebe, Handwerker & KMU.
</p>
<!-- Glowing CTA Button -->

123
src/components/Services.astro
View File

@@ -14,28 +14,28 @@
Maßgeschneiderte Lösungen für digitale Exzellenz
</h3>
<p class="mt-4 text-lg text-gray-600 dark:text-gray-400">
Wir begleiten Ihr Unternehmen auf dem Weg der digitalen Transformation mit zukunftssicheren IT-Infrastrukturen und Software.
Wir begleiten Ihren Betrieb Schritt für Schritt zur perfekten Website für mehr Kunden und Anfragen.
</p>
</div>
<!-- Flip Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Card 1: Cloud Infrastruktur -->
<!-- Card 1: Firmenwebseiten -->
<div class="w-full h-80 group perspective cursor-pointer">
<div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
<!-- Front -->
<div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
<div>
<div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
<!-- Cloud Icon with stroke animation -->
<!-- Home/Website Icon -->
<svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path>
</svg>
</div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Cloud-Infrastruktur</h4>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Firmenwebseiten</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Skalierbare Multi-Cloud-Lösungen (AWS & Azure) für maximale Flexibilität, Verfügbarkeit und Kostenkontrolle.
Individuelle Homepages als digitale Visitenkarte für Ihr Unternehmen, optimiert für alle mobilen Endgeräte.
</p>
</div>
<span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
@@ -45,12 +45,12 @@
<!-- Back -->
<div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-cyan/90 to-brand-primary text-white border border-brand-cyan/30 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
<div>
<h4 class="text-xl font-bold mb-4">Cloud & DevOps</h4>
<h4 class="text-xl font-bold mb-4">Firmenwebseiten</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ AWS, Azure, Google Cloud</li>
<li class="flex items-center gap-2">✓ Infrastructure as Code (Terraform)</li>
<li class="flex items-center gap-2">✓ CI/CD Pipelines (GitHub Actions)</li>
<li class="flex items-center gap-2">✓ Kubernetes & Docker Container</li>
<li class="flex items-center gap-2">✓ Responsive Webdesign (Mobile First)</li>
<li class="flex items-center gap-2">✓ Extrem schnelle Ladezeiten</li>
<li class="flex items-center gap-2">✓ DSGVO-konform (Cookie-Consent etc.)</li>
<li class="flex items-center gap-2">✓ Modernste Web-Tech (Astro & Tailwind)</li>
</ul>
</div>
<a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-magenta hover:text-white transition-colors duration-300">
@@ -60,21 +60,21 @@
</div>
</div>
<!-- Card 2: Softwareentwicklung -->
<!-- Card 2: Landingpages -->
<div class="w-full h-80 group perspective cursor-pointer">
<div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
<!-- Front -->
<div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
<div>
<div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
<!-- Code Icon with stroke animation -->
<!-- Cursor Icon -->
<svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 7.827 5.176-3.243.681.381 2.29z"></path>
</svg>
</div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Softwareentwicklung</h4>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Landingpages</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Maßgeschneiderte Webanwendungen, APIs und mobile Apps entwickelt mit modernsten Frameworks.
Zielgerichtete Webseiten für Google- oder Social-Media-Kampagnen zur effektiven Neukundengewinnung.
</p>
</div>
<span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
@@ -84,12 +84,12 @@
<!-- Back -->
<div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-purple-900 to-brand-primary text-white border border-brand-magenta/30 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
<div>
<h4 class="text-xl font-bold mb-4">Individuelle Software</h4>
<h4 class="text-xl font-bold mb-4">Landingpages</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ React, Vue, Next.js & Astro</li>
<li class="flex items-center gap-2">✓ Node.js & Go Backend APIs</li>
<li class="flex items-center gap-2">✓ Mobile Apps (React Native)</li>
<li class="flex items-center gap-2">✓ Datenbanken (Postgres, Redis)</li>
<li class="flex items-center gap-2">✓ Conversion-Rate Optimierung (CRO)</li>
<li class="flex items-center gap-2">✓ Klare Handlungsaufforderungen (CTA)</li>
<li class="flex items-center gap-2">✓ A/B Testings & Web-Analysen</li>
<li class="flex items-center gap-2">✓ Schnelles Laden für geringe Absprünge</li>
</ul>
</div>
<a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-cyan hover:text-brand-primary transition-colors duration-300">
@@ -99,21 +99,21 @@
</div>
</div>
<!-- Card 3: IT-Security & Compliance -->
<!-- Card 3: Onlineshops -->
<div class="w-full h-80 group perspective cursor-pointer">
<div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
<!-- Front -->
<div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
<div>
<div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
<!-- Shield Icon with stroke animation -->
<!-- ShoppingBag Icon -->
<svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"></path>
</svg>
</div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">IT-Security & Audits</h4>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Onlineshops</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Umfassende Sicherheitsanalysen, Penetration Testing und ISO 27001-Audits zum Schutz Ihrer Unternehmensdaten.
Einfache, performante E-Commerce-Lösungen für Händler, um Produkte online erfolgreich zu vermarkten.
</p>
</div>
<span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
@@ -123,12 +123,12 @@
<!-- Back -->
<div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-magenta/90 to-brand-primary text-white border border-brand-magenta/30 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
<div>
<h4 class="text-xl font-bold mb-4">Sicherheit & Compliance</h4>
<h4 class="text-xl font-bold mb-4">Onlineshops</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ Penetration Testing & Audits</li>
<li class="flex items-center gap-2">✓ ISO 27001 & TISAX Vorbereitung</li>
<li class="flex items-center gap-2">✓ Vulnerability Scans</li>
<li class="flex items-center gap-2">✓ Security-Awareness Trainings</li>
<li class="flex items-center gap-2">✓ Einfache Produkt- & Bestellpflege</li>
<li class="flex items-center gap-2">✓ PayPal, Stripe & Klarna Integration</li>
<li class="flex items-center gap-2">✓ Skalierbare E-Commerce-Systeme</li>
<li class="flex items-center gap-2">✓ Optimierter Checkout-Prozess</li>
</ul>
</div>
<a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-cyan hover:text-brand-primary transition-colors duration-300">
@@ -138,21 +138,21 @@
</div>
</div>
<!-- Card 4: Managed IT-Services -->
<!-- Card 4: Wartung & Support -->
<div class="w-full h-80 group perspective cursor-pointer">
<div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
<!-- Front -->
<div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
<div>
<div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
<!-- Cpu Icon with stroke animation -->
<!-- Wrench/Screwdriver Icon -->
<svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 6.75v10.5a2.25 2.25 0 002.25 2.25zm.75-12h9v9h-9v-9z"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.31-.374.711-.6 1.154-.63M11.42 15.17a3 3 0 11-4.088-4.088M12.73 8.21l-.504-.504a1.5 1.5 0 112.122-2.122l.504.504m-2.122 2.122A2.99 2.99 0 0012 8.25m0 0a3.01 3.01 0 01-1.127-.224l-3.23-3.23a1.5 1.5 0 10-2.122 2.122l3.23 3.23C8.63 10.3 8.6 10.65 8.77 11"></path>
</svg>
</div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Managed IT-Services</h4>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Wartung & Support</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Rund-um-die-Uhr-Support, Systemmonitoring und proaktive Wartung Ihrer IT-Systeme für reibungslose Abläufe.
Wir kümmern uns um Updates, Backups, Sicherheit und inhaltliche Anpassungen Ihrer Website.
</p>
</div>
<span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
@@ -162,12 +162,12 @@
<!-- Back -->
<div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-primary/95 to-purple-950 text-white border border-brand-cyan/20 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
<div>
<h4 class="text-xl font-bold mb-4">Rund-um-die-Uhr IT</h4>
<h4 class="text-xl font-bold mb-4">Wartung & Support</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ 24/7 Monitoring & Alerting</li>
<li class="flex items-center gap-2">✓ Microsoft 365 / Google Workspace</li>
<li class="flex items-center gap-2">✓ Backup & Disaster Recovery</li>
<li class="flex items-center gap-2">✓ MDM & MDM-Hardware Management</li>
<li class="flex items-center gap-2">✓ Regelmäßige System- & Plugin-Updates</li>
<li class="flex items-center gap-2">✓ Tägliche Sicherheits-Backups</li>
<li class="flex items-center gap-2">✓ Schutz vor Spam & Hackerangriffen</li>
<li class="flex items-center gap-2">✓ Schnelle inhaltliche Änderungen</li>
</ul>
</div>
<a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-magenta hover:text-white transition-colors duration-300">
@@ -177,21 +177,22 @@
</div>
</div>
<!-- Card 5: IT-Consulting & Strategie -->
<!-- Card 5: Lokale SEO & Google -->
<div class="w-full h-80 group perspective cursor-pointer">
<div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
<!-- Front -->
<div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
<div>
<div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
<!-- UserGroup Icon with stroke animation -->
<!-- MapPin/Magnifying Glass Icon -->
<svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.109A11.386 11.386 0 0110.089 20a11.386 11.386 0 01-4.912-.763v-.109m0 0a3.001 3.001 0 00-3.758 3.848 5.25 5.25 0 0010.233-2.33M3 16.128c0-1.113.285-2.16.786-3.07M15 7.5a3 3 0 11-6 0 3 3 0 016 0zm6 2.25a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"></path>
</svg>
</div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">IT-Consulting & Strategie</h4>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Lokale SEO & Google</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Herstellerunabhängige Beratung, Machbarkeitsstudien und Digitalisierungsfahrpläne für Ihr Business.
Verbessern Sie Ihre Sichtbarkeit bei lokalen Google-Suchanfragen für mehr Anfragen aus Ihrer Region.
</p>
</div>
<span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
@@ -201,12 +202,12 @@
<!-- Back -->
<div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-cyan/90 to-purple-950 text-white border border-brand-cyan/30 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
<div>
<h4 class="text-xl font-bold mb-4">Strategische Beratung</h4>
<h4 class="text-xl font-bold mb-4">Lokale SEO</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ IT-Audits & Bestandsaufnahme</li>
<li class="flex items-center gap-2">✓ Digitalisierungsberatung</li>
<li class="flex items-center gap-2">✓ Architektur-Reviews (B2B)</li>
<li class="flex items-center gap-2">✓ Budget- & Wirtschaftlichkeitsanalysen</li>
<li class="flex items-center gap-2">✓ Google My Business Optimierung</li>
<li class="flex items-center gap-2">✓ Keyword-Recherche für Ihre Nische</li>
<li class="flex items-center gap-2">✓ OnPage & OffPage Optimierung</li>
<li class="flex items-center gap-2">✓ Ladezeiten-Optimierung (Web Vitals)</li>
</ul>
</div>
<a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-magenta hover:text-white transition-colors duration-300">
@@ -216,21 +217,21 @@
</div>
</div>
<!-- Card 6: Data & AI Solutions -->
<!-- Card 6: UI/UX Webdesign -->
<div class="w-full h-80 group perspective cursor-pointer">
<div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
<!-- Front -->
<div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
<div>
<div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
<!-- PresentationChart Icon with stroke animation -->
<!-- Swatch/Color Icon -->
<svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v16.5m0 0L21 12m-17.25 7.5L21 7.5m-17.25 12h16.5"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.076-3.077a2.25 2.25 0 00-3.182-3.182L13.1 7.27a15.996 15.996 0 00-4.648 4.764m3.122 3.122l-1.22 4.88m0 0a3 3 0 00-5.78 1.128c0 .285.023.57.067.85"></path>
</svg>
</div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Data & AI Solutions</h4>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">UI/UX Webdesign</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Intelligente Datenauswertungen, künstliche Intelligenz und maschinelles Lernen zur Optimierung von Geschäftsprozessen.
Individuelle Design-Entwürfe, die auf Ihre Markenidentität abgestimmt sind und Besucher begeistern.
</p>
</div>
<span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
@@ -240,12 +241,12 @@
<!-- Back -->
<div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-magenta/80 to-brand-primary text-white border border-brand-magenta/20 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
<div>
<h4 class="text-xl font-bold mb-4">Künstliche Intelligenz</h4>
<h4 class="text-xl font-bold mb-4">Webdesign</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ AI-Integration (OpenAI, Gemini)</li>
<li class="flex items-center gap-2">✓ Business Intelligence (BI Dashboards)</li>
<li class="flex items-center gap-2">✓ Automatisierte Datenverarbeitung</li>
<li class="flex items-center gap-2">✓ Predictive Analytics</li>
<li class="flex items-center gap-2">✓ Einzigartige, moderne Designs</li>
<li class="flex items-center gap-2">✓ Abgestimmtes Farb- & Schriftkonzept</li>
<li class="flex items-center gap-2">✓ Intuitive Benutzerführung (UI/UX)</li>
<li class="flex items-center gap-2">✓ Erstellung von Figma-Prototypen</li>
</ul>
</div>
<a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-cyan hover:text-brand-primary transition-colors duration-300">

36
src/components/TechStack.astro
View File

@@ -5,29 +5,25 @@ import {
SiAstro,
SiNodedotjs,
SiTypescript,
SiDocker,
SiKubernetes,
SiTerraform,
SiTailwindcss,
SiPostgresql,
SiGo,
SiPython
SiPostgresql,
SiHtml5,
SiCss,
SiJavascript,
SiFigma
} from 'react-icons/si';
import { FaAws } from 'react-icons/fa';
const technologies = [
{ name: 'React', icon: SiReact, color: 'text-[#61DAFB]', desc: 'Frontend-Bibliothek für interaktive UIs' },
{ name: 'Astro', icon: SiAstro, color: 'text-[#FF5D01]', desc: 'Modernes Web-Framework für Performance' },
{ name: 'Node.js', icon: SiNodedotjs, color: 'text-[#339933]', desc: 'Skalierbare Server-Laufzeitumgebung' },
{ name: 'TypeScript', icon: SiTypescript, color: 'text-[#3178C6]', desc: 'Typsicheres JavaScript für stabilen Code' },
{ name: 'Docker', icon: SiDocker, color: 'text-[#2496ED]', desc: 'Containerisierung für konsistente Deployments' },
{ name: 'Kubernetes', icon: SiKubernetes, color: 'text-[#326CE5]', desc: 'Orchestrierung von containerbasierten Apps' },
{ name: 'AWS', icon: FaAws, color: 'text-[#FF9900]', desc: 'Umfassende, sichere Cloud-Infrastruktur' },
{ name: 'Terraform', icon: SiTerraform, color: 'text-[#844FBA]', desc: 'Infrastructure as Code zur Automatisierung' },
{ name: 'Tailwind CSS', icon: SiTailwindcss, color: 'text-[#06B6D4]', desc: 'Utility-First CSS für modernes Design' },
{ name: 'PostgreSQL', icon: SiPostgresql, color: 'text-[#4169E1]', desc: 'Zuverlässiges, relationales Datenbanksystem' },
{ name: 'Go', icon: SiGo, color: 'text-[#00ADD8]', desc: 'Schnelle & effiziente Backend-Entwicklung' },
{ name: 'Python', icon: SiPython, color: 'text-[#3776AB]', desc: 'Künstliche Intelligenz und Datenanalyse' },
{ name: 'Astro', icon: SiAstro, color: 'text-[#FF5D01]', desc: 'Modernes, ultraschnelles Web-Framework' },
{ name: 'React', icon: SiReact, color: 'text-[#61DAFB]', desc: 'Für interaktive UI-Komponenten' },
{ name: 'TypeScript', icon: SiTypescript, color: 'text-[#3178C6]', desc: 'Typsichere Entwicklung für stabilen Code' },
{ name: 'Tailwind CSS', icon: SiTailwindcss, color: 'text-[#06B6D4]', desc: 'Für modernes, responsive CSS-Design' },
{ name: 'JavaScript', icon: SiJavascript, color: 'text-[#F7DF1E]', desc: 'Standard für dynamische Web-Funktionen' },
{ name: 'HTML5', icon: SiHtml5, color: 'text-[#E34F26]', desc: 'Strukturierte und barrierefreie Inhalte' },
{ name: 'CSS3', icon: SiCss, color: 'text-[#1572B6]', desc: 'Modernste Styling- & Layout-Verfahren' },
{ name: 'Figma', icon: SiFigma, color: 'text-[#F24E1E]', desc: 'Pixelgenaue UI/UX Entwürfe und Mockups' },
{ name: 'Node.js', icon: SiNodedotjs, color: 'text-[#339933]', desc: 'Serverseitige Schnittstellen und Tools' },
{ name: 'PostgreSQL', icon: SiPostgresql, color: 'text-[#4169E1]', desc: 'Datenbanksystem für dynamische Inhalte' },
];
---
@@ -41,7 +37,7 @@ const technologies = [
<h2 class="text-xs font-bold tracking-widest text-brand-magenta uppercase mb-3">Tech-Stack</h2>
<h3 class="text-4xl font-bold text-white">Unsere Werkzeuge für Ihren Erfolg</h3>
<p class="mt-4 text-gray-400 text-sm">
Wir setzen auf modernste, zukunftssichere Technologien, um robuste, performante und skalierbare Systeme zu schaffen.
Wir nutzen modernste und bewährte Technologien, um schnelle, sichere und optimal auffindbare Webseiten zu entwickeln.
</p>
</div>
</div>

2
src/layouts/Layout.astro
View File

@@ -4,7 +4,7 @@ interface Props {
description?: string;
}
const { title, description = "Zukunftssichere IT-Dienstleistungen für Ihr Unternehmen. N&D i-t SOLUTIONS bietet Leistungsübersicht, Cloud-Architekturen, IT-Sicherheit und Softwareentwicklung." } = Astro.props;
const { title, description = "Professionelles Webdesign & moderne Websites für Kleinbetriebe, Handwerker und Selbstständige. N&D i-t SOLUTIONS erstellt Ihre Homepage bezahlbar und schnell." } = Astro.props;
---
<!doctype html>

2
src/pages/index.astro
View File

@@ -9,7 +9,7 @@ import Contact from '../components/Contact.astro';
import Footer from '../components/Footer.astro';
---
<Layout title="N&D i-t SOLUTIONS | Zukunftssichere IT-Dienstleistungen">
<Layout title="N&D i-t SOLUTIONS | Professionelles Webdesign & Websites für Kleinbetriebe">
<Navbar />
<main>
<Hero />