Add social media mentions (#650)

Author: ngnijland

docs/src/components/SectionHeader.astro

@@ -3,9 +3,10 @@ interface Props {
   title: string;
   subtitle?: string;
   text?: string;
+  smallTitle?: boolean;
 }
 
-const { title, subtitle, text } = Astro.props;
+const { title, subtitle, text, smallTitle } = Astro.props;
 ---
 
 <style>
@@ -32,6 +33,10 @@ const { title, subtitle, text } = Astro.props;
     color: var(--text-color);
   }
 
+  .title--small {
+    font-size: 1.75rem;
+  }
+
   p {
     margin: 2rem 0 0;
 
@@ -45,7 +50,12 @@ const { title, subtitle, text } = Astro.props;
 
 <header class="grid">
   <div>
-    <h3 class:list={["title", { "title--dim": !!subtitle }]}>
+    <h3
+      class:list={[
+        "title",
+        { "title--dim": !!subtitle, "title--small": smallTitle },
+      ]}
+    >
       {title}
     </h3>
     {subtitle ? <h4 class:list={["title"]}>{subtitle}</h4> : null}

docs/src/components/SocialMediaMentions.astro

@@ -0,0 +1,26 @@
+---
+import SectionHeader from "./SectionHeader.astro";
+---
+
+<style>
+  .mentions {
+    margin-top: 3rem;
+  }
+</style>
+
+<section>
+  <SectionHeader
+    title="Join Thousands Of Productive Developers"
+    subtitle="See what others say about RocketSim on Social media"
+    smallTitle
+  />
+  <div class="grid mentions">
+    <div
+      class="senja-embed"
+      data-id="7b8ef1aa-201a-401a-a9d3-99fdf5325311"
+      data-lazyload="false"
+    >
+    </div>
+    <script is:inline src="https://static.senja.io/dist/platform.js"></script>
+  </div>
+</section>

docs/src/pages/index.astro

@@ -9,6 +9,7 @@ import Reviews from "../components/Reviews.astro";
 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 logoImage from "../assets/rocketsim-logo.svg";
 ---
@@ -50,5 +51,6 @@ import logoImage from "../assets/rocketsim-logo.svg";
     <Features />
     <TeamInsights />
     <StatusBar />
+    <SocialMediaMentions />
   </main>
 </BaseLayout>