Add Optics logo to documentation along with company info (#225)

.storybook/documentation.scss

@@ -137,3 +137,36 @@ html {
     line-height: 19px;
   }
 }
+
+// Company Card
+.card-company {
+  @extend %card-global;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--op-space-large);
+  gap: var(--op-space-large);
+
+  .card-company__info {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-x-large);
+
+    .card-company__info-logo {
+      width: calc(var(--op-size-unit) * 24); // 96px
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  @media (width <= $breakpoint-small) {
+    flex-direction: column;
+
+    .btn {
+      width: 100%;
+    }
+  }
+}

.storybook/main.js

@@ -36,6 +36,7 @@ const config = {
   core: {
     disableTelemetry: true, // 👈 Disables telemetry
   },
+  staticDirs: ['./public'],
 }
 
 export default config

.storybook/rolemodelTheme.js

@@ -1,5 +1,5 @@
 import { create } from '@storybook/theming/create'
-import logoUrl from './public/optics.svg'
+import logoUrl from './public/optics-logo.svg'
 
 export default create({
   base: 'light',

src/stories/Overview/Introduction.mdx

@@ -21,6 +21,17 @@ import packageData from '../../../package.json'
 
 </div>
 
+<div className="card-company card--shadow-x-small">
+  <div className="card-company__info">
+    <img className="card-company__info-logo" src="./rms-logo.svg" alt="RoleModel Software Logo" />
+    <p>Optics, a RoleModel Software innovation, is a product of our mission to deliver exceptional digital products.</p>
+  </div>
+  <a className="btn" href="https://rolemodelsoftware.com/">
+    Learn About RoleModel Software
+    <span className="material-symbols-outlined sb-unstyled">open_in_new</span>
+  </a>
+</div>
+
 Optics is an scss package that provides base styles and components that can be integrated and customized in a variety of projects.
 
 ## Installation