feat: add virtual certificate section

packages/frontend/app/templates/VirtualAdoption/VirtualAdoption.jsx

@@ -13,6 +13,7 @@ import BasicInfo from "./components/BasicInfo"
 import RecurringPayment from "./components/RecurringPayment"
 import PaymentConfirmationForm from "./components/PaymentConfirmationForm"
 import ChooseYourVirtualPet from "./components/ChooseYourVirtualPet"
+import VirtualCertificate from "./components/VirtualCertificate"
 import Steps from "./components/Steps"
 
 import { animalsType } from "../../lib/types"
@@ -41,6 +42,7 @@ const VirtualAdoption = ({ animals, animalsData }) => {
         <ChooseYourVirtualPet data={animalsData.items} />
         <RecurringPayment />
         <PaymentConfirmationForm data={animals.items} />
+        <VirtualCertificate />
         <CtaBanner
           heading="Masz pytania lub wątpliwości?"
           buttonText="Skontaktuj się z nami"

packages/frontend/app/templates/VirtualAdoption/components/VirtualCertificate/VirtualCertificate.jsx

@@ -0,0 +1,40 @@
+/* eslint-disable react/no-danger */
+import Container from "design-system/components/container"
+import Typography from "design-system/components/typography"
+import TextBanner from "design-system/patterns/textBanner"
+
+import * as Styled from "./VirtualCertificate.styled"
+
+const VirtualCertificate = () => (
+  <Styled.Section id="wirtualna-adopcja">
+    <Container as="section">
+      <Styled.Wrapper>
+        <Styled.Content>
+          <TextBanner
+            heading="Certyfikat wirtualnego opiekuna"
+            subtitle="Zastanawiasz się czy warto?"
+            layout="left"
+            tabletLayout="left"
+            mobileLayout="left"
+            size="medium"
+          >
+            <Typography variant="bodyTitle">
+              Każdy, kto zdecyduje się na comiesięczne wpłaty w podziękowaniu od
+              wybranego podopiecznego i Fundacji, otrzyma swój indywidualny
+              CERTYFIKAT Wirtualnego Opiekuna!
+            </Typography>
+          </TextBanner>
+        </Styled.Content>
+        <Styled.Image
+          alt="wirtualny certyfikat"
+          src="../virtual-adoption/virtual-certificate.png"
+        />
+        <Styled.AdditionalNote variant="h3">
+          Dziękujemy za każda wirtualną adopcje! Pamiętaj Twoja pomoc ma moc!
+        </Styled.AdditionalNote>
+      </Styled.Wrapper>
+    </Container>
+  </Styled.Section>
+)
+
+export default VirtualCertificate

packages/frontend/app/templates/VirtualAdoption/components/VirtualCertificate/VirtualCertificate.styled.js

@@ -0,0 +1,36 @@
+import styled from "@emotion/styled"
+import Typography from "design-system/components/typography"
+
+export const Section = styled.div`
+  padding: 120px 0;
+
+  ${({ theme }) => theme.breakpoints.mobileLg} {
+    padding: 60px 0;
+  }
+`
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 80px;
+
+  ${({ theme }) => theme.breakpoints.mobileLg} {
+    gap: 40px;
+  }
+`
+
+export const Content = styled.div`
+  max-width: 767px;
+
+  ${({ theme }) => theme.breakpoints.tabletLg} {
+    max-width: 566x;
+  }
+`
+
+export const AdditionalNote = styled(Typography)`
+  max-width: 667px;
+`
+
+export const Image = styled.img`
+  max-width: 1062px;
+`

packages/frontend/app/templates/VirtualAdoption/components/VirtualCertificate/index.js

@@ -0,0 +1,3 @@
+import VirtualCertificate from "./VirtualCertificate"
+
+export default VirtualCertificate