Updated Footer, Homepage, and added Brand

app/account/components/MyAccount/MiniEvents.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
-const API_URL_PROD =
-  "https://api.ethicalspectacle.com/";
+const API_URL_PROD = "https://api.ethicalspectacle.com/";
 
 function MiniEvents() {
   const [events, setEvents] = useState([]);
@@ -38,37 +37,48 @@ function MiniEvents() {
   };
   return (
     <div className="bg-white p-5 py-10">
-      <h2 className="text-3xl font-bold text-gray-800 mb-6">Upcoming Events 📅</h2>
+      <h2 className="text-3xl font-bold text-gray-800 mb-6">
+        Upcoming Events 📅
+      </h2>
       {events.length > 0 ? (
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           {events.map((event, index) => (
-            <div key={index} className="border border-gray-300 rounded-lg p-4 flex flex-col">
-
-              <div className="flex justify-between items-apart"> 
-                <div className="block font-semibold text-xl text-left">{event.name}</div>
+            <div
+              key={index}
+              className="border border-gray-300 rounded-lg p-4 flex flex-col"
+            >
+              <div className="flex justify-between items-apart">
+                <div className="block font-semibold text-xl text-left">
+                  {event.name}
+                </div>
                 {event.url && (
-                  <a href={event.url} target="_blank" rel="noopener noreferrer" className="bg-white rounded-lg py-2 px-3 font-semibold mt-1 border border-black border-5">Sign Up :)</a>
+                  <a
+                    href={event.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bg-white rounded-lg py-2 px-3 font-semibold mt-1 border border-black border-5"
+                  >
+                    Sign Up :)
+                  </a>
                 )}
               </div>
 
-              <div className="text-sm text-gray-500 mt-2">{formatDate(event.date)}</div>
-              <div className="text-sm text-gray-500">{event.address}</div>
-
-              <div className="text-gray-600 mt-2">
-                {event.description}
+              <div className="text-sm text-gray-500 mt-2">
+                {formatDate(event.date)}
               </div>
+              <div className="text-sm text-gray-500">{event.address}</div>
 
-
-
+              <div className="text-gray-600 mt-2">{event.description}</div>
             </div>
           ))}
         </div>
       ) : (
-        <div className="text-gray-500">We'll post some events soon, miss you too😢</div>
+        <div className="text-gray-500">
+          We'll post some events soon, miss you too😢
+        </div>
       )}
     </div>
   );
-
 }
 
 export default MiniEvents;

app/brand/page.jsx

