From 8171b4b53a93350b240f24c58fdd870c1894df51 Mon Sep 17 00:00:00 2001
From: martin-mfg <2026226+martin-mfg@users.noreply.github.com>
Date: Sun, 30 Nov 2025 20:05:08 +0100
Subject: [PATCH] scroll up further, step 4 layout, fix responsive layout

---
 frontend/frontend/src/pages/Home/Home.js           |  4 +++-
 frontend/frontend/src/pages/Home/stages/Display.js | 14 +++++---------
 frontend/frontend/src/pages/Home/stages/Login.js   |  2 +-
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/frontend/frontend/src/pages/Home/Home.js b/frontend/frontend/src/pages/Home/Home.js
index 6bd85156..9104e7ff 100644
--- a/frontend/frontend/src/pages/Home/Home.js
+++ b/frontend/frontend/src/pages/Home/Home.js
@@ -202,6 +202,8 @@ const HomeScreen = ({ stage, setStage }) => {
       const rect = contentSectionRef.current.getBoundingClientRect();
       if (rect.top < 0) {
         contentSectionRef.current.scrollIntoView();
+        // additional offset to account for sticky progress bar
+        window.scrollBy({ top: -80 });
       }
     }
   }, [stage]);
@@ -293,7 +295,7 @@ const HomeScreen = ({ stage, setStage }) => {
                   'You will be able to customize your card in future steps.',
                   '',
                   '',
-                  'Display the finished card on GitHub, Twitter/X, Linkedin, or anywhere else!',
+                  'Display the finished card on GitHub, Twitter/X, LinkedIn, or anywhere else!',
                 ][stage]
               )}
             </div>
diff --git a/frontend/frontend/src/pages/Home/stages/Display.js b/frontend/frontend/src/pages/Home/stages/Display.js
index 98ec06d6..d22d82ab 100644
--- a/frontend/frontend/src/pages/Home/stages/Display.js
+++ b/frontend/frontend/src/pages/Home/stages/Display.js
@@ -8,7 +8,7 @@ import 'react-toastify/dist/ReactToastify.css';
 
 import { saveSvgAsPng } from 'save-svg-as-png';
 
-import { Button, Card } from '../../../components';
+import { Button, Image } from '../../../components';
 import { classnames } from '../../../utils';
 import { HOST } from '../../../constants';
 
@@ -75,8 +75,8 @@ const DisplayStage = ({ userId, themeSuffix }) => {
                 className={classnames(
                   'm-4 w-60 flex justify-center',
                   item.highlight
-                    ? 'bg-blue-500 text-white'
-                    : 'bg-gray-300 text-gray-500',
+                    ? 'bg-blue-500 hover:bg-blue-600 text-white'
+                    : 'bg-white hover:bg-gray-100 text-black',
                 )}
                 onClick={item.onClick}
               >
@@ -87,12 +87,8 @@ const DisplayStage = ({ userId, themeSuffix }) => {
         </div>
       </div>
       <div className="w-full lg:w-3/5 md:w-1/2 object-center pt-5 md:pt-0 pl-0 md:pl-5 lg:pl-0">
-        <div className="w-full lg:w-[65%] mx-auto h-full flex flex-col justify-center">
-          <Card
-            title="Your Card"
-            description="The finished product!"
-            imageSrc={`${themeSuffix}&disable_animations=true`}
-          />
+        <div className="w-full lg:w-3/5 mx-auto flex flex-col justify-center sticky top-32">
+          <Image imageSrc={`${themeSuffix}&disable_animations=true`} />
         </div>
       </div>
     </div>
diff --git a/frontend/frontend/src/pages/Home/stages/Login.js b/frontend/frontend/src/pages/Home/stages/Login.js
index 374c0a9d..4655febc 100644
--- a/frontend/frontend/src/pages/Home/stages/Login.js
+++ b/frontend/frontend/src/pages/Home/stages/Login.js
@@ -67,7 +67,7 @@ const LoginStage = ({ setCurrItem }) => {
 
   return (
     <div className="h-full flex flex-wrap">
-      <div className="hidden lg:block lg:w-3/5 lg:p-8">
+      <div className="lg:block lg:w-3/5 lg:p-8">
         <div
           className={classnames(
             'bg-gray-200 rounded-sm w-full h-full m-auto p-8 shadow',