feat: oss-friends page

apps/classroomio-com/src/routes/blog/+page.svelte

@@ -14,7 +14,7 @@
       class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] text-slate-900 flex flex-col items-center"
     >
       <span>What's new on</span>
-      <span class="text-[#1D4EE2] relative"
+      <span class="text-blue-700 relative"
         >ClassroomIO?
         <svg
           aria-hidden="true"

apps/classroomio-com/src/routes/oss-friends/+page.svelte

@@ -0,0 +1,53 @@
+<script>
+  export let data;
+
+  let { friends } = data;
+</script>
+
+<svelte:head>
+  <title>Our Open-source Friends | ClassroomIO</title>
+</svelte:head>
+
+<div class=" mt-[10%] md:mt-16">
+  <header class="pt-24 pb-16 w-full flex flex-col items-center text-center">
+    <h1
+      class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] text-slate-900 items-center"
+    >
+      Our <span class="text-blue-700">Open-source</span> Friends
+    </h1>
+    <p class="w-[90%] md:w-[60%] text-center font-normal text-lg text-slate-700 mt-10 lg:mt-7">
+      In ClassroomIO, we are committed to building a commercial open source company and here are
+      some of our friends on the same mission.
+    </p>
+  </header>
+  <ul role="list" class="m-4 mt-12 grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
+    {#each friends as friend}
+      <li
+        class="overflow-hidden rounded-md border border-gray-200 flex flex-col justify-between py-6"
+      >
+        <div>
+          <div class="text-xl font-medium leading-6 text-gray-900 pb-1 px-6">
+            {friend.name}
+          </div>
+          <p class="px-6 mt-2 text-gray-600 text-sm">
+            {friend.description}
+          </p>
+        </div>
+        <div class="text-left px-6 mt-3">
+          <a
+            href={friend.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-block w-full"
+          >
+            <button
+              class="font-semibold text-md text-white bg-gray-800 hover:bg-gray-900 hover:shadow-xl transition-all delay-100 px-4 py-3 rounded-md"
+            >
+              Learn more
+            </button>
+          </a>
+        </div>
+      </li>
+    {/each}
+  </ul>
+</div>

apps/classroomio-com/src/routes/oss-friends/+page.ts

@@ -0,0 +1,100 @@
+import type { OssFriend } from '$lib/types';
+
+export async function load() {
+  const friends: OssFriend[] = [
+    {
+      name: 'Appsmith',
+      description: 'Build build custom software on top of your data.',
+      href: 'https://www.appsmith.com'
+    },
+    {
+      name: 'BoxyHQ',
+      description:
+        'BoxyHQ’s suite of APIs for security and privacy helps engineering teams build and ship compliant cloud applications faster.',
+      href: 'https://boxyhq.com'
+    },
+    {
+      name: 'Cal.com',
+      description:
+        'Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.',
+      href: 'https://cal.com'
+    },
+    {
+      name: 'Crowd.dev',
+      description:
+        'Centralize community, product, and customer data to understand which companies are engaging with your open source project.',
+      href: 'https://www.crowd.dev'
+    },
+    {
+      name: 'Documenso',
+      description:
+        'The Open-Source DocuSign Alternative. We aim to earn your trust by enabling you to self-host the platform and examine its inner workings.',
+      href: 'https://documenso.com'
+    },
+    {
+      name: 'Dub',
+      description:
+        'Dub is an open-source link management tool for modern marketing teams to create, share, and track short links.',
+      href: 'https://dub.co'
+    },
+    {
+      name: 'Formbricks',
+      description:
+        'Survey granular user segments at any point in the user journey. Gather up to 6x more insights with targeted micro-surveys. All open-source.',
+      href: 'https://formbricks.com'
+    },
+    {
+      name: 'Papermark',
+      description:
+        'Open-Source Docsend Alternative to securely share documents with real-time analytics.',
+      href: 'https://papermark.io'
+    },
+    {
+      name: 'Hanko',
+      description:
+        'Open-source authentication and user management for the passkey era. Integrated in minutes, for web and mobile apps.',
+      href: 'https://www.hanko.io'
+    },
+    {
+      name: 'Infisical',
+      description:
+        'Open source, end-to-end encrypted platform that lets you securely manage secrets and configs across your team, devices, and infrastructure.',
+      href: 'https://infisical.com'
+    },
+    {
+      name: 'Novu',
+      description:
+        'The open-source notification infrastructure for developers. Simple components and APIs for managing all communication channels in one place.',
+      href: 'https://novu.co'
+    },
+    {
+      name: 'OpenBB',
+      description:
+        'Democratizing investment research through an open source financial ecosystem. The OpenBB Terminal allows everyone to perform investment research, from everywhere.',
+      href: 'https://openbb.co'
+    },
+    {
+      name: 'OpenStatus',
+      description: 'Open-source monitoring platform with beautiful status pages.',
+      href: 'https://www.openstatus.dev'
+    },
+    {
+      name: 'Trigger',
+      description:
+        'Create long-running Jobs directly in your codebase with features like API integrations, webhooks, scheduling and delays.',
+      href: 'https://trigger.dev'
+    },
+    {
+      name: 'UnInbox',
+      description: 'Open Source Email + Chat communication platform',
+      href: 'https://uninbox.com'
+    },
+    {
+      name: 'Webstudio',
+      description:
+        'Webstudio visually translates CSS without obscuring it, giving designers superpowers that were exclusive to developers in the past.',
+      href: 'https://webstudio.is'
+    }
+  ];
+  return { friends };
+}