diff --git a/Components/Card.tsx b/Components/Card.tsx new file mode 100644 index 0000000..8fbbfa7 --- /dev/null +++ b/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 ( +
+
+
+
+ +
+ amico +
+
+
+

David Dell

+

+ The lorem text the section that contains header with having open + functionality. Lorem dolor sit amet consectetur adipisicing elit. +

+

+ 4 + + From $20 / person +

+ +
+
+
+
+ ); +}; + +export default Card; diff --git a/Components/Landing.tsx b/Components/Landing.tsx new file mode 100644 index 0000000..77d95d7 --- /dev/null +++ b/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 ( + <> + {/* */} + +
+
+
+ + PassLogo + +
+ +
+
+ + {/* */} + + {/* */} + +
+
+
+

+ Best PlatForm To interviews with engineers from Amazon, Google, + Facebook, and other top companies. +

+

+ Get better at algorithmic and systems design problems, and get + detailed feedback on exactly what you need to work on. +

+
+
+ HeroImage +
+
+
+ + {/* */} + + ); +}; + +export default Landing; diff --git a/Components/NavbarList.tsx b/Components/NavbarList.tsx new file mode 100644 index 0000000..e38539e --- /dev/null +++ b/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 ( + <> + {/* */} + +
+
+
+ + PassLogo + +
+ +
+
+ + {/* */} + + ); +}; + +export default SignUpDone; diff --git a/Components/PolishForm.tsx b/Components/PolishForm.tsx new file mode 100644 index 0000000..4026d42 --- /dev/null +++ b/Components/PolishForm.tsx @@ -0,0 +1,320 @@ +import Head from "next/head"; +import React from "react"; +import Link from "next/link"; +import Style from "../Components/polishForm.module.scss"; +import Image from "next/image"; +import PassLogo from "../public/PassLogo.svg"; +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 { faPlus } from "@fortawesome/free-solid-svg-icons"; +import {} from "@fortawesome/free-regular-svg-icons"; + +// import { useRouter } from "next/router"; + +const PolishForm = () => { + return ( + <> +
+ + PassLogo + +
+ +
+
+

+ Your account has successfully activated, +
+ let's polish your profile to stand out between your peers +

+
+
+

General Information

+
+
+
+
First Name *
+ +
+
+
Last Name *
+ +
+ +
+
Level Of Experience *
+ +
+ +
+
Bio *
+ +
+
+
Interest *
+ +
+ +
+

+ +
+ +
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+
Interest *
+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+ +
+ + ); +}; + +export default PolishForm; diff --git a/Components/ProfileButtons.tsx b/Components/ProfileButtons.tsx new file mode 100644 index 0000000..34d6376 --- /dev/null +++ b/Components/ProfileButtons.tsx @@ -0,0 +1,35 @@ +import Head from "next/head"; +import React from "react"; +import Link from "next/link"; +import Style from "../Components/profileButtons.module.scss"; +import Image from "next/image"; +// 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 { faTrash, faPlus } from "@fortawesome/free-solid-svg-icons"; +import {} from "@fortawesome/free-regular-svg-icons"; + +// import { useRouter } from "next/router"; + +const ProfileButtons = () => { + return ( + <> + + +
+ + +
+ + ); +}; + +export default ProfileButtons; diff --git a/Components/ResetPassword1.tsx b/Components/ResetPassword1.tsx new file mode 100644 index 0000000..09da0ea --- /dev/null +++ b/Components/ResetPassword1.tsx @@ -0,0 +1,122 @@ +import React from "react"; +import Link from "next/link"; +import Image from "next/image"; +import { useState, useRef, useEffect } from "react"; +import styles from "../Components/resetPassword.module.scss"; +import PassLogo from "../public/PassLogo.svg"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faEnvelope, faInfoCircle } from "@fortawesome/free-solid-svg-icons"; +import axios, { AxiosError } from "axios"; +import config from "../config.json"; +import { useRouter } from "next/router"; + +// import your animation +import "animate.css"; + +const API_ENDPOINT = config.apiEndpoint; +const EMAIL_REGEX = + /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; +const PWD_REGEX = /^(.{0,7}|[^0-9]*|[^A-Z]*|[^a-z]*|[a-zA-Z0-9]*)$/; + +const ResetPassword1 = () => { + const router = useRouter(); + const emailRef = useRef(null); + const errRef = useRef(null); + + const [email, setEmail] = useState(""); + const [validEmail, setValidEmail] = useState(false); + const [emailFocus, setEmailFocus] = useState(false); + + const [errMsg, setErrMsg] = useState(""); + const [success, setSuccess] = useState(false); + + useEffect(() => { + emailRef.current?.focus(); + }, []); + + useEffect(() => { + setValidEmail(EMAIL_REGEX.test(email)); + }, [email]); + + const handleSubmit = async (e: any) => { + e.preventDefault(); + console.log("done"); + const validateEmail = EMAIL_REGEX.test(email); + const validatePwd = !PWD_REGEX.test(pwd); + if (!validateEmail || !validatePwd) { + setErrMsg("Invalid Entries"); + return; + } + + try { + const response = await axios.post(`${API_ENDPOINT}/login`, { + email: email.toLowerCase(), + password: pwd, + }); + console.log(JSON.stringify(response?.data)); + setEmail(""); + setPwd(""); + setSuccess(true); + } catch (err) { + const error = err as AxiosError; + if (!error?.response) { + setErrMsg("No Server Response"); + } else if (error.response?.status === 400) { + setErrMsg("wrong email or Password"); + } else { + setErrMsg("Log in failed"); + } + } + }; + + return ( +
+
+ PassLogo +

Reset Your Password

+

+ Enter the email address associated with your account and we’ll send + you a link to reset your password. +

+
Email*
+

+ {errMsg} +

+
+ + setEmail(e.target.value)} + onFocus={() => setEmailFocus(true)} + /> +
+

+ + Please enter a valid E-mail +

