ui: Include figure on OpenDC 2.0 architecture

3 files changed, 47 insertions, 21 deletions

diff --git a/opendc-web/opendc-web-ui/public/img/opendc-architecture.png b/opendc-web/opendc-web-ui/public/img/opendc-architecture.png
new file mode 100644
index 00000000..e0bf8e9b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/public/img/opendc-architecture.png
diff --git a/opendc-web/opendc-web-ui/public/img/opendc-timeline-v2.png b/opendc-web/opendc-web-ui/public/img/opendc-timeline-v2.png
new file mode 100644
index 00000000..0b2821c4
--- /dev/null
+++ b/opendc-web/opendc-web-ui/public/img/opendc-timeline-v2.png
diff --git a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
index 739a5d11..8e98717a 100644
--- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
@@ -1,24 +1,50 @@
 import React from 'react'
-import ScreenshotSection from './ScreenshotSection'
+import { Col, Row } from 'reactstrap'
+import ContentSection from './ContentSection'
 
-const ModelingSection = () => (
-    <ScreenshotSection
-        name="project"
-        title="Datacenter Simulation"
-        imageUrl="/img/screenshot-simulation.png"
-        caption="Running an experiment in OpenDC"
-        imageIsRight={false}
-    >
-        <h3>Working with OpenDC:</h3>
-        <ul>
-            <li>Seamlessly switch between construction and simulation modes</li>
-            <li>
-                Choose one of several predefined workloads (Business Critical, Workflows, Machine Learning, Serverless,
-                etc.)
-            </li>
-            <li>Compare datacenter topologies using automated plots and visual summaries</li>
-        </ul>
-    </ScreenshotSection>
-)
+const SimulationSection = () => {
+    return (
+        <ContentSection name="project" title="Datecenter Simulation">
+            <Row>
+                <Col xl="5" lg="5" md="5" sm="2" className="text-left my-auto order-1">
+                    <h3>Working with OpenDC:</h3>
+                    <ul>
+                        <li>Seamlessly switch between construction and simulation modes</li>
+                        <li>
+                            Choose one of several predefined workloads (Business Critical, Workflows, Machine Learning,
+                            Serverless, etc.)
+                        </li>
+                        <li>Compare datacenter topologies using automated plots and visual summaries</li>
+                    </ul>
+                </Col>
+                <Col xl="7" lg="7" md="7" sm="12">
+                    <img
+                        src="/img/screenshot-simulation.png"
+                        className="col-12 screenshot"
+                        alt="Running an experiment in OpenDC"
+                    />
+                    <Row className="text-muted justify-content-center">Running an experiment in OpenDC</Row>
+                </Col>
+            </Row>
+            <Row className="mt-5">
+                <Col xl="5" lg="5" md="5" sm="2" className="text-left my-auto">
+                    <h3>OpenDC's Simulator:</h3>
+                    <ul>
+                        <li>Includes a detailed operational model of modern datacenters</li>
+                        <li>
+                            Support for emerging datacenter technologies around <em>cloud computing</em>,{' '}
+                            <em>serverless computing</em>, <em>big data</em>, and <em>machine learning</em>
+                        </li>
+                    </ul>
+                </Col>
 
-export default ModelingSection
+                <Col xl="7" lg="7" md="7" sm="12">
+                    <img src="/img/opendc-architecture.png" className="col-12 screenshot" alt="OpenDC's Architecture" />
+                    <Row className="text-muted justify-content-center">OpenDC's Architecture</Row>
+                </Col>
+            </Row>
+        </ContentSection>
+    )
+}
+
+export default SimulationSection