From 51f188679e6cf5426fdde14b6c4173a4909a7916 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 4 Feb 2024 13:01:26 +0100
Subject: [PATCH] feat: oss-friends page

---
 apps/classroomio-com/src/lib/Faq/Faq.svelte   |   2 +-
 .../src/lib/Footer/Footer.svelte              |   5 +-
 apps/classroomio-com/src/lib/Hero/Hero.svelte |   6 +-
 .../src/lib/Navigation/Navigation.svelte      |   2 +-
 .../src/lib/Pricing/Pricing.svelte            |   8 +-
 .../StudentDashboard/StudentDashboard.svelte  |  16 +--
 apps/classroomio-com/src/lib/types.ts         |   6 ++
 .../src/routes/blog/+page.svelte              |   2 +-
 .../src/routes/oss-friends/+page.svelte       |  53 ++++++++++
 .../src/routes/oss-friends/+page.ts           | 100 ++++++++++++++++++
 .../Apps/components/Poll/index.svelte         |   6 --
 11 files changed, 178 insertions(+), 28 deletions(-)
 create mode 100644 apps/classroomio-com/src/routes/oss-friends/+page.svelte
 create mode 100644 apps/classroomio-com/src/routes/oss-friends/+page.ts

diff --git a/apps/classroomio-com/src/lib/Faq/Faq.svelte b/apps/classroomio-com/src/lib/Faq/Faq.svelte
index ef6006a7..fa86c830 100644
--- a/apps/classroomio-com/src/lib/Faq/Faq.svelte
+++ b/apps/classroomio-com/src/lib/Faq/Faq.svelte
@@ -11,7 +11,7 @@
       class="lg:px-[20%] mt-4 text-lg lg:text-xl text-gray-500 font-normal tracking-normal lg:tracking-wide"
     >
       Can’t find the answer you’re looking for?
-      <a class="text-[#1D4EE2]" href="mailto:help@classroomio.com" target="_blank"
+      <a class="text-blue-700" href="mailto:help@classroomio.com" target="_blank"
         >Shoot us an email</a
       > and we’ll get back to you ASAP.
     </h3>
diff --git a/apps/classroomio-com/src/lib/Footer/Footer.svelte b/apps/classroomio-com/src/lib/Footer/Footer.svelte
index bfd3801f..affa45ad 100644
--- a/apps/classroomio-com/src/lib/Footer/Footer.svelte
+++ b/apps/classroomio-com/src/lib/Footer/Footer.svelte
@@ -47,7 +47,7 @@
     </div>
 
     <nav
-      class="flex justify-between items-start flex-col lg:flex-row w-full lg:w-2/4 pr-[5%] mt-16 lg:mt-0 space-y-6 lg:space-y-0"
+      class="flex justify-between items-start flex-col lg:flex-row w-full lg:w-2/4 gap-3 mt-16 lg:mt-0 space-y-6 lg:space-y-0"
     >
       <div>
         <h3 class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900">
@@ -90,6 +90,9 @@
               Getting Started
             </a>
           </li>
+          <li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
+            <a href="/oss-friends"> OSS Friends </a>
+          </li>
         </ul>
       </div>
 
diff --git a/apps/classroomio-com/src/lib/Hero/Hero.svelte b/apps/classroomio-com/src/lib/Hero/Hero.svelte
index af0cd184..5cbbea51 100644
--- a/apps/classroomio-com/src/lib/Hero/Hero.svelte
+++ b/apps/classroomio-com/src/lib/Hero/Hero.svelte
@@ -11,14 +11,14 @@
       href="https://github.com/rotimi-best/classroomio"
       style="color: rgb(75, 85, 99);"
       class="border border-gray-300 rounded-full px-4 py-1 text-sm font-medium hover:underline"
-      >Give us a <span class="text-[#1D4EE2]">star</span> on github</a
+      >Give us a <span class="text-blue-700 hover:bg-blue-800">star</span> on github</a
     >
   </div>
   <h1
     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>Launch Your Online Bootcamp</span>
