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}
+
{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