Merge pull request #466 from Sitecore/fix-hero-event-variant

Fixed padding top and applied same component structure as Other Hero Variant
Sitecore · May 6, 2024 · abfc8c6 · abfc8c6
2 parents 46ec339 + e3f19d7
commit abfc8c6
Showing 1 changed file with 40 additions and 35 deletions.
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Hero.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Hero.tsx
@@ -91,52 +91,57 @@ export const HeroHomepage = (props: HeroProps): JSX.Element => {
 
 export const HeroEvent = (props: HeroProps): JSX.Element => {
   return (
-    <Flex
-      direction={{ base: 'row', md: 'row' }}
-      alignItems="center"
+    <>
+    <Flex 
+      flexDir={{ base: 'column', md: 'row' }} 
+      width="100%" 
+      paddingRight="0px" 
+      paddingLeft="0px"
       bg="black"
       color="white"
-      maxHeight={{ base: 'auto', md: '400px' }}
-      m="auto"
-      maxW="1240px"
-      pt={10}
-    >
-      <Flex
-        direction="column"
+      >
+      <Box
         ml="auto"
         maxW={{ base: '100%', md: `calc((${Template.MaxWidth}) / 2)` }}
         px={{ base: PaddingX.Mobile, md: PaddingX.Desktop }}
         py={{ base: '30px', md: '60px' }}
       >
-        <Box width="auto" alignSelf="end">
-          <Heading as="h1" fontSize="3xl" fontWeight="bold" mb="33px">
-            <JssText field={props.fields.Headline} />
-          </Heading>
-
-          {isSitecoreTextFieldPopulated(props.fields.Text) && (
-            <Text fontSize="18px">
-              <JssText field={props.fields.Text} />
-            </Text>
-          )}
-        </Box>
-      </Flex>
-      <Box
-        minWidth={{ base: '100%', md: '50%' }}
-        maxHeight="400px"
-        h="100%"
-        maxWidth="620px"
-        overflow="hidden"
-      >
+        <Heading as="h1" fontSize="3xl" fontWeight="bold" mb="33px">
+          <JssText field={props.fields.Headline} />
+        </Heading>
+
+        {isSitecoreTextFieldPopulated(props.fields.EventDate) && (
+          <Text fontSize="18px" mb={6}>
+            <JssText field={props.fields.EventDate} />
+          </Text>
+        )}
+
+        {isSitecoreTextFieldPopulated(props.fields.Text) && (
+          <Text mb={6} fontSize="18px">
+            <JssText field={props.fields.Text} />
+          </Text>
+        )}
+
+        {isSitecoreLinkFieldPopulated(props.fields.CallToAction) && (
+          <Box width="auto" alignSelf="start">
+            <ButtonLink field={props.fields.CallToAction} />
+          </Box>
+        )}
+      </Box>
+      <Flex flexGrow={{ md: 'grow' }} maxW={{ base: '100%', md: '50%' }}>
         <Image
-          src={props.fields.Image?.value?.src}
-          //alt={props.fields.Image?.value?.alt}
-          width="full"
-          height="100%"
-          maxHeight="400px"
+          alt="Event Image"
+          w="full"
+          h="auto"
           objectFit="cover"
+          objectPosition="center"
+          aspectRatio="1440/500"
+          src={props.fields.Image?.value?.src}
+          minH="220px"
         />
-      </Box>
+      </Flex>
     </Flex>
+    </>
   );
 };