diff --git a/package-lock.json b/package-lock.json index d236143d4..dc439fa05 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@docusaurus/theme-mermaid": "^3.3.2", "@docusaurus/theme-search-algolia": "^3.3.2", "@docusaurus/utils-validation": "^3.3.2", + "@fluentui/react-icons": "^2.0.242", "@fortawesome/fontawesome-svg-core": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", @@ -3030,6 +3031,11 @@ "node": ">=18.0" } }, + "node_modules/@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, "node_modules/@emotion/is-prop-valid": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", @@ -3050,6 +3056,18 @@ "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", "license": "MIT" }, + "node_modules/@fluentui/react-icons": { + "version": "2.0.242", + "resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-2.0.242.tgz", + "integrity": "sha512-OtVYVcXWuMrqTBRie4eNwPH56mJJq/pmdPhQCQcLFOnupUyXlnlCRnbJYXd+LDEWga6CCwfqZxI6NiPxpbg08Q==", + "dependencies": { + "@griffel/react": "^1.0.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "react": ">=16.8.0 <19.0.0" + } + }, "node_modules/@fortawesome/fontawesome-common-types": { "version": "6.5.2", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz", @@ -3111,6 +3129,39 @@ "react-dom": "^16 || ^17 || ^18" } }, + "node_modules/@griffel/core": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/@griffel/core/-/core-1.17.0.tgz", + "integrity": "sha512-OhLMYQ9zXVpKh3DULgK0Olsm1Xw5cvQuL7BV3UCWoJttAWGfrdIvSMxGCJ2FpWVyS/OBWoG4BTYh3oHTgxBWCQ==", + "dependencies": { + "@emotion/hash": "^0.9.0", + "@griffel/style-types": "^1.2.0", + "csstype": "^3.1.3", + "rtl-css-js": "^1.16.1", + "stylis": "^4.2.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@griffel/react": { + "version": "1.5.23", + "resolved": "https://registry.npmjs.org/@griffel/react/-/react-1.5.23.tgz", + "integrity": "sha512-pOOh+h+2JibSVlRfN6rzIigkPm6HONxMHEN3IWLB3gVU7OKEQHt/EOK+1ZePMzaMILZaaFDvuwCaKCkEq6QQ/Q==", + "dependencies": { + "@griffel/core": "^1.17.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "react": ">=16.8.0 <19.0.0" + } + }, + "node_modules/@griffel/style-types": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@griffel/style-types/-/style-types-1.2.0.tgz", + "integrity": "sha512-x166MNw0vWe5l5qhinfNT4eyWOaP48iFzPyFOfIB0/BVidKTWsEe5PmqRJDDtrJFS3VHhd/tE0oM6tkEMh2tsg==", + "dependencies": { + "csstype": "^3.1.3" + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -18637,6 +18688,14 @@ "randombytes": "^2.1.0" } }, + "node_modules/rtl-css-js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz", + "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==", + "dependencies": { + "@babel/runtime": "^7.1.2" + } + }, "node_modules/rtl-detect": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/rtl-detect/-/rtl-detect-1.1.2.tgz", diff --git a/package.json b/package.json index 142621ec3..ae7168050 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "@docusaurus/theme-mermaid": "^3.3.2", "@docusaurus/theme-search-algolia": "^3.3.2", "@docusaurus/utils-validation": "^3.3.2", + "@fluentui/react-icons": "^2.0.242", "@fortawesome/fontawesome-svg-core": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", diff --git a/src/components/HomePage/ResourcesSection.tsx b/src/components/HomePage/ResourcesSection.tsx new file mode 100644 index 000000000..e56c2c4d7 --- /dev/null +++ b/src/components/HomePage/ResourcesSection.tsx @@ -0,0 +1,186 @@ +import Link from "@docusaurus/Link"; +import React, { useState } from "react"; +import "./style.css"; +import { + ArrowRightFilled, + ChevronLeftRegular, + ChevronRightRegular, +} from "@fluentui/react-icons"; + +interface Resource { + url: string; + type: string; + title: string; + description: string; + image: string; + duration: string; +} + +const ALL_RESOURCES: Resource[] = [ + { + url: "https://www.codeharborhub.live/docs/", + type: "tutorial", + title: "Tutorial: For Beginners", + description: + "Get started with CodeHarborHub and learn how to use it to manage your codebases. This tutorial is for beginners.", + image: "/img/resources/tutorials.jpg", + duration: "10 min", + }, + { + url: "https://www.codeharborhub.live/courses/", + type: "courses", + title: "Courses: For Advanced Users", + description: + "Learn advanced topics in CodeHarborHub and become a pro. This course is for advanced users.", + image: "/img/resources/courses.jpg", + duration: "3 min", + }, + { + url: "https://www.codeharborhub.live/blog/", + type: "blog", + title: "Blog: For All Users", + description: + "Read our blog to get the latest updates, news, and articles on CodeHarborHub.", + image: "/img/resources/blogs.jpg", + duration: "7 min", + }, + { + url: "https://www.codeharborhub.live/dsa/", + type: "dsa", + title: "DSA: For Competitive Programmers", + description: + "Prepare for your next coding interview with our Data Structures and Algorithms course.", + image: "/img/resources/dsa.jpg", + duration: "5 min", + }, +]; + +function Resource({ + type, + url, + image, + title, + description, + duration, +}: Resource) { + return ( + +
+
+ {title} +
+

