Skip to content

Commit

Permalink
Flexbox adjustments for better alignment of text and images in sectio…
Browse files Browse the repository at this point in the history 
…n "contact us" and comprimised gif for better performance
  • Loading branch information
“Sophie committed Jul 15, 2024
1 parent 5e60173 commit 60a05f8
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 28 deletions.
2 changes: 1 addition & 1 deletion src/img/ThreatShield.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -509,7 +509,7 @@ <h2 class="text-4xl font-bold text-primary-800 py-2 leading-normal">
</h2>
<p class="text-xl/relaxed leading-relaxed text-primary-800 mt-2">We'd love to hear from you.</p>
<div class="flex justify-center">
<img src="./ThreatShield_files/chatbot.gif" alt="Animated icon" class="w-24 h-24 my-4">
<img src="./ThreatShield_files/chatbot-ezgif.com-speed.gif" alt="Animated icon" class="w-24 h-24 my-4">
</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>Send us an e-mail</span>
Expand Down
Binary file added src/img/chatbot2.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
63 changes: 36 additions & 27 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,20 +124,23 @@
<!-- 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="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">
<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 text-center lg:text-left">
Identify and mitigate potential security threats with ThreatShield's threat modelling service</p>
Expand All @@ -157,19 +160,19 @@ <h1 class="text-4xl/tight lg:text-5xl/tight xl:text-6xl/tight w-full font-bold t
</div>
</div>
</div>
</header>
</header>

<main>

<!-- PREVIEW WEB APP -->

<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="container text-primary-100 px-4 md:px-0 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
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.
Expand All @@ -181,7 +184,7 @@ <h2 class="text-3xl/tight xl:text-4xl/tight w-full font-bold text-center lg:text
</div>
</div>
</section>


<!-- LIST OF BENEFITS -->

Expand Down Expand Up @@ -261,7 +264,7 @@ <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-10 scroll-mt-12">
<div class="container mx-auto px-4 flex flex-col gap-10">
<div class="container mx-auto px-4 md:px-0 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>
Expand Down Expand Up @@ -304,7 +307,8 @@ <h3 class="font-bold text-xl/relaxed text-primary-800 text-left">

<div class="flex flex-col-reverse md:flex-row items-center justify-between gap-8">
<div class="flex justify-end border-primary-700 border-8 rounded bg-primary-700">
<img src="./img/workshop.webp" alt="A team in the office discussing during a threat modeling workshop"
<img src="./img/workshop.webp"
alt="A team in the office discussing during a threat modeling workshop"
class="object-contain" style="max-height:306px">
</div>
<div class="flex flex-col items-center md:items-start gap-6 w-full md:w-1/2">
Expand All @@ -326,20 +330,23 @@ <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-600 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>


<!-- Step 3 -->

