From 68f604731666cbe19e1419b5fbde63062b945760 Mon Sep 17 00:00:00 2001 From: Tyler Yu Date: Wed, 9 Oct 2024 02:52:28 -0700 Subject: [PATCH] feat: about page redesign --- packages/web/src/App.css | 10 + .../src/components/AboutPage/AboutPage.jsx | 528 +++++++----------- .../web/src/components/AboutPage/StatCard.jsx | 131 +++++ packages/web/src/components/Home/Home.jsx | 2 +- packages/web/src/index.css | 4 + 5 files changed, 361 insertions(+), 314 deletions(-) create mode 100644 packages/web/src/components/AboutPage/StatCard.jsx diff --git a/packages/web/src/App.css b/packages/web/src/App.css index 74b5e05..db1ae0f 100644 --- a/packages/web/src/App.css +++ b/packages/web/src/App.css @@ -36,3 +36,13 @@ transform: rotate(360deg); } } + +html, body, #root { + height: 100%; + overflow-y: auto; +} + +body { + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/packages/web/src/components/AboutPage/AboutPage.jsx b/packages/web/src/components/AboutPage/AboutPage.jsx index 89dede3..976dfc6 100644 --- a/packages/web/src/components/AboutPage/AboutPage.jsx +++ b/packages/web/src/components/AboutPage/AboutPage.jsx @@ -1,5 +1,5 @@ import { React, useState, useEffect } from "react"; -import { Button, Text, Flex, Stack, Icon, Image } from "@chakra-ui/react"; +import { Button, Text, Flex, Stack, Icon, Image, Box} from "@chakra-ui/react"; import { ArrowBackIcon } from "@chakra-ui/icons"; import { useNavigate } from "react-router-dom"; import { Swiper, SwiperSlide } from "swiper/react"; @@ -16,12 +16,18 @@ import about2 from "../../assets/images/about2.png"; import about3 from "../../assets/images/about3.png"; import about4 from "../../assets/images/about4.png"; import { getItems, getLeaderboardCount } from "../../utils/ApiUtils"; +import { motion } from "framer-motion"; +import { useColorMode, useColorModeValue } from "@chakra-ui/react"; export default function AboutPage() { const navigate = useNavigate(); const [screenWidth, setScreenWidth] = useState(window.screen.width); const [data, setData] = useState([]); const [leaderboardCount, setLeaderboardCount] = useState(0); + const { colorMode } = useColorMode(); + const bgColor = useColorModeValue("gray.50", "gray.900"); + const textColor = useColorModeValue("gray.800", "gray.100"); + const accentColor = useColorModeValue("blue.500", "blue.300"); window.onresize = () => { setScreenWidth(window.screen.width); @@ -42,325 +48,221 @@ export default function AboutPage() { }, []); return ( - - - - - - - - We are ZotnFound - - - - - - - - - @ZotnFound! - - - - {data.filter((item) => item.islost).length} - - Lost Items - - - - {data.filter((item) => !item.islost).length} - - Found Items - - - - {data.filter((item) => item.isresolved).length} - - - Successful Returns - - - - - {leaderboardCount} - - Active Users - - - - - Explore how ZotnFound works - - - - - - - - Get Started - It's Simple & Easy - - - Log in with your UCI email and start listing lost & found - items! {"(No need to sign up or create an account)."} - - - - - - - - Navigate Around the Map - - - Effortlessly navigate UCI's interactive map to efficiently - search for lost and found items. Explore the digital landscape - with ease as you locate and reclaim belongings! - - - - - - - - Search for Lost & Found Items - - - Utilize the easy to use filter and search bar to look up - specific items based off their name, description, type, or the - time estimate of when the item was lost/found. - - - - - - - - Upload Your Items - Join the Community! - - - Show off the different items that you may have found or lost. - Participate in helping return items back to the community and - stay on a lookout for any items that may be yours! - - - - - - - - Contact Others and Connect - - - Meet people in the community and create new friends! Easily - contact people who may have found your items and vice versa. - - - - - - - - - - Origin of ZotnFound - - - Many people are constantly losing their belongings, whether that be - their phones, keys, or watter bottles. This is especially true for - UCI students on the UCI subreddit, where there are countless posts - being created about lost and found items. Due to this problem, we - decided to take matters into our own hands and created an Instagram - account to help lost items return back to their original owners. We - have so far helped over 10 people and gained over 300+ followers. - The process on Instagram was very time consuming due to us having to - manually go through each message and create a post on each - individual item that was sent. Due to these restraints, we decided - to create a platform that will allow people to post items that they - found and lost. These posts had descriptions on the item and where - they were last seen. - - - - - - + + + + ZotnFound + + + - - - What makes ZotnFound special? - - + - ZotnFound is an interactive lost and found website designed - exclusively for students and faculty on campus. With its - user-friendly platform, searchable databases, photo uploads, and - communication protocols, finding lost belongings becomes stress-free - and efficient. It's more than just a website; it fosters a sense of - community and inspires connections between students through the - shared experience of reuniting with their lost items. - - - - - + + We are ZotnFound + + + + + item.islost).length} + color="red.400" + /> + !item.islost).length} + color="green.400" + /> + item.isresolved).length} + color="yellow.400" + /> + + + + + + + + +