From 58a5d278540eb45c2ec61475d1d75e973ec2d279 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 11 Mar 2024 12:57:16 +0000
Subject: [PATCH] Add AI announcement on homepage

---
 src/components/AIAnnouncement.tsx            | 16 ++++++++++++++++
 src/components/HeroSection/EmptyProgress.tsx |  4 ++--
 src/components/HeroSection/HeroRoadmaps.tsx  |  6 +++---
 src/components/HeroSection/HeroSection.astro |  8 ++++----
 4 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 src/components/AIAnnouncement.tsx

diff --git a/src/components/AIAnnouncement.tsx b/src/components/AIAnnouncement.tsx
new file mode 100644
index 000000000..c5054b538
--- /dev/null
+++ b/src/components/AIAnnouncement.tsx
@@ -0,0 +1,16 @@
+type AIAnnouncementProps = {};
+
+export function AIAnnouncement(props: AIAnnouncementProps) {
+  return (
+    <a
+      className="rounded-md border border-dashed border-green-600 px-3 py-1.5 text-green-400 transition-colors hover:border-green-400 hover:text-green-200"
+      href="/ai"
+    >
+      <span className="relative -top-[1px] mr-1 text-xs font-semibold uppercase text-white">
+        New
+      </span>{' '}
+      <span className={'hidden sm:inline'}>Generate visual roadmaps with AI</span>
+      <span className={'inline text-sm sm:hidden'}>AI Roadmap Generator!</span>
+    </a>
+  );
+}
diff --git a/src/components/HeroSection/EmptyProgress.tsx b/src/components/HeroSection/EmptyProgress.tsx
index 46a06fb61..ce42d6342 100644
--- a/src/components/HeroSection/EmptyProgress.tsx
+++ b/src/components/HeroSection/EmptyProgress.tsx
@@ -1,5 +1,5 @@
 import { CheckIcon } from '../ReactIcons/CheckIcon';
-import { TeamAnnouncement } from '../TeamAnnouncement';
+import { AIAnnouncement } from '../AIAnnouncement.tsx';
 
 type EmptyProgressProps = {
   title?: string;
@@ -23,7 +23,7 @@ export function EmptyProgress(props: EmptyProgressProps) {
       <p className={'text-sm text-gray-400 sm:text-base'}>{message}</p>
 
       <p className="mt-5">
-        <TeamAnnouncement />
+        <AIAnnouncement />
       </p>
     </div>
   );
diff --git a/src/components/HeroSection/HeroRoadmaps.tsx b/src/components/HeroSection/HeroRoadmaps.tsx
index eb60fdaf1..8f92e4a76 100644
--- a/src/components/HeroSection/HeroRoadmaps.tsx
+++ b/src/components/HeroSection/HeroRoadmaps.tsx
@@ -7,7 +7,7 @@ import { MapIcon, Users2 } from 'lucide-react';
 import { CreateRoadmapButton } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapButton';
 import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
 import { type ReactNode, useState } from 'react';
-import { TeamAnnouncement } from '../TeamAnnouncement';
+import { AIAnnouncement } from '../AIAnnouncement.tsx';
 
 type ProgressRoadmapProps = {
   url: string;
@@ -97,7 +97,7 @@ export function HeroRoadmaps(props: ProgressListProps) {
   return (
     <div className="relative pb-12 pt-4 sm:pt-7">
       <p className="mb-7 mt-2 text-sm">
-        <TeamAnnouncement />
+        <AIAnnouncement />
       </p>
       {isCreatingRoadmap && (
         <CreateRoadmapModal
@@ -187,7 +187,7 @@ export function HeroRoadmaps(props: ProgressListProps) {
         const currentTeam: UserProgressResponse[0]['team'] =
           teamRoadmaps?.[teamName]?.[0]?.team;
         const roadmapsList = teamRoadmaps[teamName].filter(
-          (roadmap) => !!roadmap.resourceTitle
+          (roadmap) => !!roadmap.resourceTitle,
         );
         const canManageTeam = ['admin', 'manager'].includes(currentTeam?.role!);
 
diff --git a/src/components/HeroSection/HeroSection.astro b/src/components/HeroSection/HeroSection.astro
index f677bcac9..52f5e4a4c 100644
--- a/src/components/HeroSection/HeroSection.astro
+++ b/src/components/HeroSection/HeroSection.astro
@@ -1,17 +1,17 @@
 ---
 import { FavoriteRoadmaps } from './FavoriteRoadmaps';
-import {TeamAnnouncement} from "../TeamAnnouncement";
+import { AIAnnouncement } from "../AIAnnouncement";
 ---
 
 <div
-  class='min-h-auto relative min-h-[192px] border-b border-b-[#1e293c] sm:min-h-[281px] transition-all'
+  class='min-h-auto relative min-h-[192px] border-b border-b-[#1e293c] transition-all sm:min-h-[281px]'
 >
   <div
     class='container px-5 py-6 pb-14 text-left transition-opacity duration-300 sm:px-0 sm:py-20 sm:text-center'
     id='hero-text'
   >
-    <p class='-mt-4 sm:-mt-10 mb-7'>
-      <TeamAnnouncement />
+    <p class='-mt-4 mb-7 sm:-mt-10'>
+      <AIAnnouncement />
     </p>
 
     <h1