-    <span class="text-[#1D4EE2] relative"
+    <span class="text-blue-700 hover:bg-blue-800 relative"
       >In Minutes
       <svg
         aria-hidden="true"
@@ -39,7 +39,7 @@
   </p>
   <div class="mt-10 flex gap-4 items-center justify-center flex-col md:flex-row">
     <a
-      class="font-medium lg:font-semibold text-sm md:text-md w-11/12 md:w-fit text-white px-6 py-3 lg:px-6 lg:py-5 bg-[#1D4EE2] rounded-md"
+      class="font-medium lg:font-semibold text-sm md:text-md w-11/12 md:w-fit text-white px-6 py-3 lg:px-6 lg:py-5 bg-blue-700 rounded-md hover:bg-blue-800 hover:shadow-xl transition-all delay-100"
       href="/signup"
       rel="noopener noreferrer nofollow"
     >
diff --git a/apps/classroomio-com/src/lib/Navigation/Navigation.svelte b/apps/classroomio-com/src/lib/Navigation/Navigation.svelte
index 41257b77..3b6087bc 100644
--- a/apps/classroomio-com/src/lib/Navigation/Navigation.svelte
+++ b/apps/classroomio-com/src/lib/Navigation/Navigation.svelte
@@ -139,7 +139,7 @@
 
   <div class="justify-between items-center flex-row hidden md:hidden lg:flex">
     <!-- <button
-      class="bg-[#1D4EE2] text-white text-sm font-medium px-4 py-1.5 rounded-md mr-5"
+      class="bg-blue-700 text-white text-sm font-medium px-4 py-1.5 rounded-md mr-5"
     >
       Sign Up
     </button> -->
diff --git a/apps/classroomio-com/src/lib/Pricing/Pricing.svelte b/apps/classroomio-com/src/lib/Pricing/Pricing.svelte
index fdba7d63..644ee21a 100644
--- a/apps/classroomio-com/src/lib/Pricing/Pricing.svelte
+++ b/apps/classroomio-com/src/lib/Pricing/Pricing.svelte
@@ -39,7 +39,7 @@
 <section id="pricing" class="py-[12%]">
   <div class="px-[6%] flex flex-col justify-center items-center">
     <div class="text-center mb-[3%]">
-      <h3 id="pricing" class="text-[#1D4EE2] text-md font-semibold tracking-wide">Pricing</h3>
+      <h3 id="pricing" class="text-blue-700 text-md font-semibold tracking-wide">Pricing</h3>
       <h1 class="my-5 lg:my-4 font-semibold tracking-tight text-gray-900 text-3xl lg:text-4xl">
         For teams and individuals
       </h1>
@@ -55,7 +55,7 @@
         style="background-color: {prices ? 'initial' : '#1D4EE2'}; color: {prices
           ? '#777E8A'
           : '#fff'}"
-        class="bg-[#1D4EE2] text-white rounded-[30px] py-1 px-3 lg:py-2 lg:px-4 text-xs"
+        class="bg-blue-700 text-white rounded-[30px] py-1 px-3 lg:py-2 lg:px-4 text-xs"
         on:click={handlePriceChange}>Monthly</button
       >
       <button
@@ -164,7 +164,7 @@
     >
       <div class="mr-5 pl-5">
         <h2
-          class="text-md lg:text-xl font-semibold font-display leading-8 tracking-wide lg:tracking-tight text-[#1D4EE2] mb-0 lg:mb-4"
+          class="text-md lg:text-xl font-semibold font-display leading-8 tracking-wide lg:tracking-tight text-blue-700 mb-0 lg:mb-4"
         >
           Hobby
         </h2>
@@ -176,7 +176,7 @@
         </p>
       </div>
         <button
-          class="font-semibold text-base lg:text-md text-white leading-5 mt-5 lg:m-0 p-4 lg:py-5 ml-5 bg-[#1D4EE2] rounded-lg lg:rounded-md w-[70%] lg:w-full"
+          class="font-semibold text-base lg:text-md text-white leading-5 mt-5 lg:m-0 p-4 lg:py-5 ml-5 bg-blue-700 rounded-lg lg:rounded-md w-[70%] lg:w-full"
         >
           Create a free account
         </button>
