chore(docs): add hero variant to TerminalCommand (#2968)

Author: calebpollman

docs/src/components/InstallScripts.tsx

@@ -9,6 +9,7 @@ interface TerminalCommandProps {
   framework?: Framework;
   packageManager?: PackageManager;
   command?: string;
+  variant?: 'default' | 'hero';
 }
 
 const frameworkInstallScript = (
@@ -32,13 +33,14 @@ export const TerminalCommand = ({
   framework,
   packageManager,
   command,
+  variant = 'default',
 }: TerminalCommandProps) => {
   const terminalCommand = command
     ? command
     : frameworkInstallScript(framework, packageManager);
 
   return (
-    <code className="install-code__container">
+    <code className={`install-code__container ${variant}`}>
       <p className="install-code__content">{terminalCommand}</p>
       <CopyButton
         className="install-code__button"

docs/src/components/home/sections/HeroSection.tsx

@@ -97,7 +97,7 @@ export const HeroSection = () => {
             </Grid>
           ) : null}
 
-          <TerminalCommand command={frameworkInstallScript} />
+          <TerminalCommand command={frameworkInstallScript} variant="hero" />
 
           <Flex direction="row">
             <Button

docs/src/styles/docs/home.scss

@@ -82,6 +82,14 @@
     padding-inline-start: var(--amplify-space-small);
     max-width: 90vw;
   }
+  & .hero {
+    @media (min-width: $breakpoint-large) {
+      max-width: 60vw;
+    }
+    @media (min-width: $breakpoint-xl) {
+      max-width: 40vw;
+    }
+  }
 
   .install-code__content {
     background-color: var(--amplify-colors-background-primary);