Optimized image file sizes and replaced images

src/index.html

@@ -131,7 +131,7 @@
                     class="w-full h-full object-cover overflow-visible" style="max-width: 70%;">
             </div>
             <div class="lg:hidden">
-                <img src="./img/shiba-hero.png" alt="Hero image" class="w-full h-full object-cover">
+                <img src="./img/shiba-hero.webp" alt="Hero image" class="w-full h-full object-cover">
             </div>
             <div class="w-full px-4 my-auto lg:px-8 lg:mx-auto lg:w-1/2">
                 <h1
@@ -144,7 +144,7 @@
                     Identify and mitigate potential security threats with ThreatShield's threat modelling service</p>
                 <a href="https://app.threatshield.eu/users/register" target="_blank"
                     class="block sm:w-full lg:inline bg-secondary-400 text-center tracking-wider text-secondary-900 hover:text-secondary-950 py-4 px-6 rounded hover:bg-secondary-500 active:bg-secondary-600 transition-all duration-300 hover:ease-in">
-                    <span class="align-middle font-medium">Join the Beta</span>
+                    <span class="font-medium">Join the beta</span>
                 </a>
                 <div class="mt-12 pb-8">
                     <span class="hover:text-primary-900">
@@ -166,15 +166,15 @@
 
         <section id="preview-web-app" class="bg-primary-800">
             <div class="container py-24 text-primary-100 px-4 md:mx-auto flex flex-col lg:flex-row">
-                <div class="md:mr-12 lg:items-center">
+                <div class="lg:items-center">
                     <h2 class="text-4xl/normal mb-8 font-bold">AI-Driven Threat Modeling with Intuitive Design </h2>
                     <hr class="border-t-2 border-secondary-500 w-1/4 my-6">
                     <p class="text-xl/loose leading-loose">
                         We use AI to provide concrete examples instead of abstract documentation.
                         Our approach ensures easily accessible guidance and actionable recommendations.</p>
                 </div>
-                <div><img src="./img/preview-web-app.png" alt="Vorschaubild von der Anwendung"
-                        class="mt-4 max-h-full sm:mt-6 lg:pl-4 lg:mt-0">
+                <div><img src="./img/mockup.webp" alt="Vorschaubild von der Anwendung"
+                        class="mt-12 max-h-full lg:pl-4 lg:mt-0">
                 </div>
             </div>
         </section>
@@ -197,7 +197,7 @@ <h2 class="text-4xl/normal mb-8 font-bold text-center text-primary-800 pt-2">
                         class="max-w-sm rounded bg-gray-100 overflow-hidden mb-8 px-6 pb-6 mx-auto w-full border-2 border-secondary-300 lg:mx-0 lg:mb-0 lg:mr-6 ts-hover-trigger">
                         <div class="ts-hover-trigger">
                             <img src="img/roboter.png" alt="Roboter Icon" class="w-12 h-12 mx-auto my-6 ts-static-icon">
-                            <img src="img/roboter.gif" alt="Animated Icon"
+                            <img src="img/roboter-2.gif" alt="Animated Icon"
                                 class="w-16 h-16 mx-auto my-4 ts-animated-icon">
                         </div>
                         <div class="flex flex-col items-center">
@@ -309,8 +309,8 @@ <h3 class="font-bold text-xl/loose mt-6 mb-2 text-primary-800 text-center">
                         </div>
                         <div
                             class="border-dashed border-2 border-secondary-500 px-4 py-2 rounded-md my-4 text-secondary-500 text-center">
-                            <span class="text-xs/loose"><b>Be Quick:</b></span><br>
-                            <b>Free of Charge for First Requests</b>
+                            <span class="text-xs/loose"><b>Be quick:</b></span><br>
+                            Free of charge for rirst requests
                         </div>
                     </div>
 
@@ -528,7 +528,7 @@ <h2 class="text-4xl/normal text-primary-800 pt-2 font-bold">
                     </div>
                 </div>
                 <div class="lg:w-1/2 h-96 bg-contain bg-no-repeat"
-                    style="background-image: url('./img/Shiba-ponting-left-hero.png');">
+                    style="background-image: url('./img/shiba-ponting-left.webp');">
                 </div>
             </div>
         </section>
@@ -549,7 +549,7 @@ <h2 class="text-4xl font-bold text-primary-800 py-2 leading-normal">
                     </div>
                     <a href="mailto:[email protected]"
                         class="block md:inline-block bg-primary-500 text-white tracking-wider py-4 px-6 rounded hover:bg-primary-700 active:bg-primary-500 transition-all duration-300 hover:ease-in">
-                        <span class="align-middle">Send Us an E-mail</span>
+                        <span>Send us an e-mail</span>
                     </a>
                 </div>
             </div>