-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Feature Content to Landing Page (#102)
* Add Content Card Component Signed-off-by: Max Wolfs <mail@maxwolfs.com> * Add index page content and layout Signed-off-by: Max Wolfs <mail@maxwolfs.com> * fix mobile padding Signed-off-by: Max Wolfs <mail@maxwolfs.com> * fix dummy urls Signed-off-by: Max Wolfs <mail@maxwolfs.com> * fix links Signed-off-by: Max Wolfs <mail@maxwolfs.com> * add content Signed-off-by: Max Wolfs <mail@maxwolfs.com> * fix Signed-off-by: Max Wolfs <mail@maxwolfs.com> * fix wording Signed-off-by: Max Wolfs <mail@maxwolfs.com> --------- Signed-off-by: Max Wolfs <mail@maxwolfs.com>
- Loading branch information
Showing
4 changed files
with
231 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import React, { CSSProperties } from 'react' | ||
| import styles from './contentcard.module.css' | ||
| import Link from '@docusaurus/Link' | ||
|
|
||
| interface ContentCardProps { | ||
| title: string | ||
| body: string | ||
| url: string | ||
| buttonText: string | ||
| maxHeight?: boolean | ||
| } | ||
|
|
||
| const ContentCard: React.FunctionComponent<ContentCardProps> = (props) => { | ||
| const { title, body, url, buttonText, maxHeight } = props | ||
|
|
||
| return ( | ||
| <div className={`${maxHeight && styles.card} card`}> | ||
| <div className="card__header"> | ||
| <h3>{title}</h3> | ||
| </div> | ||
| <div className="card__body"> | ||
| <p>{body}</p> | ||
| </div> | ||
| <div className="card__footer"> | ||
| <Link className="button button--secondary button--lg" to={url}> | ||
| {buttonText} | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default ContentCard |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| .link { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .button { | ||
| background-color: #50c3a5; /* Green */ | ||
| border: none; | ||
| color: white; | ||
| padding: 15px 32px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| display: inline-block; | ||
| font-size: 16px; | ||
| border-radius: 8px; | ||
| font-weight: 600; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .button:hover { | ||
| background-color: #0f5fe1; /* Green */ | ||
| } | ||
|
|
||
| @media only screen and (min-width: 996px) { | ||
| .card { | ||
| height: 100%; | ||
| } | ||
| } | ||
|
|
||
| .card { | ||
| margin-bottom: 1rem; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,172 @@ | ||
| import React from 'react'; | ||
| import clsx from 'clsx'; | ||
| import Link from '@docusaurus/Link'; | ||
| import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; | ||
| import Layout from '@theme/Layout'; | ||
| import HomepageFeatures from '@site/src/components/HomepageFeatures'; | ||
| import React from 'react' | ||
| import clsx from 'clsx' | ||
| import Link from '@docusaurus/Link' | ||
| import useDocusaurusContext from '@docusaurus/useDocusaurusContext' | ||
| import Layout from '@theme/Layout' | ||
|
|
||
| import styles from './index.module.css'; | ||
| import styles from './index.module.css' | ||
| import ContentCard from '../components/ContentCard' | ||
|
|
||
| const featureContentData = [ | ||
| { | ||
| title: 'Introduction to SCS', | ||
| body: 'Get to know SCS better and learn about the background.', | ||
| url: '/docs', | ||
| buttonText: 'Get Started' | ||
| }, | ||
| { | ||
| title: 'Releases', | ||
| body: 'SCS is currently in Release 5. Check out the latest Release Notes.', | ||
| url: '/docs/releases/Release5', | ||
| buttonText: 'Learn More' | ||
| }, | ||
| { | ||
| title: 'Frequently Asked Questions', | ||
| body: 'You are curious what SCS is all about, what it can do and what it cant?', | ||
| url: '/docs/faq', | ||
| buttonText: 'Get Answers' | ||
| }, | ||
| { | ||
| title: 'Existing Public Clouds', | ||
| body: 'There are public SCS compliant clouds in production.', | ||
| url: '/standards/certification/overview#compliant-cloud-environments', | ||
| buttonText: 'Test Them' | ||
| } | ||
| ] | ||
|
|
||
| const AdditionalResourcesData = [ | ||
| { | ||
| title: 'Get in touch', | ||
| body: 'Come into our Matrix Chat in the SCS | Tech Room.', | ||
| url: 'https://matrix.to/#/#scs-tech:matrix.org', | ||
| buttonText: 'Join Now' | ||
| }, | ||
| { | ||
| title: 'Come to our Meet-Ups', | ||
| body: 'Our working groups and special interest groups meet weekly or biweekly. When? Find out within our public community calendar.', | ||
| url: '/community/calendar', | ||
| buttonText: 'Learn More' | ||
| }, | ||
| { | ||
| title: 'Standardization in progress', | ||
| body: 'Get to know our current Decision Records and Standards.', | ||
| url: '/standards', | ||
| buttonText: 'Start Now' | ||
| }, | ||
| { | ||
| title: 'Deployment Examples', | ||
| body: 'Get to know different ways to deploy SCS with cloud resources or on bare metal.', | ||
| url: '/docs/category/deployment-examples', | ||
| buttonText: 'Explore Cases' | ||
| } | ||
| ] | ||
|
|
||
| function HomepageHeader() { | ||
| const {siteConfig} = useDocusaurusContext(); | ||
| const { siteConfig } = useDocusaurusContext() | ||
| return ( | ||
| <header className={clsx('hero hero--primary', styles.heroBanner)}> | ||
| <div className="container"> | ||
| <h1 className="hero__title">{siteConfig.title}</h1> | ||
| <p className="hero__subtitle">{siteConfig.tagline}</p> | ||
| <div className={styles.buttons}> | ||
| <Link | ||
| className="button button--secondary button--lg" | ||
| to="/docs"> | ||
| <Link className="button button--secondary button--lg" to="/docs"> | ||
| Get Started | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </header> | ||
| ); | ||
| ) | ||
| } | ||
|
|
||
| export default function Home(): JSX.Element { | ||
| return ( | ||
| <Layout description='Documentation and Community Platform for the Sovereign Cloud Stack'> | ||
| <HomepageHeader /> | ||
| <Layout description="Documentation and Community Platform for the Sovereign Cloud Stack"> | ||
| <main> | ||
| <HomepageFeatures /> | ||
| <div className="container"> | ||
| <div className="row" style={{ marginTop: '2rem' }}> | ||
| <div className="col col--12"> | ||
| <h1>Welcome to the SCS Documentation</h1> | ||
| <p> | ||
| Find user guides, code samples, deployment examples, reference, | ||
| community pages and more. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div className="row"> | ||
| {featureContentData.map((card, index) => ( | ||
| <div className="col col--3" key={index}> | ||
| <ContentCard | ||
| maxHeight | ||
| title={card.title} | ||
| body={card.body} | ||
| url={card.url} | ||
| buttonText={card.buttonText} | ||
| /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| <div className="row" style={{ marginTop: '3rem' }}> | ||
| <div className="col col--12"> | ||
| <h1>Architectural Layers</h1> | ||
| </div> | ||
| <div className={`${styles.gradient} row`}> | ||
| <div className="col col--3"> | ||
| <ContentCard | ||
| maxHeight | ||
| title="Ops Layer" | ||
| body="Tooling and infrastructure design for easy, efficient and transparent ways to operate an SCS Cloud." | ||
| buttonText="Learn More" | ||
| url="/docs/category/operating-scs" | ||
| /> | ||
| </div> | ||
| <div className="col col--6"> | ||
| <div style={{ marginBottom: '3rem' }}> | ||
| <ContentCard | ||
| title="Container Layer" | ||
| body="SCS offers a robust solution for managing container workloads on a Kubernetes infrastructure." | ||
| buttonText="Learn More" | ||
| url="/docs/container" | ||
| maxHeight | ||
| /> | ||
| </div> | ||
| <ContentCard | ||
| title="IaaS Layer" | ||
| body="SCS offers OpenStack infrastructure solutions based on KVM virutalization to deploy VM workloads and enabling the container layer optionally." | ||
| buttonText="Learn More" | ||
| url="/docs/category/iaas-layer" | ||
| /> | ||
| </div> | ||
| <div className="col col--3"> | ||
| <ContentCard | ||
| maxHeight | ||
| title="IAM Layer" | ||
| body="Working on Keycloak federated identity provider within our Team IAM." | ||
| buttonText="Learn More" | ||
| url="/docs/category/identity-and-access-management-iam" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="row" style={{ marginTop: '3rem' }}> | ||
| <div className="col col--12"> | ||
| <h1>Additional Resources</h1> | ||
| </div> | ||
| </div> | ||
| <div className="row" style={{ marginBottom: '5rem' }}> | ||
| {AdditionalResourcesData.map((card, index) => ( | ||
| <div className="col col--3" key={index}> | ||
| <ContentCard | ||
| maxHeight | ||
| title={card.title} | ||
| body={card.body} | ||
| url={card.url} | ||
| buttonText={card.buttonText} | ||
| /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </main> | ||
| </Layout> | ||
| ); | ||
| ) | ||
| } |