diff --git a/docs/welcome.md b/docs/welcome.md index fad902e..3232152 100644 --- a/docs/welcome.md +++ b/docs/welcome.md @@ -1,7 +1,3 @@ ---- -slug: / ---- - import LinkButton from '@site/src/components/LinkButton/index'; # Welcome to Nillion's Docs diff --git a/docusaurus.config.js b/docusaurus.config.js index 7cb65a4..e54c8e0 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -79,6 +79,10 @@ const config = { themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({ + colorMode: { + defaultMode: 'dark', + respectPrefersColorScheme: true, + }, image: 'img/nillion-banner.jpeg', navbar: { logo: { @@ -89,14 +93,20 @@ const config = { { type: 'doc', position: 'left', - docId: 'welcome', - label: 'Docs', + docId: 'what-is-nillion', + label: 'Learn', }, { type: 'doc', position: 'left', - docId: 'nada-by-example', - label: 'Nada by Example', + docId: 'start-building', + label: 'Build', + }, + { + type: 'doc', + position: 'left', + docId: 'community-and-support', + label: 'Community', }, { href: 'https://github.com/NillionNetwork', diff --git a/src/components/LinkButton/index.js b/src/components/LinkButton/index.js index b9cb924..b966510 100644 --- a/src/components/LinkButton/index.js +++ b/src/components/LinkButton/index.js @@ -2,10 +2,14 @@ import React from 'react'; import styles from './styles.module.css'; // Import CSS module for styling import Link from '@docusaurus/Link'; -const LinkButton = ({ text, link }) => { +const LinkButton = ({ text, link, small }) => { return ( - + ); }; diff --git a/src/components/LinkButton/styles.module.css b/src/components/LinkButton/styles.module.css index 58db1bb..4c569f5 100644 --- a/src/components/LinkButton/styles.module.css +++ b/src/components/LinkButton/styles.module.css @@ -18,3 +18,30 @@ cursor: pointer; text-decoration: none; } + +.smallCustomButton { + border: none; + text-align: center; + text-decoration: none; + font-size: 20px; + box-sizing: border-box; + cursor: pointer; + border-radius: 32px; + padding: 15px; + width: 25%; + align-items: center; + font-weight: 400; + background: rgb(0, 33, 245); + color: white !important; +} + +@media screen and (max-width: 768px) { + .smallCustomButton { + width: 50%; + } +} + +.smallCustomButton:hover { + cursor: pointer; + text-decoration: none; +} diff --git a/src/css/custom.css b/src/css/custom.css index 1e3f739..9152369 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -5,8 +5,8 @@ */ @font-face { - font-family: 'TWKEverett'; - src: url('../../static/fonts/TWKEverett-Medium-web.woff') format('woff'); + font-family: "TWKEverett"; + src: url("../../static/fonts/TWKEverett-Medium-web.woff") format("woff"); } /* You can override the default Infima variables here. */ @@ -19,13 +19,14 @@ --ifm-color-primary-lighter: #4d4dff; --ifm-color-primary-lightest: #ccccff; --ifm-code-font-size: 95%; + --ifm-card-primary-grey: #f7f7f7; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); --feedback-primary-color: blue; - --feedback-font-family: 'TWKEverett'; + --feedback-font-family: "TWKEverett"; } /* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { +[data-theme="dark"] { --ifm-color-primary: #b7d8f7; --ifm-color-primary-dark: #21af90; --ifm-color-primary-darker: #1fa588; @@ -33,6 +34,7 @@ --ifm-color-primary-light: #29d5b0; --ifm-color-primary-lighter: #32d8b4; --ifm-color-primary-lightest: #4fddbf; + --ifm-card-primary-grey: #646464; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } @@ -59,11 +61,7 @@ h1, h2, h3, h4 { - font-family: 'TWKEverett'; -} - -.navbar { - background: rgb(0, 33, 245); + font-family: "TWKEverett"; } .navbar .clean-btn svg, @@ -71,6 +69,14 @@ h4 { .navbar .navbar__item { color: white !important; } +[data-theme="light"] .navbar .navbar__item { + color: white !important; + filter: invert(0.8); +} + +[data-theme="light"] .navbar .clean-btn svg { + filter: invert(0.8); +} .navbar__title { font-size: 30px; @@ -81,7 +87,7 @@ h4 { } .header-github:before { - content: ''; + content: ""; width: 24px; height: 24px; display: flex; @@ -91,17 +97,34 @@ h4 { /* Dark mode css */ -[data-theme='dark'] .header-github:hover { - filter: invert(0.8); +[data-theme="dark"] .header-github:hover { + filter: invert(1); } -[data-theme='dark'] .sidebar-title { +[data-theme="dark"] .sidebar-title { border-bottom: solid rgb(96, 103, 112) 1px; } +@media (min-width: 768px) { + .main-wrapper .container { + padding-left: 2em; + } +} + .divider { width: 100%; height: 1px; background-color: #ccc; margin: 20px 0; } + +.theme-doc-sidebar-menu.menu__list { + padding-top: 1em !important; + padding-bottom: 3em !important; +} + +.theme-doc-sidebar-menu .menu__list { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + diff --git a/src/pages/index.js b/src/pages/index.js new file mode 100644 index 0000000..542ac68 --- /dev/null +++ b/src/pages/index.js @@ -0,0 +1,96 @@ +import React from "react"; +import Layout from "@theme/Layout"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import styles from "./index.module.css"; +import Link from "@docusaurus/Link"; +import LinkButton from "../components/LinkButton"; + +function HeroSection() { + const { siteConfig } = useDocusaurusContext(); + + return ( +
+
+

