Add subsribe to newsletter section (#653)

Author: ngnijland

docs/src/components/SectionHeader.astro

@@ -23,6 +23,8 @@ const { title, subtitle, text, smallTitle } = Astro.props;
     line-height: 1.05556;
     font-weight: 600;
     letter-spacing: -0.006em;
+    text-wrap: pretty;
+    text-wrap: balance;
 
     @media (min-width: 800px) {
       font-size: 4.5rem;

docs/src/components/SubscribeToNewsletter.astro

@@ -0,0 +1,43 @@
+---
+import SectionHeader from "./SectionHeader.astro";
+---
+
+<style>
+  section {
+    margin: 4rem 0;
+
+    @media (min-width: 800px) {
+      margin-top: 8rem;
+      margin-bottom: 8rem;
+
+      text-align: center;
+    }
+  }
+
+  .form-wrapper {
+    margin-top: 1rem;
+  }
+
+  .form {
+    @media (min-width: 800px) {
+      grid-column: 3 / span 8;
+    }
+  }
+</style>
+
+<section>
+  <SectionHeader
+    title="Exclusive Perks for Subscribers"
+    subtitle="Enjoy 30% off RocketSim Pro"
+    smallTitle
+    text="And be the first to discover new features & time-saving tricks."
+  />
+  <div class="grid form-wrapper">
+    <div class="form">
+      <script
+        is:inline
+        data-uid="44112f6fd3"
+        src="https://rocketsim.ck.page/44112f6fd3/index.js"></script>
+    </div>
+  </div>
+</section>

docs/src/pages/index.astro

@@ -10,6 +10,7 @@ import Features from "../components/Features.astro";
 import StatusBar from "../components/StatusBar.astro";
 import TeamInsights from "../components/TeamInsights.astro";
 import SocialMediaMentions from "../components/SocialMediaMentions.astro";
+import SubscribeToNewsletter from "../components/SubscribeToNewsletter.astro";
 
 import logoImage from "../assets/rocketsim-logo.svg";
 ---
@@ -51,6 +52,7 @@ import logoImage from "../assets/rocketsim-logo.svg";
     <Features />
     <TeamInsights />
     <StatusBar />
+    <SubscribeToNewsletter />
     <SocialMediaMentions />
   </main>
 </BaseLayout>