Merge pull request #12 from monaminandy/home-page

Home page added

src/components/Hero/Hero.css

@@ -0,0 +1,69 @@
+.content {
+  color: white;
+}
+
+.fullcontent {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
+}
+
+.left-content {
+  font-size: 30px;
+  padding-left: 20px;
+
+  width: 600px;
+  font-weight: bold;
+}
+.learn {
+  width: 120px;
+  height: 55px;
+  border: solid;
+  border-radius: 50px;
+  border-color: #4adcf7;
+  background-color: #07172600;
+  color: white;
+  font-size: 20px;
+  font-weight: bold;
+  border-width: 3px;
+  transition: color 0.15s;
+}
+
+.learn:hover {
+  color: #4adcf7;
+}
+.image1 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.right-content {
+  display: flex;
+  width: 300px;
+  height: 300px;
+  align-items: center;
+  justify-content: center;
+  padding-right: 20px;
+}
+
+@media (max-width: $mantine-breakpoint-sm) {
+  .left-content {
+    font-size: 15px;
+    padding-left: 10px;
+    width: 300px;
+  }
+  .right-content {
+    width: 200px;
+    height: 200px;
+  }
+  .fullcontent {
+    justify-content: space-between;
+  }
+  .learn {
+    width: 90px;
+    height: 40px;
+    font-size: 15px;
+  }
+}

src/components/Hero/Hero.jsx

@@ -0,0 +1,20 @@
+import back from "/src/assets/back.png";
+import "./Hero.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>
+    </div>
+  );
+};
+
+export default Hero;

src/components/Hero/index.jsx

@@ -0,0 +1,2 @@
+import Hero from "./Hero";
+export default Hero;

src/components/Navbar/Navbar.jsx

@@ -1,98 +1,30 @@
 import {
   Group,
   Button,
-  UnstyledButton,
-  Text,
-  ThemeIcon,
   Divider,
   Box,
   Burger,
   Drawer,
   ScrollArea,
   rem,
-  useMantineTheme,
 } from "@mantine/core";
 import logo from "/src/assets/logo1.jpg";
 import { useDisclosure } from "@mantine/hooks";
 
-import {
-  IconNotification,
-  IconCode,
-  IconBook,
-  IconChartPie3,
-  IconFingerprint,
-  IconCoin,
-} from "@tabler/icons-react";
 import classes from "./Navbar.module.css";
 
-const mockdata = [
-  {
-    icon: IconCode,
-    title: "Open source",
-    description: "This Pokémon’s cry is very loud and distracting",
-  },
-  {
-    icon: IconCoin,
-    title: "Free for everyone",
-    description: "The fluid of Smeargle’s tail secretions changes",
-  },
-  {
-    icon: IconBook,
-    title: "Documentation",
-    description: "Yanma is capable of seeing 360 degrees without",
-  },
-  {
-    icon: IconFingerprint,
-    title: "Security",
-    description: "The shell’s rounded shape and the grooves on its.",
-  },
-  {
-    icon: IconChartPie3,
-    title: "Analytics",
-    description: "This Pokémon uses its flying ability to quickly chase",
-  },
-  {
-    icon: IconNotification,
-    title: "Notifications",
-    description: "Combusken battles with the intensely hot flames it spews",
-  },
-];
-
 const Navbar = () => {
   const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] =
     useDisclosure(false);
-  const [linksOpened, { toggle: toggleLinks }] = useDisclosure(false);
-  const theme = useMantineTheme();
-
-  const links = mockdata.map((item) => (
-    <UnstyledButton className={classes.subLink} key={item.title}>
-      <Group wrap="nowrap" align="flex-start">
-        <ThemeIcon size={34} variant="default" radius="md">
-          <item.icon
-            style={{ width: rem(22), height: rem(22) }}
-            color={theme.colors.blue[6]}
-          />
-        </ThemeIcon>
-        <div>
-          <Text size="sm" fw={500}>
-            {item.title}
-          </Text>
-          <Text size="xs" c="dimmed">
-            {item.description}
-          </Text>
-        </div>
-      </Group>
-    </UnstyledButton>
-  ));
 
   return (
-    <Box pb={120}>
+    <Box pb={80}>
       <header className={classes.header}>
-        <Group justify="space-around" h="100%">
+        <Group className={classes.appNameContainer} justify="space-around" h="100%">
           <Group>
-            <img className={classes.image11} src={logo} alt="Logo" />
+            <img className={classes.logo} src={logo} alt="Logo" />
             <h3>
-              <a href="/" className={classes.header1}>
+              <a href="/" className={classes.appName}>
                 ZERODAY ALLIANCE
               </a>
             </h3>
@@ -149,10 +81,10 @@ const Navbar = () => {
             Events
           </a>
           <a href="#" className={classes.link}>
-            Team
+            Teams
           </a>
           <a href="#" className={classes.link}>
-            FAQS
+            FAQs
           </a>
           <a href="#" className={classes.link}>
             Contact

src/components/Navbar/Navbar.module.css

@@ -1,20 +1,24 @@
 .header {
-  height: rem(80px);
+  height: rem(60px);
   padding-left: var(--mantine-spacing-md);
   padding-right: var(--mantine-spacing-md);
   border-bottom: rem(1px) solid
     light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
   background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
 }
 
-.image11 {
-  height: 50px;
-  width: 50px;
+.logo {
+  height: 30px;
+  width: 30px;
   border: none;
-  border-radius: 50px;
+  border-radius: 50%;
 }
 
-.header1 {
+.appName {
   text-decoration: none;
   color: white;
 }
@@ -41,8 +45,8 @@
 
   @mixin hover {
     background-color: light-dark(
-      var(--mantine-color-gray-0),
-      var(--mantine-color-dark-6)
+      var(--mantine-color-gray-4),
+      var(--mantine-color-dark-3)
     );
     color: black;
   }
@@ -78,7 +82,3 @@
   border-top: rem(1px) solid
     light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
 }
-
-.m_d4fb9cad {
-  background-color: white;
-}

src/pages/Home/Home.jsx

@@ -1,16 +1,17 @@
 import { MantineProvider} from "@mantine/core";
 import "@mantine/core/styles.css";
 import Navbar from "../../components/Navbar";
+import Hero from "../../components/Hero";
 import Footer from "../../components/Footer";
 import Faq from "../../components/FAQ";
 
-
 function Home() {
   return (
     <MantineProvider>
       <Navbar />
-      <Faq/>
-      <Footer/>
+      <Hero />
+      <Faq />
+      <Footer />
     </MantineProvider>
   );
 }