chore: SEI '24 styling (#596)

cesium · Dec 12, 2023 · 4705974 · 4705974
1 parent 805da32
commit 4705974
Show file tree

Hide file tree

Showing 27 changed files with 298 additions and 119 deletions.
diff --git a/components/Badge/index.tsx b/components/Badge/index.tsx
@@ -11,27 +11,26 @@ interface BadgeProps {
 
 export default function Badge({ name, id, avatar, tokens, owned }: BadgeProps) {
   const [badgeLoaded, setBadgeLoaded] = useState(false);
-  const [fallbackRan, setFallbackRan] = useState(false)
+  const [fallbackRan, setFallbackRan] = useState(false);
 
   const imageOnError: ReactEventHandler<HTMLImageElement> = (e) => {
     // prevent infinite loop fallback
     if (fallbackRan) {
       setBadgeLoaded(true);
-      return
+      return;
     }
 
     setBadgeLoaded(false);
     e.currentTarget.src = "/images/badges/badge-not-found.svg";
-    setFallbackRan(true)
+    setFallbackRan(true);
   };
 
   return (
     <Link
       href={`/badge/${id}`}
       className={`h-full w-full ${owned ? "opacity-100" : "opacity-30"}`}
     >
-      <div className="flex justify-center items-center w-full aspect-square select-none">
-
+      <div className="flex aspect-square w-full select-none items-center justify-center">
         {!badgeLoaded && <BadgeSkeleton />}
 
         <img
@@ -52,6 +51,6 @@ export default function Badge({ name, id, avatar, tokens, owned }: BadgeProps) {
 
 const BadgeSkeleton = () => {
   return (
-    <div className="w-10/12 aspect-square rounded-full bg-gray-500 animate-pulse opacity-10"/>
+    <div className="aspect-square w-10/12 animate-pulse rounded-full bg-gray-500 opacity-10" />
   );
 };
diff --git a/components/Header/index.jsx b/components/Header/index.jsx
@@ -3,7 +3,7 @@ import Head from "next/head";
 export default function Header() {
   return (
     <Head>
-      <title>SEI 2023</title>
+      <title>SEI 2024</title>
       <link
         rel="apple-touch-icon"
         sizes="180x180"

diff --git a/components/Schedule/Day/index.tsx b/components/Schedule/Day/index.tsx
@@ -62,7 +62,9 @@ export default function Day(props) {
         </div>
 
         <div className={`-mt-8 md:-mt-10 ${styles.dateWrapper}`}>
-          <h5 className={`font-ibold text-2xl text-quinary md:text-3xl`}>
+          <h5
+            className={`font-terminal-uppercase text-2xl text-quinary md:text-3xl`}
+          >
             {date_string}
           </h5>
           <h2

diff --git a/components/Schedule/Table/Block/index.jsx b/components/Schedule/Table/Block/index.jsx
@@ -26,7 +26,7 @@ function BlockItem({
     >
       {coffeeBreak && (
         <div className="relative float-right mr-5 h-10 w-10">
-          <Image src="/images/Coffee.svg" layout="fill" alt="Coffee Break" />
+          <Image src="/images/coffee.png" layout="fill" alt="Coffee Break" />
         </div>
       )}
 

diff --git a/components/Social/index.jsx b/components/Social/index.jsx
@@ -12,35 +12,35 @@ export default function Social() {
     <div className="mt-4 grid grid-cols-5 justify-items-center gap-x-3 md:gap-x-6">
       <a
         className="w-5 opacity-50 hover:opacity-100"
-        href="https://github.com/cesium/seium.org"
+        href="https://www.instagram.com/sei.uminho"
         target="_blank"
         rel="noreferrer"
       >
-        <FontAwesomeIcon icon={faGithubAlt} />
+        <FontAwesomeIcon icon={faInstagram} />
       </a>
       <a
         className="w-5 opacity-50 hover:opacity-100"
-        href="https://www.facebook.com/SEI.UMinho/"
+        href="https://www.linkedin.com/company/sei-cesium"
         target="_blank"
         rel="noreferrer"
       >
-        <FontAwesomeIcon icon={faFacebook} />
+        <FontAwesomeIcon icon={faLinkedinIn} />
       </a>
       <a
         className="w-5 opacity-50 hover:opacity-100"
-        href="https://www.instagram.com/sei.uminho"
+        href="https://github.com/cesium/seium.org"
         target="_blank"
         rel="noreferrer"
       >
-        <FontAwesomeIcon icon={faInstagram} />
+        <FontAwesomeIcon icon={faGithubAlt} />
       </a>
       <a
         className="w-5 opacity-50 hover:opacity-100"
-        href="https://www.linkedin.com/company/sei-cesium"
+        href="https://www.facebook.com/SEI.UMinho/"
         target="_blank"
         rel="noreferrer"
       >
-        <FontAwesomeIcon icon={faLinkedinIn} />
+        <FontAwesomeIcon icon={faFacebook} />
       </a>
       <a
         className="w-5 opacity-50 hover:opacity-100"

diff --git a/components/Speaker/index.jsx b/components/Speaker/index.jsx
@@ -8,6 +8,7 @@ export default function Speaker({ id, name, job, company }) {
         width="210"
         height="210"
         alt={name}
+        className="select-none"
       />
       <p className="text-md font-terminal-uppercase"> {name} </p>
       <p className="text-md font-imedium"> {job} </p>

diff --git a/components/SpotlightShape/index.tsx b/components/SpotlightShape/index.tsx
@@ -0,0 +1,21 @@
+export default function SpotlightShape() {
+  return (
+    <div className="absolute -top-[5vh] h-screen w-screen opacity-90 blur-md">
+      {/* Desktop spotlight effect */}
+      <div
+        className="hidden h-full w-full bg-gradient-to-b from-[#330bff] to-transparent lg:block"
+        style={{
+          clipPath: "polygon(110% 40%, -10% 140%, 40% -120%)",
+        }}
+      />
+
+      {/* Mobile spotlight effect */}
+      <div
+        className="block h-full w-full bg-gradient-to-b from-[#330bff] to-transparent lg:hidden"
+        style={{
+          clipPath: "polygon(130% 50%, -20% 90%, 80% -120%)",
+        }}
+      />
+    </div>
+  );
+}
diff --git a/data/schedule.json b/data/schedule.json
@@ -1,6 +1,6 @@
 [
   {
-    "date": "2023/2/14",
+    "date": "2024/2/6",
     "activities": [
       {
         "startTime": "10:00",
@@ -85,7 +85,7 @@
     ]
   },
   {
-    "date": "2023/2/15",
+    "date": "2024/2/7",
     "activities": [
       {
         "startTime": "09:00",
@@ -192,7 +192,7 @@
     ]
   },
   {
-    "date": "2023/2/16",
+    "date": "2024/2/8",
     "activities": [
       {
         "startTime": "09:00",
@@ -297,7 +297,7 @@
     ]
   },
   {
-    "date": "2023/2/17",
+    "date": "2024/2/9",
     "activities": [
       {
         "startTime": "09:00",

diff --git a/layout/404/404.tsx b/layout/404/404.tsx
@@ -7,7 +7,7 @@ export default function Error() {
   return (
     <>
       <div className="absolute z-0 h-screen w-screen bg-secondary"></div>
-      <div className="spacing relative z-10 bg-secondary">
+      <div className="spacing relative z-10 select-none bg-secondary">
         <div className="secondary invisible absolute left-0 xl:visible xl:h-screen xl:w-full">
           {<Image src="/images/ponto.svg" layout="fill" alt="Question mark" />}
         </div>

diff --git a/layout/Challenges/components/Challenges/Challenge/index.tsx b/layout/Challenges/components/Challenges/Challenge/index.tsx
@@ -7,7 +7,7 @@ function Action({ text, url }) {
       <Button
         onClick={(e) => (window.location.href = url)}
         title={text}
-        className="text-white bg-primary border-tertiary hover:bg-tertiary"
+        className="border-tertiary bg-primary text-white hover:bg-tertiary"
       />
     </div>
   );

diff --git a/layout/Challenges/components/Hero/index.jsx b/layout/Challenges/components/Hero/index.jsx
@@ -1,6 +1,7 @@
 import dynamic from "next/dynamic";
 
 import Title from "./Title";
+import SpotlightShape from "@components/SpotlightShape";
 
 const Animation = dynamic(() => import("@components/Animation"), {
   ssr: false,
@@ -9,8 +10,8 @@ const Animation = dynamic(() => import("@components/Animation"), {
 export default function Hero() {
   return (
     <div className=" select-none bg-secondary">
+      <SpotlightShape />
       <div className="spacing relative z-20 md:pb-32">
-        <Animation type="2" />
         <div className="pt-2">
           <Title />
         </div>

diff --git a/layout/FAQs/FAQs.tsx b/layout/FAQs/FAQs.tsx
@@ -6,12 +6,14 @@ import Footer from "@components/Footer";
 import { Question, FindUs } from "./components";
 
 import questions from "@data/faqs.json";
+import SpotlightShape from "@components/SpotlightShape";
 
 function Faq() {
   return (
     <>
       <Navbar bgColor="primary" button="quinary" fgColor="white">
-        <div className="spacing flex flex-col justify-between bg-primary py-20 lg:h-3/4 lg:flex-row">
+        <SpotlightShape />
+        <div className="spacing relative z-20 flex flex-col justify-between py-20 lg:h-3/4 lg:flex-row">
           <div className="mb-10 text-white lg:w-2/5">
             <h1 className="font-terminal-uppercase mb-4 select-none text-4xl font-bold lg:text-6xl">
               Frequently Asked Questions

diff --git a/layout/Home/components/Hero/Pitch/index.jsx b/layout/Home/components/Hero/Pitch/index.jsx
@@ -2,7 +2,7 @@ import Button from "@components/Button";
 
 export default function Pitch() {
   return (
-    <div className="xl:9/12 font-terminal-uppercase w-full select-none text-white lg:w-9/12">
+    <div className="xl:9/12 font-terminal-uppercase w-full select-none tracking-wide text-white">
       <h2 className="text-4xl font-bold">
         We gather speakers, attract partners and give our imagination wings, all
         for this to be your favorite week.

diff --git a/layout/Home/components/Hero/index.tsx b/layout/Home/components/Hero/index.tsx
@@ -10,6 +10,7 @@ import Title from "./Title";
 import Organization from "./Organization";
 import ExpectList from "./ExpectList";
 import Pitch from "./Pitch";
+import SpotlightShape from "@components/SpotlightShape";
 
 const Animation = dynamic(() => import("@components/Animation"), {
   ssr: false,
@@ -19,8 +20,8 @@ export default function Hero() {
   const { isAuthenticated } = useAuth();
   return (
     <div className="bg-secondary">
+      <SpotlightShape />
       <div className="spacing relative z-40 pb-32">
-        <Animation type="1" />
         <div className="select-none pt-2">
           <Title />
         </div>

diff --git a/layout/Home/components/Speakers/index.jsx b/layout/Home/components/Speakers/index.jsx
@@ -16,7 +16,7 @@ export default function Speakers() {
           <Link href="/speakers">
             <Button
               title="MEET THE SPEAKERS"
-              className="h-20 w-full border-4 border-white text-white hover:border-quinary hover:bg-quinary select-none"
+              className="h-20 w-full select-none border-4 border-white text-white hover:border-quinary hover:text-quinary"
               bold={true}
             />
           </Link>

diff --git a/layout/Schedule/Schedule.tsx b/layout/Schedule/Schedule.tsx
@@ -10,7 +10,7 @@ function Index() {
   return (
     <Navbar bgColor="tertiary" button="quinary" fgColor="white">
       <Hero />
-      <Schedule color="tertiary" detailed={true}>
+      <Schedule detailed={true}>
         <div className="pb-24" />
       </Schedule>
       <Footer color="tertiary" />

diff --git a/layout/Schedule/components/Hero/index.jsx b/layout/Schedule/components/Hero/index.jsx
@@ -1,6 +1,7 @@
 import dynamic from "next/dynamic";
 
 import Title from "./Title";
+import SpotlightShape from "@components/SpotlightShape";
 
 const Animation = dynamic(() => import("@components/Animation"), {
   ssr: false,
@@ -9,8 +10,8 @@ const Animation = dynamic(() => import("@components/Animation"), {
 export default function Hero() {
   return (
     <div className="bg-tertiary">
+      <SpotlightShape />
       <div className="spacing relative z-20 select-none pb-32">
-        <Animation type="3" />
         <div className="pt-2">
           <Title />
         </div>

diff --git a/layout/Speakers/Speakers.tsx b/layout/Speakers/Speakers.tsx
@@ -12,11 +12,7 @@ function Speakers() {
   return (
     <Navbar bgColor="secondary" button="quinary" fgColor="white">
       <Hero />
-      <Schedule
-        color="secondary"
-        detailed={false}
-        filters={router.query.speaker}
-      />
+      <Schedule detailed={false} filters={router.query.speaker} />
       <Footer color="secondary" />
     </Navbar>
   );

diff --git a/layout/Speakers/components/Hero/index.jsx b/layout/Speakers/components/Hero/index.jsx
@@ -1,20 +1,23 @@
 import dynamic from "next/dynamic";
 
 import Title from "./Title";
+import SpotlightShape from "@components/SpotlightShape";
 
 const Animation = dynamic(() => import("@components/Animation"), {
   ssr: false,
 });
 
 export default function Hero() {
   return (
-    <div className="spacing select-none bg-secondary pb-40">
-      <div className="relative z-20">
-        <Animation type="2" />
-        <div className="pt-2">
-          <Title />
+    <>
+      <SpotlightShape />
+      <div className="spacing select-none bg-secondary pb-40">
+        <div className="relative z-20">
+          <div className="pt-2">
+            <Title />
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/layout/Speakers/components/Schedule/index.jsx b/layout/Speakers/components/Schedule/index.jsx
@@ -110,7 +110,7 @@ export default function Schedule(props) {
   };
 
   return (
-    <section className="spacing relative bg-secondary pb-20 lg:pt-10 2xl:grid 2xl:grid-cols-2">
+    <section className="spacing relative pb-20 lg:pt-10 2xl:grid 2xl:grid-cols-2">
       <div className="relative z-50 mb-10 grid select-none place-items-center text-white sm:flex sm:flex-col md:mr-10 md:place-items-start">
         <Day date={date} previousDay={previous_day} nextDay={next_day} />
         <p className="text-md mt-10 w-5/6 font-iregular md:px-20">

diff --git a/layout/Team/components/Hero/index.jsx b/layout/Team/components/Hero/index.jsx
@@ -2,23 +2,26 @@ import dynamic from "next/dynamic";
 
 import Title from "./Title";
 import Organization from "./Organization";
+import SpotlightShape from "@components/SpotlightShape";
 
 const Animation = dynamic(() => import("@components/Animation"), {
   ssr: false,
 });
 
 export default function Hero() {
   return (
-    <div className="spacing select-none bg-primary">
-      <div className="relative z-50">
-        <Animation type="1" />
-        <div className="pt-2">
-          <Title />
-        </div>
-        <div className="mt-20 pb-20">
-          <Organization />
+    <>
+      <SpotlightShape />
+      <div className="spacing select-none bg-primary">
+        <div className="relative z-50">
+          <div className="pt-2">
+            <Title />
+          </div>
+          <div className="mt-20 pb-20">
+            <Organization />
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }