Merge pull request #79 from chronicleprotocol/devJ

Add getting started page

Author: biancabuzea200

docs/Developers/start.md

@@ -0,0 +1,67 @@
+---
+sidebar_position: 1
+---
+import CallToActionButton from '@site/src/components/CallToActionButton';
+
+# Getting Started
+## How do I start?
+
+<div>
+  <CallToActionButton
+    style={{
+      display: 'inline-block !important',
+    }}
+    icon="material-symbols:counter-1"
+    color="black"
+    target="_blank"
+    link="Guides/whitelistAddress"
+    text="Explore Chronicle Oracles on Testnet"
+  />
+
+{' '}
+
+<div
+  style={{
+    display: 'flex',
+    justifyContent: 'center',
+    fontSize: '3em',
+  }}
+>
+  <p>↓</p>
+</div>
+
+{' '}
+
+<CallToActionButton
+  icon="material-symbols:counter-2"
+  color="black"
+  target="_blank"
+  link="https://chroniclelabs.org/dashboard"
+  text="Integrate Chronicle Oracles on Mainnet"
+/>
+
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'center',
+      fontSize: '3em',
+    }}
+  >
+    <p>↓</p>
+  </div>
+</div>
+
+<CallToActionButton
+  icon="material-symbols:counter-3"
+  color="black"
+  target="_blank"
+  link="https://forms.gle/EANjn7THKKieSYaF7"
+  text="Request a New Oracle/Chain"
+/>
+Currently, Chronicle Oracles provide real-time data to smart contract applications on nine chains. More ecosystems are coming soon!
+
+To get started, check out the [Getting Read Access to Contracts](docs/Developers/Guides/whitelistAddress.md) guide to learn how to integrate Chronicle Oracles into your dApp.
+
+Once you become familiar with the Testnet, get in touch to request access to the Chronicle Oracles on Mainnet. Chronicle contracts use a whitelist for read protection, so the addresses used for consuming the Oracle data must be whitelisted first. On the Testnet, you can whitelist yourself.
+
+If you want to request an Oracle that is not yet integrated, you could do so using [this form](https://forms.gle/EANjn7THKKieSYaF7) or by writing us a message on [Discord](https://discord.com/invite/CjgvJ9EspJ) via the 🆘｜support channel. 

docs/Developers/testnet.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: 2
 ---
 
 # Testnet Addresses

docusaurus.config.js

@@ -8,6 +8,7 @@ import {themes as prismThemes} from 'prism-react-renderer';
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
+  plugins: ['docusaurus-plugin-sass'],
   title: 'Chronicle Docs',
   tagline: 'Cost-efficient. Verifiable Data.',
   favicon: 'img/favicon.ico',

package.json

@@ -17,13 +17,17 @@
     "@cookbookdev/docsbot": "^4.21.5",
     "@docusaurus/core": "3.0.1",
     "@docusaurus/preset-classic": "3.0.1",
+    "@iconify/react": "^5.0.2",
     "@markprompt/docusaurus-theme-search": "^0.26.1",
     "@mdx-js/react": "^3.0.0",
+    "acorn-import-assertions": "^1.9.0",
     "clsx": "^2.0.0",
+    "docusaurus-plugin-sass": "^0.2.5",
     "prism-react-renderer": "^2.3.0",
     "pushfeedback-react": "^0.1.40",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "sass": "^1.77.8"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.0.1",

src/components/CallToActionButton/CallToActionButton.module.scss

@@ -0,0 +1,37 @@
+.ctaContainer {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+  
+  .ctaButton {
+    // background-color: var(--color-cta-background);
+    background-color: #84E39E;
+    border-radius: 40px;
+    padding: 10px 20px;
+    max-width: 500px;
+    margin-bottom: 30px;
+    border: #123723 solid 2px;
+  
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  
+    transition: all 200ms ease-out 10ms;
+
+    color: white;
+    
+    &:hover {
+      box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.1);
+      transform: scale(1.05);
+      border: #0a2313 solid 1px;
+      text-decoration: none;
+    }
+  
+    a:hover {
+      color: white !important;
+    }
+  }

src/components/CallToActionButton/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import styles from './CallToActionButton.module.scss';
+
+import { Icon } from '@iconify/react';
+
+export default function CallToActionButton({
+  bgColor,
+  color,
+  link,
+  text,
+  icon,
+  target,
+}) {
+  return (
+    <div className={styles.ctaContainer}>
+      <a
+        style={{ backgroundColor: bgColor, display: 'flex' }}
+        className={styles.ctaButton}
+        href={link}
+        target={target}
+      >
+        <Icon
+          icon={icon}
+          style={{ width: '1.75em', height: '1.75em', marginRight: '0.5em' }}
+        />
+        <strong style={{ color: color }}>{text}</strong>
+      </a>
+    </div>
+  );
+}