-
-
- We aim to review all Pull Requests within 48 hours. Make sure to
- check the "Files Changed" tab for any linting errors before
- submitting.
-
-
- Open a Pull Request
+ {/* =====================================================
+ FAQ
+ ====================================================== */}
+
+
+
+
FAQ
+
+
Contributor questions.
+
+
+ A few answers to help you get started with your first
+ contribution.
+
+
+
+
+ {faqs.map((faq, index) => {
+ const isOpen = openFaq === index;
+
+ return (
+
+
setOpenFaq(isOpen ? null : index)}
+ aria-expanded={isOpen}
+ >
+ {faq.question}
+
+
+
+ {isOpen && (
+
+ )}
+
+ );
+ })}
+
+
+
+ {/* =====================================================
+ FINAL CTA
+ ====================================================== */}
+
+
+
+
+
+
+
+ YOUR CONTRIBUTION MATTERS
+
+
+
Ready to contribute?
+
+
+ Explore the CodeHarborHub repositories, find something useful to
+ improve and start building with the community.
+
+
+
+
);
}
+
+export default Contributing;
diff --git a/src/pages/contributing/styles.module.css b/src/pages/contributing/styles.module.css
new file mode 100644
index 000000000..349230949
--- /dev/null
+++ b/src/pages/contributing/styles.module.css
@@ -0,0 +1,1257 @@
+.page {
+ --contrib-border: var(--ifm-color-emphasis-200);
+ --contrib-muted: var(--ifm-color-emphasis-600);
+ --contrib-surface: var(--ifm-background-surface-color);
+ --contrib-primary: var(--ifm-color-primary);
+ --contrib-primary-dark: var(--ifm-color-primary-dark);
+ --contrib-radius: 20px;
+
+ min-height: 100vh;
+ overflow: hidden;
+}
+
+.container {
+ width: min(1180px, calc(100% - 40px));
+ margin: 0 auto;
+}
+
+/* =========================================================
+ HERO
+========================================================= */
+
+.hero {
+ position: relative;
+ padding: 1rem 0;
+ overflow: hidden;
+ border-bottom: 1px solid var(--contrib-border);
+ background:
+ radial-gradient(
+ circle at 15% 20%,
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 14%,
+ transparent
+ ),
+ transparent 32%
+ ),
+ radial-gradient(
+ circle at 85% 20%,
+ color-mix(in srgb, #8b5cf6 10%, transparent),
+ transparent 30%
+ ),
+ var(--ifm-background-color);
+}
+
+.heroGrid {
+ position: absolute;
+ inset: 0;
+ opacity: 0.35;
+ background-image:
+ linear-gradient(
+ color-mix(in srgb, var(--contrib-border) 40%, transparent) 1px,
+ transparent 1px
+ ),
+ linear-gradient(
+ 90deg,
+ color-mix(in srgb, var(--contrib-border) 40%, transparent) 1px,
+ transparent 1px
+ );
+ background-size: 48px 48px;
+ mask-image: linear-gradient(to bottom, black, transparent);
+ pointer-events: none;
+}
+
+.hero .container {
+ position: relative;
+ z-index: 1;
+ display: grid;
+ grid-template-columns: 1.05fr 0.95fr;
+ gap: 70px;
+ align-items: center;
+}
+
+.heroContent {
+ max-width: 700px;
+}
+
+.eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 7px 12px;
+ border: 1px solid
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 25%,
+ var(--contrib-border)
+ );
+ border-radius: 999px;
+ color: var(--contrib-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 7%,
+ transparent
+ );
+ font-size: 0.82rem;
+ font-weight: 750;
+}
+
+.hero h1 {
+ margin: 1rem 0 0;
+ font-size: clamp(2.2rem, 5vw, 4rem);
+ line-height: 1.02;
+ letter-spacing: -0.055em;
+ font-weight: 850;
+}
+
+.hero h1 span {
+ display: block;
+ background: linear-gradient(
+ 120deg,
+ var(--ifm-color-primary),
+ #8b5cf6
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ line-height: normal;
+}
+
+.heroContent > p {
+ margin: 1rem 0 0;
+ color: var(--contrib-muted);
+ font-size: 1.06rem;
+ line-height: 1.8;
+}
+
+.heroActions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-top: 30px;
+}
+
+.primaryButton,
+.secondaryButton,
+.outlineButton {
+ min-height: 46px;
+ padding: 0 17px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 9px;
+ border-radius: 12px;
+ text-decoration: none !important;
+ font-weight: 750;
+ transition:
+ transform 160ms ease,
+ background 160ms ease,
+ border-color 160ms ease,
+ box-shadow 160ms ease;
+}
+
+.primaryButton {
+ color: #fff !important;
+ background: var(--contrib-primary);
+ box-shadow: 0 12px 30px
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 22%,
+ transparent
+ );
+}
+
+.primaryButton:hover {
+ color: #fff !important;
+ background: var(--contrib-primary-dark);
+ transform: translateY(-2px);
+}
+
+.secondaryButton,
+.outlineButton {
+ color: var(--ifm-font-color-base) !important;
+ border: 1px solid var(--contrib-border);
+ background: var(--contrib-surface);
+}
+
+.secondaryButton:hover,
+.outlineButton:hover {
+ color: var(--contrib-primary) !important;
+ border-color: var(--contrib-primary);
+ transform: translateY(-2px);
+}
+
+.heroStats {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 30px;
+ margin-top: 35px;
+}
+
+.heroStats div {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+}
+
+.heroStats strong {
+ font-size: 0.86rem;
+}
+
+.heroStats span {
+ color: var(--contrib-muted);
+ font-size: 0.76rem;
+}
+
+/* =========================================================
+ TERMINAL
+========================================================= */
+
+.heroVisual {
+ display: flex;
+ justify-content: center;
+}
+
+.terminal {
+ width: min(100%, 510px);
+ overflow: hidden;
+ border: 1px solid var(--contrib-border);
+ border-radius: 18px;
+ background: #101114;
+ box-shadow: 0 35px 90px rgba(0, 0, 0, 0.2);
+ transform: rotate(1deg);
+}
+
+.terminalTop {
+ height: 45px;
+ padding: 0 15px;
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ border-bottom: 1px solid #292b31;
+ color: #858992;
+ font-family:
+ "SFMono-Regular",
+ Consolas,
+ monospace;
+ font-size: 0.73rem;
+}
+
+.terminalDots {
+ display: flex;
+ gap: 7px;
+}
+
+.terminalDots span {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: #45474e;
+}
+
+.terminalTitle {
+ opacity: 0.8;
+}
+
+.terminalBody {
+ position: relative;
+ min-height: 320px;
+ padding: 28px;
+ color: #d7d9df;
+ font-family:
+ "SFMono-Regular",
+ Consolas,
+ "Liberation Mono",
+ monospace;
+ font-size: 0.79rem;
+ line-height: 2;
+}
+
+.green {
+ color: #4ade80;
+}
+
+.blue {
+ color: #60a5fa;
+}
+
+.terminalSpace {
+ height: 12px;
+}
+
+.cursor {
+ margin-top: 10px;
+ color: #4ade80;
+ animation: blink 1s infinite;
+}
+
+@keyframes blink {
+ 50% {
+ opacity: 0;
+ }
+}
+
+/* =========================================================
+ HEADINGS
+========================================================= */
+
+.sectionHeading {
+ display: flex;
+ align-items: end;
+ justify-content: space-between;
+ gap: 35px;
+ margin-bottom: 32px;
+}
+
+.sectionHeading h2,
+.sectionHeadingCentered h2 {
+ margin: 8px 0 0;
+ font-size: clamp(1.9rem, 3vw, 2.7rem);
+ line-height: 1.1;
+ letter-spacing: -0.04em;
+}
+
+.sectionHeading > p {
+ max-width: 460px;
+ margin: 0;
+ color: var(--contrib-muted);
+ line-height: 1.7;
+}
+
+.sectionHeadingCentered {
+ max-width: 720px;
+ margin: 0 auto 40px;
+ text-align: center;
+}
+
+.sectionHeadingCentered p {
+ margin: 14px auto 0;
+ color: var(--contrib-muted);
+ line-height: 1.7;
+}
+
+.sectionLabel {
+ color: var(--contrib-primary);
+ font-size: 0.73rem;
+ font-weight: 800;
+ letter-spacing: 0.13em;
+}
+
+/* =========================================================
+ PRINCIPLES
+========================================================= */
+
+.principlesSection {
+ padding: 80px 0;
+ background: var(--ifm-background-surface-color);
+}
+
+.principleGrid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 15px;
+}
+
+.principleCard {
+ padding: 24px;
+ border: 1px solid var(--contrib-border);
+ border-radius: var(--contrib-radius);
+ background: var(--ifm-background-color);
+}
+
+.iconBox,
+.contributionIcon,
+.issueIcon,
+.quickStartIcon,
+.finalIcon {
+ display: grid;
+ place-items: center;
+ color: var(--contrib-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 10%,
+ transparent
+ );
+}
+
+.iconBox {
+ width: 43px;
+ height: 43px;
+ border-radius: 12px;
+}
+
+.principleCard h3 {
+ margin: 20px 0 8px;
+ font-size: 1rem;
+}
+
+.principleCard p {
+ margin: 0;
+ color: var(--contrib-muted);
+ font-size: 0.85rem;
+ line-height: 1.65;
+}
+
+/* =========================================================
+ CONTRIBUTION EXPLORER
+========================================================= */
+
+.contributionSection {
+ padding: 90px 0;
+}
+
+.explorer {
+ border: 1px solid var(--contrib-border);
+ border-radius: 24px;
+ overflow: hidden;
+ background: var(--contrib-surface);
+}
+
+.explorerToolbar {
+ padding: 17px;
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ border-bottom: 1px solid var(--contrib-border);
+}
+
+.searchBox {
+ flex: 1;
+ min-width: 220px;
+ height: 43px;
+ display: flex;
+ align-items: center;
+ gap: 9px;
+ padding: 0 13px;
+ border: 1px solid var(--contrib-border);
+ border-radius: 11px;
+ color: var(--contrib-muted);
+ background: var(--ifm-background-color);
+}
+
+.searchBox input {
+ width: 100%;
+ border: 0;
+ outline: 0;
+ color: var(--ifm-font-color-base);
+ background: transparent;
+ font: inherit;
+ font-size: 0.82rem;
+}
+
+.categoryFilters {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+}
+
+.filterButton,
+.filterActive {
+ min-height: 36px;
+ padding: 0 11px;
+ border: 1px solid var(--contrib-border);
+ border-radius: 9px;
+ color: var(--contrib-muted);
+ background: transparent;
+ font: inherit;
+ font-size: 0.76rem;
+ font-weight: 700;
+ cursor: pointer;
+}
+
+.filterActive {
+ color: #fff;
+ border-color: var(--contrib-primary);
+ background: var(--contrib-primary);
+}
+
+.filterButton:hover {
+ color: var(--contrib-primary);
+ border-color: var(--contrib-primary);
+}
+
+.contributionGrid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 1px;
+ background: var(--contrib-border);
+}
+
+.contributionCard {
+ min-height: 245px;
+ padding: 24px;
+ background: var(--ifm-background-color);
+}
+
+.contributionTop {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+}
+
+.contributionIcon {
+ width: 45px;
+ height: 45px;
+ border-radius: 12px;
+}
+
+.difficulty {
+ padding: 5px 9px;
+ border: 1px solid var(--contrib-border);
+ border-radius: 999px;
+ color: var(--contrib-muted);
+ font-size: 0.67rem;
+ font-weight: 700;
+}
+
+.contributionCard h3 {
+ margin: 20px 0 8px;
+ font-size: 1.06rem;
+}
+
+.contributionCard p {
+ min-height: 69px;
+ margin: 0;
+ color: var(--contrib-muted);
+ font-size: 0.84rem;
+ line-height: 1.65;
+}
+
+.cardLink {
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ margin-top: 17px;
+ color: var(--contrib-primary);
+ font-size: 0.82rem;
+ font-weight: 750;
+ text-decoration: none;
+}
+
+.cardLink:hover {
+ text-decoration: underline;
+}
+
+.emptyState {
+ padding: 60px 20px;
+ text-align: center;
+ color: var(--contrib-muted);
+}
+
+.emptyState h3 {
+ margin: 15px 0 5px;
+ color: var(--ifm-font-color-base);
+}
+
+.emptyState p {
+ margin: 0;
+}
+
+/* =========================================================
+ QUICK START
+========================================================= */
+
+.quickStartSection {
+ padding: 0 0 85px;
+}
+
+.quickStart {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ padding: 26px;
+ border: 1px solid
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 25%,
+ var(--contrib-border)
+ );
+ border-radius: 20px;
+ background:
+ linear-gradient(
+ 100deg,
+ color-mix(in srgb, var(--ifm-color-primary) 7%, transparent),
+ transparent
+ ),
+ var(--contrib-surface);
+}
+
+.quickStartIcon {
+ flex: 0 0 48px;
+ width: 48px;
+ height: 48px;
+ border-radius: 13px;
+}
+
+.quickStartContent {
+ flex: 1;
+}
+
+.quickStartContent h2 {
+ margin: 5px 0 5px;
+ font-size: 1.3rem;
+}
+
+.quickStartContent p {
+ margin: 0;
+ color: var(--contrib-muted);
+ font-size: 0.84rem;
+ line-height: 1.6;
+}
+
+.quickSteps {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-top: 14px;
+ color: var(--contrib-muted);
+ font-size: 0.75rem;
+}
+
+.quickSteps span {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+}
+
+.quickSteps span svg {
+ color: var(--ifm-color-success);
+}
+
+.outlineButton {
+ flex: 0 0 auto;
+}
+
+/* =========================================================
+ WORKFLOW
+========================================================= */
+
+.workflowSection {
+ padding: 90px 0;
+ background: var(--ifm-background-surface-color);
+}
+
+.workflowGrid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 14px;
+}
+
+.workflowCard {
+ display: flex;
+ gap: 15px;
+ padding: 23px;
+ border: 1px solid var(--contrib-border);
+ border-radius: 18px;
+ background: var(--ifm-background-color);
+}
+
+.workflowNumber {
+ flex: 0 0 40px;
+ width: 40px;
+ height: 40px;
+ display: grid;
+ place-items: center;
+ border-radius: 11px;
+ color: var(--contrib-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 10%,
+ transparent
+ );
+ font-size: 0.73rem;
+ font-weight: 850;
+}
+
+.workflowCard h3 {
+ margin: 1px 0 7px;
+ font-size: 0.97rem;
+}
+
+.workflowCard p {
+ margin: 0;
+ color: var(--contrib-muted);
+ font-size: 0.81rem;
+ line-height: 1.65;
+}
+
+/* =========================================================
+ GIT
+========================================================= */
+
+.gitSection {
+ padding: 90px 0;
+}
+
+.gitLayout {
+ display: grid;
+ grid-template-columns: 0.85fr 1.15fr;
+ gap: 65px;
+ align-items: center;
+}
+
+.gitLayout h2 {
+ margin: 9px 0 15px;
+ font-size: clamp(1.9rem, 3vw, 2.7rem);
+ line-height: 1.1;
+ letter-spacing: -0.04em;
+}
+
+.gitLayout > div:first-child > p {
+ color: var(--contrib-muted);
+ line-height: 1.75;
+}
+
+.gitChecklist {
+ display: grid;
+ gap: 11px;
+ margin-top: 25px;
+}
+
+.gitChecklist div {
+ display: flex;
+ align-items: center;
+ gap: 9px;
+ color: var(--contrib-muted);
+ font-size: 0.84rem;
+}
+
+.gitChecklist svg {
+ flex: 0 0 auto;
+ color: var(--ifm-color-success);
+}
+
+.gitDiagram {
+ padding: 28px;
+ border: 1px solid var(--contrib-border);
+ border-radius: 22px;
+ background: var(--contrib-surface);
+}
+
+.gitNode {
+ min-height: 53px;
+ padding: 0 15px;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ border: 1px solid var(--contrib-border);
+ border-radius: 12px;
+ color: var(--ifm-font-color-base);
+ background: var(--ifm-background-color);
+ font-size: 0.84rem;
+ font-weight: 700;
+}
+
+.gitNode svg {
+ color: var(--contrib-primary);
+}
+
+.gitLine {
+ width: 1px;
+ height: 24px;
+ margin-left: 27px;
+ background: var(--contrib-border);
+}
+
+/* =========================================================
+ QUALITY
+========================================================= */
+
+.qualitySection {
+ padding: 90px 0;
+ background: var(--ifm-background-surface-color);
+}
+
+.qualityLayout {
+ display: grid;
+ grid-template-columns: 0.72fr 1.28fr;
+ gap: 55px;
+ align-items: start;
+}
+
+.qualityIntro h2 {
+ margin: 9px 0 14px;
+ font-size: clamp(1.9rem, 3vw, 2.6rem);
+ line-height: 1.1;
+ letter-spacing: -0.04em;
+}
+
+.qualityIntro > p {
+ color: var(--contrib-muted);
+ line-height: 1.75;
+}
+
+.qualityBadge {
+ display: flex;
+ align-items: center;
+ gap: 11px;
+ margin-top: 28px;
+ padding: 14px;
+ border: 1px solid var(--contrib-border);
+ border-radius: 13px;
+}
+
+.qualityBadge svg {
+ color: var(--contrib-primary);
+}
+
+.qualityBadge strong,
+.qualityBadge span {
+ display: block;
+}
+
+.qualityBadge strong {
+ font-size: 0.84rem;
+}
+
+.qualityBadge span {
+ margin-top: 2px;
+ color: var(--contrib-muted);
+ font-size: 0.74rem;
+}
+
+.checklistCard {
+ padding: 22px;
+ border: 1px solid var(--contrib-border);
+ border-radius: 20px;
+ background: var(--ifm-background-color);
+}
+
+.checklistItem {
+ display: flex;
+ align-items: flex-start;
+ gap: 10px;
+ padding: 10px 0;
+ color: var(--contrib-muted);
+ font-size: 0.82rem;
+ line-height: 1.55;
+}
+
+.checklistItem + .checklistItem {
+ border-top: 1px solid
+ color-mix(in srgb, var(--contrib-border) 65%, transparent);
+}
+
+.checklistItem svg {
+ flex: 0 0 auto;
+ margin-top: 2px;
+ color: var(--ifm-color-success);
+}
+
+/* =========================================================
+ ISSUES
+========================================================= */
+
+.issueSection {
+ padding: 85px 0;
+}
+
+.issueGrid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 16px;
+}
+
+.issueCard {
+ padding: 28px;
+ border: 1px solid var(--contrib-border);
+ border-radius: 20px;
+ background: var(--contrib-surface);
+}
+
+.issueIcon {
+ width: 43px;
+ height: 43px;
+ border-radius: 12px;
+}
+
+.issueCard h3 {
+ margin: 19px 0 15px;
+ font-size: 1.05rem;
+}
+
+.issueCard ul {
+ margin: 0;
+ padding-left: 19px;
+ color: var(--contrib-muted);
+ font-size: 0.83rem;
+ line-height: 1.8;
+}
+
+/* =========================================================
+ COMMUNITY
+========================================================= */
+
+.communitySection {
+ padding: 0 0 85px;
+}
+
+.communityCard {
+ display: flex;
+ align-items: center;
+ gap: 18px;
+ padding: 28px;
+ border: 1px solid var(--contrib-border);
+ border-radius: 22px;
+ background:
+ radial-gradient(
+ circle at 10% 20%,
+ color-mix(in srgb, var(--ifm-color-primary) 10%, transparent),
+ transparent 30%
+ ),
+ var(--contrib-surface);
+}
+
+.communityIcon {
+ flex: 0 0 48px;
+ width: 48px;
+ height: 48px;
+ display: grid;
+ place-items: center;
+ border-radius: 13px;
+ color: var(--contrib-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 10%,
+ transparent
+ );
+}
+
+.communityCard > div:nth-child(2) {
+ flex: 1;
+}
+
+.communityCard h2 {
+ margin: 5px 0 5px;
+ font-size: 1.3rem;
+}
+
+.communityCard p {
+ margin: 0;
+ color: var(--contrib-muted);
+ font-size: 0.83rem;
+ line-height: 1.6;
+}
+
+/* =========================================================
+ FAQ
+========================================================= */
+
+.faqSection {
+ padding: 90px 0;
+ background: var(--ifm-background-surface-color);
+}
+
+.faqList {
+ max-width: 900px;
+ margin: 0 auto;
+ display: grid;
+ gap: 10px;
+}
+
+.faqItem {
+ overflow: hidden;
+ border: 1px solid var(--contrib-border);
+ border-radius: 15px;
+ background: var(--ifm-background-color);
+}
+
+.faqItemOpen {
+ border-color: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 28%,
+ var(--contrib-border)
+ );
+}
+
+.faqQuestion {
+ width: 100%;
+ padding: 19px 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 20px;
+ border: 0;
+ color: var(--ifm-font-color-base);
+ background: transparent;
+ font: inherit;
+ font-weight: 700;
+ text-align: left;
+ cursor: pointer;
+}
+
+.faqQuestion:hover {
+ color: var(--contrib-primary);
+}
+
+.faqChevron {
+ flex: 0 0 auto;
+ transition: transform 180ms ease;
+}
+
+.faqItemOpen .faqChevron {
+ transform: rotate(180deg);
+}
+
+.faqAnswer {
+ padding: 0 20px 20px;
+}
+
+.faqAnswer p {
+ margin: 0;
+ color: var(--contrib-muted);
+ line-height: 1.7;
+}
+
+/* =========================================================
+ FINAL
+========================================================= */
+
+.finalSection {
+ padding: 90px 0 110px;
+}
+
+.finalCard {
+ position: relative;
+ overflow: hidden;
+ padding: 70px 25px;
+ border: 1px solid
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 25%,
+ var(--contrib-border)
+ );
+ border-radius: 28px;
+ text-align: center;
+ background:
+ radial-gradient(
+ circle at 50% 0%,
+ color-mix(in srgb, var(--ifm-color-primary) 13%, transparent),
+ transparent 45%
+ ),
+ var(--contrib-surface);
+}
+
+.finalIcon {
+ width: 54px;
+ height: 54px;
+ margin: 0 auto 20px;
+ border-radius: 15px;
+}
+
+.finalCard h2 {
+ margin: 8px 0 12px;
+ font-size: clamp(2rem, 4vw, 3.2rem);
+ letter-spacing: -0.045em;
+}
+
+.finalCard > p {
+ max-width: 660px;
+ margin: 0 auto;
+ color: var(--contrib-muted);
+ line-height: 1.75;
+}
+
+.finalActions {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-top: 28px;
+}
+
+/* =========================================================
+ RESPONSIVE
+========================================================= */
+
+@media (max-width: 996px) {
+ .hero {
+ padding: 75px 0;
+ }
+
+ .hero .container {
+ grid-template-columns: 1fr;
+ gap: 50px;
+ }
+
+ .heroVisual {
+ justify-content: flex-start;
+ }
+
+ .terminal {
+ transform: none;
+ }
+
+ .principleGrid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .contributionGrid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .workflowGrid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .gitLayout,
+ .qualityLayout {
+ grid-template-columns: 1fr;
+ gap: 40px;
+ }
+}
+
+@media (max-width: 760px) {
+ .container {
+ width: min(100% - 28px, 1180px);
+ }
+
+ .sectionHeading {
+ display: block;
+ }
+
+ .sectionHeading > p {
+ margin-top: 12px;
+ }
+
+ .explorerToolbar {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .searchBox {
+ min-width: 0;
+ }
+
+ .categoryFilters {
+ overflow-x: auto;
+ flex-wrap: nowrap;
+ padding-bottom: 3px;
+ }
+
+ .categoryFilters button {
+ flex: 0 0 auto;
+ }
+
+ .quickStart {
+ align-items: flex-start;
+ flex-wrap: wrap;
+ }
+
+ .quickStartContent {
+ min-width: calc(100% - 70px);
+ }
+
+ .outlineButton {
+ width: 100%;
+ }
+
+ .communityCard {
+ align-items: flex-start;
+ flex-wrap: wrap;
+ }
+
+ .communityCard > div:nth-child(2) {
+ min-width: calc(100% - 70px);
+ }
+
+ .communityCard .primaryButton {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ .hero {
+ padding: 58px 0;
+ }
+
+ .hero h1 {
+ font-size: clamp(2.35rem, 12vw, 3.5rem);
+ }
+
+ .heroContent > p {
+ font-size: 0.96rem;
+ }
+
+ .heroActions {
+ flex-direction: column;
+ }
+
+ .heroActions .primaryButton,
+ .heroActions .secondaryButton {
+ width: 100%;
+ }
+
+ .heroStats {
+ gap: 18px;
+ }
+
+ .principleGrid,
+ .contributionGrid,
+ .workflowGrid,
+ .issueGrid {
+ grid-template-columns: 1fr;
+ }
+
+ .contributionCard {
+ min-height: auto;
+ }
+
+ .contributionCard p {
+ min-height: auto;
+ }
+
+ .principlesSection,
+ .contributionSection,
+ .workflowSection,
+ .gitSection,
+ .qualitySection,
+ .faqSection {
+ padding: 65px 0;
+ }
+
+ .terminalBody {
+ padding: 21px;
+ font-size: 0.7rem;
+ overflow-x: auto;
+ }
+
+ .gitDiagram {
+ padding: 18px;
+ }
+
+ .finalSection {
+ padding: 65px 0 80px;
+ }
+
+ .finalCard {
+ padding: 50px 20px;
+ border-radius: 21px;
+ }
+
+ .finalActions {
+ flex-direction: column;
+ }
+
+ .finalActions .primaryButton,
+ .finalActions .secondaryButton {
+ width: 100%;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .primaryButton,
+ .secondaryButton,
+ .outlineButton,
+ .filterButton,
+ .filterActive,
+ .faqChevron {
+ transition: none;
+ }
+
+ .cursor {
+ animation: none;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/contributors/index.module.css b/src/pages/contributors/index.module.css
new file mode 100644
index 000000000..1892c764d
--- /dev/null
+++ b/src/pages/contributors/index.module.css
@@ -0,0 +1,1295 @@
+/* =========================================================
+ CodeHarborHub Contributors
+ Contributors.module.css
+ ========================================================= */
+
+.page {
+ min-height: 100vh;
+ overflow: hidden;
+ color: var(--ifm-font-color-base);
+ background: var(--ifm-background-color);
+}
+
+.container {
+ /* width: min(1180px, calc(100% - 40px)); */
+ margin-inline: auto;
+ padding: 1rem;
+}
+
+
+/* =========================================================
+ BUTTONS
+ ========================================================= */
+
+.primaryButton,
+.secondaryButton {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 9px;
+ min-height: 46px;
+ padding: 0.75rem 1.15rem;
+ border-radius: 12px;
+ font-size: 0.88rem;
+ font-weight: 750;
+ text-decoration: none !important;
+ cursor: pointer;
+ transition:
+ transform 180ms ease,
+ box-shadow 180ms ease,
+ border-color 180ms ease,
+ background-color 180ms ease;
+}
+
+.primaryButton {
+ color: #fff !important;
+ border: 1px solid var(--ifm-color-primary);
+ background: var(--ifm-color-primary);
+ box-shadow:
+ 0 10px 28px
+ color-mix(in srgb, var(--ifm-color-primary) 22%, transparent);
+}
+
+.primaryButton:hover {
+ color: #fff !important;
+ transform: translateY(-2px);
+ box-shadow:
+ 0 15px 35px
+ color-mix(in srgb, var(--ifm-color-primary) 30%, transparent);
+}
+
+.secondaryButton {
+ color: var(--ifm-font-color-base) !important;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ background: var(--ifm-background-surface-color);
+}
+
+.secondaryButton:hover {
+ color: var(--ifm-color-primary) !important;
+ border-color: var(--ifm-color-primary);
+ transform: translateY(-2px);
+}
+
+
+/* =========================================================
+ HERO
+ ========================================================= */
+
+.hero {
+ position: relative;
+ isolation: isolate;
+ display: flex;
+ align-items: center;
+ min-height: 560px;
+ padding: 2rem 0;
+ overflow: hidden;
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ background:
+ linear-gradient(
+ 180deg,
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 5%,
+ transparent
+ ),
+ transparent 75%
+ ),
+ var(--ifm-background-color);
+}
+
+.heroGrid {
+ position: absolute;
+ inset: 0;
+ z-index: -3;
+ opacity: 0.35;
+ pointer-events: none;
+ background-image:
+ linear-gradient(
+ to right,
+ var(--ifm-color-emphasis-100) 1px,
+ transparent 1px
+ ),
+ linear-gradient(
+ to bottom,
+ var(--ifm-color-emphasis-100) 1px,
+ transparent 1px
+ );
+ background-size: 48px 48px;
+
+ mask-image: linear-gradient(
+ to bottom,
+ black,
+ transparent 90%
+ );
+}
+
+.heroGlow {
+ position: absolute;
+ z-index: -2;
+ top: -18rem;
+ right: -10rem;
+ width: 40rem;
+ height: 40rem;
+ border-radius: 50%;
+ pointer-events: none;
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 12%,
+ transparent
+ );
+ filter: blur(100px);
+}
+
+.heroContent {
+ text-align: center;
+ margin-inline: auto;
+}
+
+.eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 1.5rem;
+ padding: 7px 12px 7px 7px;
+ color: var(--ifm-color-primary);
+ border: 1px solid
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 20%,
+ transparent
+ );
+ border-radius: 999px;
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 7%,
+ transparent
+ );
+ font-size: 0.68rem;
+ font-weight: 800;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
+
+.eyebrowIcon {
+ width: 27px;
+ height: 27px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ border-radius: 50%;
+ background: var(--ifm-color-primary);
+}
+
+.hero h1 {
+ margin: 0;
+ color: var(--ifm-heading-color);
+ font-size: clamp(2rem, 5vw, 4.8rem);
+ font-weight: 850;
+ letter-spacing: -0.06em;
+ line-height: 0.98;
+}
+
+.hero h1 span {
+ color: var(--ifm-color-primary);
+}
+
+.heroContent > p {
+ max-width: 690px;
+ margin: 1.5rem auto 0;
+ color: var(--ifm-color-emphasis-600);
+ font-size: clamp(0.98rem, 2vw, 1.12rem);
+ line-height: 1.8;
+}
+
+.heroActions {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 11px;
+ margin-top: 2rem;
+}
+
+.heroTrust {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 1.3rem;
+ margin-top: 1.5rem;
+}
+
+.heroTrust span {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.72rem;
+ font-weight: 650;
+}
+
+.heroTrust svg {
+ color: var(--ifm-color-primary);
+}
+
+
+/* =========================================================
+ STATS
+ ========================================================= */
+
+.statsSection {
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-emphasis-100) 35%,
+ var(--ifm-background-color)
+ );
+}
+
+.statsGrid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+}
+
+.statCard {
+ min-height: 110px;
+ display: flex;
+ align-items: center;
+ gap: 13px;
+ padding: 1.3rem 1.5rem;
+ border-left: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.statCard:last-child {
+ border-right: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.statIcon {
+ width: 43px;
+ height: 43px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ color: var(--ifm-color-primary);
+ border: 1px solid
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 18%,
+ transparent
+ );
+ border-radius: 12px;
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 7%,
+ transparent
+ );
+}
+
+.statCard div:last-child {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+}
+
+.statCard strong {
+ color: var(--ifm-heading-color);
+ font-size: 1rem;
+ font-weight: 800;
+}
+
+.statCard span {
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.7rem;
+}
+
+
+/* =========================================================
+ SECTIONS
+ ========================================================= */
+
+.featuredSection,
+.contributorsSection {
+ padding: 6rem 0;
+}
+
+.sectionHeading {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ gap: 2rem;
+ margin-bottom: 2rem;
+}
+
+.sectionEyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 0.65rem;
+ color: var(--ifm-color-primary);
+ font-size: 0.68rem;
+ font-weight: 800;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
+
+.sectionEyebrow > span {
+ width: 22px;
+ height: 2px;
+ border-radius: 999px;
+ background: currentColor;
+}
+
+.sectionHeading h2 {
+ margin: 0;
+ color: var(--ifm-heading-color);
+ font-size: clamp(2rem, 4vw, 3rem);
+ font-weight: 850;
+ letter-spacing: -0.04em;
+}
+
+.sectionHeading p {
+ max-width: 650px;
+ margin: 0.75rem 0 0;
+ color: var(--ifm-color-emphasis-600);
+ line-height: 1.7;
+}
+
+.sectionCount {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ flex-shrink: 0;
+ padding: 9px 12px;
+ color: var(--ifm-color-emphasis-600);
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 10px;
+ background: var(--ifm-background-surface-color);
+ font-size: 0.72rem;
+}
+
+.sectionCount svg {
+ color: var(--ifm-color-primary);
+}
+
+.sectionCount strong {
+ color: var(--ifm-heading-color);
+}
+
+
+/* =========================================================
+ FEATURED CONTRIBUTORS
+ ========================================================= */
+
+.featuredSection {
+ background:
+ linear-gradient(
+ 180deg,
+ transparent,
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 2%,
+ transparent
+ )
+ );
+}
+
+.featuredGrid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 15px;
+}
+
+.featuredCard {
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ min-height: 110px;
+ padding: 18px;
+ color: inherit !important;
+ text-decoration: none !important;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 18px;
+ background: var(--ifm-background-surface-color);
+ transition:
+ transform 200ms ease,
+ border-color 200ms ease,
+ box-shadow 200ms ease;
+}
+
+.featuredCard:hover {
+ transform: translateY(-4px);
+ border-color: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 40%,
+ var(--ifm-color-emphasis-200)
+ );
+ box-shadow: 0 18px 40px rgba(0, 0, 0, 0.07);
+}
+
+.featuredFirst {
+ border-color: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 25%,
+ var(--ifm-color-emphasis-200)
+ );
+}
+
+.rank {
+ position: absolute;
+ top: 10px;
+ right: 12px;
+ color: var(--ifm-color-primary);
+ font-size: 0.62rem;
+ font-weight: 850;
+}
+
+.featuredAvatar {
+ width: 58px;
+ height: 58px;
+ flex-shrink: 0;
+ border-radius: 16px;
+ object-fit: cover;
+ border: 2px solid
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 18%,
+ transparent
+ );
+}
+
+.featuredInfo {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ min-width: 0;
+}
+
+.featuredInfo strong {
+ overflow: hidden;
+ color: var(--ifm-heading-color);
+ font-size: 0.84rem;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.featuredInfo span {
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.68rem;
+}
+
+.featuredArrow {
+ margin-left: auto;
+ color: var(--ifm-color-emphasis-500);
+ transition:
+ color 180ms ease,
+ transform 180ms ease;
+}
+
+.featuredCard:hover .featuredArrow {
+ color: var(--ifm-color-primary);
+ transform: translate(2px, -2px);
+}
+
+
+/* =========================================================
+ TOOLBAR
+ ========================================================= */
+
+.toolbar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ margin-bottom: 0.9rem;
+ padding: 9px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 15px;
+ background: var(--ifm-background-surface-color);
+}
+
+.searchBox {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ min-width: 220px;
+ padding: 0 10px;
+ color: var(--ifm-color-emphasis-500);
+}
+
+.searchBox input {
+ width: 100%;
+ height: 40px;
+ padding: 0;
+ color: var(--ifm-font-color-base);
+ border: 0;
+ outline: none;
+ background: transparent;
+ font-size: 0.82rem;
+}
+
+.searchBox input::placeholder {
+ color: var(--ifm-color-emphasis-500);
+}
+
+.searchBox input::-webkit-search-cancel-button {
+ display: none;
+}
+
+.clearButton {
+ width: 30px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ padding: 0;
+ color: var(--ifm-color-emphasis-600);
+ border: 0;
+ border-radius: 8px;
+ background: transparent;
+ cursor: pointer;
+}
+
+.clearButton:hover {
+ color: var(--ifm-color-danger);
+ background: var(--ifm-color-emphasis-100);
+}
+
+.sortGroup {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 4px;
+ border-radius: 10px;
+ background: var(--ifm-color-emphasis-100);
+}
+
+.sortGroup > span {
+ padding-inline: 8px;
+ color: var(--ifm-color-emphasis-500);
+ font-size: 0.65rem;
+ font-weight: 700;
+}
+
+.sortGroup button {
+ min-height: 31px;
+ padding: 0 10px;
+ color: var(--ifm-color-emphasis-700);
+ border: 0;
+ border-radius: 7px;
+ background: transparent;
+ font-size: 0.65rem;
+ font-weight: 750;
+ cursor: pointer;
+}
+
+.sortGroup button:hover {
+ color: var(--ifm-heading-color);
+}
+
+.sortGroup .activeSort {
+ color: var(--ifm-color-primary);
+ background: var(--ifm-background-surface-color);
+ box-shadow: 0 2px 7px rgba(0, 0, 0, 0.06);
+}
+
+.resultInfo {
+ display: flex;
+ gap: 5px;
+ margin-bottom: 1.1rem;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.7rem;
+}
+
+.resultInfo strong {
+ color: var(--ifm-heading-color);
+}
+
+
+/* =========================================================
+ CONTRIBUTOR GRID
+ ========================================================= */
+
+.contributorGrid {
+ display: grid;
+ grid-template-columns: repeat(6, minmax(0, 1fr));
+ gap: 11px;
+}
+
+.contributorCard {
+ position: relative;
+ min-width: 0;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 12px;
+ color: inherit !important;
+ text-decoration: none !important;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 14px;
+ background: var(--ifm-background-surface-color);
+ transition:
+ transform 180ms ease,
+ border-color 180ms ease,
+ background-color 180ms ease;
+}
+
+.contributorCard:hover {
+ transform: translateY(-3px);
+ border-color: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 35%,
+ var(--ifm-color-emphasis-200)
+ );
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 3%,
+ var(--ifm-background-surface-color)
+ );
+}
+
+.avatarWrapper {
+ position: relative;
+ flex-shrink: 0;
+}
+
+.avatar {
+ width: 48px;
+ height: 48px;
+ display: block;
+ border-radius: 13px;
+ object-fit: cover;
+ background: var(--ifm-color-emphasis-100);
+}
+
+.onlineDot {
+ position: absolute;
+ right: -2px;
+ bottom: -2px;
+ width: 10px;
+ height: 10px;
+ border: 2px solid var(--ifm-background-surface-color);
+ border-radius: 50%;
+ background: #22c55e;
+}
+
+.contributorInfo {
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+}
+
+.contributorInfo strong {
+ overflow: hidden;
+ color: var(--ifm-heading-color);
+ font-size: 0.7rem;
+ font-weight: 800;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.contributorInfo span {
+ overflow: hidden;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.6rem;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.contributorArrow {
+ margin-left: auto;
+ flex-shrink: 0;
+ color: var(--ifm-color-emphasis-400);
+ transition:
+ color 180ms ease,
+ transform 180ms ease;
+}
+
+.contributorCard:hover .contributorArrow {
+ color: var(--ifm-color-primary);
+ transform: translate(2px, -2px);
+}
+
+
+/* =========================================================
+ LOADING
+ ========================================================= */
+
+.skeletonCard {
+ min-height: 74px;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 12px;
+ overflow: hidden;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 14px;
+ background: var(--ifm-background-surface-color);
+}
+
+.skeletonAvatar,
+.skeletonLine,
+.skeletonSmall {
+ position: relative;
+ overflow: hidden;
+ background: var(--ifm-color-emphasis-100);
+}
+
+.skeletonAvatar::after,
+.skeletonLine::after,
+.skeletonSmall::after {
+ position: absolute;
+ inset: 0;
+ content: "";
+ transform: translateX(-100%);
+ background: linear-gradient(
+ 90deg,
+ transparent,
+ color-mix(
+ in srgb,
+ var(--ifm-color-emphasis-300) 35%,
+ transparent
+ ),
+ transparent
+ );
+ animation: shimmer 1.4s infinite;
+}
+
+.skeletonAvatar {
+ width: 48px;
+ height: 48px;
+ flex-shrink: 0;
+ border-radius: 13px;
+}
+
+.skeletonLine {
+ width: 80px;
+ height: 9px;
+ border-radius: 4px;
+}
+
+.skeletonSmall {
+ width: 55px;
+ height: 7px;
+ margin-left: -75px;
+ margin-top: 27px;
+ border-radius: 4px;
+}
+
+
+/* =========================================================
+ STATE
+ ========================================================= */
+
+.stateCard {
+ min-height: 330px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 3rem 1.5rem;
+ text-align: center;
+ border: 1px dashed var(--ifm-color-emphasis-300);
+ border-radius: 20px;
+ background: var(--ifm-background-surface-color);
+}
+
+.stateIcon {
+ width: 56px;
+ height: 56px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 1rem;
+ color: var(--ifm-color-primary);
+ border-radius: 16px;
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 8%,
+ transparent
+ );
+}
+
+.stateCard h3 {
+ margin: 0;
+ color: var(--ifm-heading-color);
+}
+
+.stateCard p {
+ max-width: 450px;
+ margin: 0.6rem 0 1.3rem;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.85rem;
+ line-height: 1.7;
+}
+
+.loadMore {
+ display: flex;
+ justify-content: center;
+ margin-top: 2rem;
+}
+
+
+/* =========================================================
+ CTA
+ ========================================================= */
+
+.ctaSection {
+ position: relative;
+ isolation: isolate;
+ overflow: hidden;
+ padding: 7rem 0;
+ color: #fff;
+ background:
+ radial-gradient(
+ circle at 15% 20%,
+ rgba(59, 130, 246, 0.2),
+ transparent 24rem
+ ),
+ radial-gradient(
+ circle at 85% 80%,
+ rgba(124, 58, 237, 0.18),
+ transparent 25rem
+ ),
+ #080b10;
+}
+
+.ctaGrid {
+ position: absolute;
+ z-index: -1;
+ inset: 0;
+ opacity: 0.12;
+ background-image:
+ linear-gradient(
+ rgba(255, 255, 255, 0.2) 1px,
+ transparent 1px
+ ),
+ linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 0.2) 1px,
+ transparent 1px
+ );
+ background-size: 50px 50px;
+
+ mask-image: linear-gradient(
+ to bottom,
+ transparent,
+ black 25%,
+ black 75%,
+ transparent
+ );
+}
+
+.ctaGlow {
+ position: absolute;
+ z-index: -1;
+ width: 30rem;
+ height: 30rem;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ border-radius: 50%;
+ background: rgba(59, 130, 246, 0.08);
+ filter: blur(90px);
+}
+
+.ctaContent {
+ max-width: 760px;
+ margin-inline: auto;
+ text-align: center;
+}
+
+.ctaIcon {
+ width: 58px;
+ height: 58px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto 1.3rem;
+ color: #fff;
+ border: 1px solid rgba(255, 255, 255, 0.13);
+ border-radius: 17px;
+ background: rgba(255, 255, 255, 0.06);
+}
+
+.ctaEyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ margin-bottom: 0.7rem;
+ color: #93c5fd;
+ font-size: 0.67rem;
+ font-weight: 800;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
+
+.ctaContent h2 {
+ margin: 0;
+ color: #fff;
+ font-size: clamp(2.8rem, 6vw, 5rem);
+ font-weight: 850;
+ letter-spacing: -0.055em;
+ line-height: 1;
+}
+
+.ctaContent > p {
+ max-width: 600px;
+ margin: 1.3rem auto 0;
+ color: rgba(255, 255, 255, 0.6);
+ line-height: 1.75;
+}
+
+.ctaActions {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 11px;
+ margin-top: 2rem;
+}
+
+.ctaPrimary,
+.ctaSecondary {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 9px;
+ min-height: 50px;
+ padding: 0.8rem 1.25rem;
+ border-radius: 12px;
+ font-size: 0.85rem;
+ font-weight: 750;
+ text-decoration: none !important;
+ transition:
+ transform 180ms ease,
+ background-color 180ms ease,
+ border-color 180ms ease;
+}
+
+.ctaPrimary {
+ color: #fff !important;
+ background: var(--ifm-color-primary);
+ border: 1px solid var(--ifm-color-primary);
+}
+
+.ctaPrimary:hover {
+ color: #fff !important;
+ transform: translateY(-2px);
+}
+
+.ctaSecondary {
+ color: #fff !important;
+ border: 1px solid rgba(255, 255, 255, 0.13);
+ background: rgba(255, 255, 255, 0.06);
+}
+
+.ctaSecondary:hover {
+ color: #fff !important;
+ transform: translateY(-2px);
+ border-color: rgba(255, 255, 255, 0.28);
+ background: rgba(255, 255, 255, 0.09);
+}
+
+.ctaFooter {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ margin-top: 1.6rem;
+ color: rgba(255, 255, 255, 0.38);
+ font-size: 0.67rem;
+}
+
+.ctaFooter svg {
+ color: #f87171;
+}
+
+
+/* =========================================================
+ ANIMATIONS
+ ========================================================= */
+
+@keyframes shimmer {
+ 100% {
+ transform: translateX(100%);
+ }
+}
+
+
+/* =========================================================
+ TABLET
+ ========================================================= */
+
+@media (max-width: 1100px) {
+ .contributorGrid {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+
+ .hero {
+ min-height: 500px;
+ }
+}
+
+
+/* =========================================================
+ MOBILE
+ ========================================================= */
+
+@media (max-width: 760px) {
+ .container {
+ width: min(100% - 28px, 680px);
+ }
+
+ .hero {
+ min-height: auto;
+ padding: 4rem 0;
+ }
+
+ .hero h1 {
+ font-size: clamp(2.25rem, 13vw, 2rem);
+ }
+
+ .heroContent > p {
+ font-size: 0.9rem;
+ }
+
+ .heroActions {
+ flex-direction: column;
+ }
+
+ .heroActions > * {
+ width: 100%;
+ }
+
+ .heroTrust {
+ gap: 0.7rem 1rem;
+ }
+
+ .heroTrust span {
+ font-size: 0.65rem;
+ }
+
+ .statsGrid {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ .statCard {
+ min-height: 90px;
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ }
+
+ .statCard:nth-child(odd) {
+ border-left: 1px solid var(--ifm-color-emphasis-200);
+ }
+
+ .statCard:nth-child(even) {
+ border-right: 1px solid var(--ifm-color-emphasis-200);
+ }
+
+ .featuredSection,
+ .contributorsSection {
+ padding: 4.5rem 0;
+ }
+
+ .sectionHeading {
+ align-items: flex-start;
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .sectionCount {
+ align-self: flex-start;
+ }
+
+ .featuredGrid {
+ grid-template-columns: 1fr;
+ }
+
+ .toolbar {
+ align-items: stretch;
+ flex-direction: column;
+ }
+
+ .sortGroup {
+ overflow-x: auto;
+ }
+
+ .sortGroup button {
+ flex: 1;
+ white-space: nowrap;
+ }
+
+ .contributorGrid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 9px;
+ }
+
+ .contributorCard {
+ padding: 10px;
+ }
+
+ .avatar {
+ width: 43px;
+ height: 43px;
+ }
+
+ .contributorArrow {
+ display: none;
+ }
+
+ .ctaSection {
+ padding: 5rem 0;
+ }
+
+ .ctaContent h2 {
+ font-size: 3rem;
+ }
+
+ .ctaActions {
+ flex-direction: column;
+ }
+
+ .ctaActions > * {
+ width: 100%;
+ }
+}
+
+
+/* =========================================================
+ SMALL MOBILE
+ ========================================================= */
+
+@media (max-width: 430px) {
+ .container {
+ width: min(100% - 22px, 680px);
+ }
+
+ .hero h1 {
+ font-size: 2.55rem;
+ }
+
+ .heroTrust {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ text-align: left;
+ }
+
+ .statsGrid {
+ grid-template-columns: 1fr;
+ }
+
+ .statCard,
+ .statCard:nth-child(odd),
+ .statCard:nth-child(even) {
+ border-left: 1px solid var(--ifm-color-emphasis-200);
+ border-right: 1px solid var(--ifm-color-emphasis-200);
+ }
+
+ .contributorGrid {
+ grid-template-columns: 1fr;
+ }
+
+ .contributorCard {
+ min-height: 64px;
+ }
+
+ .sectionHeading h2 {
+ font-size: 2rem;
+ }
+
+ .ctaContent h2 {
+ font-size: 2.5rem;
+ }
+}
+
+
+/* =========================================================
+ DARK MODE
+ ========================================================= */
+
+[data-theme="dark"] .page {
+ background:
+ radial-gradient(
+ circle at 10% 0%,
+ rgba(46, 147, 226, 0.045),
+ transparent 30rem
+ ),
+ var(--ifm-background-color);
+}
+
+[data-theme="dark"] .heroGrid {
+ opacity: 0.18;
+}
+
+[data-theme="dark"] .toolbar,
+[data-theme="dark"] .featuredCard,
+[data-theme="dark"] .contributorCard,
+[data-theme="dark"] .stateCard,
+[data-theme="dark"] .skeletonCard {
+ box-shadow: none;
+}
+
+[data-theme="dark"] .sortGroup {
+ background: rgba(255, 255, 255, 0.045);
+}
+
+[data-theme="dark"] .sortGroup .activeSort {
+ background: rgba(255, 255, 255, 0.08);
+ box-shadow: none;
+}
+
+[data-theme="dark"] .contributorCard:hover {
+ background: rgba(255, 255, 255, 0.025);
+}
+
+
+/* =========================================================
+ ACCESSIBILITY
+ ========================================================= */
+
+.primaryButton:focus-visible,
+.secondaryButton:focus-visible,
+.ctaPrimary:focus-visible,
+.ctaSecondary:focus-visible,
+.contributorCard:focus-visible,
+.featuredCard:focus-visible,
+.sortGroup button:focus-visible,
+.clearButton:focus-visible {
+ outline: 3px solid
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 35%,
+ transparent
+ );
+ outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .primaryButton,
+ .secondaryButton,
+ .ctaPrimary,
+ .ctaSecondary,
+ .contributorCard,
+ .featuredCard,
+ .featuredArrow,
+ .contributorArrow {
+ transition: none;
+ }
+
+ .primaryButton:hover,
+ .secondaryButton:hover,
+ .ctaPrimary:hover,
+ .ctaSecondary:hover,
+ .contributorCard:hover,
+ .featuredCard:hover {
+ transform: none;
+ }
+
+ .skeletonAvatar::after,
+ .skeletonLine::after,
+ .skeletonSmall::after {
+ animation: none;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/contributors/index.tsx b/src/pages/contributors/index.tsx
new file mode 100644
index 000000000..e627ecdcc
--- /dev/null
+++ b/src/pages/contributors/index.tsx
@@ -0,0 +1,829 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+// @ts-ignore
+import Layout from "@theme/Layout";
+// @ts-ignore
+import Head from "@docusaurus/Head";
+// @ts-ignore
+import Link from "@docusaurus/Link";
+import {
+ ArrowRight,
+ ArrowUpRight,
+ GitBranch,
+ Github,
+ Heart,
+ Search,
+ Sparkles,
+ Star,
+ Users,
+ X,
+} from "lucide-react";
+import { motion } from "framer-motion";
+// @ts-ignore
+import styles from "./index.module.css";
+
+interface Contributor {
+ login: string;
+ id: number;
+ avatar_url: string;
+ html_url: string;
+ contributions: number;
+ type?: string;
+}
+
+interface GitHubRepo {
+ stargazers_count: number;
+ forks_count: number;
+ watchers_count: number;
+ subscribers_count?: number;
+}
+
+interface ContributorStats {
+ contributors: number;
+ stars: number;
+ forks: number;
+}
+
+type SortOption = "contributions" | "name";
+
+const GITHUB_API = "https://api.github.com";
+
+const REPOSITORY_OWNER = "CodeHarborHub";
+const REPOSITORY_NAME = "codeharborhub.github.io";
+
+const REPOSITORY_URL = `https://github.com/${REPOSITORY_OWNER}/${REPOSITORY_NAME}`;
+
+const IGNORED_USERS = new Set([
+ "dependabot[bot]",
+ "github-actions[bot]",
+]);
+
+const CONTRIBUTORS_PER_PAGE = 48;
+
+async function fetchGitHub
(
+ endpoint: string,
+ signal?: AbortSignal,
+): Promise {
+ const response = await fetch(`${GITHUB_API}${endpoint}`, {
+ signal,
+ headers: {
+ Accept: "application/vnd.github+json",
+ },
+ });
+
+ if (!response.ok) {
+ throw new Error(
+ `GitHub API request failed with status ${response.status}.`,
+ );
+ }
+
+ return response.json() as Promise;
+}
+
+export default function Contributors(): JSX.Element {
+ const [contributors, setContributors] = useState([]);
+ const [stats, setStats] = useState({
+ contributors: 0,
+ stars: 0,
+ forks: 0,
+ });
+
+ const [loading, setLoading] = useState(true);
+ const [statsLoading, setStatsLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ const [searchQuery, setSearchQuery] = useState("");
+ const [sortBy, setSortBy] =
+ useState("contributions");
+
+ const [visibleCount, setVisibleCount] = useState(
+ CONTRIBUTORS_PER_PAGE,
+ );
+
+ const loadContributors = useCallback(
+ async (signal: AbortSignal) => {
+ try {
+ setLoading(true);
+ setError(null);
+
+ const [contributorsResponse, repositoryResponse] =
+ await Promise.all([
+ fetchGitHub(
+ `/repos/${REPOSITORY_OWNER}/${REPOSITORY_NAME}/contributors?per_page=100`,
+ signal,
+ ),
+ fetchGitHub(
+ `/repos/${REPOSITORY_OWNER}/${REPOSITORY_NAME}`,
+ signal,
+ ),
+ ]);
+
+ const cleanContributors = contributorsResponse.filter(
+ (contributor) =>
+ !IGNORED_USERS.has(contributor.login) &&
+ contributor.type !== "Bot",
+ );
+
+ setContributors(cleanContributors);
+
+ setStats({
+ contributors: cleanContributors.length,
+ stars: repositoryResponse.stargazers_count,
+ forks: repositoryResponse.forks_count,
+ });
+ } catch (err) {
+ if (err instanceof DOMException && err.name === "AbortError") {
+ return;
+ }
+
+ console.error("Failed to load contributors:", err);
+
+ setError(
+ "We couldn't load the contributor list right now. Please try again.",
+ );
+ } finally {
+ if (!signal.aborted) {
+ setLoading(false);
+ setStatsLoading(false);
+ }
+ }
+ },
+ [],
+ );
+
+ useEffect(() => {
+ const controller = new AbortController();
+
+ loadContributors(controller.signal);
+
+ return () => controller.abort();
+ }, [loadContributors]);
+
+ const filteredContributors = useMemo(() => {
+ const query = searchQuery.trim().toLowerCase();
+
+ const result = contributors.filter((contributor) =>
+ contributor.login.toLowerCase().includes(query),
+ );
+
+ return [...result].sort((a, b) => {
+ if (sortBy === "name") {
+ return a.login.localeCompare(b.login);
+ }
+
+ return b.contributions - a.contributions;
+ });
+ }, [contributors, searchQuery, sortBy]);
+
+ const visibleContributors = filteredContributors.slice(
+ 0,
+ visibleCount,
+ );
+
+ const hasMore = visibleCount < filteredContributors.length;
+
+ const topContributors = useMemo(
+ () =>
+ [...contributors]
+ .sort((a, b) => b.contributions - a.contributions)
+ .slice(0, 3),
+ [contributors],
+ );
+
+ const totalContributions = useMemo(
+ () =>
+ contributors.reduce(
+ (total, contributor) =>
+ total + contributor.contributions,
+ 0,
+ ),
+ [contributors],
+ );
+
+ const clearSearch = () => {
+ setSearchQuery("");
+ setVisibleCount(CONTRIBUTORS_PER_PAGE);
+ };
+
+ const handleSearch = (value: string) => {
+ setSearchQuery(value);
+ setVisibleCount(CONTRIBUTORS_PER_PAGE);
+ };
+
+ const handleSort = (value: SortOption) => {
+ setSortBy(value);
+ setVisibleCount(CONTRIBUTORS_PER_PAGE);
+ };
+
+ return (
+
+
+
+ {/* =====================================================
+ HERO
+ ====================================================== */}
+
+
+
+
+
+
+
+
+
+
+
+ Open source community
+
+
+
+ Built by contributors.
+ Powered by community.
+
+
+
+ CodeHarborHub is shaped by developers, learners, writers,
+ designers, and open-source contributors from around the
+ world.
+
+
+
+
+
+ Contribute on GitHub
+
+
+
+
+ Join the community
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* =====================================================
+ STATS
+ ====================================================== */}
+
+
+
+
+
+
+
+
+
+
+ {statsLoading
+ ? "—"
+ : `${stats.contributors}+`}
+
+
+ Contributors
+
+
+
+
+
+
+
+
+
+ {statsLoading
+ ? "—"
+ : `${totalContributions}+`}
+
+
+ Contributions
+
+
+
+
+
+
+
+
+
+ {statsLoading
+ ? "—"
+ : `${stats.stars}`}
+
+
+ GitHub stars
+
+
+
+
+
+
+
+
+
+ {statsLoading
+ ? "—"
+ : `${stats.forks}`}
+
+
+ Repository forks
+
+
+
+
+
+ {/* =====================================================
+ TOP CONTRIBUTORS
+ ====================================================== */}
+
+ {!loading && topContributors.length > 0 && (
+
+
+
+
+
+
+
+
Top contributors
+
+
+ A special thank-you to the people who have made
+ significant contributions to the project.
+
+
+
+
+
+ {topContributors.map((contributor, index) => (
+
+
+ #{index + 1}
+
+
+
+ @{contributor.login}
+
+
+ {contributor.contributions} contributions
+
+
+
+
+ ))}
+
+
+ )}
+
+ {/* =====================================================
+ CONTRIBUTORS
+ ====================================================== */}
+
+
+
+
+
+
+
+
+
Meet our contributors
+
+
+ Every contribution matters — from documentation and
+ tutorials to code, design, testing, and ideas.
+
+
+
+
+ {contributors.length}
+ contributors
+
+
+
+ {/* =================================================
+ TOOLBAR
+ ================================================== */}
+
+
+
+
+
+ )}
+
+
+
+ Sort by
+
+
+ handleSort("contributions")
+ }
+ >
+ Contributions
+
+
+ handleSort("name")}
+ >
+ Name
+
+
+
+
+ {/* =================================================
+ RESULT INFO
+ ================================================== */}
+
+ {!loading && !error && (
+
+
+ Showing{" "}
+
+ {visibleContributors.length}
+ {" "}
+ of{" "}
+
+ {filteredContributors.length}
+ {" "}
+ contributors
+
+
+ {searchQuery && (
+
+ for{" "}
+
+ "{searchQuery}"
+
+
+ )}
+
+ )}
+
+ {/* =================================================
+ LOADING
+ ================================================== */}
+
+ {loading && (
+
+ {Array.from({ length: 24 }).map((_, index) => (
+
+ ))}
+
+ )}
+
+ {/* =================================================
+ ERROR
+ ================================================== */}
+
+ {!loading && error && (
+
+
+
+
+
Unable to load contributors
+
+
{error}
+
+
{
+ const controller =
+ new AbortController();
+
+ setStatsLoading(true);
+
+ loadContributors(controller.signal);
+ }}
+ >
+ Try again
+
+
+ )}
+
+ {/* =================================================
+ EMPTY
+ ================================================== */}
+
+ {!loading &&
+ !error &&
+ filteredContributors.length === 0 && (
+
+
+
+
+
No contributors found
+
+
+ Try another username or clear your search.
+
+
+
+ Clear search
+
+
+ )}
+
+ {/* =================================================
+ GRID
+ ================================================== */}
+
+ {!loading &&
+ !error &&
+ filteredContributors.length > 0 && (
+ <>
+
+ {visibleContributors.map(
+ (contributor, index) => (
+
+
+
+
+
+
+
+ @{contributor.login}
+
+
+
+ {contributor.contributions}{" "}
+ {contributor.contributions === 1
+ ? "contribution"
+ : "contributions"}
+
+
+
+
+ ),
+ )}
+
+
+ {hasMore && (
+
+
+ setVisibleCount(
+ (current) =>
+ current +
+ CONTRIBUTORS_PER_PAGE,
+ )
+ }
+ >
+ Load more contributors
+
+
+ )}
+
+ )}
+
+
+ {/* =====================================================
+ CONTRIBUTION CTA
+ ====================================================== */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Become part of
+
+
+
+ You don't need to be an expert. Fix a typo, improve a
+ tutorial, add an example, report a bug, or build
+ something new with us.
+
+
+
+
+
+ Start contributing
+
+
+
+
+ Explore community
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/cookie-policy/index.tsx b/src/pages/cookie-policy/index.tsx
index fdf585bc3..2f303f634 100644
--- a/src/pages/cookie-policy/index.tsx
+++ b/src/pages/cookie-policy/index.tsx
@@ -1,162 +1,666 @@
-import React from 'react';
-import Layout from '@theme/Layout';
-import styled from 'styled-components';
-
-// Styled components for styling the CookiePolicy component
-const CookiePolicyContainer = styled.div`
- width: 50%;
- display: block;
- margin: auto;
- padding: 20px;
- border-radius: 5px;
- box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
- font-size: 16px;
- line-height: 1.6;
- font-family: 'Open Sans', sans-serif;
- text-align: justify;
-
- @media (max-width: 760px) {
- width: 80%;
- }
-`;
-
-const Title = styled.h2`
- margin-bottom: 20px;
- font-weight: 700;
- text-align: center;
-`;
-
-const SubTitle = styled.h3`
- margin-bottom: 20px;
- font-weight: 700;
-`;
-
-const StyledUl = styled.ul`
- margin-bottom: 20px;
-`;
-
-const StyledLi = styled.li`
- margin-bottom: 20px;
-`;
-
-const StyledOl = styled.ol`
- margin-bottom: 20px;
-`;
-
-const Content = styled.div`
- margin-bottom: 20px;
-`;
-
-// Reusable functional component for each section with a title
-const Section = ({ title, children }) => (
-
-);
-
-// Reusable functional component for list items in sections
-const ListItem = ({ title, description }) => (
-
- {title}
- {description}
-
-);
-
-// Separate section components for organizing content
-const LastUpdated = () => (
- Last Updated: 23rd May 2024
-);
-
-const Mission = () => (
-
- Welcome to CodeHarborHub. Our mission is to provide accessible and comprehensive educational resources to learners of all levels. This Cookie Policy explains how we use cookies on our website.
-
-);
-
-const WhatAreCookies = () => (
-
- Cookies are small text files stored on your device when you visit a website. They help the site to remember your preferences and activities over time.
-
-);
-
-const HowWeUseCookies = () => (
-
- We use cookies to:
-
- Enhance your user experience
- Analyze our website traffic
- Provide personalized content and advertisements
-
-
-);
-
-const TypesOfCookies = () => (
-
-);
-
-const ManagingCookies = () => (
-
- You can manage or disable cookies through your browser settings. For more information on how to do this, visit your browser’s help section.
-
-);
-
-const ThirdPartyCookies = () => (
-
- We may use third-party cookies for various purposes such as analytics and advertising. These cookies are governed by the privacy policies of the respective third parties.
-
-);
-
-const CookiePolicyUpdates = () => (
-
- We may update this Cookie Policy from time to time. We will notify you of any significant changes by posting the new policy on our website and updating the date at the top of this page.
-
-);
-
-const ContactUs = () => (
-
-);
-
-// Main CookiePolicy component combining all sections and content
-const CookiePolicy = () => (
-
-
- Cookie Policy
-
-
-
-
-);
-
-export default CookiePolicy;
+import React, { useState } from "react";
+// @ts-ignore
+import Layout from "@theme/Layout";
+// @ts-ignore
+import Link from "@docusaurus/Link";
+
+import {
+ ArrowRight,
+ CheckCircle2,
+ ChevronDown,
+ Cookie,
+ ExternalLink,
+ Info,
+ Lock,
+ Mail,
+ Settings,
+ ShieldCheck,
+ SlidersHorizontal,
+ Users,
+ XCircle,
+ Globe2,
+} from "lucide-react";
+// @ts-ignore
+import styles from "./styles.module.css";
+
+const lastUpdated = "September 17, 2026";
+
+const cookieTypes = [
+ {
+ title: "Essential Cookies",
+ description:
+ "These cookies support core website functionality and help the site operate correctly. They may be required for features such as navigation, security and remembering basic preferences.",
+ icon: ShieldCheck,
+ status: "Required",
+ },
+ {
+ title: "Preference Cookies",
+ description:
+ "These cookies may remember choices such as interface preferences or settings so that the experience can be more convenient when you return.",
+ icon: Settings,
+ status: "Optional",
+ },
+ {
+ title: "Analytics Cookies",
+ description:
+ "Analytics technologies may help us understand how visitors use CodeHarborHub, such as which pages are visited and how the website performs.",
+ icon: SlidersHorizontal,
+ status: "Optional",
+ },
+ {
+ title: "Advertising Cookies",
+ description:
+ "Advertising technologies may be used to support relevant advertising or measure advertising performance where applicable.",
+ icon: Info,
+ status: "Optional",
+ },
+];
+
+const faqItems = [
+ {
+ question: "What are cookies?",
+ answer:
+ "Cookies are small pieces of data that websites can store in your browser. They can be used to support website functionality, remember preferences, understand website usage and, where applicable, support advertising.",
+ },
+ {
+ question: "Are all cookies required?",
+ answer:
+ "No. Some cookies may be necessary for basic website functionality, while other technologies may be optional depending on the features and services being used.",
+ },
+ {
+ question: "Can I disable cookies?",
+ answer:
+ "You can usually control or delete cookies through your browser settings. Disabling certain cookies may affect the availability or functionality of some website features.",
+ },
+ {
+ question: "Does CodeHarborHub use third-party services?",
+ answer:
+ "CodeHarborHub may integrate third-party services for functionality such as analytics, advertising, community features, embedded content or other website capabilities. These providers may use their own cookies or similar technologies according to their respective policies.",
+ },
+ {
+ question: "How often can this policy change?",
+ answer:
+ "This Cookie Policy may be updated when our website, services, technologies or legal requirements change. The latest version will be published on this page with an updated date.",
+ },
+];
+
+function CookiePolicy(): React.JSX.Element {
+ const [openFaq, setOpenFaq] = useState(0);
+
+ return (
+
+
+ {/* =====================================================
+ HERO
+ ====================================================== */}
+
+
+
+
+
+
+ Privacy & Transparency
+
+
+
+ Cookie
+ Policy.
+
+
+
+ This page explains how CodeHarborHub may use cookies and
+ similar technologies to operate, improve and understand our
+ website.
+
+
+
+
+ Last updated
+ {lastUpdated}
+
+
+
+
+
+ Applies to
+ CodeHarborHub website
+
+
+
+
+
+
+
+
+
+
+ Privacy matters
+
+
+
+ Your browser, your controls
+
+
+
+
+
+ {/* =====================================================
+ NOTICE
+ ====================================================== */}
+
+
+
+
+
+
+
+
Important information
+
+ This Cookie Policy is intended to explain our general use of
+ cookies and similar technologies. The technologies actually
+ used on the website may change as features and third-party
+ services are added, removed or updated.
+
+
+
+
+
+ {/* =====================================================
+ CONTENT
+ ====================================================== */}
+
+
+
+ {/* Sidebar */}
+
+
+ {/* Main Content */}
+
+ {/* What are cookies */}
+
+ 01
+
+ What are cookies?
+
+
+ Cookies are small text files or similar pieces of data
+ that websites can store on a visitor's device through
+ their web browser.
+
+
+
+ They can help websites remember information, provide
+ functionality, understand how visitors interact with
+ pages and support other website features.
+
+
+
+
+
+
+
+
Cookies
+
+
+ Small pieces of browser-stored data associated with a
+ website.
+
+
+
+
+
+
+
+
Similar technologies
+
+
+ Other technologies may perform functions similar to
+ cookies, such as storing or accessing information on a
+ device.
+
+
+
+
+ {/* How we use */}
+
+ 02
+
+ How we use cookies
+
+
+ CodeHarborHub may use cookies and similar technologies for
+ several purposes depending on the features available on
+ the website.
+
+
+
+
+
+ To support essential website functionality.
+
+
+
+
+
+ To remember certain preferences or settings.
+
+
+
+
+
+ To understand website usage and improve the user
+ experience.
+
+
+
+
+
+ To support embedded or integrated third-party
+ functionality.
+
+
+
+
+
+ To support advertising or advertising measurement
+ where applicable.
+
+
+
+
+ {/* Cookie Types */}
+
+ 03
+
+ Types of cookies
+
+
+ Cookies may be grouped according to their purpose. The
+ categories below describe common ways technologies may be
+ used on CodeHarborHub.
+
+
+
+ {cookieTypes.map((cookie) => {
+ const Icon = cookie.icon;
+
+ return (
+
+
+
+
+
+
+ {cookie.status}
+
+
+
+
{cookie.title}
+
+
{cookie.description}
+
+ );
+ })}
+
+
+ {/* First/Third party */}
+
+ 04
+
+ First-party and third-party technologies
+
+
+ Some technologies may be set directly by CodeHarborHub,
+ while others may be provided by third-party services that
+ are integrated into the website.
+
+
+
+
+
+
+
+
First-party
+
+
+ Technologies associated directly with the CodeHarborHub
+ website may help provide core functionality or remember
+ website preferences.
+
+
+
+
+
+
+
+
Third-party
+
+
+ Integrated services may use their own technologies for
+ functionality, analytics, advertising, embedded
+ content or other purposes.
+
+
+
+ Third-party providers may have their own privacy and cookie
+ policies. We recommend reviewing those policies when using
+ services provided by external organizations.
+
+
+
+ {/* Browser controls */}
+
+ 05
+
+ Managing cookies through your browser
+
+
+ Most modern browsers provide controls that allow you to
+ view, block, delete or otherwise manage cookies.
+
+
+
+
+
+
+
+
Your browser settings
+
+
+ You can generally find cookie controls in your browser's
+ privacy, security or site settings. The exact controls
+ depend on the browser and device you use.
+
+
+
+
+ Blocking some cookies may affect website
+ functionality or prevent certain features from
+ working as intended.
+
+
+
+
+
+ {/* Security */}
+
+ 06
+
+ Privacy and security
+
+
+ We take reasonable steps to operate CodeHarborHub in a
+ responsible manner. Cookies and similar technologies should
+ not be interpreted as a guarantee that information
+ transmitted over the internet is completely secure.
+
+
+
+ You should also take appropriate steps to protect your
+ devices, accounts and browser, including keeping software
+ updated and using appropriate security settings.
+
+
+
+
+ Keep your browser and operating system updated.
+
+
+
+ Use appropriate privacy and security controls.
+
+
+
+ Review browser cookie settings regularly.
+
+
+
+ {/* Changes */}
+
+ 07
+
+ Changes to this Cookie Policy
+
+
+ We may update this Cookie Policy when our website,
+ technologies, services or legal requirements change.
+
+
+
+ When changes are made, the updated version will be
+ published on this page. The date at the beginning of the
+ policy indicates when it was most recently updated.
+
+
+
+
+
+
+
+ Current version
+ Last updated: {lastUpdated}
+
+
+
+ {/* Contact */}
+
+
+
+
+
+ {/* =====================================================
+ FAQ
+ ====================================================== */}
+
+
+
+
FAQ
+
+
Cookie questions, answered.
+
+
+ Here are some common questions about cookies and browser
+ controls.
+
+
+
+
+ {faqItems.map((item, index) => {
+ const isOpen = openFaq === index;
+
+ return (
+
+
+ setOpenFaq(isOpen ? null : index)
+ }
+ aria-expanded={isOpen}
+ >
+ {item.question}
+
+
+
+ {isOpen && (
+
+ )}
+
+ );
+ })}
+
+
+
+ {/* =====================================================
+ FINAL CTA
+ ====================================================== */}
+
+
+
+
+
+
+
+ PRIVACY & TRANSPARENCY
+
+
+
Have a question about privacy?
+
+
+ Read our other policies or contact the CodeHarborHub team if
+ you need clarification.
+
+
+
+
+ Privacy Policy
+
+
+
+
+ Contact us
+
+
+
+
+
+
+
+ );
+}
+
+function GlobeIcon(): React.JSX.Element {
+ return
+ {course.icon}
+
+ );
+}
+
+function CourseCard({
+ course,
+ featured = false,
+}: {
+ course: Course;
+ featured?: boolean;
+}) {
+ return (
+
+
+
+
+
+ {course.status.includes("new") && (
+
+ New
+
+ )}
+
+ {course.price === 0 && (
+
+ Free
+
+ )}
+
+ {course.status.includes("trending") && (
+
+
+ )}
+
+
+
+ {course.category}
+ •
+ {course.level}
+
+
+
+ {/*
+
+
{course.description}
+
+
+ {course.tags.slice(0, 3).map((tag) => (
+ {tag}
+ ))}
+
+
+
+ {course.rating}
+ ({course.reviews})
+
+
+
+
+
+
+
+
+
+ {course.progress !== undefined && (
+
+
+ Your progress
+ {course.progress}%
+
+
+
+
+
+
+ {course.price === 0 ? (
+ Free
+ ) : (
+ <>
+ ₹{course.price}
+ {course.originalPrice && (
+ ₹{course.originalPrice}
+ )}
+
+ )}
+
+
+
+ View course
+
+
+
+ );
+}
+
+function SectionTitle({
+ eyebrow,
+ title,
+ description,
+ href,
+ hrefLabel,
+}: {
+ eyebrow?: string;
+ title: string;
+ description?: string;
+ href?: string;
+ hrefLabel?: string;
+}) {
+ return (
+
+
+ {eyebrow &&
{eyebrow} }
+
{title}
+ {description &&
{description}
}
+
+
+ {href && hrefLabel && (
+
+ {hrefLabel}
+
+
+ )}
+
+
+ {/* =====================================================
+ HERO
+ ===================================================== */}
+
+
+
+
+
+
+
+
+
+
+
+ Courses that help you
+ build real skills.
+
+
+
+ Learn programming, web development, DSA, AI, cybersecurity,
+ DevOps, and computer science through structured,
+ practical, developer-focused courses.
+
+
+
+ setSearch("")}
+ aria-label="Clear search"
+ >
+
+ )}
+
+ ⌘ K
+
+
+
+ Popular:
+
+ {["JavaScript", "React", "Python", "DSA", "AI & ML"].map(
+ (item) => (
+ {
+ setSearch(item);
+ setPage(1);
+ }}
+ >
+ {item}
+
+ ),
+ )}
+
+
+
+
+
+ 100+
+ Courses & paths
+
+
+
+ 100K+
+ Learners
+
+
+
+
+
Free
+
Core learning
+
+
+
+ Project
+ Focused learning
+
+
+
+
+ {/* =====================================================
+ QUICK FILTERS
+ ===================================================== */}
+
+
+
+
+ {FILTER_TABS.map((tab) => {
+ const Icon = tab.icon;
+ const active = activeTab === tab.id;
+
+ return (
+ changeTab(tab.id)}
+ >
+
+ );
+ })}
+
+
+
+ {/* =====================================================
+ FEATURED
+ ===================================================== */}
+
+ {!hasActiveFilters && (
+
+
+
+
+
+ {featuredCourses.map((course) => (
+
+
+ )}
+
+ {/* =====================================================
+ TRENDING
+ ===================================================== */}
+
+ {!hasActiveFilters && (
+
+
+
+
+
+ {trendingCourses.map((course) => (
+
+
+ )}
+
+ {/* =====================================================
+ POPULAR
+ ===================================================== */}
+
+ {!hasActiveFilters && (
+
+
+
+
+
+ {popularCourses.map((course) => (
+
+
+ )}
+
+ {/* =====================================================
+ NEW
+ ===================================================== */}
+
+ {!hasActiveFilters && (
+
+
+
+
+
+ {newCourses.map((course) => (
+
+
+ )}
+
+ {/* =====================================================
+ COURSE CATALOG
+ ===================================================== */}
+
+
+
+
+
+
Course library
+
Explore all courses
+
+ Choose a course based on your interests, current level, or
+ career goal.
+
+
+
+
setShowFilters((value) => !value)}
+ >
+
+
+
+
+ {/* Sidebar */}
+
+
+ Filter courses
+
+ {hasActiveFilters && (
+
+ Reset
+
+ )}
+
+
+
+
Category
+
+
+ {CATEGORIES.map((item) => (
+ {
+ setCategory(item);
+ setPage(1);
+ }}
+ >
+ {item}
+
+ {item === "All" ? (
+ {COURSES.length}
+ ) : (
+
+ {
+ COURSES.filter(
+ (course) =>
+ course.category === item,
+ ).length
+ }
+
+ )}
+
+ ))}
+
+
+
Level
+
+
+ {LEVELS.map((item) => (
+ {
+ setLevel(item);
+ setPage(1);
+ }}
+ >
+ {item}
+
+ ))}
+
+
+
+
+
Not sure where to start?
+
+
+ Follow a structured roadmap and learn the skills in the
+ right order.
+
+
+
+ Explore roadmaps
+
+
+
+
+ {/* Results */}
+
+
+
+ {filteredCourses.length} {" "}
+ {filteredCourses.length === 1
+ ? "course"
+ : "courses"}{" "}
+ found
+
+
+
+ Sort by
+
+ {
+ setSort(event.target.value);
+ setPage(1);
+ }}
+ aria-label="Sort courses"
+ >
+ Most popular
+ Highest rated
+ Most learners
+ Newest
+ Shortest first
+
+
+
+
+
+ {visibleCourses.length > 0 ? (
+ <>
+
+ {visibleCourses.map((course) => (
+
+
+ {totalPages > 1 && (
+
+
+ setPage((value) =>
+ Math.max(1, value - 1),
+ )
+ }
+ >
+ Previous
+
+
+
+ {Array.from(
+ { length: totalPages },
+ (_, index) => index + 1,
+ ).map((pageNumber) => (
+
+ setPage(pageNumber)
+ }
+ >
+ {pageNumber}
+
+ ))}
+
+
+
+ setPage((value) =>
+ Math.min(
+ totalPages,
+ value + 1,
+ ),
+ )
+ }
+ >
+ Next
+
+
+ )}
+
+ ) : (
+
+
+
+
+
No courses found
+
+
+ Try a different keyword or remove some filters to
+ discover more courses.
+
+
+
+ Clear all filters
+
+
+ )}
+
+
+
+
+ {/* =====================================================
+ LEARNING PATH
+ ===================================================== */}
+
+
+
+
+
+
+
+
+
+ Follow a roadmap instead of
+ guessing your next step.
+
+
+
+ Start with your goal and get a structured path through
+ fundamentals, practical skills, projects, and advanced
+ topics.
+
+
+
+
+ Explore roadmaps
+
+
+
+
+ Practice your skills
+
+
+
+
+
+
+
+ 01
+ Learn
+ Fundamentals
+
+
+
+
+
+ 02
+ Practice
+ Challenges
+
+
+
+
+
+ 03
+ Build
+ Projects
+
+
+
+
+
+ 04
+ Grow
+ Career
+
+
+
+
+
+ {/* =====================================================
+ FINAL CTA
+ ===================================================== */}
+
+
+
+
+
+
+
+
Start learning today
+
+
+ Your next skill could change
+ your entire career.
+
+
+
+ Pick a course, follow a roadmap, practice what you learn,
+ and build something real.
+
+
+
+
+ Explore all courses
+
+
+
+
+ Browse documentation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/courses/styles.module.css b/src/pages/courses/styles.module.css
new file mode 100644
index 000000000..55ea7c43b
--- /dev/null
+++ b/src/pages/courses/styles.module.css
@@ -0,0 +1,1440 @@
+.page {
+ --courses-accent: var(--ifm-color-primary);
+ --courses-accent-soft: color-mix(
+ in srgb,
+ var(--courses-accent) 12%,
+ transparent
+ );
+
+ min-height: 100vh;
+ color: var(--ifm-font-color-base);
+ background: var(--ifm-background-color);
+}
+
+.container {
+ width: min(1240px, calc(100% - 40px));
+ margin: 0 auto;
+}
+
+/* =========================================================
+ HERO
+========================================================= */
+
+.hero {
+ position: relative;
+ overflow: hidden;
+ padding: 90px 0 70px;
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ background:
+ radial-gradient(
+ circle at 80% 10%,
+ var(--courses-accent-soft),
+ transparent 32%
+ ),
+ var(--ifm-background-color);
+}
+
+.heroGlow {
+ position: absolute;
+ top: -180px;
+ right: 5%;
+ width: 500px;
+ height: 500px;
+ border-radius: 50%;
+ background: var(--courses-accent);
+ opacity: 0.07;
+ filter: blur(100px);
+ pointer-events: none;
+}
+
+.heroGrid {
+ position: absolute;
+ inset: 0;
+ opacity: 0.25;
+ pointer-events: none;
+ background-image:
+ linear-gradient(
+ to right,
+ var(--ifm-color-emphasis-200) 1px,
+ transparent 1px
+ ),
+ linear-gradient(
+ to bottom,
+ var(--ifm-color-emphasis-200) 1px,
+ transparent 1px
+ );
+ background-size: 60px 60px;
+ mask-image: linear-gradient(to bottom, black, transparent);
+}
+
+.heroContent {
+ position: relative;
+ z-index: 1;
+ max-width: 900px;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.heroBadge {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 13px;
+ border: 1px solid
+ color-mix(in srgb, var(--courses-accent) 30%, transparent);
+ border-radius: 999px;
+ background: var(--courses-accent-soft);
+ color: var(--courses-accent);
+ font-size: 0.75rem;
+ font-weight: 800;
+ letter-spacing: 0.04em;
+}
+
+.heroContent h1 {
+ margin: 25px 0 20px;
+ font-size: clamp(3rem, 7vw, 5.9rem);
+ line-height: 0.98;
+ letter-spacing: -0.065em;
+}
+
+.heroContent h1 span {
+ display: block;
+ color: var(--courses-accent);
+}
+
+.heroContent > p {
+ max-width: 760px;
+ margin: 0 auto;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 1.08rem;
+ line-height: 1.75;
+}
+
+.heroSearch {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ max-width: 760px;
+ min-height: 60px;
+ margin: 34px auto 0;
+ padding: 0 15px 0 20px;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 15px;
+ background: var(--ifm-background-surface-color);
+ box-shadow: 0 18px 50px rgb(0 0 0 / 8%);
+ text-align: left;
+ transition:
+ border-color 180ms ease,
+ box-shadow 180ms ease;
+}
+
+.heroSearch:focus-within {
+ border-color: var(--courses-accent);
+ box-shadow:
+ 0 18px 50px rgb(0 0 0 / 8%),
+ 0 0 0 4px var(--courses-accent-soft);
+}
+
+.heroSearch > svg {
+ flex: 0 0 auto;
+ color: var(--ifm-color-emphasis-500);
+}
+
+.heroSearch input {
+ width: 100%;
+ min-width: 0;
+ border: 0;
+ outline: 0;
+ background: transparent;
+ color: var(--ifm-font-color-base);
+ font: inherit;
+ font-size: 0.92rem;
+}
+
+.heroSearch input::placeholder {
+ color: var(--ifm-color-emphasis-500);
+}
+
+.heroSearch button {
+ display: grid;
+ width: 30px;
+ height: 30px;
+ flex: 0 0 auto;
+ place-items: center;
+ border: 0;
+ border-radius: 8px;
+ background: transparent;
+ color: var(--ifm-color-emphasis-600);
+ cursor: pointer;
+}
+
+.heroSearch button:hover {
+ background: var(--ifm-color-emphasis-100);
+}
+
+.heroSearch kbd {
+ flex: 0 0 auto;
+ padding: 4px 7px;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 6px;
+ background: var(--ifm-background-color);
+ color: var(--ifm-color-emphasis-600);
+ font-family: var(--ifm-font-family-monospace);
+ font-size: 0.65rem;
+}
+
+.heroLinks {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ margin-top: 17px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.75rem;
+}
+
+.heroLinks button {
+ padding: 3px 8px;
+ border: 0;
+ border-radius: 7px;
+ background: transparent;
+ color: var(--courses-accent);
+ font-size: inherit;
+ font-weight: 750;
+ cursor: pointer;
+}
+
+.heroLinks button:hover {
+ background: var(--courses-accent-soft);
+}
+
+.heroStats {
+ position: relative;
+ z-index: 1;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ max-width: 950px;
+ margin: 65px auto 0;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 18px;
+ background: var(--ifm-background-surface-color);
+}
+
+.heroStats > div {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: 11px;
+ padding: 20px 22px;
+ border-right: 1px solid var(--ifm-color-emphasis-200);
+ text-align: left;
+}
+
+.heroStats > div:last-child {
+ border-right: 0;
+}
+
+.heroStats svg {
+ grid-row: span 2;
+ margin-top: 3px;
+ color: var(--courses-accent);
+}
+
+.heroStats strong {
+ font-size: 1.05rem;
+}
+
+.heroStats span {
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.68rem;
+}
+
+/* =========================================================
+ FILTER TABS
+========================================================= */
+
+.filterSection {
+ position: sticky;
+ z-index: 20;
+ top: 0;
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ background: color-mix(
+ in srgb,
+ var(--ifm-background-color) 94%,
+ transparent
+ );
+ backdrop-filter: blur(15px);
+}
+
+.filterTabs {
+ display: flex;
+ gap: 4px;
+ overflow-x: auto;
+ padding: 9px 0;
+ scrollbar-width: none;
+}
+
+.filterTabs::-webkit-scrollbar {
+ display: none;
+}
+
+.filterTab {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ min-height: 39px;
+ padding: 0 14px;
+ border: 1px solid transparent;
+ border-radius: 9px;
+ background: transparent;
+ color: var(--ifm-color-emphasis-700);
+ white-space: nowrap;
+ font-size: 0.78rem;
+ font-weight: 750;
+ cursor: pointer;
+}
+
+.filterTab:hover {
+ background: var(--ifm-color-emphasis-100);
+}
+
+.filterTabActive {
+ border-color: color-mix(
+ in srgb,
+ var(--courses-accent) 25%,
+ transparent
+ );
+ background: var(--courses-accent-soft);
+ color: var(--courses-accent);
+}
+
+/* =========================================================
+ SECTIONS
+========================================================= */
+
+.section {
+ padding: 85px 0;
+}
+
+.sectionMuted {
+ background: var(--ifm-background-surface-color);
+}
+
+.sectionTitle {
+ display: flex;
+ align-items: end;
+ justify-content: space-between;
+ gap: 30px;
+ margin-bottom: 34px;
+}
+
+.sectionTitle > div > span,
+.catalogHeader > div > span {
+ color: var(--courses-accent);
+ font-size: 0.7rem;
+ font-weight: 850;
+ letter-spacing: 0.11em;
+ text-transform: uppercase;
+}
+
+.sectionTitle h2,
+.catalogHeader h2 {
+ margin: 7px 0 9px;
+ font-size: clamp(1.8rem, 3.5vw, 2.7rem);
+ line-height: 1.05;
+ letter-spacing: -0.04em;
+}
+
+.sectionTitle p,
+.catalogHeader p {
+ max-width: 680px;
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ line-height: 1.65;
+ font-size: 0.92rem;
+}
+
+.sectionLink {
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ flex: 0 0 auto;
+ color: var(--courses-accent);
+ font-size: 0.82rem;
+ font-weight: 800;
+ text-decoration: none;
+}
+
+.sectionLink:hover {
+ text-decoration: none;
+}
+
+/* =========================================================
+ COURSE GRID
+========================================================= */
+
+.courseGrid {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 17px;
+}
+
+.featuredGrid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 18px;
+}
+
+/* =========================================================
+ COURSE CARD
+========================================================= */
+
+.courseCard {
+ display: flex;
+ min-width: 0;
+ flex-direction: column;
+ overflow: hidden;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 17px;
+ background: var(--ifm-background-color);
+ transition:
+ transform 180ms ease,
+ border-color 180ms ease,
+ box-shadow 180ms ease;
+}
+
+.courseCard:hover {
+ transform: translateY(-4px);
+ border-color: color-mix(
+ in srgb,
+ var(--courses-accent) 35%,
+ var(--ifm-color-emphasis-200)
+ );
+ box-shadow: 0 20px 45px rgb(0 0 0 / 9%);
+}
+
+.featuredCourseCard {
+ min-height: 390px;
+}
+
+.courseCardTop {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ min-height: 108px;
+ padding: 19px;
+ background:
+ radial-gradient(
+ circle at 85% 10%,
+ color-mix(in srgb, var(--courses-accent) 11%, transparent),
+ transparent 45%
+ ),
+ var(--ifm-background-surface-color);
+}
+
+.courseIcon {
+ display: grid;
+ width: 55px;
+ height: 55px;
+ place-items: center;
+ border: 1px solid
+ color-mix(in srgb, var(--course-accent) 30%, transparent);
+ border-radius: 15px;
+ background: color-mix(
+ in srgb,
+ var(--course-accent) 10%,
+ var(--ifm-background-color)
+ );
+ color: var(--course-accent);
+}
+
+.courseIcon span {
+ font-family: var(--ifm-font-family-monospace);
+ font-size: 0.73rem;
+ font-weight: 900;
+}
+
+.courseBadges {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ gap: 5px;
+ max-width: 130px;
+}
+
+.statusBadge {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 5px 7px;
+ border-radius: 6px;
+ font-size: 0.61rem;
+ font-weight: 850;
+ letter-spacing: 0.02em;
+}
+
+.freeBadge {
+ background: #10b98118;
+ color: #059669;
+}
+
+.newBadge {
+ background: #8b5cf618;
+ color: #7c3aed;
+}
+
+.trendingBadge {
+ background: #f9731618;
+ color: #ea580c;
+}
+
+.courseContent {
+ flex: 1;
+ padding: 19px;
+}
+
+.courseMeta {
+ display: flex;
+ gap: 7px;
+ margin-bottom: 9px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.65rem;
+ font-weight: 750;
+}
+
+.courseContent h3 {
+ margin: 0 0 9px;
+ font-size: 1.02rem;
+ line-height: 1.25;
+}
+
+.courseContent h3 a {
+ color: var(--ifm-font-color-base);
+ text-decoration: none;
+}
+
+.courseContent h3 a:hover {
+ color: var(--courses-accent);
+}
+
+.courseContent p {
+ display: -webkit-box;
+ overflow: hidden;
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.78rem;
+ line-height: 1.65;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+}
+
+.courseTags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 5px;
+ margin-top: 14px;
+}
+
+.courseTags span {
+ padding: 4px 7px;
+ border-radius: 5px;
+ background: var(--ifm-color-emphasis-100);
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.6rem;
+ font-weight: 700;
+}
+
+.courseStats {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 11px;
+ padding: 13px 19px;
+ border-top: 1px solid var(--ifm-color-emphasis-200);
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.64rem;
+}
+
+.courseStats span {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.courseStats svg {
+ color: var(--ifm-color-emphasis-500);
+}
+
+.courseStats span:first-child svg {
+ color: #f59e0b;
+}
+
+.courseStats strong {
+ color: var(--ifm-color-emphasis-800);
+}
+
+.courseStats small {
+ color: var(--ifm-color-emphasis-500);
+}
+
+.progressBox {
+ padding: 12px 19px 0;
+}
+
+.progressHeader {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 6px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.62rem;
+}
+
+.progressHeader strong {
+ color: var(--courses-accent);
+}
+
+.progressTrack {
+ height: 5px;
+ overflow: hidden;
+ border-radius: 999px;
+ background: var(--ifm-color-emphasis-200);
+}
+
+.progressTrack span {
+ display: block;
+ height: 100%;
+ border-radius: inherit;
+ background: var(--courses-accent);
+}
+
+.courseFooter {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ padding: 15px 19px;
+}
+
+.coursePrice {
+ display: flex;
+ align-items: baseline;
+ gap: 7px;
+}
+
+.coursePrice strong {
+ color: var(--courses-accent);
+ font-size: 0.95rem;
+}
+
+.coursePrice del {
+ color: var(--ifm-color-emphasis-500);
+ font-size: 0.7rem;
+}
+
+.courseButton {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 8px 10px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 8px;
+ color: var(--ifm-font-color-base);
+ font-size: 0.68rem;
+ font-weight: 800;
+ text-decoration: none;
+ transition: all 180ms ease;
+}
+
+.courseButton:hover {
+ border-color: var(--courses-accent);
+ color: var(--courses-accent);
+ text-decoration: none;
+}
+
+/* =========================================================
+ CATALOG
+========================================================= */
+
+.catalogSection {
+ border-top: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.catalogHeader {
+ display: flex;
+ align-items: end;
+ justify-content: space-between;
+ gap: 30px;
+ margin-bottom: 35px;
+}
+
+.catalogLayout {
+ display: grid;
+ grid-template-columns: 235px minmax(0, 1fr);
+ gap: 32px;
+}
+
+.sidebar {
+ align-self: start;
+ position: sticky;
+ top: 65px;
+}
+
+.sidebarHeader {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-bottom: 14px;
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.sidebarHeader strong {
+ font-size: 0.82rem;
+}
+
+.sidebarHeader button {
+ border: 0;
+ background: transparent;
+ color: var(--courses-accent);
+ font-size: 0.68rem;
+ font-weight: 800;
+ cursor: pointer;
+}
+
+.filterGroup {
+ padding: 20px 0;
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.filterGroup > label {
+ display: block;
+ margin-bottom: 10px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.67rem;
+ font-weight: 850;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+.filterOptions {
+ display: grid;
+ gap: 3px;
+}
+
+.filterOptions button {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ min-height: 34px;
+ padding: 0 9px;
+ border: 0;
+ border-radius: 7px;
+ background: transparent;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.73rem;
+ text-align: left;
+ cursor: pointer;
+}
+
+.filterOptions button:hover {
+ background: var(--ifm-color-emphasis-100);
+}
+
+.filterOptions button small {
+ color: var(--ifm-color-emphasis-500);
+ font-size: 0.61rem;
+}
+
+.filterOptions .optionActive {
+ background: var(--courses-accent-soft);
+ color: var(--courses-accent);
+ font-weight: 800;
+}
+
+.optionActive small {
+ color: var(--courses-accent) !important;
+}
+
+.sidebarCard {
+ margin-top: 20px;
+ padding: 17px;
+ border: 1px solid
+ color-mix(in srgb, var(--courses-accent) 25%, transparent);
+ border-radius: 13px;
+ background: var(--courses-accent-soft);
+}
+
+.sidebarCard > svg {
+ color: var(--courses-accent);
+}
+
+.sidebarCard strong {
+ display: block;
+ margin-top: 10px;
+ font-size: 0.78rem;
+}
+
+.sidebarCard p {
+ margin: 7px 0 12px;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.69rem;
+ line-height: 1.6;
+}
+
+.sidebarCard a {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ color: var(--courses-accent);
+ font-size: 0.68rem;
+ font-weight: 800;
+ text-decoration: none;
+}
+
+.catalogResults {
+ min-width: 0;
+}
+
+.resultsToolbar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 20px;
+ min-height: 42px;
+ margin-bottom: 18px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.72rem;
+}
+
+.resultsToolbar strong {
+ color: var(--ifm-font-color-base);
+}
+
+.sortControl {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.sortControl select {
+ min-height: 34px;
+ padding: 0 28px 0 9px;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 7px;
+ background: var(--ifm-background-surface-color);
+ color: var(--ifm-font-color-base);
+ font-size: 0.7rem;
+ outline: none;
+}
+
+.mobileFilterButton {
+ display: none;
+}
+
+/* =========================================================
+ PAGINATION
+========================================================= */
+
+.pagination {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 18px;
+ margin-top: 40px;
+}
+
+.pagination > button {
+ min-height: 36px;
+ padding: 0 12px;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 8px;
+ background: var(--ifm-background-surface-color);
+ color: var(--ifm-font-color-base);
+ font-size: 0.7rem;
+ font-weight: 750;
+ cursor: pointer;
+}
+
+.pagination > button:hover:not(:disabled) {
+ border-color: var(--courses-accent);
+ color: var(--courses-accent);
+}
+
+.pagination > button:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
+
+.pagination > div {
+ display: flex;
+ gap: 4px;
+}
+
+.pagination > div button {
+ display: grid;
+ width: 34px;
+ height: 34px;
+ place-items: center;
+ border: 1px solid transparent;
+ border-radius: 8px;
+ background: transparent;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.7rem;
+ cursor: pointer;
+}
+
+.pagination > div button:hover {
+ background: var(--ifm-color-emphasis-100);
+}
+
+.pagination > div .pageActive {
+ background: var(--courses-accent);
+ color: white;
+}
+
+/* =========================================================
+ EMPTY
+========================================================= */
+
+.emptyState {
+ display: grid;
+ min-height: 400px;
+ place-items: center;
+ align-content: center;
+ padding: 50px;
+ border: 1px dashed var(--ifm-color-emphasis-300);
+ border-radius: 18px;
+ text-align: center;
+}
+
+.emptyState > div {
+ display: grid;
+ width: 54px;
+ height: 54px;
+ margin-bottom: 16px;
+ place-items: center;
+ border-radius: 15px;
+ background: var(--courses-accent-soft);
+ color: var(--courses-accent);
+}
+
+.emptyState h3 {
+ margin: 0 0 8px;
+}
+
+.emptyState p {
+ max-width: 430px;
+ margin: 0;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.82rem;
+ line-height: 1.6;
+}
+
+.emptyState button {
+ margin-top: 20px;
+ padding: 9px 13px;
+ border: 0;
+ border-radius: 8px;
+ background: var(--courses-accent);
+ color: white;
+ font-size: 0.72rem;
+ font-weight: 800;
+ cursor: pointer;
+}
+
+/* =========================================================
+ LEARNING PATH
+========================================================= */
+
+.pathSection {
+ padding: 30px 0 100px;
+}
+
+.pathCard {
+ display: grid;
+ grid-template-columns: 1fr 0.9fr;
+ gap: 50px;
+ align-items: center;
+ padding: 50px;
+ overflow: hidden;
+ border: 1px solid
+ color-mix(in srgb, var(--courses-accent) 28%, transparent);
+ border-radius: 25px;
+ background:
+ radial-gradient(
+ circle at 0 0,
+ var(--courses-accent-soft),
+ transparent 45%
+ ),
+ var(--ifm-background-surface-color);
+}
+
+.pathEyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ color: var(--courses-accent);
+ font-size: 0.72rem;
+ font-weight: 850;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+.pathContent h2 {
+ max-width: 650px;
+ margin: 12px 0 15px;
+ font-size: clamp(2rem, 4vw, 3.2rem);
+ line-height: 1.05;
+ letter-spacing: -0.045em;
+}
+
+.pathContent h2 span {
+ color: var(--courses-accent);
+}
+
+.pathContent > p {
+ max-width: 650px;
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ line-height: 1.75;
+}
+
+.pathActions,
+.finalActions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ margin-top: 28px;
+}
+
+.primaryButton,
+.secondaryButton {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ min-height: 45px;
+ padding: 0 15px;
+ border-radius: 10px;
+ font-size: 0.76rem;
+ font-weight: 800;
+ text-decoration: none;
+ transition:
+ transform 180ms ease,
+ box-shadow 180ms ease,
+ border-color 180ms ease;
+}
+
+.primaryButton {
+ border: 1px solid var(--courses-accent);
+ background: var(--courses-accent);
+ color: white;
+ box-shadow: 0 12px 28px
+ color-mix(in srgb, var(--courses-accent) 20%, transparent);
+}
+
+.primaryButton:hover {
+ color: white;
+ text-decoration: none;
+ transform: translateY(-2px);
+}
+
+.secondaryButton {
+ border: 1px solid var(--ifm-color-emphasis-300);
+ background: var(--ifm-background-color);
+ color: var(--ifm-font-color-base);
+}
+
+.secondaryButton:hover {
+ color: var(--ifm-font-color-base);
+ text-decoration: none;
+ border-color: var(--courses-accent);
+ transform: translateY(-2px);
+}
+
+.pathVisual {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.pathNode {
+ display: grid;
+ width: 78px;
+ min-height: 86px;
+ place-items: center;
+ align-content: center;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 14px;
+ background: var(--ifm-background-color);
+ text-align: center;
+}
+
+.pathNode span {
+ margin-bottom: 5px;
+ color: var(--courses-accent);
+ font-family: var(--ifm-font-family-monospace);
+ font-size: 0.59rem;
+}
+
+.pathNode strong {
+ font-size: 0.72rem;
+}
+
+.pathNode small {
+ margin-top: 2px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.56rem;
+}
+
+.pathLine {
+ width: 25px;
+ height: 1px;
+ background: var(--ifm-color-emphasis-300);
+}
+
+/* =========================================================
+ FINAL CTA
+========================================================= */
+
+.finalCta {
+ padding: 10px 0 110px;
+}
+
+.finalCtaCard {
+ position: relative;
+ overflow: hidden;
+ padding: 75px 30px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 28px;
+ background:
+ radial-gradient(
+ circle at 50% 0,
+ var(--courses-accent-soft),
+ transparent 40%
+ ),
+ var(--ifm-background-surface-color);
+ text-align: center;
+}
+
+.finalCtaCard > span {
+ color: var(--courses-accent);
+ font-size: 0.7rem;
+ font-weight: 850;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
+
+.finalIcon {
+ display: grid;
+ width: 54px;
+ height: 54px;
+ margin: 0 auto 22px;
+ place-items: center;
+ border: 1px solid
+ color-mix(in srgb, var(--courses-accent) 30%, transparent);
+ border-radius: 16px;
+ background: var(--courses-accent-soft);
+ color: var(--courses-accent);
+}
+
+.finalCtaCard h2 {
+ max-width: 780px;
+ margin: 12px auto 15px;
+ font-size: clamp(2.2rem, 5vw, 4rem);
+ line-height: 1.02;
+ letter-spacing: -0.05em;
+}
+
+.finalCtaCard h2 span {
+ color: var(--courses-accent);
+}
+
+.finalCtaCard > p {
+ max-width: 620px;
+ margin: 0 auto;
+ color: var(--ifm-color-emphasis-700);
+ line-height: 1.7;
+}
+
+.finalActions {
+ justify-content: center;
+}
+
+.finalTrust {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 16px;
+ margin-top: 25px;
+}
+
+.finalTrust span {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.68rem;
+}
+
+.finalTrust svg {
+ color: var(--courses-accent);
+}
+
+/* =========================================================
+ DARK MODE
+========================================================= */
+
+[data-theme="dark"] .heroSearch,
+[data-theme="dark"] .courseCard,
+[data-theme="dark"] .heroStats {
+ box-shadow: 0 25px 65px rgb(0 0 0 / 25%);
+}
+
+[data-theme="dark"] .courseIcon {
+ background: color-mix(
+ in srgb,
+ var(--course-accent) 9%,
+ var(--ifm-background-color)
+ );
+}
+
+/* =========================================================
+ RESPONSIVE
+========================================================= */
+
+@media (max-width: 1150px) {
+ .courseGrid {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+
+ .featuredGrid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .catalogLayout {
+ grid-template-columns: 210px minmax(0, 1fr);
+ }
+}
+
+@media (max-width: 900px) {
+ .hero {
+ padding: 70px 0 55px;
+ }
+
+ .heroStats {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .heroStats > div:nth-child(2) {
+ border-right: 0;
+ }
+
+ .heroStats > div:nth-child(-n + 2) {
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ }
+
+ .courseGrid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .featuredGrid {
+ grid-template-columns: 1fr;
+ }
+
+ .catalogLayout {
+ grid-template-columns: 1fr;
+ }
+
+ .sidebar {
+ position: static;
+ display: none;
+ }
+
+ .sidebarOpen {
+ display: block;
+ }
+
+ .mobileFilterButton {
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ min-height: 38px;
+ padding: 0 11px;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 8px;
+ background: var(--ifm-background-surface-color);
+ color: var(--ifm-font-color-base);
+ font-size: 0.7rem;
+ font-weight: 800;
+ cursor: pointer;
+ }
+
+ .rotate {
+ transform: rotate(180deg);
+ }
+
+ .pathCard {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 650px) {
+ .container {
+ width: min(100% - 24px, 560px);
+ }
+
+ .hero {
+ padding: 55px 0 45px;
+ }
+
+ .heroContent h1 {
+ font-size: 3rem;
+ }
+
+ .heroContent > p {
+ font-size: 0.94rem;
+ }
+
+ .heroSearch {
+ min-height: 54px;
+ margin-top: 27px;
+ }
+
+ .heroSearch kbd {
+ display: none;
+ }
+
+ .heroStats {
+ margin-top: 45px;
+ }
+
+ .heroStats > div {
+ padding: 16px;
+ }
+
+ .filterSection {
+ position: relative;
+ }
+
+ .section {
+ padding: 60px 0;
+ }
+
+ .sectionTitle,
+ .catalogHeader {
+ display: block;
+ }
+
+ .sectionLink {
+ margin-top: 15px;
+ }
+
+ .courseGrid {
+ grid-template-columns: 1fr;
+ }
+
+ .catalogHeader .mobileFilterButton {
+ margin-top: 18px;
+ }
+
+ .resultsToolbar {
+ align-items: flex-start;
+ flex-direction: column;
+ gap: 10px;
+ }
+
+ .sortControl {
+ width: 100%;
+ }
+
+ .sortControl select {
+ width: 100%;
+ }
+
+ .pagination {
+ gap: 8px;
+ }
+
+ .pagination > div button:nth-child(n + 5) {
+ display: none;
+ }
+
+ .pathCard {
+ padding: 32px 22px;
+ }
+
+ .pathVisual {
+ justify-content: flex-start;
+ overflow-x: auto;
+ padding-bottom: 5px;
+ }
+
+ .pathNode {
+ flex: 0 0 70px;
+ }
+
+ .pathLine {
+ flex: 0 0 18px;
+ }
+
+ .finalCtaCard {
+ padding: 55px 20px;
+ }
+
+ .finalCtaCard h2 {
+ font-size: 2.3rem;
+ }
+
+ .finalActions,
+ .pathActions {
+ display: grid;
+ grid-template-columns: 1fr;
+ }
+
+ .primaryButton,
+ .secondaryButton {
+ width: 100%;
+ }
+}
+
+@media (max-width: 430px) {
+ .heroContent h1 {
+ font-size: 2.65rem;
+ }
+
+ .heroLinks {
+ justify-content: flex-start;
+ }
+
+ .heroStats {
+ grid-template-columns: 1fr;
+ }
+
+ .heroStats > div,
+ .heroStats > div:nth-child(2) {
+ border-right: 0;
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ }
+
+ .heroStats > div:last-child {
+ border-bottom: 0;
+ }
+
+ .courseCardTop {
+ min-height: 95px;
+ }
+
+ .courseStats {
+ gap: 8px;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .courseCard,
+ .primaryButton,
+ .secondaryButton,
+ .courseButton,
+ .heroSearch {
+ transition: none;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/ebooks/index.tsx b/src/pages/ebooks/index.tsx
index 792e69c20..9f7b6b824 100644
--- a/src/pages/ebooks/index.tsx
+++ b/src/pages/ebooks/index.tsx
@@ -1,8 +1,12 @@
import React from "react";
+// @ts-ignore
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+// @ts-ignore
import Layout from "@theme/Layout";
+// @ts-ignore
import Link from "@docusaurus/Link";
import books from "../../database/ebooks";
+// @ts-ignore
import Head from "@docusaurus/Head";
export default function Books(): JSX.Element {
diff --git a/src/pages/practice/index.tsx b/src/pages/practice/index.tsx
new file mode 100644
index 000000000..7d43c20ad
--- /dev/null
+++ b/src/pages/practice/index.tsx
@@ -0,0 +1,1058 @@
+import React, { useMemo, useState } from "react";
+// @ts-ignore
+import Layout from "@theme/Layout";
+// @ts-ignore
+import Link from "@docusaurus/Link";
+
+import {
+ ArrowRight,
+ ArrowUpRight,
+ BookOpen,
+ BrainCircuit,
+ CheckCircle2,
+ ChevronRight,
+ Code2,
+ Flame,
+ GitBranch,
+ Layers3,
+ Play,
+ Search,
+ ShieldCheck,
+ Sparkles,
+ Star,
+ Target,
+ Trophy,
+ Users,
+ Zap,
+} from "lucide-react";
+
+// @ts-ignore
+import styles from "./styles.module.css";
+
+type Difficulty = "Beginner" | "Intermediate" | "Advanced";
+
+type PracticeItem = {
+ title: string;
+ description: string;
+ icon: React.ReactNode;
+ count: string;
+ difficulty: Difficulty;
+ href: string;
+ tags: string[];
+};
+
+type Category = {
+ title: string;
+ description: string;
+ icon: React.ReactNode;
+ count: string;
+ href: string;
+};
+
+const DIFFICULTIES = [
+ {
+ name: "Beginner",
+ description: "Build fundamentals and gain confidence.",
+ count: "120+",
+ icon:
+
+ {/* =========================================================
+ HERO
+ ========================================================== */}
+
+
+
+
+
+
+
+
+
+
+ Practice • Solve • Improve
+
+ Free & Open Source
+
+
+
+ Practice what you learn.
+ Build real coding skills.
+
+
+
+ Strengthen your programming skills with coding problems,
+ DSA challenges, algorithms, interview questions and
+ real-world practice — from beginner to advanced.
+
+
+
+
+
+ Start Practicing
+
+
+
+
+
+ Daily Challenge
+
+
+
+
+ No subscription required
+
+ Learn at your own pace
+
+ Open source
+
+
+
+ {/* Coding preview */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 13 }, (_, index) => (
+ {index + 1}
+ ))}
+
+
+
+
+ function {" "}
+ twoSum
+ (nums, target) {"{"}
+ {"\n"}
+ {" "}
+ const {" "}
+ map =
+ new {" "}
+ Map
+ ();
+ {"\n\n"}
+ {" "}
+ for {" "}
+ (let i = 0; i {"<"} nums.length; i++) {"{"}
+ {"\n"}
+ {" "}
+ const {" "}
+
+ complement = target - nums[i];
+
+ {"\n\n"}
+ {" "}
+ if {" "}
+
+ (map.has(complement)) {"{"}
+
+ {"\n"}
+ {" "}
+ return {" "}
+
+ [map.get(complement), i];
+
+ {"\n"}
+ {" "}
+ {"}"}
+ {"\n\n"}
+ {" "}
+
+ map.set(nums[i], i);
+
+ {"\n"}
+ {" "}
+ {"}"}
+ {"\n"}
+ {"}"}
+
+
+
+
+
+
+
+
+
Runtime: 52ms
+
Memory: 44.2 MB
+
+
+
+
+ {/* =========================================================
+ STATS
+ ========================================================== */}
+
+
+
+ {STATS.map((stat) => (
+
+
{stat.icon}
+
+
+ {stat.value}
+ {stat.label}
+
+
+ ))}
+
+
+
+ {/* =========================================================
+ DAILY CHALLENGE
+ ========================================================== */}
+
+
+
+
+
+
+
+
+
+
+ DAILY CHALLENGE
+
+
+
Keep your coding streak alive.
+
+
+ Solve one carefully selected problem every day.
+ Build consistency, improve your problem-solving skills,
+ and create a habit of coding.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Solve Today's Challenge
+
+
+
+
+
+ {/* =========================================================
+ DIFFICULTY
+ ========================================================== */}
+
+
+
+
+
+ {DIFFICULTIES.map((item) => (
+
+
+
+ {item.icon}
+
+
+
+ {item.count}
+
+
+
+
{item.name}
+
+
{item.description}
+
+
+ Start practice
+
+
+ ))}
+
+
+
+ {/* =========================================================
+ CATEGORIES
+ ========================================================== */}
+
+
+
+
+
+ {CATEGORIES.map((category) => (
+
+
+ {category.icon}
+
+
+
+
+
+
{category.description}
+
+
{category.count}
+
+
+ ))}
+
+
+
+ {/* =========================================================
+ PROBLEM EXPLORER
+ ========================================================== */}
+
+
+
+
+
+
+
+
+
+ {(["All", "Beginner", "Intermediate", "Advanced"] as const).map(
+ (item) => (
+ setDifficulty(item)}
+ >
+ {item}
+
+ ),
+ )}
+
+
+
+
+ {filteredProblems.map((problem) => (
+
+
+
+ {problem.icon}
+
+
+
+ {problem.difficulty}
+
+
+
+
{problem.title}
+
+
{problem.description}
+
+
+ {problem.tags.map((tag) => (
+ {tag}
+ ))}
+
+
+
+
{problem.count}
+
+
+ Solve
+
+
+
+ ))}
+
+
+ {filteredProblems.length === 0 && (
+
+
+
No problems found
+
+ Try a different search term or select another difficulty.
+
+
+ )}
+
+
+
+ Explore All Problems
+
+
+
+
+
+ {/* =========================================================
+ INTERVIEW PREP
+ ========================================================== */}
+
+
+
+
+
+ INTERVIEW PREPARATION
+
+
+
Practice like you're preparing for the real thing.
+
+
+ Prepare for technical interviews with curated DSA,
+ JavaScript, frontend, backend, SQL and system-design
+ practice tracks.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Explore Interview Prep
+
+
+
+
+
+
+
+ 82%
+ Ready
+
+
+
+
Interview readiness
+
+
+
+
Keep practicing to reach 100%
+
+
+
+
+
+
+
+
+
+ {/* =========================================================
+ PRACTICE LOOP
+ ========================================================== */}
+
+
+
+
+
+
}
+ title="Learn"
+ description="Understand the concept, pattern, algorithm or data structure before solving."
+ />
+
+
}
+ title="Practice"
+ description="Solve progressively harder problems and strengthen your fundamentals."
+ />
+
+
}
+ title="Review"
+ description="Study your mistakes, compare approaches and improve your solution."
+ />
+
+
}
+ title="Master"
+ description="Build consistency, earn progress and move toward real-world projects."
+ />
+
+
+
+ {/* =========================================================
+ PROGRESS
+ ========================================================== */}
+
+
+
+
+
+
+
+ YOUR LEARNING JOURNEY
+
+
+
Turn practice into measurable progress.
+
+
+ Later, connect this section to your CodeHarborHub account
+ so learners can track solved problems, streaks, XP,
+ achievements and topic mastery.
+
+
+
+
+ 124
+ Solved
+
+
+
+ 18
+ Day streak
+
+
+
+ 2,840
+ XP earned
+
+
+
+
+ View Your Progress
+
+
+
+
+
+
+ {/* =========================================================
+ COMMUNITY
+ ========================================================== */}
+
+
+
+
+
+
+
+
+ COMMUNITY POWERED
+
+
+
Learn together. Solve together. Grow together.
+
+
+ CodeHarborHub is built in the open. Contribute problems,
+ improve solutions, share knowledge and help other learners.
+
+
+
+
+
+ Join Community
+
+
+
+
+ Contribute on GitHub
+
+
+
+
+
+
+ {/* =========================================================
+ FINAL CTA
+ ========================================================== */}
+
+
+
+
+
+
+
+
+
+
+ YOUR NEXT SOLUTION STARTS HERE
+
+
+
+ Stop watching tutorials.
+ Start solving.
+
+
+
+ Build stronger programming fundamentals through consistent
+ practice, real problems and meaningful challenges.
+
+
+
+
+ Start Practicing
+
+
+
+
+ Explore Roadmaps
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+/* ================================================================
+ COMPONENTS
+================================================================ */
+
+function SectionHeading({
+ eyebrow,
+ title,
+ description,
+}: {
+ eyebrow: string;
+ title: string;
+ description: string;
+}) {
+ return (
+
+
{eyebrow}
+
+
{title}
+
+
{description}
+
+
{number}
+
+
{icon}
+
+
{title}
+
+
{description}
+
+
+ {name}
+ {value}
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/practice/styles.module.css b/src/pages/practice/styles.module.css
new file mode 100644
index 000000000..c290633eb
--- /dev/null
+++ b/src/pages/practice/styles.module.css
@@ -0,0 +1,1699 @@
+.page {
+ min-height: 100vh;
+ overflow: hidden;
+ background: var(--ifm-background-color);
+ color: var(--ifm-font-color-base);
+}
+
+/* ================================================================
+ CONTAINER
+================================================================ */
+
+.container {
+ margin: 0 1rem;
+}
+
+/* ================================================================
+ HERO
+================================================================ */
+
+.hero {
+ position: relative;
+ isolation: isolate;
+ padding: 2rem 0;
+ overflow: hidden;
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ background:
+ radial-gradient(
+ circle at 15% 20%,
+ color-mix(in srgb, var(--ifm-color-primary) 13%, transparent),
+ transparent 32%
+ ),
+ radial-gradient(
+ circle at 85% 35%,
+ color-mix(in srgb, #8b5cf6 10%, transparent),
+ transparent 30%
+ ),
+ var(--ifm-background-color);
+}
+
+.heroGrid,
+.finalGrid {
+ position: absolute;
+ inset: 0;
+ z-index: -1;
+ pointer-events: none;
+
+ background-image:
+ linear-gradient(
+ to right,
+ color-mix(in srgb, var(--ifm-color-emphasis-300) 20%, transparent) 1px,
+ transparent 1px
+ ),
+ linear-gradient(
+ to bottom,
+ color-mix(in srgb, var(--ifm-color-emphasis-300) 20%, transparent) 1px,
+ transparent 1px
+ );
+
+ background-size: 48px 48px;
+
+ mask-image: linear-gradient(
+ to bottom,
+ black,
+ transparent 85%
+ );
+}
+
+.heroGlow,
+.finalGlow {
+ position: absolute;
+ width: 560px;
+ height: 560px;
+ top: -260px;
+ left: 50%;
+ transform: translateX(-50%);
+ border-radius: 50%;
+ pointer-events: none;
+
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 10%,
+ transparent
+ );
+
+ filter: blur(100px);
+}
+
+.hero .container {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr);
+ align-items: center;
+ gap: 2rem;
+}
+
+.heroContent {
+ max-width: 650px;
+}
+
+.eyebrow,
+.sectionEyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 0.6rem;
+ line-height: 1;
+ font-weight: 800;
+ letter-spacing: 0.13em;
+ text-transform: uppercase;
+ color: var(--ifm-color-primary);
+}
+
+.eyebrow {
+ padding: 0.5rem 0.8rem;
+ border: 1px solid
+ color-mix(in srgb, var(--ifm-color-primary) 25%, transparent);
+ border-radius: 999px;
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 6%,
+ transparent
+ );
+}
+
+.eyebrowIcon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.eyebrowDot {
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ background: currentColor;
+ opacity: 0.6;
+}
+
+.hero h1 {
+ margin: 1rem 0 1.2rem;
+ font-size: clamp(2.5rem, 5vw, 5rem);
+ line-height: 0.98;
+ letter-spacing: -0.055em;
+ font-weight: 900;
+}
+
+.hero h1 span {
+ display: block;
+ color: var(--ifm-color-primary);
+}
+
+.heroDescription {
+ max-width: 650px;
+ margin: 0;
+ font-size: 1rem;
+ line-height: 1.75;
+ color: var(--ifm-color-emphasis-700);
+}
+
+.heroActions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-top: 30px;
+}
+
+.primaryButton,
+.secondaryButton,
+.outlineButton,
+.dailyButton,
+.textButton {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 9px;
+ min-height: 46px;
+ padding: 0 18px;
+ border-radius: 10px;
+ font-size: 0.91rem;
+ font-weight: 750;
+ text-decoration: none;
+ transition:
+ transform 180ms ease,
+ border-color 180ms ease,
+ background 180ms ease,
+ box-shadow 180ms ease;
+}
+
+.primaryButton {
+ color: #fff;
+ background: var(--ifm-color-primary);
+ border: 1px solid var(--ifm-color-primary);
+ box-shadow:
+ 0 10px 28px
+ color-mix(in srgb, var(--ifm-color-primary) 20%, transparent);
+}
+
+.primaryButton:hover {
+ color: #fff;
+ transform: translateY(-2px);
+ text-decoration: none;
+ box-shadow:
+ 0 14px 35px
+ color-mix(in srgb, var(--ifm-color-primary) 28%, transparent);
+}
+
+.secondaryButton,
+.outlineButton {
+ color: var(--ifm-font-color-base);
+ border: 1px solid var(--ifm-color-emphasis-300);
+ background: var(--ifm-background-surface-color);
+}
+
+.secondaryButton:hover,
+.outlineButton:hover {
+ color: var(--ifm-color-primary);
+ border-color: var(--ifm-color-primary);
+ text-decoration: none;
+ transform: translateY(-2px);
+}
+
+.heroTrust {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 10px;
+ margin-top: 25px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.78rem;
+}
+
+.heroTrust svg {
+ color: var(--ifm-color-primary);
+}
+
+.trustDivider {
+ width: 3px;
+ height: 3px;
+ border-radius: 50%;
+ background: var(--ifm-color-emphasis-400);
+}
+
+/* ================================================================
+ CODE PREVIEW
+================================================================ */
+
+.codePreview {
+ position: relative;
+ overflow: hidden;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 16px;
+ background: color-mix(
+ in srgb,
+ var(--ifm-background-surface-color) 96%,
+ #000 4%
+ );
+ box-shadow:
+ 0 30px 80px rgba(0, 0, 0, 0.15),
+ 0 0 0 1px
+ color-mix(in srgb, var(--ifm-color-emphasis-100) 50%, transparent);
+}
+
+.codeHeader {
+ display: flex;
+ align-items: center;
+ height: 48px;
+ padding: 0 15px;
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.windowDots {
+ display: flex;
+ gap: 6px;
+}
+
+.windowDots span {
+ width: 9px;
+ height: 9px;
+ border-radius: 50%;
+ background: var(--ifm-color-emphasis-300);
+}
+
+.codeFile {
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ margin: 0 auto;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.76rem;
+ font-weight: 650;
+}
+
+.codeStatus {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 0.68rem;
+ color: #16a34a;
+}
+
+.codeStatus span,
+.successDot {
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background: currentColor;
+}
+
+.codeBody {
+ display: flex;
+ min-height: 330px;
+ overflow: hidden;
+ padding: 1.2rem 0;
+}
+
+.lineNumbers {
+ display: flex;
+ flex-direction: column;
+ min-width: 45px;
+ padding-right: 12px;
+ text-align: right;
+ color: var(--ifm-color-emphasis-400);
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ font-size: 0.8rem;
+ line-height: 1.8;
+ user-select: none;
+}
+
+.codeBody pre {
+ flex: 1;
+ overflow: auto;
+ margin: 0;
+ padding: 0 1rem;
+ background: transparent;
+}
+
+.codeBody code {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ font-size: 0.76rem;
+ line-height: 1.8;
+ white-space: pre;
+}
+
+.codeText {
+ color: var(--ifm-font-color-base);
+}
+
+.codePurple {
+ color: #a855f7;
+}
+
+.codeBlue {
+ color: #3b82f6;
+}
+
+.codeFooter {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ padding: 11px 15px;
+ border-top: 1px solid var(--ifm-color-emphasis-200);
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.68rem;
+}
+
+.codeFooter div {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ margin-right: auto;
+}
+
+.codeFooter .successDot {
+ color: #16a34a;
+}
+
+/* ================================================================
+ STATS
+================================================================ */
+
+.statsSection {
+ padding: 22px 0;
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ background: var(--ifm-background-surface-color);
+}
+
+.statsGrid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+}
+
+.statCard {
+ display: flex;
+ align-items: center;
+ gap: 13px;
+ padding: 13px 24px;
+ border-right: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.statCard:first-child {
+ padding-left: 0;
+}
+
+.statCard:last-child {
+ border-right: 0;
+}
+
+.statIcon {
+ display: grid;
+ place-items: center;
+ width: 38px;
+ height: 38px;
+ flex: 0 0 38px;
+ border-radius: 9px;
+ color: var(--ifm-color-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 9%,
+ transparent
+ );
+}
+
+.statCard strong,
+.statCard span {
+ display: block;
+}
+
+.statCard strong {
+ font-size: 1.05rem;
+}
+
+.statCard span {
+ margin-top: 2px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.74rem;
+}
+
+/* ================================================================
+ SECTIONS
+================================================================ */
+
+.section {
+ padding: 100px 0;
+}
+
+.sectionMuted {
+ background:
+ linear-gradient(
+ 180deg,
+ color-mix(in srgb, var(--ifm-color-emphasis-100) 30%, transparent),
+ transparent
+ );
+}
+
+.sectionHeading {
+ max-width: 680px;
+ margin-bottom: 42px;
+}
+
+.sectionHeading h2 {
+ margin: 10px 0 12px;
+ font-size: clamp(2rem, 4vw, 3rem);
+ line-height: 1.08;
+ letter-spacing: -0.04em;
+}
+
+.sectionHeading p {
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ line-height: 1.7;
+}
+
+/* ================================================================
+ DAILY
+================================================================ */
+
+.dailyCard {
+ position: relative;
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ align-items: center;
+ gap: 24px;
+ overflow: hidden;
+ padding: 30px;
+ border: 1px solid
+ color-mix(in srgb, var(--ifm-color-primary) 22%, var(--ifm-color-emphasis-200));
+ border-radius: 18px;
+ background:
+ radial-gradient(
+ circle at 85% 50%,
+ color-mix(in srgb, var(--ifm-color-primary) 9%, transparent),
+ transparent 35%
+ ),
+ var(--ifm-background-surface-color);
+}
+
+.dailyPattern {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ opacity: 0.35;
+ background-image: radial-gradient(
+ var(--ifm-color-primary) 1px,
+ transparent 1px
+ );
+ background-size: 18px 18px;
+ mask-image: linear-gradient(
+ 90deg,
+ transparent,
+ black 55%,
+ transparent
+ );
+}
+
+.dailyIcon {
+ position: relative;
+ display: grid;
+ place-items: center;
+ width: 66px;
+ height: 66px;
+ border-radius: 16px;
+ color: #fff;
+ background: var(--ifm-color-primary);
+ box-shadow:
+ 0 15px 35px
+ color-mix(in srgb, var(--ifm-color-primary) 25%, transparent);
+}
+
+.dailyContent {
+ position: relative;
+}
+
+.dailyContent h2 {
+ margin: 7px 0 8px;
+ font-size: 1.65rem;
+ letter-spacing: -0.025em;
+}
+
+.dailyContent p {
+ max-width: 670px;
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ line-height: 1.6;
+ font-size: 0.91rem;
+}
+
+.dailyMeta {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 15px;
+ margin-top: 13px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.75rem;
+}
+
+.dailyMeta span {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.dailyMeta svg {
+ color: var(--ifm-color-primary);
+}
+
+.dailyButton {
+ position: relative;
+ white-space: nowrap;
+ color: var(--ifm-color-primary);
+ border: 1px solid
+ color-mix(in srgb, var(--ifm-color-primary) 28%, transparent);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 6%,
+ transparent
+ );
+}
+
+.dailyButton:hover {
+ color: var(--ifm-color-primary);
+ text-decoration: none;
+ transform: translateY(-2px);
+}
+
+/* ================================================================
+ DIFFICULTY
+================================================================ */
+
+.difficultyGrid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 18px;
+}
+
+.difficultyCard {
+ display: block;
+ padding: 25px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 15px;
+ background: var(--ifm-background-surface-color);
+ color: inherit;
+ text-decoration: none;
+ transition:
+ transform 180ms ease,
+ border-color 180ms ease,
+ box-shadow 180ms ease;
+}
+
+.difficultyCard:hover {
+ color: inherit;
+ text-decoration: none;
+ transform: translateY(-5px);
+ border-color: var(--ifm-color-primary);
+ box-shadow:
+ 0 18px 40px
+ color-mix(in srgb, var(--ifm-color-primary) 10%, transparent);
+}
+
+.difficultyTop {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.difficultyIcon {
+ display: grid;
+ place-items: center;
+ width: 43px;
+ height: 43px;
+ border-radius: 11px;
+ color: var(--ifm-color-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 9%,
+ transparent
+ );
+}
+
+.problemCount {
+ font-size: 0.72rem;
+ color: var(--ifm-color-emphasis-600);
+}
+
+.difficultyCard h3 {
+ margin: 20px 0 7px;
+ font-size: 1.15rem;
+}
+
+.difficultyCard p {
+ min-height: 48px;
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.83rem;
+ line-height: 1.6;
+}
+
+.cardLink {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ margin-top: 20px;
+ color: var(--ifm-color-primary);
+ font-size: 0.78rem;
+ font-weight: 750;
+}
+
+/* ================================================================
+ CATEGORIES
+================================================================ */
+
+.categoryGrid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 15px;
+}
+
+.categoryCard {
+ display: flex;
+ gap: 17px;
+ padding: 22px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 14px;
+ color: inherit;
+ background: var(--ifm-background-surface-color);
+ text-decoration: none;
+ transition:
+ transform 180ms ease,
+ border-color 180ms ease,
+ background 180ms ease;
+}
+
+.categoryCard:hover {
+ color: inherit;
+ text-decoration: none;
+ transform: translateY(-3px);
+ border-color: var(--ifm-color-primary);
+}
+
+.categoryIcon {
+ display: grid;
+ place-items: center;
+ width: 45px;
+ height: 45px;
+ flex: 0 0 45px;
+ border-radius: 11px;
+ color: var(--ifm-color-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 8%,
+ transparent
+ );
+}
+
+.categoryBody {
+ min-width: 0;
+ flex: 1;
+}
+
+.categoryTitleRow {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+}
+
+.categoryTitleRow h3 {
+ margin: 0;
+ font-size: 0.98rem;
+}
+
+.categoryTitleRow svg {
+ opacity: 0;
+ color: var(--ifm-color-primary);
+ transition: opacity 180ms ease;
+}
+
+.categoryCard:hover .categoryTitleRow svg {
+ opacity: 1;
+}
+
+.categoryBody p {
+ margin: 8px 0 12px;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.78rem;
+ line-height: 1.55;
+}
+
+.categoryBody > span {
+ color: var(--ifm-color-primary);
+ font-size: 0.69rem;
+ font-weight: 750;
+}
+
+/* ================================================================
+ EXPLORER
+================================================================ */
+
+.explorer {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 25px;
+}
+
+.searchBox {
+ display: flex;
+ align-items: center;
+ flex: 1;
+ height: 47px;
+ gap: 10px;
+ padding: 0 15px;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 10px;
+ background: var(--ifm-background-surface-color);
+}
+
+.searchBox svg {
+ flex: 0 0 auto;
+ color: var(--ifm-color-emphasis-500);
+}
+
+.searchBox input {
+ width: 100%;
+ height: 100%;
+ border: 0;
+ outline: 0;
+ background: transparent;
+ color: var(--ifm-font-color-base);
+ font-size: 0.86rem;
+}
+
+.searchBox:focus-within {
+ border-color: var(--ifm-color-primary);
+ box-shadow:
+ 0 0 0 3px
+ color-mix(in srgb, var(--ifm-color-primary) 10%, transparent);
+}
+
+.filters {
+ display: flex;
+ gap: 6px;
+ padding: 4px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 10px;
+ background: var(--ifm-background-surface-color);
+}
+
+.filter,
+.filterActive {
+ min-height: 37px;
+ padding: 0 11px;
+ border: 0;
+ border-radius: 7px;
+ background: transparent;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.72rem;
+ font-weight: 700;
+ cursor: pointer;
+}
+
+.filterActive {
+ background: var(--ifm-color-primary);
+ color: #fff;
+}
+
+/* ================================================================
+ PROBLEMS
+================================================================ */
+
+.problemGrid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 15px;
+}
+
+.problemCard {
+ display: block;
+ padding: 21px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 13px;
+ color: inherit;
+ background: var(--ifm-background-surface-color);
+ text-decoration: none;
+ transition:
+ transform 180ms ease,
+ border-color 180ms ease,
+ box-shadow 180ms ease;
+}
+
+.problemCard:hover {
+ color: inherit;
+ text-decoration: none;
+ transform: translateY(-3px);
+ border-color: var(--ifm-color-primary);
+ box-shadow:
+ 0 15px 35px
+ color-mix(in srgb, var(--ifm-color-primary) 8%, transparent);
+}
+
+.problemTop {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.problemIcon {
+ display: grid;
+ place-items: center;
+ width: 39px;
+ height: 39px;
+ border-radius: 9px;
+ color: var(--ifm-color-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 8%,
+ transparent
+ );
+}
+
+.difficultyBadge {
+ padding: 5px 8px;
+ border-radius: 999px;
+ font-size: 0.62rem;
+ font-weight: 800;
+}
+
+.beginner {
+ color: #16a34a;
+ background: color-mix(in srgb, #16a34a 10%, transparent);
+}
+
+.intermediate {
+ color: #d97706;
+ background: color-mix(in srgb, #d97706 10%, transparent);
+}
+
+.advanced {
+ color: #dc2626;
+ background: color-mix(in srgb, #dc2626 10%, transparent);
+}
+
+.problemCard h3 {
+ margin: 17px 0 7px;
+ font-size: 0.98rem;
+}
+
+.problemCard > p {
+ min-height: 44px;
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.77rem;
+ line-height: 1.55;
+}
+
+.problemTags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 5px;
+ margin-top: 15px;
+}
+
+.problemTags span {
+ padding: 4px 7px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 5px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.62rem;
+}
+
+.problemFooter {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 17px;
+ padding-top: 13px;
+ border-top: 1px solid var(--ifm-color-emphasis-200);
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.67rem;
+}
+
+.problemFooter span:last-child {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ color: var(--ifm-color-primary);
+ font-weight: 750;
+}
+
+.emptyState {
+ padding: 60px 20px;
+ text-align: center;
+ border: 1px dashed var(--ifm-color-emphasis-300);
+ border-radius: 14px;
+}
+
+.emptyState svg {
+ color: var(--ifm-color-primary);
+}
+
+.emptyState h3 {
+ margin: 12px 0 5px;
+}
+
+.emptyState p {
+ margin: 0;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.85rem;
+}
+
+.centerAction {
+ display: flex;
+ justify-content: center;
+ margin-top: 30px;
+}
+
+/* ================================================================
+ INTERVIEW
+================================================================ */
+
+.interviewCard {
+ display: grid;
+ grid-template-columns: 1.1fr 0.9fr;
+ gap: 60px;
+ align-items: center;
+ padding: 45px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 20px;
+ background:
+ radial-gradient(
+ circle at 100% 0,
+ color-mix(in srgb, var(--ifm-color-primary) 9%, transparent),
+ transparent 35%
+ ),
+ var(--ifm-background-surface-color);
+}
+
+.interviewContent h2 {
+ max-width: 620px;
+ margin: 10px 0 14px;
+ font-size: clamp(1.9rem, 4vw, 2.7rem);
+ line-height: 1.1;
+ letter-spacing: -0.035em;
+}
+
+.interviewContent > p {
+ max-width: 610px;
+ color: var(--ifm-color-emphasis-700);
+ line-height: 1.7;
+}
+
+.interviewFeatures {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 11px;
+ margin: 24px 0;
+}
+
+.interviewFeatures div {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.78rem;
+}
+
+.interviewFeatures svg {
+ color: var(--ifm-color-primary);
+}
+
+.interviewVisual {
+ padding: 25px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 15px;
+ background: var(--ifm-background-color);
+}
+
+.interviewScore {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+
+.scoreCircle {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 110px;
+ height: 110px;
+ flex: 0 0 110px;
+ border: 8px solid
+ color-mix(in srgb, var(--ifm-color-primary) 18%, transparent);
+ border-top-color: var(--ifm-color-primary);
+ border-radius: 50%;
+}
+
+.scoreCircle strong {
+ font-size: 1.45rem;
+}
+
+.scoreCircle span {
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.65rem;
+}
+
+.scoreDetails {
+ flex: 1;
+}
+
+.scoreDetails > span {
+ font-size: 0.77rem;
+ font-weight: 750;
+}
+
+.progressTrack,
+.skillTrack {
+ overflow: hidden;
+ height: 7px;
+ border-radius: 999px;
+ background: var(--ifm-color-emphasis-200);
+}
+
+.progressTrack {
+ margin-top: 10px;
+}
+
+.progressFill,
+.skillFill {
+ height: 100%;
+ border-radius: inherit;
+ background: var(--ifm-color-primary);
+}
+
+.progressFill {
+ width: 82%;
+}
+
+.scoreDetails small {
+ display: block;
+ margin-top: 8px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.65rem;
+}
+
+.skillList {
+ display: grid;
+ gap: 14px;
+ margin-top: 25px;
+ padding-top: 22px;
+ border-top: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.skillHeader {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 6px;
+ font-size: 0.7rem;
+}
+
+.skillHeader strong {
+ color: var(--ifm-color-primary);
+}
+
+/* ================================================================
+ PRACTICE LOOP
+================================================================ */
+
+.loopGrid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 15px;
+}
+
+.loopCard {
+ position: relative;
+ padding: 25px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 14px;
+ background: var(--ifm-background-surface-color);
+}
+
+.stepNumber {
+ position: absolute;
+ top: 18px;
+ right: 18px;
+ color: var(--ifm-color-emphasis-400);
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ font-size: 0.7rem;
+ font-weight: 800;
+}
+
+.loopIcon {
+ display: grid;
+ place-items: center;
+ width: 45px;
+ height: 45px;
+ border-radius: 11px;
+ color: var(--ifm-color-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 9%,
+ transparent
+ );
+}
+
+.loopCard h3 {
+ margin: 19px 0 7px;
+ font-size: 1rem;
+}
+
+.loopCard p {
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.78rem;
+ line-height: 1.6;
+}
+
+/* ================================================================
+ PROGRESS
+================================================================ */
+
+.progressCard {
+ display: grid;
+ grid-template-columns: 280px 1fr;
+ gap: 60px;
+ align-items: center;
+ padding: 45px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 20px;
+ background: var(--ifm-background-surface-color);
+}
+
+.progressVisual {
+ display: flex;
+ justify-content: center;
+}
+
+.progressRing {
+ display: grid;
+ place-items: center;
+ width: 220px;
+ height: 220px;
+ border-radius: 50%;
+ background:
+ conic-gradient(
+ var(--ifm-color-primary) 0 68%,
+ var(--ifm-color-emphasis-200) 68% 100%
+ );
+}
+
+.progressRing::before {
+ content: "";
+ position: absolute;
+ width: 175px;
+ height: 175px;
+ border-radius: 50%;
+ background: var(--ifm-background-surface-color);
+}
+
+.progressRing > div {
+ position: relative;
+ z-index: 1;
+ text-align: center;
+}
+
+.progressRing strong,
+.progressRing span {
+ display: block;
+}
+
+.progressRing strong {
+ font-size: 2.1rem;
+}
+
+.progressRing span {
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.7rem;
+}
+
+.progressContent h2 {
+ margin: 9px 0 12px;
+ font-size: 2rem;
+ letter-spacing: -0.035em;
+}
+
+.progressContent > p {
+ max-width: 650px;
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ line-height: 1.65;
+}
+
+.progressStats {
+ display: flex;
+ gap: 40px;
+ margin: 25px 0;
+}
+
+.progressStats strong,
+.progressStats span {
+ display: block;
+}
+
+.progressStats strong {
+ font-size: 1.35rem;
+}
+
+.progressStats span {
+ margin-top: 2px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.68rem;
+}
+
+/* ================================================================
+ COMMUNITY
+================================================================ */
+
+.communityCard {
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ align-items: center;
+ gap: 25px;
+ padding: 35px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 18px;
+ background: var(--ifm-background-surface-color);
+}
+
+.communityIcon {
+ display: grid;
+ place-items: center;
+ width: 58px;
+ height: 58px;
+ border-radius: 14px;
+ color: var(--ifm-color-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 9%,
+ transparent
+ );
+}
+
+.communityCard h2 {
+ margin: 8px 0 8px;
+ font-size: 1.45rem;
+}
+
+.communityCard p {
+ max-width: 680px;
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.82rem;
+ line-height: 1.6;
+}
+
+.communityActions {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ gap: 9px;
+}
+
+.textButton {
+ min-height: 38px;
+ color: var(--ifm-color-primary);
+ font-size: 0.76rem;
+}
+
+/* ================================================================
+ FINAL CTA
+================================================================ */
+
+.finalCta {
+ position: relative;
+ isolation: isolate;
+ overflow: hidden;
+ padding: 110px 0;
+ text-align: center;
+ border-top: 1px solid var(--ifm-color-emphasis-200);
+ background:
+ radial-gradient(
+ circle at 50% 0,
+ color-mix(in srgb, var(--ifm-color-primary) 13%, transparent),
+ transparent 40%
+ ),
+ var(--ifm-background-color);
+}
+
+.finalCta .finalGlow {
+ top: -350px;
+}
+
+.finalContent {
+ position: relative;
+ max-width: 780px;
+ margin: 0 auto;
+}
+
+.finalIcon {
+ display: grid;
+ place-items: center;
+ width: 48px;
+ height: 48px;
+ margin: 0 auto 20px;
+ border: 1px solid
+ color-mix(in srgb, var(--ifm-color-primary) 25%, transparent);
+ border-radius: 13px;
+ color: var(--ifm-color-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 8%,
+ transparent
+ );
+}
+
+.finalContent h2 {
+ margin: 13px 0 15px;
+ font-size: clamp(2.2rem, 5vw, 3.8rem);
+ line-height: 1;
+ letter-spacing: -0.055em;
+}
+
+.finalContent h2 span {
+ color: var(--ifm-color-primary);
+}
+
+.finalContent > p {
+ max-width: 650px;
+ margin: 0 auto;
+ color: var(--ifm-color-emphasis-700);
+ line-height: 1.7;
+}
+
+.finalActions {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 11px;
+ margin-top: 28px;
+}
+
+.finalTrust {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 18px;
+ margin-top: 23px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.7rem;
+}
+
+.finalTrust span {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+}
+
+.finalTrust svg {
+ color: var(--ifm-color-primary);
+}
+
+/* ================================================================
+ RESPONSIVE
+================================================================ */
+
+@media (max-width: 1100px) {
+ .hero .container {
+ grid-template-columns: 1fr;
+ gap: 50px;
+ }
+
+ .heroContent {
+ max-width: 800px;
+ }
+
+ .codePreview {
+ max-width: 760px;
+ }
+
+ .statsGrid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .statCard:nth-child(2) {
+ border-right: 0;
+ }
+
+ .statCard:nth-child(-n + 2) {
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ }
+
+ .statCard:first-child {
+ padding-left: 24px;
+ }
+
+ .interviewCard {
+ grid-template-columns: 1fr;
+ }
+
+ .progressCard {
+ grid-template-columns: 1fr;
+ }
+
+ .progressVisual {
+ justify-content: flex-start;
+ }
+
+ .communityCard {
+ grid-template-columns: auto 1fr;
+ }
+
+ .communityActions {
+ grid-column: 1 / -1;
+ flex-direction: row;
+ align-items: center;
+ }
+}
+
+@media (max-width: 850px) {
+ .section {
+ padding: 75px 0;
+ }
+
+ .difficultyGrid,
+ .categoryGrid,
+ .problemGrid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .loopGrid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .dailyCard {
+ grid-template-columns: auto 1fr;
+ }
+
+ .dailyButton {
+ grid-column: 1 / -1;
+ justify-self: start;
+ }
+
+ .explorer {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .filters {
+ width: fit-content;
+ }
+}
+
+@media (max-width: 640px) {
+ .container {
+ width: min(100% - 28px, 1180px);
+ }
+
+ .hero {
+ padding: 75px 0 55px;
+ }
+
+ .hero h1 {
+ font-size: clamp(2.5rem, 12vw, 3.6rem);
+ }
+
+ .heroDescription {
+ font-size: 0.95rem;
+ }
+
+ .heroTrust {
+ gap: 7px;
+ font-size: 0.7rem;
+ }
+
+ .trustDivider {
+ display: none;
+ }
+
+ .heroActions {
+ flex-direction: column;
+ }
+
+ .heroActions a {
+ width: 100%;
+ }
+
+ .codePreview {
+ border-radius: 12px;
+ }
+
+ .codeBody {
+ min-height: 290px;
+ }
+
+ .codeBody code {
+ font-size: 0.66rem;
+ }
+
+ .codeFooter {
+ gap: 8px;
+ flex-wrap: wrap;
+ }
+
+ .statsGrid {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ .statCard {
+ padding: 12px 10px !important;
+ border-right: 1px solid var(--ifm-color-emphasis-200);
+ }
+
+ .statCard:nth-child(even) {
+ border-right: 0;
+ }
+
+ .statCard:nth-child(-n + 2) {
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ }
+
+ .statIcon {
+ width: 32px;
+ height: 32px;
+ flex-basis: 32px;
+ }
+
+ .dailyCard {
+ grid-template-columns: 1fr;
+ padding: 22px;
+ }
+
+ .dailyButton {
+ width: 100%;
+ }
+
+ .difficultyGrid,
+ .categoryGrid,
+ .problemGrid,
+ .loopGrid {
+ grid-template-columns: 1fr;
+ }
+
+ .sectionHeading {
+ margin-bottom: 30px;
+ }
+
+ .sectionHeading h2 {
+ font-size: 2rem;
+ }
+
+ .interviewCard,
+ .progressCard {
+ padding: 25px;
+ gap: 30px;
+ }
+
+ .interviewFeatures {
+ grid-template-columns: 1fr;
+ }
+
+ .interviewVisual {
+ padding: 18px;
+ }
+
+ .interviewScore {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .progressVisual {
+ justify-content: center;
+ }
+
+ .progressRing {
+ width: 180px;
+ height: 180px;
+ }
+
+ .progressRing::before {
+ width: 143px;
+ height: 143px;
+ }
+
+ .progressStats {
+ justify-content: space-between;
+ gap: 15px;
+ }
+
+ .communityCard {
+ grid-template-columns: 1fr;
+ padding: 25px;
+ }
+
+ .communityActions {
+ grid-column: auto;
+ flex-direction: column;
+ }
+
+ .communityActions a {
+ width: 100%;
+ }
+
+ .finalCta {
+ padding: 80px 0;
+ }
+
+ .finalContent h2 {
+ font-size: 2.45rem;
+ }
+
+ .finalActions {
+ flex-direction: column;
+ }
+
+ .finalActions a {
+ width: 100%;
+ }
+
+ .finalTrust {
+ flex-direction: column;
+ align-items: center;
+ gap: 9px;
+ }
+}
+
+/* ================================================================
+ ACCESSIBILITY / REDUCED MOTION
+================================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+ .primaryButton,
+ .secondaryButton,
+ .outlineButton,
+ .dailyButton,
+ .difficultyCard,
+ .categoryCard,
+ .problemCard {
+ transition: none;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/privacy-policy/index.tsx b/src/pages/privacy-policy/index.tsx
index 8a9714954..a5ae80ad9 100644
--- a/src/pages/privacy-policy/index.tsx
+++ b/src/pages/privacy-policy/index.tsx
@@ -1,165 +1,841 @@
+import React, { useState } from "react";
import Layout from "@theme/Layout";
-import React from "react";
+import Link from "@docusaurus/Link";
+
+import {
+ ArrowRight,
+ BarChart3,
+ CheckCircle2,
+ ChevronDown,
+ Cookie,
+ Database,
+ Eye,
+ FileText,
+ Github,
+ Globe2,
+ Lock,
+ Mail,
+ Settings,
+ Shield,
+ ShieldCheck,
+ UserCheck,
+ Users,
+} from "lucide-react";
+
+import styles from "./styles.module.css";
+
+const sections = [
+ { id: "introduction", label: "Introduction" },
+ { id: "information-we-collect", label: "Information We Collect" },
+ { id: "how-we-use-information", label: "How We Use Information" },
+ { id: "cookies", label: "Cookies & Similar Technologies" },
+ { id: "third-party-services", label: "Third-Party Services" },
+ { id: "open-source", label: "Open Source & GitHub" },
+ { id: "data-sharing", label: "Data Sharing" },
+ { id: "data-security", label: "Data Security" },
+ { id: "data-retention", label: "Data Retention" },
+ { id: "your-rights", label: "Your Rights & Choices" },
+ { id: "children", label: "Children's Privacy" },
+ { id: "international", label: "International Use" },
+ { id: "changes", label: "Changes to This Policy" },
+ { id: "contact", label: "Contact Us" },
+];
+
+const principles = [
+ {
+ title: "Transparency",
+ description:
+ "We aim to explain what information may be collected and why it may be used.",
+ icon: Eye,
+ },
+ {
+ title: "Security",
+ description:
+ "We take reasonable measures to protect information handled through our services.",
+ icon: ShieldCheck,
+ },
+ {
+ title: "Purpose",
+ description:
+ "Information should be used for legitimate purposes connected to operating and improving CodeHarborHub.",
+ icon: Database,
+ },
+ {
+ title: "Choice",
+ description:
+ "Where applicable, we provide choices regarding communications, cookies and personal information.",
+ icon: UserCheck,
+ },
+];
+
+const faqs = [
+ {
+ question: "What information does CodeHarborHub collect?",
+ answer:
+ "Depending on how you use the website, we may receive information that you voluntarily provide, technical information about your device or browser, usage information, and information provided through third-party services you choose to use.",
+ },
+ {
+ question: "Does CodeHarborHub sell personal information?",
+ answer:
+ "CodeHarborHub does not intend to sell personal information. If our data practices change in a material way, this Privacy Policy will be updated as appropriate.",
+ },
+ {
+ question: "Does the website use cookies?",
+ answer:
+ "The website may use cookies or similar technologies for essential functionality, preferences, analytics, security and, where applicable, advertising. The specific technologies used may change as the platform evolves.",
+ },
+ {
+ question: "How can I contact CodeHarborHub about privacy?",
+ answer:
+ "You can contact us about privacy questions, requests or concerns through the contact information provided at the end of this policy.",
+ },
+];
+
+function PrivacyPolicy(): React.JSX.Element {
+ const [openFaq, setOpenFaq] = useState(0);
-const PrivacyPolicy: React.FC = () => {
return (
-
-
Privacy Policy
-
- Last Updated: 21st March 2024
-
- CodeHarborHub
-
- , an educational and technology-focused platform operated by{" "}
-
- Ajay Dhangar
-
- . We are committed to protecting your privacy and ensuring the
- security of your personal information. This Privacy Policy explains
- how we collect, use, disclose, and safeguard your information when you
- visit our website.
-
-
-
- Information We Collect
-
-
- We collect personal information that you voluntarily provide to us
- when you interact with the website, such as your name, email address,
- and any other information you choose to share. We may also collect
- technical information about your device and usage patterns to improve
- our website's functionality and user experience.
-
-
-
- How We Use Your Information
-
-
-
- Personalization: To customize your experience on
- our website and provide content and resources tailored to your
- interests and preferences.
-
-
- Communication: To respond to your inquiries,
- provide customer support, and send you updates and notifications
- about our services, events, and educational materials.
-
-
- Analytics: To analyze trends, track user
- interactions, and gather demographic information to improve our
- website's performance and user experience.
-
-
- Security: To protect our website from security
- threats, fraud, or other malicious activities.
-
-
- Legal Compliance: To comply with applicable laws,
- regulations, or legal processes.
-
-
- Marketing: To promote our services, events, and
- educational materials through targeted advertising and promotional
- campaigns.
-
-
-
-
- Disclosure of Your Information
-
-
- We may share your information with trusted third-party service
- providers who assist us in operating our website, hosting our content,
- managing our communications, and analyzing user data. We may also
- disclose your information to comply with applicable laws and
- regulations, respond to legal requests, or protect our rights,
- property, or safety.
-
-
-
Data Retention
-
- We will retain your personal information for as long as necessary to
- fulfill the purposes outlined in this Privacy Policy, unless a longer
- retention period is required or permitted by law.
-
-
-
Your Rights
-
- You have the right to access, update, correct, or delete your personal
- information at any time. You can also object to the processing of your
- personal information or request that we restrict certain processing
- activities. To exercise these rights, please contact us using the
- information provided below.
-
-
-
Third-Party Links
-
- Our website may contain links to third-party websites or resources
- that are not owned or controlled by us. We are not responsible for the
- privacy practices or content of these third-party websites. We
- encourage you to review the privacy policies of these websites before
- providing any personal information.
-
-
-
- Children's Privacy
-
-
- Our website is not directed to children under the age of 13. We do not
- knowingly collect personal information from children under 13. If you
- are a parent or guardian and believe that your child has provided us
- with personal information, please contact us, and we will take
- appropriate steps to remove such information from our records.
-
-
-
- Changes to This Privacy Policy
-
-
- We reserve the right to update or modify this Privacy Policy at any
- time. We will notify you of any changes by posting the new Privacy
- Policy on this page. Your continued use of our website after any
- modifications indicates your acceptance of the updated Privacy Policy.
-
-
-
Contact Us
-
- If you have any questions or concerns about this Privacy Policy,
- please contact us at{" "}
-
- codeharborhub@gmail.com
-
- . Thank you for visiting CodeHarborHub!
-
-
+ {/* =====================================================
+ HERO
+ ====================================================== */}
+
+
+
+
+
+
+ Privacy & Transparency
+
+
+
+ Your privacy
+ matters to us.
+
+
+
+ This Privacy Policy explains how CodeHarborHub may collect,
+ use, protect and handle information when you visit or use our
+ website, learning resources, community features and related
+ services.
+
+
+
+
+ Privacy Policy
+
+
+
+ Clear & transparent
+
+
+
+ For our global community
+
+
+
+
+
+
+
+
+
Privacy by principle
+
+
+ We aim to collect and use information responsibly and only for
+ legitimate purposes connected with providing and improving
+ CodeHarborHub.
+
+
+
+
+
+
+ Last updated
+ September 17, 2026
+
+
+
+
+ {/* =====================================================
+ PRINCIPLES
+ ====================================================== */}
+
+
+
+ {principles.map((principle) => {
+ const Icon = principle.icon;
+
+ return (
+
+
+
+
+ {principle.title}
+
+ {principle.description}
+
+ );
+ })}
+
+
+
+ {/* =====================================================
+ CONTENT
+ ====================================================== */}
+
+
+
+ {/* Sidebar */}
+
+
+ {/* Main document */}
+
+ {/* Introduction */}
+
+ 01
+
+ Introduction
+
+
+ Welcome to CodeHarborHub. We are committed to respecting
+ your privacy and being transparent about how information may
+ be handled when you use our website and services.
+
+
+
+ This Privacy Policy describes the general categories of
+ information that may be collected, how that information may
+ be used, the role of cookies and third-party services, and
+ choices that may be available to you.
+
+
+
+
+
+
+
Important
+
+ CodeHarborHub is an evolving open-source learning
+ platform. The technologies and services used by the
+ platform may change over time. This policy may therefore
+ be updated when our practices change.
+
+
+
+
+ {/* Information We Collect */}
+
+
+ {/* How We Use */}
+
+
+ {/* Cookies */}
+
+ 04
+
+ Cookies & Similar Technologies
+
+
+ CodeHarborHub may use cookies, local storage, pixels or
+ similar technologies depending on the features and services
+ enabled on the website.
+
+
+
+
+
+
+
+
Essential
+
+
+ Technologies required for core website functionality,
+ security or preferences.
+
+
+
+
+
+
+
+
Analytics
+
+
+ Technologies that may help us understand traffic,
+ usage and website performance.
+
+
+
+
+
+
+
+
Preferences
+
+
+ Technologies that may remember choices such as
+ preferences or interface settings.
+
+
+
+ Depending on your browser, device and location, you may be
+ able to control cookies through browser settings or
+ available consent controls.
+
+
+
+ {/* Third Party */}
+
+ 05
+
+ Third-Party Services
+
+
+ CodeHarborHub may use third-party services to provide
+ hosting, analytics, authentication, advertising,
+ communications, comments, community functionality or other
+ infrastructure.
+
+
+
+ Examples may include hosting providers, GitHub, analytics
+ providers, advertising providers, authentication services,
+ community platforms and other tools integrated into the
+ website.
+
+
+
+
+
+
+
Third-party privacy policies
+
+ Third-party services operate under their own terms and
+ privacy policies. We encourage you to review the
+ relevant policies of services you choose to use.
+
+
+
+
+ {/* Open Source */}
+
+ 06
+
+ Open Source & GitHub
+
+
+ CodeHarborHub is an open-source ecosystem. Contributions
+ made through public repositories, issues, pull requests,
+ discussions or other public collaboration channels may be
+ visible to other users and the public.
+
+
+
+ Do not include passwords, API keys, private credentials,
+ financial information, private personal information or
+ other sensitive information in public repositories, issues,
+ pull requests or discussions.
+
+
+
+
+
+
+ {/* Data Sharing */}
+
+ 07
+
+ Data Sharing
+
+
+ We may share information with service providers or
+ technology partners when reasonably necessary to operate
+ CodeHarborHub and provide requested functionality.
+
+
+
+ Information may also be disclosed when required by law,
+ legal process, security requirements or to protect the
+ rights and safety of users, contributors or the platform.
+
+
+
+ We do not intend to sell personal information as a business
+ practice.
+
+
+
+ {/* Security */}
+
+ 08
+
+ Data Security
+
+
+ We take reasonable technical and organizational measures
+ intended to protect information from unauthorized access,
+ alteration, disclosure or destruction.
+
+
+
+ However, no internet transmission, storage system or
+ electronic service can be guaranteed to be completely
+ secure. You should avoid submitting sensitive information
+ through public channels or public repositories.
+
+
+
+
+ Protect credentials
+
+ Never publish passwords, tokens or API keys.
+
+
+
+
+ Use secure channels
+
+ Use appropriate private channels for sensitive requests.
+
+
+
+
+ {/* Retention */}
+
+ 09
+
+ Data Retention
+
+
+ We retain information only for as long as reasonably
+ necessary for the purpose for which it was collected,
+ including providing services, maintaining records,
+ resolving disputes, enforcing agreements and meeting legal
+ obligations.
+
+
+
+ Retention periods can vary depending on the type of
+ information and the context in which it was collected.
+
+
+
+ {/* Rights */}
+
+ 10
+
+ Your Rights & Choices
+
+
+ Depending on your location and applicable law, you may have
+ rights concerning your personal information.
+
+
+
+
+ Request information about personal data we may hold.
+
+ Request correction of inaccurate information.
+ Request deletion where legally applicable.
+ Object to or restrict certain processing.
+ Withdraw consent where processing is based on consent.
+ Opt out of certain communications.
+
+
+
+ These rights may be subject to legal limitations and
+ verification requirements.
+
+
+
+ To make a privacy-related request, contact us using the
+ information in the{" "}
+ Contact Us section.
+
+
+
+ {/* Children */}
+
+ 11
+
+ Children's Privacy
+
+
+ CodeHarborHub is designed as a technology learning platform
+ for a broad developer audience. We do not knowingly seek to
+ collect personal information from children in violation of
+ applicable laws.
+
+
+
+ If you believe a child has provided personal information to
+ us in a way that violates applicable requirements, please
+ contact us so that the situation can be reviewed.
+
+
+
+ {/* International */}
+
+ 12
+
+ International Use
+
+
+ CodeHarborHub is an online platform that may be accessed by
+ people from different countries. Depending on the services
+ involved, information may be processed or stored in
+ countries other than the country where you live.
+
+
+
+ Where applicable, processing and transfers are intended to
+ be handled in accordance with relevant legal requirements.
+
+
+
+ {/* Changes */}
+
+ 13
+
+ Changes to This Policy
+
+
+ We may update this Privacy Policy from time to time to
+ reflect changes in our services, technologies, legal
+ requirements or data practices.
+
+
+
+ When changes are made, the updated policy will be published
+ on this page with a revised "Last updated" date.
+
+
+
+
+
+
+ Current version
+ Last updated: September 17, 2026
+
+
+
+ {/* Contact */}
+
+
+
+
+
+ {/* =====================================================
+ FAQ
+ ====================================================== */}
+
+
+
+
PRIVACY FAQ
+
+
Common privacy questions.
+
+
+ Quick answers to some common questions about information and
+ privacy on CodeHarborHub.
+
+
+
+
+ {faqs.map((faq, index) => {
+ const isOpen = openFaq === index;
+
+ return (
+
+
+ setOpenFaq(isOpen ? null : index)
+ }
+ aria-expanded={isOpen}
+ >
+ {faq.question}
+
+
+
+ {isOpen && (
+
+ )}
+
+ );
+ })}
+
+
+
+ {/* =====================================================
+ FINAL CTA
+ ====================================================== */}
+
+
+
+
+
+
+
+ QUESTIONS ABOUT PRIVACY?
+
+
+
We're here to help.
+
+
+ If something in this policy is unclear or you have a
+ privacy-related request, contact the CodeHarborHub team.
+
+
+
+ Contact us
+
+
+
+
+
);
-};
+}
-export default PrivacyPolicy;
+export default PrivacyPolicy;
\ No newline at end of file
diff --git a/src/pages/privacy-policy/styles.module.css b/src/pages/privacy-policy/styles.module.css
new file mode 100644
index 000000000..19dd3999a
--- /dev/null
+++ b/src/pages/privacy-policy/styles.module.css
@@ -0,0 +1,1003 @@
+.page {
+ --privacy-border: var(--ifm-color-emphasis-200);
+ --privacy-muted: var(--ifm-color-emphasis-600);
+ --privacy-surface: var(--ifm-background-surface-color);
+ --privacy-primary: var(--ifm-color-primary);
+ --privacy-primary-dark: var(--ifm-color-primary-dark);
+ --privacy-radius: 20px;
+
+ min-height: 100vh;
+}
+
+/* =========================================================
+ SHARED
+========================================================= */
+
+.container {
+ width: min(1180px, calc(100% - 40px));
+ margin: 0 auto;
+}
+
+/* =========================================================
+ HERO
+========================================================= */
+
+.hero {
+ position: relative;
+ overflow: hidden;
+ padding: 90px 0 80px;
+ border-bottom: 1px solid var(--privacy-border);
+ background:
+ radial-gradient(
+ circle at 10% 20%,
+ color-mix(in srgb, var(--ifm-color-primary) 12%, transparent),
+ transparent 32%
+ ),
+ radial-gradient(
+ circle at 90% 20%,
+ color-mix(in srgb, #8b5cf6 9%, transparent),
+ transparent 30%
+ ),
+ var(--ifm-background-color);
+}
+
+.heroPattern {
+ position: absolute;
+ inset: 0;
+ opacity: 0.3;
+ pointer-events: none;
+ background-image:
+ linear-gradient(
+ color-mix(in srgb, var(--privacy-border) 35%, transparent) 1px,
+ transparent 1px
+ ),
+ linear-gradient(
+ 90deg,
+ color-mix(in srgb, var(--privacy-border) 35%, transparent) 1px,
+ transparent 1px
+ );
+ background-size: 50px 50px;
+ mask-image: linear-gradient(to bottom, black, transparent);
+}
+
+.hero .container {
+ position: relative;
+ z-index: 1;
+ display: grid;
+ grid-template-columns: 1.1fr 0.9fr;
+ gap: 70px;
+ align-items: center;
+}
+
+.heroContent {
+ max-width: 720px;
+}
+
+.eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 7px 12px;
+ border: 1px solid
+ color-mix(
+ in srgb,
+ var(--privacy-primary) 25%,
+ var(--privacy-border)
+ );
+ border-radius: 999px;
+ color: var(--privacy-primary);
+ background: color-mix(
+ in srgb,
+ var(--privacy-primary) 7%,
+ transparent
+ );
+ font-size: 0.8rem;
+ font-weight: 750;
+}
+
+.hero h1 {
+ margin: 23px 0 0;
+ font-size: clamp(2.8rem, 6vw, 5rem);
+ line-height: 1.02;
+ letter-spacing: -0.055em;
+ font-weight: 850;
+}
+
+.hero h1 span {
+ display: block;
+ background: linear-gradient(
+ 120deg,
+ var(--privacy-primary),
+ #8b5cf6
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+.heroContent > p {
+ max-width: 680px;
+ margin: 25px 0 0;
+ color: var(--privacy-muted);
+ font-size: 1.05rem;
+ line-height: 1.8;
+}
+
+.heroMeta {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 17px;
+ margin-top: 28px;
+}
+
+.heroMeta div {
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ color: var(--privacy-muted);
+ font-size: 0.8rem;
+}
+
+.heroMeta svg {
+ color: var(--privacy-primary);
+}
+
+/* =========================================================
+ HERO CARD
+========================================================= */
+
+.heroCard {
+ position: relative;
+ padding: 30px;
+ border: 1px solid var(--privacy-border);
+ border-radius: 22px;
+ background: var(--privacy-surface);
+ box-shadow: 0 25px 70px rgba(0, 0, 0, 0.09);
+}
+
+.heroCardIcon {
+ width: 52px;
+ height: 52px;
+ display: grid;
+ place-items: center;
+ border-radius: 15px;
+ color: var(--privacy-primary);
+ background: color-mix(
+ in srgb,
+ var(--privacy-primary) 10%,
+ transparent
+ );
+}
+
+.heroCard h2 {
+ margin: 21px 0 10px;
+ font-size: 1.35rem;
+}
+
+.heroCard p {
+ margin: 0;
+ color: var(--privacy-muted);
+ line-height: 1.7;
+ font-size: 0.86rem;
+}
+
+.heroCardLine {
+ display: flex;
+ gap: 7px;
+ margin-top: 27px;
+}
+
+.heroCardLine span {
+ height: 4px;
+ border-radius: 999px;
+ background: var(--privacy-primary);
+}
+
+.heroCardLine span:nth-child(1) {
+ width: 40%;
+}
+
+.heroCardLine span:nth-child(2) {
+ width: 25%;
+ opacity: 0.55;
+}
+
+.heroCardLine span:nth-child(3) {
+ width: 15%;
+ opacity: 0.3;
+}
+
+.updated {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 15px;
+ margin-top: 22px;
+ padding-top: 17px;
+ border-top: 1px solid var(--privacy-border);
+}
+
+.updated strong {
+ font-size: 0.75rem;
+}
+
+.updated span {
+ color: var(--privacy-muted);
+ font-size: 0.75rem;
+}
+
+/* =========================================================
+ PRINCIPLES
+========================================================= */
+
+.principlesSection {
+ padding: 65px 0;
+ background: var(--privacy-surface);
+}
+
+.principleGrid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 14px;
+}
+
+.principleCard {
+ padding: 22px;
+ border: 1px solid var(--privacy-border);
+ border-radius: 18px;
+ background: var(--ifm-background-color);
+}
+
+.principleIcon {
+ width: 42px;
+ height: 42px;
+ display: grid;
+ place-items: center;
+ border-radius: 11px;
+ color: var(--privacy-primary);
+ background: color-mix(
+ in srgb,
+ var(--privacy-primary) 9%,
+ transparent
+ );
+}
+
+.principleCard h3 {
+ margin: 18px 0 7px;
+ font-size: 0.98rem;
+}
+
+.principleCard p {
+ margin: 0;
+ color: var(--privacy-muted);
+ font-size: 0.8rem;
+ line-height: 1.65;
+}
+
+/* =========================================================
+ DOCUMENT LAYOUT
+========================================================= */
+
+.contentSection {
+ padding: 85px 0;
+}
+
+.contentLayout {
+ display: grid;
+ grid-template-columns: 245px minmax(0, 1fr);
+ gap: 60px;
+ align-items: start;
+}
+
+.sidebar {
+ position: relative;
+}
+
+.sidebarInner {
+ position: sticky;
+ top: 90px;
+ padding: 18px;
+ border: 1px solid var(--privacy-border);
+ border-radius: 17px;
+ background: var(--privacy-surface);
+}
+
+.sidebarTitle {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 13px;
+ color: var(--ifm-font-color-base);
+ font-size: 0.8rem;
+ font-weight: 800;
+}
+
+.sidebarTitle svg {
+ color: var(--privacy-primary);
+}
+
+.sidebar nav {
+ display: grid;
+ gap: 2px;
+}
+
+.sidebar nav a {
+ display: block;
+ padding: 7px 9px;
+ border-radius: 7px;
+ color: var(--privacy-muted);
+ font-size: 0.72rem;
+ line-height: 1.4;
+ text-decoration: none;
+}
+
+.sidebar nav a:hover {
+ color: var(--privacy-primary);
+ background: color-mix(
+ in srgb,
+ var(--privacy-primary) 7%,
+ transparent
+ );
+}
+
+/* =========================================================
+ DOCUMENT
+========================================================= */
+
+.document {
+ max-width: 800px;
+}
+
+.documentSection {
+ scroll-margin-top: 90px;
+ padding: 0 0 65px;
+ margin-bottom: 65px;
+ border-bottom: 1px solid var(--privacy-border);
+}
+
+.documentSection:last-child {
+ margin-bottom: 0;
+ border-bottom: 0;
+}
+
+.sectionNumber {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 34px;
+ height: 23px;
+ margin-bottom: 13px;
+ border-radius: 6px;
+ color: var(--privacy-primary);
+ background: color-mix(
+ in srgb,
+ var(--privacy-primary) 9%,
+ transparent
+ );
+ font-size: 0.66rem;
+ font-weight: 850;
+}
+
+.documentSection h2 {
+ margin: 0 0 18px;
+ font-size: clamp(1.7rem, 3vw, 2.3rem);
+ line-height: 1.15;
+ letter-spacing: -0.035em;
+}
+
+.documentSection h3 {
+ margin: 28px 0 9px;
+ font-size: 1.05rem;
+}
+
+.documentSection p {
+ margin: 0 0 16px;
+ color: var(--privacy-muted);
+ line-height: 1.8;
+ font-size: 0.91rem;
+}
+
+.documentSection p:last-child {
+ margin-bottom: 0;
+}
+
+.documentSection ul {
+ margin: 10px 0 20px;
+ padding-left: 22px;
+ color: var(--privacy-muted);
+ font-size: 0.89rem;
+ line-height: 1.9;
+}
+
+.documentSection li::marker {
+ color: var(--privacy-primary);
+}
+
+.documentSection a {
+ color: var(--privacy-primary);
+}
+
+/* =========================================================
+ NOTICE
+========================================================= */
+
+.notice {
+ display: flex;
+ gap: 13px;
+ margin-top: 25px;
+ padding: 17px;
+ border: 1px solid
+ color-mix(
+ in srgb,
+ var(--privacy-primary) 20%,
+ var(--privacy-border)
+ );
+ border-radius: 14px;
+ background: color-mix(
+ in srgb,
+ var(--privacy-primary) 5%,
+ transparent
+ );
+}
+
+.notice > svg {
+ flex: 0 0 auto;
+ margin-top: 2px;
+ color: var(--privacy-primary);
+}
+
+.notice strong,
+.notice p {
+ display: block;
+}
+
+.notice strong {
+ margin-bottom: 4px;
+ color: var(--ifm-font-color-base);
+ font-size: 0.83rem;
+}
+
+.notice p {
+ margin: 0;
+ font-size: 0.8rem;
+ line-height: 1.65;
+}
+
+/* =========================================================
+ USE GRID
+========================================================= */
+
+.useGrid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 9px;
+ margin: 25px 0;
+}
+
+.useGrid div {
+ display: flex;
+ align-items: flex-start;
+ gap: 9px;
+ padding: 12px;
+ border: 1px solid var(--privacy-border);
+ border-radius: 11px;
+ color: var(--privacy-muted);
+ font-size: 0.79rem;
+ line-height: 1.5;
+}
+
+.useGrid svg {
+ flex: 0 0 auto;
+ color: var(--ifm-color-success);
+}
+
+/* =========================================================
+ INFO CARDS
+========================================================= */
+
+.infoCards {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 12px;
+ margin: 25px 0;
+}
+
+.infoCard {
+ padding: 19px;
+ border: 1px solid var(--privacy-border);
+ border-radius: 15px;
+ background: var(--privacy-surface);
+}
+
+.infoCardIcon {
+ width: 38px;
+ height: 38px;
+ display: grid;
+ place-items: center;
+ border-radius: 10px;
+ color: var(--privacy-primary);
+ background: color-mix(
+ in srgb,
+ var(--privacy-primary) 9%,
+ transparent
+ );
+}
+
+.infoCard h3 {
+ margin: 15px 0 6px;
+ font-size: 0.9rem;
+}
+
+.infoCard p {
+ margin: 0;
+ font-size: 0.77rem;
+ line-height: 1.6;
+}
+
+/* =========================================================
+ LINKS
+========================================================= */
+
+.inlineLink {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ margin-top: 8px;
+ font-size: 0.83rem;
+ font-weight: 750;
+ text-decoration: none;
+}
+
+/* =========================================================
+ SECURITY
+========================================================= */
+
+.securityGrid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 12px;
+ margin-top: 25px;
+}
+
+.securityGrid div {
+ padding: 18px;
+ border: 1px solid var(--privacy-border);
+ border-radius: 14px;
+ background: var(--privacy-surface);
+}
+
+.securityGrid svg {
+ color: var(--privacy-primary);
+}
+
+.securityGrid strong,
+.securityGrid span {
+ display: block;
+}
+
+.securityGrid strong {
+ margin-top: 12px;
+ font-size: 0.82rem;
+}
+
+.securityGrid span {
+ margin-top: 4px;
+ color: var(--privacy-muted);
+ font-size: 0.76rem;
+ line-height: 1.55;
+}
+
+/* =========================================================
+ UPDATE
+========================================================= */
+
+.updateCard {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-top: 25px;
+ padding: 15px;
+ border: 1px solid var(--privacy-border);
+ border-radius: 13px;
+}
+
+.updateCard svg {
+ color: var(--privacy-primary);
+}
+
+.updateCard strong,
+.updateCard span {
+ display: block;
+}
+
+.updateCard strong {
+ font-size: 0.8rem;
+}
+
+.updateCard span {
+ margin-top: 3px;
+ color: var(--privacy-muted);
+ font-size: 0.75rem;
+}
+
+/* =========================================================
+ CONTACT
+========================================================= */
+
+.contactCard {
+ display: flex;
+ align-items: center;
+ gap: 13px;
+ margin-top: 25px;
+ padding: 18px;
+ border: 1px solid var(--privacy-border);
+ border-radius: 15px;
+ background: var(--privacy-surface);
+}
+
+.contactIcon {
+ width: 43px;
+ height: 43px;
+ display: grid;
+ place-items: center;
+ border-radius: 11px;
+ color: var(--privacy-primary);
+ background: color-mix(
+ in srgb,
+ var(--privacy-primary) 9%,
+ transparent
+ );
+}
+
+.contactCard span,
+.contactCard a {
+ display: block;
+}
+
+.contactCard span {
+ color: var(--privacy-muted);
+ font-size: 0.74rem;
+}
+
+.contactCard a {
+ margin-top: 4px;
+ font-size: 0.85rem;
+ font-weight: 750;
+ text-decoration: none;
+}
+
+.contactActions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ margin-top: 18px;
+}
+
+.primaryButton,
+.secondaryButton {
+ min-height: 44px;
+ padding: 0 16px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ border-radius: 11px;
+ text-decoration: none !important;
+ font-size: 0.8rem;
+ font-weight: 750;
+ transition:
+ transform 160ms ease,
+ background 160ms ease,
+ border-color 160ms ease;
+}
+
+.primaryButton {
+ color: #fff !important;
+ background: var(--privacy-primary);
+}
+
+.primaryButton:hover {
+ color: #fff !important;
+ background: var(--privacy-primary-dark);
+ transform: translateY(-2px);
+}
+
+.secondaryButton {
+ color: var(--ifm-font-color-base) !important;
+ border: 1px solid var(--privacy-border);
+ background: var(--privacy-surface);
+}
+
+.secondaryButton:hover {
+ color: var(--privacy-primary) !important;
+ border-color: var(--privacy-primary);
+ transform: translateY(-2px);
+}
+
+/* =========================================================
+ FAQ
+========================================================= */
+
+.faqSection {
+ padding: 85px 0;
+ background: var(--privacy-surface);
+}
+
+.faqHeading {
+ max-width: 720px;
+ margin: 0 auto 35px;
+ text-align: center;
+}
+
+.faqHeading h2 {
+ margin: 8px 0 12px;
+ font-size: clamp(1.9rem, 3vw, 2.6rem);
+ letter-spacing: -0.04em;
+}
+
+.faqHeading p {
+ margin: 0;
+ color: var(--privacy-muted);
+ line-height: 1.7;
+ font-size: 0.87rem;
+}
+
+.faqList {
+ max-width: 850px;
+ margin: 0 auto;
+ display: grid;
+ gap: 10px;
+}
+
+.faqItem {
+ overflow: hidden;
+ border: 1px solid var(--privacy-border);
+ border-radius: 15px;
+ background: var(--ifm-background-color);
+}
+
+.faqItemOpen {
+ border-color: color-mix(
+ in srgb,
+ var(--privacy-primary) 25%,
+ var(--privacy-border)
+ );
+}
+
+.faqQuestion {
+ width: 100%;
+ padding: 19px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 20px;
+ border: 0;
+ color: var(--ifm-font-color-base);
+ background: transparent;
+ font: inherit;
+ font-size: 0.84rem;
+ font-weight: 700;
+ text-align: left;
+ cursor: pointer;
+}
+
+.faqQuestion:hover {
+ color: var(--privacy-primary);
+}
+
+.faqChevron {
+ flex: 0 0 auto;
+ transition: transform 180ms ease;
+}
+
+.faqItemOpen .faqChevron {
+ transform: rotate(180deg);
+}
+
+.faqAnswer {
+ padding: 0 19px 19px;
+}
+
+.faqAnswer p {
+ margin: 0;
+ color: var(--privacy-muted);
+ font-size: 0.81rem;
+ line-height: 1.7;
+}
+
+/* =========================================================
+ FINAL
+========================================================= */
+
+.finalSection {
+ padding: 85px 0 105px;
+}
+
+.finalCard {
+ padding: 65px 25px;
+ border: 1px solid
+ color-mix(
+ in srgb,
+ var(--privacy-primary) 25%,
+ var(--privacy-border)
+ );
+ border-radius: 27px;
+ text-align: center;
+ background:
+ radial-gradient(
+ circle at 50% 0%,
+ color-mix(in srgb, var(--privacy-primary) 12%, transparent),
+ transparent 45%
+ ),
+ var(--privacy-surface);
+}
+
+.finalIcon {
+ width: 52px;
+ height: 52px;
+ margin: 0 auto 19px;
+ display: grid;
+ place-items: center;
+ border-radius: 14px;
+ color: var(--privacy-primary);
+ background: color-mix(
+ in srgb,
+ var(--privacy-primary) 10%,
+ transparent
+ );
+}
+
+.finalCard h2 {
+ margin: 8px 0 12px;
+ font-size: clamp(2rem, 4vw, 3rem);
+ letter-spacing: -0.045em;
+}
+
+.finalCard p {
+ max-width: 620px;
+ margin: 0 auto 25px;
+ color: var(--privacy-muted);
+ line-height: 1.7;
+ font-size: 0.88rem;
+}
+
+/* =========================================================
+ RESPONSIVE
+========================================================= */
+
+@media (max-width: 996px) {
+ .hero .container {
+ grid-template-columns: 1fr;
+ gap: 45px;
+ }
+
+ .heroCard {
+ max-width: 600px;
+ }
+
+ .principleGrid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .contentLayout {
+ grid-template-columns: 1fr;
+ gap: 30px;
+ }
+
+ .sidebarInner {
+ position: static;
+ }
+
+ .sidebar nav {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 5px;
+ }
+
+ .sidebar nav a {
+ border: 1px solid var(--privacy-border);
+ }
+
+ .document {
+ max-width: none;
+ }
+}
+
+@media (max-width: 700px) {
+ .container {
+ width: min(100% - 28px, 1180px);
+ }
+
+ .hero {
+ padding: 60px 0;
+ }
+
+ .hero h1 {
+ font-size: clamp(2.4rem, 12vw, 3.5rem);
+ }
+
+ .heroContent > p {
+ font-size: 0.96rem;
+ }
+
+ .heroMeta {
+ gap: 10px 14px;
+ }
+
+ .principleGrid,
+ .infoCards,
+ .securityGrid {
+ grid-template-columns: 1fr;
+ }
+
+ .contentSection {
+ padding: 60px 0;
+ }
+
+ .documentSection {
+ padding-bottom: 50px;
+ margin-bottom: 50px;
+ }
+
+ .useGrid {
+ grid-template-columns: 1fr;
+ }
+
+ .contactActions {
+ flex-direction: column;
+ }
+
+ .contactActions .primaryButton,
+ .contactActions .secondaryButton {
+ width: 100%;
+ }
+
+ .finalSection {
+ padding: 60px 0 80px;
+ }
+
+ .finalCard {
+ padding: 50px 20px;
+ border-radius: 21px;
+ }
+}
+
+@media (max-width: 480px) {
+ .principlesSection,
+ .faqSection {
+ padding: 55px 0;
+ }
+
+ .heroCard {
+ padding: 22px;
+ }
+
+ .sidebarInner {
+ padding: 13px;
+ }
+
+ .sidebar nav {
+ max-height: 230px;
+ overflow-y: auto;
+ }
+
+ .documentSection h2 {
+ font-size: 1.65rem;
+ }
+
+ .documentSection p {
+ font-size: 0.86rem;
+ }
+
+ .heroMeta div {
+ font-size: 0.74rem;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .primaryButton,
+ .secondaryButton,
+ .faqChevron {
+ transition: none;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/projects/index.tsx b/src/pages/projects/index.tsx
new file mode 100644
index 000000000..66ff8d81f
--- /dev/null
+++ b/src/pages/projects/index.tsx
@@ -0,0 +1,1187 @@
+import React, { useMemo, useState } from "react";
+// @ts-ignore
+import Layout from "@theme/Layout";
+// @ts-ignore
+import Link from "@docusaurus/Link";
+
+import {
+ ArrowRight,
+ ArrowUpRight,
+ Award,
+ BarChart3,
+ BookOpen,
+ BriefcaseBusiness,
+ CheckCircle2,
+ ChevronRight,
+ Code2,
+ Database,
+ Filter,
+ Flame,
+ Globe,
+ Layers3,
+ LockKeyhole,
+ Rocket,
+ Search,
+ Server,
+ ShieldCheck,
+ Sparkles,
+ Star,
+ Terminal,
+ Trophy,
+ Users,
+ X,
+ Zap,
+} from "lucide-react";
+// @ts-ignore
+import styles from "./styles.module.css";
+
+type Difficulty = "Beginner" | "Intermediate" | "Advanced";
+
+type Project = {
+ title: string;
+ description: string;
+ category: string;
+ difficulty: Difficulty;
+ duration: string;
+ technologies: string[];
+ tags: string[];
+ href: string;
+ featured?: boolean;
+ popular?: boolean;
+ icon: React.ReactNode;
+};
+
+type Track = {
+ title: string;
+ description: string;
+ icon: React.ReactNode;
+ projects: string;
+ href: string;
+};
+
+const PROJECTS: Project[] = [
+ {
+ title: "Developer Portfolio",
+ description:
+ "Build a professional developer portfolio with projects, skills, experience, GitHub integration and a responsive design.",
+ category: "Frontend",
+ difficulty: "Beginner",
+ duration: "1–2 weeks",
+ technologies: ["HTML", "CSS", "JavaScript"],
+ tags: ["Portfolio", "Responsive", "UI"],
+ href: "#", // /projects/developer-portfolio/
+ featured: true,
+ popular: true,
+ icon:
+
+ {/* ========================================================
+ HERO
+ ========================================================= */}
+
+
+
+
+
+
+
+ BUILD • SHIP • GROW
+ Industry Focused
+
+
+
+ Don't just learn code.
+ Build things that matter.
+
+
+
+ Turn your knowledge into real-world experience with
+ structured projects designed around the skills,
+ workflows and engineering practices used in the
+ industry.
+
+
+
+
+ Explore Projects
+
+
+
+
+
+ Featured Projects
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Project architecture visual */}
+
+
+
+
+
+
+ project-architecture
+
+
+
+
+
+
+
+ Frontend
+
+
+
+
+
+
+ API
+
+
+
+
+
+
+ Database
+
+
+
+ Auth
+
+
+
+ Deploy
+
+
+
+ Monitor
+
+
+
+
+
+
+
+ v1.0.0
+
+
+
+
+ {/* ========================================================
+ STATS
+ ========================================================= */}
+
+
+
+ {STATS.map((stat) => (
+
+
+ {stat.icon}
+
+
+
+ {stat.value}
+ {stat.label}
+
+
+ ))}
+
+
+
+ {/* ========================================================
+ FEATURED PROJECTS
+ ========================================================= */}
+
+
+
+
+
+ {featuredProjects.map((project) => (
+
+ ))}
+
+
+
+ {/* ========================================================
+ LEARNING TRACKS
+ ========================================================= */}
+
+
+
+
+
+ {TRACKS.map((track) => (
+
+
+ {track.icon}
+
+
+
+
+
+
{track.description}
+
+
{track.projects}
+
+
+ ))}
+
+
+
+ {/* ========================================================
+ PROJECT EXPLORER
+ ========================================================= */}
+
+
+
+
+
+
+ setSearch("")}
+ aria-label="Clear search"
+ >
+
+ )}
+
+
+
+
+
+
+
+ {CATEGORIES.map((item) => (
+ setCategory(item)}
+ className={
+ category === item
+ ? styles.filterActive
+ : styles.filter
+ }
+ >
+ {item}
+
+ ))}
+
+
+
+
+
+
+
+
+ {DIFFICULTIES.map((item) => (
+ setDifficulty(item)}
+ className={
+ difficulty === item
+ ? styles.filterActive
+ : styles.filter
+ }
+ >
+ {item}
+
+ ))}
+
+
+
+
+
+
+ Showing {filteredProjects.length} {" "}
+ projects
+
+
+ {(search ||
+ category !== "All" ||
+ difficulty !== "All") && (
+ {
+ setSearch("");
+ setCategory("All");
+ setDifficulty("All");
+ }}
+ >
+ Reset filters
+
+ )}
+
+
+
+ {filteredProjects.map((project) => (
+
+ ))}
+
+
+ {filteredProjects.length === 0 && (
+
+
+
+
No projects found
+
+
+ Try another keyword or reset your project filters.
+
+
+
{
+ setSearch("");
+ setCategory("All");
+ setDifficulty("All");
+ }}
+ >
+ Reset filters
+
+
+ )}
+
+
+
+ Browse Full Project Library
+
+
+
+
+
+ {/* ========================================================
+ PROJECT LIFECYCLE
+ ========================================================= */}
+
+
+
+
+
+
+
+
+ {/* ========================================================
+ INDUSTRY STANDARD
+ ========================================================= */}
+
+
+
+
+
+ INDUSTRY-LEVEL THINKING
+
+
+
+ Projects should prove your engineering skills.
+
+
+
+ A strong portfolio is not about having 50 random
+ applications. It is about demonstrating that you can
+ understand a problem, design a solution, write quality
+ code, test it and ship it.
+
+
+
+
+
+
+ Explore Industry Projects
+
+
+
+
+
+
+ ENGINEERING CHECKLIST
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Project readiness
+ 100%
+
+
+
+
+
+
+
+
+
+ {/* ========================================================
+ OPEN SOURCE
+ ========================================================= */}
+
+
+
+
+
+
+
+
+ OPEN SOURCE
+
+
+
Build projects. Contribute. Build your reputation.
+
+
+ Take your project beyond your local machine. Improve
+ CodeHarborHub projects, contribute features, fix bugs,
+ improve documentation and collaborate with developers.
+
+
+
+
+
+ Explore GitHub
+
+
+
+
+ Meet Contributors
+
+
+
+
+
+
+ {/* ========================================================
+ FINAL CTA
+ ========================================================= */}
+
+
+
+
+
+
+
+
+
+
+ YOUR NEXT BUILD STARTS HERE
+
+
+
+ Learn less passively.
+ Build more actively.
+
+
+
+ Pick a project, understand the requirements, build it,
+ deploy it and turn your work into real engineering
+ experience.
+
+
+
+
+ Start Building
+
+
+
+
+ View Learning Roadmaps
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+/* ================================================================
+ COMPONENTS
+================================================================ */
+
+function SectionHeading({
+ eyebrow,
+ title,
+ description,
+}: {
+ eyebrow: string;
+ title: string;
+ description: string;
+}) {
+ return (
+
+
{eyebrow}
+
+
{title}
+
+
{description}
+
+
{project.icon}
+
+
+ {project.popular && (
+
+
+ )}
+
+
+ {project.difficulty}
+
+
+
+ {project.category}
+
+
+ {project.title}
+
+ {project.description}
+
+
+ {project.technologies.map((technology) => (
+ {technology}
+ ))}
+
+
+
+ {project.duration}
+
+
+ View project
+
+
+
+ );
+}
+
+function LifecycleStep({
+ number,
+ icon,
+ title,
+ description,
+}: {
+ number: string;
+ icon: React.ReactNode;
+ title: string;
+ description: string;
+}) {
+ return (
+
+
{number}
+
+
{icon}
+
+
{title}
+
+
{description}
+
+ {icon}
+ {title}
+
+ );
+}
+
+function ChecklistItem({
+ label,
+ completed,
+}: {
+ label: string;
+ completed?: boolean;
+}) {
+ return (
+
+ {label}
+
+
+ {completed ? "Ready" : "Pending"}
+
+
+ );
+}
+
+function GitBranchIcon() {
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/projects/styles.module.css b/src/pages/projects/styles.module.css
new file mode 100644
index 000000000..a56d70397
--- /dev/null
+++ b/src/pages/projects/styles.module.css
@@ -0,0 +1,1470 @@
+.page {
+ min-height: 100vh;
+ overflow: hidden;
+ background: var(--ifm-background-color);
+ color: var(--ifm-font-color-base);
+}
+
+.container {
+ width: min(1180px, calc(100% - 40px));
+ margin: 0 auto;
+}
+
+/* ================================================================
+ HERO
+================================================================ */
+
+.hero {
+ position: relative;
+ isolation: isolate;
+ overflow: hidden;
+ padding: 110px 0 85px;
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ background:
+ radial-gradient(
+ circle at 15% 25%,
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 13%,
+ transparent
+ ),
+ transparent 32%
+ ),
+ radial-gradient(
+ circle at 85% 35%,
+ color-mix(in srgb, #8b5cf6 10%, transparent),
+ transparent 32%
+ ),
+ var(--ifm-background-color);
+}
+
+.heroGrid,
+.finalGrid {
+ position: absolute;
+ inset: 0;
+ z-index: -1;
+ pointer-events: none;
+
+ background-image:
+ linear-gradient(
+ to right,
+ color-mix(
+ in srgb,
+ var(--ifm-color-emphasis-300) 18%,
+ transparent
+ ) 1px,
+ transparent 1px
+ ),
+ linear-gradient(
+ to bottom,
+ color-mix(
+ in srgb,
+ var(--ifm-color-emphasis-300) 18%,
+ transparent
+ ) 1px,
+ transparent 1px
+ );
+
+ background-size: 48px 48px;
+
+ mask-image: linear-gradient(
+ to bottom,
+ black,
+ transparent 88%
+ );
+}
+
+.heroGlow,
+.finalGlow {
+ position: absolute;
+ top: -260px;
+ left: 50%;
+ width: 600px;
+ height: 600px;
+ transform: translateX(-50%);
+ border-radius: 50%;
+ pointer-events: none;
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 9%,
+ transparent
+ );
+ filter: blur(100px);
+}
+
+.hero .container {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(400px, 0.9fr);
+ align-items: center;
+ gap: 75px;
+}
+
+.heroContent {
+ max-width: 680px;
+}
+
+.eyebrow,
+.sectionEyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ color: var(--ifm-color-primary);
+ font-size: 0.7rem;
+ font-weight: 800;
+ line-height: 1;
+ letter-spacing: 0.13em;
+ text-transform: uppercase;
+}
+
+.eyebrow {
+ padding: 8px 11px;
+ border: 1px solid
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 24%,
+ transparent
+ );
+ border-radius: 999px;
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 6%,
+ transparent
+ );
+}
+
+.eyebrow i {
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ background: currentColor;
+ opacity: 0.6;
+}
+
+.hero h1 {
+ margin: 26px 0 21px;
+ font-size: clamp(2.8rem, 5.8vw, 5.1rem);
+ line-height: 0.98;
+ letter-spacing: -0.055em;
+ font-weight: 900;
+}
+
+.hero h1 span {
+ display: block;
+ color: var(--ifm-color-primary);
+}
+
+.heroContent > p {
+ max-width: 650px;
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 1.05rem;
+ line-height: 1.75;
+}
+
+.heroActions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 11px;
+ margin-top: 29px;
+}
+
+.primaryButton,
+.secondaryButton,
+.outlineButton,
+.textButton {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ min-height: 45px;
+ padding: 0 17px;
+ border-radius: 9px;
+ font-size: 0.84rem;
+ font-weight: 750;
+ text-decoration: none;
+ transition:
+ transform 180ms ease,
+ border-color 180ms ease,
+ box-shadow 180ms ease;
+}
+
+.primaryButton {
+ color: #fff;
+ background: var(--ifm-color-primary);
+ border: 1px solid var(--ifm-color-primary);
+ box-shadow:
+ 0 10px 28px
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 22%,
+ transparent
+ );
+}
+
+.primaryButton:hover {
+ color: #fff;
+ text-decoration: none;
+ transform: translateY(-2px);
+ box-shadow:
+ 0 15px 34px
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 27%,
+ transparent
+ );
+}
+
+.secondaryButton,
+.outlineButton {
+ color: var(--ifm-font-color-base);
+ border: 1px solid var(--ifm-color-emphasis-300);
+ background: var(--ifm-background-surface-color);
+}
+
+.secondaryButton:hover,
+.outlineButton:hover {
+ color: var(--ifm-color-primary);
+ border-color: var(--ifm-color-primary);
+ text-decoration: none;
+ transform: translateY(-2px);
+}
+
+.heroTrust {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 15px;
+ margin-top: 23px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.7rem;
+}
+
+.heroTrust span {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.heroTrust svg {
+ color: var(--ifm-color-primary);
+}
+
+/* ================================================================
+ ARCHITECTURE
+================================================================ */
+
+.architecture {
+ overflow: hidden;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 16px;
+ background: var(--ifm-background-surface-color);
+ box-shadow:
+ 0 30px 75px rgba(0, 0, 0, 0.14);
+}
+
+.architectureHeader {
+ display: flex;
+ align-items: center;
+ height: 47px;
+ padding: 0 15px;
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.windowDots {
+ display: flex;
+ gap: 6px;
+}
+
+.windowDots span {
+ width: 9px;
+ height: 9px;
+ border-radius: 50%;
+ background: var(--ifm-color-emphasis-300);
+}
+
+.architectureTitle {
+ margin: 0 auto;
+ color: var(--ifm-color-emphasis-600);
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ font-size: 0.68rem;
+}
+
+.architectureHeader > svg {
+ color: var(--ifm-color-emphasis-500);
+}
+
+.architectureBody {
+ position: relative;
+ display: grid;
+ grid-template-columns: 1fr auto 1fr auto 1fr;
+ align-items: center;
+ gap: 8px;
+ padding: 42px 25px 25px;
+}
+
+.architectureNode {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 9px;
+ min-height: 92px;
+ border: 1px solid
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 23%,
+ var(--ifm-color-emphasis-200)
+ );
+ border-radius: 12px;
+ color: var(--ifm-color-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 5%,
+ var(--ifm-background-surface-color)
+ );
+}
+
+.architectureNode span {
+ color: var(--ifm-font-color-base);
+ font-size: 0.72rem;
+ font-weight: 750;
+}
+
+.connection {
+ width: 25px;
+ height: 1px;
+ background: var(--ifm-color-emphasis-300);
+}
+
+.connection span {
+ display: block;
+ width: 5px;
+ height: 5px;
+ margin: -2px auto;
+ border-radius: 50%;
+ background: var(--ifm-color-primary);
+}
+
+.architectureNodeSmall {
+ display: flex;
+ align-items: center;
+ gap: 7px;
+ margin-top: 17px;
+ padding: 9px 10px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 8px;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.66rem;
+}
+
+.architectureNodeSmall svg {
+ color: var(--ifm-color-primary);
+}
+
+.architectureNodeSmall:nth-of-type(6) {
+ grid-column: 1 / 2;
+}
+
+.architectureFooter {
+ display: flex;
+ justify-content: space-between;
+ padding: 11px 15px;
+ border-top: 1px solid var(--ifm-color-emphasis-200);
+ color: var(--ifm-color-emphasis-600);
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ font-size: 0.63rem;
+}
+
+.architectureFooter span:first-child {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.liveDot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: #22c55e;
+}
+
+/* ================================================================
+ STATS
+================================================================ */
+
+.statsSection {
+ padding: 22px 0;
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ background: var(--ifm-background-surface-color);
+}
+
+.statsGrid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+}
+
+.stat {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 24px;
+ border-right: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.stat:first-child {
+ padding-left: 0;
+}
+
+.stat:last-child {
+ border-right: 0;
+}
+
+.statIcon {
+ display: grid;
+ place-items: center;
+ width: 37px;
+ height: 37px;
+ flex: 0 0 37px;
+ border-radius: 9px;
+ color: var(--ifm-color-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 8%,
+ transparent
+ );
+}
+
+.stat strong,
+.stat span {
+ display: block;
+}
+
+.stat strong {
+ font-size: 1rem;
+}
+
+.stat span {
+ margin-top: 2px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.68rem;
+}
+
+/* ================================================================
+ SECTIONS
+================================================================ */
+
+.section {
+ padding: 100px 0;
+}
+
+.sectionMuted {
+ background:
+ linear-gradient(
+ 180deg,
+ color-mix(
+ in srgb,
+ var(--ifm-color-emphasis-100) 28%,
+ transparent
+ ),
+ transparent
+ );
+}
+
+.sectionHeading {
+ max-width: 750px;
+ margin-bottom: 40px;
+}
+
+.sectionHeading h2 {
+ margin: 10px 0 12px;
+ font-size: clamp(2rem, 4vw, 3rem);
+ line-height: 1.08;
+ letter-spacing: -0.045em;
+}
+
+.sectionHeading p {
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ line-height: 1.7;
+}
+
+/* ================================================================
+ FEATURED
+================================================================ */
+
+.featuredGrid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 17px;
+}
+
+/* ================================================================
+ PROJECT CARD
+================================================================ */
+
+.projectGrid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 15px;
+}
+
+.projectCard {
+ display: block;
+ min-width: 0;
+ padding: 22px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 14px;
+ color: inherit;
+ background: var(--ifm-background-surface-color);
+ text-decoration: none;
+ transition:
+ transform 180ms ease,
+ border-color 180ms ease,
+ box-shadow 180ms ease;
+}
+
+.projectCard:hover {
+ color: inherit;
+ text-decoration: none;
+ transform: translateY(-4px);
+ border-color: var(--ifm-color-primary);
+ box-shadow:
+ 0 17px 38px
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 9%,
+ transparent
+ );
+}
+
+.projectCardFeatured {
+ background:
+ radial-gradient(
+ circle at 100% 0,
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 7%,
+ transparent
+ ),
+ transparent 42%
+ ),
+ var(--ifm-background-surface-color);
+}
+
+.projectTop {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 10px;
+}
+
+.projectIcon {
+ display: grid;
+ place-items: center;
+ width: 44px;
+ height: 44px;
+ border-radius: 10px;
+ color: var(--ifm-color-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 8%,
+ transparent
+ );
+}
+
+.projectBadges {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ gap: 5px;
+}
+
+.popularBadge,
+.difficultyBadge {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 5px 7px;
+ border-radius: 999px;
+ font-size: 0.58rem;
+ font-weight: 800;
+}
+
+.popularBadge {
+ color: #d97706;
+ background: color-mix(in srgb, #d97706 9%, transparent);
+}
+
+.beginner {
+ color: #16a34a;
+ background: color-mix(in srgb, #16a34a 9%, transparent);
+}
+
+.intermediate {
+ color: #d97706;
+ background: color-mix(in srgb, #d97706 9%, transparent);
+}
+
+.advanced {
+ color: #dc2626;
+ background: color-mix(in srgb, #dc2626 9%, transparent);
+}
+
+.projectCategory {
+ margin-top: 19px;
+ color: var(--ifm-color-primary);
+ font-size: 0.65rem;
+ font-weight: 800;
+ letter-spacing: 0.09em;
+ text-transform: uppercase;
+}
+
+.projectCard h3 {
+ margin: 6px 0 8px;
+ font-size: 1.03rem;
+ letter-spacing: -0.015em;
+}
+
+.projectCard > p {
+ min-height: 67px;
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.76rem;
+ line-height: 1.6;
+}
+
+.techList {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 5px;
+ margin-top: 17px;
+}
+
+.techList span {
+ padding: 4px 7px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 5px;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.6rem;
+}
+
+.projectMeta {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 8px;
+ margin-top: 18px;
+ padding-top: 13px;
+ border-top: 1px solid var(--ifm-color-emphasis-200);
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.63rem;
+}
+
+.projectMeta span:last-child {
+ display: inline-flex;
+ align-items: center;
+ gap: 3px;
+ color: var(--ifm-color-primary);
+ font-weight: 750;
+}
+
+/* ================================================================
+ TRACKS
+================================================================ */
+
+.trackGrid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 15px;
+}
+
+.trackCard {
+ display: flex;
+ gap: 15px;
+ padding: 21px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 13px;
+ color: inherit;
+ background: var(--ifm-background-surface-color);
+ text-decoration: none;
+ transition:
+ transform 180ms ease,
+ border-color 180ms ease;
+}
+
+.trackCard:hover {
+ color: inherit;
+ text-decoration: none;
+ transform: translateY(-3px);
+ border-color: var(--ifm-color-primary);
+}
+
+.trackIcon {
+ display: grid;
+ place-items: center;
+ width: 44px;
+ height: 44px;
+ flex: 0 0 44px;
+ border-radius: 10px;
+ color: var(--ifm-color-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 8%,
+ transparent
+ );
+}
+
+.trackBody {
+ flex: 1;
+ min-width: 0;
+}
+
+.trackTitle {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 7px;
+}
+
+.trackTitle h3 {
+ margin: 0;
+ font-size: 0.93rem;
+}
+
+.trackTitle svg {
+ opacity: 0;
+ color: var(--ifm-color-primary);
+}
+
+.trackCard:hover .trackTitle svg {
+ opacity: 1;
+}
+
+.trackBody p {
+ margin: 8px 0 11px;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.73rem;
+ line-height: 1.55;
+}
+
+.trackBody > span {
+ color: var(--ifm-color-primary);
+ font-size: 0.64rem;
+ font-weight: 750;
+}
+
+/* ================================================================
+ EXPLORER
+================================================================ */
+
+.explorer {
+ padding: 19px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 14px;
+ background: var(--ifm-background-surface-color);
+}
+
+.searchBox {
+ display: flex;
+ align-items: center;
+ gap: 9px;
+ height: 45px;
+ padding: 0 13px;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 9px;
+}
+
+.searchBox:focus-within {
+ border-color: var(--ifm-color-primary);
+ box-shadow:
+ 0 0 0 3px
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 9%,
+ transparent
+ );
+}
+
+.searchBox > svg {
+ color: var(--ifm-color-emphasis-500);
+ flex: 0 0 auto;
+}
+
+.searchBox input {
+ width: 100%;
+ height: 100%;
+ border: 0;
+ outline: 0;
+ background: transparent;
+ color: var(--ifm-font-color-base);
+ font-size: 0.8rem;
+}
+
+.clearButton {
+ display: grid;
+ place-items: center;
+ width: 26px;
+ height: 26px;
+ padding: 0;
+ border: 0;
+ border-radius: 6px;
+ color: var(--ifm-color-emphasis-600);
+ background: var(--ifm-color-emphasis-100);
+ cursor: pointer;
+}
+
+.filterGroup {
+ display: flex;
+ align-items: center;
+ gap: 17px;
+ margin-top: 15px;
+}
+
+.filterLabel {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ min-width: 85px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.66rem;
+ font-weight: 750;
+}
+
+.filterList {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+}
+
+.filter,
+.filterActive {
+ min-height: 31px;
+ padding: 0 10px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 7px;
+ background: transparent;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.65rem;
+ font-weight: 700;
+ cursor: pointer;
+}
+
+.filterActive {
+ color: #fff;
+ border-color: var(--ifm-color-primary);
+ background: var(--ifm-color-primary);
+}
+
+.resultsBar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 25px 0 13px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.7rem;
+}
+
+.resultsBar strong {
+ color: var(--ifm-font-color-base);
+}
+
+.resultsBar button {
+ border: 0;
+ background: transparent;
+ color: var(--ifm-color-primary);
+ font-size: 0.68rem;
+ font-weight: 750;
+ cursor: pointer;
+}
+
+.emptyState {
+ padding: 65px 20px;
+ text-align: center;
+ border: 1px dashed var(--ifm-color-emphasis-300);
+ border-radius: 14px;
+}
+
+.emptyState > svg {
+ color: var(--ifm-color-primary);
+}
+
+.emptyState h3 {
+ margin: 12px 0 6px;
+}
+
+.emptyState p {
+ margin: 0;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.78rem;
+}
+
+.emptyState button {
+ margin-top: 15px;
+ padding: 8px 12px;
+ border: 1px solid var(--ifm-color-primary);
+ border-radius: 7px;
+ color: var(--ifm-color-primary);
+ background: transparent;
+ font-size: 0.68rem;
+ font-weight: 750;
+ cursor: pointer;
+}
+
+.centerAction {
+ display: flex;
+ justify-content: center;
+ margin-top: 30px;
+}
+
+/* ================================================================
+ LIFECYCLE
+================================================================ */
+
+.lifecycle {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 15px;
+}
+
+.lifecycleStep {
+ position: relative;
+ padding: 25px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 14px;
+ background: var(--ifm-background-surface-color);
+}
+
+.lifecycleNumber {
+ position: absolute;
+ top: 18px;
+ right: 18px;
+ color: var(--ifm-color-emphasis-400);
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ font-size: 0.65rem;
+ font-weight: 800;
+}
+
+.lifecycleIcon {
+ display: grid;
+ place-items: center;
+ width: 44px;
+ height: 44px;
+ border-radius: 10px;
+ color: var(--ifm-color-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 8%,
+ transparent
+ );
+}
+
+.lifecycleStep h3 {
+ margin: 18px 0 7px;
+ font-size: 0.98rem;
+}
+
+.lifecycleStep p {
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.75rem;
+ line-height: 1.6;
+}
+
+/* ================================================================
+ INDUSTRY
+================================================================ */
+
+.industryCard {
+ display: grid;
+ grid-template-columns: 1.1fr 0.9fr;
+ gap: 60px;
+ align-items: center;
+ padding: 45px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 20px;
+ background: var(--ifm-background-surface-color);
+}
+
+.industryContent h2 {
+ max-width: 650px;
+ margin: 10px 0 14px;
+ font-size: clamp(2rem, 4vw, 2.8rem);
+ line-height: 1.08;
+ letter-spacing: -0.04em;
+}
+
+.industryContent > p {
+ max-width: 650px;
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.85rem;
+ line-height: 1.7;
+}
+
+.industryPoints {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 11px;
+ margin: 25px 0;
+}
+
+.industryPoint {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.71rem;
+}
+
+.industryPoint svg {
+ flex: 0 0 auto;
+ color: var(--ifm-color-primary);
+}
+
+.engineeringBoard {
+ padding: 22px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 14px;
+ background: var(--ifm-background-color);
+}
+
+.boardHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 17px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.62rem;
+ font-weight: 800;
+ letter-spacing: 0.08em;
+}
+
+.boardHeader svg {
+ color: #16a34a;
+}
+
+.checkItem {
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ align-items: center;
+ gap: 9px;
+ padding: 9px 0;
+ border-bottom: 1px solid var(--ifm-color-emphasis-100);
+ font-size: 0.7rem;
+}
+
+.checkComplete {
+ color: #16a34a;
+}
+
+.checkPending {
+ color: var(--ifm-color-emphasis-400);
+}
+
+.checkStatus {
+ color: var(--ifm-color-emphasis-500);
+ font-size: 0.6rem;
+}
+
+.boardProgress {
+ margin-top: 20px;
+}
+
+.boardProgress > div:first-child {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 7px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.63rem;
+}
+
+.boardProgress strong {
+ color: var(--ifm-color-primary);
+}
+
+.boardProgressTrack {
+ overflow: hidden;
+ height: 6px;
+ border-radius: 999px;
+ background: var(--ifm-color-emphasis-200);
+}
+
+.boardProgressTrack span {
+ display: block;
+ width: 100%;
+ height: 100%;
+ border-radius: inherit;
+ background: var(--ifm-color-primary);
+}
+
+/* ================================================================
+ OPEN SOURCE
+================================================================ */
+
+.openSourceCard {
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ align-items: center;
+ gap: 23px;
+ padding: 34px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 18px;
+ background: var(--ifm-background-surface-color);
+}
+
+.openSourceIcon {
+ display: grid;
+ place-items: center;
+ width: 58px;
+ height: 58px;
+ border-radius: 14px;
+ color: var(--ifm-color-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 8%,
+ transparent
+ );
+}
+
+.openSourceCard h2 {
+ margin: 8px 0;
+ font-size: 1.45rem;
+}
+
+.openSourceCard p {
+ max-width: 680px;
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.78rem;
+ line-height: 1.6;
+}
+
+.openSourceActions {
+ display: flex;
+ flex-direction: column;
+ gap: 7px;
+}
+
+.textButton {
+ color: var(--ifm-color-primary);
+ border: 0;
+ background: transparent;
+ font-size: 0.72rem;
+}
+
+/* ================================================================
+ FINAL CTA
+================================================================ */
+
+.finalCta {
+ position: relative;
+ isolation: isolate;
+ overflow: hidden;
+ padding: 110px 0;
+ text-align: center;
+ border-top: 1px solid var(--ifm-color-emphasis-200);
+ background:
+ radial-gradient(
+ circle at 50% 0,
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 13%,
+ transparent
+ ),
+ transparent 40%
+ ),
+ var(--ifm-background-color);
+}
+
+.finalContent {
+ position: relative;
+ max-width: 780px;
+ margin: 0 auto;
+}
+
+.finalIcon {
+ display: grid;
+ place-items: center;
+ width: 48px;
+ height: 48px;
+ margin: 0 auto 20px;
+ border: 1px solid
+ color-mix(
+ in srgb,
+ var(--ifm-color-primary) 25%,
+ transparent
+ );
+ border-radius: 13px;
+ color: var(--ifm-color-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 8%,
+ transparent
+ );
+}
+
+.finalContent h2 {
+ margin: 13px 0 14px;
+ font-size: clamp(2.2rem, 5vw, 3.8rem);
+ line-height: 1;
+ letter-spacing: -0.055em;
+}
+
+.finalContent h2 span {
+ display: block;
+ color: var(--ifm-color-primary);
+}
+
+.finalContent > p {
+ max-width: 650px;
+ margin: 0 auto;
+ color: var(--ifm-color-emphasis-700);
+ line-height: 1.7;
+}
+
+.finalActions {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 10px;
+ margin-top: 28px;
+}
+
+.finalTrust {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 17px;
+ margin-top: 22px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.68rem;
+}
+
+.finalTrust span {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+}
+
+.finalTrust svg {
+ color: var(--ifm-color-primary);
+}
+
+/* ================================================================
+ RESPONSIVE
+================================================================ */
+
+@media (max-width: 1100px) {
+ .hero .container {
+ grid-template-columns: 1fr;
+ gap: 55px;
+ }
+
+ .heroContent {
+ max-width: 800px;
+ }
+
+ .architecture {
+ max-width: 760px;
+ }
+
+ .featuredGrid,
+ .projectGrid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .trackGrid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .industryCard {
+ grid-template-columns: 1fr;
+ }
+
+ .openSourceCard {
+ grid-template-columns: auto 1fr;
+ }
+
+ .openSourceActions {
+ grid-column: 1 / -1;
+ flex-direction: row;
+ }
+}
+
+@media (max-width: 850px) {
+ .section {
+ padding: 75px 0;
+ }
+
+ .statsGrid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .stat {
+ padding: 12px 20px;
+ }
+
+ .stat:nth-child(2) {
+ border-right: 0;
+ }
+
+ .stat:nth-child(-n + 2) {
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ }
+
+ .stat:first-child {
+ padding-left: 20px;
+ }
+
+ .lifecycle {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .filterGroup {
+ align-items: flex-start;
+ flex-direction: column;
+ gap: 8px;
+ }
+}
+
+@media (max-width: 640px) {
+ .container {
+ width: min(100% - 28px, 1180px);
+ }
+
+ .hero {
+ padding: 75px 0 55px;
+ }
+
+ .hero h1 {
+ font-size: clamp(2.45rem, 12vw, 3.5rem);
+ }
+
+ .heroContent > p {
+ font-size: 0.91rem;
+ }
+
+ .heroActions {
+ flex-direction: column;
+ }
+
+ .heroActions a {
+ width: 100%;
+ }
+
+ .heroTrust {
+ gap: 8px;
+ }
+
+ .architectureBody {
+ grid-template-columns: 1fr;
+ padding: 25px;
+ }
+
+ .connection {
+ width: 1px;
+ height: 18px;
+ margin: 0 auto;
+ }
+
+ .architectureNodeSmall {
+ margin-top: 0;
+ }
+
+ .architectureFooter {
+ flex-wrap: wrap;
+ gap: 8px;
+ }
+
+ .statsGrid {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ .stat {
+ padding: 11px 8px !important;
+ gap: 8px;
+ }
+
+ .statIcon {
+ width: 31px;
+ height: 31px;
+ flex-basis: 31px;
+ }
+
+ .stat strong {
+ font-size: 0.9rem;
+ }
+
+ .stat span {
+ font-size: 0.59rem;
+ }
+
+ .featuredGrid,
+ .projectGrid,
+ .trackGrid,
+ .lifecycle {
+ grid-template-columns: 1fr;
+ }
+
+ .sectionHeading h2 {
+ font-size: 2rem;
+ }
+
+ .industryCard {
+ padding: 25px;
+ gap: 30px;
+ }
+
+ .industryPoints {
+ grid-template-columns: 1fr;
+ }
+
+ .openSourceCard {
+ grid-template-columns: 1fr;
+ padding: 25px;
+ }
+
+ .openSourceActions {
+ grid-column: auto;
+ flex-direction: column;
+ }
+
+ .openSourceActions a {
+ width: 100%;
+ }
+
+ .finalCta {
+ padding: 80px 0;
+ }
+
+ .finalContent h2 {
+ font-size: 2.45rem;
+ }
+
+ .finalActions {
+ flex-direction: column;
+ }
+
+ .finalActions a {
+ width: 100%;
+ }
+
+ .finalTrust {
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ }
+}
+
+/* ================================================================
+ REDUCED MOTION
+================================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+ .primaryButton,
+ .secondaryButton,
+ .outlineButton,
+ .projectCard,
+ .trackCard {
+ transition: none;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/roadmap/html/index.tsx b/src/pages/roadmap/html/index.tsx
deleted file mode 100644
index 09668bc92..000000000
--- a/src/pages/roadmap/html/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { useEffect, useState } from "react";
-import Layout from "@theme/Layout";
-import RoadmapList from '../../../components/Roadmap/RoadmapList';
-import ProgressBar from '../../../components/Roadmap/ProgressBar';
-import { htmlRoadmapData as htmlRoadmap } from "../../../data/roadmaps/html";
-
-const Html: React.FC = () => {
- const [roadmap, setRoadmap] = useState(htmlRoadmap);
- const totalItems = roadmap.reduce((acc, section) => acc + section.items.length, 0);
- const completedItems = roadmap.reduce(
- (acc, section) => acc + section.items.filter((item) => item.status === "done").length,
- 0
- );
-
- useEffect(() => {
- // Load saved roadmap from local storage
- const savedRoadmap = localStorage.getItem("htmlRoadmap");
- if (savedRoadmap) {
- setRoadmap(JSON.parse(savedRoadmap));
- }
- }, []);
-
- const updateItemStatus = (sectionIndex: number, itemIndex: number) => {
- const newRoadmap = [...roadmap];
- const currentStatus = newRoadmap[sectionIndex].items[itemIndex].status;
-
- // Toggle status between 'todo' and 'done'
- newRoadmap[sectionIndex].items[itemIndex].status = currentStatus === "todo" ? "done" : "todo";
-
- setRoadmap(newRoadmap);
-
- localStorage.setItem("htmlRoadmap", JSON.stringify(newRoadmap)); // Save to local storage
- };
-
- return (
-
-
-
- HTML Mastery Roadmap
-
-
-
-
- );
-};
-
-export default Html;
\ No newline at end of file
diff --git a/src/pages/roadmap/index.tsx b/src/pages/roadmap/index.tsx
index 871efff2d..6217d43fb 100644
--- a/src/pages/roadmap/index.tsx
+++ b/src/pages/roadmap/index.tsx
@@ -1,27 +1,897 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
+// @ts-ignore
import Layout from "@theme/Layout";
-import Roadmaps from "../../components/Roadmap";
-import Head from "@docusaurus/Head";
+// @ts-ignore
+import Link from "@docusaurus/Link";
+
+import {
+ ArrowRight,
+ BookOpen,
+ Brain,
+ Check,
+ CheckCircle2,
+ ChevronRight,
+ Code2,
+ Compass,
+ ExternalLink,
+ Flame,
+ GitBranch,
+ Layers3,
+ Lock,
+ Play,
+ Rocket,
+ Search,
+ Sparkles,
+ Target,
+ Trophy,
+ Users,
+} from "lucide-react";
+// @ts-ignore
+import styles from "./styles.module.css";
+
+type RoadmapStatus = "in-progress" | "completed" | "not-started";
+
+type Roadmap = {
+ id: string;
+ title: string;
+ description: string;
+ category: string;
+ level: string;
+ icon: React.ReactNode;
+ href: string;
+ modules: number;
+ completed: number;
+ estimatedTime: string;
+ status: RoadmapStatus;
+ colorClass: string;
+};
+
+const roadmaps: Roadmap[] = [
+ {
+ id: "html",
+ title: "HTML",
+ description:
+ "Build a strong foundation in semantic HTML, accessibility, forms, metadata, and modern web structure.",
+ category: "Frontend",
+ level: "Beginner",
+ icon:
-
-
-
-
-
+
+ {/* Breadcrumb */}
+
+
+ Roadmap
+
+
+
+ {/* Hero */}
+
+
+
+
+
+
+
+
+ Build your path.
+ Track your progress.
+
+
+
+ Follow structured learning paths, understand what to learn
+ next, practice your skills, and build projects that turn
+ knowledge into real-world experience.
+
+
+
+
+
+ Continue learning
+
+
+
+
+ Explore roadmaps
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Progress Card */}
+
+
+
+
+ Overall progress
+
+
{overallProgress}%
+
+
+
+
+
+
+
+
+
+
+
+ {completedModules}
+ Completed
+
+
+
+ {totalModules}
+ Total modules
+
+
+
+ {roadmaps.length}
+ Roadmaps
+
+
+
+
+
+
+
+
+ Currently learning
+ {activeRoadmap?.title || "Choose a roadmap"}
+
+
+ {activeRoadmap && (
+
+
+
+ )}
+
+
+
+
+
+ {/* Quick Stats */}
+
+
+
+
+
+
+
+ Keep going
+ Build a consistent learning habit
+
+
+
+
+
+
+
+ {roadmaps.length}+ paths
+ Explore different technology tracks
+
+
+
+
+
+
+
+ Learn by building
+ Turn concepts into practical projects
+
+
+
+
+
+
+
+ Open source
+ Learn with the community
+
+
+
+
+
+ {/* Continue Learning */}
+ {activeRoadmap && (
+
+
+
+
+
+ {activeRoadmap.icon}
+
+
+
+
Continue your current roadmap
+
{activeRoadmap.title}
+
{activeRoadmap.description}
+
+
+
+
+
+
+ {getProgress(activeRoadmap)}% complete
+
+ {activeRoadmap.completed}/{activeRoadmap.modules}
+
+
+
+
+
+
+
+
+ Continue
+
+
+
+
+
+ )}
+
+ {/* Roadmap Explorer */}
+
+
+
+
+
+
+
+
Choose what you want to learn
+
+
+ Explore structured paths for programming, frontend,
+ full-stack development, security, and more.
+
+
+
+
+ View all roadmaps
+
+
+
+
+ {/* Search */}
+
+
+
+
+
+ {categories.map((category) => (
+ setActiveCategory(category)}
+ >
+ {category}
+
+ ))}
+
+
+
+ {/* Cards */}
+ {filteredRoadmaps.length > 0 ? (
+
+ {filteredRoadmaps.map((roadmap) => {
+ const progress = getProgress(roadmap);
+
+ return (
+
+
+
+ {roadmap.icon}
+
+
+
+ {roadmap.status === "completed" && (
+
+
+
+ {roadmap.category}
+ {roadmap.level}
+
+
+
{roadmap.title}
+
+
{roadmap.description}
+
+
+
+
+
+
+
+
+ Progress
+ {progress}%
+
+
+
+
+
+ );
+ })}
+
+ ) : (
+
+
+
No roadmap found
+
+ Try a different search term or select another category.
+
+
+
{
+ setSearch("");
+ setActiveCategory("All");
+ }}
+ >
+ Clear filters
+
+
+ )}
+
+
+ {/* How It Works */}
+
+
+
+
+
+
+
Learn → Practice → Build → Grow
+
+
+ A roadmap is more than a checklist. Use it as a repeatable
+ system for developing practical engineering skills.
+
+
+
+
+ {learningSteps.map((step, index) => (
+
+
+
+
{step.number}
+
{step.icon}
+
+
+
{step.title}
+
{step.description}
+
+ ))}
+
+
+
+ {/* Learning System */}
+
+
+
+
+
+
+
+
+ Turn learning into
+ real engineering experience.
+
+
+
+ Follow a roadmap, study the concepts, practice with
+ challenges, build projects, deploy them, and use your work
+ as evidence of your skills.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Explore projects
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Explore More */}
+
+
+
+
+
+
+
Tutorials
+
Learn concepts with structured tutorials.
+
+
+
+
+
+
+
+
Practice
+
Reinforce your skills with practical challenges.
+
+
+
+
+
+
+
+
Projects
+
Build real projects and showcase your work.
+
+
+
+
+
+
+
+
Contribute
+
Learn through open source and community work.
+
+
+
+
+
+
+ {/* Final CTA */}
+
+
+
+
+
+
+
Ready when you are
+
+
Start building your developer journey.
+
+
+ Choose a roadmap, take the first step, and keep improving one
+ skill at a time.
+
+
+
+
+ Explore all roadmaps
+
+
+
+
+ Start learning
+
+
+
+
);
-}
+}
\ No newline at end of file
diff --git a/src/pages/roadmap/javascript/index.tsx b/src/pages/roadmap/javascript/index.tsx
deleted file mode 100644
index 1095fb268..000000000
--- a/src/pages/roadmap/javascript/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { useState } from "react";
-import Layout from "@theme/Layout";
-import roadmapJavaScript from '../../../data/roadmaps/javascript';
-import { FaChevronDown, FaChevronUp } from "react-icons/fa";
-import "./styles.css";
-
-const RoadmapJavaScript: React.FC = () => {
- const [activeIndex, setActiveIndex] = useState(null);
-
- const handleToggle = (index: number) => {
- setActiveIndex(activeIndex === index ? null : index);
- };
-
- return (
-
-
- {roadmapJavaScript.map((item, index) => (
-
-
handleToggle(index)}
- >
- {item.title}
- {activeIndex === index ?
- {activeIndex === index && (
-
-
{item.description}
-
- {item.topics.map((topic, topicIndex) => (
-
- {topic.title}
- {topic.description}
-
- ))}
-
-
- )}
-
- ))}
-
- );
-};
-
-export default RoadmapJavaScript;
diff --git a/src/pages/roadmap/javascript/styles.css b/src/pages/roadmap/javascript/styles.css
deleted file mode 100644
index 7269b9632..000000000
--- a/src/pages/roadmap/javascript/styles.css
+++ /dev/null
@@ -1,55 +0,0 @@
-.roadmaps {
- display: flex;
- flex-direction: column;
- gap: 1rem;
- padding: 1rem;
-}
-
-.roadmaps .roadmap-item {
- border: 1px solid #ccc;
- padding: 1rem;
- border-radius: 8px;
- background-color: #f9f9f929;
- transition: all 0.3s ease;
- cursor: pointer;
-}
-
-.roadmaps .roadmap-item:hover {
- background-color: #0000000e;
-}
-
-.roadmaps .roadmap-title {
- font-size: 1.4rem;
- font-weight: bold;
- margin: 0;
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.roadmaps .roadmap-details {
- margin-top: 1rem;
-}
-
-.roadmaps .roadmap-description {
- font-size: 1rem;
- margin-bottom: 1rem;
-}
-
-.roadmaps .topic-list {
- list-style: none;
- padding: 0;
-}
-
-.roadmaps .topic-item {
- margin-bottom: 0.5rem;
-}
-
-.roadmaps .topic-title {
- font-size: 1.2rem;
- font-weight: bold;
-}
-
-.roadmaps .topic-description {
- font-size: 1rem;
-}
diff --git a/src/pages/roadmap/styles.module.css b/src/pages/roadmap/styles.module.css
new file mode 100644
index 000000000..222c7a6bc
--- /dev/null
+++ b/src/pages/roadmap/styles.module.css
@@ -0,0 +1,1436 @@
+.page {
+ min-height: 100vh;
+ overflow: hidden;
+}
+
+/* -------------------------------------------------------
+ Breadcrumb
+------------------------------------------------------- */
+
+.breadcrumb {
+ display: flex;
+ align-items: center;
+ gap: 7px;
+ padding: 18px 0 8px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.86rem;
+}
+
+.breadcrumb a {
+ color: var(--ifm-color-primary);
+ text-decoration: none;
+}
+
+.breadcrumb a:hover {
+ text-decoration: underline;
+}
+
+/* -------------------------------------------------------
+ Hero
+------------------------------------------------------- */
+
+.hero {
+ position: relative;
+ padding: 74px 0 72px;
+ background:
+ radial-gradient(
+ circle at 8% 20%,
+ color-mix(in srgb, var(--ifm-color-primary) 14%, transparent),
+ transparent 32%
+ ),
+ radial-gradient(
+ circle at 88% 20%,
+ color-mix(in srgb, #7c3aed 12%, transparent),
+ transparent 30%
+ );
+}
+
+.hero::after {
+ content: "";
+ position: absolute;
+ inset: auto 0 0;
+ height: 1px;
+ background: var(--ifm-color-emphasis-200);
+}
+
+.heroGrid {
+ display: grid;
+ grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
+ gap: 64px;
+ align-items: center;
+}
+
+.heroContent {
+ max-width: 760px;
+}
+
+.eyebrow,
+.sectionEyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ color: var(--ifm-color-primary);
+ font-size: 0.78rem;
+ font-weight: 800;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+.hero h1 {
+ margin: 18px 0 20px;
+ max-width: 760px;
+ font-size: clamp(2.7rem, 6vw, 5rem);
+ line-height: 0.98;
+ letter-spacing: -0.055em;
+}
+
+.hero h1 span {
+ display: block;
+ color: var(--ifm-color-primary);
+}
+
+.heroContent > p {
+ max-width: 690px;
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 1.12rem;
+ line-height: 1.75;
+}
+
+.heroActions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-top: 30px;
+}
+
+.primaryButton,
+.secondaryButton,
+.continueButton,
+.cardButton,
+.finalSecondary {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 9px;
+ min-height: 46px;
+ border-radius: 12px;
+ font-size: 0.9rem;
+ font-weight: 750;
+ text-decoration: none;
+ transition:
+ transform 180ms ease,
+ border-color 180ms ease,
+ background 180ms ease,
+ box-shadow 180ms ease;
+}
+
+.primaryButton {
+ padding: 0 18px;
+ color: #fff;
+ background: var(--ifm-color-primary);
+ box-shadow: 0 12px 30px
+ color-mix(in srgb, var(--ifm-color-primary) 22%, transparent);
+}
+
+.primaryButton:hover {
+ color: #fff;
+ transform: translateY(-2px);
+ text-decoration: none;
+ box-shadow: 0 16px 36px
+ color-mix(in srgb, var(--ifm-color-primary) 28%, transparent);
+}
+
+.secondaryButton {
+ padding: 0 18px;
+ color: var(--ifm-font-color-base);
+ border: 1px solid var(--ifm-color-emphasis-300);
+ background: var(--ifm-background-surface-color);
+}
+
+.secondaryButton:hover {
+ color: var(--ifm-color-primary);
+ border-color: var(--ifm-color-primary);
+ text-decoration: none;
+ transform: translateY(-2px);
+}
+
+.heroMeta {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 18px;
+ margin-top: 28px;
+}
+
+.heroMeta span {
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.82rem;
+}
+
+/* -------------------------------------------------------
+ Progress Panel
+------------------------------------------------------- */
+
+.progressPanel {
+ padding: 26px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 24px;
+ background: color-mix(
+ in srgb,
+ var(--ifm-background-surface-color) 92%,
+ transparent
+ );
+ box-shadow: 0 25px 70px color-mix(in srgb, #000 9%, transparent);
+}
+
+.progressPanelHeader {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+}
+
+.panelLabel {
+ display: block;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.8rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.07em;
+}
+
+.progressPanel h2 {
+ margin: 6px 0 0;
+ font-size: 3.5rem;
+ line-height: 1;
+ letter-spacing: -0.06em;
+}
+
+.progressIcon {
+ display: grid;
+ width: 48px;
+ height: 48px;
+ place-items: center;
+ color: var(--ifm-color-primary);
+ border: 1px solid
+ color-mix(in srgb, var(--ifm-color-primary) 25%, transparent);
+ border-radius: 14px;
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 9%,
+ transparent
+ );
+}
+
+.progressTrack,
+.cardProgressTrack,
+.miniTrack {
+ overflow: hidden;
+ height: 8px;
+ border-radius: 999px;
+ background: var(--ifm-color-emphasis-200);
+}
+
+.progressTrack {
+ margin-top: 25px;
+}
+
+.progressTrack span,
+.cardProgressTrack span,
+.miniTrack span {
+ display: block;
+ height: 100%;
+ border-radius: inherit;
+ background: var(--ifm-color-primary);
+ transition: width 500ms ease;
+}
+
+.progressStats {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 10px;
+ margin-top: 24px;
+}
+
+.progressStats div {
+ padding: 14px 10px;
+ text-align: center;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 12px;
+}
+
+.progressStats strong,
+.progressStats span {
+ display: block;
+}
+
+.progressStats strong {
+ font-size: 1.1rem;
+}
+
+.progressStats span {
+ margin-top: 3px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.7rem;
+}
+
+.currentLearning {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-top: 20px;
+ padding: 14px;
+ border-radius: 14px;
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 6%,
+ transparent
+ );
+}
+
+.currentIcon {
+ display: grid;
+ width: 40px;
+ height: 40px;
+ flex: 0 0 40px;
+ place-items: center;
+ color: var(--ifm-color-primary);
+ border-radius: 10px;
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 12%,
+ transparent
+ );
+}
+
+.currentLearning div:nth-child(2) {
+ min-width: 0;
+ flex: 1;
+}
+
+.currentLearning span,
+.currentLearning strong {
+ display: block;
+}
+
+.currentLearning span {
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.72rem;
+}
+
+.currentLearning strong {
+ margin-top: 2px;
+ font-size: 0.9rem;
+}
+
+.currentLearning a {
+ display: grid;
+ width: 34px;
+ height: 34px;
+ place-items: center;
+ color: var(--ifm-color-primary);
+ border-radius: 9px;
+ background: var(--ifm-background-surface-color);
+}
+
+/* -------------------------------------------------------
+ Stats
+------------------------------------------------------- */
+
+.statsSection {
+ padding: 24px 0;
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.statsGrid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 12px;
+}
+
+.statCard {
+ display: flex;
+ align-items: center;
+ gap: 11px;
+ padding: 15px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 14px;
+ background: var(--ifm-background-surface-color);
+}
+
+.statIcon {
+ display: grid;
+ width: 38px;
+ height: 38px;
+ flex: 0 0 38px;
+ place-items: center;
+ color: var(--ifm-color-primary);
+ border-radius: 10px;
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 9%,
+ transparent
+ );
+}
+
+.statCard strong,
+.statCard span {
+ display: block;
+}
+
+.statCard strong {
+ font-size: 0.87rem;
+}
+
+.statCard span {
+ margin-top: 2px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.72rem;
+}
+
+/* -------------------------------------------------------
+ Continue
+------------------------------------------------------- */
+
+.continueSection {
+ padding: 52px 0 20px;
+}
+
+.continueCard {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 30px;
+ padding: 24px;
+ border: 1px solid
+ color-mix(in srgb, var(--ifm-color-primary) 20%, transparent);
+ border-radius: 20px;
+ background:
+ linear-gradient(
+ 135deg,
+ color-mix(in srgb, var(--ifm-color-primary) 7%, transparent),
+ transparent
+ ),
+ var(--ifm-background-surface-color);
+}
+
+.continueLeft {
+ display: flex;
+ align-items: flex-start;
+ gap: 15px;
+ min-width: 0;
+}
+
+.continueIcon {
+ display: grid;
+ width: 48px;
+ height: 48px;
+ flex: 0 0 48px;
+ place-items: center;
+ color: var(--ifm-color-primary);
+ border-radius: 13px;
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 10%,
+ transparent
+ );
+}
+
+.continueLeft span {
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.75rem;
+}
+
+.continueLeft h2 {
+ margin: 4px 0 4px;
+ font-size: 1.4rem;
+}
+
+.continueLeft p {
+ max-width: 650px;
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.86rem;
+ line-height: 1.55;
+}
+
+.continueRight {
+ min-width: 245px;
+}
+
+.miniProgress > div:first-child {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 7px;
+ font-size: 0.75rem;
+}
+
+.miniProgress span {
+ color: var(--ifm-color-emphasis-600);
+}
+
+.miniTrack {
+ height: 6px;
+}
+
+.continueButton {
+ width: 100%;
+ margin-top: 14px;
+ color: #fff;
+ background: var(--ifm-color-primary);
+}
+
+.continueButton:hover {
+ color: #fff;
+ text-decoration: none;
+ transform: translateY(-1px);
+}
+
+/* -------------------------------------------------------
+ Section Header
+------------------------------------------------------- */
+
+.explorerSection {
+ padding: 70px 0;
+}
+
+.sectionHeader {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ gap: 30px;
+ margin-bottom: 28px;
+}
+
+.sectionHeader h2,
+.sectionHeaderCentered h2 {
+ margin: 9px 0 8px;
+ font-size: clamp(1.8rem, 3.5vw, 2.7rem);
+ letter-spacing: -0.035em;
+}
+
+.sectionHeader p,
+.sectionHeaderCentered p {
+ max-width: 690px;
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ line-height: 1.65;
+}
+
+.viewAll {
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ flex: 0 0 auto;
+ color: var(--ifm-color-primary);
+ font-size: 0.85rem;
+ font-weight: 750;
+ text-decoration: none;
+}
+
+.viewAll:hover {
+ text-decoration: underline;
+}
+
+/* -------------------------------------------------------
+ Explorer Controls
+------------------------------------------------------- */
+
+.explorerControls {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 18px;
+ margin-bottom: 26px;
+}
+
+.searchBox {
+ display: flex;
+ align-items: center;
+ gap: 9px;
+ width: 280px;
+ min-height: 44px;
+ padding: 0 13px;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 11px;
+ background: var(--ifm-background-surface-color);
+}
+
+.searchBox svg {
+ color: var(--ifm-color-emphasis-600);
+}
+
+.searchBox input {
+ width: 100%;
+ border: 0;
+ outline: 0;
+ color: var(--ifm-font-color-base);
+ background: transparent;
+ font: inherit;
+ font-size: 0.84rem;
+}
+
+.filters {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ gap: 7px;
+}
+
+.filter,
+.filterActive {
+ min-height: 36px;
+ padding: 0 12px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 9px;
+ font-size: 0.75rem;
+ font-weight: 700;
+ cursor: pointer;
+}
+
+.filter {
+ color: var(--ifm-color-emphasis-700);
+ background: var(--ifm-background-surface-color);
+}
+
+.filterActive {
+ color: #fff;
+ border-color: var(--ifm-color-primary);
+ background: var(--ifm-color-primary);
+}
+
+/* -------------------------------------------------------
+ Roadmap Cards
+------------------------------------------------------- */
+
+.roadmapGrid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 16px;
+}
+
+.roadmapCard {
+ position: relative;
+ display: flex;
+ min-height: 390px;
+ flex-direction: column;
+ padding: 21px;
+ overflow: hidden;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 18px;
+ background: var(--ifm-background-surface-color);
+ transition:
+ transform 200ms ease,
+ border-color 200ms ease,
+ box-shadow 200ms ease;
+}
+
+.roadmapCard:hover {
+ transform: translateY(-4px);
+ border-color: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 40%,
+ var(--ifm-color-emphasis-200)
+ );
+ box-shadow: 0 18px 50px color-mix(in srgb, #000 8%, transparent);
+}
+
+.roadmapCard::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ height: 3px;
+ background: var(--ifm-color-primary);
+ opacity: 0.65;
+}
+
+.cardTop {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.roadmapIcon {
+ display: grid;
+ width: 46px;
+ height: 46px;
+ place-items: center;
+ color: var(--ifm-color-primary);
+ border: 1px solid
+ color-mix(in srgb, var(--ifm-color-primary) 20%, transparent);
+ border-radius: 13px;
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 8%,
+ transparent
+ );
+}
+
+.status {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ min-height: 27px;
+ padding: 0 8px;
+ border-radius: 999px;
+ font-size: 0.67rem;
+ font-weight: 750;
+}
+
+.statusCompleted {
+ color: #16803c;
+ background: color-mix(in srgb, #16803c 10%, transparent);
+}
+
+.statusProgress {
+ color: var(--ifm-color-primary);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 10%,
+ transparent
+ );
+}
+
+.statusNotStarted {
+ color: var(--ifm-color-emphasis-700);
+ background: var(--ifm-color-emphasis-100);
+}
+
+.cardContent {
+ flex: 1;
+ margin-top: 20px;
+}
+
+.cardTags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+}
+
+.cardTags span {
+ padding: 4px 7px;
+ color: var(--ifm-color-emphasis-700);
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 6px;
+ font-size: 0.64rem;
+ font-weight: 700;
+}
+
+.cardContent h3 {
+ margin: 13px 0 7px;
+ font-size: 1.3rem;
+ letter-spacing: -0.025em;
+}
+
+.cardContent p {
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.81rem;
+ line-height: 1.65;
+}
+
+.cardDetails {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-top: 18px;
+ padding-top: 15px;
+ border-top: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.cardDetails div {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.7rem;
+}
+
+.cardProgress {
+ margin-top: 16px;
+}
+
+.cardProgress > div:first-child {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 7px;
+ font-size: 0.72rem;
+}
+
+.cardProgress > div:first-child span {
+ color: var(--ifm-color-emphasis-600);
+}
+
+.cardProgressTrack {
+ height: 5px;
+}
+
+.cardButton {
+ width: 100%;
+ margin-top: 17px;
+ color: var(--ifm-color-primary);
+ border: 1px solid
+ color-mix(in srgb, var(--ifm-color-primary) 24%, transparent);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 6%,
+ transparent
+ );
+}
+
+.cardButton:hover {
+ color: var(--ifm-color-primary);
+ text-decoration: none;
+ border-color: var(--ifm-color-primary);
+ transform: translateY(-1px);
+}
+
+/* -------------------------------------------------------
+ Empty
+------------------------------------------------------- */
+
+.emptyState {
+ display: flex;
+ min-height: 240px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 30px;
+ text-align: center;
+ border: 1px dashed var(--ifm-color-emphasis-300);
+ border-radius: 18px;
+}
+
+.emptyState svg {
+ color: var(--ifm-color-primary);
+}
+
+.emptyState h3 {
+ margin: 12px 0 4px;
+}
+
+.emptyState p {
+ margin: 0;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.85rem;
+}
+
+.emptyState button {
+ margin-top: 16px;
+ padding: 8px 13px;
+ color: var(--ifm-color-primary);
+ border: 1px solid var(--ifm-color-primary);
+ border-radius: 8px;
+ background: transparent;
+ font-size: 0.78rem;
+ font-weight: 700;
+ cursor: pointer;
+}
+
+/* -------------------------------------------------------
+ Learning Steps
+------------------------------------------------------- */
+
+.stepsSection {
+ padding: 82px 0;
+ border-top: 1px solid var(--ifm-color-emphasis-200);
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-emphasis-100) 30%,
+ transparent
+ );
+}
+
+.sectionHeaderCentered {
+ max-width: 760px;
+ margin: 0 auto 42px;
+ text-align: center;
+}
+
+.sectionHeaderCentered p {
+ margin-right: auto;
+ margin-left: auto;
+}
+
+.stepsGrid {
+ display: grid;
+ grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
+ align-items: stretch;
+ gap: 9px;
+}
+
+.stepCard {
+ min-width: 0;
+ padding: 18px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 15px;
+ background: var(--ifm-background-surface-color);
+}
+
+.stepHeader {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.stepHeader > span {
+ color: var(--ifm-color-primary);
+ font-size: 0.72rem;
+ font-weight: 850;
+}
+
+.stepHeader > div {
+ display: grid;
+ width: 34px;
+ height: 34px;
+ place-items: center;
+ color: var(--ifm-color-primary);
+ border-radius: 9px;
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 9%,
+ transparent
+ );
+}
+
+.stepCard h3 {
+ margin: 18px 0 7px;
+ font-size: 0.98rem;
+}
+
+.stepCard p {
+ margin: 0;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.75rem;
+ line-height: 1.6;
+}
+
+.stepArrow {
+ display: grid;
+ place-items: center;
+ color: var(--ifm-color-emphasis-500);
+}
+
+/* -------------------------------------------------------
+ Learning System
+------------------------------------------------------- */
+
+.systemSection {
+ padding: 82px 0;
+}
+
+.systemCard {
+ display: grid;
+ grid-template-columns: 1fr 0.85fr;
+ gap: 60px;
+ align-items: center;
+ padding: 48px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 24px;
+ background:
+ radial-gradient(
+ circle at 100% 0,
+ color-mix(in srgb, var(--ifm-color-primary) 8%, transparent),
+ transparent 35%
+ ),
+ var(--ifm-background-surface-color);
+}
+
+.systemContent h2 {
+ max-width: 650px;
+ margin: 11px 0 15px;
+ font-size: clamp(2rem, 4vw, 3.1rem);
+ line-height: 1.03;
+ letter-spacing: -0.045em;
+}
+
+.systemContent h2 span {
+ color: var(--ifm-color-primary);
+}
+
+.systemContent > p {
+ max-width: 650px;
+ color: var(--ifm-color-emphasis-700);
+ line-height: 1.7;
+}
+
+.systemList {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 10px;
+ margin: 24px 0 28px;
+}
+
+.systemList div {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.8rem;
+}
+
+.systemList svg {
+ flex: 0 0 auto;
+ color: var(--ifm-color-primary);
+}
+
+.systemVisual {
+ display: flex;
+ justify-content: center;
+}
+
+.systemWindow {
+ width: 100%;
+ max-width: 470px;
+ overflow: hidden;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 17px;
+ background: var(--ifm-background-color);
+ box-shadow: 0 30px 80px color-mix(in srgb, #000 12%, transparent);
+}
+
+.windowHeader {
+ display: flex;
+ gap: 6px;
+ padding: 13px;
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.windowHeader span {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--ifm-color-emphasis-400);
+}
+
+.learningPipeline {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+ padding: 30px 18px;
+}
+
+.pipelineItem {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 7px;
+}
+
+.pipelineItem > div {
+ display: grid;
+ width: 42px;
+ height: 42px;
+ place-items: center;
+ color: var(--ifm-color-primary);
+ border: 1px solid
+ color-mix(in srgb, var(--ifm-color-primary) 20%, transparent);
+ border-radius: 11px;
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 7%,
+ transparent
+ );
+}
+
+.pipelineItem span {
+ color: var(--ifm-color-emphasis-700);
+ font-size: 0.68rem;
+ font-weight: 700;
+}
+
+.learningPipeline > svg {
+ color: var(--ifm-color-emphasis-400);
+}
+
+.codeLines {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding: 18px;
+ border-top: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.codeLines span {
+ display: block;
+ width: 70%;
+ height: 7px;
+ border-radius: 99px;
+ background: var(--ifm-color-emphasis-200);
+}
+
+.codeLines span:nth-child(2) {
+ width: 88%;
+}
+
+.codeLines span:nth-child(3) {
+ width: 55%;
+}
+
+.codeLines span:nth-child(4) {
+ width: 76%;
+}
+
+.codeLines span:nth-child(5) {
+ width: 44%;
+}
+
+/* -------------------------------------------------------
+ Explore
+------------------------------------------------------- */
+
+.exploreSection {
+ padding: 0 0 82px;
+}
+
+.exploreGrid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 12px;
+}
+
+.exploreCard {
+ display: flex;
+ align-items: center;
+ gap: 11px;
+ padding: 17px;
+ color: inherit;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 14px;
+ background: var(--ifm-background-surface-color);
+ text-decoration: none;
+ transition:
+ transform 180ms ease,
+ border-color 180ms ease;
+}
+
+.exploreCard:hover {
+ color: inherit;
+ border-color: var(--ifm-color-primary);
+ text-decoration: none;
+ transform: translateY(-2px);
+}
+
+.exploreCard > svg:first-child {
+ flex: 0 0 auto;
+ color: var(--ifm-color-primary);
+}
+
+.exploreCard div {
+ flex: 1;
+ min-width: 0;
+}
+
+.exploreCard h3 {
+ margin: 0;
+ font-size: 0.88rem;
+}
+
+.exploreCard p {
+ margin: 3px 0 0;
+ color: var(--ifm-color-emphasis-600);
+ font-size: 0.69rem;
+ line-height: 1.45;
+}
+
+.exploreCard > svg:last-child {
+ flex: 0 0 auto;
+ color: var(--ifm-color-emphasis-500);
+}
+
+/* -------------------------------------------------------
+ Final CTA
+------------------------------------------------------- */
+
+.finalSection {
+ padding: 0 0 90px;
+}
+
+.finalCard {
+ position: relative;
+ padding: 58px 30px;
+ overflow: hidden;
+ text-align: center;
+ border: 1px solid
+ color-mix(in srgb, var(--ifm-color-primary) 20%, transparent);
+ border-radius: 25px;
+ background:
+ radial-gradient(
+ circle at 50% 0,
+ color-mix(in srgb, var(--ifm-color-primary) 15%, transparent),
+ transparent 55%
+ ),
+ var(--ifm-background-surface-color);
+}
+
+.finalIcon {
+ display: grid;
+ width: 42px;
+ height: 42px;
+ margin: 0 auto 15px;
+ place-items: center;
+ color: var(--ifm-color-primary);
+ border-radius: 11px;
+ background: color-mix(
+ in srgb,
+ var(--ifm-color-primary) 10%,
+ transparent
+ );
+}
+
+.finalCard > span {
+ color: var(--ifm-color-primary);
+ font-size: 0.75rem;
+ font-weight: 800;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+.finalCard h2 {
+ max-width: 700px;
+ margin: 10px auto;
+ font-size: clamp(2rem, 4vw, 3.2rem);
+ letter-spacing: -0.045em;
+}
+
+.finalCard p {
+ max-width: 600px;
+ margin: 0 auto;
+ color: var(--ifm-color-emphasis-700);
+ line-height: 1.65;
+}
+
+.finalActions {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-top: 27px;
+}
+
+.finalSecondary {
+ padding: 0 18px;
+ color: var(--ifm-font-color-base);
+ border: 1px solid var(--ifm-color-emphasis-300);
+ background: transparent;
+}
+
+.finalSecondary:hover {
+ color: var(--ifm-color-primary);
+ border-color: var(--ifm-color-primary);
+ text-decoration: none;
+}
+
+/* -------------------------------------------------------
+ Responsive
+------------------------------------------------------- */
+
+@media (max-width: 1100px) {
+ .heroGrid {
+ grid-template-columns: 1fr;
+ }
+
+ .progressPanel {
+ max-width: 650px;
+ }
+
+ .statsGrid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .roadmapGrid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .stepsGrid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ .stepArrow {
+ display: none;
+ }
+
+ .systemCard {
+ grid-template-columns: 1fr;
+ }
+
+ .systemVisual {
+ justify-content: flex-start;
+ }
+
+ .exploreGrid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (max-width: 768px) {
+ .hero {
+ padding: 48px 0 52px;
+ }
+
+ .hero h1 {
+ font-size: clamp(2.45rem, 12vw, 4rem);
+ }
+
+ .heroContent > p {
+ font-size: 1rem;
+ }
+
+ .heroActions {
+ flex-direction: column;
+ }
+
+ .primaryButton,
+ .secondaryButton {
+ width: 100%;
+ }
+
+ .heroMeta {
+ gap: 10px 15px;
+ }
+
+ .progressPanel {
+ padding: 21px;
+ }
+
+ .continueCard {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .continueRight {
+ min-width: 0;
+ }
+
+ .sectionHeader {
+ align-items: flex-start;
+ flex-direction: column;
+ }
+
+ .explorerControls {
+ align-items: stretch;
+ flex-direction: column;
+ }
+
+ .searchBox {
+ width: 100%;
+ }
+
+ .filters {
+ justify-content: flex-start;
+ overflow-x: auto;
+ flex-wrap: nowrap;
+ padding-bottom: 4px;
+ }
+
+ .filter,
+ .filterActive {
+ flex: 0 0 auto;
+ }
+
+ .roadmapGrid {
+ grid-template-columns: 1fr;
+ }
+
+ .stepsGrid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .systemCard {
+ padding: 28px;
+ }
+
+ .systemList {
+ grid-template-columns: 1fr;
+ }
+
+ .learningPipeline {
+ gap: 5px;
+ padding: 25px 10px;
+ }
+
+ .pipelineItem > div {
+ width: 37px;
+ height: 37px;
+ }
+
+ .exploreGrid {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 520px) {
+ .breadcrumb {
+ padding-top: 13px;
+ }
+
+ .statsGrid {
+ grid-template-columns: 1fr;
+ }
+
+ .progressStats {
+ gap: 6px;
+ }
+
+ .progressStats div {
+ padding: 11px 5px;
+ }
+
+ .stepsGrid {
+ grid-template-columns: 1fr;
+ }
+
+ .systemCard {
+ padding: 22px;
+ border-radius: 18px;
+ }
+
+ .learningPipeline {
+ gap: 2px;
+ }
+
+ .pipelineItem span {
+ font-size: 0.6rem;
+ }
+
+ .pipelineItem > div {
+ width: 34px;
+ height: 34px;
+ }
+
+ .learningPipeline > svg {
+ width: 13px;
+ }
+
+ .finalCard {
+ padding: 42px 20px;
+ border-radius: 19px;
+ }
+}
+
+/* -------------------------------------------------------
+ Reduced Motion
+------------------------------------------------------- */
+
+@media (prefers-reduced-motion: reduce) {
+ .primaryButton,
+ .secondaryButton,
+ .continueButton,
+ .cardButton,
+ .roadmapCard,
+ .exploreCard {
+ transition: none;
+ }
+
+ .progressTrack span,
+ .cardProgressTrack span,
+ .miniTrack span {
+ transition: none;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/roadmaps.tsx b/src/pages/roadmaps.tsx
deleted file mode 100644
index 923cf175b..000000000
--- a/src/pages/roadmaps.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-import Layout from "@theme/Layout";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import {
- Map,
- ChevronRight,
- Layers,
- Smartphone,
- Terminal,
- Globe,
- CheckCircle,
- Clock,
- ArrowUpRight,
- Sparkles,
-} from "lucide-react";
-
-export default function Roadmaps() {
- const { siteConfig } = useDocusaurusContext();
-
- const roadmapCards = [
- {
- title: "Frontend Developer",
- level: "Beginner to Pro",
- duration: "6 Months",
- icon:
-
- {/* --- Hero Header --- */}
-
-
-
-
-
-
- Your Path to Success in
- Tech
-
-
- Tired of tutorial hell? Follow our curated, community-validated
- roadmaps to go from your first line of code to a job-ready
- engineer.
-
-
-
- {/* --- Roadmap Grid --- */}
-
-
- {roadmapCards.map((path, i) => (
-
- {/* Background Accent */}
-
-
-
-
- {path.icon}
-
-
-
-
-
- {path.level}
-
-
-
-
-
- {path.title}
-
-
-
- {path.topics.map((topic, ti) => (
-
-
- ))}
-
-
-
- View Full Roadmap
-
- ))}
-
-
- {/* --- Why Roadmaps Matter (Visual Info) --- */}
-
-
-
-
-
- Stop Learning Randomly.
-
-
- {[
- {
- title: "Structured Curriculum",
- desc: "Every topic is placed in logical order to ensure you have the prerequisites for the next stage.",
- },
- {
- title: "Industry Validated",
- desc: "Our roadmaps are updated for 2026 standards, focusing only on skills that get you hired.",
- },
- {
- title: "Interactive Tracking",
- desc: "Mark your progress as you go and stay motivated with visual completion stats.",
- },
- ].map((feature, i) => (
-
-
- {i + 1}
-
-
-
- {feature.title}
-
-
- {feature.desc}
-
-
-
- ))}
-
-
-
-
-
-
-
-
-
- roadmap_visualization.v2
-
-
-
-
-
- Interactive Visualization Component
-
-
-
-
-
- {/* --- Call to Action --- */}
-
-
-
-
-
- Can't decide where to start?
-
-
- Take our 2-minute "Career Quiz" to find the roadmap that best
- matches your goals and personality.
-
-
- Take the Quiz
-
-
-
-
- );
-}
diff --git a/src/pages/roadmaps/html/index.tsx b/src/pages/roadmaps/html/index.tsx
new file mode 100644
index 000000000..1ebde2efc
--- /dev/null
+++ b/src/pages/roadmaps/html/index.tsx
@@ -0,0 +1,1425 @@
+import React, { useMemo, useState } from "react";
+// @ts-ignore
+import Layout from "@theme/Layout";
+// @ts-ignore
+import Link from "@docusaurus/Link";
+import {
+ Accessibility,
+ ArrowRight,
+ ArrowUpRight,
+ Award,
+ BookOpen,
+ Check,
+ CheckCircle2,
+ ChevronDown,
+ Code2,
+ FileCode2,
+ Globe2,
+ Layers3,
+ Lock,
+ Menu,
+ Monitor,
+ Rocket,
+ Search,
+ ShieldCheck,
+ Sparkles,
+ Terminal,
+ Trophy,
+ X,
+ Zap,
+} from "lucide-react";
+// @ts-ignore
+import styles from "./styles.module.css";
+
+type RoadmapStatus = "completed" | "current" | "upcoming";
+
+interface RoadmapTopic {
+ id: string;
+ title: string;
+ description: string;
+ topics: string[];
+ status: RoadmapStatus;
+ href: string;
+ icon: React.ReactNode;
+}
+
+interface RoadmapPhase {
+ number: string;
+ title: string;
+ subtitle: string;
+ description: string;
+ duration: string;
+ topics: RoadmapTopic[];
+}
+
+const PHASES: RoadmapPhase[] = [
+ {
+ number: "01",
+ title: "Web & HTML Foundations",
+ subtitle: "Understand how HTML fits into the web",
+ description:
+ "Start with the mental model behind websites, documents, browsers, URLs and HTML before writing more complex markup.",
+ duration: "1–2 weeks",
+ topics: [
+ {
+ id: "internet-basics",
+ title: "How the Web Works",
+ description:
+ "Understand the basic request-response model behind websites.",
+ topics: [
+ "Internet basics",
+ "Browser basics",
+ "Client and server",
+ "HTTP and HTTPS",
+ "URLs",
+ "DNS basics",
+ ],
+ status: "completed",
+ href: "#",
+ icon: ",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ ],
+ status: "upcoming",
+ href: "#",
+ icon: ",
+ "
",
+ "Generic containers",
+ "Avoiding unnecessary markup",
+ ],
+ status: "upcoming",
+ href: "#",
+ icon: