home page hooray

client/src/components/SiteFooter.tsx

@@ -20,7 +20,7 @@ export default function SiteFooter() {
             </div>
           </div>
           <div className="flex flex-col gap-8 *:mx-auto">
-            <p className="text-xl">Connecting the neighbourhood together</p>
+            <p className="text-xl">Connecting neighbourhood together</p>
             <div className="flex flex-col gap-6 *:mx-auto">
               <img
                 src="../assets/gov-footer.png"

client/src/icons.tsx

@@ -557,7 +557,7 @@ export const TrashDeleteIcon = () => {
       />
     </svg>
   );
-}
+};
 
 export const EmailIcon = () => {
   return (
@@ -575,8 +575,8 @@ export const EmailIcon = () => {
         d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"
       />
     </svg>
-  )
+  );
-}
+};
 
 export const InfoIcon = () => {
   return (
@@ -594,14 +594,15 @@ export const InfoIcon = () => {
         d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
       />
     </svg>
-  )
+  );
-}
+};
 
 export const TrophyIcon = () => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      fill="none" viewBox="0 0 24 24"
+      fill="none"
+      viewBox="0 0 24 24"
       stroke-width="1.5"
       stroke="currentColor"
       className="size-6"
@@ -612,22 +613,43 @@ export const TrophyIcon = () => {
         d="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 0 1-.982-3.172M9.497 14.25a7.454 7.454 0 0 0 .981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 0 0 7.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 0 0 2.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 0 1 2.916.52 6.003 6.003 0 0 1-5.395 4.972m0 0a6.726 6.726 0 0 1-2.749 1.35m0 0a6.772 6.772 0 0 1-3.044 0"
       />
     </svg>
-  )
+  );
-}
+};
 
 export const PaperAirplaneIcon = () => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      fill="none" viewBox="0 0 24 24"
+      fill="none"
+      viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="size-6">
+      className="size-6"
-
+    >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+        d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"
+      />
+    </svg>
+  );
+};
+
+export const ChevronDoubleDownIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m4.5 5.25 7.5 7.5 7.5-7.5m-15 6 7.5 7.5 7.5-7.5"
+      />
     </svg>
   );
 };

client/src/pages/HomePage.tsx

@@ -1,17 +1,87 @@
-import { Button } from "@nextui-org/react";
 import { useNavigate } from "react-router-dom";
+import { ChevronDoubleDownIcon } from "../icons";
+import { Card, ScrollShadow } from "@nextui-org/react";
+import { useEffect, useState } from "react";
+import { retrieveUserInformation } from "../security/users";
 export default function HomePage() {
   const navigate = useNavigate();
+  const [userInformation, setUserInformation] = useState<any>();
+
+  useEffect(() => {
+    retrieveUserInformation()
+      .then((value) => {
+        setUserInformation(value);
+      })
+      .catch();
+  });
   return (
-    <div className="w-full h-full">
+    <div className="w-full h-full flex flex-col">
-      <p>Home</p>
+      <div className="relative w-full h-screen -mt-16 z-10 text-white flex flex-col">
-      <Button
+        <video
-        onPress={() => {
+          autoPlay
-          navigate("/signup");
+          loop
-        }}
+          muted
-      >
+          className="absolute object-cover w-full h-screen -z-10 brightness-50"
-        Sign up!
+          src="../assets/hdb-bg.mp4"
-      </Button>
+        ></video>
+        <div className="p-10 w-full h-full flex flex-col justify-center">
+          <div className="flex flex-col gap-8">
+            <div className="w-60">
+              <img
+                src="../assets/ecoconnectFull.svg"
+                alt="ecoconnect logo"
+                className="invert hue-rotate-180"
+              />
+            </div>
+            <p className="text-5xl font-bold max-w-[600px]">
+              Connecting neighbourhoods together
+            </p>
+            <div className="flex flex-row gap-4">
+              <button
+                className="border-2 px-6 py-3 rounded-xl text-white border-primary-500 bg-primary-500 hover:bg-primary-400 active:bg-primary-700 transition-colors text-xl"
+                onClick={() => {
+                  navigate(userInformation ? "/springboard" : "/signup");
+                }}
+              >
+                {userInformation && "Go to the Dashboard"}
+                {!userInformation && "Get started"}
+              </button>
+              <button className="border-2 px-6 py-3 rounded-xl text-white border-neutral-500 backdrop-blur-lg hover:brightness-150 active:brightness-110 text-xl">
+                Learn more
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className="z-10 pb-16 mx-auto *:mx-auto flex flex-col gap-4 opacity-50">
+          <p>Scroll for more</p>
+          <ChevronDoubleDownIcon />
+        </div>
+      </div>
+      <div className=" flex flex-col">
+        <div className="flex flex-col gap-8">
+          <div className="flex flex-col gap-2">
+            <p className="text-3xl font-semibold px-8 pt-8">
+              Trending events right now
+            </p>
+            <ScrollShadow className="flex flex-row gap-6 w-full p-8">
+              {[...Array(8)].map((_, index) => (
+                <Card
+                  key={index}
+                  className="p-4 min-w-80 h-64 flex flex-col gap-4"
+                >
+                  <div className="border-2 rounded-xl h-full"></div>
+                  <div className="flex flex-col">
+                    <p className="text-xl font-bold">
+                      Sample event {index + 1}
+                    </p>
+                    <p>Description of the sample event {index + 1}</p>
+                  </div>
+                </Card>
+              ))}
+            </ScrollShadow>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }