From e346afcfb329569504a166b8ec97743d0ba46ad4 Mon Sep 17 00:00:00 2001
From: NateWilliams2 <nathanielj.williams02@gmail.com>
Date: Wed, 8 May 2024 13:34:49 -0400
Subject: [PATCH] Add intro cards

---
 docs/{intro.md => intro.mdx}                  |  11 +-
 src/components/GettingStarted/intro-cards.tsx | 101 ++++++++++++++++++
 2 files changed, 110 insertions(+), 2 deletions(-)
 rename docs/{intro.md => intro.mdx} (80%)
 create mode 100644 src/components/GettingStarted/intro-cards.tsx

diff --git a/docs/intro.md b/docs/intro.mdx
similarity index 80%
rename from docs/intro.md
rename to docs/intro.mdx
index 5ee2ca573..a98a185e1 100644
--- a/docs/intro.md
+++ b/docs/intro.mdx
@@ -1,6 +1,12 @@
 # Getting Started
+import IntroCards from '../src/components/GettingStarted/intro-cards.tsx';
 
-Vocdoni is the most open, secure, and universally verifiable voting protocol, used by hundreds of organizations worldwide. The core of our stack is a powerful [decentralized backend][protocol], including [blockchain][blockchain], [P2P gateway][gateways], and [distributed file storage][ipfs] components. 
+
+Vocdoni is the most open, secure, and universally verifiable voting protocol available, used by hundreds of organizations worldwide. 
+
+<IntroCards />
+
+The core of our stack is a powerful [decentralized backend][protocol], including [blockchain][blockchain], [P2P gateway][gateways], and [distributed file storage][ipfs] components. 
 
 The Vocdoni Protocol layer is accessible via a public [API][api]. This API is great for querying data, but running an election requires some advanced understanding of the protocol. Thus, we recommend integrators use the SDK.
 
@@ -8,6 +14,7 @@ The [Software Development Kit][sdk] is a wrapper for the API and provides develo
 
 The [UI Components][ui-components] library provides various basic React components for Vocdoni elections.
 
+
 :::tip Looking to integrate digital voting into your web application?
 Start with the [SDK Tutorial][tutorial]
 :::
@@ -33,4 +40,4 @@ Metamask is used to sign the transactions that create elections and cast votes.
 [ui-components]: /ui-components
 [tutorial]: /sdk/tutorial
 [sdk-demo]: https://vocdoni.github.io/vocdoni-sdk/
-[metamask]: https://metamask.io/download/
\ No newline at end of file
+[metamask]: https://metamask.io/download/../src/components/GettingStarted/intro-cards.js
\ No newline at end of file
diff --git a/src/components/GettingStarted/intro-cards.tsx b/src/components/GettingStarted/intro-cards.tsx
new file mode 100644
index 000000000..e46cc7452
--- /dev/null
+++ b/src/components/GettingStarted/intro-cards.tsx
@@ -0,0 +1,101 @@
+import styled from 'styled-components';
+import React from 'react';
+import {Link} from 'react-router-dom';
+
+interface ICard {
+  title: string;
+  body: string;
+  href: string;
+}
+
+const cards: ICard[] = [
+  {
+    title: 'SDK',
+    body: 'Full-featured typescript library for interacting with the Vocdoni Protocol',
+    href: 'sdk',
+  },
+  {
+    title: 'API',
+    body: 'HTTPS API that provides access to the Vocdoni voting protocol',
+    href: 'vocdoni-api/vocdoni-api',
+  },
+  {
+    title: 'UI Components',
+    body: 'React/ChakraUI components library for election management & voting',
+    href: 'ui-components',
+  },
+  {
+    title: 'Protocol',
+    body: "Core logic of Vocdoni's blockchain-based voting infrastructure",
+    // The core Vocdoni infrastructure specification,
+    href: 'protocol',
+  },
+];
+
+const Card = ({title = '', body = '', href = ''}: ICard) => {
+  return (
+    <Link to={href}>
+      <CardBox>
+        <CardTitle>{title}</CardTitle>
+        <CardBody>{body}</CardBody>
+      </CardBox>
+    </Link>
+  );
+};
+
+export default function IntroCards(): JSX.Element {
+  return (
+    <>
+      <MainWrapper>
+        <CardsWrapper>
+          {cards.map((card, i) => (
+            <Card
+              key={i}
+              title={card.title}
+              body={card.body}
+              href={card.href}
+            />
+          ))}
+        </CardsWrapper>
+      </MainWrapper>
+    </>
+  );
+}
+
+const MainWrapper = styled.div.attrs({
+  className: 'lg:gap-12 pb-6',
+})``;
+
+const CardsWrapper = styled.div.attrs({
+  className: 'grid md:grid-cols-4 gap-2',
+})``;
+
+const CardBox = styled.div.attrs({
+  className: 'max-w-sm p-5 bg-white shadow-md h-full',
+})`
+  transition: border 0.08s ease-in;
+  background: linear-gradient(
+    202.06deg,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  box-shadow: inset -1px 1px 4px rgba(255, 255, 255, 0.25);
+  filter: drop-shadow(-2px 2px 16px rgba(0, 0, 0, 0.1));
+  backdrop-filter: blur(4px);
+  border-radius: 8px;
+  border: 1px solid transparent;
+  &:hover {
+    border: 1px solid #27af86;
+  }
+`;
+
+const CardTitle = styled.div.attrs({
+  className: 'mb-1 pt-0 text-black font-bold',
+})``;
+
+const CardBody = styled.div.attrs({
+  className: 'font-normal text-sm text-black',
+})`
+text-align:justify 
+text-justify:auto
+`;