fix(website): adjusting the website content to different sizes of screens and browsers

packages/ui/src/theme/overwrites/foundations/breakpoints.ts

@@ -5,5 +5,6 @@ export const breakpoints = createBreakpoints({
   md: '768px',
   lg: '1024px',
   xl: '1280px',
-  '2xl': '1536px',
+  '1xl': '1366px',
+  '2xl': '1540px',
 });

packages/website/src/components/Hero.tsx

@@ -1,25 +1,44 @@
 import { Button } from '@coderscamp/ui/components/Button';
-import { Flex } from '@coderscamp/ui/components/Flex';
 import { Stack, VStack } from '@coderscamp/ui/components/Stack';
 import { Typography } from '@coderscamp/ui/components/Typography';
 import { useBreakpointValue } from '@coderscamp/ui/hooks/useBreakpointValue';
 
 import { MENTOR_RECRUITMENT_FORM_URL, PARTICIPANT_RECRUITMENT_FORM_URL, PROJECTS_COUNT, TEAM_SIZE } from '@/constants';
 
 import { externalLinkBaseProps } from './ExternalLink';
+import { Section } from './Section';
 
 export const Hero = () => {
   const buttonSize = useBreakpointValue({ base: 'sm', sm: 'md', md: 'lg' } as const);
   const buttonsStackDirection = useBreakpointValue({ base: 'column', md: 'row' } as const);
 
-  const mainHeaderSize = { base: '4xl', sm: '6xl', md: '7xl', xl: '8xl' } as const;
-  const subheaderSize = { base: 'md', sm: 'xl', md: '2xl' } as const;
+  const widthValue = {
+    base: '100%',
+    lg: 'min(960px, calc(100%-128px))',
+    xl: '1080px',
+    '2xl': '1280px',
+  } as const;
+
+  const mainHeaderSize = { base: '4xl', md: '6xl', '1xl': '7xl', '2xl': '8xl' } as const;
+  const subheaderSize = { base: 'md', sm: 'xl', '1xl': '2xl' } as const;
   const buttonProps = { size: buttonSize, width: 'min(280px, 75vw)' } as const;
 
   return (
-    <Flex justify="center" width="100%" p={{ base: '32px 16px 64px', lg: '120px 64px 160px' }}>
-      <VStack spacing={{ base: '24px', md: '56px' }} maxW="min(1400px, 100%)">
-        <VStack spacing={{ base: '16px', md: '32px' }} textAlign="center">
+    <Section
+      minW={widthValue}
+      p={{
+        base: '32px 0px 64px',
+        sm: '32px 32px 64px',
+        md: '64px 64px 64px',
+        lg: '32px 0 64px',
+        xl: '60px 64px 160px',
+        '1xl': '80px 64px 160px',
+        '2xl': '120px 64px 160px',
+      }}
+      spacing="32px"
+    >
+      <VStack spacing={{ base: '32px', '1xl': '40px', '2xl': '56px' }} maxW="min(1400px, 100%)">
+        <VStack spacing={{ base: '16px', '1xl': '24px', '2xl': '32px' }} textAlign="center">
           <Typography size={mainHeaderSize} color="gray.900" weight="extrabold">
             Największy otwarty kurs programowania webowego w Polsce
           </Typography>
@@ -44,6 +63,6 @@ export const Hero = () => {
           </Button>
         </Stack>
       </VStack>
-    </Flex>
+    </Section>
   );
 };