@@ -0,0 +1,131 @@
+import Image from "next/image";
+import whitelogo from "../assets/whitelogo.svg";
+
+function PrivacyPolicy() {
+  // Get the current date
+  const currentDate = new Date();
+
+  return (
+    <div className="bg-black h-[100vh] pt-40 px-10 grid grid-cols-2 max-md:grid-cols-1 gap-2 max-md:pt-10 max-md:px-5">
+      <div className="p-5 max-md:col-span-2 max-md:justify-self-center">
+        {/* <Image
+          src={whitelogo}
+          alt="Ethical Spectacle Research"
+          width={100}
+          height={100}
+          className="m-10"
+        /> */}
+        <h1 className="text-white mb-5 max-md:text-center">Privacy Policy</h1>
+        <h4 className="text-white max-md:text-center">Updated on {Date()}</h4>
+      </div>
+      <div
+        className="border-2 border-white p-5 overflow-auto"
+        style={{ maxHeight: "80vh" }}
+      >
+        <PrivacyPolicyText />
+      </div>
+    </div>
+  );
+}
+
+export default PrivacyPolicy;
+
+import React from "react";
+
+const PrivacyPolicyText = () => {
+  return (
+    <div className="text-white">
+      <p className="mb-4 text-white">
+        At Ethical Spectacle Research, we take your privacy seriously. This
+        privacy policy explains what personal data we collect, how we use and
+        protect it, and the rights you have concerning your personal
+        information.
+      </p>
+
+      <h2 className="text-xl font-bold mb-2">Information We Collect</h2>
+      <p className="mb-4 text-white">
+        We may collect personal information directly from you, such as your
+        name, email address, and other contact details when you interact with
+        us. We may also collect usage data automatically through technologies
+        like cookies when you visit our website.
+      </p>
+
+      <h2 className="text-xl font-bold mb-2 text-white">
+        How We Use Your Information
+      </h2>
+      <p className="mb-2 text-white">
+        We use the information we collect for legitimate business purposes, such
+        as:
+      </p>
+      <ul className="list-disc pl-5 mb-4 text-white">
+        <li>
+          <p className="text-white">
+            Communicating with you about our research activities and findings
+          </p>
+        </li>
+        <li>
+          <p className="text-white">Improving our website and services</p>
+        </li>
+        <li>
+          <p className="text-white">
+            Analyzing usage trends to better understand our audience
+          </p>
+        </li>
+        <li>
+          <p className="text-white">Complying with legal obligations</p>
+        </li>
+      </ul>
+      <p className="mb-4 text-white">
+        We will only process your personal data if we have a lawful basis for
+        doing so, such as your consent, contractual necessity, or our legitimate
+        interests.
+      </p>
+
+      <h2 className="text-xl font-bold mb-2 text-white">
+        Data Sharing and Retention
+      </h2>
+      <p className="mb-4 text-white">
+        We do not sell your personal data to third parties. We may share your
+        information with trusted service providers who perform services on our
+        behalf, under strict confidentiality obligations. We retain your data
+        for only as long as necessary for our legitimate business purposes.
+      </p>
+
+      <h2 className="text-xl font-bold mb-2 text-white">Data Security</h2>
+      <p className="mb-4 text-white">
+        We implement reasonable technical, administrative, and physical
+        safeguards to protect your personal information from unauthorized
+        access, use, or disclosure. However, no method of transmission over the
+        internet or data storage is 100% secure.
+      </p>
+
+      <h2 className="text-xl font-bold mb-2 text-white">Your Rights</h2>
+      <p className="mb-4 text-white">
+        You may have certain rights regarding your personal data, such as the
+        rights of access, rectification, erasure, restriction of processing,
+        data portability, and objection to processing. Contact us to exercise
+        these rights.
+      </p>
+
+      <h2 className="text-xl font-bold mb-2 text-white">
+        Changes to this Policy
+      </h2>
+      <p className="mb-4 text-white">
+        We may update this privacy policy from time to time by posting a new
+        version on our website. You should check this page occasionally to
+        ensure you agree with any changes.
+      </p>
+
+      <h2 className="text-xl font-bold mb-2 text-white">Contact Us</h2>
+      <p className="mb-4 text-white">
+        If you have any questions about this privacy policy or our data
+        practices, please contact us at maximus@ethicalspectacle.com.
+      </p>
+
+      <p className="text-white">
+        By using our website and services, you consent to the terms of this
+        privacy policy.
+      </p>
+    </div>
+  );
+};

app/components/Footer.js

@@ -8,35 +8,41 @@ 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="p-5 max-md:col-span-2 max-md:justify-self-center">
+    <footer className=" flex flex-col w-full ">
+      <div className="bg-black grid md:grid-cols-4 px-10 pt-10 max-md:p-5 gap-5 grid-cols-1 ">
+        <div className="p-10 max-md:col-span-2 max-md:justify-self-center">
           <Image
             src={whitelogo}
             alt="Ethical Spectacle Research"
             width={70}
             height={70}
           />
         </div>
-        
+
         <div>
           <h3 className="text-white text-xl my-2">Legals</h3>
-          <Link href="/">
+          <Link href="/brand">
             <p className="text-sm text-gray-400">Privacy Policy</p>
           </Link>
-          <Link href="/">
+          <Link href="/brand">
             <p className="text-sm text-gray-400">Terms & Conditions</p>
           </Link>
+          <Link href="/brand">
+            <p className="text-sm text-gray-400">Manifesto</p>
+          </Link>
         </div>
 
-        <p className="text-sm text-white max-md:col-span-2">
-          maximus@ethicalspectacle.com              
-        </p>
+        <div className="max-md:col-span-2">
+          <h3 className="text-white text-xl my-2">Contact</h3>
+          <p className="text-sm text-gray-400 max-md:col-span-2">
+            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="/">
+            <Link href="https://www.linkedin.com/company/ethicalspectacle/">
               <Image
                 src={linkedinplain}
                 width={30}
