Merge pull request #71 from OCA-UFCG/refact/banner

Implements banner section and adapts preview cards section

Author: RodrigoEC

package-lock.json

@@ -23,6 +23,7 @@
     "@radix-ui/react-accordion": "^1.2.8",
     "@radix-ui/react-dialog": "^1.1.11",
     "@radix-ui/react-navigation-menu": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.4",
     "@radix-ui/react-slot": "^1.2.0",
     "@types/google-earth": "^0.0.8",
     "@types/next": "^8.0.7",
@@ -51,7 +52,6 @@
     "@eslint/js": "^9.1.1",
     "@tailwindcss/postcss": "^4.1.4",
     "@types/express": "^4.17.21",
-    "@types/glidejs": "^1.0.34",
     "@types/node": "^20.17.24",
     "@types/nodemailer": "^6.4.15",
     "@types/react": "^18",

package.json

@@ -5,7 +5,7 @@ import { SectionHeader } from "@/utils/interfaces";
 import { AboutSection } from "@/components/About/About";
 import { RecentSection } from "@/components/RecentSection/RecentSection";
 import PreviewSection from "@/components/PreviewSection/PreviewSection";
-import BannerImage from "@/components/BannerImage/BannerImage";
+import MainBanner from "@/components/BannerImage/BannerImage";
 import DataSection from "@/components/DataSection/DataSection";
 
 export const revalidate = 60;
