case study layout

Signed-off-by: Gaurav Chadha <[email protected]>
layer5io · Jun 28, 2023 · d474808 · d474808
1 parent fe62734
commit d474808
Show file tree

Hide file tree

Showing 7 changed files with 209 additions and 15 deletions.
diff --git a/src/collections/resources/articles/intel-case-study/data.js b/src/collections/resources/articles/intel-case-study/data.js
@@ -0,0 +1,4 @@
+export const about = "datatatalktjeaelkfj";
+import svg from "./meshery-and-hpe.svg";
+
+export const challenges = ` ${svg} 0flkdsjflkdsajfasldkfjdslksfjldskfj`;
diff --git a/src/collections/resources/articles/intel-case-study/index.mdx b/src/collections/resources/articles/intel-case-study/index.mdx
@@ -0,0 +1,25 @@
+---
+title: Intel Case Study
+subtitle:
+date: 2023-06-29 08:00:00 -0530
+author: HPE
+thumbnail: ./meshery-and-hpe.svg
+darkthumbnail: ./meshery-and-hpe.svg
+description: "Intel Case Study"
+type: Case Study
+category: Cloud Native
+tags:
+  - Cloud Native, Meshery
+featured: false
+published: true
+resource: true
+---
+import CaseStudyLayout from "../../../../components/Case-Study-Layout";
+import {about, challenges} from "./data.js";
+import mesheryhpe from "./meshery-and-hpe.svg";
+
+
+<ResourceWrapper>
+    <CaseStudyLayout description="Customer Story" aboutCompany={about} challenges={challenges} companyImage={mesheryhpe}>
+    </CaseStudyLayout>
+</ResourceWrapper>
diff --git a/src/collections/resources/articles/intel-case-study/meshery-and-hpe.svg b/src/collections/resources/articles/intel-case-study/meshery-and-hpe.svg
diff --git a/src/components/Case-Study-Layout/globe.svg b/src/components/Case-Study-Layout/globe.svg
diff --git a/src/components/Case-Study-Layout/index.js b/src/components/Case-Study-Layout/index.js
@@ -0,0 +1,115 @@
+import React from "react";
+import styled from "styled-components";
+import { Row, Col } from "../../reusecore/Layout";
+import GlobeIcon from "./globe.svg";
+const CaseStudyWrapper = styled.div`
+.hero-text {
+    text-align: center;
+}
+.facts {
+    margin: 5% 0%;
+    padding: 5% 5% 5% 15%;
+    .facts-row {
+        flex-wrap: nowrap;
+    }
+}
+.about-the-company {
+    display: flex;
+    flex-direction: row;
+    background-color: #00B39F;
+    padding: 10%;
+    img {
+        padding: 3%;
+    }
+    p {
+        padding: 3%;
+    }
+}
+.challenges {
+    display: flex;
+    margin: 10% 0%;
+    h2 {
+        flex: 0 0 30%;
+        text-align: left;
+    }
+}
+.why-layer5 {
+    display: flex;
+    margin: 10% 0%;
+    h2 {
+        flex: 0 0 30%;
+        text-align: left;
+    }
+}
+.outcomes {
+    display: flex;
+    margin: 10% 0%;
+    h2 {
+        flex: 0 0 30%;
+        text-align: left;
+    }
+}
+`;
+const CaseStudyLayout = (props) => {
+  return (
+    <CaseStudyWrapper>
+      <div className="hero-text">
+        <h1>{props.title}</h1>
+        <p>{props.description}</p>
+      </div>
+      <div className="facts">
+        <Row className="facts-row">
+          <Col>
+            <img src={GlobeIcon} />
+            <p>HPE and meshery</p>
+          </Col>
+          <Col>
+            <img src={GlobeIcon} />
+            <p>HPE and meshery</p>
+          </Col>
+          <Col>
+            <img src={GlobeIcon} />
+            <p>HPE and meshery</p>
+          </Col>
+        </Row>
+        <Row className="facts-row">
+          <Col>
+            <img src={GlobeIcon} />
+            <p>HPE and meshery</p>
+          </Col>
+          <Col>
+            <img src={GlobeIcon} />
+            <p>HPE and meshery</p>
+          </Col>
+          <Col>
+            <img src={GlobeIcon} />
+            <p>HPE and meshery</p>
+          </Col>
+        </Row>
+      </div>
+      <div className="about-the-company">
+        <img src={props.companyImage} />
+        <p>{props.aboutCompany}</p>
+      </div>
+      <div className="challenges">
+        <h2>Challenges</h2>
+        <p>{props.challenges}</p>
+      </div>
+      <div className="why-layer5">
+        <h2>Why Layer5</h2>
+        <p>{props.whyLayer5}</p>
+      </div>
+      <div className="outcomes">
+        <h2>Outcomes</h2>
+        <p>{props.outcomes}</p>
+      </div>
+      <div className="partners">
+      </div>
+      <div className="tech-stack">
+      </div>
+      <div className="cta">
+      </div>
+    </CaseStudyWrapper>
+  );
+};
+export default CaseStudyLayout;
diff --git a/src/sections/Community/Handbook/BookComponent/BookComponent.js b/src/sections/Community/Handbook/BookComponent/BookComponent.js
@@ -1,28 +1,28 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
 import BookComponentWrapper from "./BookComponent.style";
 import handbookdark from "../images/handbook-dark.webp";