{title}

+

{description}

+
+
+
+ {`${duration} ${type === "video" ? "watch" : "read"}`} +
+
+ + ); +} + +export default function ResourcesSection() { + const [page, setPage] = useState(1); + const [activeType, setActiveType] = useState< + "all" | "blog" | "tutorial" | "courses" | "dsa" + >("all"); + + const resources = + activeType === "all" + ? ALL_RESOURCES + : ALL_RESOURCES.filter((r) => r.type === activeType); + + const currentResources = resources.slice((page - 1) * 3, page * 3); + + const pages = Math.ceil(resources.length / 3); + + const nextPage = () => { + if (page < pages) { + setPage(page + 1); + } + }; + + const prevPage = () => { + if (page > 1) { + setPage(page - 1); + } + }; + + return ( +
+
+
+
+ RESOURCES +

Want to know more?

+
+ + All Blogs + +
+ +
+ + + + + +
+ +
+
+ {currentResources.map((resource, idx) => { + return ; + })} +
+ +
+ + + +
+
+
+
+ ); +} diff --git a/src/components/HomePage/header.css b/src/components/HomePage/header.css index f53d02c6f..00ffe0240 100644 --- a/src/components/HomePage/header.css +++ b/src/components/HomePage/header.css @@ -41,6 +41,7 @@ .chh__header-content p { font-weight: 400; font-size: 22px; + text-align: justify; line-height: 30px; margin-top: 1.5rem; } diff --git a/src/components/HomePage/home.module.css b/src/components/HomePage/home.module.css index 9dc5da5d3..ed1ce5ead 100644 --- a/src/components/HomePage/home.module.css +++ b/src/components/HomePage/home.module.css @@ -8,7 +8,7 @@ } -.feature_item:hover ,.course_card:hover { +.feature_item:hover, .course_card:hover { scale: 1.03; box-shadow: 0 0 0 1px #f2f2f24a, 0 0 10px 0 #f2f2f255; transition: scale 0.3s ease-in; @@ -196,4 +196,4 @@ scale: 1.03; .play_icon { color: #f2f2f2; -} +} \ No newline at end of file diff --git a/src/components/HomePage/style.css b/src/components/HomePage/style.css new file mode 100644 index 000000000..fb880613f --- /dev/null +++ b/src/components/HomePage/style.css @@ -0,0 +1,214 @@ +.resources-section { + text-decoration: none; + margin-top: 3.75rem 0; + padding: 0 1.5rem; +} + +.resources-section .resources-container { + margin-left: auto; + margin-right: auto; + max-width: 100%; +} + +.resources-section .resources-container .resources-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 2.5rem; +} + +.resources-section .resources-container .resources-header .codeharborhub-badge { + display: inline-block; + margin-top: 1rem; + margin-bottom: 1rem; + padding: 0.5rem 1rem; + background-color: var(--ifm-color-primary); + color: white; + border-radius: 5px; +} + +.resources-section .resources-container .resources-header .resources-title { + margin-bottom: 1.5rem; + font-size: 2.25rem; +} + +.resources-section .resources-container .resources-header .resources-all-blogs { + font-family: "Jakarta", sans-serif; + font-size: 0.875rem; + font-weight: 600; + color: var(--ifm-color-primary); +} + +.resources-section .resources-container .resources-header .arrow-icon { + margin-left: 0.25rem; +} + +.resources-section .resources-container .resources-filters { + display: inline-flex; + gap: 0.25rem; + margin-bottom: 1.5rem; + border-radius: 0.5rem; + padding: 0.5rem; + font-family: "Jakarta", sans-serif; + font-size: 0.875rem; + font-weight: 600; +} + +.bg-secondary-700 { + background-color: var(--ifm-color-secondary); +} + +.dark\:bg-secondary-700 { + background-color: var(--ifm-color-secondary-dark); +} + +.resources-section .resources-container .resources-filters .filter-button { + padding: 0.5rem 1rem; + border: none; + cursor: pointer; + transition: background-color 0.2s, color 0.2s; + border-radius: 0.5rem; + font-size: 0.875rem; +} + +.resources-section + .resources-container + .resources-filters + .filter-button.active { + background-color: var(--ifm-color-primary); + color: #f9f9f9; +} + +.resources-section .resources-container .resources-content { + position: relative; + display: flex; + flex-direction: column; +} + +.resources-section .resources-container .resources-content .resources-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1.5rem; +} + +.resources-section + .resources-container + .resources-content + .resources-grid + .resource { + text-decoration: none; + color: inherit; +} + +.resources-section + .resources-container + .resources-content + .resources-grid + .fade-in { + animation: fadeIn 1s ease-in-out; +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.resources-section + .resources-container + .resources-content + .resources-grid + .resource-image-container { + margin-bottom: 0.75rem; + overflow: hidden; + border-radius: 0.5rem; +} + +.resources-section + .resources-container + .resources-content + .resources-grid + .resource-image { + aspect-ratio: 16 / 9; + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.2s; +} + +.resources-section + .resources-container + .resources-content + .resources-grid + .resource:hover + .resource-image { + transform: scale(1.1); +} + +.resources-section + .resources-container + .resources-content + .resources-grid + .resource-title { + font-weight: 600; + margin-bottom: 8px; +} + +.resources-section + .resources-container + .resources-content + .resources-grid + .resource-description { + line-height: 1.375; +} + +.resources-section + .resources-container + .resources-content + .resources-grid.resource-footer { + margin-top: 16px; + display: flex; + justify-content: space-between; +} + +.resources-section + .resources-container + .resources-content + .resources-grid + .resource-duration { + font-size: 14px; + color: #666; +} + +.resources-section .resources-container .pagination { + display: flex; + justify-content: center; + gap: 1rem; +} + +.resources-section .resources-container .pagination .pagination-button { + background: none; + border: none; + cursor: pointer; + padding: 8px; +} + +.resources-section .resources-container .pagination .chevron-icon { + width: 24px; + height: 24px; +} + +@media (max-width: 768px) { + .resources-section .resources-container .resources-content .resources-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 480px) { + .resources-section .resources-container .resources-content .resources-grid { + grid-template-columns: 1fr; + } +} diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 902fb61de..8b1d94dc7 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -33,21 +33,4 @@ .section { padding: 1rem; -} - -/* scrollbar.css */ -::-webkit-scrollbar { - width: 10px; -} -/* Track */ -::-webkit-scrollbar-track { - background: var(--ifm-color-primary); -} -/* Handle */ -::-webkit-scrollbar-thumb { - background: darkgray; - border-radius: 10px; -} -::-webkit-scrollbar-thumb:hover { - background: darkgrey; -} +} \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 14e619cdd..068fdaa07 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -4,13 +4,14 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import Layout from "@theme/Layout"; import Heading from "@theme/Heading"; import styles from "./index.module.css"; -import Features from "../components/HomePage/Features"; -import Courses from "../components/HomePage/Courses"; -import { featuresData, coursesData } from "../database/home"; +// import Features from "../components/HomePage/Features"; +// import Courses from "../components/HomePage/Courses"; +// import { featuresData, coursesData } from "../database/home"; import Header from "../components/HomePage/Header"; import Tweet from "../components/Tweet"; import Tweets, { type TweetItem } from "../data/tweets"; import { motion } from "framer-motion"; +import ResourcesSection from "../components/HomePage/ResourcesSection"; import ScrollToTopButton from "../components/Buttons/bottom/ScrollToBottomButton"; import ScrollToBottomButton from "../components/Buttons/top/ScrollToTopButton"; @@ -80,7 +81,7 @@ export default function Home() {
- - - + + */} + +
+ +
diff --git a/static/img/resources/blogs.jpg b/static/img/resources/blogs.jpg new file mode 100644 index 000000000..7765b0fcb Binary files /dev/null and b/static/img/resources/blogs.jpg differ diff --git a/static/img/resources/courses.jpg b/static/img/resources/courses.jpg new file mode 100644 index 000000000..3dae1e01d Binary files /dev/null and b/static/img/resources/courses.jpg differ diff --git a/static/img/resources/dsa.jpg b/static/img/resources/dsa.jpg new file mode 100644 index 000000000..eff629b7a Binary files /dev/null and b/static/img/resources/dsa.jpg differ diff --git a/static/img/resources/projects.jpg b/static/img/resources/projects.jpg new file mode 100644 index 000000000..11e1edd32 Binary files /dev/null and b/static/img/resources/projects.jpg differ diff --git a/static/img/resources/tutorials.jpg b/static/img/resources/tutorials.jpg new file mode 100644 index 000000000..88bf92cda Binary files /dev/null and b/static/img/resources/tutorials.jpg differ