From 5abe4fd747fea30a672b85dda25d9ea6df72e38d Mon Sep 17 00:00:00 2001
From: Lee Calcote <lee.calcote@layer5.io>
Date: Wed, 27 Nov 2024 14:44:55 -0600
Subject: [PATCH] feat: reorganize video section and update styles in App
 component

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
---
 site/src/App.js                  | 26 ++++++++++++++------------
 site/src/App.style.js            |  6 +++++-
 site/src/components/Faq/index.js |  4 ++--
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/site/src/App.js b/site/src/App.js
index f9874b9..a0cb9cd 100644
--- a/site/src/App.js
+++ b/site/src/App.js
@@ -42,19 +42,9 @@ const App = () => {
             <p className="desc-text">
               Explore the Cloud Native Computing Foundation's graduated, incubation, and sandbox projects as well as many other popular open source projects. Use Meshery Playground to explore a new way of DevOps - visual and collaborative configuration management for your infrastructure.
             </p>
-            <ReactPlayer
-              url="https://youtu.be/Do7htKrRzDA"
-              playing
-              controls
-              light={mesheryPlayground}
-              width="90%"
-              style={{ margin: "auto" }}
-              className="embedVideo"
-            />
           </section>
           <section className="playground-btn">
-
-              <div>
+            <div>
               <Button className="continue-btn open-playground-btn" style={{ background: "rgb(235, 192, 23)" }} role="button"  onClick={openModal}>
                 Open Playground
               </Button>
@@ -89,10 +79,22 @@ const App = () => {
                     color: `${props => props.theme.text}`,
                     marginTop: "0.5rem"
                 }}>
-                  On clicking the continue button you will be redirected to Meshery Playground</p></div>
+                  On clicking the continue button you will be redirected to Meshery Playground.</p></div>
             </Modal>
             </div>
           </section>
+          <section className="video">
+            <ReactPlayer
+              url="https://youtu.be/Do7htKrRzDA"
+              playing
+              controls
+              light={mesheryPlayground}
+              width="70%"
+              style={{ margin: "auto" }}
+              className="embedVideo"
+            />
+          </section>
+          
           <div className="community-discuss-wrapper">
           <section className="join-community">
             <div>
diff --git a/site/src/App.style.js b/site/src/App.style.js
index 837e8b2..cb3bb50 100644
--- a/site/src/App.style.js
+++ b/site/src/App.style.js
@@ -210,7 +210,11 @@ export const Main = styled.main`
   .desc-text {
     margin: 0 0 3rem;
   }
-
+  section.video {
+    margin: 4rem auto;
+    display: flex;
+    justify-content: center;
+  }
   .embedVideo {
     height: 44vw !important;
     border-radius: 2.5%;
diff --git a/site/src/components/Faq/index.js b/site/src/components/Faq/index.js
index 52e3ca9..2230326 100644
--- a/site/src/components/Faq/index.js
+++ b/site/src/components/Faq/index.js
@@ -50,9 +50,9 @@ const Faq = (props) => {
           <>
             <h2
               className="category_name"
-              style={{ paddingBottom: 25, textAlign: "center", fontSize: "1.5rem" }}
+              style={{ paddingBottom: 25, textAlign: "center", fontSize: "1.5rem", fontWeight: "normal" }}
             >
-              You are about to access Meshery Playground
+              You are about to access Meshery Playground...
             </h2>
             {faqs[key].map((faq, index) => (
               <AccordionItem key={index}>