improved header and created initial structure of the preview section

inspired-consulting · Nov 24, 2023 · 2de5e35 · 2de5e35
1 parent 5b3d6f0
commit 2de5e35
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git a/src/img/preview-web-app.png b/src/img/preview-web-app.png
diff --git a/src/index.html b/src/index.html
@@ -1,3 +1,6 @@
+<!-- EINRÜCKEN OPT+ SHIFT + F -->
+<!-- AUSKOMMENTIEREN CMD + SHIFT + 7 -->
+
 <!DOCTYPE html>
 <html lang="en">
 
@@ -11,24 +14,40 @@
   <link rel="stylesheet" href="./css/main.css" />
 </head>
 
-<body class="bg-black tracking-normal leading-normal">
-  <header class="w-full py-20 text-gray-100 font-light tracking-wide bg-gradient-to-r from-violet-500 to-fuchsia-500">
-    <div class="container mx-auto">
-      <h1 class="leading-[4.5rem] text-7xl font-bold">
-        <span class="tracking-normal ">Protect your business from security threats</span>
+<!-- HEADER -->
+
+<body class="bg-primary-900 tracking-normal leading-normal">
+  <header class="w-full h-full my-60 text-gray-100 font-light tracking-wide">
+    <img src="./img/header-bg-gardient.svg" alt=""
+      class="w-full h-full object-cover object-center absolute inset-0 z-0">
+    <div class="container mx-auto relative z-10">
+      <h1 class="leading-[4.5rem] mt-[-4rem] text-7xl font-bold">
+        <span class="tracking-normal">Protect your business from security threats</span>
       </h1>
-        <p class="text-2xl my-6">Identify and mitigate potential security threats with ThreatShield's threat modelling service</p>
-        <button type="button" class="btn-primary tracking-wider bg-primary-600 hover:bg-primary-500 h-14">Want to learn more about us? Send us an email</button>
-        <div class="mt-5">
-          <a href="https://github.com/" class="text-primary-900 hover:text-primary-700 underline underline-offset-2">Fork us on GitHub
-            <img src="/src/github-mark/github-mark-white.png" alt="GitHub Logo" class="w-6 h-6 mr-2">
-          </a>
-        </div>
+      <p class="text-2xl my-6">Identify and mitigate potential security threats with ThreatShield's threat modelling
+        service</p>
+      <button type="button" class="btn-primary h-14 mt-2 tracking-wider bg-primary-700 hover:bg-primary-800">Want to
+        learn more about us? Send us an email.</button>
+      <div class="mt-7">
+        <a href="https://github.com/" class="hover:text-primary-900 underline underline-offset-2 flex items-center">
+          <img src="./github-mark/github-mark-white.png" alt="GitHub Logo" class="w-6 h-6 mr-2">
+          Fork us on GitHub
+        </a>
+      </div>
     </div>
   </header>
 
+  <!-- PREVIEW WEB APP -->
+  <main class="container mx-auto text-primary-100">
+    <h2 class="text-4xl mb-8 font-bold">AI-Driven Threat Modeling & Intuitive Design </h2>
+      <p class="text-lg">We use AI to provide concrete examples instead of abstract documentation. Our approach ensures easily accessible guidance and actionable recommendations</p>
 
-  <main class="container mx-auto text-primary-200">
+
+
+
+      <img src="./img/preview-web-app.png" class="mt-6" alt="Organisationsseite von ThreatShield">
+
+  </main>
 
     <h2 class="mt-3 mb-1">Enhance Your IT Security with ThreatShield</h2>
     <p>At ThreatShield, we empower businesses and organizations to effectively identify, evaluate, and manage threats
@@ -62,7 +81,7 @@ <h2 class="mt-3 mb-1">AI-Powered Suggestions</h2>
       Join the ranks of organisations that trust ThreatShield to bolster their IT security. Take advantage of our
       AI-driven platform and structured approach to safeguarding your digital assets.
     </p>
-  </main>
+
 
   {{> footer }}