add 5th stage, fix stage arrows, try login layout

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>
   );

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',

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>