1 files changed, 61 insertions, 0 deletions
diff --git a/docs/theme/SocialCard.jinja b/docs/theme/SocialCard.jinja
new file mode 100644
index 0000000..2fe00be
--- /dev/null
+++ b/docs/theme/SocialCard.jinja
@@ -0,0 +1,61 @@
+{#def page #}
+<Layout
+  title={{ page.title }}
+  description={{page.description }}
+>
+  <style>
+    body {
+      background-color: black;
+    }
+    .sc1 {
+      width: 1200px;
+      height: 630px;
+      margin: 0;
+      font-family: SF Pro Display, system-ui, sans-serif;
+      color: white;
+      background-image: linear-gradient(to bottom, #404faa, #0068b2);
+    }
+    .sc1__wrapper {
+      position: absolute;
+      inset: 60px 90px 90px 60px;
+    }
+    .sc1__wrapper > * {
+      position: absolute;
+      left: 0;
+      max-width: 1060px;
+    }
+    .sc1__logo {
+      top: 0;
+      height: 50px;
+    }
+    .sc1__section {
+      top: 150px;
+      line-height: 1;
+      font-weight: bold;
+      text-transform: uppercase;
+      font-size: 22px;
+      width: 600px;
+    }
+    .sc1__title {
+      top: 180px;
+      line-height: 1;
+      font-weight: bold;
+      font-size: 68px;
+    }
+    .sc1__description {
+      bottom: 0;
+      line-height: 1.4;
+      font-weight: normal;
+      font-size: 22px;
+    }
+  </style>
+
+  <article class="sc1">
+    <div class="sc1__wrapper">
+      <img class="sc1__logo" src="/static/img/jinjax-logo-w.png" />
+      <h2 class="sc1__section">{{ page.section }}</h2>
+      <h1 class="sc1__title">{{ page.title | utils.widont }}</h1>
+      <div class="sc1__description">{{ page.description | utils.widont }}</div>
+    </div>
+  </article>
+</Layout>