updated onboarding

src/js-components/Advantages.js

@@ -0,0 +1,59 @@
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import React from 'react';
+
+
+import OutwardArrowIcon from '@site/static/img/icons/outward_arrow.svg'
+import InfoIcon from '@site/static/img/icons/info.svg'
+import CodeIcon from '@site/static/img/icons/code.svg'
+import OpenBookIcon from '@site/static/img/icons/open_book.svg'
+
+const advantageItems = [
+  {
+    title: 'Lowest Borrow Rates.',
+  },
+  {
+    title: 'More assets, higher LTVs.',
+  },
+  {
+    title: 'Fixed rates for fixed terms.',
+  },
+];
+
+function AdvantageContent(advantageItem) {
+  const { title } = advantageItem;
+  return (
+    <div className={clsx('card')}>
+      <div className={clsx('card__body')}>
+        <div className={clsx(styles.advantageHeader)}>
+          <div>
+            <InfoIcon className={clsx(styles.advantageIcon)} role="img" />
+            <div></div>
+          </div>
+          <h4>{title}</h4>
+        </div>
+      </div>
+    </div >
+  )
+}
+
+function Advantage(advantageItem) {
+  return (
+    <div className={clsx('col col--4 ')}>
+      <AdvantageContent {...advantageItem} />
+    </div >
+  )
+};
+export default function Advantages() {
+  return (
+    <section>
+      <div className="container">
+        <div className="row">
+          {advantageItems.map((props, idx) => (
+            <Advantage key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section >
+  );
+}

src/js-components/Features.js

@@ -5,12 +5,47 @@ import React from 'react';
 
 import OutwardArrowIcon from '@site/static/img/icons/outward_arrow.svg'
 import InfoIcon from '@site/static/img/icons/info.svg'
-import CodeIcon from '@site/static/img/icons/code.svg'
+import XLogo from "@site/static/img/x_logo.svg";
+import DiscordLogo from "@site/static/img/discord_logo.svg";
+import AppLogo from "@site/static/img/app_logo.svg";
 import OpenBookIcon from '@site/static/img/icons/open_book.svg'
 
 
 
 const featureItems = [
+  {
+    title: 'Stay Updated',
+    Icon: XLogo,
+    description: (
+      <>
+        Follow us on Twitter to get the most recent updates on product, partnerships, and opportunties on Loopscale! 
+      </>
+    ),
+    external_url: "https://x.com/LoopscaleLabs",
+    disabled: false
+  },
+  {
+    title: 'Access Alpha',
+    Icon: DiscordLogo,
+    description: (
+      <>
+        Jump in the Discord to ask questions, learn about the future of the Loopscale ecosystem, and more.
+      </>
+    ),
+    external_url: "https://discord.gg/loopscale",
+    disabled: false
+  },
+  {
+    title: 'Use Loopscale',
+    Icon: AppLogo,
+    description: (
+      <>
+        Jump on the app and start lending or borrowing. Rack up points to stay as far ahead as you can.
+      </>
+    ),
+    external_url: "https://app.loopscale.com",
+    disabled: false
+  },
   {
     title: 'What is Loopscale',
     Icon: InfoIcon,
@@ -31,20 +66,7 @@ const featureItems = [
       </>
     ),
     slug: "/user-guides/create-an-account",
-    disabled: true
-
-  },
-  {
-    title: 'Loopscale Protocol',
-    Icon: CodeIcon,
-    description: (
-      <>
-        Learn about the architecture of the Loopscale Protocol smart contracts through guided examples.
-      </>
-    ),
-    slug: "/protocol",
-    disabled: true
-
+    disabled: false
   },
 ];
 function Tag({ text }) {
@@ -69,23 +91,29 @@ function FeatureContent(featureItem) {
 
 function Feature(featureItem) {
   const { slug, disabled } = featureItem;
+  const colSize = featureItem.small ? 'col col--4 ' : 'col col--6 ';
   return (
-    <div className={clsx('col col--4 ')}>
+    <div className={clsx(colSize)}>
       {
         disabled ? <FeatureContent {...featureItem} /> :
           <a target="_self" href={slug}><FeatureContent {...featureItem} /></a>
-
       }
     </div >
   )
 };
+
 export default function Features() {
   return (
     <section>
       <div className="container">
         <div className="row">
-          {featureItems.map((props, idx) => (
-            <Feature key={idx} {...props} />
+          {featureItems.slice(0,3).map((props, idx) => (
+            <Feature key={idx} {...{...props, small: true}} />
+          ))}
+        </div>
+        <div className="row">
+          {featureItems.slice(3,5).map((props, idx) => (
+            <Feature key={idx} {...{...props, small: false}} />
           ))}
         </div>
       </div>

src/js-components/GettingStarted.js

@@ -0,0 +1,44 @@
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import React from 'react';
+import connect from "@site/static/img/docs/onboarding-cards/connect.png"
+import points from "@site/static/img/docs/onboarding-cards/points.png"
+import borrow from "@site/static/img/docs/onboarding-cards/borrow.png"
+import OutwardArrowIcon from '@site/static/img/icons/outward_arrow.svg'
+
+const onboardingSteps = [
+    {
+        imgPath: connect,
+    },
+    {
+        imgPath: points
+    },
+    {
+        imgPath: borrow
+    },
+]
+
+const OnboardingStep = (stepDetails) => {
+    const { imgPath } = stepDetails;
+
+    return (
+        <div className={clsx('card', styles.product)}>
+            <OutwardArrowIcon className={clsx(styles.productArrowIcon)} role="img" />
+            <img src={imgPath} className={clsx(styles.productImage)} />
+        </div>
+    )
+};
+
+export default function GettingStarted() {
+    return (
+        <div className="container">
+            <div className="row">
+                {onboardingSteps.map(productItem =>
+                    <div className={clsx('col col--4')}>
+                        <OnboardingStep {...productItem} />
+                    </div>)
+                }
+            </div>
+        </div>
+    );
+}

src/js-components/Home.js

@@ -1,18 +1,18 @@
 import clsx from 'clsx';
 import React from 'react';
-import { Features, Resources } from '@site/src/js-components';
-import SearchBar from '@theme/SearchBar'
+import { Features, GettingStarted } from '@site/src/js-components';
 import styles from './styles.module.css';
+import Advantages from './Advantages';
 
 function Header() {
   return (
     <div className={clsx("container")}>
       <div className={clsx("col col--8 col--offset-2", styles.header)}>
-        <h1>Loopscale Docs</h1>
-        <p className={clsx(styles.subtitle)}>
-          Loopscale provides market-driven, modular credit infrastructure for the next generation of capital markets.
-        </p>
-        <SearchBar />
+        <h1>Loopscale</h1>
+          <p className={clsx(styles.subtitle)}>
+            Loopscale is the next generation of onchain borrowing and lending platform that uses an orderbook instead of a curve to determine interest rate.
+          </p>
+          <Advantages />
       </div>
     </div>
   )
@@ -22,14 +22,10 @@ export default function Home() {
   return (
     <main className="homeContainer">
       <div className={clsx(styles.homeContainer)}>
-
         <Header />
+        <GettingStarted />
         <Features />
       </div>
-      {/* <div className={clsx("container")}>
-        <hr />
-      </div>
-      <Resources /> */}
     </main >
   );
 }

src/js-components/index.js

@@ -1,6 +1,7 @@
 export { default as Home } from '@site/src/js-components/Home.js';
 export { default as Resources } from '@site/src/js-components/Resources.js';
 export { default as Products } from '@site/src/js-components/Products.js';
-
+export { default as GettingStarted } from "@site/src/js-components/GettingStarted.js";
+export { default as Advantages } from '@site/src/js-components/Advantages.js';
 export { default as Features } from '@site/src/js-components/Features.js';
 export * from '@site/src/js-components/inline.js';

src/js-components/styles.module.css

@@ -16,6 +16,22 @@
   margin-bottom: var(--ifm-card-vertical-spacing);
 }
 
+.advantageHeader {
+  height: 100%;
+  text-align: left;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  color: var(--text-caption-color);
+  margin-bottom: var(--ifm-card-vertical-spacing);
+}
+
+.advantageIcon {
+  height: 32px;
+  width: 32px;
+  padding-right: 10px;
+}
+
 .cardBody {
   font-size: var(--body1-font-size);
   color: var(--text-caption-color)