fixing link in header, initial styling of how does it work section

inspired-consulting · Dec 7, 2023 · 28cdbea · 28cdbea
1 parent f5fe92f
commit 28cdbea
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 77 deletions.
diff --git a/src/css/main.css b/src/css/main.css
@@ -15,10 +15,6 @@ html {
   }
 }
 
-.ts-benefit-section {
-  height: 50rem;
-}
-
 /* Initially hide animated icon */
 .ts-animated-icon {
   display: none;

diff --git a/src/index.html b/src/index.html
@@ -29,21 +29,25 @@ <h1 class="leading-[4.5rem] mt-[-4rem] text-7xl font-bold">
       <button type="button" class="btn-primary h-14 mt-2 tracking-wider bg-primary-900 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="./logos/github-mark-white.png" alt="GitHub Logo" class="w-6 h-6 mx-2">
-          Fork us on GitHub
-        </a>
+        <span class="hover:text-primary-900 underline underline-offset-2 flex items-center">
+          <img src="./logos/github-mark-white.png" alt="GitHub Logo" class="w-6 h-6 mx-1">
+          <a href="https://github.com/">Fork us on GitHub</a>
+        </span>
       </div>
     </div>
   </header>
 
+
+
+  </div>
+
   <!-- PREVIEW WEB APP -->
   <main>
     <section class="container mx-auto mt-[-18rem] mb-24 text-primary-100">
       <div class="grid grid-cols-2 gap-4">
         <div class="mr-12">
           <h2 class="text-4xl mb-8 font-bold">AI-Driven Threat Modeling & Intuitive Design </h2>
-          <hr class="border-t-2 border-secondary-500 w-1/6 my-4">
+          <hr class="border-t-2 border-secondary-500 w-1/6 my-6">
           <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>
         </div>
@@ -52,23 +56,19 @@ <h2 class="text-4xl mb-8 font-bold">AI-Driven Threat Modeling & Intuitive Design
     </section>
 
     <!-- LIST OF BENEFITS -->
-    <section class="w-full h-full pt-20 bg-gray-100 ts-benefit-section">
+    <section class="w-full h-full pt-20 bg-gray-100">
       <h3 class="text-center text-primary-900 mb-4">YOUR BENEFITS</h3>
-      <hr class="border-t-2 border-secondary-500 w-1/6 mx-auto my-4">
-      <h2 class="text-4xl mb-8 font-bold text-center text-primary-900 pt-6">Stay one step ahead of potential threats</h2>
+      <hr class="border-t-2 border-secondary-300 w-40 mx-auto my-4">
+      <h2 class="text-4xl mb-8 font-bold text-center text-primary-900 pt-2">Stay one step ahead of potential threats
+      </h2>
       <div class="flex place-content-center pt-6">
 
         <!-- CARD 1 -->
-        <div class="max-w-sm rounded overflow-hidden bg-gray-100 border-2 border-primary-200 mr-6 ts-hover-trigger">
+        <div class="max-w-sm rounded overflow-hidden bg-gray-100 border-2 border-secondary-300 mr-6 ts-hover-trigger">
           <img src="./img/roboter.png" alt="Roboter Icon" class="w-12 h-12 mx-auto my-6 ts-static-icon">
-         
+
           <!-- Animated GIF Icon (Initially Hidden) -->
           <img src="./img/roboter.gif" alt="Animated Icon" class="w-16 h-16 mx-auto my-4 ts-animated-icon">
-
-          <!-- <svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 mx-auto my-4 text-primary-500" fill="none"
-            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75l-2.489-2.489m0 0a3.375 3.375 0 10-4.773-4.773 3.375 3.375 0 004.774 4.774zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg> -->
           <div class="px-6 py-2">
             <div class="font-bold text-xl mb-2 text-primary-900">Simplified Thread Identification</div>
             <p class="text-gray-700 text-base">
@@ -80,100 +80,151 @@ <h2 class="text-4xl mb-8 font-bold text-center text-primary-900 pt-6">Stay one s
           </div>
         </div>
 
-         <!-- CARD 2 -->
-         <div class="max-w-sm rounded overflow-hidden bg-gray-100 border-2 border-primary-200 mr-6 ts-hover-trigger">
+        <!-- CARD 2 -->
+        <div class="max-w-sm rounded overflow-hidden bg-gray-100 border-2 border-secondary-300 mr-6 ts-hover-trigger">
           <img src="./img/schild.png" alt="Shield Icon" class="w-12 h-12 mx-auto my-6 ts-static-icon">
-         
+
           <!-- Animated GIF Icon (Initially Hidden) -->
           <img src="./img/schild.gif" alt="Animated Icon" class="w-16 h-16 mx-auto my-4 ts-animated-icon">
-
-
-          <!-- <svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 mx-auto my-4 text-primary-500" fill="none"
-            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-            <path stroke-linecap="round" stroke-linejoin="round"
-              d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z" />
-          </svg> -->
           <div class="px-6 py-2">
             <div class="font-bold text-xl mb-2 text-primary-900">Transparent Risks & Management</div>
             <p class="text-gray-700 text-base">
-              Clearly define and manage your security risks and their countermeasures, ensuring informed and strategic decision-making.
+              Clearly define and manage your security risks and their countermeasures, ensuring informed and strategic
+              decision-making.
             </p>
           </div>
           <div class="px-6 pt-4 pb-2">
           </div>
         </div>
 
         <!-- CARD 3 -->
-        <div class="max-w-sm rounded overflow-hidden bg-gray-100 border-2 border-primary-200 ts-hover-trigger">
+        <div class="max-w-sm rounded overflow-hidden bg-gray-100 border-2 border-secondary-300 ts-hover-trigger">
           <img src="./img/zusammenarbeit.png" alt="Collaboration Icon" class="w-12 h-12 mx-auto my-6 ts-static-icon">
-         
+
           <!-- Animated GIF Icon (Initially Hidden) -->
           <img src="./img/zusammenarbeit.gif" alt="Animated Icon" class="w-16 h-16 mx-auto my-4 ts-animated-icon">
-
-          <!-- <svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 mx-auto my-4 text-primary-500" fill="none"
-            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-            <path stroke-linecap="round" stroke-linejoin="round"
-              d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z" />
-          </svg> -->
-
           <div class="px-6 py-2">
             <div class="font-bold text-xl mb-2 text-primary-900">Collaboration & Communication</div>
             <p class="text-gray-700 text-base">
-              Enable effective collaboration across teams for proactive threat management, keeping all stakeholders aligned and informed.
+              Enable effective collaboration across teams for proactive threat management, keeping all stakeholders
+              aligned and informed.
             </p>
           </div>
           <div class="px-6 pt-4 pb-2">
           </div>
         </div>
+      </div>
+    </section>
 
 
-      </div>
+
+    <!-- HOW DOES IT WORK SECTION -->
+
+    <section class="w-full h-full py-20 bg-gray-100">
+      <h3 class="text-center text-primary-900 mb-4">HOW DOES IT WORK</h3>
+      <hr class="border-t-2 border-secondary-300 w-40 mx-auto my-4">
+      <h2 class="text-4xl mb-8 font-bold text-center text-primary-900 pt-2">3 simple steps</h2>
+      <div class="flex place-content-center pt-6">
+
+        <!-- CARD 1 -->
+        <div class="max-w-sm rounded overflow-hidden mr-6 px-6 py-2 border-2 border-secondary-300">
+
+          <!-- Square with SVG -->
+          <div class="bg-primary-200 rounded-md w-8 my-6 text-center mx-auto">
+            <!-- Your SVG code goes here -->
+            <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect width="58" height="58" rx="8" fill="#E1D6F6" />
+              <path d="M31.6374 19.5455V37H27.9471V23.0483H27.8448L23.8477 25.554V22.2812L28.1687 19.5455H31.6374Z"
+                fill="#3F1D7F" />
+            </svg>
+          </div>
+          <div class="font-bold text-xl mb-2 text-primary-900 text-center">Initial Consultation</div>
+          <p class="text-gray-700 pb-6 text-base">
+            Reach out for a preliminary discussion, followed by scheduling our specialized threat modeling workshop. Currently we provide these workshops free of charge!
+          </p>
+        </div>
+
+          <!-- CARD 2 -->
+          <div class="max-w-sm rounded overflow-hidden mr-6 px-6 py-2 border-2 border-secondary-300">
+
+            <!-- Square with SVG -->
+            <div class="bg-primary-200 rounded-md w-8 my-6 text-center mx-auto">
+              <!-- Your SVG code goes here -->
+              <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect width="58" height="58" rx="8" fill="#E1D6F6"/>
+                <path d="M22.3562 37V34.3409L28.5692 28.5881C29.0977 28.0767 29.5408 27.6165 29.8988 27.2074C30.2624 26.7983 30.538 26.3977 30.7255 26.0057C30.913 25.608 31.0067 25.179 31.0067 24.7188C31.0067 24.2074 30.8903 23.767 30.6573 23.3977C30.4244 23.0227 30.1062 22.7358 29.7028 22.5369C29.2994 22.3324 28.842 22.2301 28.3306 22.2301C27.7965 22.2301 27.3306 22.3381 26.9329 22.554C26.5352 22.7699 26.2283 23.0795 26.0124 23.483C25.7965 23.8864 25.6886 24.3665 25.6886 24.9233H22.1857C22.1857 23.7812 22.4442 22.7898 22.9613 21.9489C23.4783 21.108 24.2028 20.4574 25.1346 19.9972C26.0664 19.5369 27.1403 19.3068 28.3562 19.3068C29.6062 19.3068 30.6942 19.5284 31.6204 19.9716C32.5522 20.4091 33.2766 21.017 33.7937 21.7955C34.3107 22.5739 34.5692 23.4659 34.5692 24.4716C34.5692 25.1307 34.4386 25.7812 34.1772 26.4233C33.9215 27.0653 33.4641 27.7784 32.805 28.5625C32.146 29.3409 31.217 30.2756 30.0181 31.3665L27.4698 33.8636V33.983H34.7994V37H22.3562Z" fill="#3F1D7F"/>
+              </svg>
+            </div>
+            <div class="font-bold text-xl mb-2 text-primary-900 text-center">Interactive Workshop</div>
+            <p class="text-gray-700 pb-6 text-base">
+              Participate in a 2-hour hands-on workshop using your system as a case study to create an initial threat
+              model and learn how to effectively use ThreatShield.
+            </p>
+          </div>
+
+          <!-- CARD 3 -->
+          <div class="max-w-sm rounded overflow-hidden mr-6 px-6 py-2 border-2 border-secondary-300">
+
+            <!-- Square with SVG -->
+            <div class="bg-primary-200 rounded-md w-8 my-6 xtext-center mx-auto">
+              <!-- Your SVG code goes here -->
+              <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect width="58" height="58" rx="8" fill="#E1D6F6"/>
+                <path d="M28.4563 37.2386C27.1836 37.2386 26.0501 37.0199 25.0558 36.5824C24.0671 36.1392 23.2859 35.5312 22.712 34.7585C22.1438 33.9801 21.8512 33.0824 21.8342 32.0653H25.5501C25.5728 32.4915 25.712 32.8665 25.9677 33.1903C26.229 33.5085 26.5756 33.7557 27.0075 33.9318C27.4393 34.108 27.9251 34.196 28.4648 34.196C29.0273 34.196 29.5245 34.0966 29.9563 33.8977C30.3881 33.6989 30.7262 33.4233 30.9705 33.071C31.2148 32.7187 31.337 32.3125 31.337 31.8523C31.337 31.3864 31.2063 30.9744 30.945 30.6165C30.6893 30.2528 30.32 29.9687 29.837 29.7642C29.3597 29.5597 28.7915 29.4574 28.1325 29.4574H26.5046V26.7472H28.1325C28.6893 26.7472 29.1808 26.6506 29.6069 26.4574C30.0387 26.2642 30.3739 25.9972 30.6126 25.6562C30.8512 25.3097 30.9705 24.9062 30.9705 24.446C30.9705 24.0085 30.8654 23.625 30.6552 23.2955C30.4506 22.9602 30.1609 22.6989 29.7859 22.5114C29.4165 22.3239 28.9847 22.2301 28.4904 22.2301C27.9904 22.2301 27.533 22.321 27.1183 22.5028C26.7035 22.679 26.3711 22.9318 26.1211 23.2614C25.8711 23.5909 25.7376 23.9773 25.7205 24.4205H22.1836C22.2006 23.4148 22.4876 22.5284 23.0444 21.7614C23.6012 20.9943 24.3512 20.3949 25.2944 19.9631C26.2433 19.5256 27.3143 19.3068 28.5075 19.3068C29.712 19.3068 30.766 19.5256 31.6694 19.9716C32.5728 20.4006 33.2745 20.9915 33.7745 21.7358C34.2802 22.4744 34.5302 23.304 34.5245 24.2244C34.5302 25.2017 34.2262 26.017 33.6126 26.6705C33.0046 27.3239 32.212 27.7386 31.2347 27.9148V28.0511C32.5188 28.2159 33.4961 28.6619 34.1665 29.3892C34.8427 30.1108 35.1779 31.0142 35.1722 32.0994C35.1779 33.0938 34.891 33.9773 34.3114 34.75C33.7376 35.5227 32.945 36.1307 31.9336 36.5739C30.9222 37.017 29.7631 37.2386 28.4563 37.2386Z" fill="#3F1D7F"/>
+              </svg>
+            </div>
+            <div class="font-bold text-xl mb-2 text-primary-900 text-center">Run ThreatShield yourself</div>
+            <p class="text-gray-700 pb-6 xtext-base">
+              Easily set up ThreatShield on your own infrastructure and integrate it into your daily operations, empowering your team to manage threats autonomously.
+            </p>
+          </div> 
+
     </section>
 
-    <article class="bg-gray-100 text-primary-900">
 
 
 
-    </article>
+
+
   </main>
 
   <div class="text-gray-100">
-  <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
-    and risks within their IT systems. Our comprehensive platform enables teams to collaborate seamlessly, whether
-    it's for the entire organization or a specific IT system. Here's how ThreatShield can transform your IT security
-  </p>
+    <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
+      and risks within their IT systems. Our comprehensive platform enables teams to collaborate seamlessly, whether
+      it's for the entire organization or a specific IT system. Here's how ThreatShield can transform your IT security
+    </p>
 
-  <h2 class="mt-3 mb-1">Define Systems</h2>
-  <p>Easily define the technical components, technologies, frameworks, libraries (BOM), and more that make up your
-    IT system.</p>
+    <h2 class="mt-3 mb-1">Define Systems</h2>
+    <p>Easily define the technical components, technologies, frameworks, libraries (BOM), and more that make up your
+      IT system.</p>
 
-  <h2 class="mt-3 mb-1">Capture Assets</h2>
-  <p>Identify and catalog the valuable assets within your IT system that require protection.</p>
+    <h2 class="mt-3 mb-1">Capture Assets</h2>
+    <p>Identify and catalog the valuable assets within your IT system that require protection.</p>
 
-  <h2 class="mt-3 mb-1">Identify Threats</h2>
-  <p>Effortlessly record potential threats that your IT system may face.</p>
+    <h2 class="mt-3 mb-1">Identify Threats</h2>
+    <p>Effortlessly record potential threats that your IT system may face.</p>
 
-  <h2 class="mt-3 mb-1">Derive Risks from Threats</h2>
-  <p>Automatically derive risks from the identified threats, providing you with a clear understanding of potential
-    vulnerabilities.</p>
+    <h2 class="mt-3 mb-1">Derive Risks from Threats</h2>
+    <p>Automatically derive risks from the identified threats, providing you with a clear understanding of potential
+      vulnerabilities.</p>
 
-  <h2 class="mt-3 mb-1">Manage Mitigations</h2>
-  <p>Obtain mitigation strategies to address identified risks.</p>
+    <h2 class="mt-3 mb-1">Manage Mitigations</h2>
+    <p>Obtain mitigation strategies to address identified risks.</p>
 
-  <h2 class="mt-3 mb-1">Generate Reports</h2>
-  <p>Coming soon: Generate reports to share with your team and stakeholders.</p>
+    <h2 class="mt-3 mb-1">Generate Reports</h2>
+    <p>Coming soon: Generate reports to share with your team and stakeholders.</p>
 
-  <h2 class="mt-3 mb-1">AI-Powered Suggestions</h2>
-  <p>Additionally, ThreatShield is powered by AI throughout the process.</p>
-  <p class="my-2">
-    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>
+    <h2 class="mt-3 mb-1">AI-Powered Suggestions</h2>
+    <p>Additionally, ThreatShield is powered by AI throughout the process.</p>
+    <p class="my-2">
+      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>
 
 
-  {{> footer }}
-</div> 
+    {{> footer }}
+  </div>
 
 </body>
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,15 +16,17 @@ module.exports = {
           900: "#150A2A",
         },
         secondary: {
-          100: "#cef9f5",
-          200: "#9df2ec",
+          50: "#f1fcfb",
+          100: "#f1fcfb",
+          200: "#9df2eb",
           300: "#64e4e0",
-          400: "#64e4e0",
-          500: "#64e4e0",
+          400: "#34cdcc",
+          500: "#1bb0b1",
           600: "#138a8e",
-          700: "#146c71",
-          800: "#15555a",
-          900: "#16474b",
+          700: "#146d71",
+          800: "#14575b",
+          900: "#16484b",
+          950: "#06292d",
         },
         gray: {
           100: "#FEFEFF",