feat: add footer for ai generated roadmaps

src/components/GenerateRoadmap/GenerateRoadmap.tsx

@@ -113,7 +113,9 @@ export function GenerateRoadmap() {
   const [roadmapTopicLimitUsed, setRoadmapTopicLimitUsed] = useState(0);
   const [isConfiguring, setIsConfiguring] = useState(false);
 
-  const [openAPIKey, setOpenAPIKey] = useState<string | undefined>(getOpenAIKey());
+  const [openAPIKey, setOpenAPIKey] = useState<string | undefined>(
+    getOpenAIKey(),
+  );
   const isKeyOnly = IS_KEY_ONLY_ROADMAP_GENERATION;
   const isAuthenticatedUser = isLoggedIn();
 
@@ -658,7 +660,7 @@ export function GenerateRoadmap() {
         </div>
         <div
           className={cn({
-            'relative mb-20 max-h-[800px] min-h-[800px] sm:max-h-[1000px] md:min-h-[1000px]  lg:max-h-[1200px] lg:min-h-[1200px] overflow-hidden':
+            'relative mb-20 max-h-[800px] min-h-[800px] overflow-hidden sm:max-h-[1000px]  md:min-h-[1000px] lg:max-h-[1200px] lg:min-h-[1200px]':
               !isAuthenticatedUser,
           })}
         >
@@ -666,18 +668,18 @@ export function GenerateRoadmap() {
             ref={roadmapContainerRef}
             id="roadmap-container"
             onClick={handleNodeClick}
-            className="relative px-4 py-5 [&>svg]:mx-auto [&>svg]:max-w-[1300px]"
+            className="relative min-h-[400px] px-4 py-5 [&>svg]:mx-auto [&>svg]:max-w-[1300px]"
           />
           {!isAuthenticatedUser && (
             <div className="absolute bottom-0 left-0 right-0">
               <div className="h-80 w-full bg-gradient-to-t from-gray-100 to-transparent" />
               <div className="bg-gray-100">
-                <div className="mx-auto px-5 max-w-[600px] flex-col items-center justify-center bg-gray-100 pt-px">
+                <div className="mx-auto max-w-[600px] flex-col items-center justify-center bg-gray-100 px-5 pt-px">
                   <div className="mt-8 text-center">
-                    <h2 className="mb-0.5 sm:mb-3 text-xl sm:text-2xl font-medium">
+                    <h2 className="mb-0.5 text-xl font-medium sm:mb-3 sm:text-2xl">
                       Sign up to View the full roadmap
                     </h2>
-                    <p className="mb-6 text-sm sm:text-base text-gray-600 text-balance">
+                    <p className="mb-6 text-balance text-sm text-gray-600 sm:text-base">
                       You must be logged in to view the complete roadmap
                     </p>
                   </div>

src/components/GenerateRoadmap/RoadmapSearch.tsx

@@ -45,7 +45,7 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
   const randomTerms = ['OAuth', 'APIs', 'UX Design', 'gRPC'];
 
   return (
-    <div className="flex flex-grow flex-col items-center px-4 py-6 sm:px-6">
+    <div className="flex flex-grow flex-col items-center px-4 py-6 sm:px-6 md:my-24 lg:my-32">
       {isConfiguring && (
         <IncreaseRoadmapLimit
           onClose={() => {
@@ -55,7 +55,7 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
           }}
         />
       )}
-      <div className="flex flex-col gap-0 text-center sm:gap-2 md:mt-24 lg:mt-32">
+      <div className="flex flex-col gap-0 text-center sm:gap-2">
         <h1 className="relative text-2xl font-medium sm:text-3xl">
           <span className="hidden sm:inline">Generate roadmaps with AI</span>
           <span className="inline sm:hidden">AI Roadmap Generator</span>

src/pages/ai/index.astro

@@ -1,10 +1,8 @@
 ---
-import LoginPopup from '../../components/AuthenticationFlow/LoginPopup.astro';
 import { GenerateRoadmap } from '../../components/GenerateRoadmap/GenerateRoadmap';
-import AccountLayout from '../../layouts/AccountLayout.astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
 ---
 
-<AccountLayout title='Roadmap AI'>
+<BaseLayout title='Roadmap AI'>
   <GenerateRoadmap client:load />
-  <LoginPopup />
-</AccountLayout>
+</BaseLayout>