Feat: Adds background image to some pages

Author: RodrigoEC

public/background.png

@@ -9,7 +9,7 @@ const About = async () => {
   const { collaborators: content } = await getContent(["collaborators"]);
 
   return (
-    <Template>
+    <Template backThumb={true}>
       <Wrapper>
         <Title>Colaboradores do Observatório da Caatinga</Title>
         <ContentWrapper>

src/app/collab/page.tsx

@@ -204,13 +204,12 @@ export const ContentContainer = styled.div`
   width: 100%;
   min-height: 100svh;
   box-sizing: border-box;
-  background-image: url("background.png");
   background-size: 150vw;
   background-repeat: repeat;
   justify-content: space-between;
 `;
 
-export const Main = styled.main`
+export const Main = styled.main<{ backThumb: string }>`
   display: flex;
   flex-flow: column;
   align-items: center;
@@ -219,9 +218,13 @@ export const Main = styled.main`
   box-sizing: border-box;
   transition: 0.3s;
 
-  background-image: url("padrao-verde.png");
-  background-size: 60vw;
-  background-repeat: repeat;
+  background-image: url(${({ backThumb }) =>
+    backThumb === "true" ? "background.png" : "padrao-verde.png"});
+
+  background-size: ${({ backThumb }) => backThumb === "false" && "60vw"};
+  background-repeat: ${({ backThumb }) =>
+    backThumb === "true" ? "repeat-x" : "repeat"};
+  background-position: bottom;
 `;
 
 export const Section = styled.section<{ full?: string }>`

src/app/globalStyles.tsx

@@ -8,7 +8,7 @@ const TeamPage = async () => {
   const data = await getContent(["members"]);
 
   return (
-    <Template>
+    <Template backThumb={true}>
       <TeamMembersSection teamMembers={data.members} />
     </Template>
   );

src/app/team/page.tsx

@@ -65,7 +65,7 @@ export const ModalWrapper = styled.div<{ retracted: string; position: string }>`
   margin: auto 0;
   transition: transform 0.5s ease-out;
   background-color: ${({ theme }) => theme.colors.white};
-  background-image: url("background.png");
+  background-image: url("padrao-verde.png");
   background-size: 50rem;
   border-radius: 6px;
 

src/components/MenuModal/MenuModal.styles.tsx

@@ -1,12 +1,21 @@
 import HeaderSection from "@/components/Header/Section/HeaderSection";
 import { Main } from "@/app/globalStyles";
 import Footer from "@/components/Footer/Footer";
+import React, { ReactNode } from "react";
 
-const HubTemplate = ({ children }: React.PropsWithChildren) => {
+const HubTemplate = ({
+  children,
+  backThumb = false,
+}: {
+  children: ReactNode;
+  backThumb?: boolean;
+}) => {
   return (
     <>
       <HeaderSection />
-      <Main id="root">{children}</Main>
+      <Main id="root" backThumb={backThumb.toString()}>
+        {children}
+      </Main>
       <Footer />
     </>
   );