diff --git a/apps/classroomio-com/src/lib/StudentDashboard/StudentDashboard.svelte b/apps/classroomio-com/src/lib/StudentDashboard/StudentDashboard.svelte
index 466bd73a..91473095 100644
--- a/apps/classroomio-com/src/lib/StudentDashboard/StudentDashboard.svelte
+++ b/apps/classroomio-com/src/lib/StudentDashboard/StudentDashboard.svelte
@@ -1,11 +1,8 @@
-<section
-  id="student-dashboard"
-  class="text-center text-white py-[10%] px-3 lg:px-0 bg-black"
->
+<section id="student-dashboard" class="text-center text-white py-[10%] px-3 lg:px-0 bg-black">
   <div class="mb-10">
     <a
       href="#student-dashboard"
-      class="rounded-full px-4 py-2 text-sm font-medium hover:underline bg-[#1D4EE2] underline"
+      class="rounded-full px-4 py-2 text-sm font-medium hover:underline bg-blue-700 underline"
       ><span class="">yourorg</span>.classroomio.com</a
     >
   </div>
@@ -18,8 +15,8 @@
   <p
     class="mx-auto mt-10 lg:mt-6 px-4 lg:p-0 text-md tracking-wide leading-6 text-gray-400 lg:w-2/4"
   >
-    Once you create an account, you get a dedicated dashboard where your
-    students can access all their courses, assignments, and more.
+    Once you create an account, you get a dedicated dashboard where your students can access all
+    their courses, assignments, and more.
   </p>
 
   <div class="relative my-5 md:my-10">
@@ -32,10 +29,7 @@
       playsinline
       preload="auto"
     >
-      <source
-        src="./student-dashboard.mp4"
-        type="video/mp4"
-      />
+      <source src="./student-dashboard.mp4" type="video/mp4" />
       <track kind="captions" />
     </video>
   </div>
diff --git a/apps/classroomio-com/src/lib/types.ts b/apps/classroomio-com/src/lib/types.ts
index d18884c4..d7b7a515 100644
--- a/apps/classroomio-com/src/lib/types.ts
+++ b/apps/classroomio-com/src/lib/types.ts
@@ -12,3 +12,9 @@ export type BlogPost = {
   categories: Categories[];
   published: boolean;
 };
+
+export type OssFriend = {
+  name: string;
+  description: string;
+  href: string;
+};
diff --git a/apps/classroomio-com/src/routes/blog/+page.svelte b/apps/classroomio-com/src/routes/blog/+page.svelte
index 62bd9a0e..9db67bd3 100644
--- a/apps/classroomio-com/src/routes/blog/+page.svelte
+++ b/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"
diff --git a/apps/classroomio-com/src/routes/oss-friends/+page.svelte b/apps/classroomio-com/src/routes/oss-friends/+page.svelte
new file mode 100644
index 00000000..e896ad4b
--- /dev/null
+++ b/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>
diff --git a/apps/classroomio-com/src/routes/oss-friends/+page.ts b/apps/classroomio-com/src/routes/oss-friends/+page.ts
new file mode 100644
index 00000000..e9d03e40
--- /dev/null
+++ b/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 };
+}
diff --git a/apps/dashboard/src/lib/components/Apps/components/Poll/index.svelte b/apps/dashboard/src/lib/components/Apps/components/Poll/index.svelte
index 7c00d00e..70db6da8 100644
--- a/apps/dashboard/src/lib/components/Apps/components/Poll/index.svelte
+++ b/apps/dashboard/src/lib/components/Apps/components/Poll/index.svelte
@@ -100,12 +100,6 @@
     setCoursePolls();
   }
 
-  // now the most interesting part,
-  // how do I implement real time functionality for polls?
-  // the only thing that is real time is the apps_poll_submission
-  // table, so I will have to listen to changes in that table
-  // and update the polls accordingly.
-
   async function handleInsert(payload: RealtimePostgresChangesPayload<PollOptionsSubmissionType>) {
     const newVote = payload.new as PollOptionsSubmissionType;