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 <best@classroomio.com>

apps/website/src/routes/blog/+page.svelte

@@ -1,7 +1,5 @@
 <script>
-  import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
-  import PageHeader from '$lib/PageHeader/PageHeader.svelte';
-  import BlogListItem from '$lib/Blog/BlogListItem.svelte';
+  import { PageSignupCTA, PageHeader, BlogListItem } from '$lib/components';
 
   export let data;
 </script>
@@ -12,9 +10,7 @@
 
 <section>
   <PageHeader className="flex flex-col items-center justify-center text-center">
-    <h1
-      class="mx-auto text-4xl md:text-7xl lg:text-6xl font-bold text-slate-900 flex flex-col items-center"
-    >
+    <h1 class="mx-auto text-4xl md:text-6xl text-slate-900 flex flex-col items-center">
       <span>What's new on</span>
       <span class="text-blue-700 relative">ClassroomIO?</span>
     </h1>

apps/website/src/routes/blog/+page.ts

@@ -1,4 +1,4 @@
-import type { BlogPost } from '$lib/types';
+import type { BlogPost } from '$lib/utils/types';
 
 /** @type {import('./$types').PageLoad} */
 export async function load({ fetch }) {

apps/website/src/routes/blog/[slug]/+page.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-  import { ChevronLeft } from 'carbon-icons-svelte';
-  import Chip from '$lib/Chip/Chip.svelte';
-  import { formatDate } from '$lib/utils/formatDate';
-  import BlogListItem from '$lib/Blog/BlogListItem.svelte';
+  import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+  import { Badge } from '@cio/ui/base/badge';
+  import { formatDate } from '$lib/utils/format-date';
+  import { Button } from '@cio/ui/base/button';
+
+  import { BlogListItem } from '$lib/components';
 
   export let data;
 </script>
@@ -11,13 +13,13 @@
   {#if data}
     <article class="py-16">
       <!-- Title -->
-      <hgroup class="flex flex-col items-center justify-center text-center w-full">
+      <hgroup class="flex w-full flex-col items-center justify-center text-center">
         <p class="text-sm text-gray-500">{formatDate(data.meta.date)}</p>
-        <p class="font-bold text-3xl py-2 text-center md:w-[60%]">{@html data.meta.title}</p>
+        <p class="py-2 text-center text-3xl font-bold md:w-[60%]">{@html data.meta.title}</p>
       </hgroup>
-      <main class="mx-auto max-w-screen-md px-4 lg:px-8">
-        <div class="flex items-center justify-start gap-4 my-2 border-y border-gray-200 py-4">
-          <img loading="lazy" src={data.meta.avatar} alt="avatar" class="w-10 h-10 rounded-full" />
+      <main class="mx-auto max-w-3xl px-4 lg:px-8">
+        <div class="my-2 flex items-center justify-start gap-4 border-y border-gray-200 py-4">
+          <img loading="lazy" src={data.meta.avatar} alt="avatar" class="h-10 w-10 rounded-full" />
           <span>
             <p class="font-semibold">{data.meta.author}</p>
             <p class="text-gray-500">{data.meta.role}</p>
@@ -25,12 +27,12 @@
         </div>
 
         <!-- Post -->
-        <div class="prose pt-2 pb-4 border-b-2 border-gray-200">
+        <div class="prose border-b-2 border-gray-200 pb-4 pt-2">
           <svelte:component this={data.content} />
           <!-- Tags -->
           <div class="flex gap-2 py-4">
             {#each data.meta.tags as tag}
-              <Chip label={tag} />
+              <Badge variant="outline">{tag}</Badge>
             {/each}
           </div>
         </div>
@@ -40,7 +42,7 @@
             <p class="text-xl font-semibold">Related Posts</p>
             <ul class="flex items-start justify-start gap-3 overflow-x-scroll">
               {#each data.relatedPosts as post}
-                <li class="py-10 min-w-[80%] sm:w-80 sm:min-w-0">
+                <li class="min-w-[80%] py-10 sm:w-80 sm:min-w-0">
                   <BlogListItem {post} isRecommended />
                 </li>
               {/each}
@@ -48,12 +50,9 @@
           </section>
         {/if}
 
-        <a
-          href="/blog"
-          class="flex font-medium items-center gap-2 text-slate-700 text-lg underline my-10"
-        >
-          <ChevronLeft class=" w-6 h-6 font-medium" /> Back to all posts
-        </a>
+        <Button href="/blog" variant="link">
+          <ChevronLeft /> Back to all posts
+        </Button>
       </main>
     </article>
   {/if}

apps/website/src/routes/blog/[slug]/+page.ts

@@ -1,5 +1,5 @@
 import { error } from '@sveltejs/kit';
-import type { BlogPost, RawBlogPost } from '$lib/types';
+import type { BlogPost, RawBlogPost } from '$lib/utils/types';
 import type { MetaTagsProps } from 'svelte-meta-tags';
 
 /** @type {import('./$types').PageLoad} */