Layout and Responsiveness Adjustments

src/img/ThreatShield_files/main.js

@@ -0,0 +1,35 @@
+
+
+window.onscroll = function() {scrollFunction()};
+
+function scrollFunction() {
+  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+    document.getElementById("navbar").style.top = "0";
+  } else {
+    document.getElementById("navbar").style.top = "-64px";
+  }
+}
+
+var navbar = document.getElementById('navbar');
+var oldScroll = window.scrollY;
+
+if(window.innerWidth > 1023) {
+    window.addEventListener('scroll', async function () {
+        if(oldScroll > window.scrollY) {
+            navbar.style.zIndex = 50;
+            navbar.classList.remove('fade-out');
+            navbar.classList.add('fade-in');
+        } else {
+            navbar.classList.remove('fade-in');
+            navbar.classList.add('fade-out');
+            await sleep(500);
+            navbar.style.zIndex = -1;
+        }
+        oldScroll = window.scrollY;
+    });
+}
+
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+

src/index.html

@@ -54,8 +54,8 @@
             <a href="#list-of-benefits" class="block text-gray-100" onclick="closeMobileMenu()">Your benefits</a>
             <a href="#how-does-it-work" class="block text-gray-100" onclick="closeMobileMenu()">How it works</a>
             <a href="#offers" class="block text-gray-100    " onclick="closeMobileMenu()">Offer</a>
-            <a href="#about" class="block text-gray-100" onclick="closeMobileMenu()">About us</a>
-            <a href="#contact" class="block text-gray-100" onclick="closeMobileMenu()">Get in contact</a>
+            <a href="#about" class="block text-gray-100" onclick="closeMobileMenu()">About</a>
+            <a href="#contact" class="block text-gray-100" onclick="closeMobileMenu()">Contact</a>
         </div>
     </nav>
 
@@ -85,12 +85,9 @@
             <a href="#offers"
                 class="block lg:hover:underline lg:hover:underline-offset-8 lg:hover:decoration-2  lg:px-4 lg:py-2">Offer</a>
             <a href="#about"
-                class="block lg:hover:underline lg:hover:underline-offset-8 lg:hover:decoration-2  lg:px-4 lg:py-2">About
-                us</a>
+                class="block lg:hover:underline lg:hover:underline-offset-8 lg:hover:decoration-2  lg:px-4 lg:py-2">About</a>
             <a href="#contact"
-                class="block lg:hover:underline lg:hover:underline-offset-8 lg:hover:decoration-2 lg:px-4 lg:py-2">Get
-                in
-                contact</a>
+                class="block lg:hover:underline lg:hover:underline-offset-8 lg:hover:decoration-2 lg:px-4 lg:py-2">Contact</a>
         </div>
     </nav>
 
@@ -127,31 +124,30 @@
     <!-- HEADER -->
 
     <header class="w-full text-gray-100 font-light relative">
-        <div class="absolute inset-0 z-0"
-            style="background-image: linear-gradient(90deg, rgba(102,69,232,1.00) 8%, rgba(126,73,244,1.00) 53%, rgba(149,74,244,1.00) 89%); background-position: center center; background-size: cover;">
+        <div class="absolute inset-0 z-0" style="background-image: linear-gradient(90deg, rgba(102,69,232,1.00) 8%, rgba(126,73,244,1.00) 53%, rgba(149,74,244,1.00) 89%); background-position: center center; background-size: cover;">
         </div>
         <div class="relative z-10 lg:mx-0 flex flex-col lg:flex-row">
             <div class="hidden lg:flex justify-center items-center w-full lg:w-1/2 h-60vmin bg-cover">
-                <img src="./img/shiba-hero-freigestellt-2.1 Kopie2.webp" alt="Hero image"
-                    class="w-full h-full object-cover overflow-visible" style="max-width: 70%;">
+                <img src="./img/shiba-hero-freigestellt-2.1 Kopie2.webp" alt="Hero image" class="w-full h-full object-cover overflow-visible" style="max-width: 70%;">
             </div>
             <div class="lg:hidden">
                 <img src="./img/shiba-hero3.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
-                    class="text-4xl/tight w-full font-bold pt-6 lg:pt-2 md:text-5xl/tight lg:text-6xl/tight xl:text-7xl/tight">
+            <div class="flex flex-col justify-center gap-8 w-full lg:w-1/2 my-10 xl:my-0 px-4">
+                <h1 class="text-4xl/tight lg:text-5xl/tight xl:text-6xl/tight w-full font-bold text-center lg:text-left">
                     Protect your
                     <span id="changing-word" class="text-primary-700 ts-hero-title">business</span>
-                    <span>from security threats</span>
+                    <span>from security threats</span> 
                 </h1>
-                <p class="text-2xl/normal mt-6 mb-12 md:text-1xl/normal lg:text-3xl/relaxed">
+                <p class="text-2xl/normal text-center lg:text-left">
                     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="font-medium">Join our beta</span>