{siteConfig.title}

+

+ Humanity's first blind computer. +

+

+ Nillion is a secure computation network that decentralizes trust for + high value data in the same way that blockchains decentralized + transactions. +

+
+ +
+
+
+ Nillion Network Illustration +
+
+ ); +} + +function FeatureItem({ title, description, href, icon }) { + return ( + +
{icon}
+

{title}

+

{description}

+ + ); +} + +function FeaturesSection() { + const features = [ + { + title: "Learn", + description: + "Nillion is a secure computation network that decentralizes trust for high value data in the same way that blockchains decentralized transactions.", + icon: "🎓", + href: "./what-is-nillion", + }, + { + title: "Build", + description: + "Start building on Nillion with one of our developer quickstart guides. Create fullstack Python and Javscript applications with Nada.", + icon: "👷", + href: "./start-building", + }, + { + title: "Community", + description: + "Join the Nillion community to connect, collaborate, and contribute to the future of blind computation.", + icon: "🌐", + href: "./community-and-support", + }, + ]; + + return ( +
+ {features.map((props, idx) => ( + + ))} +
+ ); +} + +export default function Home() { + return ( + +
+ + +
+ + ); +} diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 9f71a5d..413182e 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -1,23 +1,234 @@ -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ +.main { + padding: 0; + flex: 1; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + background-color: var(--ifm-background-color); + color: var(--ifm-font-color-base); +} + +@media screen and (max-width: 768px) { + .main { + padding-bottom: 4em; + } +} .heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; + padding: 4rem 2rem; + width: 100%; + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + gap: 2rem; +} + +.heroContent { + flex: 1; + max-width: 60%; +} + +.heroTitle { + font-size: 3rem; + color: #0000ff; + margin-bottom: 0.5rem; +} + +.heroSubtitle { + font-size: 2.5rem; + margin-top: 0.5rem; + margin-bottom: 1rem; +} + +.heroDescription { + font-size: 1.2rem; + margin-top: 1rem; + line-height: 1.6; +} + +.heroButtons { + margin-top: 2rem; + border-radius: 20px; +} + +.heroImageContainer { + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + width: 30%; +} + +.spinningImage { + max-width: 100%; + height: auto; + animation: spin 20s linear infinite; +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } @media screen and (max-width: 996px) { .heroBanner { - padding: 2rem; + flex-direction: column; + padding: 2rem 1rem; } + + .heroContent { + max-width: 100%; + } + + .heroImageContainer { + width: 30%; + margin-top: 2rem; + } + + .heroBanner { + gap: 0rem; + } + } -.buttons { +.features { display: flex; - align-items: center; - justify-content: center; + flex-wrap: wrap; + justify-content: space-between; + padding: 2rem; + width: 100%; + max-width: 1200px; + margin: 0 auto; +} + +.featureItem { + flex: 0 1 calc(33.333% - 1rem); + display: flex; + flex-direction: column; + padding: 2rem; + background-color: var(--ifm-card-primary-grey); + border-radius: var(--ifm-card-border-radius); + margin-bottom: 2rem; + box-shadow: var(--ifm-global-shadow-lw); + text-decoration: none !important; + color: var(--ifm-font-color-base) !important; + transition: all 0.3s ease; + border: 2px solid transparent; +} + +.featureItem:hover { + transform: translateY(-5px); + box-shadow: 0 4px 20px rgba(0, 0, 255, 0.1); + border-color: rgba(0, 0, 255, 0.1); +} + +.featureIcon { + font-size: 2rem; + margin-bottom: 1rem; +} + +.featureTitle { + margin-top: 0; + color: var(--ifm-color-primary); + font-size: 1.5rem; +} + +.featureDescription { + flex-grow: 1; + margin-bottom: 0; + color: var(--ifm-font-color-base) !important; +} + +.featureItem:hover .featureTitle, +.featureItem:hover .featureDescription { + color: var(--ifm-font-color-base) !important; + text-decoration: none !important; +} + +@media screen and (max-width: 1024px) { + .featureItem { + flex: 0 1 calc(50% - 1rem); + } +} + +@media screen and (max-width: 768px) { + .features { + padding: 1rem; + } + + .featureItem { + flex: 0 1 100%; + } +} + +@media screen and (max-width: 1024px) { + .heroBanner { + flex-direction: column; + align-items: center; + padding: 3rem 2rem; + } + + .heroContent { + max-width: 100%; + text-align: center; + margin-bottom: 2rem; + } + + .heroImage { + max-width: 70%; + } + + .featureItem { + flex: 0 1 calc(50% - 1rem); + } +} + +@media screen and (max-width: 768px) { + .heroBanner { + padding: 2rem 1rem; + } + + .heroTitle { + font-size: 1.75rem; + } + + .heroSubtitle { + font-size: 1.25rem; + } + + .heroDescription { + font-size: 1rem; + } + + .features { + padding: 1rem; + } + + .featureItem { + flex: 0 1 100%; + padding: 1.5rem; + } + + .heroImageContainer{ + margin: 0px; + } + + .heroBanner { + gap: 0rem; + } + + .heroContent { + margin-bottom: 0.5rem; + } + + .getStartedButton { + display: none; + } } diff --git a/static/img/logo.svg b/static/img/logo.svg index 85f26f5..14d7193 100644 --- a/static/img/logo.svg +++ b/static/img/logo.svg @@ -1,10 +1,10 @@ - - - - - - - + + + + + + + diff --git a/static/img/spin.svg b/static/img/spin.svg new file mode 100644 index 0000000..2803537 --- /dev/null +++ b/static/img/spin.svg @@ -0,0 +1,3 @@ + + +