feat: reorganize video section and update styles in App component

Signed-off-by: Lee Calcote <[email protected]>
meshery · Nov 27, 2024 · 5abe4fd · 5abe4fd
1 parent 8650f4b
commit 5abe4fd
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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}>