Changes to the UIs

app/Loader/Loader.css

@@ -0,0 +1,45 @@
+/* HTML: <div class="loader"></div> */
+.loader {
+  width: 40px;
+  margin: auto;
+  aspect-ratio: 1;
+  --c: linear-gradient(#000 0 0);
+  --r1: radial-gradient(farthest-side at bottom, #000 93%, #0000);
+  --r2: radial-gradient(farthest-side at top, #000 93%, #0000);
+  background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2),
+    var(--c), var(--r1), var(--r2);
+  background-repeat: no-repeat;
+  animation: l2 1s infinite alternate;
+}
+@keyframes l2 {
+  0%,
+  25% {
+    background-size: 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0,
+      8px 4px, 8px 4px;
+    background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px), 50% 50%,
+      50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px),
+      100% calc(50% + 2px);
+  }
+  50% {
+    background-size: 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0,
+      8px 4px, 8px 4px;
+    background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%,
+      50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px),
+      100% calc(50% + 2px);
+  }
+  75% {
+    background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px,
+      8px 0, 8px 4px, 8px 4px;
+    background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%,
+      50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(50% - 2px),
+      100% calc(50% + 2px);
+  }
+  95%,
+  100% {
+    background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px,
+      8px 100%, 8px 4px, 8px 4px;
+    background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%,
+      50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(0% - 2px),
+      100% calc(100% + 2px);
+  }
+}

app/Loader/Loader.jsx

@@ -0,0 +1,7 @@
+import "./Loader.css";
+
+function Loader() {
+  return <div className="loader"></div>;
+}
+
+export default Loader;

app/components/Footer.js

