1 files changed, 66 insertions, 0 deletions
diff --git a/docs/components/SocialCardIndex.jinja b/docs/components/SocialCardIndex.jinja
new file mode 100644
index 0000000..54da150
--- /dev/null
+++ b/docs/components/SocialCardIndex.jinja
@@ -0,0 +1,66 @@
+{#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: black;
+      background-color: white
+    }
+    .sc1 > * {
+      position: absolute;
+      left: 100px;
+      width: 900px;
+      text-align: center;
+      overflow: hidden;
+    }
+    .sc1__logo {
+      top: 100px;
+    }
+    .sc1__logo img {
+      display: inline-block;
+      height: 200px;
+      width: auto;
+      margin: 0 auto;
+    }
+    .sc1__description {
+      top: 350px;
+      font-weight: bold;
+      font-size: 60px;
+      line-height: 1.2;
+      letter-spacing: -0.05em;
+      text-align: center;
+    }
+    .sc1__description .g1 {
+      background-image: linear-gradient(to bottom right, #fbbf24, #fb923c);
+      background-clip: text;
+      color: transparent;
+    }
+
+    .sc1__description .g2 {
+      background-image: linear-gradient(to bottom right, #34d399, #3b82f6);
+      background-clip: text;
+      color: transparent;
+    }
+  </style>
+
+  <article class="sc1">
+    <div class="sc1__logo">
+      <img src="/static/img/jinjax-logo.png" />
+    </div>
+    <div class="sc1__description">
+      Super
+      <span class="g1">components powers</span>
+      for your
+      <span class="g2">Jinja templates</span>
+    </div>
+  </article>
+</Layout>