feat(website): create Partners section (#100)

packages/website/src/components/Partners/Partners.data.ts

@@ -0,0 +1,51 @@
+import { ComponentType } from 'react';
+
+import { CodeCademy } from '@coderscamp/ui/svg/learning-sources';
+import { HTMLChakraProps } from '@coderscamp/ui/types';
+
+export type PartnersImgType = {
+  id: string;
+  image: ComponentType<HTMLChakraProps<'svg'>>;
+  url: string;
+};
+
+export type PartnerType = {
+  title: string;
+  listOfPartnersImg: PartnersImgType[];
+};
+
+export const listOfPartners: PartnerType[] = [
+  {
+    title: 'Partnerzy kursu',
+    listOfPartnersImg: [
+      { id: '1', image: CodeCademy, url: 'https://codecademy.com/' },
+      { id: '2', image: CodeCademy, url: 'https://codecademy.com/' },
+      { id: '3', image: CodeCademy, url: 'https://codecademy.com/' },
+      { id: '4', image: CodeCademy, url: 'https://codecademy.com/' },
+      { id: '5', image: CodeCademy, url: 'https://codecademy.com/' },
+    ],
+  },
+  {
+    title: 'Patronat honorowy',
+    listOfPartnersImg: [
+      { id: '1', image: CodeCademy, url: 'https://codecademy.com/' },
+      { id: '2', image: CodeCademy, url: 'https://codecademy.com/' },
+      { id: '3', image: CodeCademy, url: 'https://codecademy.com/' },
+      { id: '4', image: CodeCademy, url: 'https://codecademy.com/' },
+      { id: '5', image: CodeCademy, url: 'https://codecademy.com/' },
+    ],
+  },
+  {
+    title: 'Patronat medialny',
+    listOfPartnersImg: [
+      { id: '1', image: CodeCademy, url: 'https://codecademy.com/' },
+      { id: '2', image: CodeCademy, url: 'https://codecademy.com/' },
+      { id: '3', image: CodeCademy, url: 'https://codecademy.com/' },
+      { id: '4', image: CodeCademy, url: 'https://codecademy.com/' },
+      { id: '5', image: CodeCademy, url: 'https://codecademy.com/' },
+      { id: '6', image: CodeCademy, url: 'https://codecademy.com/' },
+      { id: '7', image: CodeCademy, url: 'https://codecademy.com/' },
+      { id: '8', image: CodeCademy, url: 'https://codecademy.com/' },
+    ],
+  },
+];

packages/website/src/components/Partners/Partners.tsx

@@ -0,0 +1,21 @@
+import { VStack } from '@coderscamp/ui/components/Stack';
+import { Typography } from '@coderscamp/ui/components/Typography';
+
+import { listOfPartners, PartnerType } from '@/components/Partners/Partners.data';
+import { PartnersList } from '@/components/Partners/PartnersList';
+import { Section } from '@/components/Section';
+
+export const Partners = () => {
+  return (
+    <Section spacing="64px">
+      <Typography size="4xl" weight="extrabold">
+        Zaufali nam
+      </Typography>
+      <VStack flexDir="column" w="100%" spacing="40px">
+        {listOfPartners?.map(({ title, listOfPartnersImg }: PartnerType) => (
+          <PartnersList key={title} title={title} listOfPartnersImg={listOfPartnersImg} />
+        ))}
+      </VStack>
+    </Section>
+  );
+};

packages/website/src/components/Partners/PartnersList.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { Center } from '@coderscamp/ui/components/Center';
+import { Flex } from '@coderscamp/ui/components/Flex';
+import { Typography } from '@coderscamp/ui/components/Typography';
+
+import { PartnersImgType, PartnerType } from '@/components/Partners/Partners.data';
+
+import { ExternalLink } from '../ExternalLink';
+
+export const PartnersList = ({ title = '', listOfPartnersImg = [] }: PartnerType) => {
+  return (
+    <>
+      <Center w="100%" bgColor="gray.100" py="8px">
+        <Typography color="gray.900" weight="bold" size="md">
+          {title?.toUpperCase()}
+        </Typography>
+      </Center>
+      <Flex flexWrap="wrap" justifyContent="space-between">
+        {listOfPartnersImg?.map(({ id, image, url }: PartnersImgType) => {
+          const Image = image;
+
+          return (
+            <Center key={id} maxW="320px" maxH="80px" margin={{ base: '0 auto 40px auto', md: '0 auto 80px auto' }}>
+              <ExternalLink href={url} aria-label={`Przejdź na stronę ${id}`}>
+                <Image width="100%" />
+              </ExternalLink>
+            </Center>
+          );
+        })}
+      </Flex>
+    </>
+  );
+};

packages/website/src/components/Partners/index.ts

@@ -0,0 +1 @@
+export { Partners } from './Partners';

packages/website/src/components/Schedule/useSchedule.tsx

@@ -44,8 +44,7 @@ export const useCandidateSchedule = (): ScheduleListItem[] => {
     {
       index: 4,
       date: MAIN_TEST_FULL_DATE,
-      description:
-        `Rozwiąż test i zadania praktyczne z pierwszego modułu. Aby dostać się na kurs musisz znaleźć się wśród ${PLACES_COUNT} osób z najlepszymi wynikami.`,
+      description: `Rozwiąż test i zadania praktyczne z pierwszego modułu. Aby dostać się na kurs musisz znaleźć się wśród ${PLACES_COUNT} osób z najlepszymi wynikami.`,
     },
     {
       index: 5,

packages/website/src/pages/index.tsx

@@ -6,6 +6,7 @@ import { BigNumbers } from '@/components/BigNumbers/BigNumbers';
 import { Curriculum } from '@/components/Curriculum';
 import { Hero } from '@/components/Hero';
 import { LearningSources } from '@/components/LearningSources';
+import { Partners } from '@/components/Partners';
 import { Projects } from '@/components/Projects';
 import { CandidateSchedule } from '@/components/Schedule';
 import { AboutTestimonials } from '@/components/Testimonials';
@@ -24,6 +25,7 @@ const Home = ({ testimonials }: InferGetStaticPropsType<typeof getTestimonialsSt
       <AboutBenefits />
       <AboutTestimonials testimonials={testimonials} />
       <CandidateSchedule />
+      <Partners />
     </>
   );
 };