@@ -18,19 +18,26 @@ export default async function Home() {
     post: posts,
     previewCards,
     theme,
+    mainBanner,
   } = await getContent([
     "partners",
     "sectionHead",
     "post",
     "previewCards",
     "panels",
     "theme",
+    "mainBanner",
   ]);
 
   return (
     <HubTemplate>
-      <BannerImage />
-      <PreviewSection cards={previewCards} />
+      <MainBanner content={mainBanner[0]} />
+      <PreviewSection
+        header={sectionHead.find(
+          (sec: { fields: SectionHeader }) => sec.fields.id == "preview",
+        )}
+        cards={previewCards}
+      />
       <RecentSection
         content={posts.slice(0, MAX_SiZE)}
         header={sectionHead.find(

src/app/page.tsx

@@ -1,11 +1,41 @@
-import { BannerContainer, Banner } from "./BannerImage.styles";
+import { IMainBanner } from "@/utils/interfaces";
+import { Icon } from "../Icon/Icon";
+import Image from "next/image";
+import { LinkButton } from "../LinkButton/LinkButton";
+
+const MainBanner = ({ content }: { content: { fields: IMainBanner } }) => {
+  const { title, subtitle, image } = content.fields;
 
-const BannerImage = () => {
   return (
-    <BannerContainer>
-      <Banner src={"/banner.png"} />
-    </BannerContainer>
+    <div className="overflow-hidden relative flex justify-center items-center w-full lg:mt-4 min-h-[380px] lg:min-h-[510px]">
+      <Image
+        className="absolute w-full min-h-[450px] h-full object-cover rounded-t-md md:rounded-l-md md:rounded-tr-none z-0"
+        src={`https:${image.fields.file.url}`}
+        alt=""
+        width={1400}
+        height={1400}
+      />
+      <div className="absolute top-0 right-0 h-full w-[100%] bg-gradient-to-l from-black via-transparent to-transparent"></div>
+      <div className="absolute top-0 left-0 h-full w-[140%] bg-gradient-to-r from-black via-transparent to-transparent"></div>
+      <div className="flex w-full p-6 2xl:p-0 h-full items-end justify-between max-w-[1440px] z-1">
+        <div className="flex flex-col gap-4 lg:gap-8">
+          <h1 className="text-white text-4xl leading-[40px] lg:leading-[68px] lg:text-6xl font-semibold lg:max-w-[50%]">
+            {title}
+          </h1>
+          <p className="text-white text-lg font-medium">{subtitle}</p>
+          <LinkButton href="/posts" className="md:max-w-fit">
+            Explore os dados
+          </LinkButton>
+        </div>
+        <Icon
+          id="logo-DNE"
+          width={200}
+          height={100}
+          className="hidden lg:block self-end filter brightness-0 invert"
+        />
+      </div>
+    </div>
   );
 };
 
-export default BannerImage;
+export default MainBanner;

src/components/BannerImage/BannerImage.styles.tsx

@@ -3,7 +3,6 @@ import { useMemo, useState } from "react";
 import Autoplay from "embla-carousel-autoplay";
 import { IPreviewCard, IPreviewCards } from "@/utils/interfaces";
 import PreviewCard from "@/components/PreviewCard/PreviewCard";
-import { Header, Logo, LogoContainer, Name } from "./PreviewSection.styles";
 import {
   Carousel,
   CarouselContent,
@@ -12,11 +11,24 @@ import {
   CarouselPrevious,
   DotButton,
 } from "../ui/carousel";
-import Filter from "./Filter/Filter";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
 
-const PreviewSection = ({ cards }: { cards: IPreviewCards[] }) => {
-  const [selectedRegion, setSelectedRegion] = useState("Nordeste");
-  const [selectedState, setSelectedState] = useState("");
+const PreviewSection = ({
+  header,
+  cards,
+}: {
+  cards: IPreviewCards[];
+  header: { fields: any };
+}) => {
+  const [selectedState, setSelectedState] = useState("all");
 
   const allCardsData = cards.map((card) => ({
     category: card.fields.category,
@@ -25,9 +37,10 @@ const PreviewSection = ({ cards }: { cards: IPreviewCards[] }) => {
 
   const filteredCards = useMemo(() => {
     return allCardsData.map((regionData) => {
-      const source = selectedState
-        ? regionData.states.find((state) => state.name === selectedState)
-        : regionData;
+      const source =
+        selectedState !== "all"
+          ? regionData.states.find((state) => state.name === selectedState)
+          : regionData;
 
       return source
         ? {
@@ -41,28 +54,35 @@ const PreviewSection = ({ cards }: { cards: IPreviewCards[] }) => {
         : null;
     }) as IPreviewCard[];
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedState, selectedRegion]);
+  }, [selectedState]);
 
-  const handleFilterChange = (region: string, state: string) => {
-    setSelectedRegion(region);
+  const handleFilterChange = (state: string) => {
+    // setSelectedRegion(region);
     setSelectedState(state);
   };
 
   return (
-    <div className="flex flex-col p-6 max-w-[1440px] w-full justify-center items-center">
-      <Header>
-        <LogoContainer>
-          <Logo src="/logo.png" alt="datane logo" width={24} height={24} />
-          <Name>Data Nordeste</Name>
-        </LogoContainer>
-
-        <Filter
-          data={allCardsData}
-          selectedRegion={selectedRegion}
-          selectedState={selectedState}
-          onChange={handleFilterChange}
-        />
-      </Header>
+    <div className="flex flex-col bg-white px-3 lg:px-8 gap-3 border-box py-5 lg:py-10 max-w-[1440px] w-full justify-center items-center shadow-md rounded-lg -translate-y-4 lg:-translate-y-12">
+      <div className="flex flex-col lg:flex-row gap-3 justify-between w-full">
+        <h2 className="text-3xl font-semibold">{header.fields.title}</h2>
+        <Select onValueChange={handleFilterChange}>
+          <SelectTrigger className="w-full lg:w-[180px]">
+            <SelectValue placeholder="Nordeste" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Nordeste</SelectItem>
+            <SelectGroup>
+              <SelectLabel>Estados</SelectLabel>
+              {allCardsData &&
+                allCardsData[0].states.map((state, i) => (
+                  <SelectItem value={state.name} key={i}>
+                    {state.name}
+                  </SelectItem>
+                ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
 
       <Carousel
         opts={{
@@ -80,7 +100,7 @@ const PreviewSection = ({ cards }: { cards: IPreviewCards[] }) => {
           {filteredCards.map((card, i) => (
             <CarouselItem
               key={i}
-              className="basis-1/1 md:basis-1/2 lg:basis-1/4 p-2"
+              className="basis-1/1 md:basis-1/2 lg:basis-1/4 p-1 md:p-2"
             >
               <PreviewCard content={card} />
             </CarouselItem>