Flesh out homepage for initial release

src/components/HomepageFeatures/index.tsx

@@ -3,8 +3,6 @@ import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 
 import UndrawAlienScience from './img/undraw_alien_science.svg';
-import UndrawDeveloperActivity from './img/undraw_developer_activity.svg';
-import UndrawEngineeringTeam from './img/undraw_engineering_team.svg';
 import UndrawInformedDecision from './img/undraw_informed_decision.svg';
 import UndrawServerCluster from './img/undraw_server_cluster.svg';
 
@@ -21,10 +19,9 @@ const FeatureList: FeatureItem[] = [
     Svg: UndrawServerCluster,
     description: (
       <>
-        Through installers, OKD can deploy into clouds, lab environments or metal. Depending
-        on your platform installation could be fully automated, partially automated or require
-        manual work. OKD controls the full operating system of each host, configurable through the
-        Kubernetes API.
+        OKD is intended to be run at all scales from cloud to metal to edge. 
+        The installer is fully automated on some platforms (such as AWS), or
+        supports configuration into custom environments (such as metal or labs).
       </>
     ),
   },
@@ -33,10 +30,9 @@ const FeatureList: FeatureItem[] = [
     Svg: UndrawInformedDecision,
     description: (
       <>
-        The landscape of cloud tools is vast. A community of practice means there is precedence on
-        what to use (e.g GitOps, CI/CD, Service Mesh, etc).
-        This is expressed through how OKD is deployed, the cluster components included and
-        the operators chosen to be included in catalogs.
+        The cloud landscape is vast. From GitOps to Service Meshes, Virtualisation to Storage, OKD integrated 
+        deployments of leading projects. Recommended Design Patterns enchance security posture
+        and defaults include hardended configuration 
       </>
     ),
   },
@@ -45,7 +41,9 @@ const FeatureList: FeatureItem[] = [
     Svg: UndrawAlienScience,
     description: (
       <>
-        OKD uses evolving best practice design patterns and software. We can be used as a testground for 
+        OKD adopts developing best practise and technology. A great platform for technologists and students 
+        to learn, experiment and contribute across the cloud ecosystem. For OpenShift contributors and partners
+        our technical similarity makes us an ideal lab and development environemnt.
       </>
     ),
   },

src/components/HomepageInsideOKD/index.tsx

@@ -1,19 +1,63 @@
 import clsx from 'clsx';
 import styles from './styles.module.scss';
 
+
+
 export default function HomagepageInsideOKD(): JSX.Element {
     return (
         <div className="container padding-top--md padding-bottom--xl">
-            <h2>What's in the box? (in progress)</h2>
-            <p>This is a component that should go through and explain what makes up OKD</p>
-            <ul>
-                <li>Operating System - Fedora CoreOS or SCOS (an immutable operating system)</li>
-                <li>Kubernetes - A slightly modified version of Kubernetes with some extra features</li>
-                <li>Core Cluster Components - Console, OVN-Kubernetes, Monitoring, etcd, MCO...</li>
-                <li>Specialised Design Patterns - S2I, dealing with non-root and SCC the "OKD/Openshift" way</li>
-                <li>Okderators - Opinionated, integrated, deployments of operators such as KubeVirt, Rook-Ceph, etc</li>
-            </ul>
-            <p>Just needs to look a bit prettier... thinking of basing it off the "Customer Stories" component from Apache Doris site</p>
+            <div className={clsx('padding-top--sm', 'padding-left--sm', 'padding-bottom--sm', styles.inTheBoxHeader)}><h2>What's in the box?</h2></div>
+            <div className="row">
+                {THE_BOX.map((boxItem) => (
+                    <div className="card col margin--md" key={boxItem.id}>
+                        <div className="card__header">
+                            <h3>{boxItem.title}</h3>
+                        </div>
+                        <div className="card__body">
+                            {boxItem.text}
+                        </div>
+                    </div>
+                ))}
+            </div>
+            <div className={clsx('padding-top--sm', 'padding-left--sm', 'padding-bottom--sm', styles.inTheBoxHeader)}></div>
         </div>
     );
-}
+}
+
+
+
+const THE_BOX = [
+    {
+        id: 'os',
+        title: 'Operating System',
+        text: (<>
+            Nodes run an immutable operating system that is updated and managed
+            through cluster APIs.
+        </>),
+    },
+    {
+        id: 'k8s',
+        title: 'Kubernetes',
+        text: (<>
+            The industry leading way to orchestrate. OKD is 100% compliant,
+            with additional patches on some Kubernetes components to support
+            some advanced featuresets.
+        </>),
+    },
+    {
+        id: 'cluster-components',
+        title: 'Cluster Components',
+        text: (<>
+            Full featured web console, authentication, image registry/tooling, monitoring,
+            node config/upgrades, networking and operator management out of the box.
+        </>)
+    },
+    {
+        id: 'okderators',
+        title: 'OKDerators',
+        text: (<>
+            Installable catalog of GitOps, Storage, Mesh and Storage (+ more!) operators
+            using leading OSS projects. Designed to work easily with you and each other.
+        </>)
+    },
+];

src/components/HomepageInsideOKD/styles.module.scss

@@ -0,0 +1,22 @@
+.tabList {
+
+}
+
+.tabItem {
+
+}
+
+.tabContent {
+
+}
+
+.inTheBoxHeader {
+    background-color: var(--ifm-color-primary);
+    //--ifm-hero-text-color: var(--ifm-font-color-base-inverse);
+    //color: var(--ifm-hero-text-color);
+    text-align: center;
+    vertical-align: center;
+    h2 {
+        margin-bottom: 0;
+    }
+}

src/components/HomepageSoWhatIsOKD/index.tsx

@@ -3,15 +3,15 @@ import styles from './styles.module.scss';
 
 export default function HomepageSoWhatIsOKD(): JSX.Element {
     return (
-    <div className="container padding-top--lg">
+    <div className={clsx("container", "padding-top--lg", styles.whatIsContainer)}>
         <div className="row">
             <div className={clsx("col", "col--4", styles.centerArt)}>
                 <img style={{padding: "40px"}} src="img/brand/mascot/mascot_laptop_plugged.svg" />
             </div>
             <div className="col col--8">
                 <h2>So what does that mean exactly?</h2>
                 <p>Cloud buzzwords, right? In short, OKD is a very opinionated deployment of <i>Kubernetes</i>.
-                    Kubernetes is a collection of software and design patters to operate applications at scale.</p>
+                    Kubernetes is a collection of software and design patterns to operate applications at scale.</p>
                 <p>We add some features directly as modifications into Kubernetes, but mostly we augment the platform by "preinstalling"
                     a large amount of pieces of software called "Operators" into the deployed cluster.</p>
                 <p>These operators then provide all of our cluster components (over 100 of them!) which make up the platform, such as OS upgrades, web consoles, monitoring and image building</p>

src/components/HomepageSoWhatIsOKD/styles.module.scss

@@ -2,4 +2,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
+}
+
+.whatIsContainer {
+    background-color: var(--ifm-color-emphasis-200);
 }