Merge pull request #80 from OCA-UFCG/feat/infra-gallery

Adds infrascructure gallery page

package.json

@@ -24,11 +24,13 @@
     "braces": ">=3.0.3",
     "contentful": "^10.11.10",
     "express": "^4.19.2",
+    "lightgallery": "^2.7.2",
     "maplibre-gl": "^4.2.0",
     "next": "14.2.2",
     "nodemailer": "^6.9.14",
     "react": "^18",
     "react-dom": "^18",
+    "sass": "^1.77.8",
     "styled-components": "^6.1.8"
   },
   "devDependencies": {

src/app/infra/page.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import Template from "@/templates/hubTemplate";
+import { SectionTitle } from "../globalStyles";
+import { SubTitle, Tabloid } from "./styles";
+import InfraSection from "@/components/Infra/Infra";
+
+const TeamPage = () => (
+  <Template>
+    <Tabloid>
+      <SectionTitle>A infraestrutura do Observatório</SectionTitle>
+      <SubTitle>
+        Essa é a infraestrutura que temos distribuído ao longo de toda a
+        Caatinga.
+      </SubTitle>
+      <InfraSection />
+    </Tabloid>
+  </Template>
+);
+
+export default TeamPage;

src/app/infra/styles.tsx

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+export const TeamMembersWrapper = styled.section`
+  display: flex;
+  margin-top: 4rem;
+  justify-content: center;
+`;
+
+export const Tabloid = styled.div`
+  width: fit-content;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  gap: 0.75rem;
+`;
+
+export const SubTitle = styled.h2`
+  font-size: 1rem;
+  color: #00000080;
+  margin-bottom: 1rem;
+  align-self: center;
+  text-align: center;
+  width: fit-content;
+  padding: 0 1rem;
+`;

src/components/Dropdown/Dropdown.styles.tsx

@@ -65,7 +65,7 @@ export const ChildrenWrapper = styled.ul`
   width: fit-content;
   padding: 0.75rem 1rem;
   flex-flow: column;
-  gap: 0.5rem;
+  gap: 0.75rem;
   display: none;
   box-shadow: 0px 0px 4px #00000015;
 

src/components/Infra/Infra.styles.tsx

@@ -0,0 +1,83 @@
+import NativeImage from "next/image";
+import styled from "styled-components";
+
+export const Gallery = styled.div`
+  .lg-react-element {
+    justify-content: center;
+    padding: 1rem;
+    gap: 0.5rem;
+    column-count: 3;
+    width: fit-content;
+
+    @media screen and (max-width: 700px) {
+      column-count: 2;
+    }
+
+    @media screen and (max-width: 450px) {
+      column-count: 1;
+    }
+  }
+`;
+
+export const ImageLink = styled.a``;
+
+export const Image = styled(NativeImage)`
+  margin-bottom: 0.5rem;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  background-color: #cdcdcd;
+`;
+
+export const Title = styled.h2`
+  color: ${({ theme }) => theme.colors.white};
+  opacity: 0;
+  transition: 300ms;
+  transform: translateY(4rem);
+  font-size: 20px;
+`;
+
+export const Subtitle = styled.p`
+  color: ${({ theme }) => theme.colors.white};
+  font-weight: 300;
+  opacity: 0;
+  margin-bottom: 0;
+  transform: translateY(4rem);
+  transition: 300ms;
+`;
+
+export const InfoContainer = styled.div`
+  display: flex;
+  flex-flow: column;
+  justify-content: end;
+  position: absolute;
+  bottom: 0;
+  padding: 1rem;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  box-sizing: border-box;
+  color: ${({ theme }) => theme.colors.white};
+  height: calc(100% - 0.5rem);
+  width: 100%;
+  transition: 300ms;
+  cursor: pointer;
+  overflow: hidden;
+
+  &:hover {
+    background-color: #00000070;
+    backdrop-filter: blur(4px);
+    /* filter: blur(40px);/ */
+  }
+
+  &:hover ${Subtitle}, &:hover ${Title} {
+    /* animation: open 1s forwards; */
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+export const ImageContainer = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  break-inside: avoid;
+`;