[FIX] Home-Page

package.json

@@ -12,7 +12,7 @@
  "react-dom": "^18.2.0",
  "react-icons": "^4.6.0",
  "react-router-dom": "^6.4.2",
- "react-scripts": "^2.1.3",
+ "react-scripts": "^5.0.1",
  "web-vitals": "^2.1.4"
  },
  "scripts": {

src/v1/css/base/root.css

@@ -8,6 +8,7 @@
  --clr-gray: #F3F5F7;
  --clr-white: #FFFFFF;
  --clr-blue: #5942E9;
+
 
 
 

src/v1/css/utlities/link-primary.css

@@ -5,7 +5,7 @@
  font-weight: 400;
  font-size: 18px;
  line-height: 145%;
- padding: 12px 24px;
+ padding: 20px 24px 12px 24px;
  border-radius: 4px;
 }
 

src/v2/components/common/footer/index.css

@@ -34,7 +34,9 @@
  margin-top: 20px;
 
 }
-
+.footer-links span{
+ font-weight:600;
+}
 .footer-links p{
  color:white;
  text-align: center;
@@ -87,6 +89,10 @@
  padding: 16px;
  text-decoration: none;
 }
+.footer-links-3 img {
+ width: 30px;
+ height:30px;
+ }
 
 
 

src/v2/components/common/footer/index.jsx

@@ -1,12 +1,13 @@
 import React from "react";
 import Logo from "../../../assets/common/logo.svg";
-import Youtube from "../../../assets/home/Youtube.png";
+import Youtube from "../../../assets/home/youtube.png";
 import Discord from "../../../assets/home/Discord.png";
 import Github from "../../../assets/home/Github.png";
 import Instagram from "../../../assets/home/Instagram.png";
 import Twitter from "../../../assets/home/Twitter.png";
 import LinkedIn from "../../../assets/home/Linkedin.png";
 import Telegram from "../../../assets/home/Telegram.png";
+import Gmail from "../../../assets/home/Gmail.png";
 
 import "./index.css";
 
@@ -110,11 +111,20 @@ const Footer = () => {
  <img src={Github} alt="twitter" />
  </a>
  </li>
+ <li>
+ <a
+ href="mailto:[email protected]"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <img src={Gmail} alt="twitter" />
+ </a>
+ </li>
  </ul>
  </div>
  </div>
  <div className="footer-links">
- <p> [email protected] </p>
+ <p>© Copyrights by <span> WeMakeDevs </span>All Rights Reserved. </p>
  </div>
  <br />
  <br />

src/v2/components/common/navbar/data.js

@@ -28,7 +28,7 @@ export const navLinks = [
  external: true,
  },
  {
- name: "Hackathon",
+ name: "Join",
  href: "https://github.com/wemakedevs/roadmaps",
  external: true,
  },

src/v2/components/common/navbar/index.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import Logo from "../../../assets/common/logo.svg";
 import YoutubeBg from "../../../assets/navbar/youtube-bg.png";
 import YoutubePlay from "../../../assets/navbar/youtube-play.png";
-import MenuIcon from "../../../assets/navbar/menu.png";
+import MenuIcon from "../../../assets/navbar/Menu.png";
 import styles from "./index.module.css";
 import { navLinks } from "./data";
 import { useState } from "react";
@@ -25,7 +25,7 @@ const Navbar = () => {
  if (link.active) {
  return (
  <li className={styles["nav-active"]}>
- <a href={link.href} target="_blank" rel="noopener noreferrer">
+ <a href={link.href} rel="noopener noreferrer">
  {link.name}
  </a>
  </li>
@@ -40,31 +40,11 @@ const Navbar = () => {
  );
  })}
  <li>
- <div
- className={`${styles["nav-youtube"]} ${styles["nav-youtube-sm"]}`}
- >
- <a
- href="https://www.youtube.com/c/KunalKushwaha"
- target="_blank"
- rel="noopener noreferrer"
- >
- Youtube
- </a>
-
- </div>
+
  </li>
  </ul>
  </nav>
- <div className={styles["nav-youtube"]}>
- <a
- href="https://www.youtube.com/c/KunalKushwaha"
- target="_blank"
- rel="noopener noreferrer"
- >
- Youtube
- </a>
-
- </div>
+
  <img
  className={styles["nav-menu"]}
  src={MenuIcon}
@@ -75,4 +55,4 @@ const Navbar = () => {
  );
 };
 
-export default Navbar;
+export default Navbar;

src/v2/components/common/navbar/index.module.css

@@ -6,6 +6,7 @@
  margin: 1rem auto 1rem auto;
  max-width: 1400px;
  padding: 0 1rem;
