From 6fda8a962b5dd6442f4db0f21e9dc857d24e80ef Mon Sep 17 00:00:00 2001
From: martin-mfg <2026226+martin-mfg@users.noreply.github.com>
Date: Tue, 11 Nov 2025 11:06:25 +0100
Subject: [PATCH] add login stage, larger GH icons

---
 frontend/frontend/src/pages/Auth/SignUp.js    |   4 +-
 frontend/frontend/src/pages/Home/Home.js      |  12 +-
 .../frontend/src/pages/Home/stages/Login.js   | 115 ++++++++++++++++++
 .../frontend/src/pages/Home/stages/index.js   |   3 +-
 4 files changed, 127 insertions(+), 7 deletions(-)
 create mode 100644 frontend/frontend/src/pages/Home/stages/Login.js

diff --git a/frontend/frontend/src/pages/Auth/SignUp.js b/frontend/frontend/src/pages/Auth/SignUp.js
index b594c547..a8d0d85e 100644
--- a/frontend/frontend/src/pages/Auth/SignUp.js
+++ b/frontend/frontend/src/pages/Auth/SignUp.js
@@ -37,14 +37,14 @@ const SignUpScreen = () => {
           <div>
             <a href={GITHUB_PUBLIC_AUTH_URL} className="flex justify-center">
               <Button className="h-12 flex justify-center items-center text-white bg-blue-500 hover:bg-blue-600">
-                <GithubIcon className="w-4 h-4" />
+                <GithubIcon className="w-6 h-6" />
                 <span className="ml-2 xl:text-lg">GitHub Public Access</span>
               </Button>
             </a>
             <div className="mt-4" />
             <a href={GITHUB_PRIVATE_AUTH_URL} className="flex justify-center">
               <Button className="h-12 flex justify-center items-center text-black border border-black bg-white hover:bg-gray-100">
-                <GithubIcon className="w-4 h-4" />
+                <GithubIcon className="w-6 h-6" />
                 <span className="ml-2 xl:text-lg">GitHub Private Access</span>
               </Button>
             </a>
diff --git a/frontend/frontend/src/pages/Home/Home.js b/frontend/frontend/src/pages/Home/Home.js
index da6763a2..f1772757 100644
--- a/frontend/frontend/src/pages/Home/Home.js
+++ b/frontend/frontend/src/pages/Home/Home.js
@@ -7,6 +7,7 @@ import { ProgressBar } from '../../components';
 import {
   CustomizeStage,
   DisplayStage,
+  LoginStage,
   SelectCardStage,
   ThemeStage,
 } from './stages';
@@ -256,6 +257,7 @@ const HomeScreen = () => {
             <div className="text-2xl text-gray-600 font-semibold">
               {
                 [
+                  'Login',
                   'Select a Card',
                   'Modify Card Parameters',
                   'Choose a Theme',
@@ -266,6 +268,7 @@ const HomeScreen = () => {
             <div>
               {
                 [
+                  'Login or continue as guest.',
                   'You will be able to customize your card in future steps.',
                   'Change the date range, include private commits, and more!',
                   'Choose from one of our predefined themes (more coming soon!)',
@@ -274,14 +277,15 @@ const HomeScreen = () => {
               }
             </div>
           </div>
-          {stage === 0 && (
+          {stage === 0 && <LoginStage />}
+          {stage === 1 && (
             <SelectCardStage
               selectedCard={selectedCard}
               setSelectedCard={setSelectedCard}
               setImageSrc={setImageSrc}
             />
           )}
-          {stage === 1 && (
+          {stage === 2 && (
             <CustomizeStage
               selectedCard={selectedCard || CardTypes.STATS}
               imageSrc={imageSrc}
@@ -314,14 +318,14 @@ const HomeScreen = () => {
               fullSuffix={fullSuffix}
             />
           )}
-          {stage === 2 && (
+          {stage === 3 && (
             <ThemeStage
               theme={theme}
               setTheme={setTheme}
               fullSuffix={fullSuffix}
             />
           )}
-          {stage === 3 && (
+          {stage === 4 && (
             <DisplayStage userId={userId} themeSuffix={themeSuffix} />
           )}
         </div>
diff --git a/frontend/frontend/src/pages/Home/stages/Login.js b/frontend/frontend/src/pages/Home/stages/Login.js
new file mode 100644
index 00000000..766333b8
--- /dev/null
+++ b/frontend/frontend/src/pages/Home/stages/Login.js
@@ -0,0 +1,115 @@
+/* eslint-disable react/no-array-index-key */
+
+import React from 'react';
+
+import { Button, Card } from '../../../components';
+import { classnames } from '../../../utils';
+import {
+  GITHUB_PRIVATE_AUTH_URL,
+  GITHUB_PUBLIC_AUTH_URL,
+} from '../../../constants';
+import { FaGithub as GithubIcon } from 'react-icons/fa';
+
+const LoginStage = ({}) => {
+  return (
+    <div className="h-full flex flex-wrap">
+      <div className="hidden lg:block lg:w-3/5 lg:p-8 lg:my-auto">
+        <div
+          className={classnames(
+            'bg-gray-100 rounded-sm w-full h-full m-auto p-8 shadow',
+            'lg:h-auto',
+          )}
+        >
+          <div>
+            <a href={GITHUB_PUBLIC_AUTH_URL} className="flex justify-center">
+              <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>
+          <div className="mt-4" />
+          <div>
+            <a href={GITHUB_PRIVATE_AUTH_URL} className="flex justify-center">
+              <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>
+        </div>
+      </div>
+      <div className="w-full h-full lg:w-2/5 flex lg:flex-col lg:p-8">
+        placeholder for cards
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="w-full flex flex-wrap">
+      {[
+        {
+          title: 'GitHub Stats Card',
+          description: 'your overall GitHub statistics',
+          imageSrc: `?&username=${userId}`,
+          demoCustomization: '&include_all_commits=true',
+          cardType: 'stats',
+        },
+        {
+          title: 'Top Languages Card',
+          description: 'your most frequently used languages',
+          imageSrc: `/top-langs?&username=${userId}`,
+          demoCustomization: '&langs_count=4',
+          cardType: 'top-langs',
+        },
+        {
+          title: 'GitHub Extra Pin',
+          description:
+            'pin more than 6 repositories in your profile using a GitHub profile readme',
+          imageSrc: '/pin?repo=anuraghazra/github-readme-stats',
+          demoCustomization: '',
+          cardType: 'pin',
+        },
+        {
+          title: 'GitHub Gist Pin',
+          description:
+            'pin gists in your GitHub profile using a GitHub profile readme',
+          imageSrc: '/gist?id=bbfce31e0217a3689c8d961a356cb10d',
+          demoCustomization: '',
+          cardType: 'gist',
+        },
+        {
+          title: 'WakaTime Stats Card',
+          description: 'your coding activity from WakaTime',
+          imageSrc: '/wakatime?username=ffflabs',
+          demoCustomization: '&langs_count=6&card_width=450',
+          cardType: 'wakatime',
+        },
+      ].map((card, index) => (
+        <button
+          className="p-2 lg:p-4"
+          key={index}
+          type="button"
+          onClick={() => {
+            setSelectedCard(card.cardType);
+            setImageSrc(card.imageSrc);
+          }}
+        >
+          <Card
+            title={card.title}
+            description={card.description}
+            imageSrc={card.imageSrc + card.demoCustomization}
+            selected={selectedCard === card.cardType}
+            fixedSize="true"
+          />
+        </button>
+      ))}
+    </div>
+  );
+};
+
+LoginStage.propTypes = {};
+
+LoginStage.defaultProps = {};
+
+export default LoginStage;
diff --git a/frontend/frontend/src/pages/Home/stages/index.js b/frontend/frontend/src/pages/Home/stages/index.js
index befa9ba2..03d32509 100644
--- a/frontend/frontend/src/pages/Home/stages/index.js
+++ b/frontend/frontend/src/pages/Home/stages/index.js
@@ -1,6 +1,7 @@
+import LoginStage from './Login';
 import SelectCardStage from './SelectCard';
 import CustomizeStage from './Customize';
 import ThemeStage from './Theme';
 import DisplayStage from './Display';
 
-export { SelectCardStage, CustomizeStage, ThemeStage, DisplayStage };
+export { LoginStage, SelectCardStage, CustomizeStage, ThemeStage, DisplayStage };