From 9cf3703726e43cbcabe2a6de9da252ee36b1205b Mon Sep 17 00:00:00 2001
From: Natalia <natalia.debska9*@gmail.com>
Date: Thu, 2 Sep 2021 23:05:06 +0200
Subject: [PATCH 1/9] add SectinContainer component

---
 packages/ui/src/components/Container.tsx      |  2 ++
 .../SectionContainer/SectionContainer.tsx     | 24 +++++++++++++++++++
 .../src/components/SectionContainer/index.ts  |  1 +
 3 files changed, 27 insertions(+)
 create mode 100644 packages/ui/src/components/Container.tsx
 create mode 100644 packages/ui/src/components/SectionContainer/SectionContainer.tsx
 create mode 100644 packages/ui/src/components/SectionContainer/index.ts

diff --git a/packages/ui/src/components/Container.tsx b/packages/ui/src/components/Container.tsx
new file mode 100644
index 00000000..5fdc1ef1
--- /dev/null
+++ b/packages/ui/src/components/Container.tsx
@@ -0,0 +1,2 @@
+export { Container } from '@chakra-ui/react';
+export type { ContainerProps } from '@chakra-ui/react';
diff --git a/packages/ui/src/components/SectionContainer/SectionContainer.tsx b/packages/ui/src/components/SectionContainer/SectionContainer.tsx
new file mode 100644
index 00000000..ada7603b
--- /dev/null
+++ b/packages/ui/src/components/SectionContainer/SectionContainer.tsx
@@ -0,0 +1,24 @@
+import React, { ReactElement } from 'react';
+import { Container } from '@chakra-ui/react';
+
+export interface ContainerProps {
+  children: ReactElement;
+}
+
+const widthValue = {
+  base: '100%',
+  sm: '100%',
+  md: '100%',
+  lg: 'min(960px, calc(100%-128px))',
+  xl: '1080px',
+  '2xl': '1280px',
+} as const;
+const paddingXValue = { base: '16px', sm: '32px', md: '64px', lg: '0' } as const;
+
+export const SectionContainer = ({ children }: ContainerProps) => {
+  return (
+    <Container minW={widthValue} px={paddingXValue}>
+      {children}
+    </Container>
+  );
+};
diff --git a/packages/ui/src/components/SectionContainer/index.ts b/packages/ui/src/components/SectionContainer/index.ts
new file mode 100644
index 00000000..cc16c180
--- /dev/null
+++ b/packages/ui/src/components/SectionContainer/index.ts
@@ -0,0 +1 @@
+export { SectionContainer } from './SectionContainer';

From 9d9042f3ef863d84b9d1911f4d4117d7800cd465 Mon Sep 17 00:00:00 2001
From: Natalia <natalia.debska9*@gmail.com>
Date: Thu, 2 Sep 2021 23:05:22 +0200
Subject: [PATCH 2/9] add new breakpoint value

---
 packages/ui/src/theme/overwrites/foundations/breakpoints.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/theme/overwrites/foundations/breakpoints.ts b/packages/ui/src/theme/overwrites/foundations/breakpoints.ts
index 0ae61a96..7ce1bead 100644
--- a/packages/ui/src/theme/overwrites/foundations/breakpoints.ts
+++ b/packages/ui/src/theme/overwrites/foundations/breakpoints.ts
@@ -5,5 +5,6 @@ export const breakpoints = createBreakpoints({
   md: '768px',
   lg: '1024px',
   xl: '1280px',
+  '1xl': '1366px',
   '2xl': '1536px',
 });

From 33c818744660526db04226d953fe903e86456a61 Mon Sep 17 00:00:00 2001
From: Natalia <natalia.debska9*@gmail.com>
Date: Thu, 2 Sep 2021 23:06:07 +0200
Subject: [PATCH 3/9] fix style in Hero section

---
 packages/website/src/components/Hero.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/website/src/components/Hero.tsx b/packages/website/src/components/Hero.tsx
