Skip to content

Commit 86c35ef

Browse files
maxwolfsmaxwolfs
authored
Add Feature Content to Landing Page (#102)
* Add Content Card Component Signed-off-by: Max Wolfs <[email protected]> * Add index page content and layout Signed-off-by: Max Wolfs <[email protected]> * fix mobile padding Signed-off-by: Max Wolfs <[email protected]> * fix dummy urls Signed-off-by: Max Wolfs <[email protected]> * fix links Signed-off-by: Max Wolfs <[email protected]> * add content Signed-off-by: Max Wolfs <[email protected]> * fix Signed-off-by: Max Wolfs <[email protected]> * fix wording Signed-off-by: Max Wolfs <[email protected]> --------- Signed-off-by: Max Wolfs <[email protected]>
1 parent c5a18fc commit 86c35ef

File tree

4 files changed

+231
-16
lines changed

4 files changed

+231
-16
lines changed

‎src/components/ContentCard.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, { CSSProperties } from 'react'
2+
import styles from './contentcard.module.css'
3+
import Link from '@docusaurus/Link'
4+
5+
interface ContentCardProps {
6+
title: string
7+
body: string
8+
url: string
9+
buttonText: string
10+
maxHeight?: boolean
11+
}
12+
13+
const ContentCard: React.FunctionComponent<ContentCardProps> = (props) => {
14+
const { title, body, url, buttonText, maxHeight } = props
15+
16+
return (
17+
<div className={`${maxHeight && styles.card} card`}>
18+
<div className="card__header">
19+
<h3>{title}</h3>
20+
</div>
21+
<div className="card__body">
22+
<p>{body}</p>
23+
</div>
24+
<div className="card__footer">
25+
<Link className="button button--secondary button--lg" to={url}>
26+
{buttonText}
27+
</Link>
28+
</div>
29+
</div>
30+
)
31+
}
32+
33+
export default ContentCard

‎src/components/contentcard.module.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.link {
2+
text-decoration: none;
3+
}
4+
5+
.button {
6+
background-color: #50c3a5; /* Green */
7+
border: none;
8+
color: white;
9+
padding: 15px 32px;
10+
text-align: center;
11+
text-decoration: none;
12+
display: inline-block;
13+
font-size: 16px;
14+
border-radius: 8px;
15+
font-weight: 600;
16+
cursor: pointer;
17+
}
18+
19+
.button:hover {
20+
background-color: #0f5fe1; /* Green */
21+
}
22+
23+
@media only screen and (min-width: 996px) {
24+
.card {
25+
height: 100%;
26+
}
27+
}
28+
29+
.card {
30+
margin-bottom: 1rem;
31+
}

‎src/pages/index.module.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,20 @@
2121
align-items: center;
2222
justify-content: center;
2323
}
24+
25+
.gradient {
26+
background: linear-gradient(
27+
180deg,
28+
#0061ff 0%,
29+
rgba(80, 195, 165, 0) 50%,
30+
#50c3a5 100%
31+
);
32+
border-radius: 16px;
33+
margin: 16px;
34+
padding: 16px;
35+
}
36+
37+
#marg {
38+
margin-top: 1rem;
39+
margin-bottom: 1rem;
40+
}

‎src/pages/index.tsx‎

Lines changed: 150 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,172 @@
1-
import React from 'react';
2-
import clsx from 'clsx';
3-
import Link from '@docusaurus/Link';
4-
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
5-
import Layout from '@theme/Layout';
6-
import HomepageFeatures from '@site/src/components/HomepageFeatures';
1+
import React from 'react'
2+
import clsx from 'clsx'
3+
import Link from '@docusaurus/Link'
4+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
5+
import Layout from '@theme/Layout'
76

8-
import styles from './index.module.css';
7+
import styles from './index.module.css'
8+
import ContentCard from '../components/ContentCard'
9+
10+
const featureContentData = [
11+
{
12+
title: 'Introduction to SCS',
13+
body: 'Get to know SCS better and learn about the background.',
14+
url: '/docs',
15+
buttonText: 'Get Started'
16+
},
17+
{
18+
title: 'Releases',
19+
body: 'SCS is currently in Release 5. Check out the latest Release Notes.',
20+
url: '/docs/releases/Release5',
21+
buttonText: 'Learn More'
22+
},
23+
{
24+
title: 'Frequently Asked Questions',
25+
body: 'You are curious what SCS is all about, what it can do and what it cant?',
26+
url: '/docs/faq',
27+
buttonText: 'Get Answers'
28+
},
29+
{
30+
title: 'Existing Public Clouds',
31+
body: 'There are public SCS compliant clouds in production.',
32+
url: '/standards/certification/overview#compliant-cloud-environments',
33+
buttonText: 'Test Them'
34+
}
35+
]
36+
37+
const AdditionalResourcesData = [
38+
{
39+
title: 'Get in touch',
40+
body: 'Come into our Matrix Chat in the SCS | Tech Room.',
41+
url: 'https://matrix.to/#/#scs-tech:matrix.org',
42+
buttonText: 'Join Now'
43+
},
44+
{
45+
title: 'Come to our Meet-Ups',
46+
body: 'Our working groups and special interest groups meet weekly or biweekly. When? Find out within our public community calendar.',
47+
url: '/community/calendar',
48+
buttonText: 'Learn More'
49+
},
50+
{
51+
title: 'Standardization in progress',
52+
body: 'Get to know our current Decision Records and Standards.',
53+
url: '/standards',
54+
buttonText: 'Start Now'
55+
},
56+
{
57+
title: 'Deployment Examples',
58+
body: 'Get to know different ways to deploy SCS with cloud resources or on bare metal.',
59+
url: '/docs/category/deployment-examples',
60+
buttonText: 'Explore Cases'
61+
}
62+
]
963

