diff --git a/package-lock.json b/package-lock.json index 9d1820a..e92df1c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "antd": "^4.17.3", + "aos": "^2.3.4", "immutability-helper": "^3.1.1", "query-string": "^7.0.1", "react": "^17.0.2", @@ -3088,6 +3089,16 @@ "node": ">=0.10.0" } }, + "node_modules/aos": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz", + "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==", + "dependencies": { + "classlist-polyfill": "^1.0.3", + "lodash.debounce": "^4.0.6", + "lodash.throttle": "^4.0.1" + } + }, "node_modules/aproba": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", @@ -4895,6 +4906,11 @@ "node": ">=0.10.0" } }, + "node_modules/classlist-polyfill": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz", + "integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=" + }, "node_modules/classnames": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", @@ -10765,6 +10781,11 @@ "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=" }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" + }, "node_modules/lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -10792,6 +10813,11 @@ "lodash._reinterpolate": "^3.0.0" } }, + "node_modules/lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=" + }, "node_modules/lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -21525,6 +21551,16 @@ } } }, + "aos": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz", + "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==", + "requires": { + "classlist-polyfill": "^1.0.3", + "lodash.debounce": "^4.0.6", + "lodash.throttle": "^4.0.1" + } + }, "aproba": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", @@ -23012,6 +23048,11 @@ "static-extend": "^0.1.1" } }, + "classlist-polyfill": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz", + "integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=" + }, "classnames": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", @@ -27529,6 +27570,11 @@ "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=" }, + "lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -27556,6 +27602,11 @@ "lodash._reinterpolate": "^3.0.0" } }, + "lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=" + }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", diff --git a/package.json b/package.json index 01c1ab9..1dc5a81 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "antd": "^4.17.3", + "aos": "^2.3.4", "immutability-helper": "^3.1.1", "query-string": "^7.0.1", "react": "^17.0.2", diff --git a/public/index.html b/public/index.html index 7fb47ab..c3a1cec 100644 --- a/public/index.html +++ b/public/index.html @@ -11,6 +11,10 @@ /> + + + + Codedigger diff --git a/src/assets/Atcoder Box.png b/src/assets/Atcoder Box.png new file mode 100644 index 0000000..0dcbd3f Binary files /dev/null and b/src/assets/Atcoder Box.png differ diff --git a/src/assets/CodeChef Box.png b/src/assets/CodeChef Box.png new file mode 100644 index 0000000..60fd28e Binary files /dev/null and b/src/assets/CodeChef Box.png differ diff --git a/src/assets/Codeforces Box.png b/src/assets/Codeforces Box.png new file mode 100644 index 0000000..0d930c3 Binary files /dev/null and b/src/assets/Codeforces Box.png differ diff --git a/src/assets/Ellipse 1.png b/src/assets/Ellipse 1.png new file mode 100644 index 0000000..e767213 Binary files /dev/null and b/src/assets/Ellipse 1.png differ diff --git a/src/assets/Ellipse 2.png b/src/assets/Ellipse 2.png new file mode 100644 index 0000000..d202ea1 Binary files /dev/null and b/src/assets/Ellipse 2.png differ diff --git a/src/assets/Friends Box.png b/src/assets/Friends Box.png new file mode 100644 index 0000000..3ba516b Binary files /dev/null and b/src/assets/Friends Box.png differ diff --git a/src/assets/Growth Box.png b/src/assets/Growth Box.png new file mode 100644 index 0000000..752580f Binary files /dev/null and b/src/assets/Growth Box.png differ diff --git a/src/assets/Landing-Page Image.png b/src/assets/Landing-Page Image.png new file mode 100644 index 0000000..ce224d1 Binary files /dev/null and b/src/assets/Landing-Page Image.png differ diff --git a/src/assets/Level window.png b/src/assets/Level window.png new file mode 100644 index 0000000..c293f5a Binary files /dev/null and b/src/assets/Level window.png differ diff --git a/src/assets/Mentors Box.png b/src/assets/Mentors Box.png new file mode 100644 index 0000000..955c197 Binary files /dev/null and b/src/assets/Mentors Box.png differ diff --git a/src/assets/Problems window.png b/src/assets/Problems window.png new file mode 100644 index 0000000..9819903 Binary files /dev/null and b/src/assets/Problems window.png differ diff --git a/src/assets/Profile window.png b/src/assets/Profile window.png new file mode 100644 index 0000000..fd630e6 Binary files /dev/null and b/src/assets/Profile window.png differ diff --git a/src/assets/Topic Window.png b/src/assets/Topic Window.png new file mode 100644 index 0000000..c560ea1 Binary files /dev/null and b/src/assets/Topic Window.png differ diff --git a/src/assets/Upsolve Window.png b/src/assets/Upsolve Window.png new file mode 100644 index 0000000..922a20d Binary files /dev/null and b/src/assets/Upsolve Window.png differ diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000..3fcc155 Binary files /dev/null and b/src/assets/logo.png differ diff --git a/src/assets/user.png b/src/assets/user.png new file mode 100644 index 0000000..07bf334 Binary files /dev/null and b/src/assets/user.png differ diff --git a/src/components/ActionButton/ActionButton.js b/src/components/ActionButton/ActionButton.js new file mode 100644 index 0000000..cfbcc85 --- /dev/null +++ b/src/components/ActionButton/ActionButton.js @@ -0,0 +1,10 @@ +import styles from './ActionButton.module.css' +const ActionButton = ({ className, onClick, children }) => { + return ( + + ) +} + +export default ActionButton diff --git a/src/components/ActionButton/ActionButton.module.css b/src/components/ActionButton/ActionButton.module.css new file mode 100644 index 0000000..33da991 --- /dev/null +++ b/src/components/ActionButton/ActionButton.module.css @@ -0,0 +1,10 @@ +.button { + width: 200px; + height: 50px; + padding: 10px 50px; + background-color: #35ae9a; + border: none; + color: #fff; + font-family: 'Poppins'; + font-size: 16px; +} diff --git a/src/components/HomeInfo/HomeInfo.js b/src/components/HomeInfo/HomeInfo.js new file mode 100644 index 0000000..1adf21e --- /dev/null +++ b/src/components/HomeInfo/HomeInfo.js @@ -0,0 +1,13 @@ +import ActionButton from '../ActionButton/ActionButton' +import styles from './HomeInfo.module.css' +const HomeInfo = (props) => { + return ( + <> +