@@ -45,7 +51,7 @@ export default function Footer() {
                 className="text-gray-400"
               ></Image>
             </Link>
-            <Link href="/">
+            <Link href="https://www.instagram.com/ethical_spectacle/">
               <Image
                 src={instagramlogo}
                 width={30}
@@ -54,7 +60,7 @@ export default function Footer() {
                 className="text-gray-400"
               ></Image>
             </Link>
-            <Link href="/">
+            <Link href="https://huggingface.co/ethical-spectacle">
               <Image
                 src={huggingfacelogo}
                 width={30}
@@ -63,7 +69,7 @@ export default function Footer() {
                 className="text-gray-400"
               ></Image>
             </Link>
-            <Link href="/">
+            <Link href="https://www.meetup.com/ethical-spectacle-research/">
               <Image
                 src={meetuplogo}
                 width={30}
@@ -76,13 +82,11 @@ export default function Footer() {
         </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/BlackHorizontalLine.jsx

@@ -0,0 +1,7 @@
+function BlackHorizontalLine() {
+  return (
+    <div className="flex flex-row justify-start overflow-hidden h-15 items-center bg-black py-5"></div>
+  );
+}
+
+export default BlackHorizontalLine;

app/components/Home/Hero.js

@@ -4,44 +4,54 @@ import { IoMdArrowForward } from "react-icons/io";
 
 const Hero = () => {
   return (
-    <div className="bg-white">
+    <div className="bg-white sm:bg-black">
       <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 sm:text-pink-300 sm:border-white text-pink-300">
+            Ethical Spectacle Research ;)
+          </h1>
+          <p className="text-black text-2xl p-5 pb-0 m-2 mt-5 leading-snug md:ml-10 sm:text-white">
+            Developers that write *clean* code.
+          </p>
+          <h2 className="flex flex-row justify-end pr-5 text-xl md:hidden hidden">
+            <PiHandSwipeLeftDuotone className="mt-1 text-5xl" />
+            Swipe
+          </h2>
+          <h2 className="flex flex-row justify-end pt-5 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>
-          <p className="mb-5">
+          <p className="text-2xl font-semibold mb-2 sm:text-white">Research.</p>
+          <p className="mb-5 sm:text-white">
             We do AI/ML research in nuanced contexts, publishing research papers
             and open source tools for developers.
           </p>
         </div>
         <div className="h-72 w-full md:w-1/2 scroll-item flex flex-col justify-end pl-5 p-3 py-2 md:px-20">
           {/* can someone add something here, fill the space, top right aligned */}
-          <p className="text-2xl font-semibold mb-2 mt-2">Community.</p>
-          <p className="mb-2">
+          <p className="text-2xl font-semibold mb-2 mt-2 sm:text-white">
+            Community.
+          </p>
+          <p className="mb-2 sm:text-white">
             We run events for the developers and entrepreneurs of Phoenix.
           </p>
-          <p className="mb-5">
+          <p className="mb-5 sm:text-white">
             Climb our leaderboard by attending events, winning hackathons,
             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>
-      </div>
-
-      {/* Developer Leaderboard Banner */}
-      <div className="flex flex-row justify-start overflow-hidden h-15 items-center bg-black py-3">
-        <a href="/leaderboard">
-          <h1 className="whitespace-nowrap text-white text-lg py-3 px-2 ml-5 text-right">
-            🤖 check our leaderboard —&gt;
+        <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>
     </div>

app/components/Home/LeaderBoardCheckOut.js

@@ -0,0 +1,13 @@
+function LeaderBoardCheckOut() {
+  return (
+    <div className="flex flex-row justify-start overflow-hidden h-15 items-center bg-black py-3">
+      <a href="/leaderboard">
+        <h1 className="whitespace-nowrap text-white text-lg py-3 px-10 ml-5 text-right hover:text-pink-300">
+          🤖 check our leaderboard —&gt;
+        </h1>
+      </a>
+    </div>
+  );
+}
+
+export default LeaderBoardCheckOut;