diff --git a/src/css/custom.css b/src/css/custom.css index c679b5185c77..4930c472bb32 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -49,4 +49,31 @@ html[data-theme='dark'] .header-github-link:before { .menu--responsive .menu__button { bottom: 90px; -} \ No newline at end of file +} + +.highlights-wrapper { + margin-left: auto; + margin-right: auto; + + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + padding: 2rem 0; + width: 100%; +} + +.highlight-card { + flex: 1; + margin-left: 20px; + margin-right: 20px; + text-align: center; + + margin-bottom: 20px; + padding-top: 12px; + text-align: center; + border: solid 1px #c0c0c0; + border-radius: 8px; + min-width: 300px; + max-width: 400px; +} diff --git a/src/pages/index.js b/src/pages/index.js index 92fa21dfcfca..56438160459f 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -8,6 +8,24 @@ import Particles from 'react-particles'; import { loadFull } from 'tsparticles'; import styles from './styles.module.css'; +const highlights = [ + { + title: 'Job Writing Guide', + link: 'documentation/jobs/job-writing-guide', + description: 'Writing a job for OpenFn? Start here', + }, + { + title: 'CLI Usage Examples', + link: 'documentation/cli-usage', + description: 'See what the CLI can do at a glance', + }, + { + title: 'JavaScript Tips & Tricks', + link: 'documentation/cli-usage', + description: 'Level up your code', + }, +]; + const features = [ { title: 'Docs', @@ -31,40 +49,17 @@ const features = [ ), }, - { - title: 'Articles', - link: 'articles', - imageUrl: 'img/undraw_Portfolio_update_re_jqnp.svg', - description: ( - <> - How to prepare for data integration? How to structure external IDs? How - to... - - ), - }, - { - title: 'Blog', - link: 'https://www.openfn.org/blog', - imageUrl: 'img/undraw_reading_time_gvg0.svg', - description: ( - <> - We help the world's most promising social impact interventions achieve - scale through automation, data integration, and interoperability. These - are their stories. - - ), - }, - { - title: 'Enterprise', - link: 'https://www.openfn.org', - imageUrl: 'img/undraw_secure_server_s9u8.svg', - description: ( - <> - Check out the enterprise-grade OpenFn integration-platform-as-a-service - (iPaaS), offering free-forever plans and affordable pathways to scale. - - ), - }, + // { + // title: 'Enterprise', + // link: 'https://www.openfn.org', + // imageUrl: 'img/undraw_secure_server_s9u8.svg', + // description: ( + // <> + // Check out the enterprise-grade OpenFn integration-platform-as-a-service + // (iPaaS), offering free-forever plans and affordable pathways to scale. + // + // ), + // }, ]; function Feature({ imageUrl, title, description, link }) { @@ -293,6 +288,19 @@ function Home() { )} +
+

✨Documentation Highlights✨

+
+ {highlights.map(h => ( +
+

+ {h.title} +

+

{h.description}

+
+ ))} +
+
); }