chore: login popup design

src/components/Login/LoginComponent.tsx

@@ -0,0 +1,37 @@
+import type { FunctionComponent } from 'preact';
+
+export default function LoginComponent() {
+	return (
+		<div className="space-y-5">
+			<div className="space-y-2">
+				<Button className="bg-[#333] text-white focus:ring-[#333]">
+					Login with Github
+				</Button>
+				<Button className="bg-[#4285f4] text-white focus:ring-[#4285f4]">
+					Login with Google
+				</Button>
+			</div>
+			<div className="h-px w-full bg-slate-200" />
+
+			<div className="text-center text-slate-500 text-sm">
+				Don't have an account?{' '}
+				<a href="/signup" className="font-medium text-[#4285f4]">
+					Sign up
+				</a>
+			</div>
+		</div>
+	);
+}
+
+const Button: FunctionComponent<{ className?: string }> = ({
+	children,
+	className,
+}) => {
+	return (
+		<button
+			className={`inline-flex h-10 w-full items-center justify-center rounded border border-slate-300 p-2 text-sm font-medium outline-none transition duration-150 ease-in-out focus:ring-2 disabled:opacity-60 focus:ring-offset-1 ${className}`}
+		>
+			{children}
+		</button>
+	);
+};

src/components/Login/LoginPopup.astro

@@ -0,0 +1,9 @@
+---
+import Popup from '../Popup/Popup.astro';
+import LoginComponent from './LoginComponent'
+---
+
+<Popup id='login-popup' title='Become a member' subtitle='Welcome back! Login with github or google.'>
+  <LoginComponent client:only="preact" />
+</Popup>
+

src/components/RoadmapHeader.astro

@@ -1,6 +1,8 @@
 ---
 import DownloadPopup from './DownloadPopup.astro';
 import Icon from './Icon.astro';
+import LoginComponent from './Login/LoginComponent';
+import LoginPopup from './Login/LoginPopup.astro';
 import RoadmapHint from './RoadmapHint.astro';
 import RoadmapNote from './RoadmapNote.astro';
 import SubscribePopup from './SubscribePopup.astro';
@@ -23,6 +25,7 @@ const { title, description, roadmapId, tnsBannerLink, isUpcoming = false, hasSea
 const isRoadmapReady = !isUpcoming;
 ---
 
+<LoginPopup />
 <DownloadPopup />
 <SubscribePopup />
 
@@ -75,6 +78,17 @@ const isRoadmapReady = !isUpcoming;
                 <Icon icon='email' />
                 <span class='ml-2'>Subscribe</span>
               </button>
+              <button
+                data-popup='login-popup'
+                class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
+                aria-label='Login to Subscribe for Updates'
+                ga-category='Login'
+                ga-action='Clicked Popup Opener'
+                ga-label='Login Roadmap Popup'
+              >
+                <Icon icon='email' />
+                <span class='ml-2'>Login</span>
+              </button>
             </>
           )
         }