From 2d57542954ebcbb3d7188b8ede5c15299ca0bc08 Mon Sep 17 00:00:00 2001
From: martin-mfg <2026226+martin-mfg@users.noreply.github.com>
Date: Tue, 11 Nov 2025 12:50:32 +0100
Subject: [PATCH] add 5th stage, fix stage arrows, try login layout

---
 frontend/frontend/src/components/Home/Progress.js |  4 ++--
 frontend/frontend/src/pages/Home/Home.js          |  1 +
 frontend/frontend/src/pages/Home/stages/Login.js  | 10 ++++++----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/frontend/src/components/Home/Progress.js b/frontend/frontend/src/components/Home/Progress.js
index 6bcf51ff..2177d3d5 100644
--- a/frontend/frontend/src/components/Home/Progress.js
+++ b/frontend/frontend/src/components/Home/Progress.js
@@ -54,7 +54,7 @@ const ProgressBar = ({ items, currItem, setCurrItem }) => {
             ? 'text-gray-300 cursor-not-allowed'
             : 'text-gray-700 cursor-pointer',
         )}
-        onClick={() => setCurrItem(currItem - 1)}
+        onClick={() => setCurrItem(Math.max(currItem - 1, 0))}
       />
       <div className="px-2 flex-grow flex flex-row">
         {items.map((item, index) => {
@@ -76,7 +76,7 @@ const ProgressBar = ({ items, currItem, setCurrItem }) => {
             ? 'text-gray-300 cursor-not-allowed'
             : 'text-gray-700 cursor-pointer',
         )}
-        onClick={() => setCurrItem(currItem + 1)}
+        onClick={() => setCurrItem(Math.min(currItem + 1, items.length - 1))}
       />
     </div>
   );
diff --git a/frontend/frontend/src/pages/Home/Home.js b/frontend/frontend/src/pages/Home/Home.js
index f1772757..d5668059 100644
--- a/frontend/frontend/src/pages/Home/Home.js
+++ b/frontend/frontend/src/pages/Home/Home.js
@@ -244,6 +244,7 @@ const HomeScreen = () => {
       <div className="flex flex-col">
         <ProgressBar
           items={[
+            'Login',
             'Select Card',
             'Modify Parameters',
             'Customize Theme',
diff --git a/frontend/frontend/src/pages/Home/stages/Login.js b/frontend/frontend/src/pages/Home/stages/Login.js
index 766333b8..d175d87a 100644
--- a/frontend/frontend/src/pages/Home/stages/Login.js
+++ b/frontend/frontend/src/pages/Home/stages/Login.js
@@ -20,22 +20,24 @@ const LoginStage = ({}) => {
             'lg:h-auto',
           )}
         >
-          <div>
-            <a href={GITHUB_PUBLIC_AUTH_URL} className="flex justify-center">
+          <div className="flex items-start gap-4">
+            <a href={GITHUB_PUBLIC_AUTH_URL}>
               <Button className="h-12 flex justify-center items-center text-white bg-blue-500 hover:bg-blue-600">
                 <GithubIcon className="w-6 h-6" />
                 <span className="ml-2 xl:text-lg">GitHub Public Access</span>
               </Button>
             </a>
+            <div className="flex-1">Lorem Ipsum.</div>
           </div>
           <div className="mt-4" />
-          <div>
-            <a href={GITHUB_PRIVATE_AUTH_URL} className="flex justify-center">
+          <div className="flex items-start gap-4">
+            <a href={GITHUB_PRIVATE_AUTH_URL}>
               <Button className="h-12 flex justify-center items-center text-black border border-black bg-white hover:bg-gray-100">
                 <GithubIcon className="w-6 h-6" />
                 <span className="ml-2 xl:text-lg">GitHub Private Access</span>
               </Button>
             </a>
+            <div className="flex-1">Lorem Ipsum.</div>
           </div>
         </div>
       </div>