feat: website release v2 (#616)

* feat: upgrade to svelte 5 & tailwind v4 + add navigation menu to ui package

* feat: website navigation with nav menu from shadcn

* chore: refactor navigation menu storybook

* fix: responsiveness bug

* chore: remove tailwind config file

* chore:
- remove carbon icons from repo
- add Geist font family

* refactor website

---------

Co-authored-by: Rotimi Best <[email protected]>

apps/website/src/app.css

@@ -1,13 +1,17 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap');
+
+@import 'tailwindcss';
+
+@import '@cio/ui/output.css';
+
+@custom-variant dark (&:where(.dark, .dark *));
 
 body {
   overflow-x: hidden;
 }
 
-li {
-  font-family: 'Inter', sans-serif;
+* {
+  font-family: 'Geist', sans-serif;
 }
 
 .floating {
@@ -21,6 +25,7 @@ li {
     -webkit-transform: translateY(0rem);
     transform: translateY(0rem);
   }
+
   50% {
     -webkit-transform: translateY(1rem);
     transform: translateY(1rem);
@@ -33,34 +38,42 @@ li {
     -webkit-transform: translateY(0rem);
     transform: translateY(0rem);
   }
+
   50% {
     -webkit-transform: translateY(1rem);
     transform: translateY(1rem);
   }
 }
+
 .prose {
-  font-family: 'Inter', sans-serif;
+  font-family: 'Geist', sans-serif;
 }
 
 .prose :is(h1, h2, h3, h4, h5, h6) {
   font-weight: 700;
   margin-top: 20px;
 }
+
 .prose :is(h1) {
   font-size: 2em;
 }
+
 .prose :is(h2) {
   font-size: 1.5em;
 }
+
 .prose :is(h3) {
   font-size: 1.17em;
 }
+
 .prose :is(h4) {
   font-size: 1em;
 }
+
 .prose :is(h5) {
   font-size: 0.83em;
 }
+
 .prose :is(h6) {
   font-size: 0.67em;
 }
@@ -82,6 +95,7 @@ li {
   border-radius: 8px;
   tab-size: 2;
 }
+
 .prose blockquote {
   border-left: 4px solid gray;
   font-style: italic;
@@ -89,6 +103,7 @@ li {
   padding-left: 16px;
   margin: 20px 0;
 }
+
 .prose figure + em {
   display: block;
   font-size: 14px;
@@ -105,11 +120,13 @@ li {
 .tools-hero-bg {
   background-image: url('https://assets.cdn.clsrio.com/www/tools-hero-bg.svg');
 }
+
 @media (min-width: 760px) {
   .tools-hero-bg {
     min-height: 350px;
   }
 }
+
 .cio-bg-blue {
   background: rgb(2, 51, 189);
   background-size: cover;
@@ -122,8 +139,20 @@ li {
   border-radius: 0.375rem;
 }
 
+svg.lucide-icon:not(.custom) {
+  color: #666666;
+}
+
+.dark svg.lucide-icon:not(.custom) {
+  color: #fff;
+}
+
 @media (min-width: 640px) {
   .embed {
     width: 560px;
   }
 }
+
+body {
+  --primary: var(--color-blue-700);
+}