+ +
+
+ ); +}; + +export default ResetPassword1; diff --git a/Components/ResetPassword2.tsx b/Components/ResetPassword2.tsx new file mode 100644 index 0000000..d4f0c1a --- /dev/null +++ b/Components/ResetPassword2.tsx @@ -0,0 +1,175 @@ +import React from "react"; +import Link from "next/link"; +import Image from "next/image"; +import { useState, useRef, useEffect } from "react"; +import styles from "../Components/resetPassword.module.scss"; +import PassLogo from "../public/PassLogo.svg"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faEnvelope, + faLock, + faEyeSlash, + faEye, + faInfoCircle, +} from "@fortawesome/free-solid-svg-icons"; +import axios, { AxiosError } from "axios"; +import config from "../config.json"; +import { useRouter } from "next/router"; + +const API_ENDPOINT = config.apiEndpoint; +const EMAIL_REGEX = + /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; +const PWD_REGEX = /^(.{0,7}|[^0-9]*|[^A-Z]*|[^a-z]*|[a-zA-Z0-9]*)$/; + +const ResetPassword2 = () => { + const router = useRouter(); + const emailRef = useRef(null); + const errRef = useRef(null); + + const [email, setEmail] = useState(""); + const [validEmail, setValidEmail] = useState(false); + const [emailFocus, setEmailFocus] = useState(false); + + const [pwd, setPwd] = useState(""); + const [validPwd, setValidPwd] = useState(false); + const [pwdFocus, setPwdFocus] = useState(false); + const [showPassword, setShowPassword] = useState(false); + + const [errMsg, setErrMsg] = useState(""); + const [success, setSuccess] = useState(false); + + useEffect(() => { + emailRef.current?.focus(); + }, []); + + useEffect(() => { + setValidEmail(EMAIL_REGEX.test(email)); + }, [email]); + + useEffect(() => { + setValidPwd(!PWD_REGEX.test(pwd)); + }, [pwd]); + + useEffect(() => { + setErrMsg(""); + }, [email, pwd]); + + const handleSubmit = async (e: any) => { + e.preventDefault(); + console.log("done"); + const validateEmail = EMAIL_REGEX.test(email); + const validatePwd = !PWD_REGEX.test(pwd); + if (!validateEmail || !validatePwd) { + setErrMsg("Invalid Entries"); + return; + } + + try { + const response = await axios.post(`${API_ENDPOINT}/login`, { + email: email.toLowerCase(), + password: pwd, + }); + console.log(JSON.stringify(response?.data)); + setEmail(""); + setPwd(""); + setSuccess(true); + } catch (err) { + const error = err as AxiosError; + if (!error?.response) { + setErrMsg("No Server Response"); + } else if (error.response?.status === 400) { + setErrMsg("wrong email or Password"); + } else { + setErrMsg("Log in failed"); + } + } + }; + + return ( +
+
+ PassLogo +

Reset Your Password

+

You can reset your password using this form.

+
New Password*
+

+ {errMsg} +

+ +
+ + setPwd(e.target.value)} + onFocus={() => setPwdFocus(true)} + /> +
+ setShowPassword((prev) => !prev)} + /> +
+
+

+ + minimum 8 characters, at least one uppercase letter, one lowercase + letter, one number and one special charachter +

+ +
Verify Password*
+

+ {errMsg} +

+ +
+ + setPwd(e.target.value)} + onFocus={() => setPwdFocus(true)} + /> +
+ setShowPassword((prev) => !prev)} + /> +
+
+

+ + minimum 8 characters, at least one uppercase letter, one lowercase + letter, one number and one special charachter +

+ +
+
+ ); +}; + +export default ResetPassword2; diff --git a/Components/SignUpDone1.tsx b/Components/SignUpDone1.tsx new file mode 100644 index 0000000..576fde7 --- /dev/null +++ b/Components/SignUpDone1.tsx @@ -0,0 +1,138 @@ +import Head from "next/head"; +import React from "react"; +import Link from "next/link"; +import Style from "../Components/signUpDone1.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 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 ( + <> + {/* */} + +
+
+
+ + PassLogo + +
+
    +
  • + Watch Interviews +
    • +
  • + Browse +
    • +
  • |
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    +
      +
    • + Home +
      • + +
    • + watch interviews +
      • + +
    • + Browse +
      • + +
    • + Profile +
      • + +
    • + About +
      • + +
    • + Pricing +
      • + +
    • + Testimonials +
      • + +
    • + Contact +
      • +
    +
    +
    • +
+
+
+ + {/* */} + + {/* */} + +
+
+
+ Logo +
+
+

+ Thank you! Please check your email. +

+

+ Please check your email, and follow the instructions to activate your PASS.IO account and book your first interview. See you soon! +

+
+
+
+ + {/* */} + + ); +}; + +export default SignUpDone; diff --git a/Components/SignUpDone2.tsx b/Components/SignUpDone2.tsx new file mode 100644 index 0000000..5af612e --- /dev/null +++ b/Components/SignUpDone2.tsx @@ -0,0 +1,130 @@ +import Head from "next/head"; +import React from "react"; +import Link from "next/link"; +import Style from "../Components/signUpDone2.module.scss"; +import Image from "next/image"; +import PassLogo from "../public/PassLogo.svg"; +import amico from "../public/amico.svg"; +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 { faGrinStars } from "@fortawesome/free-regular-svg-icons"; + +// import { useRouter } from "next/router"; + +const SignUpDone = () => { + return ( + <> + {/* */} + +
+
+
+ + PassLogo + +
+
    +
  • + Watch Interviews +
    • +
  • + Browse +
    • +
  • |
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    +
      +
    • + Home +
      • + +
    • + watch interviews +
      • + +
    • + Browse +
      • + +
    • + Profile +
      • + +
    • + About +
      • + +
    • + Pricing +
      • + +
    • + Testimonials +
      • + +
    • + Contact +
      • +
    +
    +
    • +
+
+
+ + {/* */} + + {/* */} + +
+
+
+

Your account has successfully activated

+
+ amico +
+

let's polish your profile to stand out between your peers

