Redesign/Refacoting go brr

src/components/Accordion.js

@@ -0,0 +1,57 @@
+import React from "react";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
+  Box,
+  Heading,
+} from "@chakra-ui/react";
+
+const AccordionComponent = () => {
+  return (
+    <Accordion defaultIndex={[0]} allowMultiple>
+      <Heading
+        mt="0"
+        mb="5"
+        size="2xl"
+        fontWeight="extrabold"
+        bgClip="text"
+        bgGradient="linear(to-r, yellow.500, pink.300, purple.500)"
+      >
+        FAQ
+      </Heading>
+      <AccordionItem>
+        <h2>
+          <AccordionButton>
+            <Box flex="1" textAlign="left">
+              Why it's useful
+            </Box>
+            <AccordionIcon />
+          </AccordionButton>
+        </h2>
+        <AccordionPanel pb={4}>
+          It gives you an overall insight of a person's GitHub profile in one
+          place
+        </AccordionPanel>
+      </AccordionItem>
+      <AccordionItem>
+        <h2>
+          <AccordionButton>
+            <Box flex="1" textAlign="left">
+              How are the points being calculated
+            </Box>
+            <AccordionIcon />
+          </AccordionButton>
+        </h2>
+        <AccordionPanel pb={4}>
+          There are various parameters keeping in mind calculating the most
+          accurate result. We are still working on more parameters.
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export default AccordionComponent;

src/components/Footer.js

@@ -0,0 +1,77 @@
+import React from "react";
+import {
+  Box,
+  Stack,
+  Center,
+  Image,
+  IconButton,
+  Text,
+  ButtonGroup,
+} from "@chakra-ui/react";
+import { FaTwitter, FaGithub, FaLinkedin, FaLink } from "react-icons/fa";
+
+const Footer = () => {
+  return (
+    <Box
+      as="footer"
+      role="contentinfo"
+      mt="auto"
+      py="12"
+      px={{ base: "4", md: "8" }}
+      color="white"
+    >
+      <Stack spacing={8}>
+        <Center>
+          <Image
+            alignSelf="flex-center"
+            borderRadius="100px"
+            align="center"
+            justify="center"
+            boxSize="90px"
+            boxShadow="inner"
+            src="https://i.ibb.co/b29dG1G/JEo6-Jh-S1-400x400.jpg"
+            alt="gourav image"
+          />
+        </Center>
+        <Stack direction="row" mt="5" align="center" justify="center">
+          <ButtonGroup boxShadow="inner">
+            <IconButton
+              boxShadow="inner"
+              onClick={() =>
+                window.open("https://twitter.com/Varougm", "_blank")
+              }
+              icon={<FaTwitter fontSize="30px" />}
+            />
+            <IconButton
+              boxShadow="inner"
+              onClick={() =>
+                window.open("https://github.com/varuogm", "_blank")
+              }
+              icon={<FaGithub fontSize="30px" />}
+            />
+            <IconButton
+              boxShadow="inner"
+              onClick={() =>
+                window.open(
+                  "https://in.linkedin.com/in/gourav-majee-724b37188",
+                  "_blank"
+                )
+              }
+              icon={<FaLinkedin fontSize="30px" />}
+            />
+            <IconButton
+              boxShadow="inner"
+              onClick={() => window.open("https://varuog.xyz/", "_blank")}
+              icon={<FaLink fontSize="30px" />}
+            />
+          </ButtonGroup>
+        </Stack>
+        <Stack direction="column" alignItems="center" mt="10">
+          <Text fontSize="sm">© 2024 Gourav Maje. All Rights Reserved.</Text>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+};
+
+export default Footer;

src/components/Header.js

@@ -0,0 +1,45 @@
+import React from "react";
+import {
+  VStack,
+  IconButton,
+  Heading,
+  Text,
+  Skeleton,
+  useColorMode,
+} from "@chakra-ui/react";
+
+import { FaMoon } from "react-icons/fa";
+import { FiZap } from "react-icons/fi";
+import WelcomeHeaderComponent from "./atoms/WelcomeHeader";
+
+const HeaderComponent = ({ toggleColorMode, colorMode }) => {
+  return (
+    <>
+      <VStack direction="0" p={4}>
+        <IconButton
+          icon={colorMode === "light" ? <FiZap /> : <FaMoon />}
+          isRound="true"
+          size="lg"
+          alignSelf="flex-end"
+          onClick={toggleColorMode}
+          boxShadow="inner"
+          p="6"
+        />
+
+        <Heading mt="0" mb="5" size="2xl" fontWeight="extrabold" bgClip="text">
+          Welcome to Git-CAT
+          <br />
+          <Text ml={10} fontSize="m" fontWeight="bold" color="cyan.500">
+            Tells you about your github stats
+          </Text>
+        </Heading>
+
+        <br />
+        <Skeleton startColor="pink.500" endColor="orange.500" height="7px" />
+      </VStack>
+      <WelcomeHeaderComponent />
+    </>
+  );
+};
+
+export default HeaderComponent;