General Improvements (#16)

cesium · Sep 27, 2023 · 3777929 · 3777929
1 parent eb010db
commit 3777929
Show file tree

Hide file tree

Showing 20 changed files with 261 additions and 159 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,4 @@
-import "./globals.css";
+import "/styles/globals.css";
 import { Inter, Orbitron } from "@next/font/google";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
@@ -19,9 +19,40 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`${inter.variable} ${orbitron.variable}`}>
-        <Navbar />
-        {children}
-        <Footer />
+        {/* Top Orange Bar */}
+        <div className="h-2 w-full bg-cesium-900" />
+        {/* Background */}
+        {/* --> checkered lines */}
+        <div className="absolute -z-50 h-full w-full">
+          <div>
+            {[...Array(7)].map((_, index) => (
+              <div
+                key={index}
+                className="absolute h-0.5 w-full bg-gray-50 shadow-inner"
+                style={{ marginTop: `calc(128px * ${index + 1})` }}
+              />
+            ))}
+          </div>
+          <div className="flex flex-row">
+            {[...Array(20)].map((_, index) => (
+              <div
+                key={index}
+                className="absolute h-full w-0.5 bg-gray-50 shadow-inner"
+                style={{ marginLeft: `calc(128px * ${index + 1})` }}
+              />
+            ))}
+          </div>
+        </div>
+        {/* --> left to right gradient */}
+        <div className="absolute -z-40 h-full w-full bg-gradient-to-r from-white to-transparent" />
+        {/* --> bottom to top gradient */}
+        <div className="absolute -z-40 mt-[200px] h-full w-full bg-gradient-to-t from-white to-transparent" />
+        {/* Main Content */}
+        <div className="z-50 m-auto max-w-screen-xl space-y-32 px-20 py-14 text-gray-900">
+          <Navbar />
+          {children}
+          <Footer />
+        </div>
       </body>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -6,10 +6,10 @@ import NewsAndEvents from "@/components/NewsAndEvents";
 
 export default function Home() {
   return (
-    <main className="bg-background">
+    <main className="space-y-32">
       <Hero />
       <Banners />
-      <CalendariumBenefits />
+      {/* <CalendariumBenefits /> */}
       <NewsAndEvents />
     </main>
   );

diff --git a/app/team/page.tsx b/app/team/page.tsx
@@ -2,7 +2,7 @@
 import teamData from "@/data/2023.json";
 import React, { useState } from "react";
 import DatePicker from "@/components/DatePicker";
-import Teams from "@/components/Teams";
+import Teams from "@/components/Team";
 
 export default function Team() {
   const yearDefault = "2023";
@@ -15,8 +15,8 @@ export default function Team() {
   const selectedYearData = teamData.find((data) => data.year === selectedYear);
 
   return (
-    <main className="bg-background px-28 pb-8 ">
-      <div className="flex flex-col items-center justify-center gap-8">
+    <main>
+      <div className="flex select-none flex-col items-center justify-center gap-8">
         <h1 className="font-orbitron text-5xl font-semibold">Equipa</h1>
         <DatePicker
           yearDataList={teamData}

diff --git a/components/Banners.tsx b/components/Banners.tsx
@@ -1,9 +1,10 @@
 import Link from "next/link";
 import Image from "next/image";
 import React from "react";
-import logo from "@/public/cesiumW.png";
 import linkGroup from "@/data/LinkGroup.json";
 
+import CeSIUMLogo from "./CeSIUMLogo";
+
 type LinkGroupItem = {
   title: string;
   subtitle?: string;
@@ -38,8 +39,10 @@ function Row({ links, rowIndex }: RowProps) {
           className={`relative ${handleColSpan(
             rowIndex,
             colIndex,
-          )} h-[250px] font-orbitron text-5xl font-bold text-black ${
-            item.image ? "bg-transparent hover:opacity-90" : "bg-gray-200"
+          )} h-[250px] p-8 font-orbitron text-5xl font-bold shadow-sm shadow-gray-900/20 ${
+            item.image
+              ? "hover:opacity-9 overflow-hidden bg-transparent"
+              : "bg-gray-200"
           }`}
         >
           {item.image && (
@@ -52,19 +55,20 @@ function Row({ links, rowIndex }: RowProps) {
               />
             </Link>
           )}
-          <h1 className="absolute left-8 top-8">{item.title}</h1>
-          <h2 className="absolute left-20 top-14 mr-8 text-lg text-black">
-            {item.subtitle}
-          </h2>
+          <span className="flex flex-row space-x-2">
+            <h1>{item.title}</h1>
+            <h2 className="mt-[1.2rem]  text-lg">{item.subtitle}</h2>
+          </span>
           <h5 className="absolute left-8 top-24 mr-8 font-inter text-sm font-normal text-gray-500">
             {item.description}
           </h5>
           {!item.image && (
             <Link
               href={item.href}
-              className="absolute bottom-8 left-8 border-b-2 border-cesium-orange font-inter text-sm font-normal text-cesium-orange hover:border-cesium-orange-700 hover:text-cesium-orange-700"
+              className="absolute bottom-8 left-8 font-inter text-sm font-medium text-gray-900 transition-all hover:font-bold hover:text-cesium-900"
             >
-              Ver mais
+              <text className="border-b-2 border-cesium-900">Ver mais</text>{" "}
+              <i className="bi bi-chevron-right"></i>
             </Link>
           )}
         </div>
@@ -81,30 +85,29 @@ export default function Banners() {
   );
 
   return (
-    <div className="mx-auto my-32 grid w-[1030px] grid-cols-4 gap-4 2xl:mt-60">
+    <div className="mx-auto grid w-full grid-cols-4 gap-4 2xl:mt-60">
       {rows}
-      <div
-        className={`relative col-span-4 flex h-[250px] flex-col bg-dark-gray font-orbitron text-5xl font-bold text-white`}
-      >
-        <h1 className="mx-8 mt-8">Torna-te Sócio</h1>
-        <ul className="mx-8 mt-2 list-inside list-disc font-inter text-sm font-normal text-white">
+      <div className="relative col-span-4 flex h-[250px] flex-col justify-between space-y-4 overflow-hidden bg-dark-gray p-8 font-orbitron text-5xl font-bold text-white shadow-sm shadow-gray-900/20">
+        <h1>Torna-te Sócio</h1>
+        <ul className="list-inside list-disc font-inter text-sm font-normal text-white">
           {[
-            "Acesso à sala do CeSIUM",
-            "Cartão de sócio",
-            "Representação dos teus interesses",
-            "Kit de Sócios",
+            "Kit de Sócio",
+            "Cartão de Sócio",
+            "Descontos em Parceiros",
+            "Acesso a Eventos Especiais",
           ].map((item, index) => (
             <li key={index}>{item}</li>
           ))}
         </ul>
         <Link
           href="/"
-          className="mb-4 ml-8 mr-auto border-b-2 border-cesium-orange font-inter text-sm font-normal text-cesium-orange hover:border-cesium-orange-700 hover:text-cesium-orange-700"
+          className="w-fit font-inter text-lg font-medium text-white transition-all hover:font-bold"
         >
-          Saber mais
+          <text className="border-b-2 border-cesium-900">Saber mais</text>{" "}
+          <i className="bi bi-chevron-right"></i>
         </Link>
-        <span className="absolute right-64 top-8">
-          <Image src={logo} width={255} alt="" />
+        <span className="absolute -right-[5.5rem] top-[3rem]">
+          <CeSIUMLogo width={200} color="white" />
         </span>
       </div>
     </div>

diff --git a/components/CalendariumBenefits.tsx b/components/CalendariumBenefits.tsx
@@ -1,12 +1,10 @@
-import LinkButton from "./LinkButton";
 import Image from "next/image";
 import calendarium from "@/public/calendarium.png";
 
 export default function PartnerBenefits() {
   return (
-    <div className="flex gap-20 bg-cesium-orange px-80 py-10 text-center">
+    <div className="flex flex-row gap-20 bg-cesium-900 px-80 py-10">
       <Image src={calendarium} width={384} height={384} alt=""></Image>
-
       <div className="flex flex-col items-start justify-start gap-4">
         <h2 className="mt-10 font-orbitron text-4xl font-bold text-white">
           Ja ouviste falar no Calendarium?
@@ -26,11 +24,11 @@ export default function PartnerBenefits() {
             <li key={index}>{item}</li>
           ))}
         </ul>
-        <LinkButton
-          className="bg-white px-6 py-4 font-orbitron text-base text-cesium-orange"
+        {/* <LinkButton
+          className="bg-white px-6 py-4 font-orbitron text-base text-cesium-900"
           title="Saber mais"
           linkPath="/"
-        />
+        /> */}
       </div>
     </div>
   );

diff --git a/components/CeSIUMLogo.tsx b/components/CeSIUMLogo.tsx
@@ -0,0 +1,40 @@
+type CeSIUMLogoProps = {
+  width?: number;
+  height?: number;
+  color?: string;
+};
+
+export default function CeSIUMLogo(props: CeSIUMLogoProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 479.29 549.18"
+      style={{ color: props.color }}
+      {...props}
+    >
+      <defs>
+        <style>{`.cls-1{fill: currentColor }`}</style>
+      </defs>
+      <path
+        d="m171.29 39.06 164 94.59-95.05 56.7-82.59-47.53-68 39.06 149.88 86.59 233.41-134.35L239.76 0l-68.47 39.06z"
+        className="cls-1"
+      />
+      <path
+        d="M157.41 47.06 7.76 134.24l68.01 39.41 81.64-47.06 82.83 47.06 67.52-39.41-150.35-87.18zM479.29 146.35 246.82 280.47v79.06l232.47-134.12v-79.06zM410.35 288.24v71.29l62.59-35.65-62.59-35.64zM479.29 336.94l-150.11 86.12v78.82l150.11-87.06v-77.88z"
+        className="cls-1"
+      />
+      <path
+        d="M246.82 376v173.18l68.47-39.77v-94.59l82.36-47.76v-78.82L246.82 376zM164.24 336.23s1.65 96 0 94.59S0 336.23 0 336.23v78.35l232.94 134.59V375.76Z"
+        className="cls-1"
+      />
+      <path
+        d="M68.23 280.94v-95.29L0 146.35V320l150.59 86.35.94-77.41-83.3-48z"
+        className="cls-1"
+      />
+      <path
+        d="M82.12 193.65v79.29l150.82 86.59v-78.59L82.12 193.65z"
+        className="cls-1"
+      />
+    </svg>
+  );
+}
diff --git a/components/DatePicker.tsx b/components/DatePicker.tsx
@@ -23,23 +23,25 @@ const Date: React.FC<DateProps> = ({
   );
 
   return (
-    <div className="flex justify-between gap-10">
+    <div className="flex justify-between gap-10 font-orbitron">
+      {/* Left Chevron */}
       <button
-        className="w-16 items-center text-xl font-normal text-slate-400"
+        className="w-16 items-center text-xl text-slate-400 transition-colors hover:text-gray-900"
         onClick={() => {
           const prevYearIndex = Math.max(0, selectedYearIndex - 1);
           onYearChange(yearDataList[prevYearIndex].year);
         }}
       >
-        &lt;
+        <i className="bi bi-chevron-left"></i>
       </button>
-      <div className="flex w-96 flex-row items-center justify-center gap-10">
+      {/* Year List */}
+      <div className="flex w-96 flex-row justify-center gap-10">
         {displayedYears.map((yearData) => (
           <div
-            className={`cursor-pointer text-xl font-semibold ${
+            className={`cursor-pointer text-xl transition-all ${
               yearData.year === selectedYear
-                ? "text-cesium-orange-900"
-                : "text-slate-300"
+                ? "font-semibold text-cesium-900"
+                : "text-slate-300 hover:text-cesium-900"
             } ${
               parseInt(yearData.year) === parseInt(selectedYear) - 2
                 ? "gradient-text-left"
@@ -54,8 +56,9 @@ const Date: React.FC<DateProps> = ({
           </div>
         ))}
       </div>
+      {/* Right Chevron */}
       <button
-        className="w-16 items-center text-xl font-normal text-slate-400"
+        className="w-16 items-center text-xl text-slate-400 transition-colors hover:text-gray-900"
         onClick={() => {
           const nextYearIndex = Math.min(
             selectedYearIndex + 1,
@@ -64,7 +67,7 @@ const Date: React.FC<DateProps> = ({
           onYearChange(yearDataList[nextYearIndex].year);
         }}
       >
-        &gt;
+        <i className="bi bi-chevron-right"></i>
       </button>
     </div>
   );

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -34,30 +34,42 @@ const ListLink = ({ href, text }: ListLinkProps) => (
 
 const Footer = () => {
   return (
-    <footer className="mt-12 grid gap-4 px-4 pb-4 md:grid-cols-2 md:px-8 md:pb-8 lg:grid-cols-3 lg:px-20 lg:pb-24">
+    <footer className="grid gap-4 md:grid-cols-2 md:px-8 md:pb-8 lg:grid-cols-3">
       <div className="flex flex-col justify-between gap-4 text-gray-500 max-md:items-center max-md:text-center">
         <Image
           src="/cesium.svg"
           alt="CeSIUM logo"
           width={32}
           height={32}
         ></Image>
-        <p className="max-w-[40ch]">
+        <p className="max-w-[300px]">
           CeSIUM - Centro de Estudantes de Engenharia Informática da
           Universidade do Minho
         </p>
         <ul className="flex flex-wrap gap-x-4">
-          <SocialLink href="" icon={<FaFacebookF />} />
-          <SocialLink href="" icon={<FaInstagram />} />
-          <SocialLink href="" icon={<FaTwitter />} />
-          <SocialLink href="" icon={<FaGithub />} />
-          <SocialLink href="" icon={<FaYoutube />} />
+          <SocialLink
+            href="https://www.facebook.com/cesiuminho"
+            icon={<FaFacebookF />}
+          />
+          <SocialLink
+            href="https://www.instagram.com/cesiuminho"
+            icon={<FaInstagram />}
+          />
+          <SocialLink
+            href="https://www.twitter.com/cesiuminho"
+            icon={<FaTwitter />}
+          />
+          <SocialLink href="https://github.com/cesium/" icon={<FaGithub />} />
+          <SocialLink
+            href="https://youtube.com/cesiumUM"
+            icon={<FaYoutube />}
+          />
         </ul>
       </div>
       <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">
           <div>
-            <span>Label</span>
+            <span>Links</span>
             <ul className="mt-4">
               <ListLink href="" text="Consectetur" />
               <ListLink href="" text="Lorem Ipsum" />
@@ -85,9 +97,9 @@ const Footer = () => {
       <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>
-          <p>Telefone: +351 253 604 448</p>
+          <p>+351 253 604 448</p>
           <p>
-            Email: <a href="mailto:[email protected]">[email protected]</a>
+            <a href="mailto:[email protected]">[email protected]</a>
           </p>
         </div>
       </div>

diff --git a/components/Hero.tsx b/components/Hero.tsx
@@ -1,17 +1,16 @@
-import Image from "next/image";
-import logo from "@/public/cesium.svg";
+import CeSIUMLogo from "./CeSIUMLogo";
 
 export default function Hero() {
   return (
-    <div className="mt-32 flex items-center justify-center gap-32">
-      <div className="w-[530px] flex-col items-center justify-center">
+    <div className="flex items-center justify-center gap-32">
+      <div className="w-[480px] flex-col items-center justify-center">
         <div className="mb-6 font-orbitron text-7xl font-bold">CeSIUM</div>
         <div className="font-inter text-xl font-normal text-slate-500">
           Centro de Estudantes de Engenharia Informática da Universidade do
           Minho
         </div>
       </div>
-      <Image src={logo} alt="" width={250} height={343} priority />
+      <CeSIUMLogo width={352} color="#ed7950" />
     </div>
   );
 }