header design and defined basic color and grays

inspired-consulting · Nov 23, 2023 · 5b3d6f0 · 5b3d6f0
1 parent 01876ef
commit 5b3d6f0
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 26 deletions.
diff --git a/src/github-mark/github-mark-white.png b/src/github-mark/github-mark-white.png
diff --git a/src/github-mark/github-mark-white.svg b/src/github-mark/github-mark-white.svg
diff --git a/src/github-mark/github-mark.png b/src/github-mark/github-mark.png
diff --git a/src/github-mark/github-mark.svg b/src/github-mark/github-mark.svg
diff --git a/src/img/header-bg-gardient.svg b/src/img/header-bg-gardient.svg
diff --git a/src/index.html b/src/index.html
@@ -11,22 +11,24 @@
   <link rel="stylesheet" href="./css/main.css" />
 </head>
 
-<body class="bg-black ms-8">
-  <header class="container mx-auto py-20 text-legendary-500 font-light tracking-wide">
-    <span class="text-xl leading-3 ">The legendary</span>
-    <h1 class="leading-[4rem] text-7xl font-bold">
-      <span class="tracking-tight">Threat</span><span class="ms-1 tracking-normal">Shield 2</span>
-    </h1>
-    <div class="mt-6">
-      <p class="text-2xl leading-6">It's a perilous world.</p>
-      <p class="text-2xl">Equip yourself with this shield and safeguard your systems.</p>
-      <span class="btn-primary">Text</span>
-      <span class="btn-secondary">Text</span>
+<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>
+      </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>
     </div>
   </header>
 
 
-  <main class="container mx-auto text-legendary-200">
+  <main class="container mx-auto text-primary-200">
 
     <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

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -4,21 +4,27 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        legendary: {
-          50: "#eff2fe",
-          100: "#e2e6fd",
-          200: "#cbd1fa",
-          300: "#acb3f5",
-          400: "#8788ee",
-          500: "#756ee6",
-          600: "#6553d8",
-          700: "#5744be",
-          800: "#47399a",
-          900: "#3d357a",
-          950: "#241f47",
+        primary: {
+          100: "#F8F6FB",
+          200: "#E1D6F6",
+          300: "#A583E5",
+          400: "#8759DD",
+          500: "#6930D4",
+          600: "#5426AA",
+          700: "#3F1D7F",
+          800: "#2A1355",
+          900: "#150A2A",
         },
-        sophie: {
-          100: "#fff000",
+        gray: {
+          100: "#FEFEFF",
+          200: "#D7D8DF",
+          300: "#C2C5D0",
+          400: "#AEB1C0",
+          500: "#9396A7",
+          600: "#7E8291",
+          700: "#626571",
+          800: "#393B42",
+          900: "#1A1B1F",
         }
       },
     },