Draft

src/components/Service/Morningstar/Header/index.jsx

@@ -0,0 +1,24 @@
+import Link from '@docusaurus/Link';
+import React from 'react';
+import styles from './styles.module.scss';
+import { LinkButton, ButtonContainer } from '/src/theme/Buttons';
+
+export default function StudyHeader() {
+  return (
+    <header className={styles.headerSecurity}>
+      <div className="container">
+        <div className={styles.box}>
+          <div className={styles.logo}></div>
+          <span>Case Study</span>
+          <h1>Building an Intelligence Engine</h1>
+          <div className={styles.headerBox}>
+            <p>
+              How Morningstar built a trustworthy, AI-driven financial data
+              platform with Weaviate
+            </p>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

src/components/Service/Morningstar/Header/styles.module.scss

@@ -0,0 +1,97 @@
+.box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  text-align: left;
+  margin-bottom: 40px;
+
+  span {
+    color: #61bb73;
+    font-size: 1.25rem;
+    font-weight: 400;
+    text-transform: uppercase;
+  }
+
+  .logo {
+    background-image: url('/img/site/Morningstar.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 12.09331rem;
+    height: 3.25rem;
+    flex-shrink: 0;
+  }
+
+  h1 {
+    color: #ffffff;
+    font-size: 2.25rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    width: 50%;
+    @media screen and (max-width: 900px) {
+      width: 100%;
+    }
+  }
+
+  .headerBox {
+    width: 50%;
+    @media screen and (max-width: 900px) {
+      width: 100%;
+    }
+
+    p {
+      color: #ffffff;
+      width: 80%;
+      @media screen and (max-width: 1000px) {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.buttonOutline {
+  border-radius: 0.3125rem;
+  border: 1px solid #130c49;
+  background: #f4f4f4;
+  padding: 9px;
+  color: #130c49;
+  text-align: center;
+  font-family: Inter;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 157.33%;
+  transition: all 1s ease-out;
+}
+.buttonOutline:hover {
+  border-radius: 0.3125rem;
+  outline: 1px solid #130c49;
+  background: rgb(15, 0, 50);
+  color: #fff;
+  font-weight: 400;
+}
+
+.headerSecurity {
+  background: #130c49;
+  background-image: url('/img/site/header-bg.svg');
+  background-size: cover;
+
+  @media screen and (max-width: 500px) {
+    background-image: url('/img/site/header-bg.svg');
+    background-size: 100%;
+    background-position-y: bottom;
+    background-repeat: no-repeat;
+  }
+}
+
+.topText {
+  color: #130c49;
+  text-align: center;
+  font-family: Plus Jakarta Sans;
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 120%; /* 1.5rem */
+  text-transform: uppercase;
+  margin: 10px 0px;
+}

src/components/Service/Morningstar/Integrations/index.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ButtonContainer } from '../../../../theme/Buttons';
+import styles from './styles.module.scss';
+import { LinkButton } from '/src/theme/Buttons';
+import Link from '@docusaurus/Link';
+
+export default function Integrations() {
+  return (
+    <div className={styles.integrationsSection}>
+      <div className="container">
+        <div className={styles.teamContainer}>
+          <h3>
+            Our team and community are here to support you at every stage of
+            your AI journey.
+          </h3>
+          <div className={styles.buttons}>
+            <Link className={styles.buttonGradient} to="#contact-sales">
+              Get in Touch
+            </Link>
+            <Link className={styles.buttonOutline} to="/services">
+              Check our Services
+            </Link>
+          </div>
+          <div className={styles.parentGrid}>
+            <div className={styles.imageGrid1}> </div>
+            <div className={styles.imageGrid2}> </div>
+            <div className={styles.imageGrid3}> </div>
+            <div className={styles.imageGrid4}> </div>
+            <div className={styles.imageGrid5}> </div>
+            <div className={styles.imageGrid6}> </div>
+          </div>
+          <div className={styles.mobileImage}></div>
+        </div>
+      </div>
+    </div>
+  );
+}