From ebfc7cecc09b8d1231c7f29692ece05660c3b83d Mon Sep 17 00:00:00 2001
From: martin-mfg <2026226+martin-mfg@users.noreply.github.com>
Date: Fri, 28 Nov 2025 13:15:05 +0100
Subject: [PATCH] add markdown button, sticky step 2 card, auto-scroll only if
 necessary, change some labels

---
 frontend/frontend/src/pages/App/Header.js     |  2 +-
 frontend/frontend/src/pages/Home/Home.js      | 14 +++++---
 .../src/pages/Home/stages/Customize.js        |  2 +-
 .../frontend/src/pages/Home/stages/Display.js | 35 +++++++++++++------
 4 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/frontend/frontend/src/pages/App/Header.js b/frontend/frontend/src/pages/App/Header.js
index c5c2c74c..5fb954eb 100644
--- a/frontend/frontend/src/pages/App/Header.js
+++ b/frontend/frontend/src/pages/App/Header.js
@@ -159,7 +159,7 @@ const Header = ({ mode, stage, setStage }) => {
           'Login',
           'Select Card',
           'Modify Parameters',
-          'Customize Theme',
+          'Select Theme',
           'Display Card',
         ]}
         currItem={stage}
diff --git a/frontend/frontend/src/pages/Home/Home.js b/frontend/frontend/src/pages/Home/Home.js
index 4e629162..6bd85156 100644
--- a/frontend/frontend/src/pages/Home/Home.js
+++ b/frontend/frontend/src/pages/Home/Home.js
@@ -197,7 +197,13 @@ const HomeScreen = ({ stage, setStage }) => {
   const contentSectionRef = useRef(null);
 
   useEffect(() => {
-    contentSectionRef.current?.scrollIntoView();
+    // scroll to top of content section if we're scrolled down
+    if (contentSectionRef.current) {
+      const rect = contentSectionRef.current.getBoundingClientRect();
+      if (rect.top < 0) {
+        contentSectionRef.current.scrollIntoView();
+      }
+    }
   }, [stage]);
 
   useEffect(() => {
@@ -285,9 +291,9 @@ const HomeScreen = ({ stage, setStage }) => {
                 [
                   '',
                   '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!)',
-                  'Display your card on GitHub, Twitter, or Linkedin',
+                  '',
+                  '',
+                  'Display the finished card on GitHub, Twitter/X, Linkedin, or anywhere else!',
                 ][stage]
               )}
             </div>
diff --git a/frontend/frontend/src/pages/Home/stages/Customize.js b/frontend/frontend/src/pages/Home/stages/Customize.js
index 1fd11be6..6e210c11 100644
--- a/frontend/frontend/src/pages/Home/stages/Customize.js
+++ b/frontend/frontend/src/pages/Home/stages/Customize.js
@@ -160,7 +160,7 @@ const CustomizeStage = ({
         )}
       </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-3/5 mx-auto flex flex-col justify-center">
+        <div className="w-full lg:w-3/5 mx-auto flex flex-col justify-center sticky top-32">
           <Image imageSrc={fullSuffix} />
         </div>
       </div>
diff --git a/frontend/frontend/src/pages/Home/stages/Display.js b/frontend/frontend/src/pages/Home/stages/Display.js
index 13bef992..98ec06d6 100644
--- a/frontend/frontend/src/pages/Home/stages/Display.js
+++ b/frontend/frontend/src/pages/Home/stages/Display.js
@@ -27,11 +27,26 @@ const DisplayStage = ({ userId, themeSuffix }) => {
     );
   };
 
+  const copyMarkdown = () => {
+    navigator.clipboard.writeText(
+      `[![GitHub Stats](https://${HOST}/api${themeSuffix})](https://${HOST}/api${themeSuffix})`,
+    );
+    toast.info('Copied to Clipboard!', {
+      position: 'bottom-right',
+      autoClose: 1500,
+      hideProgressBar: true,
+      closeOnClick: false,
+      pauseOnHover: false,
+      draggable: false,
+      progress: undefined,
+    });
+  };
+
   const copyUrl = () => {
     navigator.clipboard.writeText(`https://${HOST}/api${themeSuffix}`);
     toast.info('Copied to Clipboard!', {
       position: 'bottom-right',
-      autoClose: 1000,
+      autoClose: 1500,
       hideProgressBar: true,
       closeOnClick: false,
       pauseOnHover: false,
@@ -45,23 +60,23 @@ const DisplayStage = ({ userId, themeSuffix }) => {
       <ToastContainer />
       <div className="h-auto lg:w-2/5 md:w-1/2">
         <div className="pr-10 p-10 rounded-sm bg-gray-200">
-          <div>
-            Copy the image URL or download the PNG. Share on GitHub, Twitter,
-            LinkedIn, or anywhere else!
-          </div>
-          <br />
           <div className="flex flex-col items-center">
             {[
-              { title: 'Copy URL', active: true, onClick: copyUrl },
-              { title: 'Download PNG', active: true, onClick: downloadPNG },
+              {
+                title: 'Copy Markdown',
+                highlight: true,
+                onClick: copyMarkdown,
+              },
+              { title: 'Copy URL', highlight: false, onClick: copyUrl },
+              { title: 'Download PNG', highlight: false, onClick: downloadPNG },
             ].map((item, index) => (
               <Button
                 key={index}
                 className={classnames(
                   'm-4 w-60 flex justify-center',
-                  item.active
+                  item.highlight
                     ? 'bg-blue-500 text-white'
-                    : 'bg-gray-300 text-gray-500 cursor-not-allowed',
+                    : 'bg-gray-300 text-gray-500',
                 )}
                 onClick={item.onClick}
               >