WIP - General improvements

.env

@@ -0,0 +1 @@
+DATABASE_URL="postgresql://ppt:devpassword@localhost:5432/elections_db?schema=public"

components/about-us/footer.tsx → app/components/about-us/footer.tsx

@@ -2,7 +2,7 @@ import { Layout } from "antd";
 import Link from "next/link";
 import { socialMediaOptions } from "../../src/utils/online-platform";
 import { FooterLogo } from "../global/logos";
-import SocialSharing from "../global/social-sharing";
+import SocialSharing from "../social/SocialSharing";
 
 const { Footer } = Layout;
 

app/components/footer/ContributorsList.tsx

@@ -0,0 +1,17 @@
+import { shuffleList } from "../../utils/contributors";
+
+const ContributorsList = () =>
+  // const [hasMounted, setHasMounted] = useState(false);
+
+  // useEffect(() => {
+  //   setHasMounted(true);
+  // }, []);
+
+  // if (!hasMounted) {
+  //   return null;
+  // }
+  <>
+    {shuffleList().join(", ")}.
+  </>
+
+export default ContributorsList;

app/components/footer/LayoutFooter.tsx

@@ -0,0 +1,37 @@
+import { Col, Row } from "antd";
+import { Footer } from "antd/es/layout/layout";
+import Link from "next/link";
+import { FooterLogo } from "../global/logos";
+import SocialSharing from "../social/SocialSharing";
+import ContributorsList from "./ContributorsList";
+
+const LayoutFooter = () =>
+  <Footer className="footer">
+    <Row justify="space-between">
+      <Col
+        span={24}
+        md={{ offset: 4, span: 16 }}
+        lg={{ offset: 0, span: 6 }}
+        className="footer-social"
+      >
+        <SocialSharing />
+        <FooterLogo />
+      </Col>
+      <Col
+        span={24}
+        md={{ offset: 4, span: 16 }}
+        lg={{ offset: 0, span: 12 }}
+        className="footer-info"
+      >
+        <h2>Quem Somos</h2>
+        <p>
+          Podes consultar <Link rel="noopener" href="/about-us">aqui</Link> a equipa por detrás do projecto e as
+          suas motivações.
+        </p>
+        <br />
+        <p>Quem esteve envolvido no projecto: <ContributorsList /></p>
+      </Col>
+    </Row>
+  </Footer>
+
+export default LayoutFooter;

components/global/layout-header.tsx → app/components/global/layout-header.tsx

@@ -5,8 +5,8 @@ import Link from "next/link";
 import { Fragment, memo, useState } from "react";
 import { LOOMIO_PPT_URL } from "../../src/utils/constants";
 import { socialMediaOptions } from "../../src/utils/online-platform";
+import SocialSharing from "../social/SocialSharing";
 import { HeaderLogo } from "./logos";