<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex flex-col w-full md:w-1/2">
<div class="flex flex-col gap-3">
<div class="flex flex-col md:flex-row items-center md:items-start gap-4">
<svg width="32" height="32" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" style="max-width: 48px;">
<svg width="32" height="32" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg" style="max-width: 48px;">
<rect width="48" height="48" rx="8" fill="#5426AA" />
<path
d="M23.4563 32.2386C22.1836 32.2386 21.0501 32.0199 20.0558 31.5824C19.0671 31.1392 18.2859 30.5312 17.712 29.7585C17.1438 28.9801 16.8512 28.0824 16.8342 27.0653H20.5501C20.5728 27.4915 20.712 27.8665 20.9677 28.1903C21.229 28.5085 21.5756 28.7557 22.0075 28.9318C22.4393 29.108 22.9251 29.196 23.4648 29.196C24.0273 29.196 24.5245 29.0966 24.9563 28.8977C25.3881 28.6989 25.7262 28.4233 25.9705 28.071C26.2148 27.7187 26.337 27.3125 26.337 26.8523C26.337 26.3864 26.2063 25.9744 25.945 25.6165C25.6893 25.2528 25.32 24.9687 24.837 24.7642C24.3597 24.5597 23.7915 24.4574 23.1325 24.4574H21.5046V21.7472H23.1325C23.6893 21.7472 24.1808 21.6506 24.6069 21.4574C25.0387 21.2642 25.3739 20.9972 25.6126 20.6562C25.8512 20.3097 25.9705 19.9062 25.9705 19.446C25.9705 19.0085 25.8654 18.625 25.6552 18.2955C25.4506 17.9602 25.1609 17.6989 24.7859 17.5114C24.4165 17.3239 23.9847 17.2301 23.4904 17.2301C22.9904 17.2301 22.533 17.321 22.1183 17.5028C21.7035 17.679 21.3711 17.9318 21.1211 18.2614C20.8711 18.5909 20.7376 18.9773 20.7205 19.4205H17.1836C17.2006 18.4148 17.4876 17.5284 18.0444 16.7614C18.6012 15.9943 19.3512 15.3949 20.2944 14.9631C21.2433 14.5256 22.3143 14.3068 23.5075 14.3068C24.712 14.3068 25.766 14.5256 26.6694 14.9631C27.5728 15.4006 28.2745 15.9915 28.7745 16.7358C29.2802 17.4744 29.5302 18.304 29.5245 19.2244C29.5302 20.2017 29.2262 21.017 28.6126 21.6705C28.0046 22.3239 27.212 22.7386 26.2347 22.9148V23.0511C27.5188 23.2159 28.4961 23.6619 29.1665 24.3892C29.8427 25.1108 30.1779 26.0142 30.1722 27.0994C30.1779 28.0938 29.891 28.9773 29.3114 29.75C28.7376 30.5227 27.945 31.1307 26.9336 31.5739C25.9222 32.017 24.7631 32.2386 23.4563 32.2386Z"
Expand All @@ -359,14 +366,14 @@ <h3 class="font-bold text-xl/relaxed text-primary-800 text-left">
<img src="./img/mockup-system.webp" alt="Application interface displayed on a computer screen"
class="object-contain sm:max-w-xl w-full" style="max-height:306px">
</div>
</div>
</div>

<div class="flex justify-center w-full">
<a href="https://app.threatshield.eu/users/register" target="_blank"
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>


Expand Down Expand Up @@ -567,22 +574,24 @@ <h2 class="text-4xl/normal text-primary-800 pt-2 font-bold">

<!-- CONTACT US -->

<section id="contact" class="bg-gray-100 pt-20 pb-20">
<section id="contact" class="bg-gray-100 py-10">
<div class="container mx-auto">
<div class="px-4 lg:pr-10 text-center">
<h3 class="text-primary-800 mb-4 uppercase leading-normal">Ready to protect your business?</h3>
<hr class="border-t-2 border-secondary-400 mx-auto w-80 my-4">
<h2 class="text-4xl font-bold text-primary-800 py-2 leading-normal">
<div class="flex flex-col gap-4 text-center px-4 md:px-0">
<h3 class="text-primary-800 uppercase leading-normal">Ready to protect your business?</h3>
<hr class="border-t-2 border-secondary-400 mx-auto w-80">
<h2 class="text-4xl font-bold text-primary-800 leading-normal">
Feel free to reach out
</h2>
<p class="text-xl/relaxed leading-relaxed text-primary-800 mt-2">We'd love to hear from you.</p>
<p class="text-xl/relaxed leading-relaxed text-primary-800">We'd love to hear from you.</p>
<div class="flex justify-center">
<img src="img/chatbot.gif" alt="Animated icon" class="w-24 h-24 my-4">
<img src="img/chatbot2.gif" alt="Animated icon" class="w-16 h-16 lg:w-20 lg:h-20">
</div>
<div class="flex justify-center w-full">
<a href="mailto:[email protected]"
class="w-full sm:w-auto 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>Send us an e-mail</span>
</a>
</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>Send us an e-mail</span>
</a>
</div>
</div>
</section>
Expand Down

0 comments on commit 60a05f8

Please sign in to comment.