@@ -9,7 +9,7 @@ import Link from "next/link";
 export default function Footer() {
   return (
     <footer className="flex flex-col w-full">
-      <div className="bg-black grid md:grid-cols-5 p-10 max-md:p-5 gap-5 grid-cols-2 ">
+      <div className="bg-black grid md:grid-cols-4 max-auto px-20 py-14 max-md:p-5 gap-4 grid-cols-2 ">
         <div className="p-5 max-md:col-span-2 max-md:justify-self-center">
           <Image
             src={whitelogo}
@@ -18,62 +18,73 @@ export default function Footer() {
             height={70}
           />
         </div>
-        
+
         <div>
-          <h3 className="text-white text-xl my-2">Legals</h3>
+          <h3 className="text-white text-lg my-2">Legals</h3>
           <Link href="/">
-            <p className="text-sm text-gray-400">Privacy Policy</p>
+            <p className="text-sm text-gray-400 hover:text-white">
+              Privacy Policy
+            </p>
           </Link>
           <Link href="/">
-            <p className="text-sm text-gray-400">Terms & Conditions</p>
+            <p className="text-sm text-gray-400 hover:text-white">
+              Terms & Conditions
+            </p>
           </Link>
         </div>
 
-        <p className="text-sm text-white max-md:col-span-2">
-          maximus@ethicalspectacle.com              
-        </p>
+        <div>
+          <h3 className="text-white text-lg my-2">Contacts</h3>
+          <p className="text-sm text-gray-400 max-md:col-span-2 hover:text-white">
+            maximus@ethicalspectacle.com
+          </p>
+        </div>
 
         <div className="p-5 max-md:col-span-2 max-md:justify-self-center max-md:p-2">
-          <h3 className="text-white text-xl my-2 max-md:hidden">Socials</h3>
           <div className="flex gap-5">
-            <Link href="https://www.linkedin.com/company/ethicalspectacle/about/?viewAsMember=true">
+            <Link
+              target="_blank"
+              href="https://www.linkedin.com/company/ethicalspectacle/about/?viewAsMember=true"
+            >
               <Image
                 src={linkedinplain}
                 width={30}
                 height={30}
                 alt="Linkedin Logo"
-                className="text-gray-400"
+                className=""
               ></Image>
             </Link>
-            <Link href="https://huggingface.co/ethical-spectacle">
+            <Link
+              target="_blank"
+              href="https://huggingface.co/ethical-spectacle"
+            >
               <Image
                 src={huggingfacelogo}
                 width={30}
                 height={30}
                 alt="Hugging Face Logo"
-                className="text-gray-400"
               ></Image>
             </Link>
-            <Link href="https://www.meetup.com/ethical-spectacle-research/events/">
+            <Link
+              target="_blank"
+              href="https://www.meetup.com/ethical-spectacle-research/events/"
+            >
               <Image
                 src={meetuplogo}
                 width={30}
                 height={30}
                 alt="Meetup Logo"
-                className="text-gray-400"
               ></Image>
             </Link>
           </div>
         </div>
       </div>
       <div className="block text-center items-center bg-black text-gray-400 py-5">
-          <p className="max-md:text-sm text-gray-400">
-            © 2024 Ethical Spectacle Research.
-          </p>
-          <p className="max-md:text-sm text-gray-400">
-            All rights reserved.
-          </p>
-        </div>
+        <p className="max-md:text-sm text-gray-400">
+          © 2024 Ethical Spectacle Research.
+        </p>
+        <p className="max-md:text-sm text-gray-400">All rights reserved.</p>
+      </div>
     </footer>
   );
 }

app/components/Home/Hero.js

@@ -1,16 +1,27 @@
 import React from "react";
 import { PiHandSwipeLeftDuotone } from "react-icons/pi";
 import { IoMdArrowForward } from "react-icons/io";
+import { Boxes } from "../ui/background-boxes";
 
 const Hero = () => {
   return (
     <div className="bg-white">
       <div className="scroll-container hide-scrollbar">
         <div className="h-72 w-full scroll-item md:px-20">
-          <h1 className="inline-block border border-black border-4 p-3 py-2 m-2 ml-10 mt-6 text-5xl whitespace-nowrap md:ml-20 md:mt-10">Ethical Spectacle Research ;)</h1>
-          <p className="text-black text-2xl p-5 pb-0 m-2 mt-5 leading-snug md:ml-10">Developers that write *clean* code.</p>
-          <h2 className="flex flex-row justify-end pr-5 text-xl md:hidden"><PiHandSwipeLeftDuotone className="mt-1 text-5xl"/>Swipe</h2>
-          <h2 className="flex flex-row justify-end pr-5 mr-10 text-xl md:flex hidden"><PiHandSwipeLeftDuotone className="mt-1 text-5xl"/>Scroll</h2>
+          <h1 className="inline-block border-black border-4 p-3 py-2 m-2 ml-10 mt-6 text-5xl whitespace-nowrap md:ml-20 md:mt-10">
+            Ethical Spectacle Research ;)
+          </h1>
+          <p className="text-black text-2xl p-5 pb-0 m-2 mt-5 leading-snug md:ml-10">
+            Developers that write *clean* code.
+          </p>
+          <h2 className="flex flex-row justify-end pr-5 text-xl md:hidden">
+            <PiHandSwipeLeftDuotone className="mt-1 text-5xl" />
+            Swipe
+          </h2>
+          <h2 className="flex flex-row justify-end pr-5 mr-10 text-xl md:flex">
+            <PiHandSwipeLeftDuotone className="mt-1 text-5xl" />
+            Scroll
+          </h2>
         </div>
         <div className="h-72 w-full md:w-1/2 scroll-item flex flex-col justify-end p-3 py-2">
           <p className="text-2xl font-semibold mb-2">Research.</p>
@@ -30,9 +41,16 @@ const Hero = () => {
             taking leadership roles, etc.
           </p>
         </div>
-        <a href="/account" className="h-72 w-full md:w-1/2 scroll-item p-3 py-2 bg-black flex">
-          <h1 className="text-5xl font-semibold mb-2 mt-2 text-white flex-col justify-end md:ml-5">Become a Member.</h1>
-          <div className="flex flex-col justify-end text-white text-8xl md:ml-32"><IoMdArrowForward /></div>
+        <a
+          href="/account"
+          className="h-72 w-full md:w-1/2 scroll-item p-3 py-2 bg-black flex"
+        >
+          <h1 className="text-5xl font-semibold mb-2 mt-2 text-white flex-col justify-end md:ml-5">
+            Become a Member.
+          </h1>
+          <div className="flex flex-col justify-end text-white text-8xl md:ml-32">
+            <IoMdArrowForward />
+          </div>
         </a>
       </div>
 

app/components/Home/NewHero.jsx

@@ -0,0 +1,62 @@
+"use client";
+import { Boxes } from "../ui/background-boxes";
+import { cn } from "../../../lib/utils";
+import { FaAnglesDown } from "react-icons/fa6";
+import { IoIosArrowForward } from "react-icons/io";
+
+function NewHero() {
+  return (
+    <main className="h-screen relative w-full overflow-hidden bg-black flex flex-col items-center justify-center">
+      <section className="absolute inset-0 w-full h-full bg-black z-20 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />
+      <Boxes />
+      <button
+        type="button"
+        className="p-2 bg-transparent border-pink-300 z-20 mb-4 rounded-full flex"
+      >
+        <a href="/leaderboard" className=" items-center flex">
+          <p className="text-pink-300">🎯 | Check out our leaderboards</p>
+          <IoIosArrowForward className="text-pink-300" />
+        </a>
+      </button>
+      <h1
+        className={cn(
+          "md:text-7xl text-6xl text-white relative z-20 font-semibold max-lg:px-10"
+        )}
+      >
+        Ethical Spectacle Research
+      </h1>
+      <p className="max-lg:text-left text-center mt-2 text-neutral-300 relative z-20 mx-auto px-40 max-lg:px-10">
+        We are an Arizona-based non-profit dedicated to software development,
+        community building, and the publication of ethical technology and social
+        research. Our judging panel featured four esteemed professionals,
+        including university professors, global ethical leaders, and venture
+        capitalists.
+      </p>
+
+      {/* <div className="flex gap-10 my-10">
+        <a
+          href="/leaderboard"
+          type="button"
+          className="inline-flex items-center justify-center focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none bg-white shadow  h-10 px-8 whitespace-pre md:flex group relative w-full gap-1 rounded-xl text-sm font-semibold tracking-tighter ring-offset-inherit transition-all duration-150 ease-in-out hover:ring-2 hover:ring-black hover:ring-offset-2 hover:ring-offset-current dark:hover:ring-neutral-50"
+        >
+          <p className="text-black">Sign Up</p>
+          <IoIosArrowForward className="text-black" />
+        </a>
+        <a
+          href="/leaderboard"
+          type="button"
+          className="inline-flex items-center justify-center focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none bg-white shadow  h-10 px-8 whitespace-pre md:flex group relative w-full gap-1 rounded-xl text-sm font-semibold tracking-tighter ring-offset-inherit transition-all duration-150 ease-in-out hover:ring-2 hover:ring-black hover:ring-offset-2 hover:ring-offset-current dark:hover:ring-neutral-50"
+        >
+          <p className="text-black">Research Projects</p>
+          <IoIosArrowForward className="text-black" />
+        </a>
+      </div> */}
+
+      <svg class="animate-bounce w-6 h-6  absolute bottom-0 mb-20">
+        <FaAnglesDown className="text-white text-2xl" />
+      </svg>
+    </main>
+  );
+}
+
+export default NewHero;

app/components/Home/ResearchProjectAgents.js

@@ -3,13 +3,17 @@ import { PiHandSwipeLeftDuotone } from "react-icons/pi";
 
 const AgentsProjectCarousel = () => {
   return (
-    <div className="bg-white">
+    <div className="bg-white mb-20">
       <div className="scroll-container hide-scrollbar flex md:justify-center justify-start">
         <div className="w-96 scroll-item border border-black border-l-2 px-5 pt-5">
           <h1 className="mt-2 md:mt-5">Project 002</h1>
           <h2 className="mt-3">Agent Network Effects</h2>
-          <p className="pl-5 mt-2">We're studying the ability of LLM agents to police network effects.</p>
-          <h2 className="flex flex-row justify-end pr-5 text-xl md:hidden"><PiHandSwipeLeftDuotone className="mt-5 text-4xl"/></h2>
+          <p className="pl-5 mt-2">
+            We're studying the ability of LLM agents to police network effects.
+          </p>
+          <h2 className="flex flex-row justify-end pr-5 text-xl md:hidden">
+            <PiHandSwipeLeftDuotone className="mt-5 text-4xl" />
+          </h2>
         </div>
 
         <div className="w-96 scroll-item border border-black  p-5">

app/components/Home/ResearchProjectBias.js

@@ -4,13 +4,18 @@ import { PiHandSwipeLeftDuotone } from "react-icons/pi";
 
 const BiasProjectCarousel = () => {
   return (
-    <div className="bg-white">
+    <div className="bg-white mt-20">
       <div className="scroll-container hide-scrollbar flex md:justify-center justify-start">
         <div className="w-full md:w-96 md:h-80 scroll-item border border-black border-l-2 px-5 pt-5">
           <h1 className="mt-2 md:mt-5">Project 001</h1>
           <h2 className="mt-3">Bias Detection</h2>
-          <p className="pl-5 mt-2">A text classification model trained to detect generalizations, unfairness, and stereotypes in text.</p>
-          <h2 className="flex flex-row justify-end pr-5 text-xl md:hidden"><PiHandSwipeLeftDuotone className="mt-3 text-4xl"/></h2>
+          <p className="pl-5 mt-2">
+            A text classification model trained to detect generalizations,
+            unfairness, and stereotypes in text.
+          </p>
+          <h2 className="flex flex-row justify-end pr-5 text-xl md:hidden">
+            <PiHandSwipeLeftDuotone className="mt-3 text-4xl" />
+          </h2>
         </div>
         <div className="w-full md:w-96 md:h-80 scroll-item border border-black  p-5">
           <p className="text-2xl font-semibold mb-2">Research.</p>