Merge pull request #344 from PerficientDave/Feature/SUGCON24-Hero-UX-…

…Updates-2-13 SUGCON24 Hero Updates + Button Hover
Sitecore · Feb 14, 2024 · 1c7fa21 · 1c7fa21
2 parents f3d809f + fc36c6a
commit 1c7fa21
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/src/Project/Sugcon2024/Sugcon/src/Theme.ts b/src/Project/Sugcon2024/Sugcon/src/Theme.ts
@@ -8,19 +8,29 @@ const Button = defineStyleConfig({
   sizes: {
     md: {
       fontSize: '18px',
-      px: 10,
-      py: 8,
+      px: '42px',
+      py: '24px',
     },
   },
   // Two variants: outline and solid
   variants: {
     primary: {
       bg: '#EB1F1F',
       color: 'white',
+      _hover: {
+        // Hover state
+        bg: 'white', // Example hover background color
+        color: '#EB1F1F', // Hover state text color (if you want to change it)
+      },
     },
     secondary: {
       bg: 'white',
       color: '#374086',
+      _hover: {
+        // Hover state
+        bg: '#374086', // Example hover background color
+        color: 'white', // Hover state text color (if you want to change it)
+      },
     },
   },
   // The default size and variant values

diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Hero.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Hero.tsx
@@ -37,6 +37,7 @@ export const HeroHomepage = (props: HeroProps): JSX.Element => {
       alignItems="center"
       bg="#f0f0f0"
       maxHeight={{ base: 'auto', md: '400px' }}
+      w="100%"
     >
       <Flex direction="column" p={5} minWidth="50%" height="100%" ml={6} mr={6}>
         <Box width="auto" alignSelf="end" maxWidth="620px" minWidth="360px">
@@ -60,7 +61,7 @@ export const HeroHomepage = (props: HeroProps): JSX.Element => {
           )}
         </Box>
       </Flex>
-      <Box minWidth={{ base: '100%', md: '50%' }} maxHeight="400px">
+      <Box minWidth={{ base: '100%', md: '50%' }} maxHeight="400px" h="100%" overflow="hidden">
         {' '}
         <Image
           src={props.fields.Image?.value?.src}
@@ -82,6 +83,7 @@ export const HeroEvent = (props: HeroProps): JSX.Element => {
       bg="black"
       color="white"
       maxHeight={{ base: 'auto', md: '400px' }}
+      w="100%"
     >
       <Flex direction="column" ml={6} mr={6} p={5} height="100%" minWidth="50%">
         <Box width="auto" alignSelf="end" maxWidth="620px" minWidth="360px">
@@ -95,7 +97,7 @@ export const HeroEvent = (props: HeroProps): JSX.Element => {
           )}
         </Box>
       </Flex>
-      <Box minWidth={{ base: '100%', md: '50%' }} maxHeight="400px" height="100%">
+      <Box minWidth={{ base: '100%', md: '50%' }} maxHeight="400px" h="100%" overflow="hidden">
         <Image
           src={props.fields.Image?.value?.src}
           //alt={props.fields.Image?.value?.alt}
@@ -166,7 +168,7 @@ export const HeroJustificationLetter = (props: HeroProps): JSX.Element => {
         width="50vw"
         backgroundImage="url('/images/SUGCON-justification-letter-chatbox-artwork.svg')"
         backgroundSize="contain"
-        backgroundPosition="right center"
+        backgroundPosition="right bottom"
         backgroundRepeat="no-repeat"
         zIndex={0}
       />