Osama

Components/Card.tsx

@@ -0,0 +1,63 @@
+import Head from "next/head";
+import React from "react";
+import Link from "next/link";
+import Style from "../Components/card.module.scss";
+import Image from "next/image";
+import PassLogo from "../public/PassLogo.svg";
+import Logo from "../public/Logo.svg";
+import Home from "../pages/Home";
+import amico from "../public/amico.svg";
+// import your animation
+import "animate.css";
+
+// import the library
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+// import your icons
+import {
+  faSearch,
+  faChevronCircleDown,
+  faCircleXmark,
+} from "@fortawesome/free-solid-svg-icons";
+import { faStar } from "@fortawesome/free-regular-svg-icons";
+
+// import { useRouter } from "next/router";
+
+// import Swiper core and required modules
+import { Swiper, SwiperSlide } from "swiper/react";
+
+const Card = () => {
+  return (
+    <div className={Style.slide_container}>
+      <div className={Style.slide_content}>
+        <div className={Style.card}>
+          <div className={Style.image_content}>
+            <span className={Style.overlay}></span>
+            <div className={Style.card_image}>
+              <Image src={amico} alt="amico" className={Style.card_img} />
+            </div>
+          </div>
+          <div className={Style.card_content}>
+            <h2 className={Style.name}>David Dell</h2>
+            <p className={Style.description}>
+              The lorem text the section that contains header with having open
+              functionality. Lorem dolor sit amet consectetur adipisicing elit.
+            </p>
+            <p className={Style.card_price_rate}>
+              4
+              <FontAwesomeIcon
+                icon={faStar}
+                className={Style.FontAwesomeIcon}
+              />
+              From $20 / person
+            </p>
+            <button className={Style.button}>Book Now</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Card;

Components/Landing.tsx

@@ -0,0 +1,89 @@
+import Head from "next/head";
+import React from "react";
+import Link from "next/link";
+import Style from "../Components/landing.module.scss";
+import Image from "next/image";
+import PassLogo from "../public/PassLogo.svg";
+import HeroImage from "../public/HeroImage.png";
+import Home from "../pages/Home";
+import NavbarList from "./NavbarList";
+// import your animation
+import "animate.css";
+
+// import the library
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+// import your icons
+import {} from "@fortawesome/free-solid-svg-icons";
+import {} from "@fortawesome/free-regular-svg-icons";
+
+// import { useRouter } from "next/router";
+
+const Landing = () => {
+  return (
+    <>
+      {/* <!-- Start NavBar --> */}
+
+      <div className={Style.header}>
+        <div className={Style.container}>
+          <div className={Style.imageContainer}>
+            <Link href="Home">
+              <Image src={PassLogo} alt="PassLogo" className={Style.PassLogo} />
+            </Link>
+          </div>
+          <ul className={Style.main_nav}>
+            <li>
+              <Link href="#About">About</Link>
+            </li>
+            <li>
+              <Link href="#Pricing">Pricing</Link>
+            </li>
+            <li>
+              <Link href="#Testmonials">Testmonials</Link>
+            </li>
+            <li>
+              <Link href="#Contact">Contact</Link>
+            </li>
+            <li>
+              <Link href="#Log In">Log In</Link>
+            </li>
+            <li className={Style.bt}>
+              <Link href="#Join Now">Join Now</Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      {/* <!-- End NavBar --> */}
+
+      {/* <!-- Start landing --> */}
+
+      <div className={Style.landing}>
+        <div className={Style.container}>
+          <div className={Style.text}>
+            <h1>
+              Best PlatForm To interviews with engineers from Amazon, Google,
+              Facebook, and other top companies.
+            </h1>
+            <p>
+              Get better at algorithmic and systems design problems, and get
+              detailed feedback on exactly what you need to work on.
+            </p>
+          </div>
+          <div className={Style.HeroImage}>
+            <Image
+              src={HeroImage}
+              alt="HeroImage"
+              className={Style.HeroImage}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* <!-- End landing --> */}
+    </>
+  );
+};
+
+export default Landing;

Components/NavbarList.tsx

@@ -0,0 +1,114 @@
+import Head from "next/head";
+import React from "react";
+import Link from "next/link";
+import Style from "../Components/navbarList.module.scss";
+import Image from "next/image";
+import PassLogo from "../public/PassLogo.svg";
+import HeroImage from "../public/HeroImage.png";
+import Home from "../pages/Home";
+// import your animation
+import "animate.css";
+
+// import the library
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+// import your icons
+import {
+  faSearch,
+  faChevronCircleDown,
+  faCircleXmark,
+} from "@fortawesome/free-solid-svg-icons";
+import { faUser } from "@fortawesome/free-regular-svg-icons";
+
+// import { useRouter } from "next/router";
+
+const SignUpDone = () => {
+  return (
+    <>
+      {/* <!-- Start NavBar --> */}
+
+      <div className={Style.header}>
+        <div className={Style.container}>
+          <div className={Style.imageContainer}>
+            <Link href="Home">
+              <Image src={PassLogo} alt="PassLogo" className={Style.PassLogo} />
+            </Link>
+          </div>
+          <ul className={Style.main_nav}>
+            <li>
+              <Link href="#Watch Interviews">Watch Interviews</Link>
+            </li>
+            <li>
+              <Link href="#Browse">Browse</Link>
+            </li>
+            <li>|</li>
+            <li>
+              <Link href="#faSearch">
+                <FontAwesomeIcon
+                  icon={faSearch}
+                  className={Style.FontAwesomeIcon}
+                />
+              </Link>
+            </li>
+            <li>
+              <Link href="#faUser">
+                <FontAwesomeIcon
+                  icon={faUser}
+                  className={Style.FontAwesomeIcon}
+                />
+              </Link>
+            </li>
+            <li>
+              <Link href="#faChevronCircleDown">
+                <FontAwesomeIcon
+                  icon={faChevronCircleDown}
+                  className={Style.FontAwesomeIcon}
+                />
+              </Link>
+              <div className={Style.mega_menu}>
+                <ul className={Style.links}>
+                  <li>
+                    <Link href="Home">Home</Link>
+                  </li>
+
+                  <li>
+                    <Link href="Home">watch interviews</Link>
+                  </li>
+
+                  <li>
+                    <Link href="/Browse">Browse</Link>
+                  </li>
+
+                  <li>
+                    <Link href="/Profile">Profile</Link>
+                  </li>
+
+                  <li>
+                    <Link href="/About">About</Link>
+                  </li>
+
+                  <li>
+                    <Link href="/Pricing">Pricing</Link>
+                  </li>
+
+                  <li>
+                    <Link href="/Testimonials">Testimonials</Link>
+                  </li>
+
+                  <li>
+                    <Link href="/Contact">Contact</Link>
+                  </li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      {/* <!-- End NavBar --> */}
+    </>
+  );
+};
+
+export default SignUpDone;