index 465a5ed8..99866a4f 100644
--- a/packages/website/src/components/Hero.tsx
+++ b/packages/website/src/components/Hero.tsx
@@ -14,14 +14,19 @@ 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 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', sm: '120px 64px 160px' }}>
-      <VStack spacing={{ base: '24px', md: '56px' }} maxW="min(1400px, 100%)">
-        <VStack spacing={{ base: '16px', md: '32px' }} textAlign="center">
+    <Flex
+      justify="center"
+      width="100%"
+      p={{ base: '32px 16px 64px', sm: '120px 64px 160px' }}
+      pt={{ xl: '60px', '1xl': '80px', '2xl': '120px' }}
+    >
+      <VStack spacing={{ base: '24px', xl: '32px', '1xl': '40px', '2xl': '56px' }}>
+        <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>

From 258e1c2c371b279bd3c3bcfadd14966cc1aa8cac Mon Sep 17 00:00:00 2001
From: Natalia <natalia.debska9*@gmail.com>
Date: Thu, 2 Sep 2021 23:06:37 +0200
Subject: [PATCH 4/9] wrap section in ContainerSection

---
 packages/website/src/pages/index.tsx | 33 ++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/website/src/pages/index.tsx b/packages/website/src/pages/index.tsx
index bf419db3..fdb37bb1 100644
--- a/packages/website/src/pages/index.tsx
+++ b/packages/website/src/pages/index.tsx
@@ -1,5 +1,7 @@
 import type { InferGetStaticPropsType } from 'next';
 
+import { SectionContainer } from '@coderscamp/ui/components/SectionContainer';
+
 import { About } from '@/components/About';
 import { AboutBenefits } from '@/components/Benefits';
 import { BigNumbers } from '@/components/BigNumbers/BigNumbers';
@@ -15,15 +17,32 @@ import { getTestimonialsStaticProps } from '../getTestimonialsStaticProps';
 const Home = ({ testimonials }: InferGetStaticPropsType<typeof getTestimonialsStaticProps>) => {
   return (
     <>
-      <Hero />
-      <About />
-      <BigNumbers />
+      <SectionContainer>
+        <Hero />
+      </SectionContainer>
+      <SectionContainer>
+        <About />
+      </SectionContainer>
+      <SectionContainer>
+        <BigNumbers />
+      </SectionContainer>
+
       <Curriculum />
+
       <LearningSources />
-      <Projects />
-      <AboutBenefits />
-      <AboutTestimonials testimonials={testimonials} />
-      <CandidateSchedule />
+
+      <SectionContainer>
+        <Projects />
+      </SectionContainer>
+      <SectionContainer>
+        <AboutBenefits />
+      </SectionContainer>
+      <SectionContainer>
+        <AboutTestimonials testimonials={testimonials} />
+      </SectionContainer>
+      <SectionContainer>
+        <CandidateSchedule />
+      </SectionContainer>
     </>
   );
 };

From ae3a7f2d5438e17f9890d673acd329bddf884982 Mon Sep 17 00:00:00 2001
From: Natalia <natalia.debska9*@gmail.com>
Date: Thu, 14 Oct 2021 22:40:30 +0200
Subject: [PATCH 5/9] update spacing size

---
 packages/website/src/components/Hero.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/website/src/components/Hero.tsx b/packages/website/src/components/Hero.tsx
