Spaces:

Eckhardt12
/

pixelperfect-persuaders

Running

App Files Files Community

Eckhardt12 commited on Oct 17, 2025

Commit

76d8c37

verified ·

1 Parent(s): 1c33d20

bilder einarbeiten

Browse files

Files changed (1) hide show

index.html +18 -10

index.html CHANGED Viewed

@@ -26,16 +26,18 @@
     </style>
 </head>
 <body class="font-sans antialiased text-gray-800">
-<!-- Hero Section -->
-    <section class="hero-gradient text-white py-20">
-        <div class="container mx-auto px-6 text-center">
             <h1 class="text-4xl md:text-5xl font-bold mb-6">Webdesign, das verkauft – nicht nur gut aussieht</h1>
             <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Deine Website ist mehr als eine digitale Visitenkarte – sie ist dein wichtigster Vertriebsmitarbeiter.</p>
             <a href="#contact" class="bg-white text-blue-600 font-bold px-8 py-4 rounded-full hover:bg-gray-100 transition inline-block cta-pulse">Jetzt Gespräch vereinbaren</a>
         </div>
     </section>
-    <!-- Trust Indicators -->
     <div class="bg-gray-50 py-8">
         <div class="container mx-auto px-6">
             <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
@@ -54,7 +56,6 @@
             </div>
         </div>
     </div>
     <!-- Selling Websites Section -->
     <section id="services" class="py-16 bg-white">
         <div class="container mx-auto px-6">
@@ -64,6 +65,7 @@
                     <div class="text-blue-500 mb-4">
                         <i data-feather="eye" class="w-10 h-10"></i>
                     </div>
                     <h3 class="text-xl font-bold mb-3">Professioneller Erster Eindruck</h3>
                     <p class="text-gray-600">Wir gestalten Websites, die sofort Vertrauen aufbauen und professionell wirken - vom ersten Klick an.</p>
                 </div>
@@ -71,6 +73,7 @@
                     <div class="text-blue-500 mb-4">
                         <i data-feather="trending-up" class="w-10 h-10"></i>
                     </div>
                     <h3 class="text-xl font-bold mb-3">Konversionsoptimiert</h3>
                     <p class="text-gray-600">Jedes Element ist darauf ausgelegt, Besucher zu Kunden zu machen - klar, fokussiert und überzeugend.</p>
                 </div>
@@ -78,19 +81,22 @@
                     <div class="text-blue-500 mb-4">
                         <i data-feather="shield" class="w-10 h-10"></i>
                     </div>
                     <h3 class="text-xl font-bold mb-3">Technisch einwandfrei</h3>
                     <p class="text-gray-600">Schnelle Ladezeiten, perfekte Mobiloptimierung und DSGVO-Konformität als Standard.</p>
                 </div>
             </div>
         </div>
     </section>
     <!-- Why Section -->
     <section id="about" class="py-16 bg-gray-50">
         <div class="container mx-auto px-6">
             <h2 class="text-3xl font-bold text-center mb-12">Warum unsere Webseiten funktionieren</h2>
             <div class="max-w-4xl mx-auto">
-                <div class="grid md:grid-cols-2 gap-8 mb-8">
                     <div class="bg-white p-6 rounded-lg shadow-sm">
                         <h3 class="font-bold text-xl mb-3 flex items-center">
                             <i data-feather="smartphone" class="text-blue-500 mr-2"></i>
@@ -144,13 +150,15 @@
             </div>
         </div>
     </section>
     <!-- For Whom Section -->
     <section class="py-16 bg-gray-50">
         <div class="container mx-auto px-6">
             <h2 class="text-3xl font-bold text-center mb-12">Für wen ist das?</h2>
             <div class="max-w-3xl mx-auto text-center">
-                <p class="text-xl mb-8">Ideal für Selbstständige, Start-ups und kleine Unternehmen, die online Kunden gewinnen wollen – ohne unnötigen Ballast.</p>
                 <p class="text-lg font-medium">Wenn du Ergebnisse statt Spielereien willst, bist du hier richtig.</p>
             </div>
         </div>

     </style>
 </head>
 <body class="font-sans antialiased text-gray-800">
