From a97a399497520a51a119e9124aa1b1929eb9f7c8 Mon Sep 17 00:00:00 2001
From: Jeesun Kim <jeesunkim@Jeesuns-MBP.localdomain>
Date: Mon, 4 Mar 2024 14:46:12 -0800
Subject: [PATCH] [wip] create account

---
 src/app/(sidebar)/account/create/page.tsx | 26 ++++++++++++++++++++++-
 src/styles/globals.scss                   | 24 +++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx
index 3aa44803..9a580489 100644
--- a/src/app/(sidebar)/account/create/page.tsx
+++ b/src/app/(sidebar)/account/create/page.tsx
@@ -1,5 +1,29 @@
 "use client";
 
+import { Card, Link, Text, Button, Icon } from "@stellar/design-system";
+
+import { NextLink } from "@/components/NextLink";
+
 export default function CreateAccount() {
-  return <div>Create Account</div>;
+  return (
+    <Card>
+      <div className="CardText">
+        <Text size="lg" as="h1" weight="medium">
+          Keypair Generator
+        </Text>
+
+        <Text size="sm" as="p">
+          These keypairs can be used on the Stellar network where one is
+          required. For example, it can be used as an account master key,
+          account signer, and/or as a stellar-core node key.
+        </Text>
+      </div>
+
+      <div className="padding-top-30">
+        <Button size="md" variant="tertiary">
+          Generate keypair
+        </Button>
+      </div>
+    </Card>
+  );
 }
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index c0b6ec4b..bdbba756 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -299,3 +299,27 @@
     margin-bottom: 0 !important;
   }
 }
+
+.IntroCards {
+  display: grid;
+  gap: pxToRem(12px);
+  grid-template-columns: 1fr 1fr;
+
+  .Card {
+    display: flex;
+    flex-direction: column;
+    gap: pxToRem(8px);
+    justify-content: space-between;
+
+    :nth-child(2) {
+      flex: 1;
+    }
+  }
+}
+
+// =============================================================================
+// Margin | Padding
+// =============================================================================
+.padding-top-30 {
+  padding-top: pxToRem(30px);
+}