Merge pull request #13691 from saurabhburade/shadcn-migration/HubHero

Shadcn migration - HubHero

Author: pettinarip

src/components/Hero/CallToAction.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react"
 
-import { Button, type ButtonProps } from "@/components/Buttons"
+import { Button, type ButtonProps } from "@/components/ui/buttons/Button"
 
+import { cn } from "@/lib/utils/cn"
 import { type MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
 
 export type CallToActionProps = Omit<
@@ -17,14 +18,15 @@ export const CallToAction = ({
   content,
   matomo,
   index,
+  className,
   ...props
 }: CallToActionProps) => {
   const handleClick = () => trackCustomEvent(matomo)
 
   const buttonProps: ButtonProps = {
     variant: index === 0 ? "solid" : "outline",
     isSecondary: index !== 0,
-    flex: { base: 1, md: "initial" },
+    className: cn("flex-[1] md:flex-[initial]", className),
   }
 
   return (

src/components/Hero/HubHero/index.tsx

@@ -1,9 +1,10 @@
-import { Box, Heading, Stack, Text } from "@chakra-ui/react"
-
 import type { CommonHeroProps } from "@/lib/types"
 
 import { CallToAction } from "@/components/Hero/CallToAction"
-import { Image } from "@/components/Image"
+import { TwImage } from "@/components/Image"
+import { Stack } from "@/components/ui/flex"
+
+import { cn } from "@/lib/utils/cn"
 
 export type HubHeroProps = Omit<CommonHeroProps, "breadcrumbs" | "blurDataURL">
 
@@ -21,72 +22,56 @@ const HubHero = ({
   }
 
   return (
-    <Box position="relative">
-      <Image
+    <div className="relative">
+      <TwImage
         src={heroImg}
         alt=""
         priority
         // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
         sizes="(max-width: 1504px) 100vw, 1504px"
         style={{ width: "100vw", objectFit: "cover" }}
-        h={{
-          base: "192px",
-          md: "256px",
-          lg: "320px",
-          xl: "576px",
-          "2xl": "672px",
-        }}
+        className="h-[192px] w-screen object-cover md:h-[256px] lg:h-[320px] xl:h-[576px] 2xl:h-[672px]"
       />
       <Stack
-        spacing="4"
-        p={{ base: "4", lg: "8" }}
-        textAlign={{ base: "center", xl: "start" }}
-        borderRadius={{ xl: "base" }}
-        bg={{ xl: "hubHeroContentBg" }}
-        position={{ xl: "absolute" }}
-        maxW={{ xl: "sm" }}
-        top={{ xl: "50%" }}
-        transform={{ xl: "translateY(-50%)" }}
-        backdropFilter={{ xl: "auto" }}
-        backdropBlur={{ xl: "base" }}
-        wordBreak="break-word"
-        sx={{
-          "inset-inline-start": { xl: "32px" },
-        }}
+        className={cn(
+          "gap-4 p-4 lg:p-8",
+          "text-center xl:text-start",
+          "xl:rounded",
+          "xl:bg-hub-hero-content-bg",
+          "xl:absolute xl:top-1/2 xl:max-w-sm",
+          "xl:-translate-y-1/2 xl:transform",
+          "xl:backdrop-blur xl:backdrop-filter",
+          "break-words",
+          "xl:start-[32px]"
+        )}
       >
         {title ? (
-          <Text
-            as="h1"
-            size="md"
-            color="body.medium"
-            fontWeight="normal"
-            textTransform="uppercase"
-          >
+          <h1 className="text-md font-normal uppercase text-body-medium">
             {title}
-          </Text>
+          </h1>
         ) : null}
-        <Stack
-          alignSelf="center"
-          spacing={{ base: "2", md: "1" }}
-          maxW="container.md"
-        >
-          <Heading as={title ? "h2" : "h1"} size="2xl">
-            {header}
-          </Heading>
-          <Text size="lg">{description}</Text>
+        <Stack className="max-w-screen-md gap-2 self-center md:gap-1">
+          {title ? (
+            <h2 className="text-4xl lg:text-5xl">{header}</h2>
+          ) : (
+            <h1 className="text-4xl lg:text-5xl">{header}</h1>
+          )}
+
+          <p className="text-lg">{description}</p>
         </Stack>
         <Stack
-          direction={{ base: "column", md: "row" }}
-          justify={{ md: "center", xl: "start" }}
-          spacing="4"
+          className={cn(
+            "flex-col gap-4 md:flex-row",
+            "md:justify-center xl:justify-start"
+          )}
         >
           {buttons?.map((button, idx) => {
             if (!button) return
             return <CallToAction key={idx} index={idx} {...button} />
           })}
         </Stack>
       </Stack>
-    </Box>
+    </div>
   )
 }