New livebook Teams LP

src/components/TeamsCard.astro

@@ -0,0 +1,25 @@
+---
+import Icon from "./Icon.astro";
+
+export interface Props {
+  icon: string;
+  title: string;
+  description: string;
+  iconColor: string;
+  class?: string;
+}
+
+const { icon, title, description, iconColor, class: className } = Astro.props;
+---
+
+<div class={`from-blue-600 to-brand-pink rounded-[32px] p-[2px] ${className}`}>
+  <div class="h-full w-full rounded-[32px] bg-gray-800 p-8">
+    <div class="flex flex-col items-start justify-start space-y-4 text-gray-50">
+      <Icon icon={icon} class={`text-3xl ${iconColor}`} />
+      <h3 class="text-xl sm:text-2xl font-semibold">{title}</h3>
+      <p class="text-sm text-gray-100">
+        {description}
+      </p>
+    </div>
+  </div>
+</div>

src/components/TeamsDatabaseCard.astro

@@ -0,0 +1,24 @@
+---
+export interface Props {
+  title: string;
+  imageURL: string;
+  integrationId: string;
+}
+
+const { title, imageURL, integrationId } = Astro.props;
+---
+
+<a href={`/integrations/${integrationId}`}>
+  <div class="relative group">
+    <div
+      class="absolute rounded-3xl bg-gray-900/60 w-full h-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 flex items-end justify-center"
+    >
+      <div class="mb-4 text-white">{title}</div>
+    </div>
+    <div
+      class="rounded-3xl bg-gray-100 flex w-28 sm:w-full h-28 sm:h-60 md:h-52 lg:h-60 justify-center items-center relative"
+    >
+      <img src={imageURL} alt={`${title} logo`} class="w-12 sm:w-20 lg:w-24" />
+    </div>
+  </div>
+</a>

src/components/TeamsPlayButton.astro

@@ -0,0 +1,41 @@
+---
+import Icon from "./Icon.astro";
+
+export interface Props {
+  videoTitle: string;
+  videoLength: string;
+  videoAuthorImg: string;
+}
+
+const { videoTitle, videoLength, videoAuthorImg } = Astro.props;
+---
+
+<div
+  class="group-hover:scale-110 flex justify-center items-center absolute z-10"
+>
+  <Icon icon="play-fill" class="text-5xl absolute z-10 text-white" />
+  <div class="absolute rounded-full w-20 h-20 bg-blue-600"></div>
+  <div class="absolute rounded-full w-24 h-24 bg-blue-600/60 animate-pulse">
+  </div>
+</div>
+<div class="relative mt-24">
+  <img
+    src={videoAuthorImg}
+    alt="Profile Pic"
+    class="w-12 h-12 rounded-full border-2 border-gray-200 absolute top-0 left-[190px] hidden group-hover:block z-20"
+  />
+  <div
+    class="group-hover:flex flex-col justify-center items-center rounded-[50px] bg-gray-100 px-8 pt-4 pb-2 text-xs mt-9 hidden"
+  >
+    <div class="font-semibold text-gray-600">
+      {videoTitle}
+    </div>
+    <div class="flex items-center mt-1">
+      <div class="text-gray-500 font-medium px-2">{videoLength}</div>
+      <div class="flex items-center text-blue-500 font-medium">
+        <div>Watch Now</div>
+        <Icon icon="arrow-right-line" />
+      </div>
+    </div>
+  </div>
+</div>

src/components/VideoModal.astro

@@ -0,0 +1,31 @@
+---
+import Icon from "./Icon.astro";
+
+export interface Props {
+  dataVideoModal: string;
+  videoURL: string;
+}
+
+const { dataVideoModal, videoURL } = Astro.props;
+---
+
+<div
+  class="videomodal fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50 hidden"
+  data-videomodal={dataVideoModal}
+>
+  <div class="relative bg-gray-200 rounded-lg w-full max-w-5xl">
+    <button
+      class="absolute top-2 right-2 close-videomodal"
+      data-videomodal={dataVideoModal}
+    >
+      <Icon icon="close-circle-fill" class="text-3xl text-gray-100" />
+    </button>
+    <div class="p-1">
+      <iframe
+        class="w-full h-[576px]"
+        src={videoURL}
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen></iframe>
+    </div>
+  </div>
+</div>