From dceed47c17241a25b58437a9772cc418551ac30a Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 9 May 2021 11:11:14 +0200
Subject: ui: Update screenshots of OpenDC user-interface

---
 .../opendc-web-ui/src/components/home/SimulationSection.js     | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/home/SimulationSection.js')

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 b0244cb5..739a5d11 100644
--- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
@@ -5,16 +5,18 @@ const ModelingSection = () => (
     <ScreenshotSection
         name="project"
         title="Datacenter Simulation"
-        imageUrl="/img/screenshot-simulation-zoom.png"
+        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 (Big Data, Bag of Tasks, Hadoop, etc.)</li>
-            <li>Play, pause, and skip around the informative simulation timeline</li>
-            <li>Visualize and demo live</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>
 )
-- 
cgit v1.2.3


From 33e425279f171539205fcda20c6817e9f8e02033 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 9 May 2021 11:37:04 +0200
Subject: ui: Include figure on OpenDC 2.0 architecture

---
 .../src/components/home/SimulationSection.js       | 68 +++++++++++++++-------
 1 file changed, 47 insertions(+), 21 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/home/SimulationSection.js')

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
-- 
cgit v1.2.3