-import { Link } from 'gatsby';
+import { Link } from "gatsby";
 
 const BookComponent = () => {
   useEffect(() => {
-    const bookElement = document.querySelector('.book');
-    bookElement.classList.add('rot-on-rel');
+    const bookElement = document.querySelector(".book");
+    bookElement.classList.add("rot-on-rel");
   }, []);
   return (
     <BookComponentWrapper>
-    <Link
+      <Link
         className="book-container"
         to="/community/handbook"
         target="_blank"
         rel="noreferrer noopener"
       >
-      <div className="book">
-        <img
-          alt="Community HandBook"
-          src={handbookdark}
-        />
-      </div>
-    </Link>
+        <div className="book">
+          <img
+            alt="Community HandBook"
+            src={handbookdark}
+          />
+        </div>
+      </Link>
     </BookComponentWrapper>
   );
 };

diff --git a/src/sections/Community/Meshmates/index.js b/src/sections/Community/Meshmates/index.js
@@ -82,9 +82,9 @@ const Meshmates = () => {
           <h5> What to Expect </h5>
           <h2> Engaging with a MeshMate</h2>
           <div className="bookcomponent"><BookComponent/></div>
-          <p> The program pairs experienced Layer5 community members with community newcomers to ensure a smooth onboarding experience. There is a lot going in the Layer5 community. Projects and working groups move fast. MeshMates are committed to helping their mentees in identifying an area of the projects to engage within, working groups to join, growing their Cloud Native knowledge, and network of relationships. By connecting one-on-one, MeshMates will share tips on how to have the best community experience possible. </p>       
-          <p> Meshtees are encouraged to reach out to any MeshMate directly in order to pair up. Introduce yourself either on in the <a href="https://discuss.layer5.io/c/community/12">Layer5 discussion forum</a>. Help your MeshMate understand your current skills, ideal topics of learning, and areas of passion. Doing so will help them to point out various aspects of projects that you might find your first foothold. </p>          
-        </div>       
+          <p> The program pairs experienced Layer5 community members with community newcomers to ensure a smooth onboarding experience. There is a lot going in the Layer5 community. Projects and working groups move fast. MeshMates are committed to helping their mentees in identifying an area of the projects to engage within, working groups to join, growing their Cloud Native knowledge, and network of relationships. By connecting one-on-one, MeshMates will share tips on how to have the best community experience possible. </p>
+          <p> Meshtees are encouraged to reach out to any MeshMate directly in order to pair up. Introduce yourself either on in the <a href="https://discuss.layer5.io/c/community/12">Layer5 discussion forum</a>. Help your MeshMate understand your current skills, ideal topics of learning, and areas of passion. Doing so will help them to point out various aspects of projects that you might find your first foothold. </p>
+        </div>
         <div className="meshmate-meet">
           <Row Vcenter>
             <Col sm={12} lg={6}>