feat: main footer

src/app/[lang]/layout.tsx

@@ -4,6 +4,7 @@ import { Inter, Orbitron } from "next/font/google";
 import type { Locale } from "@/internationalization/dictionaries";
 import { DictionaryProvider } from "@/contexts/dictionary-provider";
 import Navbar from "@/components/navbar";
+import Footer from "@/components/footer";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -35,6 +36,7 @@ export default function RootLayout({
         <DictionaryProvider lang={lang}>
           <Navbar />
           <div className="px-5 py-5 md:px-7 md:pb-14 md:pt-12">{children}</div>
+          <Footer />
         </DictionaryProvider>
       </body>
     </html>

src/components/footer.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { useDictionary } from "@/contexts/dictionary-provider";
+import Image from "next/image";
+import SocialIcon from "@/components/social-icon";
+import Link from "next/link";
+
+const Footer = () => {
+  const dict = useDictionary();
+
+  const socials = [
+    {
+      name: "Facebook",
+      icon: "facebook",
+      url: "https://www.facebook.com/cesiuminho",
+    },
+    {
+      name: "Instagram",
+      icon: "instagram",
+      url: "https://www.instagram.com/cesiuminho",
+    },
+    { name: "X", icon: "x", url: "https://x.com/cesiuminho" },
+    { name: "GitHub", icon: "github", url: "https://github.com/cesium" },
+    {
+      name: "YouTube",
+      icon: "youtube",
+      url: "https://www.youtube.com/c/cesiumUM",
+    },
+  ];
+
+  return (
+    <footer className=" flex flex-col place-items-center bg-[#EBEBEB] px-5  pb-[70px] pt-8 sm:flex-row sm:place-items-end sm:px-[30px] md:px-[100px]">
+      <div className="flex w-full max-w-[500px] flex-col place-items-center justify-center space-y-[22px] sm:w-1/2 sm:max-w-max sm:flex-col-reverse md:place-items-start">
+        <div className="w-full space-y-6 pb-2.5 sm:mt-[50px] sm:w-80 sm:pb-0">
+          <Image src="logo/cesium.svg" alt="" width={32} height={37} />
+          <p className="text-sm leading-[17px] text-[#94959C]">{dict.cesium}</p>
+          <div className="justify-left flex h-[30px] space-x-5">
+            {socials.map((social, index) => {
+              return (
+                <Link key={index} href={social.url} target="_blank">
+                  <SocialIcon
+                    type={social.icon}
+                    width={26}
+                    height={26}
+                    fill="#6C757D"
+                  />
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+        <div className="w-full">
+          <div className="grid w-full  min-w-[300px] grid-cols-2 gap-x-10 gap-y-8 sm:min-w-[600px] sm:grid-cols-4">
+            {dict.sections.map((section, index) => (
+              <div key={index}>
+                <h3 className="mb-3 text-stone">{section.title}</h3>
+                <ul className="space-y-3">
+                  {section.items.map((item, index) => (
+                    <li key={index} className="text-sm text-gray">
+                      <Link href={section.links?.[index] ?? "#"}>{item}</Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="flex w-full max-w-[500px] flex-col sm:place-content-end sm:place-items-end md:max-w-full">
+        <div className="my-8 h-0 border border-stroke sm:hidden"></div>
+        <div className="flex flex-col sm:place-items-end">
+          <span className="text-sm text-gray">Braga, Portugal</span>
+          <span className="text-sm text-gray">
+            Telefone:{" "}
+            <Link className="text-sm text-gray" href="tel:+351-253-604-448">
+              +351 253 604 448
+            </Link>
+          </span>
+          <span className="text-sm text-gray">
+            Email:{" "}
+            <Link
+              className="text-sm text-gray"
+              href="mailto:[email protected]"
+            >
+              [email protected]
+            </Link>
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/navbar.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useState } from "react";
 import { AnimatePresence, motion } from "motion/react";
+import IconSocial from "@/components/social-icon";
 
 const Navbar = () => {
   const dict = useDictionary();
@@ -131,11 +132,11 @@ const Navbar = () => {
                         target="_blank"
                         rel="noopener noreferrer"
                       >
-                        <Image
-                          src={`/icons/${social.name.toLowerCase()}.svg`}
-                          alt={`${social.name} Logo Icon`}
-                          height={26}
+                        <IconSocial
                           width={26}
+                          height={26}
+                          type={social.name.toLowerCase()}
+                          fill="#94959C"
                         />
                       </Link>
                     </motion.li>

src/components/social-icon.tsx

@@ -0,0 +1,91 @@
+const SocialIcon = ({
+  type,
+  width,
+  height,
+  fill,
+}: {
+  type: string;
+  width: number;
+  height: number;
+  fill: string;
+}) => {
+  switch (type) {
+    case "facebook":
+      return (
+        <svg
+          width={width}
+          height={height}
+          viewBox="0 0 24 25"
+          fill={fill}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 2.84863C6.5 2.84863 2 7.33863 2 12.8686C2 17.8686 5.66 22.0186 10.44 22.7686V15.7686H7.9V12.8686H10.44V10.6586C10.44 8.14863 11.93 6.76863 14.22 6.76863C15.31 6.76863 16.45 6.95863 16.45 6.95863V9.42863H15.19C13.95 9.42863 13.56 10.1986 13.56 10.9886V12.8686H16.34L15.89 15.7686H13.56V22.7686C15.9164 22.3965 18.0622 21.1941 19.6099 19.3787C21.1577 17.5632 22.0054 15.2543 22 12.8686C22 7.33863 17.5 2.84863 12 2.84863Z"
+            fill={fill}
+          />
+        </svg>
+      );
+    case "instagram":
+      return (
+        <svg
+          width={width}
+          height={height}
+          viewBox="0 0 24 25"
+          fill={fill}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7.8 2.80859H16.2C19.4 2.80859 22 5.40859 22 8.60859V17.0086C22 18.5469 21.3889 20.0221 20.3012 21.1098C19.2135 22.1975 17.7383 22.8086 16.2 22.8086H7.8C4.6 22.8086 2 20.2086 2 17.0086V8.60859C2 7.07034 2.61107 5.59509 3.69878 4.50737C4.78649 3.41966 6.26174 2.80859 7.8 2.80859ZM7.6 4.80859C6.64522 4.80859 5.72955 5.18788 5.05442 5.86301C4.37928 6.53814 4 7.45381 4 8.40859V17.2086C4 19.1986 5.61 20.8086 7.6 20.8086H16.4C17.3548 20.8086 18.2705 20.4293 18.9456 19.7542C19.6207 19.079 20 18.1634 20 17.2086V8.40859C20 6.41859 18.39 4.80859 16.4 4.80859H7.6ZM17.25 6.30859C17.5815 6.30859 17.8995 6.44029 18.1339 6.67471C18.3683 6.90913 18.5 7.22707 18.5 7.55859C18.5 7.89011 18.3683 8.20806 18.1339 8.44248C17.8995 8.6769 17.5815 8.80859 17.25 8.80859C16.9185 8.80859 16.6005 8.6769 16.3661 8.44248C16.1317 8.20806 16 7.89011 16 7.55859C16 7.22707 16.1317 6.90913 16.3661 6.67471C16.6005 6.44029 16.9185 6.30859 17.25 6.30859ZM12 7.80859C13.3261 7.80859 14.5979 8.33538 15.5355 9.27306C16.4732 10.2107 17 11.4825 17 12.8086C17 14.1347 16.4732 15.4064 15.5355 16.3441C14.5979 17.2818 13.3261 17.8086 12 17.8086C10.6739 17.8086 9.40215 17.2818 8.46447 16.3441C7.52678 15.4064 7 14.1347 7 12.8086C7 11.4825 7.52678 10.2107 8.46447 9.27306C9.40215 8.33538 10.6739 7.80859 12 7.80859ZM12 9.80859C11.2044 9.80859 10.4413 10.1247 9.87868 10.6873C9.31607 11.2499 9 12.0129 9 12.8086C9 13.6042 9.31607 14.3673 9.87868 14.9299C10.4413 15.4925 11.2044 15.8086 12 15.8086C12.7956 15.8086 13.5587 15.4925 14.1213 14.9299C14.6839 14.3673 15 13.6042 15 12.8086C15 12.0129 14.6839 11.2499 14.1213 10.6873C13.5587 10.1247 12.7956 9.80859 12 9.80859Z"
+            fill={fill}
+          />
+        </svg>
+      );
+    case "github":
+      return (
+        <svg
+          width={width}
+          height={height}
+          viewBox="0 0 24 25"
+          fill={fill}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 2.80859C10.6868 2.80859 9.38642 3.06725 8.17317 3.5698C6.95991 4.07235 5.85752 4.80894 4.92893 5.73753C3.05357 7.61289 2 10.1564 2 12.8086C2 17.2286 4.87 20.9786 8.84 22.3086C9.34 22.3886 9.5 22.0786 9.5 21.8086V20.1186C6.73 20.7186 6.14 18.7786 6.14 18.7786C5.68 17.6186 5.03 17.3086 5.03 17.3086C4.12 16.6886 5.1 16.7086 5.1 16.7086C6.1 16.7786 6.63 17.7386 6.63 17.7386C7.5 19.2586 8.97 18.8086 9.54 18.5686C9.63 17.9186 9.89 17.4786 10.17 17.2286C7.95 16.9786 5.62 16.1186 5.62 12.3086C5.62 11.1986 6 10.3086 6.65 9.59859C6.55 9.34859 6.2 8.30859 6.75 6.95859C6.75 6.95859 7.59 6.68859 9.5 7.97859C10.29 7.75859 11.15 7.64859 12 7.64859C12.85 7.64859 13.71 7.75859 14.5 7.97859C16.41 6.68859 17.25 6.95859 17.25 6.95859C17.8 8.30859 17.45 9.34859 17.35 9.59859C18 10.3086 18.38 11.1986 18.38 12.3086C18.38 16.1286 16.04 16.9686 13.81 17.2186C14.17 17.5286 14.5 18.1386 14.5 19.0686V21.8086C14.5 22.0786 14.66 22.3986 15.17 22.3086C19.14 20.9686 22 17.2286 22 12.8086C22 11.4954 21.7413 10.195 21.2388 8.98176C20.7362 7.7685 19.9997 6.66611 19.0711 5.73753C18.1425 4.80894 17.0401 4.07235 15.8268 3.5698C14.6136 3.06725 13.3132 2.80859 12 2.80859Z"
+            fill={fill}
+          />
+        </svg>
+      );
+    case "x":
+      return (
+        <svg
+          width={width}
+          height={height}
+          viewBox="0 0 24 25"
+          fill={fill}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M22.46 6.80859C21.69 7.15859 20.86 7.38859 20 7.49859C20.88 6.96859 21.56 6.12859 21.88 5.11859C21.05 5.61859 20.13 5.96859 19.16 6.16859C18.37 5.30859 17.26 4.80859 16 4.80859C13.65 4.80859 11.73 6.72859 11.73 9.09859C11.73 9.43859 11.77 9.76859 11.84 10.0786C8.27999 9.89859 5.10999 8.18859 2.99999 5.59859C2.62999 6.22859 2.41999 6.96859 2.41999 7.74859C2.41999 9.23859 3.16999 10.5586 4.32999 11.3086C3.61999 11.3086 2.95999 11.1086 2.37999 10.8086V10.8386C2.37999 12.9186 3.85999 14.6586 5.81999 15.0486C5.19072 15.2208 4.53009 15.2448 3.88999 15.1186C4.1616 15.9711 4.69353 16.717 5.41101 17.2515C6.12849 17.786 6.99544 18.0823 7.88999 18.0986C6.37362 19.299 4.49399 19.9479 2.55999 19.9386C2.21999 19.9386 1.87999 19.9186 1.53999 19.8786C3.43999 21.0986 5.69999 21.8086 8.11999 21.8086C16 21.8086 20.33 15.2686 20.33 9.59859C20.33 9.40859 20.33 9.22859 20.32 9.03859C21.16 8.43859 21.88 7.67859 22.46 6.80859Z"
+            fill={fill}
+          />
+        </svg>
+      );
+    case "youtube":
+      return (
+        <svg
+          width={width}
+          height={height}
+          viewBox="0 0 24 25"
+          fill={fill}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10 15.8086L15.19 12.8086L10 9.80859V15.8086ZM21.56 7.97859C21.69 8.44859 21.78 9.07859 21.84 9.87859C21.91 10.6786 21.94 11.3686 21.94 11.9686L22 12.8086C22 14.9986 21.84 16.6086 21.56 17.6386C21.31 18.5386 20.73 19.1186 19.83 19.3686C19.36 19.4986 18.5 19.5886 17.18 19.6486C15.88 19.7186 14.69 19.7486 13.59 19.7486L12 19.8086C7.81 19.8086 5.2 19.6486 4.17 19.3686C3.27 19.1186 2.69 18.5386 2.44 17.6386C2.31 17.1686 2.22 16.5386 2.16 15.7386C2.09 14.9386 2.06 14.2486 2.06 13.6486L2 12.8086C2 10.6186 2.16 9.00859 2.44 7.97859C2.69 7.07859 3.27 6.49859 4.17 6.24859C4.64 6.11859 5.5 6.02859 6.82 5.96859C8.12 5.89859 9.31 5.86859 10.41 5.86859L12 5.80859C16.19 5.80859 18.8 5.96859 19.83 6.24859C20.73 6.49859 21.31 7.07859 21.56 7.97859Z"
+            fill={fill}
+          />
+        </svg>
+      );
+  }
+};
+
+export default SocialIcon;

src/internationalization/dictionaries/en.json

@@ -1,4 +1,5 @@
 {
+  "cesium": "CeSIUM - Computer Engineering Student Center at the University of Minho",
   "caos": {
     "name": ["Center for", "Open Source Support"],
     "description": "Responsible for all software development associated with CeSIUM, including platforms that directly serve the organization and its events, as well as platforms that are useful for students.",
@@ -44,5 +45,32 @@
     "store": "Store",
     "projects": "Projects"
   },
-  "social_media": "Social media"
+  "social_media": "Social media",
+  "sections": [
+    {
+      "title": "CeSIUM",
+      "items": ["News", "About Us", "Team", "Departments"],
+      "links": ["#", "#", "#", "#"]
+    },
+    {
+      "title": "Activities",
+      "items": ["Projects", "Events", "Partnerships"],
+      "links": ["#", "#", "#"]
+    },
+    {
+      "title": "Estudantes",
+      "items": ["Memberships", "Collaborators", "Anuary"],
+      "links": ["#", "#", "#"]
+    },
+    {
+      "title": "Links Úteis",
+      "items": [
+        "Calendarium",
+        "Blackboard",
+        "Academic Portal",
+        "Computer Engineering Page"
+      ],
+      "links": ["#", "#", "#", "#"]
+    }
+  ]
 }

src/internationalization/dictionaries/pt.json

@@ -1,4 +1,5 @@
 {
+  "cesium": "CeSIUM - Centro de Estudantes de Engenharia Informática da Universidade do Minho",
   "caos": {
     "name": ["Centro de Apoio ao", "Open Source"],
     "description": "Responsável por todo o desenvolvimento de software associado ao CeSIUM, quer sejam as plataformas que servem diretamente o núcleo e os seus eventos, ou as plataformas úteis para os alunos.",
@@ -44,5 +45,32 @@
     "store": "Loja",
     "projects": "Projetos"
   },
-  "social_media": "Redes sociais"
+  "social_media": "Redes sociais",
+  "sections": [
+    {
+      "title": "CeSIUM",
+      "items": ["Notícias", "Sobre nós", "Equipa", "Departmentos"],
+      "links": ["#", "#", "#", "#"]
+    },
+    {
+      "title": "Atividades",
+      "items": ["Projetos", "Eventos", "Parcerias"],
+      "links": ["#", "#", "#"]
+    },
+    {
+      "title": "Estudantes",
+      "items": ["Torna-te sócio", "Torna-te colaborador", "Anuário"],
+      "links": ["#", "#", "#"]
+    },
+    {
+      "title": "Links Úteis",
+      "items": [
+        "Calendarium",
+        "Blackboard",
+        "Portal do Aluno",
+        "Página de LEI"
+      ],
+      "links": ["#", "#", "#", "#"]
+    }
+  ]
 }

tailwind.config.ts

@@ -20,7 +20,7 @@ const config: Config = {
         stroke: "#D4D4D8",
         black: "#27272A",
         gray: "#94959C",
-        stone: "#6C757D",
+        stone: "#27272A",
         blue: "#5069ED",
       },
       fontFamily: {