index ebfeb51e..e6cb2584 100644
--- a/packages/website/src/components/Hero.tsx
+++ b/packages/website/src/components/Hero.tsx
@@ -20,9 +20,14 @@ export const Hero = () => {
   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">
+    <Flex
+      justify="center"
+      width="100%"
+      p={{ base: '32px 16px 64px', xl: '60px 64px 160px' }}
+      pt={{ base: '32px', xl: '60px', '1xl': '80px', '2xl': '120px' }}
+    >
+      <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>

From 28e39c2101e49be45fdd07cc1b5f9b3a865ace72 Mon Sep 17 00:00:00 2001
From: Natalia <natalia.debska9*@gmail.com>
Date: Sat, 16 Oct 2021 08:48:42 +0200
Subject: [PATCH 6/9] update 2xl breakpoint value

---
 packages/ui/src/theme/overwrites/foundations/breakpoints.ts | 2 +-
 packages/website/src/components/Hero.tsx                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/theme/overwrites/foundations/breakpoints.ts b/packages/ui/src/theme/overwrites/foundations/breakpoints.ts
index 7ce1bead..143a3ace 100644
--- a/packages/ui/src/theme/overwrites/foundations/breakpoints.ts
+++ b/packages/ui/src/theme/overwrites/foundations/breakpoints.ts
@@ -6,5 +6,5 @@ export const breakpoints = createBreakpoints({
   lg: '1024px',
   xl: '1280px',
   '1xl': '1366px',
-  '2xl': '1536px',
+  '2xl': '1540px',
 });
diff --git a/packages/website/src/components/Hero.tsx b/packages/website/src/components/Hero.tsx
index e6cb2584..f7238309 100644
--- a/packages/website/src/components/Hero.tsx
+++ b/packages/website/src/components/Hero.tsx
@@ -23,7 +23,7 @@ export const Hero = () => {
     <Flex
       justify="center"
       width="100%"
-      p={{ base: '32px 16px 64px', xl: '60px 64px 160px' }}
+      p={{ base: '32px 0px 64px', xl: '60px 64px 160px' }}
       pt={{ base: '32px', xl: '60px', '1xl': '80px', '2xl': '120px' }}
     >
       <VStack spacing={{ base: '32px', '1xl': '40px', '2xl': '56px' }} maxW="min(1400px, 100%)">

From a7ccbbf2f61da211d644b7b2d597da7655c367f0 Mon Sep 17 00:00:00 2001
From: Natalia <natalia.debska9*@gmail.com>
Date: Sat, 16 Oct 2021 09:59:05 +0200
Subject: [PATCH 7/9] replace flex with section

---
 packages/website/src/components/Hero.tsx | 19 +++++++++----
 packages/website/src/pages/index.tsx     | 35 ++++++------------------
 2 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/packages/website/src/components/Hero.tsx b/packages/website/src/components/Hero.tsx
index dc3a3460..d46a8e9e 100644
--- a/packages/website/src/components/Hero.tsx
+++ b/packages/website/src/components/Hero.tsx
@@ -1,5 +1,4 @@
 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';
@@ -7,21 +6,31 @@ 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 widthValue = {
+    base: '100%',
+    lg: 'min(960px, calc(100%-128px))',
+    xl: '1080px',
+    '2xl': '1280px',
+  } as const;
+  const paddingXValue = { base: '16px', sm: '32px', md: '64px', lg: '0' } 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%"
+    <Section
+      minW={widthValue}
+      px={paddingXValue}
       p={{ base: '32px 0px 64px', xl: '60px 64px 160px' }}
       pt={{ base: '32px', xl: '60px', '1xl': '80px', '2xl': '120px' }}
+      spacing="32px"
     >
       <VStack spacing={{ base: '32px', '1xl': '40px', '2xl': '56px' }} maxW="min(1400px, 100%)">
         <VStack spacing={{ base: '16px', '1xl': '24px', '2xl': '32px' }} textAlign="center">
@@ -49,6 +58,6 @@ export const Hero = () => {
           </Button>
         </Stack>
       </VStack>
-    </Flex>
+    </Section>
   );
 };
diff --git a/packages/website/src/pages/index.tsx b/packages/website/src/pages/index.tsx
index fdb37bb1..66910b1e 100644
--- a/packages/website/src/pages/index.tsx
+++ b/packages/website/src/pages/index.tsx
@@ -1,7 +1,5 @@
 import type { InferGetStaticPropsType } from 'next';
 
-import { SectionContainer } from '@coderscamp/ui/components/SectionContainer';
-
 import { About } from '@/components/About';
 import { AboutBenefits } from '@/components/Benefits';
 import { BigNumbers } from '@/components/BigNumbers/BigNumbers';
@@ -10,6 +8,7 @@ import { Hero } from '@/components/Hero';
 import { LearningSources } from '@/components/LearningSources';
 import { Projects } from '@/components/Projects';
 import { CandidateSchedule } from '@/components/Schedule';
+import { StrategicPartnership } from '@/components/StrategicPartnership';
 import { AboutTestimonials } from '@/components/Testimonials';
 
 import { getTestimonialsStaticProps } from '../getTestimonialsStaticProps';
@@ -17,32 +16,16 @@ import { getTestimonialsStaticProps } from '../getTestimonialsStaticProps';
 const Home = ({ testimonials }: InferGetStaticPropsType<typeof getTestimonialsStaticProps>) => {
   return (
     <>
-      <SectionContainer>
-        <Hero />
-      </SectionContainer>
-      <SectionContainer>
-        <About />
-      </SectionContainer>
-      <SectionContainer>
-        <BigNumbers />
-      </SectionContainer>
-
+      <Hero />
+      <About />
+      <BigNumbers />
       <Curriculum />
-
       <LearningSources />
-
-      <SectionContainer>
-        <Projects />
-      </SectionContainer>
-      <SectionContainer>
-        <AboutBenefits />
-      </SectionContainer>
-      <SectionContainer>
-        <AboutTestimonials testimonials={testimonials} />
-      </SectionContainer>
-      <SectionContainer>
-        <CandidateSchedule />
-      </SectionContainer>
+      <Projects />
+      <AboutBenefits />
+      <StrategicPartnership />
+      <AboutTestimonials testimonials={testimonials} />
+      <CandidateSchedule />
     </>
   );
 };

From d54cdd85eb43379dace6186cfabbdc2a8bc84177 Mon Sep 17 00:00:00 2001
From: Natalia <natalia.debska9*@gmail.com>
Date: Sat, 16 Oct 2021 10:01:10 +0200
Subject: [PATCH 8/9] delete sectionContainer component

---
 packages/ui/src/components/Container.tsx      |  2 --
 .../SectionContainer/SectionContainer.tsx     | 24 -------------------
 .../src/components/SectionContainer/index.ts  |  1 -
 3 files changed, 27 deletions(-)
 delete mode 100644 packages/ui/src/components/Container.tsx
 delete mode 100644 packages/ui/src/components/SectionContainer/SectionContainer.tsx
 delete mode 100644 packages/ui/src/components/SectionContainer/index.ts

diff --git a/packages/ui/src/components/Container.tsx b/packages/ui/src/components/Container.tsx
deleted file mode 100644
index 5fdc1ef1..00000000
--- a/packages/ui/src/components/Container.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Container } from '@chakra-ui/react';
-export type { ContainerProps } from '@chakra-ui/react';
diff --git a/packages/ui/src/components/SectionContainer/SectionContainer.tsx b/packages/ui/src/components/SectionContainer/SectionContainer.tsx
deleted file mode 100644
index ada7603b..00000000
--- a/packages/ui/src/components/SectionContainer/SectionContainer.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { ReactElement } from 'react';
-import { Container } from '@chakra-ui/react';
-
-export interface ContainerProps {
-  children: ReactElement;
-}
-
-const widthValue = {
-  base: '100%',
-  sm: '100%',
-  md: '100%',
-  lg: 'min(960px, calc(100%-128px))',
-  xl: '1080px',
-  '2xl': '1280px',
-} as const;
-const paddingXValue = { base: '16px', sm: '32px', md: '64px', lg: '0' } as const;
-
-export const SectionContainer = ({ children }: ContainerProps) => {
-  return (
-    <Container minW={widthValue} px={paddingXValue}>
-      {children}
-    </Container>
-  );
-};
diff --git a/packages/ui/src/components/SectionContainer/index.ts b/packages/ui/src/components/SectionContainer/index.ts
deleted file mode 100644
index cc16c180..00000000
--- a/packages/ui/src/components/SectionContainer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { SectionContainer } from './SectionContainer';

