Skip to content

Commit 8cb3d5e

Browse files
authored
feat: Added user journey page and integrated in nav bar and home page (#1193)
1 parent eefe6fa commit 8cb3d5e

7 files changed

Lines changed: 168 additions & 18 deletions

File tree

website/docusaurus.config.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ const config: Config = {
6464
},
6565
items: [
6666
{ to: '/about', label: 'About', position: 'right' },
67+
{ to: '/users', label: 'User Journey', position: 'right' },
6768
{ to: '/architecture', label: 'Architecture', position: 'right' },
6869
{ to: "/catalogs", label: "Catalogs", position: "right" },
6970
{
@@ -113,6 +114,10 @@ const config: Config = {
113114
label: "About",
114115
to: "/about",
115116
},
117+
{
118+
label: 'User Journey',
119+
to: '/users'
120+
},
116121
{
117122
label: "Architecture",
118123
to: "/architecture",

website/src/components/AdvanceAutomatedGovernence/styles.module.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,12 @@
109109
height: auto;
110110
}
111111

112+
.footerImage {
113+
width: 3rem;
114+
margin: auto;
115+
margin-top: 0;
116+
}
117+
112118
h1{
113119
font-size: 2.5rem;
114120
color: var(--gf-color-accent-strong);

website/src/components/SimpleIntro/styles.module.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ html[data-theme=dark] .cta {
6969

7070
.button:hover {
7171
text-decoration: none;
72+
color: var(--gf-color-text-subtle);
7273
}
7374

7475
.catalogPreview{

website/src/components/TheStory/index.js

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React, { useState } from "react";
22
import HomeSection from "../HomeSection";
33
import styles from "./styles.module.css";
4-
5-
4+
import { Link } from "react-router-dom";
65

76
const bodyStyle = {
87
color: "var(--gf-color-text-subtle)",
@@ -77,22 +76,7 @@ function CollapsibleBox({ title, firstParagraph, extraParagraphs }) {
7776
<button
7877
onClick={() => setOpen(!open)}
7978
aria-expanded={open}
80-
style={{
81-
background: "none",
82-
border: "none",
83-
cursor: "pointer",
84-
color: "var(--gf-color-accent)",
85-
padding: "0.25rem 0.75rem",
86-
display: "inline-flex",
87-
alignItems: "center",
88-
gap: "0.4rem",
89-
fontSize: "0.9rem",
90-
fontWeight: 600,
91-
borderRadius: "999px",
92-
transition: "background 0.15s",
93-
}}
94-
onMouseEnter={(e) => (e.currentTarget.style.background = "rgba(0,181,226,0.1)")}
95-
onMouseLeave={(e) => (e.currentTarget.style.background = "none")}
79+
className={styles.buttonReadmore}
9680
>
9781
{open ? "Show less" : "Read more"}
9882
<ChevronIcon open={open} />
@@ -136,6 +120,14 @@ export default function TheStory() {
136120
</div>
137121

138122
<p style={{ ...bodyStyle, textAlign: "center", maxWidth: "780px", margin: "2rem auto 0 auto", fontSize: "0.95rem" }}>
123+
124+
<Link
125+
to="/users"
126+
className={styles.buttonJourney}
127+
>
128+
See the user journey
129+
</Link> <p/>
130+
139131
CCC is built openly, governed collaboratively, and backed by leading financial institutions,
140132
cloud providers, and technology organisations from across the industry. It lives on GitHub
141133
and welcomes contributors.

website/src/components/TheStory/styles.module.css

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,55 @@
3232
color: var(--gf-color-text);
3333
}
3434

35+
.buttonReadmore {
36+
background: none;
37+
border: none;
38+
cursor: pointer;
39+
color: var(--gf-color-accent);
40+
padding: 0.25rem 0.75rem;
41+
display: inline-flex;
42+
align-items: center;
43+
gap: 0.4rem;
44+
text-decoration: none;
45+
font-size: 0.9rem;
46+
font-weight: 600;
47+
border-radius: 999px;
48+
}
49+
.buttonReadmore:hover {
50+
background: rgba(0,181,226,0.1);
51+
text-decoration: none;
52+
}
53+
54+
.buttonJourney {
55+
display: inline-block;
56+
padding: 0.6rem 1.75rem;
57+
border-radius: 0.75rem;
58+
border: none;
59+
background: var(--gf-color-accent-light);
60+
color: #fff;
61+
font: inherit;
62+
font-weight: 600;
63+
font-size: 0.95rem;
64+
text-decoration: none;
65+
cursor: pointer;
66+
transition: background 0.15s, box-shadow 0.15s;
67+
white-space: nowrap;
68+
}
69+
.buttonJourney:hover {
70+
background: var(--gf-color-accent);
71+
color: #fff;
72+
text-decoration: none;
73+
box-shadow: 0 2px 8px rgba(0, 134, 191, 0.3);
74+
}
75+
76+
:global([data-theme="dark"]) .buttonJourney {
77+
background: var(--gf-color-accent);
78+
}
79+
80+
:global([data-theme="dark"]) .buttonJourney:hover {
81+
background: rgb(0, 100, 150);
82+
}
83+
3584
@media screen and (max-width: 600px) {
3685
.audienceGrid {grid-template-columns: repeat(1,1fr); margin: 0;}
3786
}

website/src/pages/users.mdx

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
---
2+
title: Users
3+
description: FINOS CCC Use Cases and User Journeys
4+
hide_table_of_contents: true
5+
---
6+
7+
import ContentPage from '@site/src/components/ContentPage';
8+
import styles from '@site/src/components/AdvanceAutomatedGovernence/styles.module.css';
9+
import MonoIcon from "../components/MonoIcon";
10+
11+
<ContentPage subtitle="Use Cases" title="Who should use FINOS CCC?" toc={toc}>
12+
13+
{/*Image source: https://www.pexels.com/photo/engineer-holding-laptop-1181316/ */}
14+
<img src="/img/pexels-divinetechygirl-1181316.jpg" alt="woman with laptop in servers"/>
15+
<div className={styles.footerImage}>
16+
<MonoIcon />
17+
</div>
18+
### Financial Institutions
19+
**Use Case 1:** A bank or large financial institution operates multiple cloud platforms and has a dedicated team responsible for cloud security, architecture, compliance, and control assurance.
20+
21+
The organization already maintains internal policies and control requirements but needs a consistent way to assess cloud services, identify relevant threats, and map technical controls across cloud providers.
22+
23+
#### How FINOS CCC Can Be Used
24+
25+
The cloud security team can use the FINOS CCC catalogs as a common reference when reviewing new cloud services and architectures.
26+
27+
A typical workflow could include:
28+
* *Identify* the cloud services and capabilities used by the proposed architecture.
29+
* *Review* the threats associated with those capabilities.
30+
* *Select* the relevant FINOS CCC controls.
31+
* *Map* the controls to the organization's internal policies, regulatory requirements, and risk framework.
32+
* *Review* the available test results to understand which controls can be technically validated.
33+
* *Identify* gaps where additional evidence, compensating controls, or risk acceptance may be required.
34+
* *Integrate* applicable tests into continuous compliance or policy-as-code pipelines.
35+
36+
**Example:** A development team proposes a new application using managed Kubernetes, cloud storage, and a managed database.
37+
The cloud security team uses the catalogs to:
38+
39+
* Identify threats related to public exposure, identity, encryption, logging, and data protection;
40+
* Retrieve applicable controls for each cloud capability;
41+
* Map those controls to internal cloud security requirements;
42+
* Determine which controls can be automatically tested;
43+
* Request evidence for controls that cannot be validated automatically;
44+
* Document any remaining risks before the architecture is approved.
45+
46+
**Outcomes:** the organization gains:
47+
* A consistent cloud security review process;
48+
* Reusable mappings between FINOS CCC and internal controls;
49+
* Better traceability between threats, controls, tests, and evidence;
50+
* Reduced duplication across cloud platforms and security teams;
51+
* Opportunities to automate control validation.
52+
53+
<div className={styles.footerImage}>
54+
<MonoIcon />
55+
</div>
56+
57+
### Smaller Organizations
58+
**Use Case 2:** A smaller organization may not have a dedicated cloud security team. Responsibility for cloud controls may belong to one security engineer, cloud architect, platform engineer, or compliance specialist.
59+
60+
The organization needs a practical way to understand which controls matter without creating a complete cloud control framework from the beginning.
61+
62+
#### How FINOS CCC Can Be Used
63+
The person responsible for cloud security can use the catalogs as a structured checklist and learning resource.
64+
65+
A typical workflow could include:
66+
67+
* Identify the cloud services used by the organization.
68+
* Find the corresponding service capabilities in the catalogs.
69+
* Review the associated threats to understand the main risks.
70+
* Select the controls that are relevant to the organization's environment.
71+
* Review available tests to determine whether the controls are implemented correctly.
72+
* Prioritize controls based on risk, starting with identity, network exposure, encryption, logging, and data protection.
73+
* Record controls that require manual verification or future improvement.
74+
75+
**Example:** A small financial technology company runs an application using cloud storage, serverless functions, and a managed database.
76+
77+
The person responsible for security uses FINOS CCC to:
78+
79+
* Understand the main threats affecting each service;
80+
* Create an initial cloud security baseline;
81+
* Identify configuration checks that can be automated;
82+
* Verify existing cloud configurations using available tests;
83+
* Create a prioritized remediation backlog;
84+
* Provide evidence to customers, auditors, or business stakeholders.
85+
86+
**Outcomes:** the organization gains:
87+
88+
* A consistent cloud security review process;
89+
* Reusable mappings between FINOS CCC and internal controls;
90+
* Better traceability between threats, controls, tests, and evidence;
91+
* Reduced duplication across cloud platforms and security teams;
92+
* Opportunities to automate control validation.
93+
94+
<div className={styles.footerImage}>
95+
<MonoIcon />
96+
</div>
97+
</ContentPage>
4.33 MB
Loading

0 commit comments

Comments
 (0)