wind-explorer/ecoconnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home page hooray

Browse Source
This commit is contained in:
Adam C
2024-08-02 02:04:40 +08:00
parent 243e40b6ef
commit 0b80482a1c
4 changed files with 115 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
client/assets/hdb-bg.mp4 Normal file
View File

Binary file not shown.

2
client/src/components/SiteFooter.tsx
View File

@@ -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"

46
client/src/icons.tsx
View File

@@ -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>
);
};

90
client/src/pages/HomePage.tsx
View File

@@ -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">
<p>Home</p>
<Button
onPress={() => {
navigate("/signup");
}}
>
Sign up!
</Button>
<div className="w-full h-full flex flex-col">
<div className="relative w-full h-screen -mt-16 z-10 text-white flex flex-col">
<video
autoPlay
loop
muted
className="absolute object-cover w-full h-screen -z-10 brightness-50"
src="../assets/hdb-bg.mp4"
></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>
);
}