Cody page fixes (#6813)

* Fix animation line highlight

* Use h1 and sans font

* Tweak h3 color

* Clean up CTA button

* Reduce gap in header CTA

* Fix line numbers

* Fix code fonts

* Tweak CTA icon size

src/components/Banner.tsx

@@ -14,7 +14,7 @@ export const Banner: FunctionComponent<{}> = () => (
                 className="btn bg-transparent !px-0 !py-0 leading-[22px] text-violet-300"
             >
                 Read the blog
-                <ChevronRightIcon className="!mb-0 ml-[18px] inline" />
+                <ChevronRightIcon className="!mb-0 ml-[6px] inline" />
             </Link>
         </div>
     </div>

src/components/CodyAnimation/CodeHighlighter.tsx

@@ -29,17 +29,17 @@ export const CodeHighlighter: FunctionComponent<CodeHighlighterProps> = ({
 
     return (
         <div
-            className={classNames('cody-animation relative m-0 p-0', {
+            className={classNames('cody-animation relative m-0 p-0 inline-flex', {
                 'apply-gray': !highlighted,
-                'inline-block': inline,
+                'inline-flex': inline,
             })}
         >
             <pre>
                 <code ref={codeRef} className="language-javascript">
                     {text || children}
                 </code>
                 {showCursor && (
-                    <div className="absolute inline-block pl-0.5">
+                    <div className="absolute inline-flex pl-0.5">
                         <BlinkCursor />
                     </div>
                 )}

src/components/CodyAnimation/CodyAnimation.tsx

@@ -83,7 +83,7 @@ export const CodyAnimation: FunctionComponent<{className?: string}> = ({classNam
     }, [isCodyAnimationRefInView, applySuggestion])
 
     const lineNumbers = countTotalLines(codes) + 2
-    const activeLine = showSuggestion ? lineNumbers : typingCodeLines || 1
+    const activeLine = (showSuggestion || applySuggestion) ? lineNumbers : startAnimation ? (typingCodeLines + 1) : 1
 
     return (
         <>
@@ -111,7 +111,7 @@ export const CodyAnimation: FunctionComponent<{className?: string}> = ({classNam
                                     setCodeLines={setTypingCodeLines}
                                 />
                             ) : (
-                                <div className="m-0 p-0">
+                                <div className="m-0 p-0 inline-flex">
                                     <BlinkCursor />
                                 </div>
                             )}

src/components/CodyAnimation/Line.tsx

@@ -9,7 +9,7 @@ interface Props {
 }
 
 export const Line: FunctionComponent<Props> = ({ children, className, active }) => (
-    <div className={classNames('items-center whitespace-nowrap', className, { 'bg-[#343A4D]': active })}>
+    <div className={classNames('items-center whitespace-nowrap font-systemMono', className, { 'bg-[#343A4D]': active })}>
         {children}
     </div>
 )

src/components/CodyAnimation/TypingAnimation.tsx

@@ -41,7 +41,7 @@ export const TypingAnimation: FunctionComponent<TypingAnimationProps> = ({
     useEffect(() => {
         const observer = new ResizeObserver(entries => {
             for (const entry of entries) {
-                setCodeLines?.(Math.floor(entry.contentRect.height / heightTextSize) || 1)
+                setCodeLines?.(Math.floor(entry.contentRect.height / heightTextSize) || 0)
             }
         })
 

src/pages/cody.tsx

@@ -83,24 +83,24 @@ const CodyPage: FunctionComponent = () => {
         >
             <ContentSection parentClassName="!py-0 !px-0" className="-mt-8 pt-0 text-center md:mt-0 md:pt-[22px]">
                 <div className="mx-auto w-full px-6 md:w-[849px] lg:w-[895px]">
-                    <div className="mx-auto w-full pt-6 text-[48px] font-semibold leading-[58px] text-white md:text-[72px] md:leading-[86px]">
-                        Code more, type less
-                    </div>
+                    <h1 className="mx-auto w-full pt-6 text-[48px] font-semibold leading-[48px] text-white md:text-[72px] md:leading-[86px]">
+                        Code more, type&nbsp;less
+                    </h1>
                     <Heading
                         size="h3"
-                        className="mx-auto mb-8 mt-6  max-w-[663px] leading-[30px] !tracking-[-0.25px] text-gray-200"
+                        className="mx-auto mb-8 mt-6  max-w-[700px] leading-[30px] !tracking-[-0.25px] text-[#FFFFFFbb]"
                     >
                         Cody is a coding AI assistant that uses AI and a deep understanding of your codebase to help you
                         write and understand code faster.
                     </Heading>
                     <button
                         type="button"
-                        className="btn btn-inverted-primary min-w-[204px] px-6 py-3 text-violet-500 lg:px-4"
+                        className="btn btn-inverted-primary px-5 py-3 text-violet-500"
                         title="Get Cody for free"
                         onClick={handleOpenModal}
                     >
                         <div className="flex items-center justify-center">
-                            <img src="/cody/cody-logo.svg" className="mr-2 h-[24px] w-[24px]" alt="Cody Logo" />
+                            <img src="/cody/cody-logo.svg" className="mr-2 h-[15px] w-[15px]" alt="Cody Logo" />
                             Get Cody for free
                         </div>
                     </button>

src/styles/cody-animation.css

@@ -2,8 +2,6 @@
 .cody-animation pre[class*='language-'] {
     background: transparent;
     color: #c7ffff;
-    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-    font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
     direction: ltr;
     text-align: left;
     white-space: pre;
@@ -15,6 +13,9 @@
     tab-size: 2;
     -webkit-hyphens: none;
     hyphens: none;
+    /* Same stack as font-systemMono */
+    font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-weight: normal;
 }
 
 .cody-animation pre[class*='language-'] {
@@ -36,6 +37,10 @@
     color: #ce9cff;
 }
 
+.cody-animation .token.comment {
+    font-style: normal;
+}
+
 .cody-animation .token.doctype,
 .cody-animation .token.punctuation,
 .cody-animation .token.entity {
@@ -151,7 +156,7 @@
 .cody-multiple-lines::before {
     content: '';
     position: absolute;
-    bottom: 4.5px;
+    bottom: 0;
     left: 0;
     width: 100%;
     height: 20px;