improve and document code

app/layout.tsx

@@ -1,6 +1,6 @@
 import "/styles/globals.css";
 import { Inter, Orbitron } from "@next/font/google";
-import Navbar from "@/components/Navbar";
+import Navbar from "@/components/Navbar/Navbar";
 import Footer from "@/components/Footer";
 
 const inter = Inter({ subsets: ["latin"], variable: "--inter-font" });

app/page.tsx

@@ -1,14 +1,14 @@
 "use client";
 import Hero from "@/components/Hero";
-import Banners from "@/components/Banners";
+import PromoGrid from "@/components/PromoGrid";
 import CalendariumBenefits from "@/components/CalendariumBenefits";
 import NewsAndEvents from "@/components/NewsAndEvents";
 
 export default function Home() {
   return (
     <main className="space-y-32">
       <Hero />
-      <Banners />
+      <PromoGrid />
       {/* <CalendariumBenefits /> */}
       <NewsAndEvents />
     </main>

app/team/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import teamData from "@/data/2023.json";
+import teamData from "@/data/TeamPageData.json";
 import React, { useState } from "react";
 import DatePicker from "@/components/DatePicker";
 import Teams from "@/components/Team";

components/CeSIUMLogo.tsx → components/CeSIUMLogo/CeSIUMLogo.tsx

@@ -4,7 +4,7 @@ type CeSIUMLogoProps = {
   color?: string;
 };
 
-export default function CeSIUMLogo(props: CeSIUMLogoProps) {
+const CeSIUMLogo = (props: CeSIUMLogoProps) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -37,4 +37,6 @@ export default function CeSIUMLogo(props: CeSIUMLogoProps) {
       />
     </svg>
   );
-}
+};
+
+export default CeSIUMLogo;

components/CeSIUMLogo/index.ts

@@ -0,0 +1 @@
+export { default } from "./CeSIUMLogo";

components/Footer.tsx → components/Footer/Footer.tsx

@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
+
 import Image from "next/image";
+
 import {
   FaFacebookF,
   FaInstagram,
@@ -8,11 +10,17 @@ import {
   FaYoutube,
 } from "react-icons/fa";
 
+type ListLinkProps = {
+  href: string;
+  text: string;
+};
+
 type SocialLinkProps = {
   href: string;
   icon: ReactNode;
 };
 
+// Social Icons
 const SocialLink = ({ href, icon }: SocialLinkProps) => (
   <li>
     <a href={href} className="[&>svg]:h-6 [&>svg]:w-6">
@@ -21,11 +29,7 @@ const SocialLink = ({ href, icon }: SocialLinkProps) => (
   </li>
 );
 
-type ListLinkProps = {
-  href: string;
-  text: string;
-};
-
+// Link from Links List
 const ListLink = ({ href, text }: ListLinkProps) => (
   <li className="py-1 text-gray-500">
     <a href={href}>{text}</a>
@@ -35,17 +39,21 @@ const ListLink = ({ href, text }: ListLinkProps) => (
 const Footer = () => {
   return (
     <footer className="grid gap-4 md:grid-cols-2 md:px-8 md:pb-8 lg:grid-cols-3">
+      {/* Left */}
       <div className="flex flex-col justify-between gap-4 text-gray-500 max-md:items-center max-md:text-center">
+        {/* Logo */}
         <Image
           src="/cesium.svg"
           alt="CeSIUM logo"
           width={32}
           height={32}
         ></Image>
+        {/* Description */}
         <p className="max-w-[300px]">
           CeSIUM - Centro de Estudantes de Engenharia Informática da
           Universidade do Minho
         </p>
+        {/* Social Links */}
         <ul className="flex flex-wrap gap-x-4">
           <SocialLink
             href="https://www.facebook.com/cesiuminho"
@@ -66,16 +74,19 @@ const Footer = () => {
           />
         </ul>
       </div>
+      {/* Center */}
       <div className="flex justify-center max-lg:pt-4 max-md:border-t-[1px] max-md:border-gray-300">
         <div className="grid max-w-md grow grid-cols-3 gap-4">
+          {/* Column 1 */}
           <div>
-            <span>Links</span>
+            <span>Label</span>
             <ul className="mt-4">
               <ListLink href="" text="Consectetur" />
               <ListLink href="" text="Lorem Ipsum" />
               <ListLink href="" text="Lorem" />
             </ul>
           </div>
+          {/* Column 2 */}
           <div>
             <span>Label</span>
             <ul className="mt-4">
@@ -84,6 +95,7 @@ const Footer = () => {
               <ListLink href="" text="Sit Amet" />
             </ul>
           </div>
+          {/* Column 3 */}
           <div>
             <span>Label</span>
             <ul className="mt-4">
@@ -94,6 +106,7 @@ const Footer = () => {
           </div>
         </div>
       </div>
+      {/* Right */}
       <div className="text-center text-gray-500 max-lg:flex max-lg:justify-center max-lg:border-t-[1px] max-lg:border-gray-300 max-lg:pt-4 max-md:pt-4 md:col-span-2 md:self-end lg:col-auto lg:text-right">
         <div>
           <p>Braga, Portugal</p>

components/Footer/index.ts

@@ -0,0 +1 @@
+export { default } from "./Footer";

components/Hero.tsx → components/Hero/Hero.tsx

@@ -1,16 +1,22 @@
-import CeSIUMLogo from "./CeSIUMLogo";
+import CeSIUMLogo from "../CeSIUMLogo";
 
-export default function Hero() {
+const Hero = () => {
   return (
     <div className="flex items-center justify-center gap-32">
+      {/* Text */}
       <div className="w-[480px] flex-col items-center justify-center">
+        {/* Title */}
         <div className="mb-6 font-orbitron text-7xl font-bold">CeSIUM</div>
+        {/* Subtitle */}
         <div className="font-inter text-xl font-normal text-slate-500">
           Centro de Estudantes de Engenharia Informática da Universidade do
           Minho
         </div>
       </div>
+      {/* Logo */}
       <CeSIUMLogo width={352} color="#ed7950" />
     </div>
   );
-}
+};
+
+export default Hero;

components/Hero/index.ts

@@ -0,0 +1 @@
+export { default } from "./Hero";

components/Navbar.tsx → components/Navbar/Navbar.tsx

@@ -3,14 +3,17 @@ import Image from "next/image";
 import logo from "@/public/cesium-dark.svg";
 import Link from "next/link";
 
+// List of pages
 const navbar: string[] = ["Team", "Events", "Logs", "About Us"];
 
-export default function Navbar() {
+const Navbar = () => {
   return (
     <div className="flex h-10 items-center justify-between">
+      {/* Logo */}
       <a href="/">
         <Image src={logo} alt="" width={136} height={46} priority />
       </a>
+      {/* Page Links */}
       <div className="flex flex-row">
         <div className="flex items-center justify-center gap-10 font-orbitron text-lg font-medium text-gray-400">
           {navbar.map((title) => (
@@ -24,6 +27,7 @@ export default function Navbar() {
           ))}
         </div>
       </div>
+      {/* Login Button */}
       <Link
         className="rounded-lg bg-cesium-900 p-1 px-4 font-orbitron text-lg font-medium text-white transition-shadow duration-300 hover:shadow-lg hover:shadow-cesium-900/40"
         href="/"
@@ -32,4 +36,6 @@ export default function Navbar() {
       </Link>
     </div>
   );
-}
+};
+
+export default Navbar;

components/Navbar/index.ts

@@ -0,0 +1 @@
+export { default } from "./Navbar";