diff --git a/src/js-components/Advantages.js b/src/js-components/Advantages.js new file mode 100644 index 0000000..7aabb3b --- /dev/null +++ b/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 ( +
+
+
+
+ +
+
+

{title}

+
+
+
+ ) +} + +function Advantage(advantageItem) { + return ( +
+ +
+ ) +}; +export default function Advantages() { + return ( +
+
+
+ {advantageItems.map((props, idx) => ( + + ))} +
+
+
+ ); +} diff --git a/src/js-components/Features.js b/src/js-components/Features.js index 7e12e58..b523a71 100644 --- a/src/js-components/Features.js +++ b/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 ( -
+
{ disabled ? : - }
) }; + export default function Features() { return (
- {featureItems.map((props, idx) => ( - + {featureItems.slice(0,3).map((props, idx) => ( + + ))} +
+
+ {featureItems.slice(3,5).map((props, idx) => ( + ))}
diff --git a/src/js-components/GettingStarted.js b/src/js-components/GettingStarted.js new file mode 100644 index 0000000..0f7799f --- /dev/null +++ b/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 ( +
+ + +
+ ) +}; + +export default function GettingStarted() { + return ( +
+
+ {onboardingSteps.map(productItem => +
+ +
) + } +
+
+ ); +} diff --git a/src/js-components/Home.js b/src/js-components/Home.js index ea9deb9..2a74d7c 100644 --- a/src/js-components/Home.js +++ b/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 (
-

Loopscale Docs

-

- Loopscale provides market-driven, modular credit infrastructure for the next generation of capital markets. -

- +

Loopscale

+

+ Loopscale is the next generation of onchain borrowing and lending platform that uses an orderbook instead of a curve to determine interest rate. +

+
) @@ -22,14 +22,10 @@ export default function Home() { return (
-
+
- {/*
-
-
- */}
); } diff --git a/src/js-components/index.js b/src/js-components/index.js index 991717e..df0dcae 100644 --- a/src/js-components/index.js +++ b/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'; diff --git a/src/js-components/styles.module.css b/src/js-components/styles.module.css index a75593f..b4c4d35 100644 --- a/src/js-components/styles.module.css +++ b/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) diff --git a/static/img/app_logo.svg b/static/img/app_logo.svg index e565de5..1e2fac6 100644 --- a/static/img/app_logo.svg +++ b/static/img/app_logo.svg @@ -1,4 +1,4 @@ - + diff --git a/static/img/discord_logo.svg b/static/img/discord_logo.svg index c15b585..219f1ac 100644 --- a/static/img/discord_logo.svg +++ b/static/img/discord_logo.svg @@ -3,7 +3,6 @@ - \ No newline at end of file diff --git a/static/img/docs/onboarding-cards/borrow.png b/static/img/docs/onboarding-cards/borrow.png new file mode 100644 index 0000000..16dd1dc Binary files /dev/null and b/static/img/docs/onboarding-cards/borrow.png differ diff --git a/static/img/docs/onboarding-cards/connect.png b/static/img/docs/onboarding-cards/connect.png new file mode 100644 index 0000000..9b265e1 Binary files /dev/null and b/static/img/docs/onboarding-cards/connect.png differ diff --git a/static/img/docs/onboarding-cards/points.png b/static/img/docs/onboarding-cards/points.png new file mode 100644 index 0000000..5e73ae6 Binary files /dev/null and b/static/img/docs/onboarding-cards/points.png differ diff --git a/static/img/x_logo.svg b/static/img/x_logo.svg new file mode 100644 index 0000000..672c12c --- /dev/null +++ b/static/img/x_logo.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file