diff --git a/packages/frontend/app/public/virtual-adoption/virtual-certificate.png b/packages/frontend/app/public/virtual-adoption/virtual-certificate.png new file mode 100644 index 00000000..9b73e750 Binary files /dev/null and b/packages/frontend/app/public/virtual-adoption/virtual-certificate.png differ diff --git a/packages/frontend/app/templates/VirtualAdoption/VirtualAdoption.jsx b/packages/frontend/app/templates/VirtualAdoption/VirtualAdoption.jsx index 62754908..5b5d8c8e 100644 --- a/packages/frontend/app/templates/VirtualAdoption/VirtualAdoption.jsx +++ b/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 }) => { + ( + + + + + + + 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! + + + + + + Dziękujemy za każda wirtualną adopcje! Pamiętaj Twoja pomoc ma moc! + + + + +) + +export default VirtualCertificate diff --git a/packages/frontend/app/templates/VirtualAdoption/components/VirtualCertificate/VirtualCertificate.styled.js b/packages/frontend/app/templates/VirtualAdoption/components/VirtualCertificate/VirtualCertificate.styled.js new file mode 100644 index 00000000..50c3bb23 --- /dev/null +++ b/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; +` diff --git a/packages/frontend/app/templates/VirtualAdoption/components/VirtualCertificate/index.js b/packages/frontend/app/templates/VirtualAdoption/components/VirtualCertificate/index.js new file mode 100644 index 00000000..f058b2bc --- /dev/null +++ b/packages/frontend/app/templates/VirtualAdoption/components/VirtualCertificate/index.js @@ -0,0 +1,3 @@ +import VirtualCertificate from "./VirtualCertificate" + +export default VirtualCertificate