refactor: whole design (#15)

* Redo the design * fix error * Update components/Banners.tsx Co-authored-by: Rui Lopes <[email protected]> --------- Co-authored-by: Rui Lopes <[email protected]>
cesium · Sep 19, 2023 · eb010db · eb010db
1 parent 9bc6736
commit eb010db
Show file tree

Hide file tree

Showing 23 changed files with 363 additions and 153 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,9 +1,10 @@
 import "./globals.css";
-import { Inter } from "next/font/google";
+import { Inter, Orbitron } from "@next/font/google";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ["latin"], variable: "--inter-font" });
+const orbitron = Orbitron({ subsets: ["latin"], variable: "--orbitron-font" });
 
 export const metadata = {
   title: "Hydrogen",
@@ -17,7 +18,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={`${inter.variable} ${orbitron.variable}`}>
         <Navbar />
         {children}
         <Footer />

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,14 +1,15 @@
+"use client";
 import Hero from "@/components/Hero";
 import Banners from "@/components/Banners";
-import PartnerBenefits from "@/components/PartnerBenefits";
+import CalendariumBenefits from "@/components/CalendariumBenefits";
 import NewsAndEvents from "@/components/NewsAndEvents";
 
 export default function Home() {
   return (
     <main className="bg-background">
       <Hero />
       <Banners />
-      <PartnerBenefits />
+      <CalendariumBenefits />
       <NewsAndEvents />
     </main>
   );

diff --git a/app/team/page.tsx b/app/team/page.tsx
@@ -17,7 +17,7 @@ export default function Team() {
   return (
     <main className="bg-background px-28 pb-8 ">
       <div className="flex flex-col items-center justify-center gap-8">
-        <h1 className="text-5xl font-semibold">Equipa</h1>
+        <h1 className="font-orbitron text-5xl font-semibold">Equipa</h1>
         <DatePicker
           yearDataList={teamData}
           selectedYear={selectedYear}

diff --git a/components/Banners.tsx b/components/Banners.tsx
@@ -1,12 +1,18 @@
 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";
 
-type LinkGroup = string[];
-const items: LinkGroup[] = [
-  ["Ser Parceiro", "Parceiros", "Equipa"],
-  ["Sobre Nós"],
-  ["Departamento de Informática", "Estudar LEI"],
-];
+type LinkGroupItem = {
+  title: string;
+  subtitle?: string;
+  description?: string;
+  href: string;
+  image?: string;
+};
+
+type LinkGroup = LinkGroupItem[];
 
 interface RowProps {
   links: LinkGroup;
@@ -15,11 +21,9 @@ interface RowProps {
 
 function handleColSpan(rowIndex: number, colIndex: number): string {
   if (rowIndex === 0) {
-    return colIndex === 0 ? "col-span-2" : "col-span-1";
+    return colIndex === 2 ? "col-span-2" : "col-span-1";
   } else if (rowIndex === 1) {
-    return "col-span-4";
-  } else if (rowIndex === 2) {
-    return "col-span-2";
+    return colIndex === 0 ? "col-span-2" : "col-span-1";
   } else {
     return "col-span-1";
   }
@@ -28,30 +32,81 @@ function handleColSpan(rowIndex: number, colIndex: number): string {
 function Row({ links, rowIndex }: RowProps) {
   return (
     <React.Fragment>
-      {links.map((item: string, colIndex: number) => (
-        <Link
-          href="/"
+      {links.map((item: LinkGroupItem, colIndex: number) => (
+        <div
           key={colIndex}
           className={`relative ${handleColSpan(
             rowIndex,
             colIndex,
-          )} h-[250px] rounded-xl bg-gray-200 text-2xl font-bold text-white hover:bg-gray-300`}
+          )} h-[250px] font-orbitron text-5xl font-bold text-black ${
+            item.image ? "bg-transparent hover:opacity-90" : "bg-gray-200"
+          }`}
         >
-          <span className="absolute bottom-4 left-14">{item}</span>
-        </Link>
+          {item.image && (
+            <Link href={item.href} className="absolute inset-0 h-full w-full">
+              <Image
+                src={`${item.image}`}
+                layout="fill"
+                objectFit="cover"
+                alt=""
+              />
+            </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>
+          <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"
+            >
+              Ver mais
+            </Link>
+          )}
+        </div>
       ))}
     </React.Fragment>
   );
 }
 
 export default function Banners() {
-  const rows: JSX.Element[] = items.map((row: string[], rowIndex: number) => (
-    <Row links={row} rowIndex={rowIndex} key={rowIndex} />
-  ));
+  const rows: JSX.Element[] = linkGroup.map(
+    (row: LinkGroup, rowIndex: number) => (
+      <Row links={row} rowIndex={rowIndex} key={rowIndex} />
+    ),
+  );
 
   return (
-    <div className="mx-auto my-32 grid w-[1280px] grid-cols-4 gap-4 2xl:mt-60">
+    <div className="mx-auto my-32 grid w-[1030px] 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">
+          {[
+            "Acesso à sala do CeSIUM",
+            "Cartão de sócio",
+            "Representação dos teus interesses",
+            "Kit de Sócios",
+          ].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"
+        >
+          Saber mais
+        </Link>
+        <span className="absolute right-64 top-8">
+          <Image src={logo} width={255} alt="" />
+        </span>
+      </div>
     </div>
   );
 }
diff --git a/components/CalendariumBenefits.tsx b/components/CalendariumBenefits.tsx
@@ -0,0 +1,37 @@
+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">
+      <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?
+        </h2>
+        <p className="w-[700px] text-justify text-sm text-white">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
+          explicabo nobis temporibus nam, dolorum est sequi quasi corrupti,
+          illum optio ducimus harum?
+        </p>
+        <ul className="list-inside list-disc text-justify font-inter text-sm font-normal text-white">
+          {[
+            "lorem ipsum dolor sit amet",
+            "lorem ipsum dolor sit amet",
+            "lorem ipsum dolor sit amet",
+            "lorem ipsum dolor sit amet",
+          ].map((item, index) => (
+            <li key={index}>{item}</li>
+          ))}
+        </ul>
+        <LinkButton
+          className="bg-white px-6 py-4 font-orbitron text-base text-cesium-orange"
+          title="Saber mais"
+          linkPath="/"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/components/Hero.tsx b/components/Hero.tsx
@@ -3,25 +3,15 @@ import logo from "@/public/cesium.svg";
 
 export default function Hero() {
   return (
-    <div className="mt-32 flex items-center justify-center gap-36">
+    <div className="mt-32 flex items-center justify-center gap-32">
       <div className="w-[530px] flex-col items-center justify-center">
-        <div className="mb-6 text-8xl font-semibold">CeSIUM</div>
-        <div className="text-2xl font-semibold">
+        <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>
-      <div className="relative">
-        <Image src={logo} alt="" width={300} height={343} priority />
-        <Image
-          className="absolute left-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 scale-150 transform rounded-lg object-cover opacity-40 blur-3xl filter"
-          src={logo}
-          alt=""
-          width={300}
-          height={343}
-          priority
-        />
-      </div>
+      <Image src={logo} alt="" width={250} height={343} priority />
     </div>
   );
 }
diff --git a/components/LinkButton.tsx b/components/LinkButton.tsx
@@ -3,12 +3,17 @@ import Link from "next/link";
 interface IButtonProps {
   title: string;
   linkPath: string;
+  className: string;
 }
 
-export default function LinkButton({ title, linkPath }: IButtonProps) {
+export default function LinkButton({
+  title,
+  linkPath,
+  className,
+}: IButtonProps) {
   return (
     <Link
-      className="rounded-xl bg-cesium-orange px-6 py-4 text-xl font-bold text-white"
+      className={`rounded-md bg-cesium-orange text-xl font-bold  ${className}`}
       href={linkPath}
     >
       {title}

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -2,25 +2,34 @@ import Image from "next/image";
 
 import logo from "@/public/cesium-lettering.png";
 import Link from "next/link";
+import LinkButton from "./LinkButton";
 
-const navbar: string[] = ["HOME", "TEAM", "LOGS", "EVENTS", "ABOUT US"];
+const navbar: string[] = ["Team", "Events", "Logs", "About Us"];
 
 export default function Navbar() {
   return (
-    <div className="flex items-center justify-between px-20">
-      <Image src={logo} alt="" width={150} height={200} priority />
-      <div className="flex w-[50%] items-center justify-between">
-        {navbar.map((title) => (
-          <Link
-            key={title}
-            className="border-b-2 border-transparent pb-4 text-sm text-black hover:border-cesium-orange hover:text-cesium-orange"
-            href={title === "HOME" ? "/" : `/${title.toLowerCase()}`}
-          >
-            {title}
-          </Link>
-        ))}
+    <div className="flex items-center justify-between px-28">
+      <div className="flex flex-row gap-10">
+        <a href="/">
+          <Image src={logo} alt="" width={125} height={200} priority />
+        </a>
+        <div className="mt-3 flex items-center justify-center gap-10">
+          {navbar.map((title) => (
+            <Link
+              key={title}
+              className={`border-b-2 border-transparent pb-2 font-orbitron text-lg text-black hover:border-cesium-orange hover:text-cesium-orange`}
+              href={`/${title.toLowerCase()}`}
+            >
+              {title}
+            </Link>
+          ))}
+        </div>
       </div>
-      <div className="h-20 w-20 rounded-full bg-gray-200"></div>
+      <LinkButton
+        className="p-2 font-orbitron text-lg font-normal text-white"
+        linkPath="/"
+        title="Get in Touch"
+      ></LinkButton>
     </div>
   );
 }