DC-6234 Getting Started Page Updates (#7254)

* arrow added

* quickstart card hover

* always copy button added

* hover effect on copy button

* spcaer added

* pointless css removed

* updaets

* fuctional

* revewrt

* fixed for mobile

Author: aidankmcalister

content/100-getting-started/index.mdx

@@ -22,7 +22,8 @@ import {
   SignalStream,
   PrismaPostgres,
   SquareLogo,
-  QuickstartLinkCard
+  QuickstartLinkCard,
+  Spacer
 } from '@site/src/components/GettingStarted';
 
 
@@ -34,7 +35,7 @@ import {
 
 [**Prisma ORM**](/orm/overview/introduction/what-is-prisma) is an open-source ORM that provides fast, type-safe access to Postgres, MySQL, SQLite, and more databases, and runs smoothly across Node.js, Bun, and Deno.
 
-```terminal
+```terminal always-copy
 npx prisma init --db
 ```
 </BorderBox >
@@ -44,7 +45,7 @@ npx prisma init --db
 
 [**Prisma Postgres**](/postgres) is a fully managed PostgreSQL database that scales to zero, integrates with Prisma ORM and Prisma Studio, and includes a generous free tier.
 
-```terminal
+```terminal always-copy
 npx create-db
 ```
 </BorderBox >
@@ -54,7 +55,7 @@ npx create-db
 <br/>
 
 <QuickstartLinkCard
-    title="Quickstart →"
+    title="Quickstart"
     highlight="#16A394"
     link="/getting-started/quickstart-prismaPostgres"
 >
@@ -180,3 +181,4 @@ Working with **Next.js**, **Remix**, or another framework? You can easily add Pr
       />
 </List>
 
+<Spacer size="120px" />

src/components/GettingStarted/index.tsx

@@ -159,11 +159,16 @@ export const QuickstartLinkCard = ({ icon, title, desc, link, highlight, childre
     <Link
       to={link}
       ref={linkCardRef}
-      className={clsx(styles.linkCardWrapper, highlight && styles.linkCardHighlight)}
+      className={clsx(
+        styles.linkCardWrapper,
+        highlight && styles.linkCardHighlight,
+        styles.quickstartCard
+      )}
     >
       <div className={styles.title}>
         {icon && <Icon icon={icon} btn="left" size="18px" />}
         <h2>{title}</h2>
+        <Icon icon="fa-regular fa-arrow-right" size="18px" />
       </div>
       {children ?? <p>{desc}</p>}
     </Link>
@@ -210,3 +215,5 @@ export const List = ({ children, framed, split, ...props }) => (
     {children}
   </div>
 );
+
+export const Spacer = ({ size }: { size: string }) => <div style={{ height: size }} />;

src/css/gettingStarted.module.scss

@@ -58,6 +58,20 @@
       }
     }
   }
+
+  // Copy button styles specific to Getting Started page
+  :global(.theme-code-block) {
+    button[class*="copyButton"] {
+      background: var(--border-primary, #2d3748);
+      color: var(--Text-text-secondary, #e2e8f0);
+      transition: background 0.2s ease;
+      border: none;
+      margin-top: 4px;
+      &:hover {
+        background: var(--Text-text-disabled, #4a5568);
+      }
+    }
+  }
 }
 
 .boxTitle {
@@ -89,8 +103,27 @@
     border: 1px solid var(--surface-brand-default);
     background: var(--surface-brand-light);
   }
+  &.quickstartCard {
+    transition:
+      border 0.2s ease,
+      background-color 0.2s ease;
+    &:hover {
+      border: 1px solid var(--border-color-active, #154f47);
+    }
+    .title {
+      gap: 8px;
+      i:last-child {
+        transition: transform 0.2s ease;
+      }
+    }
+    &:hover .title i:last-child {
+      transform: translateX(8px);
+    }
+  }
   .title {
     display: inline-flex;
+    align-items: center;
+    gap: 8px;
     h2 {
       font-family: Barlow;
       border-bottom: 1px solid var(--main-font-color);
@@ -157,6 +190,10 @@
   display: flex;
   justify-content: flex-start;
 
+  @media (max-width: 1400px) {
+    flex-wrap: wrap;
+  }
+
   &:not(.framedList) {
     @media (min-width: 1400px) {
       grid-template-columns: repeat(7, auto);

src/theme/CodeBlock/Content/String.tsx

@@ -97,7 +97,11 @@ export default function CodeBlockString({
             />
           )}
           {!metastring?.includes("no-copy") && (
-            <CopyButton className={styles.codeButton} code={code} />
+            <CopyButton
+              className={styles.codeButton}
+              code={code}
+              alwaysVisible={metastring?.includes("always-copy")}
+            />
           )}
         </div>
       </div>

src/theme/CodeBlock/CopyButton/index.js

@@ -5,7 +5,7 @@ import { translate } from "@docusaurus/Translate";
 import IconCopy from "@theme/Icon/Copy";
 import IconSuccess from "@theme/Icon/Success";
 import styles from "./styles.module.css";
-export default function CopyButton({ code, className }) {
+export default function CopyButton({ code, className, alwaysVisible = false }) {
   const [isCopied, setIsCopied] = useState(false);
   const copyTimeout = useRef(undefined);
   const handleCopyCode = useCallback(() => {
@@ -41,7 +41,8 @@ export default function CopyButton({ code, className }) {
         "clean-btn",
         className,
         styles.copyButton,
-        isCopied && styles.copyButtonCopied
+        isCopied && styles.copyButtonCopied,
+        alwaysVisible && styles.copyButtonAlwaysVisible
       )}
       onClick={handleCopyCode}
     >

src/theme/CodeBlock/CopyButton/styles.module.css

@@ -2,6 +2,14 @@
   opacity: 1 !important;
 }
 
+.copyButtonAlwaysVisible {
+  opacity: 0.5 !important;
+  transition: opacity 0.2s ease;
+  &:hover {
+    opacity: 1 !important;
+  }
+}
+
 .copyButtonIcons {
   position: relative;
   width: 1.125rem;