From d5b62060076270b7bb095b9d83a4355c259d5586 Mon Sep 17 00:00:00 2001
From: miladjamali <jamalimilad60@gmail.com>
Date: Sat, 7 May 2022 19:41:58 +0300
Subject: [PATCH] boiler plate index page little sample

---
 pages/index.tsx                 | 46 ++++++++++++++++++++++++++++++---
 public/images/icons/discord.svg |  3 +++
 2 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100644 public/images/icons/discord.svg

diff --git a/pages/index.tsx b/pages/index.tsx
index d46a461..9900a26 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,11 +1,49 @@
 import { Box } from 'rebass/styled-components'
+import { Card } from './../src/Elements/Card'
+import { Text } from './../src/Elements/Typography'
+import { Button } from './../src/Elements/Button'
+import { Icon } from './../src/Elements/Icon'
 
 const Home = () => {
   return (
-    <Box>
-      <Box>
-        <h1>Zarela</h1>
-      </Box>
+    <Box
+      height={'100vh'}
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Card
+        variant="card.secondary"
+        sx={{
+          width: ['90%', '80%', '50%'],
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Text variant="typography.displayMedium" mb={[4]}>
+          Zarela
+        </Text>
+        <Button
+          variant="primary"
+          size="large"
+          width="100%"
+          href="https://discord.gg/7qgYnj3xZC"
+          target="_blank"
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: [4, 5, 5],
+          }}
+        >
+          <Text variant="typography.titleLarge">Join our community</Text>
+          <Icon src="/images/icons/discord.svg" variant="medium" />
+        </Button>
+      </Card>
     </Box>
   )
 }
diff --git a/public/images/icons/discord.svg b/public/images/icons/discord.svg
new file mode 100644
index 0000000..381cd04
--- /dev/null
+++ b/public/images/icons/discord.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.0894 1.98947C25.0498 1.06863 22.8626 0.390197 20.5759 0.00162999C20.5342 -0.00586923 20.4926 0.0128717 20.4712 0.0503545C20.1899 0.54262 19.8783 1.18482 19.6601 1.68959C17.2005 1.32727 14.7536 1.32727 12.3444 1.68959C12.1262 1.1736 11.8033 0.54262 11.5208 0.0503545C11.4993 0.0141223 11.4577 -0.00461862 11.4161 0.00162999C9.13055 0.388955 6.94341 1.06739 4.90258 1.98947C4.88491 1.99696 4.86977 2.00947 4.85972 2.0257C0.711189 8.12415 -0.425267 14.0727 0.13224 19.9475C0.134763 19.9762 0.15116 20.0037 0.173864 20.0212C2.91095 21.999 5.56228 23.1998 8.16437 23.9956C8.20602 24.0081 8.25014 23.9931 8.27664 23.9594C8.89217 23.1323 9.44086 22.2602 9.9113 21.3431C9.93906 21.2894 9.91256 21.2257 9.85582 21.2044C8.98551 20.8796 8.1568 20.4835 7.35964 20.0337C7.29659 19.9975 7.29154 19.9087 7.34954 19.8663C7.5173 19.7426 7.68509 19.6139 7.84527 19.4839C7.87425 19.4602 7.91464 19.4552 7.94871 19.4702C13.1857 21.8229 18.8554 21.8229 24.0306 19.4702C24.0647 19.454 24.1051 19.459 24.1353 19.4827C24.2955 19.6126 24.4633 19.7426 24.6323 19.8663C24.6903 19.9087 24.6865 19.9975 24.6235 20.0337C23.8263 20.4922 22.9976 20.8796 22.126 21.2032C22.0693 21.2244 22.044 21.2894 22.0718 21.3431C22.5523 22.2589 23.101 23.131 23.7052 23.9582C23.7304 23.9931 23.7758 24.0081 23.8175 23.9956C26.4322 23.1998 29.0835 21.999 31.8206 20.0212C31.8446 20.0037 31.8597 19.9775 31.8622 19.9488C32.5294 13.1568 30.7447 7.25706 27.131 2.02694C27.1221 2.00947 27.107 1.99696 27.0894 1.98947ZM10.6934 16.3704C9.11666 16.3704 7.81751 14.946 7.81751 13.1968C7.81751 11.4476 9.09147 10.0233 10.6934 10.0233C12.3078 10.0233 13.5944 11.4601 13.5692 13.1968C13.5692 14.946 12.2952 16.3704 10.6934 16.3704ZM21.3263 16.3704C19.7497 16.3704 18.4505 14.946 18.4505 13.1968C18.4505 11.4476 19.7244 10.0233 21.3263 10.0233C22.9408 10.0233 24.2274 11.4601 24.2022 13.1968C24.2022 14.946 22.9408 16.3704 21.3263 16.3704Z" fill="white"/>
+</svg>