[OP-199] Documentation Improvements

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 RoleModel Software
+Copyright (c) 2025 RoleModel Software
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -46,33 +46,33 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.23.9",
-    "@storybook/addon-essentials": "^8.1.3",
-    "@storybook/blocks": "^8.1.3",
-    "@storybook/html": "^8.1.3",
-    "@storybook/html-vite": "^8.1.3",
-    "@storybook/manager-api": "^8.1.3",
-    "@storybook/preview-api": "^8.1.3",
-    "@storybook/test": "^8.1.3",
-    "@storybook/theming": "^8.1.3",
+    "@storybook/addon-essentials": "^8.5.3",
+    "@storybook/blocks": "^8.5.3",
+    "@storybook/html": "^8.5.3",
+    "@storybook/html-vite": "^8.5.3",
+    "@storybook/manager-api": "^8.5.3",
+    "@storybook/preview-api": "^8.5.3",
+    "@storybook/test": "^8.5.3",
+    "@storybook/theming": "^8.5.3",
     "eslint": "^8.45.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^16.0.1",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.11.2",
     "generate-template-files": "^3.2.1",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
     "prettier": "^3.0.0",
-    "storybook": "^8.1.3",
+    "storybook": "^8.5.3",
     "storybook-design-token": "^3.1.0",
     "style-loader": "^3.3.3",
     "stylelint": "^16.2.1",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-prettier": "^5.0.0",
-    "vite": "^5.2.11"
+    "vite": "^5.4.14"
   },
   "peerDependencies": {
     "tom-select": "^2.0.0"

src/stories/Overview/Introduction.mdx

@@ -21,18 +21,32 @@ import packageData from '../../../package.json'
 
 </div>
 
-<div className="card card--company card--shadow-x-small">
-  <div className="card card--company card__info">
-    <img className="card card__company card__info-logo" src="./public/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 className='flex flex-col gap-md'>
+  <div className="card card--company card--shadow-x-small">
+    <div className="card__info">
+      <img className="card__info-logo" src="./public/rms-logo.svg" alt="RoleModel Software Logo" />
+      Optics, a RoleModel Software innovation, is a product of our mission to deliver exceptional digital products.
+    </div>
+    <a className="btn" href="https://rolemodelsoftware.com/" target="_blank">
+      Learn About RoleModel Software
+      <span className="material-symbols-outlined sb-unstyled">open_in_new</span>
+    </a>
+  </div>
+
+  <div className="card card--company card--shadow-x-small">
+    <div className="card__info">
+      <img className="card__info-logo" src="./public/optics-logo.svg" alt="Optics Logo" />
+      Optics embodies the RoleModel ethos of deep collaboration, uniting our team's diverse expertise with the shared
+      goal of crafting excellent design solutions and our commitment to Character, Collaboration, and Craftsmanship.
+    </div>
+    <a className="btn" href="https://optics.rolemodel.design/" target="_blank">
+      Learn About The Vision Behind Optics
+      <span className="material-symbols-outlined sb-unstyled">open_in_new</span>
+    </a>
   </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 css package that provides base styles and components that can be integrated and customized in a variety of projects.
+Optics is a CSS package that provides base styles and components that can be integrated and customized in a variety of projects.
 
 ## Installation