+ z-index: 2;
 }
 
 .nav-logo {

src/v2/components/home/about/cards.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import styles from './index.module.css'
+import RightArrow from '../../../assets/arrows/right-arrow.png'
+
+const cards = () => {
+ return (
+ <section className={styles["about-cards"]}>
+ <div className={styles["main-about"]}>
+ <div className={styles["about-card-1"]}>
+ <h1> Education </h1>
+ <span><hr className={styles["about-card-border"]}></hr></span>
+ <p> We provide FREE hands-on training in various fields of computer science and have an inclusive community focussing on a learn by doing approach.</p>
+ <div className={styles["about-link"]}>
+ <button>
+ <a
+ href="https://www.youtube.com/@KunalKushwaha/playlists?view=50&sort=dd&shelf_id=3"
+ className={styles["link-primary"]}
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ Explore Courses
+ <img src={RightArrow} alt="right arrow" />
+ </a>
+ </button>
+
+ </div>
+ </div>
+ <div className={styles["about-card-2"]}>
+ <h1> Events </h1>
+ <span><hr className={styles["about-card-border"]}></hr></span>
+ <p> We provide FREE hands-on training in various fields of computer science and have an inclusive community focussing on a learn by doing approach.</p>
+ <div className={styles["about-link"]}>
+ <button>
+ <a
+ href="https://github.com/WeMakeDevs/events"
+ className={styles["link-primary"]}
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ Explore our Events
+ <img src={RightArrow} alt="right arrow" />
+ </a>
+ </button>
+
+ </div>
+ </div>
+ <div className={styles["about-card-3"]}>
+ <h1> Mentorship </h1>
+ <span><hr className={styles["about-card-border"]}></hr></span>
+ <p> We provide FREE hands-on training in various fields of computer science and have an inclusive community focussing on a learn by doing approach.</p>
+ <div className={styles["about-link"]}>
+ <button>
+ <a
+ href="https://github.com/WeMakeDevs/roadmaps"
+ className={styles["link-primary"]}
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ Explore our Roadmaps
+ <img src={RightArrow} alt="right arrow" />
+ </a>
+ </button>
+
+ </div>
+ </div>
+ </div>
+ </section>
+ )
+}
+
+export default cards

src/v2/components/home/about/index.jsx

@@ -1,69 +1,86 @@
-import React from 'react'
+import React from "react";
+import AboutImage from "../../../assets/home/aboutus.png";
+import RightArrow from "../../../assets/arrows/right-arrow.png";
+import RightSingleArrow from "../../../assets/arrows/right-single-arrow.png";
 import styles from "./index.module.css";
-import Discord from "../../../assets/home/Discord.png"
-import Handson from "../../../assets/home/Handson.png"
-import Diamond from "../../../assets/home/Diamond.png"
-import Free from "../../../assets/home/free.png"
-import Telegram from "../../../assets/home/Telegram.png"
+import Cards from './cards.jsx'
 
-const about = () => {
+const About = () => {
  return (
- <section className={styles["about-containers"]}>
- <h1> Our Foundations </h1>
- <div className={styles["about-container"]}>
- <div className={styles["about-cont-1"]}>
- <p> Students & professionals learning 
- modern technologies </p>
- <br />
- <p> Regardless of Technical & 
- Non-Technical Backgrounds </p>
- <br />
- <p> Irrespective of college, branch.
- We are here to help you out. </p>
- </div>
- <div className={styles["about-cont-2"]}>
- <div className={styles["about-cont-2-a"]}>
- <p> Hands-on-training 
- </p>
- <img className={styles["about-cont-2-img"]} src={Handson} alt="handson" />
- </div>
- <div className={styles["about-cont-2-b"]}>
- <p> FREE Mentorship </p>
- <img className={styles["about-cont-2-img"]} src={Free} alt="handson" />
- </div>
- <div className={styles["about-cont-2-c"]}>
- <p> Inclusive Community </p>
- <img className={styles["about-cont-2-img"]} src={Diamond} alt="handson" />
- </div>
- </div>
- <div className={styles["about-cont-3"]}>
- <p> Join our Discord Community Server </p>
- <div className={styles["about-discord"]}>
- <a
- href="https://discord.gg/wemakedevs"
- className={`link-primary`}
- target="_blank"
- rel="noopener noreferrer"
- >
- <img src={ Discord } alt="discord" /> Discord
+ <section>
+ <div className={styles["about-container"]}>
+ <img className={styles["banner"]} src={AboutImage} alt="About us" />
+ <div className={styles["info-container"]}>
+ <h1>ABOUT US</h1>
+ <hr className={styles["about-border"]}></hr>
+ <p>
+ <ul>
 
- </a>
- </div>
- <p> Join our Telegram Community </p>
- <div className={styles["about-discord"]}>
- <a
- href="https://t.me/WeMakeDevs"
- className={`link-primary`}
+
+ <li> 
+ <img src={RightSingleArrow} alt="single-arrow" />
+ <p>We believe that everyone, irrespective of their college or
+ branch, technical or non-technical background can make it big.{" "}
+ <span className={styles["highlight"]}>
+ {" "}
+ WeMakeDevs is an initiative built on this thought.{" "}
+ </span>
+ </p>
+ </li>
+ <li>
+ <img src={RightSingleArrow} />
+ <p>
+ We provide{" "}
+ <span className={styles["highlight"]}>
+ hands-on training, mentorship for FREE
+ </span>{" "}
+ and have an {" "}
+ <span className={styles["highlight"]}>
+ inclusive community.
+ </span>
+ </p>
+ </li>
+ <li>
+ <img src={RightSingleArrow} />
+ <p>
+ Get{" "}
+ <span className={styles["highlight"]}>
+ expert guidance with career
+ </span>
+ , Open Source, and internships, jobs around the world.
+ </p>
+ </li>
+ <li>
+ <img src={RightSingleArrow} />
+ <p>
+ We are also having various {" "}
+ <span className={styles["highlight"]}>
+ events weekly or monthly. {" "}
+ </span>
+ Do participate in those events to make your skills enhance.
+ </p>
+ </li>
+ </ul>
+ </p>
+ <div className={styles["courses-link"]}>
+ <button>
+ <a
+ href="https://discord.gg/wemakedevs"
+ className={styles["link-primary"]}
  target="_blank"
  rel="noopener noreferrer"
  >
- <img src={ Telegram } alt="discord" /> Telegram
+ Join Discord
+ <img src={RightArrow} alt="right arrow" />
  </a>
+ </button>
+
  </div>
- </div>
- </div>
+ </div>
+ </div>
+ <Cards />
  </section>
-  )
-}
+ );
+};
 
-export default about
+export default About;