1064
function HomepageHeader() {
11-
const {siteConfig} = useDocusaurusContext();
65+
const { siteConfig } = useDocusaurusContext()
1266
return (
1367
<header className={clsx('hero hero--primary', styles.heroBanner)}>
1468
<div className="container">
1569
<h1 className="hero__title">{siteConfig.title}</h1>
1670
<p className="hero__subtitle">{siteConfig.tagline}</p>
1771
<div className={styles.buttons}>
18-
<Link
19-
className="button button--secondary button--lg"
20-
to="/docs">
72+
<Link className="button button--secondary button--lg" to="/docs">
2173
Get Started
2274
</Link>
2375
</div>
2476
</div>
2577
</header>
26-
);
78+
)
2779
}
2880

2981
export default function Home(): JSX.Element {
3082
return (
31-
<Layout description='Documentation and Community Platform for the Sovereign Cloud Stack'>
32-
<HomepageHeader />
83+
<Layout description="Documentation and Community Platform for the Sovereign Cloud Stack">
3384
<main>
34-
<HomepageFeatures />
85+
<div className="container">
86+
<div className="row" style={{ marginTop: '2rem' }}>
87+
<div className="col col--12">
88+
<h1>Welcome to the SCS Documentation</h1>
89+
<p>
90+
Find user guides, code samples, deployment examples, reference,
91+
community pages and more.
92+
</p>
93+
</div>
94+
</div>
95+
<div className="row">
96+
{featureContentData.map((card, index) => (
97+
<div className="col col--3" key={index}>
98+
<ContentCard
99+
maxHeight
100+
title={card.title}
101+
body={card.body}
102+
url={card.url}
103+
buttonText={card.buttonText}
104+
/>
105+
</div>
106+
))}
107+
</div>
108+
<div className="row" style={{ marginTop: '3rem' }}>
109+
<div className="col col--12">
110+
<h1>Architectural Layers</h1>
111+
</div>
112+
<div className={`${styles.gradient} row`}>
113+
<div className="col col--3">
114+
<ContentCard
115+
maxHeight
116+
title="Ops Layer"
117+
body="Tooling and infrastructure design for easy, efficient and transparent ways to operate an SCS Cloud."
118+
buttonText="Learn More"
119+
url="/docs/category/operating-scs"
120+
/>
121+
</div>
122+
<div className="col col--6">
123+
<div style={{ marginBottom: '3rem' }}>
124+
<ContentCard
125+
title="Container Layer"
126+
body="SCS offers a robust solution for managing container workloads on a Kubernetes infrastructure."
127+
buttonText="Learn More"
128+
url="/docs/container"
129+
maxHeight
130+
/>
131+
</div>
132+
<ContentCard
133+
title="IaaS Layer"
134+
body="SCS offers OpenStack infrastructure solutions based on KVM virutalization to deploy VM workloads and enabling the container layer optionally."
135+
buttonText="Learn More"
136+
url="/docs/category/iaas-layer"
137+
/>
138+
</div>
139+
<div className="col col--3">
140+
<ContentCard
141+
maxHeight
142+
title="IAM Layer"
143+
body="Working on Keycloak federated identity provider within our Team IAM."
144+
buttonText="Learn More"
145+
url="/docs/category/identity-and-access-management-iam"
146+
/>
147+
</div>
148+
</div>
149+
</div>
150+
<div className="row" style={{ marginTop: '3rem' }}>
151+
<div className="col col--12">
152+
<h1>Additional Resources</h1>
153+
</div>
154+
</div>
155+
<div className="row" style={{ marginBottom: '5rem' }}>
156+
{AdditionalResourcesData.map((card, index) => (
157+
<div className="col col--3" key={index}>
158+
<ContentCard
159+
maxHeight
160+
title={card.title}
161+
body={card.body}
162+
url={card.url}
163+
buttonText={card.buttonText}
164+
/>
165+
</div>
166+
))}
167+
</div>
168+
</div>
35169
</main>
36170
</Layout>
37-
);
171+
)
38172
}

0 commit comments

Comments
 (0)