From 4ab35c9d3ecf13fd953bf686ff4f4b1bdc99563a Mon Sep 17 00:00:00 2001
From: Natalia <natalia.debska9*@gmail.com>
Date: Sat, 16 Oct 2021 10:21:24 +0200
Subject: [PATCH 9/9] refactor padding

---
 packages/website/src/components/Hero.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/website/src/components/Hero.tsx b/packages/website/src/components/Hero.tsx
index d46a8e9e..ea832aa9 100644
--- a/packages/website/src/components/Hero.tsx
+++ b/packages/website/src/components/Hero.tsx
@@ -18,7 +18,6 @@ export const Hero = () => {
     xl: '1080px',
     '2xl': '1280px',
   } as const;
-  const paddingXValue = { base: '16px', sm: '32px', md: '64px', lg: '0' } as const;
 
   const mainHeaderSize = { base: '4xl', md: '6xl', '1xl': '7xl', '2xl': '8xl' } as const;
   const subheaderSize = { base: 'md', sm: 'xl', '1xl': '2xl' } as const;
@@ -27,9 +26,15 @@ export const Hero = () => {
   return (
     <Section
       minW={widthValue}
-      px={paddingXValue}
-      p={{ base: '32px 0px 64px', xl: '60px 64px 160px' }}
-      pt={{ base: '32px', xl: '60px', '1xl': '80px', '2xl': '120px' }}
+      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%)">