From d474808a874fc485e2ba4aecce1c54bb23b2aa4b Mon Sep 17 00:00:00 2001 From: Gaurav Chadha Date: Thu, 29 Jun 2023 01:33:09 +0530 Subject: [PATCH] case study layout Signed-off-by: Gaurav Chadha --- .../articles/intel-case-study/data.js | 4 + .../articles/intel-case-study/index.mdx | 25 ++++ .../intel-case-study/meshery-and-hpe.svg | 47 +++++++ src/components/Case-Study-Layout/globe.svg | 3 + src/components/Case-Study-Layout/index.js | 115 ++++++++++++++++++ .../Handbook/BookComponent/BookComponent.js | 24 ++-- src/sections/Community/Meshmates/index.js | 6 +- 7 files changed, 209 insertions(+), 15 deletions(-) create mode 100644 src/collections/resources/articles/intel-case-study/data.js create mode 100644 src/collections/resources/articles/intel-case-study/index.mdx create mode 100644 src/collections/resources/articles/intel-case-study/meshery-and-hpe.svg create mode 100644 src/components/Case-Study-Layout/globe.svg create mode 100644 src/components/Case-Study-Layout/index.js diff --git a/src/collections/resources/articles/intel-case-study/data.js b/src/collections/resources/articles/intel-case-study/data.js new file mode 100644 index 000000000000..9e1218d211aa --- /dev/null +++ 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`; \ No newline at end of file diff --git a/src/collections/resources/articles/intel-case-study/index.mdx b/src/collections/resources/articles/intel-case-study/index.mdx new file mode 100644 index 000000000000..756b7c418c3b --- /dev/null +++ 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"; + + + + + + \ No newline at end of file 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 new file mode 100644 index 000000000000..a0d0868fbf0f --- /dev/null +++ b/src/collections/resources/articles/intel-case-study/meshery-and-hpe.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Case-Study-Layout/globe.svg b/src/components/Case-Study-Layout/globe.svg new file mode 100644 index 000000000000..df584dffb523 --- /dev/null +++ b/src/components/Case-Study-Layout/globe.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Case-Study-Layout/index.js b/src/components/Case-Study-Layout/index.js new file mode 100644 index 000000000000..410dc020fa83 --- /dev/null +++ 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 ( + +
+

{props.title}

+

{props.description}

+
+
+ + + +

HPE and meshery

+ + + +

HPE and meshery

+ + + +

HPE and meshery

+ + + + + +

HPE and meshery

+ + + +

HPE and meshery

+ + + +

HPE and meshery

+ + +
+
+ +

{props.aboutCompany}

+
+
+

Challenges

+

{props.challenges}

+
+
+

Why Layer5

+

{props.whyLayer5}

+
+
+

Outcomes

+

{props.outcomes}

+
+
+
+
+
+
+
+ + ); +}; +export default CaseStudyLayout; \ No newline at end of file diff --git a/src/sections/Community/Handbook/BookComponent/BookComponent.js b/src/sections/Community/Handbook/BookComponent/BookComponent.js index 5b30af7fa4a8..1a5aa0aeb56e 100644 --- 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 ( - -
- Community HandBook -
- +
+ Community HandBook +
+ ); }; diff --git a/src/sections/Community/Meshmates/index.js b/src/sections/Community/Meshmates/index.js index 6ec1e57ae318..c39d40e3da63 100644 --- a/src/sections/Community/Meshmates/index.js +++ b/src/sections/Community/Meshmates/index.js @@ -82,9 +82,9 @@ const Meshmates = () => {
What to Expect

Engaging with a MeshMate

-

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.

-

Meshtees are encouraged to reach out to any MeshMate directly in order to pair up. Introduce yourself either on in the Layer5 discussion forum. 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.

- +

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.

+

Meshtees are encouraged to reach out to any MeshMate directly in order to pair up. Introduce yourself either on in the Layer5 discussion forum. 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.

+