UI Enhancements

.gitignore

@@ -22,3 +22,5 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea/

src/components/ContributorsCard.jsx

@@ -45,9 +45,13 @@ import {
     Image,
     Text,
     useColorModeValue,
-    Flex,
-  } from "@chakra-ui/react";
+    Flex, Stat, StatLabel, StatNumber, StatHelpText, Link,
+} from "@chakra-ui/react";
   import { SocialIcon } from "react-social-icons";
+import {FaGithub} from "react-icons/fa";
+import {RiGitRepositoryCommitsLine} from "react-icons/ri";
+
+import {ExternalLinkIcon} from "@chakra-ui/icons";
 
   export default function ContributorsCard ({ data }) {
     const SelectBorderColor = () => {
@@ -61,6 +65,7 @@ import {
     return (
       <Box
         w={{ sm: "95%", md: "75%", lg: "50%" }}
+        style={{ marginBottom: "1rem" }}
         borderRadius="20"
         overflow="hidden"
         border="2px"
@@ -86,34 +91,34 @@ import {
               overflow="hidden"
               gap={3}
             >
-              <Image
-                src={data.img}
-                width="60px"
-                height="60px"
-                borderRadius="full"
-              />
-              <Text
-                w="100%"
-                display="flex"
-                direction="row"
-                alignItems="center"
-                justifyContent="start"
-                fontWeight="bold"
-                fontSize={{ sm: 14, md: 16, lg: 18 }}
-              >
-                {data.name}
-              </Text>
-              <AccordionIcon />
+                <Image
+                  src={data.img}
+                  width="60px"
+                  height="60px"
+                  borderRadius="full"
+                />
+                <Text
+                    w="100%"
+                    display="flex"
+                    direction="row"
+                    alignItems="center"
+                    justifyContent="start"
+                    fontWeight="bold"
+                    fontSize={{ sm: 14, md: 16, lg: 18 }}
+                >
+                    <Link href={data.github} isExternal>
+                        <ExternalLinkIcon mx='2px' as={FaGithub} /> {data.name}
+                    </Link>
+                </Text>
+                <Stat>
+                    <StatNumber fontSize={{ base: "xs", sm: "sm", md: "md" }} style={{display: "flex", flexDirection: "row", alignItems: "center", gap: "0.5rem"}}>
+                        <RiGitRepositoryCommitsLine />
+                        {data.contributions}
+                    </StatNumber>
+                    <StatHelpText fontSize={{ base: "xs", sm: "sm", md: "md" }}>Commits</StatHelpText>
+                </Stat>
             </AccordionButton>
           </Flex>
-          <AccordionPanel bgColor="transparent" pb={0}>
-            <Flex direction="row" alignItems="start" fontFamily="Syne">
-              <SocialIcon
-                url={data.github}
-                style={{ marginRight: "0.5rem" }}
-              />
-            </Flex>
-          </AccordionPanel>
         </AccordionItem>
       </Box>
     );

src/components/FAQCard.jsx

@@ -47,34 +47,60 @@ import {
 } from "@chakra-ui/react";
 
 export default function FAQCard({ data }) {
+  // Call useColorModeValue at the top level
+  const borderColor = useColorModeValue("#0050e0", "#f3f3f3");
+  const textColor = useColorModeValue("white", "black");
+  const panelBgColor = useColorModeValue("white", "#2D3748");
+  const hoverBgColor = useColorModeValue("#276ff8", "#d0d0d0");
+
   return (
-    <Box mx={"0.5rem"} mb={"1rem"}>
-      <AccordionItem border="none">
-        <AccordionButton
-          _hover={{ bgColor: "transparent" }}
-          margin="0 auto"
-          width="80vw"
-          textAlign="center"
-          marginBottom="0.3em"
-          color={useColorModeValue("black", "white")}
-          border={"solid 2px"}
-          borderRadius="1rem"
-          borderColor={useColorModeValue("#0050e0", "#f3f3f3")}
-          bgColor="transparent"
-        >
-          <Box flex="1" textAlign="center">
-            <Text fontFamily="Syne" as={"span"}>
-              {data.question}
-            </Text>
-          </Box>
-          <AccordionIcon />
-        </AccordionButton>
-        <AccordionPanel>
-          <Box margin="0 auto" width="80vw" fontFamily="Syne" border="none">
-            {data.panel}
-          </Box>
-        </AccordionPanel>
-      </AccordionItem>
-    </Box>
+      <Box
+          mx={{ base: "0.5rem", md: "1rem" }}
+          mb="1rem"
+          borderRadius="lg"
+          overflow="hidden"
+          boxShadow="md"
+      >
+        <AccordionItem border="none">
+          {({ isExpanded }) => (
+              <>
+                <AccordionButton
+                    _hover={{ bgColor: hoverBgColor }}
+                    bgColor={borderColor}
+                    color={textColor}
+                    border={`0px solid ${borderColor}`}
+                    borderRadius="md"
+                    p={4}
+                    textAlign="left"
+                    _focus={{ boxShadow: "outline" }}
+                    _expanded={{ borderColor }}
+                >
+                  <Box flex="1" textAlign="left">
+                    <Text
+                        fontFamily="Syne"
+                        fontSize={{ base: "md", md: "lg" }}
+                        fontWeight="bold"
+                        noOfLines={isExpanded ? 1 : 2}
+                    >
+                      {data.question}
+                    </Text>
+                  </Box>
+                  <AccordionIcon />
+                </AccordionButton>
+                <AccordionPanel
+                    bgColor={panelBgColor}
+                    p={4}
+                    fontFamily="Syne"
+                    fontSize={{ base: "sm", md: "md" }}
+                    borderTop={`0px solid ${borderColor}`} // Border at the top of the panel
+                    textAlign={"left"}
+                >
+                  {data.panel}
+                </AccordionPanel>
+              </>
+          )}
+        </AccordionItem>
+      </Box>
   );
 }
+

src/components/ProjectMembersCard.jsx

@@ -61,6 +61,7 @@ export default function ProjectMembersCard({ data }) {
   return (
     <Box
       w={{ sm: "95%", md: "75%", lg: "50%" }}
+      style={{ marginBottom: "1rem" }}
       borderRadius="20"
       overflow="hidden"
       border="2px"

src/pages/AboutSettingsPage.jsx

@@ -139,7 +139,7 @@ function AboutSettingsPage() {
       </Text>
       <Accordion allowToggle mt="1rem">
         {contributors.map((data) => (
-          <ContributorsCard data={data} key={data.name} />
+            data.name === "dependabot[bot]" ? null : <ContributorsCard data={data} key={data.name} />
         ))}
       </Accordion>
     </Box>