From 86c35ef7c46a9d79c1a9599d56574c358fbbc1f9 Mon Sep 17 00:00:00 2001 From: Max Wolfs Date: Wed, 8 Nov 2023 16:44:14 +0100 Subject: [PATCH] Add Feature Content to Landing Page (#102) * Add Content Card Component Signed-off-by: Max Wolfs * Add index page content and layout Signed-off-by: Max Wolfs * fix mobile padding Signed-off-by: Max Wolfs * fix dummy urls Signed-off-by: Max Wolfs * fix links Signed-off-by: Max Wolfs * add content Signed-off-by: Max Wolfs * fix Signed-off-by: Max Wolfs * fix wording Signed-off-by: Max Wolfs --------- Signed-off-by: Max Wolfs --- src/components/ContentCard.tsx | 33 +++++ src/components/contentcard.module.css | 31 +++++ src/pages/index.module.css | 17 +++ src/pages/index.tsx | 166 +++++++++++++++++++++++--- 4 files changed, 231 insertions(+), 16 deletions(-) create mode 100644 src/components/ContentCard.tsx create mode 100644 src/components/contentcard.module.css diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx new file mode 100644 index 0000000000..24d090e400 --- /dev/null +++ b/src/components/ContentCard.tsx @@ -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 = (props) => { + const { title, body, url, buttonText, maxHeight } = props + + return ( +
+
+

{title}

+
+
+

{body}

+
+
+ + {buttonText} + +
+
+ ) +} + +export default ContentCard diff --git a/src/components/contentcard.module.css b/src/components/contentcard.module.css new file mode 100644 index 0000000000..4dcb7cf81d --- /dev/null +++ b/src/components/contentcard.module.css @@ -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; +} diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 9f71a5da77..a23eba3cc7 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -21,3 +21,20 @@ align-items: center; justify-content: center; } + +.gradient { + background: linear-gradient( + 180deg, + #0061ff 0%, + rgba(80, 195, 165, 0) 50%, + #50c3a5 100% + ); + border-radius: 16px; + margin: 16px; + padding: 16px; +} + +#marg { + margin-top: 1rem; + margin-bottom: 1rem; +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 017bc56eda..ada8ca876e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -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 (

{siteConfig.title}

{siteConfig.tagline}

- + Get Started
- ); + ) } export default function Home(): JSX.Element { return ( - - +
- +
+
+
+

Welcome to the SCS Documentation

+

+ Find user guides, code samples, deployment examples, reference, + community pages and more. +

+
+
+
+ {featureContentData.map((card, index) => ( +
+ +
+ ))} +
+
+
+

Architectural Layers

+
+
+
+ +
+
+
+ +
+ +
+
+ +
+
+
+
+
+

Additional Resources

+
+
+
+ {AdditionalResourcesData.map((card, index) => ( +
+ +
+ ))} +
+
- ); + ) }