-import SocialSharing from "./social-sharing";
 
 const LayoutHeader = () => {
   const [headerState, setState] = useState({

app/components/global/logos.tsx

@@ -0,0 +1,127 @@
+import Image from "next/image";
+import header_logo from "../../../public/horizontal_logo.svg";
+import infographic_image from "../../../public/infographic.svg";
+// import rows_people_image from "../../public/rows-people.svg";
+import footer_logo from "../../../public/vertical_logo.jpg";
+import voting_image from '../../../public/voting.svg';
+
+import ADNLogo from '../../../public/party-logos/adn_logo.png';
+import AliancaLogo from '../../../public/party-logos/Alianca.png';
+import AliancaDemocraticaLogo from '../../../public/party-logos/alianca_democratica.png';
+import BlocoEsquerdaLogo from '../../../public/party-logos/blocodeesquerda.jpg';
+import CDSLogo from '../../../public/party-logos/CDS.png';
+import CDULogo from '../../../public/party-logos/cdu.jpg';
+import ChegaLogo from '../../../public/party-logos/chega.png';
+import ErgueTeLogo from '../../../public/party-logos/ergue-te_logo.png';
+import IniciativaLiberalLogo from '../../../public/party-logos/Iniciativa_Liberal_logo.gif';
+import JPPLogo from '../../../public/party-logos/jpp_logo.png';
+import LivreLogo from '../../../public/party-logos/livre-logo.png';
+import MadeiraPrimeiroLogo from '../../../public/party-logos/madeira_primeiro.png';
+import MASLogo from '../../../public/party-logos/mas-logo.jpg';
+import NosCidadaosLogo from '../../../public/party-logos/Nos_Cidadaos_logo.jpg';
+import PPMLogo from '../../../public/party-logos/Partido_Popular_Monarquico_logo.png';
+import PTLogo from '../../../public/party-logos/partido_terra_logo.jpg';
+import PTPLogo from '../../../public/party-logos/Partido_Trabalhista_Portugues_logo.jpg';
+import PCTPMRPPLogo from '../../../public/party-logos/PCTPMRPP_LOGO.png';
+import PANLogo from '../../../public/party-logos/Pessoas-Animais-Natureza_logo.png';
+import PSLogo from '../../../public/party-logos/PS_logo.png';
+import PSDLogo from '../../../public/party-logos/psd-logo.jpg';
+import RIRLogo from '../../../public/party-logos/RIR_logo.jpg';
+import VoltLogo from '../../../public/party-logos/volt.png';
+
+export const PPTLogo = () =>
+  <Image
+    src={header_logo.src}
+    width="200"
+    height="41"
+    alt="PPT Header Logo"
+    className="header_logo"
+  />
+
+export const FooterLogo = () =>
+  <Image
+    src={footer_logo.src}
+    width={240}
+    height={100}
+    alt="PPT Footer Logo"
+    className="footer_logo"
+  />
+
+export const VotingImage = () =>
+  <Image
+    src={voting_image.src}
+    width={150}
+    height={150}
+    alt="voting"
+  />
+
+export const InfographicImage = () =>
+  <Image
+    src={infographic_image.src}
+    width={440}
+    height={186}
+    alt="infographic"
+  />
+
+// export const AboutUsHeaderImage = () =>
+//   <Image
+//     src={rows_people_image.src}
+//     className="about-us__header-img"
+//     layout="responsive"
+//     width={1440}
+//     height={351}
+//     alt="people"
+//   />
+
+export const renderPartyLogo = (fileName: string): string => {
+  switch (fileName) {
+    case 'adn_logo.png':
+      return ADNLogo.src;
+    case 'alianca_democratica.png':
+      return AliancaDemocraticaLogo.src;
+    case 'Alianca.png':
+      return AliancaLogo.src;
+    case 'blocodeesquerda.jpg':
+      return BlocoEsquerdaLogo.src;
+    case 'CDS.png':
+      return CDSLogo.src;
+    case 'cdu.jpg':
+      return CDULogo.src;
+    case 'chega.png':
+      return ChegaLogo.src;
+    case 'ergue-te_logo.png':
+      return ErgueTeLogo.src;
+    case 'Iniciativa_Liberal_logo.gif':
+      return IniciativaLiberalLogo.src;
+    case 'jpp_logo.png':
+      return JPPLogo.src;
+    case 'livre-logo.png':
+      return LivreLogo.src;
+    case 'madeira_primeiro.png':
+      return MadeiraPrimeiroLogo.src;
+    case 'mas-logo.jpg':
+      return MASLogo.src;
+    case 'Nos_Cidadaos_logo.jpg':
+      return NosCidadaosLogo.src;
+    case 'Partido_Popular_Monarquico_logo.png':
+      return PPMLogo.src;
+    case 'partido_terra_logo.jpg':
+      return PTLogo.src;
+    case 'Partido_Trabalhista_Portugues_logo.jpg':
+      return PTPLogo.src;
+    case 'PCTPMRPP_LOGO.png':
+      return PCTPMRPPLogo.src;
+    case 'Pessoas-Animais-Natureza_logo.png':
+      return PANLogo.src;
+    case 'PS_logo.png':
+      return PSLogo.src;
+    case 'psd-logo.jpg':
+      return PSDLogo.src;
+    case 'RIR_logo.jpg':
+      return RIRLogo.src;
+    case 'volt.png':
+      return VoltLogo.src;
+    default:
+      throw Error(`${fileName} does not exist.`);
+  }
+}

app/components/header/LayoutHeader.tsx

@@ -0,0 +1,35 @@
+import Col from "antd/es/col";
+import { Header } from "antd/es/layout/layout";
+import Row from "antd/es/row";
+import Link from "next/link";
+import { PPTLogo } from "../global/logos";
+import SocialSharing from "../social/SocialSharing";
+import MenuItems from "./MenuItems";
+
+const LayoutHeader = () =>
+  <>
+    <Header className='header'>
+      <Row justify='space-between' align='middle' typeof='flex'>
+        <Col span={24} lg={24}>
+          <Link href={''}>
+            <PPTLogo />
+          </Link>
+          <nav className='header__desktop-menu'>
+            <MenuItems />
+            <a
+              className='header-join-us'
+              href={''} //LOOMIO_PPT_URL
+              target='_blank'
+              rel='noopener noreferrer'
+            >Junta-te a nós !
+            </a>
+            <div className='header-social-media'>
+              <SocialSharing />
+            </div>
+          </nav>
+        </Col>
+      </Row>
+    </Header>
+  </>
+
+export default LayoutHeader;

app/components/header/MenuItems.tsx

@@ -0,0 +1,38 @@
+import { Menu } from 'antd';
+import Link from 'next/link';
+
+const MenuItems = () => {
+  const legislativesRoute = '/legislativas';
+  return (
+    <Menu
+      mode='horizontal'
+      items={[
+        {
+          key: '0',
+          label: (<Link href={legislativesRoute}>Home</Link>)
+        },
+        {
+          key: '1',
+          label: (<Link href={legislativesRoute}>Legislativas</Link>),
+          children: [
+            {
+              key: '1-1',
+              label: (<Link href={`${legislativesRoute}/debates`}>Debates</Link>)
+            }
+          ]
+        },
+        {
+          key: '2',
+          label: (<Link href={'/autarquicas'}>Autarquicas</Link>)
+        },
+        {
+          key: '3',
+          label: (<Link href={'/presidenciais'}>Presidenciais</Link>)
+        }
+      ]}
+    >
+    </Menu>
+  )
+}
+
+export default MenuItems;

components/home/media.tsx → app/components/home/LegislativeVideoSection.tsx

@@ -1,7 +1,9 @@
+'use client';
+
 import { Button, Col, Row } from "antd";
 import { useEffect, useState } from "react";
 import ReactPlayer from "react-player/youtube";
-import { YOUTUBE_VIDEO_EP1, YOUTUBE_VIDEO_EP2, YOUTUBE_VIDEO_EP3, YOUTUBE_VIDEO_EP4 } from "../../src/utils/constants";
+import { YOUTUBE_VIDEO_EP1, YOUTUBE_VIDEO_EP2, YOUTUBE_VIDEO_EP3, YOUTUBE_VIDEO_EP4 } from "../../utils/constants";
 
 interface Video {
   url: string;
@@ -31,7 +33,7 @@ const videos: Video[] = [
   },
 ];
 
-const HomeMedia = () => {
+const LegislativeVideoSection = () => {
   const [currentEpisode, setCurrentEpisode] = useState(0);
   const [isPlayerHidden, setIsPlayerHidden] = useState(true);
   const { url, caption } = videos[currentEpisode];
@@ -87,4 +89,4 @@ const HomeMedia = () => {
   );
 };
 
-export default HomeMedia;
+export default LegislativeVideoSection;

app/components/home/countdown.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { Button, Col, Row } from "antd";
+import Link from "next/link";
+import Countdown from "react-countdown-now";
+import { VotingImage } from "../global/logos";
+import CountdownRenderer from "./countdown-renderer";
+
+const LegislativeElectionCountdown = () => {
+  const legislativeElectionDate = new Date(2024, 2, 10);
+
+  return (
+    <section className="home-voting-countdown section--grey">
+      <Row>
+        <Col span={24} lg={24}>
+          <VotingImage />
+          <Countdown date={legislativeElectionDate} renderer={CountdownRenderer} />
+          <Link
+            href={"PORTAL_ELEITOR_URL"}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Button className="button--grey" size="large">
+              Como votar?
+            </Button>
+          </Link>
+        </Col>
+      </Row>
+    </section>
+  )
+}
+
+export default LegislativeElectionCountdown;

components/home/mission.tsx → app/components/home/mission.tsx

@@ -1,7 +1,7 @@
 import { Col, Row } from "antd";
 import Infographic from "./infographic";
 
-export const HomeMissionInfographic = () =>
+export const LegislativeMission = () =>
   <section className="home-our-mission">
     <Row justify="space-between" align="middle">
       <Col
@@ -20,7 +20,7 @@ export const HomeMissionInfographic = () =>
     </Row>
   </section>
 
-export const HomeMission = () => {
+export const Mission = () => {
   const legislativeElectionDate = new Date(2024, 2, 10);
   const electionDay = legislativeElectionDate.getDate();
   const electionMonthName = legislativeElectionDate.toLocaleString('pt-pt', { month: 'long' });

components/home/round-avatar.tsx → app/components/home/round-avatar.tsx

@@ -1,11 +1,8 @@
-import dynamic from "next/dynamic";
 import Link from "next/link";
 import { HomePageParty } from "../../src/retriever/dtos/party-dto";
 import { acronymConversion, Conversion } from "../../src/utils/manipuation";
 import { renderPartyLogo } from "../global/logos";
 
-const Avatar = dynamic(import("antd/es/avatar"), { ssr: false });
-
 interface RoundAvatarProps {
   party: HomePageParty
 }