refact: add text over the banner

Author: cilasmarques

public/banner.png

@@ -2,7 +2,6 @@ import { ProjectSection } from "@/components/ProjectCard/Section/ProjectSection"
 import HubTemplate from "@/templates/HubTemplate";
 import { getContent } from "@/utils/functions";
 import { SectionHeader } from "@/utils/interfaces";
-import { AboutSection } from "@/components/About/About";
 import { RecentSection } from "@/components/RecentSection/RecentSection";
 import PreviewSection from "@/components/PreviewSection/PreviewSection";
 import PanelSection from "@/components/PanelCard/Section/PanelSection";
@@ -36,12 +35,6 @@ export default async function Home() {
           (section: { fields: { id: string } }) => section.fields.id === "new",
         )}
       />
-      <AboutSection
-        header={sectionHead.find(
-          (section: { fields: { id: string } }) =>
-            section.fields.id === "about",
-        )}
-      />
       <PanelSection
         header={sectionHead.find(
           (sec: { fields: SectionHeader }) => sec.fields.id == "panels",

src/app/page.tsx

@@ -7,6 +7,7 @@ export const BannerContainer = styled.header`
   background-color: ${({ theme }) => theme.colors.green};
   padding-bottom: 1rem;
   border-radius: 0 0 8px 8px;
+  position: relative; /* Adicionado para posicionar a tarja */
 
   @media (max-width: 1000px) {
     height: clamp(80px, 20vw, 140px);
@@ -21,3 +22,64 @@ export const Banner = styled.img`
   object-position: center;
   display: block;
 `;
+
+export const BannerOverlay = styled.div`
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  right: 0.5rem;
+  bottom: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0 2rem;
+`;
+
+export const TextButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+`;
+
+export const OverlayText = styled.h2`
+  max-width: 50%;
+  color: white;
+  font-size: 1.8rem;
+  font-weight: 600;
+  margin: 0;
+  text-align: left;
+  font-family: "League Spartan", sans-serif;
+
+  @media (max-width: 1000px) {
+    font-size: 1rem;
+    margin: 0 0 0.5rem 0;
+    max-width: 100%;
+  }
+`;
+
+export const OverlayButton = styled.button`
+  background-color: transparent;
+  color: white;
+  border: 2px solid white;
+  padding: 0.5rem 1.5rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background-color: white;
+    color: black;
+  }
+
+  @media (max-width: 768px) {
+    padding: 0.3rem 1rem;
+    font-size: 0.8rem;
+    border-width: 1px;
+  }
+
+  @media (max-width: 480px) {
+    padding: 0.2rem 0.8rem;
+    font-size: 0.7rem;
+  }
+`;

src/components/BannerImage/BannerImage.styles.tsx

@@ -1,8 +1,23 @@
-import { BannerContainer, Banner } from "./BannerImage.styles";
+import {
+  BannerContainer,
+  Banner,
+  BannerOverlay,
+  TextButtonContainer,
+  OverlayText,
+  OverlayButton,
+} from "./BannerImage.styles";
 
 const BannerImage = () => {
   return (
     <BannerContainer>
+      <BannerOverlay>
+        <TextButtonContainer>
+          <OverlayText>
+            Interaja, pesquise e explore dados sobre o nordeste brasileiro
+          </OverlayText>
+          <OverlayButton>Saiba mais</OverlayButton>
+        </TextButtonContainer>
+      </BannerOverlay>
       <Banner src={"/banner.png"} />
     </BannerContainer>
   );