fix hero, faq, about

src/components/About/About.jsx

@@ -1,24 +1,28 @@
 import { Text, Title, Button, Image } from "@mantine/core";
 import image from "/src/assets/aboutpic.jpeg";
 import classes from "./About.module.css";
+import { Link } from "react-router-dom";
 
 const About = () => {
   return (
     <div id="about" className={classes.wrapper}>
       <div className={classes.body}>
-        <Title className={classes.title}>About Us</Title>
-        <Text fz="md" c="dimmed">
+        <Title className={classes.title} order={1}>
+          About Us
+        </Title>
+        <Text fz="lg">
           Welcome to ZeroDay Alliance, where SNU students passionate about
           cybersecurity and ethical hacking come together to learn about the
           latest security trends and zero-day vulnerabilities, collaborate on
           projects and challenges, share resources and tools, discuss news and
           strategies, and network with future professionals in the field.
         </Text>
-
         <div className={classes.controls}>
-          <Button className={classes.control1} size="lg">
-            Join The Community
-          </Button>
+          <Link to="/teams">
+            <Button className={classes.control1} size="md">
+              Meet Our Teams
+            </Button>
+          </Link>
         </div>
       </div>
       <Image src={image} className={classes.image} />

src/components/FAQ/Faq.jsx

@@ -1,40 +1,40 @@
-import { Title, Container, Accordion, ThemeIcon, rem } from '@mantine/core';
-import { IconPlus } from '@tabler/icons-react';
-import classes from './Faq.module.css';
+import { Title, Container, Accordion, ThemeIcon, rem } from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
+import classes from "./Faq.module.css";
 
 const faqs = [
   {
-    question: 'What is the purpose of the Cybersecurity Community?',
+    question: "What is the purpose of the Cybersecurity Community?",
     answer:
-      'The community aims to bring together students interested in cybersecurity to learn, share knowledge, and work on projects focused on protecting information systems and networks.',
+      "The community aims to bring together students interested in cybersecurity to learn, share knowledge, and work on projects focused on protecting information systems and networks.",
   },
   {
-    question: 'Who can join the community?',
+    question: "Who can join the community?",
     answer:
-      'Any student from our college, regardless of major or experience level, can join. We welcome both beginners and advanced members.',
+      "Any student from our college, regardless of major or experience level, can join. We welcome both beginners and advanced members.",
   },
   {
-    question: 'How do I join the community?',
+    question: "How do I join the community?",
     answer:
-      'You can join by attending our events, signing up on our official website, or contacting one of the community leaders.',
+      "You can join by attending our events, signing up on our official website, or contacting one of the community leaders.",
   },
   {
-    question: 'What activities does the community organize?',
+    question: "What activities does the community organize?",
     answer:
-      'We organize workshops, hackathons, guest lectures, and Capture The Flag (CTF) competitions.',
+      "We organize workshops, hackathons, guest lectures, and Capture The Flag (CTF) competitions.",
   },
   {
-    question: 'Do I need prior experience in cybersecurity to participate?',
+    question: "Do I need prior experience in cybersecurity to participate?",
     answer:
-      'No prior experience is needed! Our events cater to all skill levels, so beginners are welcome.',
+      "No prior experience is needed! Our events cater to all skill levels, so beginners are welcome.",
   },
 ];
 
 const Faq = () => {
   return (
-    <div className={classes.wrapper} id='faq'>
+    <div className={classes.wrapper} id="faq">
       <Container size="sm">
-        <Title ta="center" className={classes.title}>
+        <Title ta="center" className={classes.title} order={1}>
           Frequently Asked Questions
         </Title>
 
@@ -45,22 +45,29 @@ const Faq = () => {
           variant="separated"
           disableChevronRotation
           styles={{
-            label: { color: 'var(--mantine-color-black)' },
+            label: { color: "var(--mantine-color-black)" },
             item: {
               border: 0,
-              backgroundColor: 'white', // Add white background here
+              backgroundColor: "white", // Add white background here
               borderRadius: rem(8),
               padding: `${rem(12)} ${rem(16)}`, // Add padding for a better look
             },
           }}
           chevron={
             <ThemeIcon radius="xl" className={classes.gradient} size={26}>
-              <IconPlus style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
+              <IconPlus
+                style={{ width: rem(18), height: rem(18) }}
+                stroke={1.5}
+              />
             </ThemeIcon>
           }
         >
           {faqs.map((faq, index) => (
-            <Accordion.Item className={classes.item} value={`faq-${index}`} key={index}>
+            <Accordion.Item
+              className={classes.item}
+              value={`faq-${index}`}
+              key={index}
+            >
               <Accordion.Control>{faq.question}</Accordion.Control>
               <Accordion.Panel>{faq.answer}</Accordion.Panel>
             </Accordion.Item>

src/components/FAQ/Faq.module.css

@@ -14,7 +14,6 @@
 
 .title {
   color: var(--mantine-color-white);
-  font-size: 52px;
   font-family:
     Greycliff CF,
     var(--mantine-font-family);
@@ -70,4 +69,4 @@
     display: block;
     width: 100%;
   }
-}
+}

src/components/Hero/Hero.jsx

@@ -2,26 +2,26 @@ import { Text, Title, Button, Image, Box } from "@mantine/core";
 // import image from './image.svg';
 import logo from "/src/assets/back.png";
 import classes from "./Hero.module.css";
+import { Link } from "react-router-dom";
 
 const Hero = () => {
   return (
     <div className={classes.wrapper}>
       <div className={classes.body}>
-        <Title className={classes.title}>
-        Securing Tomorrow, <br /> One Vulnerability at a Time.
+        <Title className={classes.title} order={1}>
+          Securing Tomorrow, <br /> One Vulnerability at a Time.
+        </Title>
+        <Title fw={500} order={4} c="dimmed" mb={5}>
+          Join ZeroDay Alliance SNU and pioneer the future of Cybersecurity.
         </Title>
-        <Text fw={500} fz="lg" mb={5}>
-        Join ZeroDay Alliance SNU and pioneer the future of Cybersecurity.
-
-        </Text>
         <div className={classes.controls}>
-          <Button className={classes.control}>Join</Button>
-
+          <Link to="/#about">
+            <Button size="lg">Learn More</Button>
+          </Link>
         </div>
       </div>
       <Image src={logo} className={classes.image} />
     </div>
-
   );
 };
 export default Hero;

src/components/Hero/Hero.module.css

@@ -17,30 +17,39 @@
 .image {
   max-width: 40%;
 
-  @media (max-width: 768px) { /* Adjusted for consistency */
+  @media (max-width: 768px) {
+    /* Adjusted for consistency */
     display: none; /* Hide image on mobile */
   }
 }
 
 .body {
   padding-right: calc(var(--mantine-spacing-xl) * 4);
 
-  @media (max-width: 768px) { /* Adjusted for consistency */
+  @media (max-width: 768px) {
+    /* Adjusted for consistency */
     padding-right: 0;
     margin-top: var(--mantine-spacing-xl);
   }
 }
 
 .title {
   color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
-  font-family: Greycliff CF, var(--mantine-font-family);
+  font-family:
+    Greycliff CF,
+    var(--mantine-font-family);
   line-height: 1;
   margin-bottom: var(--mantine-spacing-md);
 }
 
 .controls {
   display: flex;
   margin-top: var(--mantine-spacing-xl);
+  text-decoration: none;
+}
+
+a {
+  text-decoration: none;
 }
 
 .inputWrapper {