home page header

pluralsh · Nov 27, 2024 · f45be93 · f45be93
1 parent c75662e
commit f45be93
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 27 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -39,7 +39,6 @@ export default function Homepage({
     <>
       <HeaderPad
         as={GradientBG}
-        className="flex flex-col items-center"
         image={homepageGradient}
         imageType="custom"
         bgChildren={
@@ -61,22 +60,33 @@ export default function Homepage({
         <HomePageHero
           heading={pageData.hero_title}
           description={
-            <div className="[text-wrap:balance]">
+            <div className="[text-wrap:pretty]">
               Plural reduces cluster upgrade cycles from months to hours at
               enterprise scale with streamlined dependency management.
             </div>
           }
           announcementChip={announcementChip}
           ctas={
-            <div className="flex flex-wrap justify-center gap-large">
+            <div className="mx-auto flex w-full max-w-[480px] justify-center gap-large">
               <Button
+                style={{ flex: 1 }}
                 large
-                primary
                 as={Link}
                 href={pageData.hero_cta_url}
               >
                 {pageData.hero_cta_text}
               </Button>
+              <Button
+                style={{ flex: 1 }}
+                floating
+                large
+                onClick={() => setShowVideo(true)}
+              >
+                <div className="flex items-center gap-xsmall px-large text-text">
+                  {playButtonSVG}
+                  {pageData.hero_video_cta_text}
+                </div>
+              </Button>
             </div>
           }
         />
@@ -88,15 +98,6 @@ export default function Homepage({
                 width={1248}
               />
             )}
-            <Button
-              large
-              floating
-              className="group mx-auto mb-xxxxxxlarge w-fit"
-              onClick={() => setShowVideo(true)}
-            >
-              {pageData.hero_video_cta_text}
-              {playButtonSVG}
-            </Button>
           </StandardPageWidth>
         </div>
       </HeaderPad>
@@ -180,12 +181,12 @@ const homepageGradient = `
 
 const playButtonSVG = (
   <svg
-    width="42"
-    height="42"
+    height="24"
+    width="24"
     viewBox="0 0 42 42"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    className="ml-small text-fill-primary group-hover:text-fill-primary-hover"
+    className="text-fill-primary"
     aria-hidden
   >
     <rect

diff --git a/src/components/PageHeros.tsx b/src/components/PageHeros.tsx
@@ -35,15 +35,12 @@ export function HeroMainText({
       )}
       {...props}
     >
-      <div className="flex flex-col gap-y-medium">
+      <div className="flex flex-col items-center gap-y-medium">
         <h1 className="txt-mktg-hero-2 [text-wrap:balance] md:txt-mktg-big-header">
           {preHeading && (
-            <>
-              <strong className="txt-mktg-label mb-medium block [text-wrap:balance]">
-                {preHeading}
-              </strong>
-              <span className="sr-only"> – </span>
-            </>
+            <strong className="txt-mktg-label mb-medium block [text-wrap:balance]">
+              {preHeading}
+            </strong>
           )}
           {heading}
         </h1>
@@ -61,8 +58,8 @@ export function HeroMainText({
           )}
         </TextLimiter>
       </div>
-      {ctas && <div>{ctas}</div>}
-      {children && <div>{children}</div>}
+      {ctas}
+      {children}
     </div>
   )
 }
@@ -160,9 +157,9 @@ export function HomePageHero({
         <HeroMainText
           preHeading={preHeading}
           heading={heading}
-          description={<div className="text-center">{description}</div>}
+          description={description}
           ctas={ctas}
-          className="mx-auto"
+          className="max-w-[768px]"
         />
       </div>
     </StandardPageWidth>