+    <!-- Hero Section -->
+    <section class="hero-gradient text-white py-20 relative overflow-hidden">
+        <div class="absolute inset-0">
+            <img src="http://static.photos/technology/1920x1080/10" alt="Modernes Webdesign" class="w-full h-full object-cover opacity-20">
+        </div>
+        <div class="container mx-auto px-6 text-center relative z-10">
             <h1 class="text-4xl md:text-5xl font-bold mb-6">Webdesign, das verkauft – nicht nur gut aussieht</h1>
             <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Deine Website ist mehr als eine digitale Visitenkarte – sie ist dein wichtigster Vertriebsmitarbeiter.</p>
             <a href="#contact" class="bg-white text-blue-600 font-bold px-8 py-4 rounded-full hover:bg-gray-100 transition inline-block cta-pulse">Jetzt Gespräch vereinbaren</a>
         </div>
     </section>
+<!-- Trust Indicators -->
     <div class="bg-gray-50 py-8">
         <div class="container mx-auto px-6">
             <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
             </div>
         </div>
     </div>
     <!-- Selling Websites Section -->
     <section id="services" class="py-16 bg-white">
         <div class="container mx-auto px-6">
                     <div class="text-blue-500 mb-4">
                         <i data-feather="eye" class="w-10 h-10"></i>
                     </div>
+                    <img src="http://static.photos/office/640x360/1" alt="Professionelles Webdesign" class="w-full h-48 object-cover rounded-lg mb-4">
                     <h3 class="text-xl font-bold mb-3">Professioneller Erster Eindruck</h3>
                     <p class="text-gray-600">Wir gestalten Websites, die sofort Vertrauen aufbauen und professionell wirken - vom ersten Klick an.</p>
                 </div>
                     <div class="text-blue-500 mb-4">
                         <i data-feather="trending-up" class="w-10 h-10"></i>
                     </div>
+                    <img src="http://static.photos/finance/640x360/2" alt="Konversionsoptimierung" class="w-full h-48 object-cover rounded-lg mb-4">
                     <h3 class="text-xl font-bold mb-3">Konversionsoptimiert</h3>
                     <p class="text-gray-600">Jedes Element ist darauf ausgelegt, Besucher zu Kunden zu machen - klar, fokussiert und überzeugend.</p>
                 </div>
                     <div class="text-blue-500 mb-4">
                         <i data-feather="shield" class="w-10 h-10"></i>
                     </div>
+                    <img src="http://static.photos/technology/640x360/3" alt="Technische Umsetzung" class="w-full h-48 object-cover rounded-lg mb-4">
                     <h3 class="text-xl font-bold mb-3">Technisch einwandfrei</h3>
                     <p class="text-gray-600">Schnelle Ladezeiten, perfekte Mobiloptimierung und DSGVO-Konformität als Standard.</p>
                 </div>
             </div>
         </div>
     </section>
     <!-- Why Section -->
     <section id="about" class="py-16 bg-gray-50">
         <div class="container mx-auto px-6">
             <h2 class="text-3xl font-bold text-center mb-12">Warum unsere Webseiten funktionieren</h2>
+            <div class="flex justify-center mb-12">
+                <img src="http://static.photos/workspace/1024x576/4" alt="Webdesign Arbeitsplatz" class="rounded-lg shadow-md w-full max-w-3xl">
+            </div>
             <div class="max-w-4xl mx-auto">
+<div class="grid md:grid-cols-2 gap-8 mb-8">
                     <div class="bg-white p-6 rounded-lg shadow-sm">
                         <h3 class="font-bold text-xl mb-3 flex items-center">
                             <i data-feather="smartphone" class="text-blue-500 mr-2"></i>
             </div>
         </div>
     </section>
     <!-- For Whom Section -->
     <section class="py-16 bg-gray-50">
         <div class="container mx-auto px-6">
             <h2 class="text-3xl font-bold text-center mb-12">Für wen ist das?</h2>
+            <div class="flex justify-center mb-8">
+                <img src="http://static.photos/people/640x360/5" alt="Zielgruppe" class="rounded-lg shadow-md">
+            </div>
             <div class="max-w-3xl mx-auto text-center">
+<p class="text-xl mb-8">Ideal für Selbstständige, Start-ups und kleine Unternehmen, die online Kunden gewinnen wollen – ohne unnötigen Ballast.</p>
                 <p class="text-lg font-medium">Wenn du Ergebnisse statt Spielereien willst, bist du hier richtig.</p>
             </div>
         </div>