update design & add carousel

cesium · Sep 28, 2023 · f1fa624 · f1fa624
1 parent 6bcbae7
commit f1fa624
Show file tree

Hide file tree

Showing 13 changed files with 213 additions and 78 deletions.
diff --git a/app/team/page.tsx → app/equipa/page.tsx b/app/team/page.tsx → app/equipa/page.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,21 +1,28 @@
+"use client";
 import "/styles/globals.css";
+
 import { Inter, Orbitron } from "@next/font/google";
 import Navbar from "@/components/Navbar/Navbar";
 import Footer from "@/components/Footer";
 
+import { useState, useEffect } from "react";
+
 const inter = Inter({ subsets: ["latin"], variable: "--inter-font" });
 const orbitron = Orbitron({ subsets: ["latin"], variable: "--orbitron-font" });
 
-export const metadata = {
-  title: "Hydrogen",
-  description: "CeSIUM landing page",
-};
-
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const [width, setWidth] = useState<number>(0);
+  const [height, setHeight] = useState<number>(0);
+
+  useEffect(() => {
+    setWidth(window.innerWidth);
+    setHeight(window.innerHeight);
+  }, []);
+
   return (
     <html lang="en">
       <body className={`${inter.variable} ${orbitron.variable}`}>
@@ -24,17 +31,19 @@ export default function RootLayout({
         {/* Background */}
         {/* --> checkered lines */}
         <div className="absolute -z-50 h-full w-full">
+          {/* --> horizontal lines */}
           <div>
-            {[...Array(7)].map((_, index) => (
+            {[...Array(Math.round(width / 256))].map((_, index) => (
               <div
                 key={index}
                 className="absolute h-0.5 w-full bg-gray-50 shadow-inner"
                 style={{ marginTop: `calc(128px * ${index + 1})` }}
               />
             ))}
           </div>
+          {/* --> vertical lines */}
           <div className="flex flex-row">
-            {[...Array(20)].map((_, index) => (
+            {[...Array(Math.round(width / 128))].map((_, index) => (
               <div
                 key={index}
                 className="absolute h-full w-0.5 bg-gray-50 shadow-inner"
@@ -48,7 +57,7 @@ export default function RootLayout({
         {/* --> 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">
+        <div className="z-50 m-auto max-w-screen-xl space-y-40 px-20 py-14 text-gray-900">
           <Navbar />
           {children}
           <Footer />

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,14 +1,12 @@
 "use client";
 import Hero from "@/components/Hero";
-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">
+    <main className="space-y-40">
       <Hero />
-      <PromoGrid />
       {/* <CalendariumBenefits /> */}
       <NewsAndEvents />
     </main>

diff --git a/components/Carousel/Carousel.tsx b/components/Carousel/Carousel.tsx
@@ -0,0 +1,45 @@
+"use client";
+import useEmblaCarousel, { EmblaOptionsType } from "embla-carousel-react";
+import { useEffect, ReactNode, useState } from "react";
+
+type Props = {
+  children: ReactNode;
+  index: number;
+} & EmblaOptionsType;
+
+const Carousel = ({ children, index, ...options }: Props) => {
+  // useEmblaCarousel returns a emblaRef and we must attach the ref to a container.
+  // EmblaCarousel will use that ref as basis for swipe and other functionality.
+  const [emblaRef, emblaApi] = useEmblaCarousel(options);
+  const [scroll, setScroll] = useState<boolean>(true);
+
+  useEffect(() => {
+    // Only scrolls if mouse is not hovering the element
+    if (scroll) {
+      const interval = setInterval(
+        () => {
+          emblaApi?.scrollNext();
+        },
+        6000 + 1500 * index, // Sets a higher scroll interval for the 2nd banner (contains text)
+      );
+      return () => clearInterval(interval);
+    }
+  }, [emblaApi, scroll]);
+
+  return (
+    <div
+      className="select-none overflow-hidden shadow-sm shadow-gray-900/20"
+      ref={emblaRef}
+    >
+      <div
+        className="flex"
+        onMouseEnter={() => setScroll(false)}
+        onMouseLeave={() => setScroll(true)}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Carousel;
diff --git a/components/Carousel/index.ts b/components/Carousel/index.ts
@@ -0,0 +1 @@
+export { default } from "./Carousel";
diff --git a/components/Hero/Hero.tsx b/components/Hero/Hero.tsx
@@ -1,20 +1,24 @@
 import CeSIUMLogo from "../CeSIUMLogo";
+import PromoGrid from "./PromoGrid";
 
 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 className="flex flex-row flex-wrap items-center justify-between">
+      <div className="flex flex-col items-center space-y-8">
+        {/* Logo */}
+        <CeSIUMLogo width={200} color="#ed7950" />
+        {/* Text */}
+        <div className="w-[480px] flex-col space-y-4 text-center">
+          {/* Title */}
+          <div className="font-orbitron text-8xl font-bold">CeSIUM</div>
+          {/* Subtitle */}
+          <div className="font-inter text-xl font-medium text-slate-500">
+            Centro de Estudantes de Engenharia Informática da Universidade do
+            Minho
+          </div>
         </div>
       </div>
-      {/* Logo */}
-      <CeSIUMLogo width={352} color="#ed7950" />
+      <PromoGrid />
     </div>
   );
 };

diff --git a/components/PromoGrid/PromoGrid.tsx → components/Hero/PromoGrid.tsx b/components/PromoGrid/PromoGrid.tsx → components/Hero/PromoGrid.tsx
@@ -1,9 +1,8 @@
 import Link from "next/link";
 import Image from "next/image";
 
-import React from "react";
-
-import CeSIUMLogo from "@/components/CeSIUMLogo";
+import CeSIUMLogo from "../CeSIUMLogo";
+import Carousel from "../Carousel";
 
 import PromoGridItems from "@/data/PromoGridItems.json";
 
@@ -22,10 +21,8 @@ type BannerInfo = {
 const Banner = ({ item }: { item: BannerInfo }) => {
   return (
     <div
-      className={`relative 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"
+      className={`relative h-[250px] flex-[0_0_100%] p-8 font-orbitron text-5xl font-bold ${
+        item.image ? "hover:opacity-9 bg-transparent" : "bg-gray-200"
       }`}
       style={{ gridColumn: `span ${item.span} / span ${item.span} ` }}
     >
@@ -75,7 +72,7 @@ const BecomeMemberBanner = () => {
   ];
 
   return (
-    <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">
+    <div className="relative col-span-2 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>
       {/* Advantages List */}
       <ul className="list-inside list-disc font-inter text-sm font-normal text-white">
@@ -101,14 +98,20 @@ const BecomeMemberBanner = () => {
 
 const PromoGrid = () => {
   return (
-    <div className="mx-auto grid w-full grid-cols-4 gap-4 2xl:mt-60">
-      {/* PromoGrid items */}
-      {(PromoGridItems as BannerInfo[]).map(
-        (item: BannerInfo, index: number) => (
-          <Banner item={item} key={index} />
-        ),
-      )}
-      {/* Become a Member Banner */}
+    <div className="grid w-[516px] grid-cols-2 gap-4 overflow-hidden rounded-tl-[140px] shadow-sm shadow-gray-900/20">
+      {/* --> 1st Banner */}
+      <Carousel index={0} loop>
+        {(PromoGridItems[0] as BannerInfo[]).map((item) => (
+          <Banner item={item} />
+        ))}
+      </Carousel>
+      {/* --> 2nd Banner */}
+      <Carousel index={1} loop>
+        {(PromoGridItems[1] as BannerInfo[]).map((item) => (
+          <Banner item={item} />
+        ))}
+      </Carousel>
+      {/* --> Become a Member Banner */}
       <BecomeMemberBanner />
     </div>
   );

diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
@@ -4,7 +4,7 @@ import logo from "@/public/cesium-dark.svg";
 import Link from "next/link";
 
 // List of pages
-const navbar: string[] = ["Team", "Events", "Logs", "About Us"];
+const navbar: string[] = ["Sobre", "Equipa", "Loja", "Parcerias"];
 
 const Navbar = () => {
   return (

diff --git a/components/PromoGrid/index.ts b/components/PromoGrid/index.ts
diff --git a/data/PromoGridItems.json b/data/PromoGridItems.json
@@ -1,39 +1,43 @@
 [
-  {
-    "href": "/",
-    "image": "/summer_camp.png",
-    "description": "CeSIUM Summer Camp 2022 Promotional Image",
-    "span": 1
-  },
-  {
-    "title": "+50",
-    "description": "Colaboradores ativos a trabalhar e contribuir para o CeSIUM diariamente.",
-    "href": "/",
-    "span": 1
-  },
-  {
-    "title": "5",
-    "subtitle": "Departamentos",
-    "description": "Gostavas de colaborar? Fica a saber mais dos nossos departamentos e de tudo o que fazemos.",
-    "href": "/",
-    "span": 2
-  },
-  {
-    "title": "Merch",
-    "description": "A oportunidade perfeita para vestir o curso",
-    "href": "/",
-    "span": 2
-  },
-  {
-    "title": "+10",
-    "description": "Parcerias com empresas e estabelecimentos comerciais.",
-    "href": "/",
-    "span": 1
-  },
-  {
-    "title": "",
-    "href": "/",
-    "image": "/board.png",
-    "span": 1
-  }
+  [
+    {
+      "href": "/",
+      "image": "/summer_camp.png",
+      "description": "CeSIUM Summer Camp 2022 Promotional Image",
+      "span": 1
+    },
+    {
+      "title": "",
+      "href": "/",
+      "image": "/board.png",
+      "span": 1
+    }
+  ],
+  [
+    {
+      "title": "+50",
+      "description": "Colaboradores ativos a trabalhar e contribuir para o CeSIUM diariamente.",
+      "href": "/",
+      "span": 1
+    },
+    {
+      "title": "5",
+      "subtitle": "Departamentos",
+      "description": "Gostavas de colaborar? Fica a saber mais dos nossos departamentos e de tudo o que fazemos.",
+      "href": "/",
+      "span": 1
+    },
+    {
+      "title": "Merch",
+      "description": "A oportunidade perfeita para vestir o curso",
+      "href": "/",
+      "span": 1
+    },
+    {
+      "title": "+10",
+      "description": "Parcerias com empresas e estabelecimentos comerciais.",
+      "href": "/",
+      "span": 1
+    }
+  ]
 ]