+
+
+
+ + {/* */} + + ); +}; + +export default SignUpDone; diff --git a/Components/card.module.scss b/Components/card.module.scss new file mode 100644 index 0000000..0f7e644 --- /dev/null +++ b/Components/card.module.scss @@ -0,0 +1,142 @@ +@use "../styles/abstracts/variables" as *; // To use any style from Variable direct - example $color-bg-white. + +.slide_container { + width: 100%; + padding: 40px 0; + // background-color: $color-text-black; +} +.slide_content { + display: flex; + flex-wrap: wrap; + margin: 0 40px; + gap: 15px; + // overflow: scroll; + border-radius: 25px; + // background-color: #707070; +} +.card { + border-radius: 30px; + background-color: $color-bg-white; + flex: 0 0 calc(33.33% - 10px); + max-width: calc(33.33% - 10px); + width: 100%; + border: solid transparent; +} + +.card:hover { + border-color: $color-secondary; +} + +.image_content, +.card_content { + display: flex; + flex-direction: column; + align-items: center; + padding: 10px 14px; +} +.image_content { + position: relative; + row-gap: 5px; + padding: 25px 0; +} +.overlay { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + background-color: $color-primary; + border-radius: 25px 25px 0 25px; +} +.overlay::before, +.overlay::after { + content: ""; + position: absolute; + right: 0; + bottom: -40px; + height: 40px; + width: 40px; + background-color: $color-primary; +} +.overlay::after { + border-radius: 0 25px 0 0; + background-color: $color-bg-white; +} + + +.card_image { + position: relative; + height: 150px; + width: 150px; + border-radius: 50%; + background: $color-bg-white; + padding: 3px; + transition: transform 300ms ease-in-out; +} +.card_image .card_img { + height: 100%; + width: 100%; + object-fit: cover; + border-radius: 50%; + border: 4px solid $color-primary; +} +.card_image:hover { + transform: scale(1.2); +} + +.card_image .card_img:hover{ + border-color:$color-secondary ; + +} + +.name { + font-size: 18px; + font-weight: 600; + color: $color-text-black; + transition: transform 100ms ease-in-out; +} +.name:hover { + transform: scale(1.2); +} + +.description { + font-size: 14px; + color: #707070; + text-align: center; +} +.button { + border: none; + font-size: 16px; + color: $color-bg-white; + padding: 8px 16px; + background-color: $color-primary; + border-radius: 6px; + margin: 14px; + cursor: pointer; + transition: all 0.3s ease; +} +.button:hover { + background: $color-secondary; +} + +@media screen and (max-width: 768px) { + .slide_content { + flex-direction: column; + } + + .card { + flex: 0 0 100%; + max-width: 100%; + } +} + +.FontAwesomeIcon { + width: 20px; + height: 20px; + color: $color-primary; +} + +.card_price_rate { + display: flex; + align-self: center; +} diff --git a/Components/landing.module.scss b/Components/landing.module.scss new file mode 100644 index 0000000..799c61d --- /dev/null +++ b/Components/landing.module.scss @@ -0,0 +1,263 @@ +@use "../styles/abstracts/variables" as *; // To use any style from Variable direct - example $color-bg-white. + +// start header + +.header { + background-color: white; + position: relative; + -webkit-box-shadow: 0 0 10px #ddd; + -moz-box-shadow: 0 0 10px #ddd; + box-shadow: 0 0 10px #ddd; +} + +.container { + max-width: $max-width; /* 1 */ + margin-left: auto; /* 2 */ + margin-right: auto; /* 2 */ + padding-left: 15px; /* 3 */ + padding-right: 15px; /* 3 */ + width: 100%; /* 1 */ + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + position: relative; +} + +.header .PassLogo { + height: 72px; + display: flex; + justify-content: center; + align-items: center; +} + +@media (max-width: 768px) { + .header .PassLogo { + width: 100%; + height: 50px; + } +} + +.header .main_nav { + display: flex; + align-items: center; + flex-wrap: wrap; +} + +@media (max-width: 768px) { + .header .main_nav { + margin: auto; + } +} + +.header .main_nav > li > a { + display: flex; + justify-content: center; + align-items: center; + height: 72px; + position: relative; + color: $color-text-black; + padding: 0 20px; + overflow: hidden; + font-style: normal; + font-weight: 400; + font-size: 18px; + transition: 0.3s; +} + +@media (max-width: 768px) { + .header .main_nav > li > a { + padding: 10px; + font-size: 14px; + height: 40px; + } +} + +.header .main_nav > li:last-child { + height: 50px; + background-color: $color-primary; + border-radius: 10px; + display: flex; + align-items: center; +} + +.header .main_nav > li > a::before { + content: ""; + position: absolute; + width: 100%; + height: 4px; + background-color: $color-primary; + top: 0; + left: -100%; + transition: 0.3s; +} + +.header .main_nav > li > a:hover { + color: $color-primary; + background-color: #fafafa; +} + +.header .main_nav > li > a:hover::before { + left: 0; +} + +/* small */ +@media (min-width: 320px) { + .container { + width: 750px; + } +} + +/* medium */ +@media (min-width: 768px) { + .container { + width: 970px; + } +} + +/* large */ +@media (min-width: 1024px) { + .container { + width: 1170px; + } +} + +// end header + +// start landing + +.landing { + position: relative; +} + +.landing .container { + min-height: calc(100vh - 72px); + display: flex; + align-items: center; + padding-bottom: 120px; +} + +.landing .text { + flex: 1; +} + +@media (max-width: 1024px) { + .landing .text { + text-align: center; + } +} + +.landing .text h1 { + margin: 0; + letter-spacing: -2px; + color: $color-text-black; + font-style: normal; + font-weight: 600; + font-size: 40px; + line-height: 120%; +} + +@media (max-width: 768px) { + .landing .text h1 { + font-size: 28px; + } +} + +.landing .text p { + margin: 5px 0 0; + color: $color-text-black; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 120%; + opacity: 0.5; +} + +@media (max-width: 768px) { + .landing .text h1 { + font-size: 18px; + } +} + +@media (max-width: 1024px) { + .landing .text p { + margin: 10px auto; + } +} + +.landing .HeroImage img { + position: relative; + width: 500px; + height: 350px; + animation: up-and-down 5s linear infinite; +} + +@media (max-width: 1024px) { + .landing .HeroImage { + display: none; + } +} + +/* End Landing */ + +/* Start Animation */ + +@keyframes up-and-down { + 0%, + 100% { + top: 0; + } + 50% { + top: -50px; + } +} + +// animation: animate 4s ease-in-out infinite; + +@keyframes animate { + 0%, + 100% { + clip-path: polygon( + 0% 45%, + 15% 44%, + 32% 50%, + 54% 60%, + 70% 61%, + 84% 59%, + 100% 57%, + 100% 100%, + 0% 100% + ); + } + + 50% { + clip-path: polygon( + 0% 60%, + 16% 65%, + 34% 66%, + 51% 62%, + 67% 50%, + 84% 45%, + 100% 46%, + 100% 100%, + 0% 100% + ); + } +} + +/* End Animation */ + +// .HeroImageContainer { +// width: 70%; +// } + +// .HeroImage { +// object-fit: contain; +// width: 100%; +// position: relative; +// height: unset; +// } + +// .HeroImageContainer > div { +// position: unset; +// } diff --git a/Components/navbarList.module.scss b/Components/navbarList.module.scss new file mode 100644 index 0000000..90aca09 --- /dev/null +++ b/Components/navbarList.module.scss @@ -0,0 +1,165 @@ +@use "../styles/abstracts/variables" as *; // To use any style from Variable direct - example $color-bg-white. + +.header { + background-color: white; + position: relative; + -webkit-box-shadow: 0 0 10px #ddd; + -moz-box-shadow: 0 0 10px #ddd; + box-shadow: 0 0 10px #ddd; +} + +.container { + max-width: $max-width; + margin-left: auto; + margin-right: auto; + padding-left: 15px; + padding-right: 15px; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + position: relative; +} + +.header .PassLogo { + height: 72px; + display: flex; + justify-content: center; + align-items: center; +} + +@media (max-width: 768px) { + .header .PassLogo { + margin: auto; + } +} + +.header .main_nav { + display: flex; + align-items: center; +} + +@media (max-width: 768px) { + .header .main_nav { + } +} + +.header .main_nav > li:hover .mega_menu { + opacity: 1; + z-index: 100; + top: calc(100% + 1px); +} + +.header .main_nav > li > a { + display: flex; + justify-content: center; + align-items: center; + height: 72px; + position: relative; + color: $color-text-black; + padding: 0 30px; + overflow: hidden; + font-size: 18px; + transition: 0.3s; +} + +@media (max-width: 768px) { + .header .main_nav > li > a { + padding: 10px; + font-size: 14px; + height: 40px; + } +} + +.header .main_nav > li > a::before { + content: ""; + position: absolute; + width: 100%; + height: 4px; + background-color: $color-primary; + top: 0; + left: -100%; + transition: 0.3s; +} + +.header .main_nav > li > a:hover { + color: $color-primary; + background-color: #fafafa; +} + +.header .main_nav > li > a:hover::before { + left: 0; +} + +.header .mega_menu { + position: absolute; + width: 100%; + left: 0; + padding: 30px; + background-color: white; + border-bottom: 3px solid $color-primary; + z-index: -1; + display: flex; + gap: 40px; + top: calc(100% + 50px); + opacity: 0; + transition: top 0.3s, opacity 0.3s; +} + +@media (max-width: 768px) { + .header .mega_menu { + flex-direction: column; + gap: 0; + padding: 5px; + } +} + +.header .mega_menu .links { + min-width: 250px; + flex: 1; +} + +.header .mega_menu .links li { + position: relative; +} + +.header .mega_menu .links li:not(:last-child) { + border-bottom: 1px solid #e9e6e6; +} + +@media (max-width: 768px) { + .header .mega_menu .links:first-of-type li:last-child { + border-bottom: 1px solid #e9e6e6; + } +} + +.header .mega_menu .links li::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 0; + height: 100%; + background-color: #fafafa; + z-index: -1; + transition: 0.3s; +} + +.header .mega_menu .links li:hover::before { + width: 100%; +} + +.header .mega_menu .links li a { + color: $color-primary; + padding: 15px; + display: block; + font-size: 18px; + font-weight: bold; +} + +.FontAwesomeIcon { + color: $color-primary; + width: 25px; + height: 25px; +} diff --git a/Components/polishForm.module.scss b/Components/polishForm.module.scss new file mode 100644 index 0000000..a557159 --- /dev/null +++ b/Components/polishForm.module.scss @@ -0,0 +1,218 @@ +@use "../styles/abstracts/variables" as *; // To use any style from Variable direct - example $color-bg-white. + +.Nav { + display: flex; + width: 100%; +} + +.container { + margin-left: auto; /* 2 */ + margin-right: auto; /* 2 */ + max-width: $max-width; /* 1 */ + padding-left: 15px; /* 3 */ + padding-right: 15px; /* 3 */ + width: 100%; /* 1 */ +} + +.PassLogo { + margin: 1em 0 0 1em; +} + +.headerPage h3 { + color: $color-text-black; + margin: 3em 0; + text-align: center; +} + +.headerForm h1 { + color: $color-primary; + font-size: 2.6rem; +} + +.g1 h5 { + color: $color-text-black; + font-weight: 400; + line-height: 3rem; + margin: 0; +} + +.input { + border-radius: 5px; + border: 1px solid $color-primary; + color: $color-text-black; + height: 50%; + outline: 0; + padding-left: 0.5rem; + width: 100%; +} + +.g3g select { + border-radius: 5px; + border: 1px solid $color-primary; + color: $color-text-black; + font-size: 1.6rem; + font-weight: 400; + height: 50%; + outline: 0; + width: 100%; +} + +.g4g textarea { + border-radius: 5px; + border: 1px solid $color-primary; + color: $color-text-black; + font-size: 1.6rem; + font-weight: 400; + outline: 0; + padding-left: 0.5rem; + resize: none; + width: 100%; + height: 50%; +} + +.btn { + align-items: center; + background-color: $color-bg-button-offWhite; + border-radius: 5px; + border: 1px solid $color-primary; + color: $color-text-black; + cursor: pointer; + display: flex; + font-size: 1.6rem; + font-weight: 400; + height: 50%; + justify-content: space-between; + outline: 0; + padding-left: 0.5rem; + transition: 0.3s; + width: 100%; +} + +.FontAwesomeIcon { + color: $color-primary; + width: 1em; +} + +.btn:hover { + background-color: $color-text-black; + color: $color-bg-white; +} + +.btnPrimary { + border: none; + background: $color-primary; + margin: 3rem auto; + display: block; + width: 20%; + border-radius: 8px; + padding: 1rem 2rem; + color: $color-bg-white; + cursor: pointer; + white-space: nowrap; + margin-bottom: 10rem; + + &:hover:not(:disabled) { + box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25); + filter: brightness(120%); + transform: scale(1.05); + } + &:disabled { + cursor: not-allowed; + } +} + +.grid { + display: grid; + gap: 1em; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(auto-fit, 1fr); + grid-auto-rows: 80px; +} + +@media screen and (min-width: 320px) { +} + +@media screen and (min-width: 768px) { +} + +@media screen and (max-width: 768px) { + .grid { + display: flex; + flex-direction: column; + } + .grid { + .input { + height: 36px; + } + .g3g select { + height: 36px; + } + .btn { + height: 40px; + } + } +} + +.g1g { + grid-area: 1/1/1/2; +} + +.g2g { + grid-area: 2/1/2/1; +} + +.g3g { + grid-area: 3/1/3/2; +} + +.g4g { + grid-area: 1/2/6/-1; +} + +.g5g { + grid-area: 4/1/4/1; +} + +.g6g { + grid-area: 4/2/4/3; +} + +.g7g { + grid-area: 4/3/4/4; +} + +.g8g { + grid-area: 4/4/4/5; +} + +.g9g { + grid-area: 5/1/5/2; +} + +.g10g { + grid-area: 5/2/5/3; +} + +.g11g { + grid-area: 5/3/5/4; +} + +.g12g { + grid-area: 5/4/5/5; +} + +.g13g { + grid-area: 6/1/6/2; +} + +.g14g { + grid-area: 6/2/6/3; +} + +.g15g { + grid-area: 6/3/6/4; +} + +.g16g { + grid-area: 6/4/6/5; +} diff --git a/Components/profileButtons.module.scss b/Components/profileButtons.module.scss new file mode 100644 index 0000000..a363f4d --- /dev/null +++ b/Components/profileButtons.module.scss @@ -0,0 +1,78 @@ +@use "../styles/abstracts/variables" as *; // To use any style from Variable direct - example $color-bg-white. + +/* Buttons */ + +.btn { + border-radius: 10px; + border: 0; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + cursor: pointer; + display: flex; + font-size: 1.8rem; + font-weight: 600; + justify-content: center; + padding: 1rem 2rem; + transition: 0.3s; + white-space: nowrap; + width: 15%; +} + +.btn_sections { + background-color: $color-text-black; + color: $color-bg-white; +} + +.btn_sections:hover { + background-color: $color-bg-button-offWhite; + color: $color-text-black; +} + +.btn_Skill { + background-color: $color-bg-button-offWhite; + color: $color-text-black; + gap: 10px; + display: flex; + justify-content: center; + align-items: center; +} + +.btn_Skill:hover { + background-color: $color-text-black; + color: $color-bg-white; + gap: 10px; +} + +.FontAwesomeIcon { + color: $color-primary; + width: 25px; + height: 25px; +} + +/* Input */ + +.input { + border: 1px solid $color-primary; + border-radius: 15px; + outline: 0; +} + +.input_group { + position: relative; + border: 1px solid $color-primary; + border-radius: 15px; + display: flex; + align-items: center; + width: fit-content; +} + +.input_group .input { + border: 0; + flex-grow: 1; + padding: 1rem 1.5rem; +} + +.input_group .FontAwesomeIcon { + margin: 0 16px; + width: 15px; + height: 15px; +} diff --git a/Components/resetPassword.module.scss b/Components/resetPassword.module.scss new file mode 100644 index 0000000..0042116 --- /dev/null +++ b/Components/resetPassword.module.scss @@ -0,0 +1,138 @@ +@use "../styles/abstracts/variables" as *; // To use any style from Variable direct - example $color-bg-white. + +.Container { + align-items: center; + border-radius: 5px; + box-shadow: 1px 2px 10px 0px #0c84df; + display: flex; + height: 80%; + justify-content: center; + left: 50%; + overflow: hidden; + position: absolute; + top: 50%; + width: 50%; + transform: translate(-50%, -50%); + @media screen and (max-width: 786px) { + height: 80%; + width: 100%; + } +} + +.center { + width: 80%; +} + +.PassLogo { + margin: 0 auto 2em; +} + +.Container h3 { + color: $color-primary; + font-size: 3rem; + font-weight: 700; + text-align: center; +} + +.Container h6 { + color: $color-text-black; + line-height: 0.5rem; + margin-bottom: 0; + text-align: start; +} + +.btnPrimary { + border: none; + background: $color-primary; + margin: 2rem auto; + display: block; + width: 100%; + border-radius: 8px; + padding: 1rem 2rem; + color: $color-bg-white; + cursor: pointer; + white-space: nowrap; + + &:hover:not(:disabled) { + box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25); + filter: brightness(120%); + transform: scale(1.05); + } + + &:disabled { + cursor: not-allowed; + } +} + +.formItself { + display: flex; + flex-direction: column; + width: 50%; + margin-left: 0; + + @media screen and (max-width: 390px) { + width: 60%; + } +} + +.inputContainer { + display: grid; + grid-template-columns: 5% 90% 5%; + margin: 1rem 0; + height: 5.5rem; + border-radius: 5px; + padding: 0 0.4rem; + border: 2px gainsboro solid; + + &:focus-within { + border: 2px $color-secondary solid; + } + + .icon { + text-align: center; + color: #acacac; + justify-self: center; + align-self: center; + margin-bottom: 0.2rem; + width: 1.5em; + height: 1.5em; + } + + input { + background: none; + outline: none; + border: none; + color: #333; + justify-self: start; + align-self: center; + width: 100%; + } + + .eye { + color: #acacac; + justify-self: center; + align-self: center; + opacity: 0.7; + font-size: 1.5rem; + width: 2em; + height: 2em; + } +} + +.instructions { + color: darken(red, 10%); + font-size: 1.2rem; + padding: 0 1rem; + display: flex; + justify-content: center; + align-items: center; + .pwdIcon { + margin: 0.2em; + width: 1em; + height: 1em; + } +} + +.hidden { + display: none; +} diff --git a/Components/signUpDone1.module.scss b/Components/signUpDone1.module.scss new file mode 100644 index 0000000..18b7fec --- /dev/null +++ b/Components/signUpDone1.module.scss @@ -0,0 +1,247 @@ +@use "../styles/abstracts/variables" as *; // To use any style from Variable direct - example $color-bg-white. + +// start header + +.header { + background-color: white; + position: relative; + -webkit-box-shadow: 0 0 10px #ddd; + -moz-box-shadow: 0 0 10px #ddd; + box-shadow: 0 0 10px #ddd; +} + +.container { + max-width: $max-width; /* 1 */ + margin-left: auto; /* 2 */ + margin-right: auto; /* 2 */ + padding-left: 15px; /* 3 */ + padding-right: 15px; /* 3 */ + width: 100%; /* 1 */ + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + position: relative; +} + +.header .PassLogo { + height: 72px; + display: flex; + justify-content: center; + align-items: center; +} + +@media (max-width: 768px) { + .header .PassLogo { + margin: auto; + } +} + +.header .main_nav { + display: flex; + align-items: center; +} + +@media (max-width: 768px) { + .header .main_nav { + } +} + +.header .main_nav > li:hover .mega_menu { + opacity: 1; + z-index: 100; + top: calc(100% + 1px); +} + +.header .main_nav > li > a { + display: flex; + justify-content: center; + align-items: center; + height: 72px; + position: relative; + color: $color-text-black; + padding: 0 30px; + overflow: hidden; + font-size: 18px; + transition: 0.3s; +} + +@media (max-width: 768px) { + .header .main_nav > li > a { + padding: 10px; + font-size: 14px; + height: 40px; + } +} + +.header .main_nav > li > a::before { + content: ""; + position: absolute; + width: 100%; + height: 4px; + background-color: $color-primary; + top: 0; + left: -100%; + transition: 0.3s; +} + +.header .main_nav > li > a:hover { + color: $color-primary; + background-color: #fafafa; +} + +.header .main_nav > li > a:hover::before { + left: 0; +} + +.header .mega_menu { + position: absolute; + width: 100%; + left: 0; + padding: 30px; + background-color: white; + border-bottom: 3px solid $color-primary; + z-index: -1; + display: flex; + gap: 40px; + top: calc(100% + 50px); + opacity: 0; + transition: top 0.3s, opacity 0.3s; +} + +@media (max-width: 768px) { + .header .mega_menu { + flex-direction: column; + gap: 0; + padding: 5px; + } +} + +.header .mega_menu .links { + min-width: 250px; + flex: 1; +} + +.header .mega_menu .links li { + position: relative; +} + +.header .mega_menu .links li:not(:last-child) { + border-bottom: 1px solid #e9e6e6; +} + +@media (max-width: 768px) { + .header .mega_menu .links:first-of-type li:last-child { + border-bottom: 1px solid #e9e6e6; + } +} + +.header .mega_menu .links li::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 0; + height: 100%; + background-color: #fafafa; + z-index: -1; + transition: 0.3s; +} + +.header .mega_menu .links li:hover::before { + width: 100%; +} + +.header .mega_menu .links li a { + color: $color-primary; + padding: 15px; + display: block; + font-size: 18px; + font-weight: bold; +} + +.FontAwesomeIcon { + color: $color-primary; + width: 25px; + height: 25px; +} + +//end header + +// start landing + +.landing { + position: relative; +} + +.landing .container { + min-height: calc(100vh - 72px); + display: flex; + align-items: center; + justify-content: center; + align-content: center; +} + +.landing .text { +} + +@media (max-width: 1024px) { + .landing .text { + text-align: center; + } +} + +.landing .text h1 { + margin: 0; + letter-spacing: -2px; + color: $color-text-black; + + font-style: normal; + font-weight: 600; + font-size: 32px; + line-height: 44px; + text-align: center; +} + +@media (max-width: 768px) { + .landing .text h1 { + font-size: 28px; + } +} + +.landing .text p { + margin: 5px 0 0; + color: $color-text-black; + + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 44px; + text-align: center; +} + +@media (max-width: 768px) { + .landing .text h1 { + font-size: 18px; + } +} + +@media (max-width: 1024px) { + .landing .text p { + margin: 10px auto; + } +} + +.landing .Logo img { + position: relative; + width: 100px; + height: 100px; +} + +@media (max-width: 1024px) { + .landing .Logo { + display: none; + } +} + +// End Landing diff --git a/Components/signUpDone2.module.scss b/Components/signUpDone2.module.scss new file mode 100644 index 0000000..07a54ec --- /dev/null +++ b/Components/signUpDone2.module.scss @@ -0,0 +1,259 @@ +@use "../styles/abstracts/variables" as *; // To use any style from Variable direct - example $color-bg-white. + +// start header + +.header { + background-color: white; + position: relative; + -webkit-box-shadow: 0 0 10px #ddd; + -moz-box-shadow: 0 0 10px #ddd; + box-shadow: 0 0 10px #ddd; +} + +.container { + max-width: $max-width; /* 1 */ + margin-left: auto; /* 2 */ + margin-right: auto; /* 2 */ + padding-left: 15px; /* 3 */ + padding-right: 15px; /* 3 */ + width: 100%; /* 1 */ + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + position: relative; +} + +.header .Passamico { + height: 72px; + display: flex; + justify-content: center; + align-items: center; +} + +@media (max-width: 768px) { + .header .Passamico { + margin: auto; + } +} + +.header .main_nav { + display: flex; + align-items: center; +} + +@media (max-width: 768px) { + .header .main_nav { + } +} + +.header .main_nav > li:hover .mega_menu { + opacity: 1; + z-index: 100; + top: calc(100% + 1px); +} + +.header .main_nav > li > a { + display: flex; + justify-content: center; + align-items: center; + height: 72px; + position: relative; + color: $color-text-black; + padding: 0 30px; + overflow: hidden; + font-size: 18px; + transition: 0.3s; +} + +@media (max-width: 768px) { + .header .main_nav > li > a { + padding: 10px; + font-size: 14px; + height: 40px; + } +} + +.header .main_nav > li > a::before { + content: ""; + position: absolute; + width: 100%; + height: 4px; + background-color: $color-primary; + top: 0; + left: -100%; + transition: 0.3s; +} + +.header .main_nav > li > a:hover { + color: $color-primary; + background-color: #fafafa; +} + +.header .main_nav > li > a:hover::before { + left: 0; +} + +.header .mega_menu { + position: absolute; + width: 100%; + left: 0; + padding: 30px; + background-color: white; + border-bottom: 3px solid $color-primary; + z-index: -1; + display: flex; + gap: 40px; + top: calc(100% + 50px); + opacity: 0; + transition: top 0.3s, opacity 0.3s; +} + +@media (max-width: 768px) { + .header .mega_menu { + flex-direction: column; + gap: 0; + padding: 5px; + } +} + +.header .mega_menu .links { + min-width: 250px; + flex: 1; +} + +.header .mega_menu .links li { + position: relative; +} + +.header .mega_menu .links li:not(:last-child) { + border-bottom: 1px solid #e9e6e6; +} + +@media (max-width: 768px) { + .header .mega_menu .links:first-of-type li:last-child { + border-bottom: 1px solid #e9e6e6; + } +} + +.header .mega_menu .links li::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 0; + height: 100%; + background-color: #fafafa; + z-index: -1; + transition: 0.3s; +} + +.header .mega_menu .links li:hover::before { + width: 100%; +} + +.header .mega_menu .links li a { + color: $color-primary; + padding: 15px; + display: block; + font-size: 18px; + font-weight: bold; +} + +.FontAwesomeIcon { + color: $color-primary; + width: 25px; + height: 25px; +} + +//end header + +// start landing + +.landing { + position: relative; +} + +.landing .container { + min-height: calc(100vh - 72px); + display: flex; + align-items: center; + justify-content: center; + align-content: center; +} + +.landing .text { +} + +@media (max-width: 1024px) { + .landing .text { + text-align: center; + } +} + +.landing .text h1 { + margin: 0; + letter-spacing: -2px; + color: $color-text-black; + + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 44px; + + text-align: center; +} + +@media (max-width: 768px) { + .landing .text h1 { + font-size: 28px; + } +} + +.landing .text p { + margin: 5px 0 0; + color: $color-text-black; + + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 44px; + + text-align: center; +} + +@media (max-width: 768px) { + .landing .text h1 { + font-size: 18px; + } +} + +@media (max-width: 1024px) { + .landing .text p { + margin: 10px auto; + } +} + +.landing .amico { + padding: 20px 0; + display: flex; + align-items: center; + flex-direction: column; +} + +.landing .amico img { + position: relative; + width: 200px; + height: 200px; + display: flex; + align-items: center; + flex-direction: column; +} + +@media (max-width: 1024px) { + .landing .amico { + display: none; + } +} + +// End Landing diff --git a/config.json b/config.json new file mode 100644 index 0000000..4879018 --- /dev/null +++ b/config.json @@ -0,0 +1,3 @@ +{ + "apiEndpoint": "https://pass-interviews.onrender.com" +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 0ecd230..7a018f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,19 +8,124 @@ "name": "pass", "version": "0.1.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.3.0", + "@fortawesome/free-brands-svg-icons": "^6.3.0", + "@fortawesome/free-regular-svg-icons": "^6.3.0", + "@fortawesome/free-solid-svg-icons": "^6.3.0", + "@fortawesome/react-fontawesome": "^0.2.0", "@next/font": "13.1.6", "@types/node": "18.11.18", "@types/react": "18.0.27", "@types/react-dom": "18.0.10", + "animate.css": "^4.1.1", + "axios-error": "^1.0.4", + "babel-plugin-macros": "^3.1.0", "eslint": "8.33.0", "eslint-config-next": "13.1.6", "next": "13.1.6", "react": "18.2.0", "react-dom": "18.2.0", "sass": "^1.57.1", + "swiper": "^9.1.1", "typescript": "4.9.4" } }, + "node_modules/@babel/code-frame": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", + "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==", + "dependencies": { + "@babel/highlight": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.19.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", + "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", + "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", + "dependencies": { + "@babel/helper-validator-identifier": "^7.18.6", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight/node_modules/ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dependencies": { + "color-convert": "^1.9.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/@babel/highlight/node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" + }, + "node_modules/@babel/highlight/node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/@babel/highlight/node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/@babel/runtime": { "version": "7.20.13", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz", @@ -54,6 +159,75 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz", + "integrity": "sha512-4BC1NMoacEBzSXRwKjZ/X/gmnbp/HU5Qqat7E8xqorUtBFZS+bwfGH5/wqOC2K6GV0rgEobp3OjGRMa5fK9pFg==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.3.0.tgz", + "integrity": "sha512-uz9YifyKlixV6AcKlOX8WNdtF7l6nakGyLYxYaCa823bEBqyj/U2ssqtctO38itNEwXb8/lMzjdoJ+aaJuOdrw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.3.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.3.0.tgz", + "integrity": "sha512-xI0c+a8xnKItAXCN8rZgCNCJQiVAd2Y7p9e2ND6zN3J3ekneu96qrePieJ7yA7073C1JxxoM3vH1RU7rYsaj8w==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.3.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.3.0.tgz", + "integrity": "sha512-cZnwiVHZ51SVzWHOaNCIA+u9wevZjCuAGSvSYpNlm6A4H4Vhwh8481Bf/5rwheIC3fFKlgXxLKaw8Xeroz8Ntg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.3.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz", + "integrity": "sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.3.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", @@ -371,6 +545,11 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz", "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==" }, + "node_modules/@types/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" + }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -529,6 +708,11 @@ "url": "https://github.com/sponsors/epoberezkin" } }, + "node_modules/animate.css": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz", + "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==" + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", @@ -672,6 +856,37 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "0.21.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz", + "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==", + "dependencies": { + "follow-redirects": "^1.14.0" + } + }, + "node_modules/axios-error": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/axios-error/-/axios-error-1.0.4.tgz", + "integrity": "sha512-ay1l7dXNW288c39KcNAijpE3w8X3tP4V3Hf5yttKp4Kacrq5mnL7s0Z9GXYHRProTvRXytvs4SOriBlsGcVlfA==", + "dependencies": { + "axios": "^0.21.1", + "type-fest": "^0.15.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/axios-error/node_modules/type-fest": { + "version": "0.15.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.15.1.tgz", + "integrity": "sha512-n+UXrN8i5ioo7kqT/nF8xsEzLaqFra7k32SEsSPwvXVGyAcRgV/FUQN/sgfptJTR1oRmmq7z4IXMFSM7im7C9A==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/axobject-query": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz", @@ -680,6 +895,20 @@ "deep-equal": "^2.0.5" } }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -826,6 +1055,21 @@ "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" }, + "node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -959,6 +1203,14 @@ "node": ">=10.13.0" } }, + "node_modules/error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dependencies": { + "is-arrayish": "^0.2.1" + } + }, "node_modules/es-abstract": { "version": "1.21.1", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.1.tgz", @@ -1615,6 +1867,25 @@ "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz", "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==" }, + "node_modules/follow-redirects": { + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -1980,6 +2251,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==" + }, "node_modules/is-bigint": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz", @@ -2292,6 +2568,11 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" + }, "node_modules/json-schema-traverse": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", @@ -2350,6 +2631,11 @@ "node": ">= 0.8.0" } }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" + }, "node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", @@ -2702,6 +2988,23 @@ "node": ">=6" } }, + "node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -3062,6 +3365,11 @@ "node": ">=0.10.0" } }, + "node_modules/ssr-window": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz", + "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==" + }, "node_modules/stop-iteration-iterator": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz", @@ -3191,6 +3499,27 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swiper": { + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.1.1.tgz", + "integrity": "sha512-D1zArOwI6XCXCYBULPA4jTxpqp5SQtvntjinbXNZwXzj6P3KS51zSWuMarCLXq5oRISay4nX+TuShpxz8qhtbw==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "dependencies": { + "ssr-window": "^4.0.2" + }, + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/synckit": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.5.tgz", @@ -3423,6 +3752,14 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, + "node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "engines": { + "node": ">= 6" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/package.json b/package.json index 414430e..9ab8acb 100644 --- a/package.json +++ b/package.json @@ -9,16 +9,25 @@ "lint": "next lint" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.3.0", + "@fortawesome/free-brands-svg-icons": "^6.3.0", + "@fortawesome/free-regular-svg-icons": "^6.3.0", + "@fortawesome/free-solid-svg-icons": "^6.3.0", + "@fortawesome/react-fontawesome": "^0.2.0", "@next/font": "13.1.6", "@types/node": "18.11.18", "@types/react": "18.0.27", "@types/react-dom": "18.0.10", + "animate.css": "^4.1.1", + "axios-error": "^1.0.4", + "babel-plugin-macros": "^3.1.0", "eslint": "8.33.0", "eslint-config-next": "13.1.6", "next": "13.1.6", "react": "18.2.0", "react-dom": "18.2.0", "sass": "^1.57.1", + "swiper": "^9.1.1", "typescript": "4.9.4" } } diff --git a/pages/Home.tsx b/pages/Home.tsx new file mode 100644 index 0000000..be6fa22 --- /dev/null +++ b/pages/Home.tsx @@ -0,0 +1,17 @@ +function Home() { + return ( + <> +
+