{props.heading}

+

{props.description}

+ Learn More + + ) +} + +export default HomeInfo diff --git a/src/components/HomeInfo/HomeInfo.module.css b/src/components/HomeInfo/HomeInfo.module.css new file mode 100644 index 0000000..5a0c23b --- /dev/null +++ b/src/components/HomeInfo/HomeInfo.module.css @@ -0,0 +1,35 @@ +.featTitle { + background-image: linear-gradient( + 90deg, + #35ae9a 25.41%, + rgba(0, 135, 169, 0.6) 103.95% + ); + background-clip: text; + color: transparent; + font-size: 58px; + text-align: left; + margin-bottom: 5px; + line-height: 62px; + width: 80%; + height: auto; + padding-bottom: 10px; + font-weight: 700; +} + +.featDesc { + font-family: 'Poppins'; + font-size: 18px; + font-weight: 300; + text-align: left; + color: #fff; + width: 70%; +} + +@media screen and (max-width: 1600px) { + .featTitle { + width: 100%; + } + .featDesc { + width: 100%; + } +} diff --git a/src/index.css b/src/index.css index ec2585e..faddf30 100644 --- a/src/index.css +++ b/src/index.css @@ -5,6 +5,9 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background-color: #121212; + color: #fff; + overflow-x: hidden; } code { diff --git a/src/pages/HomePage.module.css b/src/pages/HomePage.module.css new file mode 100644 index 0000000..975fde7 --- /dev/null +++ b/src/pages/HomePage.module.css @@ -0,0 +1,268 @@ +/* STYLES FOR HERO/LANDING PAGE */ + +.hero { + width: 65%; + height: auto; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin: auto; + margin-top: 120px; +} + +.heroInfo { + width: 60%; + height: auto; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + margin-right: 150px; + margin-bottom: 150px; +} + +.heroTitle { + font-size: 60px; + font-weight: 700; + color: #fff; + text-align: left; + margin-bottom: 20px; + line-height: 70px; +} + +.heroDesc { + color: #b0b0b0; + font-size: 16px; + text-align: left; + margin-bottom: 30px; + font-family: 'Poppins'; + font-weight: 300; + padding-right: 100px; +} + +.heroImgBox { + width: 40%; + height: auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + z-index: 2; +} + +.heroImage { + width: 100%; + height: auto; +} + +.heroBlur { + position: absolute; + z-index: -1; + bottom: 200px; + left: 50px; +} +.heroBlur2 { + position: absolute; + z-index: -1; + top: 200px; + right: 50px; +} + +/* STYLES FOR FEATURES */ + +.featBox { + width: 85%; + height: auto; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin: auto; + margin-top: 100px; +} + +.featImageBox { + position: relative; + z-index: 2; +} + +.featBlur { + position: absolute; + left: 500px; + z-index: -1; +} + +.featInfo { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + margin-bottom: 100px; + width: 50%; +} + +.featPlatform { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-top: 40px; +} + +.ladderInfo { + margin-left: 120px; +} +.ladderBox { + margin-top: 250px; + margin-bottom: 200px; +} + +.ladderImg, +.topicImg, +.levelImg { + position: absolute; +} +.ladderImg { + right: 100px; + bottom: -300px; +} + +.topicImg { + right: -150px; + bottom: -120px; + z-index: -2; +} + +.levelImg { + right: -150px; + bottom: -250px; + z-index: -1; +} + +.ladderBlur { + position: absolute; + right: 280px; + bottom: -170px; + z-index: -5; +} + +.listContainer { + width: 60%; + height: auto; + margin: auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 100px; +} + +.listItem { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.listInfo { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} + +.listHeading { + font-size: 36px; + background-image: linear-gradient( + 90deg, + #35ae9a 25.41%, + rgba(0, 135, 169, 0.6) 103.95% + ); + background-clip: text; + color: transparent; + margin-bottom: 0px; + margin-top: 0px; +} + +.listDesc { + font-size: 22px; + font-family: 'Poppins'; + color: #fff; + text-align: left; + font-weight: 300; + margin-top: 5px; +} + +@media screen and (max-width: 1600px) { + .home { + width: 95%; + margin-left: 10px; + } + .heroImgBox { + width: 50%; + } +} + +@media screen and (max-width: 1500px) { + .home img { + display: none; + } + .heroImgBox { + display: none; + } + .listItem > img { + display: block; + } + .featPlatform > img { + display: block; + } + .heroDesc { + padding-right: 50px; + } + .heroInfo { + width: 100%; + margin: 0px; + } + .heroTitle { + width: 100%; + } + .featBox { + width: 65%; + } + .featImageBox { + display: none; + } + .featInfo { + width: 100%; + } + .ladderBox { + margin-top: 50px; + margin-bottom: 50px; + } + .ladderInfo { + margin-left: 0px; + } + .listContainer { + width: 80%; + } +} + +@media screen and (max-width: 1000px) { + .hero { + width: 90%; + } + .featBox { + width: 90%; + } + .listContainer { + width: 90%; + } + .listHeading { + font-size: 28px; + } + .listDesc { + font-size: 16px; + } +} diff --git a/src/pages/Homepage.js b/src/pages/Homepage.js index 152fc3a..dc370d7 100644 --- a/src/pages/Homepage.js +++ b/src/pages/Homepage.js @@ -1,8 +1,165 @@ -import React from 'react' +import LandingImg from '../assets/Landing-Page Image.png' +import styles from './HomePage.module.css' +import Ellipse from '../assets/Ellipse 1.png' +import Ellipse2 from '../assets/Ellipse 2.png' +import CodeChef from '../assets/CodeChef Box.png' +import AtCoder from '../assets/Atcoder Box.png' +import CodeForces from '../assets/Codeforces Box.png' +import UpsolveWindow from '../assets/Upsolve Window.png' +import LevelWindow from '../assets/Level window.png' +import TopicWindow from '../assets/Topic Window.png' +import ProblemWindow from '../assets/Problems window.png' +import ProfileWindow from '../assets/Profile window.png' +import MentorsBox from '../assets/Mentors Box.png' +import GrowthBox from '../assets/Growth Box.png' +import FriendsBox from '../assets/Friends Box.png' +import ActionButton from '../components/ActionButton/ActionButton' +import HomeInfo from '../components/HomeInfo/HomeInfo' +import Aos from 'aos' -function Homepage(props) { - console.log(props) - return
Homepage
+const HomePage = () => { + const info = { + upsolve: { + heading: "Don't just solve but Upsolve.", + description: + 'The site provides the feature of upsolving the problems in a live or a virtual contest from three sites including Codechef, Codeforces, and Atcoder which helps the users to analyze their mistakes and thus provides scope for improvement.', + }, + ladder: { + heading: `Reach new heights by climbing this Ladder.`, + description: + 'It helps in listing the problems topic wise and levelwise (that is on the basis of difficulty). Before attempting the new problems the user has to make sure that he/she has solved all the previously listed problems.', + }, + profile: { + heading: 'Tired of having several profiles?', + description: + 'The site provides Competitive Programming profiles which help the users to track and analyze their algorithmic progress. Cards help the users to view their profiles for different Competitive Programming sites.', + }, + } + Aos.init() + + return ( +
+
+
+

+ One platform for all your competitive programming
needs + . +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi amet, + amet maecenas ipsum sit felis, sagittis purus proin. Faucibus neque + volutpat non risus amet, id aliquet eleifend sed. +

+ Sign up +
+
+ Code + Code + Code +
+
+ {/* UPSOLVE FEATURE */} +
+
+ Upsolve Window + Ellipse +
+
+ +
+ Platforms + Platforms + Platforms +
+
+
+ {/* LADDERS FEATURE */} +
+
+ +
+
+ Ladder Window + Topic Window + Level Window + Ellipse +
+
+ {/* PROFILE FEATURE */} +
+
+ Profile Window + Ellipse +
+
+ +
+
+
+
+ Friends +
+

Friends

+

+ The site provides Competitive Programming profiles which help the + users to track and analyze their algorithmic progress.{' '} +

+
+
+
+ Mentor +
+

Mentors

+

+ The site provides Competitive Programming profiles which help the + users to track and analyze their algorithmic progress.{' '} +

+
+
+
+ Growth +
+

Analysis

+

+ The site provides Competitive Programming profiles which help the + users to track and analyze their algorithmic progress.{' '} +

+
+
+
+
+ ) } -export default Homepage +export default HomePage diff --git a/yarn.lock b/yarn.lock index d3f88a5..bc6e3ec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2349,6 +2349,15 @@ "normalize-path" "^3.0.0" "picomatch" "^2.0.4" +"aos@^2.3.4": + "integrity" "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==" + "resolved" "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz" + "version" "2.3.4" + dependencies: + "classlist-polyfill" "^1.0.3" + "lodash.debounce" "^4.0.6" + "lodash.throttle" "^4.0.1" + "aproba@^1.1.1": "integrity" "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==" "resolved" "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz" @@ -3323,6 +3332,11 @@ "isobject" "^3.0.0" "static-extend" "^0.1.1" +"classlist-polyfill@^1.0.3": + "integrity" "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=" + "resolved" "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz" + "version" "1.2.0" + "classnames@^2.2.1", "classnames@^2.2.3", "classnames@^2.2.5", "classnames@^2.2.6", "classnames@^2.3.1", "classnames@2.x": "integrity" "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" "resolved" "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz" @@ -7126,6 +7140,11 @@ "resolved" "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz" "version" "3.0.0" +"lodash.debounce@^4.0.6": + "integrity" "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" + "resolved" "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz" + "version" "4.0.8" + "lodash.memoize@^4.1.2": "integrity" "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=" "resolved" "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz" @@ -7151,6 +7170,11 @@ dependencies: "lodash._reinterpolate" "^3.0.0" +"lodash.throttle@^4.0.1": + "integrity" "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=" + "resolved" "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz" + "version" "4.1.1" + "lodash.uniq@^4.5.0": "integrity" "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=" "resolved" "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"