-                </a>
-                <div class="mt-12 pb-8">
+                <div class="flex justify-center lg:justify-start w-full">
+                    <a href="https://app.threatshield.eu/users/register" target="_blank"
+                        class="w-full sm:w-auto 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 w-full lg:w-auto">
+                        <span class="font-medium">Join our beta</span>
+                    </a>
+                </div>
+                <div class="flex justify-center lg:justify-start">
                     <span class="hover:text-primary-900">
                         <img src="./logos/github-mark-white.png" alt="GitHub Logo" class="w-6 h-6 mx-1 inline-block">
                         <a href="https://github.com/inspired-consulting/threat_shield" target="_blank"
@@ -161,31 +157,31 @@
                 </div>
             </div>
         </div>
-    </header>
-
-
+    </header>    
 
     <main>
 
         <!-- PREVIEW WEB APP -->
 
-        <section id="preview-web-app" class="bg-primary-800">
-            <div class="container py-16 text-primary-100 px-4 md:mx-auto flex flex-col lg:flex-row lg:space-x-4">
-                <div class="lg:w-1/2 lg:flex lg:flex-col lg:justify-center">
-                    <h2 class="text-4xl mb-2 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 leading-relaxed">
+        <section id="preview-web-app" class="bg-primary-800 flex justify-center py-10 scroll-mt-12">
+            <div class="container text-primary-100 px-4 flex flex-col lg:flex-row justify-between gap-8">
+                <div class="w-full lg:w-1/2 flex flex-col gap-4 justify-center">
+                    <h3 class="text-center lg:text-left leading-normal text-gray-100 uppercase">Sneak Peek</h3>
+                    <hr class="border-t-2 border-secondary-500 w-32 lg:w-28 mx-auto lg:mx-0">
+                    <h2 class="text-3xl/tight xl:text-4xl/tight w-full font-bold text-center lg:text-left">
+                        AI-driven threat modeling with intuitive design 
+                    </h2>
+                    <p class="text-xl leading-relaxed text-center lg:text-left">
                         We use AI to provide concrete examples instead of abstract documentation.
                         Our approach ensures easily accessible guidance and actionable recommendations.
                     </p>
                 </div>
-                <div class="lg:w-1/2">
-                    <img src="./img/preview-systems.webp" alt="Preview image of the app interface"
-                        class="mt-12 max-h-full lg:mt-0">
+                <div class="w-full lg:w-1/2 flex justify-center lg:justify-end">
+                    <img src="./img/preview-systems.webp" alt="Preview image of the app interface" class="max-h-full">
                 </div>
             </div>
         </section>
-
+        
 
         <!-- LIST OF BENEFITS -->
 
@@ -264,13 +260,13 @@ <h3 class="font-bold text-xl/relaxed mb-2 text-primary-800 text-center">
 
         <!-- HOW DOES IT WORK -->
 
-        <section id="how-does-it-work" class="w-full bg-primary-200 py-12">
+        <section id="how-does-it-work" class="w-full bg-primary-200 py-10 scroll-mt-12">
             <div class="container mx-auto px-4 flex flex-col gap-10">
                 <div class="flex flex-col gap-4">
                     <h3 class="text-center leading-normal text-primary-800 uppercase">How to ensure your security
                     </h3>
                     <hr class="border-t-2 border-primary-300 w-72 mx-auto">
-                    <h2 class="text-4xl/normal font-bold text-center text-primary-800 mb-4">
+                    <h2 class="text-4xl/normal font-bold text-center text-primary-800 mb-0 lg:mb-4">
                         3 simple steps to start
                     </h2>
                 </div>
@@ -330,8 +326,8 @@ <h3 class="font-bold text-xl/relaxed text-primary-800 text-left">
                                 initial threat model and learn how to effectively use ThreatShield.
                             </p>
                         </div>
-                        <div class="border border-2 border-gray-400 px-2 py-2 rounded-lg text-secondary-700 text-center">
-                            <span class="text-xs/relaxed font-semibold">Be quick: free of charge for first requests</span>
+                        <div class="border border-2 border-gray-400 px-2 py-2 rounded-lg text-secondary-600 text-center">
+                            <span class="text-xs/relaxed font-semibold">Be quick: free of charge for first requests!</span>
                         </div>
                     </div>
                 </div>
@@ -365,14 +361,15 @@ <h3 class="font-bold text-xl/relaxed text-primary-800 text-left">
                     </div>
                 </div>                
 
-                <div class="flex justify-center">
+                <div class="flex justify-center w-full">
                     <a href="https://app.threatshield.eu/users/register" target="_blank"
-                        class="blink bg-primary-500 text-white text-center py-3 px-4 mb-4 rounded hover:bg-primary-700 active:bg-primary-500 lg:mt-8 transition-all duration-300 hover:ease-in">
+                        class="w-full sm:w-auto bg-primary-500 text-white text-center py-3 px-4 rounded hover:bg-primary-700 active:bg-primary-500 transition-all duration-300 hover:ease-in">
                         Join our beta
                     </a>
-                </div>
+                </div>                
         </section>
 
+
         <!-- OFFERS -->
 
         <section id="offers" class="w-full bg-gray-100">