Home

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores + inventore atque id voluptates distinctio, aspernatur natus error + doloremque eum, ipsa eius numquam repellendus? Pariatur ex reiciendis + voluptatibus perspiciatis laborum veniam. +

+
+ + ); +} + +export default Home; diff --git a/pages/index.tsx b/pages/index.tsx index dc0eb63..ba28da3 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,7 +1,15 @@ -import Head from 'next/head' -import Image from 'next/image' -// import { Inter } from '@next/font/google' -// import styles from '../styles/Home.module.scss' +import Head from "next/head"; +import Image from "next/image"; +import styles from "../styles/Home.module.scss"; +import NavbarList from "../Components/NavbarList"; +import Landing from "../Components/Landing"; +import SignUpDone from "../Components/SignUpDone2"; +import { Inter } from "@next/font/google"; +import ProfileButtons from "@/Components/ProfileButtons"; +import ResetPassword1 from "../Components/ResetPassword1"; +import ResetPassword2 from "../Components/ResetPassword2"; +import PolishForm from "../Components/PolishForm"; +import Card from "@/Components/Card"; // const inter = Inter({ subsets: ['latin'] }) @@ -15,8 +23,8 @@ export default function Home() {
-
Index
+
- ) + ); } diff --git a/public/HeroImage.png b/public/HeroImage.png new file mode 100644 index 0000000..43664b4 Binary files /dev/null and b/public/HeroImage.png differ diff --git a/public/HeroImage.svg b/public/HeroImage.svg new file mode 100644 index 0000000..864db1c --- /dev/null +++ b/public/HeroImage.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/Logo.png b/public/Logo.png new file mode 100644 index 0000000..47fa26c Binary files /dev/null and b/public/Logo.png differ diff --git a/public/Logo.svg b/public/Logo.svg new file mode 100644 index 0000000..e9b9eb7 --- /dev/null +++ b/public/Logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/PassLogo.png b/public/PassLogo.png new file mode 100644 index 0000000..911e4ea Binary files /dev/null and b/public/PassLogo.png differ diff --git a/public/PassLogo.svg b/public/PassLogo.svg new file mode 100644 index 0000000..eeec69a --- /dev/null +++ b/public/PassLogo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/amico.svg b/public/amico.svg new file mode 100644 index 0000000..7b5c76c --- /dev/null +++ b/public/amico.svg @@ -0,0 +1,423 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/close-o.svg b/public/close-o.svg new file mode 100644 index 0000000..fa2ef37 --- /dev/null +++ b/public/close-o.svg @@ -0,0 +1,18 @@ + + + + \ No newline at end of file diff --git a/public/sprite.svg b/public/sprite.svg new file mode 100644 index 0000000..4d88e4c --- /dev/null +++ b/public/sprite.svg @@ -0,0 +1,439 @@ + \ No newline at end of file diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss index 97bb16c..ee8e50f 100644 --- a/styles/abstracts/_variables.scss +++ b/styles/abstracts/_variables.scss @@ -6,38 +6,33 @@ // light theme: /// @type Color $color-text-black: #313638 !default; -$color-text-offWhite:#E8E9EB !default; - -$color-bg-white:#FFFFFF !default; -$color-bg-button-offWhite: #E8E9EB !default; - -$color-primary:#0C84DF !default; -$color-secondary:#51C9FF !default; +$color-text-offWhite: #e8e9eb !default; +$color-bg-white: #ffffff !default; +$color-bg-button-offWhite: #e8e9eb !default; +$color-primary: #0c84df !default; +$color-secondary: #51c9ff !default; /// Regular font family /// @type List -$text-font-stack: 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default; +$text-font-stack: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", + "Helvetica", "Arial", sans-serif !default; /// Code (monospace) font family /// @type List -$code-font-stack: 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace !default; - +$code-font-stack: "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", + "Monaco", monospace !default; /// Container's maximum width /// @type Length $max-width: 1140px !default; - - /// Breakpoints map /// @prop {String} keys - Keys are identifiers mapped to a given length /// @prop {Map} values - Values are actual breakpoints expressed in pixels $breakpoints: ( - 'small': 320px, - 'medium': 768px, - 'large': 1024px, + "small": 320px, + "medium": 768px, + "large": 1024px, ) !default; - - diff --git a/styles/base/_helpers.scss b/styles/base/_helpers.scss index 528d7ea..8893a6e 100644 --- a/styles/base/_helpers.scss +++ b/styles/base/_helpers.scss @@ -2,7 +2,6 @@ // This file contains CSS helper classes. // ----------------------------------------------------------------------------- - /** * Main content containers * 1. Make the container full-width with a maximum width @@ -13,8 +12,8 @@ max-width: $max-width; /* 1 */ margin-left: auto; /* 2 */ margin-right: auto; /* 2 */ - padding-left: 20px; /* 3 */ - padding-right: 20px; /* 3 */ + padding-left: 15px; /* 3 */ + padding-right: 15px; /* 3 */ width: 100%; /* 1 */ } diff --git a/styles/base/_typography.scss b/styles/base/_typography.scss index 375158e..134f100 100644 --- a/styles/base/_typography.scss +++ b/styles/base/_typography.scss @@ -2,7 +2,21 @@ * Basic typography style for copy text */ +// * { +// -webkit-box-sizing: border-box; +// -moz-box-sizing: border-box; +// box-sizing: border-box; +// } + +* { + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + html { + scroll-behavior: smooth; font-size: 62.5%; } @@ -55,3 +69,13 @@ h3 { font-size: 2.4rem; } } + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +a { + text-decoration: none; +}