feat(landing-page): tweak hero section

getsentry · Nov 22, 2023 · 4c4becb · 4c4becb
1 parent 7c5ae00
commit 4c4becb
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 20 deletions.
diff --git a/packages/website/src/components/Hero.astro b/packages/website/src/components/Hero.astro
@@ -33,33 +33,45 @@
     justify-content: center;
     position: relative;
     flex-direction: column;
-    margin-bottom: 4rem;
+    padding-top: max(calc(20vh - 7rem), 0px);
+    padding-bottom: 12rem;
+    min-height: calc(100vh - 54px);
   }
 
   .neon-header {
     color: #fff0;
-    letter-spacing: 12px;
+    letter-spacing: 6px;
     text-shadow:
       0 0 5px #fff0;
     font-weight: 500;
     font-size: 3rem;
     text-align: center;
-    margin-bottom: 0rem;
+    margin-bottom: 1rem;
     line-height: 1.5;
     animation: fade-in 1s ease-in-out 0s forwards, fade-in-neon 1s ease-out 0.5s forwards;
     font-family: "Raleway", sans-serif;
   }
-
+  
   .sub-heading {
-    color: #fff;
-    font-size: 1.5rem;
-    font-weight: 500;
+    color: #fff7;
+    font-size: 1.2rem;
+    font-weight: 400;
     text-align: center;
-    font-weight: 200;
+    max-width: 80%;
     opacity: 0;
+    margin-bottom: 3rem; 
     animation: fade-in 1s ease-in-out 1s forwards;
   }
 
+  .hero-image {
+    width: 100%;
+    margin-bottom: 4rem; 
+    border-radius: 0.5rem;
+    opacity: 0; animation: fade-in 1s ease-in-out 1s forwards;
+  }
+
+
+
   .actions {
     display: flex;
     align-items: center;
@@ -97,26 +109,19 @@
 
   @media (min-width: 768px) {
     .neon-header {
-      font-size: 5rem;
-      letter-spacing: 24px;
+      font-size: 3rem;
+      letter-spacing: 12px;
     }
     .sub-heading {
       letter-spacing: 3px;
     }
   }
 
-  .hero-image {
-    width: 100%; 
-    margin-top: 2rem; 
-    margin-bottom: 2rem; 
-    border-radius: 0.5rem;
-    opacity: 0; animation: fade-in 1s ease-in-out 1s forwards;
-  }
 </style>
 
 <div class="wrapper">
-  <h1 class="neon-header">Spotlight</h1>
-  <div class="sub-heading">The debug toolbar you always wanted</div>
+  <h1 class="neon-header">Easy fullstack debugging</h1>
+  <div class="sub-heading">Spotlight is a highly customizable debug tool embedded in your web app.</div>
   <img src="/images/hero-showcase.png" alt="Spotlight Hero" class="hero-image" />
   <div class="actions">
     <a href="/what-is-spotlight/">Read the docs</a>

diff --git a/packages/website/src/tailwind.css b/packages/website/src/tailwind.css
@@ -7,7 +7,7 @@
 }
 
 .neon-header {
-  @apply font-raleway font-extralight uppercase;
+  @apply font-raleway font-light;
 }
 
 header.header {