Merge pull request #14 from Debanjannnn/main

done with FAQ, footer and hero

src/components/FAQ/Faq.module.css

@@ -1,6 +1,6 @@
 .wrapper {
   padding-top: calc(var(--mantine-spacing-xl) * 2);
-  min-height: rem(820px);
+  min-height: rem(650px);
   background-image: radial-gradient(
     var(--mantine-color-blue-6) 0%,
     var(--mantine-color-blue-4) 100%

src/components/Footer/Footer.jsx

@@ -1,5 +1,5 @@
 import { Anchor, Group, ActionIcon, rem } from '@mantine/core';
-import { IconBrandTwitter, IconBrandYoutube, IconBrandInstagram, IconBrandLinkedin, IconBrandGithub } from '@tabler/icons-react';
+import { IconBrandInstagram, IconBrandLinkedin, IconBrandGithub } from '@tabler/icons-react';
 import classes from './Footer.module.css';
 import logo from "/src/assets/logo1.jpg";
 const links = [

src/components/Footer/Footer.module.css

@@ -1,6 +1,5 @@
 .footer {
-  margin-top: rem(120px);
-  border-top: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  /* border-top: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5)); */
   background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
 }
 

src/components/Hero/Hero.jsx

@@ -1,20 +1,22 @@
-import back from "/src/assets/back.png";
-import "./Hero.css";
+import { Text, Title, Button, Image } from '@mantine/core';
+// import image from './image.svg';
+import logo from "/src/assets/back.png";
+import classes from './Hero.module.css';
 
 const Hero = () => {
   return (
-    <div className="fullcontent" id="home">
-      <div className="left-content">
-        <p className="content">
-          CYBERSECURITY AND ETHICAL HACKING COMMUNITY FOR SNU STUDENTS
-        </p>
-        <button className="learn">Learn</button>
-      </div>
-      <div className="right-content">
-        <img className="image1" src={back} alt="Security Image" />
+    <div className={classes.wrapper}>
+      <div className={classes.body}>
+        <Title className={classes.title}>Cybersecurity and Ethical Hacking</Title>
+        <Text fw={500} fz="lg" mb={5}>
+          Cybersecurity and Ethical Hacking
+        </Text>
+        <div className={classes.controls}>
+          <Button className={classes.control}>Join</Button>
+        </div>
       </div>
+      <Image src={logo} className={classes.image} />
     </div>
   );
-};
-
-export default Hero;
+}
+export default Hero;

src/components/Hero/Hero.module.css

@@ -0,0 +1,65 @@
+.wrapper {
+  background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
+  color: white;
+  display: flex;
+  align-items: center; /* Vertically center the content */
+  justify-content: center; /* Horizontally center the content */
+  height: 30rem; /* Make the wrapper take full viewport height */
+  padding: calc(var(--mantine-spacing-xl) * 2);
+  background-color: var(--mantine-color-dark-8);
+
+
+  @media (max-width: 768px) {
+    flex-direction: column-reverse;
+    padding: var(--mantine-spacing-xl);
+  }
+}
+
+
+.image {
+  max-width: 40%;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    max-width: 100%;
+  }
+}
+
+.body {
+  padding-right: calc(var(--mantine-spacing-xl) * 4);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    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);
+  line-height: 1;
+  margin-bottom: var(--mantine-spacing-md);
+}
+
+.controls {
+  display: flex;
+  margin-top: var(--mantine-spacing-xl);
+}
+
+.inputWrapper {
+  width: 100%;
+  flex: 1;
+}
+
+.input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: 0;
+}
+
+.control {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

src/components/Navbar/Navbar.jsx

@@ -18,7 +18,7 @@ const Navbar = () => {
     useDisclosure(false);
 
   return (
-    <Box pb={80}>
+    <Box >
       <header className={classes.header}>
         <Group className={classes.appNameContainer} justify="space-around" h="100%">
           <Group>