1 files changed, 24 insertions, 0 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
new file mode 100644
index 00000000..c987d5d0
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
@@ -0,0 +1,24 @@
+import classNames from 'classnames'
+import React from 'react'
+import ContentSection from './ContentSection'
+import './ScreenshotSection.sass'
+
+const ScreenshotSection = ({ name, title, imageUrl, caption, imageIsRight, children }) => (
+    <ContentSection name={name} title={title}>
+        <div className="row">
+            <div
+                className={classNames('col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 text-left', {
+                    'order-1': !imageIsRight,
+                })}
+            >
+                {children}
+            </div>
+            <div className="col-xl-7 col-lg-7 col-md-7 col-sm-12 col-12">
+                <img src={imageUrl} className="col-12 screenshot" alt={caption} />
+                <div className="row text-muted justify-content-center">{caption}</div>
+            </div>
+        </div>
+    </ContentSection>
+)
+
+export default ScreenshotSection