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/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 + +
+ +
+
+ + {/* */} + + {/* */} + +
+
+
+ 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..289f9a5 --- /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 { faUser } from "@fortawesome/free-regular-svg-icons"; + +// import { useRouter } from "next/router"; + +const SignUpDone = () => { + return ( + <> + {/* */} + +
+
+
+ + PassLogo + +
+ +
+
+ + {/* */} + + {/* */} + +
+
+
+

Your account has successfully activated

+
+ amico +
+

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

+
+
+
+ + {/* */} + + ); +}; + +export default SignUpDone; diff --git a/Components/landing.module.scss b/Components/landing.module.scss new file mode 100644 index 0000000..4fdf08c --- /dev/null +++ b/Components/landing.module.scss @@ -0,0 +1,246 @@ +@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; + background-color: $color-primary; +} + +.landing::before { + content: ""; + clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 95%); + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: $color-bg-white; + border-bottom-left-radius: 182px; + //z-index: -1; + //transform: skewY(6deg); + //transform-origin: top right; +} + +.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; + } +} + +/* 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..4917028 --- /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; /* 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; +} 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/package-lock.json b/package-lock.json index 0ecd230..90354e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,10 +8,17 @@ "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", + "babel-plugin-macros": "^3.1.0", "eslint": "8.33.0", "eslint-config-next": "13.1.6", "next": "13.1.6", @@ -21,6 +28,102 @@ "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 +157,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 +543,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 +706,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", @@ -680,6 +862,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 +1022,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 +1170,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", @@ -1980,6 +2199,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 +2516,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 +2579,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 +2936,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", @@ -3423,6 +3674,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..298690d 100644 --- a/package.json +++ b/package.json @@ -9,10 +9,17 @@ "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", + "babel-plugin-macros": "^3.1.0", "eslint": "8.33.0", "eslint-config-next": "13.1.6", "next": "13.1.6", 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..1bd760e 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,7 +1,10 @@ -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"; // const inter = Inter({ subsets: ['latin'] }) @@ -15,8 +18,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..ea9809f 100644 --- a/styles/base/_typography.scss +++ b/styles/base/_typography.scss @@ -2,7 +2,14 @@ * Basic typography style for copy text */ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + html { + scroll-behavior: smooth; font-size: 62.5%; } @@ -55,3 +62,13 @@ h3 { font-size: 2.4rem; } } + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +a { + text-decoration: none; +}