diff --git a/src/components/Roadmap/Roadmap.css b/src/components/Roadmap/Roadmap.css index 3eb8af48..ebf720ee 100644 --- a/src/components/Roadmap/Roadmap.css +++ b/src/components/Roadmap/Roadmap.css @@ -3,6 +3,11 @@ padding: 20px; } +[data-theme='dark'] .roadmap-container { + background: var(--dark-bg-primary); + color: var(--dark-text-primary); +} + .roadmap-container .roadmap-title { text-align: center; font-size: 2.5rem; @@ -33,6 +38,16 @@ max-width: 400px; } +[data-theme='dark'] .roadmap-container .roadmap-search { + background: var(--dark-input-bg); + color: var(--dark-text-primary); + border-color: var(--dark-input-border); +} + +[data-theme='dark'] .roadmap-container .roadmap-search:focus { + border-color: var(--dark-input-focus-border); +} + .roadmap-container .roadmap-category { margin-bottom: 30px; } @@ -83,11 +98,22 @@ text-align: center; } +[data-theme='dark'] .roadmap-container .roadmap-category .roadmap-cards .roadmap-card { + background: var(--dark-card-bg); + border-color: var(--dark-border); + box-shadow: var(--dark-shadow); + color: var(--dark-text-primary); +} + .roadmap-container .roadmap-category .roadmap-cards .roadmap-card:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } +[data-theme='dark'] .roadmap-container .roadmap-category .roadmap-cards .roadmap-card:hover { + box-shadow: var(--dark-shadow-lg); +} + .roadmap-container .roadmap-category .roadmap-cards .roadmap-card .roadmap-link { text-decoration: none; color: var(--ifm-color-primary); diff --git a/src/components/TeamProfileCards/teamcards.css b/src/components/TeamProfileCards/teamcards.css index 8d6db73c..1f3dc710 100644 --- a/src/components/TeamProfileCards/teamcards.css +++ b/src/components/TeamProfileCards/teamcards.css @@ -4,11 +4,21 @@ transition: transform 0.3s ease, box-shadow 0.3s ease; border: 0.5px solid black; } - + +[data-theme='dark'] .team-profile-card > .card { + border-color: var(--dark-border); + background: var(--dark-card-bg); + color: var(--dark-text-primary); + } + .team-profile-card > .card:hover { transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); } + +[data-theme='dark'] .team-profile-card > .card:hover { + box-shadow: var(--dark-shadow-lg); + } .team-profile-card > .card > .card__header > .avatar > .avatar__photo--xl { border-radius: 50%; @@ -22,4 +32,14 @@ .team-profile-card > .card > .card__footer > .button-group > .button:hover { background-color: #0056b3; } + +[data-theme='dark'] .team-profile-card > .card > .card__footer > .button-group > .button { + background: var(--dark-bg-tertiary); + color: var(--dark-text-primary); + border-color: var(--dark-border); + } + +[data-theme='dark'] .team-profile-card > .card > .card__footer > .button-group > .button:hover { + background: var(--dark-card-hover-bg); + } diff --git a/src/css/custom.css b/src/css/custom.css index 9d30a21f..54bd2e0d 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -32,6 +32,26 @@ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); --ifm-color-primary-text: #ffffff; --ifm-color-secondary-text: #edf2f7; + + /* Standardized Dark Theme Colors */ + --dark-bg-primary: #121212; + --dark-bg-secondary: #1a1a1a; + --dark-bg-tertiary: #2d2d2d; + --dark-text-primary: #ffffff; + --dark-text-secondary: #edf2f7; + --dark-text-muted: #a0aec0; + --dark-border: #2d2d2d; + --dark-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); + --dark-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2); + + /* Card and component backgrounds */ + --dark-card-bg: #1a1a1a; + --dark-card-hover-bg: #2d2d2d; + + /* Form elements */ + --dark-input-bg: #2d2d2d; + --dark-input-border: #4a5568; + --dark-input-focus-border: #25c2a0; } @@ -161,18 +181,565 @@ color: transparent; } -/* Light mode background and text fix */ -[data-theme='light'] { +/* Light mode background and text fix - EXCLUDE community page */ +[data-theme='light'] body:not(:has(.community-page)) { --ifm-background-color: #ffffff; /* white background */ --ifm-font-color-base: #000000; /* black text */ background-color: var(--ifm-background-color); color: var(--ifm-font-color-base); } -/* Dark mode overrides (already there, ensure it's working) */ -[data-theme='dark'] { - background-color: #121212; - color: #ffffff; +/* Dark mode overrides - EXCLUDE community page */ +[data-theme='dark'] body:not(:has(.community-page)) { + background-color: var(--dark-bg-primary); + color: var(--dark-text-primary); +} + +/* Global dark theme utilities */ +[data-theme='dark'] .dark-bg-primary { + background-color: var(--dark-bg-primary) !important; +} + +[data-theme='dark'] .dark-bg-secondary { + background-color: var(--dark-bg-secondary) !important; +} + +[data-theme='dark'] .dark-bg-tertiary { + background-color: var(--dark-bg-tertiary) !important; +} + +[data-theme='dark'] .dark-text-primary { + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .dark-text-secondary { + color: var(--dark-text-secondary) !important; +} + +[data-theme='dark'] .dark-text-muted { + color: var(--dark-text-muted) !important; +} + +[data-theme='dark'] .dark-border { + border-color: var(--dark-border) !important; +} + +[data-theme='dark'] .dark-shadow { + box-shadow: var(--dark-shadow) !important; +} + +[data-theme='dark'] .dark-shadow-lg { + box-shadow: var(--dark-shadow-lg) !important; +} + +/* Form elements dark theme */ +[data-theme='dark'] input, +[data-theme='dark'] textarea, +[data-theme='dark'] select { + background-color: var(--dark-input-bg) !important; + border-color: var(--dark-input-border) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] input:focus, +[data-theme='dark'] textarea:focus, +[data-theme='dark'] select:focus { + border-color: var(--dark-input-focus-border) !important; + box-shadow: 0 0 0 2px rgba(37, 194, 160, 0.2) !important; +} + +[data-theme='dark'] input::placeholder, +[data-theme='dark'] textarea::placeholder { + color: var(--dark-text-muted) !important; +} + +/* Button dark theme */ +[data-theme='dark'] .button, +[data-theme='dark'] button { + background-color: var(--dark-bg-tertiary); + color: var(--dark-text-primary); + border-color: var(--dark-border); +} + +[data-theme='dark'] .button:hover, +[data-theme='dark'] button:hover { + background-color: var(--dark-card-hover-bg); +} + +/* Card components dark theme */ +[data-theme='dark'] .card { + background-color: var(--dark-card-bg) !important; + border-color: var(--dark-border) !important; + color: var(--dark-text-primary) !important; + box-shadow: var(--dark-shadow) !important; +} + +[data-theme='dark'] .card:hover { + background-color: var(--dark-card-hover-bg) !important; + box-shadow: var(--dark-shadow-lg) !important; +} + +/* Table dark theme */ +[data-theme='dark'] table { + background-color: var(--dark-bg-secondary) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] th { + background-color: var(--dark-bg-tertiary) !important; + color: var(--dark-text-primary) !important; + border-color: var(--dark-border) !important; +} + +[data-theme='dark'] td { + border-color: var(--dark-border) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] tr:hover { + background-color: var(--dark-card-hover-bg) !important; +} + +/* Navigation dark theme */ +[data-theme='dark'] .navbar { + background-color: var(--dark-bg-secondary) !important; + border-color: var(--dark-border) !important; +} + +[data-theme='dark'] .navbar__item { + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .navbar__link:hover { + color: var(--ifm-color-primary) !important; +} + +/* Footer - keeping original styling */ + +/* Modal dark theme */ +[data-theme='dark'] .modal { + background-color: var(--dark-bg-secondary) !important; + color: var(--dark-text-primary) !important; + border-color: var(--dark-border) !important; +} + +[data-theme='dark'] .modal-header { + background-color: var(--dark-bg-tertiary) !important; + border-color: var(--dark-border) !important; +} + +/* Dropdown dark theme */ +[data-theme='dark'] .dropdown { + background-color: var(--dark-bg-secondary) !important; + border-color: var(--dark-border) !important; + box-shadow: var(--dark-shadow-lg) !important; +} + +[data-theme='dark'] .dropdown__link { + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .dropdown__link:hover { + background-color: var(--dark-card-hover-bg) !important; + color: var(--ifm-color-primary) !important; +} + +/* Code blocks dark theme */ +[data-theme='dark'] pre { + background-color: var(--dark-bg-tertiary) !important; + border-color: var(--dark-border) !important; +} + +[data-theme='dark'] code { + background-color: var(--dark-bg-tertiary) !important; + color: var(--dark-text-primary) !important; +} + +/* ===== DOCUSAURUS DOCUMENTATION PAGES DARK THEME ===== */ + +/* Main documentation layout - EXCLUDE community page */ +[data-theme='dark'] body:not(:has(.community-page)) .main-wrapper { + background-color: var(--dark-bg-primary) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] body:not(:has(.community-page)) .docusaurus-wrapper { + background-color: var(--dark-bg-primary) !important; +} + +/* Documentation content area - EXCLUDE community page */ +[data-theme='dark'] body:not(:has(.community-page)) .container { + background-color: var(--dark-bg-primary) !important; +} + +[data-theme='dark'] body:not(:has(.community-page)) .row { + background-color: var(--dark-bg-primary) !important; +} + +[data-theme='dark'] body:not(:has(.community-page)) .col { + background-color: var(--dark-bg-primary) !important; +} + +/* Documentation sidebar */ +[data-theme='dark'] .theme-doc-sidebar-container { + background-color: var(--dark-bg-secondary) !important; + border-color: var(--dark-border) !important; +} + +[data-theme='dark'] .theme-doc-sidebar-menu { + background-color: var(--dark-bg-secondary) !important; +} + +[data-theme='dark'] .menu__link { + color: var(--dark-text-secondary) !important; +} + +[data-theme='dark'] .menu__link:hover { + background-color: var(--dark-card-hover-bg) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .menu__link--active { + background-color: var(--ifm-color-primary) !important; + color: white !important; +} + +[data-theme='dark'] .menu__list-item-collapsible { + background-color: var(--dark-bg-secondary) !important; +} + +[data-theme='dark'] .menu__caret { + color: var(--dark-text-muted) !important; +} + +/* Documentation content */ +[data-theme='dark'] .theme-doc-markdown { + background-color: var(--dark-bg-primary) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .markdown { + background-color: var(--dark-bg-primary) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .markdown h1, +[data-theme='dark'] .markdown h2, +[data-theme='dark'] .markdown h3, +[data-theme='dark'] .markdown h4, +[data-theme='dark'] .markdown h5, +[data-theme='dark'] .markdown h6 { + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .markdown p { + color: var(--dark-text-secondary) !important; +} + +[data-theme='dark'] .markdown li { + color: var(--dark-text-secondary) !important; +} + +[data-theme='dark'] .markdown a { + color: var(--ifm-color-primary) !important; +} + +[data-theme='dark'] .markdown a:hover { + color: var(--ifm-color-primary-light) !important; +} + +/* Documentation breadcrumbs */ +[data-theme='dark'] .breadcrumbs { + background-color: var(--dark-bg-primary) !important; +} + +[data-theme='dark'] .breadcrumbs__link { + color: var(--dark-text-muted) !important; +} + +[data-theme='dark'] .breadcrumbs__link:hover { + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .breadcrumbs__item--active .breadcrumbs__link { + color: var(--dark-text-primary) !important; +} + +/* Documentation table of contents */ +[data-theme='dark'] .table-of-contents { + background-color: var(--dark-bg-primary) !important; +} + +[data-theme='dark'] .table-of-contents__link { + color: var(--dark-text-muted) !important; +} + +[data-theme='dark'] .table-of-contents__link:hover { + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .table-of-contents__link--active { + color: var(--ifm-color-primary) !important; +} + +/* Documentation pagination */ +[data-theme='dark'] .pagination-nav { + background-color: var(--dark-bg-primary) !important; +} + +[data-theme='dark'] .pagination-nav__link { + background-color: var(--dark-bg-secondary) !important; + border-color: var(--dark-border) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .pagination-nav__link:hover { + background-color: var(--dark-card-hover-bg) !important; + border-color: var(--ifm-color-primary) !important; +} + +[data-theme='dark'] .pagination-nav__sublabel { + color: var(--dark-text-muted) !important; +} + +[data-theme='dark'] .pagination-nav__label { + color: var(--dark-text-primary) !important; +} + +/* Documentation admonitions (info, warning, etc.) */ +[data-theme='dark'] .admonition { + background-color: var(--dark-bg-secondary) !important; + border-color: var(--dark-border) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .admonition-heading { + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .admonition-content { + color: var(--dark-text-secondary) !important; +} + +/* Documentation tabs */ +[data-theme='dark'] .tabs-container { + background-color: var(--dark-bg-primary) !important; +} + +[data-theme='dark'] .tabs { + background-color: var(--dark-bg-secondary) !important; + border-color: var(--dark-border) !important; +} + +[data-theme='dark'] .tabs__item { + background-color: var(--dark-bg-secondary) !important; + color: var(--dark-text-muted) !important; + border-color: var(--dark-border) !important; +} + +[data-theme='dark'] .tabs__item:hover { + background-color: var(--dark-card-hover-bg) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .tabs__item--active { + background-color: var(--dark-bg-primary) !important; + color: var(--ifm-color-primary) !important; + border-bottom-color: var(--ifm-color-primary) !important; +} + +[data-theme='dark'] .tabpanel { + background-color: var(--dark-bg-primary) !important; + color: var(--dark-text-primary) !important; +} + +/* Documentation code blocks */ +[data-theme='dark'] .prism-code { + background-color: var(--dark-bg-tertiary) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .codeBlockTitle { + background-color: var(--dark-bg-tertiary) !important; + color: var(--dark-text-primary) !important; + border-color: var(--dark-border) !important; +} + +[data-theme='dark'] .codeBlockLines { + background-color: var(--dark-bg-tertiary) !important; +} + +[data-theme='dark'] .token-line { + color: var(--dark-text-primary) !important; +} + +/* Documentation blockquotes */ +[data-theme='dark'] blockquote { + background-color: var(--dark-bg-secondary) !important; + border-left-color: var(--ifm-color-primary) !important; + color: var(--dark-text-secondary) !important; +} + +/* Documentation details/summary */ +[data-theme='dark'] details { + background-color: var(--dark-bg-secondary) !important; + border-color: var(--dark-border) !important; +} + +[data-theme='dark'] summary { + background-color: var(--dark-bg-tertiary) !important; + color: var(--dark-text-primary) !important; +} + +/* Documentation search */ +[data-theme='dark'] .DocSearch { + --docsearch-primary-color: var(--ifm-color-primary) !important; + --docsearch-text-color: var(--dark-text-primary) !important; + --docsearch-muted-color: var(--dark-text-muted) !important; + --docsearch-container-background: rgba(18, 18, 18, 0.8) !important; + --docsearch-modal-background: var(--dark-bg-secondary) !important; + --docsearch-searchbox-background: var(--dark-bg-tertiary) !important; + --docsearch-searchbox-focus-background: var(--dark-bg-tertiary) !important; + --docsearch-hit-color: var(--dark-text-primary) !important; + --docsearch-hit-active-color: var(--dark-text-primary) !important; + --docsearch-hit-background: var(--dark-bg-tertiary) !important; + --docsearch-hit-shadow: var(--dark-shadow) !important; + --docsearch-key-gradient: linear-gradient(-225deg, var(--dark-bg-tertiary), var(--dark-bg-secondary)) !important; + --docsearch-key-shadow: inset 0 -2px 0 0 var(--dark-border), inset 0 0 1px 1px var(--dark-border), 0 1px 2px 1px rgba(0, 0, 0, 0.3) !important; + --docsearch-footer-background: var(--dark-bg-tertiary) !important; + --docsearch-footer-shadow: var(--dark-shadow) !important; +} + +/* Documentation edit page link */ +[data-theme='dark'] .theme-edit-this-page { + color: var(--dark-text-muted) !important; +} + +[data-theme='dark'] .theme-edit-this-page:hover { + color: var(--ifm-color-primary) !important; +} + +/* Documentation last updated */ +[data-theme='dark'] .theme-last-updated { + color: var(--dark-text-muted) !important; +} + +/* Documentation category cards */ +[data-theme='dark'] .card { + background-color: var(--dark-card-bg) !important; + border-color: var(--dark-border) !important; + color: var(--dark-text-primary) !important; + box-shadow: var(--dark-shadow) !important; +} + +[data-theme='dark'] .card:hover { + background-color: var(--dark-card-hover-bg) !important; + box-shadow: var(--dark-shadow-lg) !important; +} + +[data-theme='dark'] .card__header { + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .card__body { + color: var(--dark-text-secondary) !important; +} + +[data-theme='dark'] .card__footer { + border-color: var(--dark-border) !important; +} + +/* Documentation hero banner */ +[data-theme='dark'] .hero { + background-color: var(--dark-bg-secondary) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .hero__title { + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .hero__subtitle { + color: var(--dark-text-secondary) !important; +} + +/* Documentation alert/callout boxes */ +[data-theme='dark'] .alert { + background-color: var(--dark-bg-secondary) !important; + border-color: var(--dark-border) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .alert--primary { + background-color: rgba(37, 194, 160, 0.1) !important; + border-color: var(--ifm-color-primary) !important; +} + +[data-theme='dark'] .alert--secondary { + background-color: var(--dark-bg-tertiary) !important; + border-color: var(--dark-border) !important; +} + +[data-theme='dark'] .alert--success { + background-color: rgba(34, 197, 94, 0.1) !important; + border-color: #22c55e !important; +} + +[data-theme='dark'] .alert--info { + background-color: rgba(59, 130, 246, 0.1) !important; + border-color: #3b82f6 !important; +} + +[data-theme='dark'] .alert--warning { + background-color: rgba(245, 158, 11, 0.1) !important; + border-color: #f59e0b !important; +} + +[data-theme='dark'] .alert--danger { + background-color: rgba(239, 68, 68, 0.1) !important; + border-color: #ef4444 !important; +} + +/* Documentation inline code */ +[data-theme='dark'] code:not([class*="language-"]) { + background-color: var(--dark-bg-tertiary) !important; + color: var(--ifm-color-primary) !important; + border: 1px solid var(--dark-border) !important; +} + +/* Documentation horizontal rules */ +[data-theme='dark'] hr { + border-color: var(--dark-border) !important; +} + +/* Documentation images */ +[data-theme='dark'] .markdown img { + border-radius: 8px; + box-shadow: var(--dark-shadow); +} + +/* Fix for any remaining white backgrounds */ +[data-theme='dark'] .theme-doc-version-banner { + background-color: var(--dark-bg-secondary) !important; + border-color: var(--dark-border) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .theme-doc-version-badge { + background-color: var(--dark-bg-tertiary) !important; + color: var(--dark-text-primary) !important; +} + +/* Ensure all text is readable */ +[data-theme='dark'] * { + border-color: var(--dark-border); +} + +[data-theme='dark'] .theme-doc-markdown > div, +[data-theme='dark'] .theme-doc-markdown > section, +[data-theme='dark'] .theme-doc-markdown > article { + background-color: var(--dark-bg-primary) !important; + color: var(--dark-text-primary) !important; } html.theme-light .bg-white { background-color: #ffffff !important; diff --git a/src/pages/badges/github-badges.module.css b/src/pages/badges/github-badges.module.css index 6fa00e59..3c139175 100644 --- a/src/pages/badges/github-badges.module.css +++ b/src/pages/badges/github-badges.module.css @@ -1,6 +1,4 @@ -body{ - background-color: #fff; -} +/* GitHub badges page styling - light theme */ .github-badges-page { background: #f6f5f5; border-radius: 18px; @@ -9,6 +7,19 @@ body{ margin-top: 24px; } +/* Dark theme body override - EXCLUDE community page */ +[data-theme='dark'] body:not(:has(.community-page)) { + background-color: var(--dark-bg-primary) !important; + color: var(--dark-text-primary) !important; +} + +/* Dark theme for main page container */ +[data-theme='dark'] .github-badges-page { + background: var(--dark-bg-secondary) !important; + color: var(--dark-text-primary) !important; + box-shadow: var(--dark-shadow-lg) !important; +} + .badgeGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); @@ -33,6 +44,18 @@ body{ transform: translateY(-4px) scale(1.03); } +/* Dark theme for badge items */ +[data-theme='dark'] .badgeItem { + background: var(--dark-bg-tertiary) !important; + color: var(--dark-text-primary) !important; + box-shadow: var(--dark-shadow) !important; +} + +[data-theme='dark'] .badgeItem:hover { + background: var(--dark-card-hover-bg) !important; + box-shadow: var(--dark-shadow-lg) !important; +} + .badgeImg { width: 64px; height: 64px; @@ -136,6 +159,11 @@ body{ text-align: center; } +/* Dark theme for headings */ +[data-theme='dark'] .github-badges-page h1 { + color: var(--dark-text-primary) !important; +} + .bannerAchievements { background: linear-gradient(90deg, #e0e7ff 0%, #f0fdfa 100%); border-radius: 12px; @@ -155,6 +183,16 @@ body{ text-align: left; } +/* Dark theme for banner and section headings */ +[data-theme='dark'] .bannerAchievements { + background: var(--dark-bg-tertiary) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .sectionHeading { + color: var(--dark-text-primary) !important; +} + .skinHeading { color: #22223b; font-size: 2rem; @@ -168,6 +206,11 @@ body{ gap: 10px; } +/* Dark theme for skin heading */ +[data-theme='dark'] .skinHeading { + color: var(--dark-text-primary) !important; +} + .highlightsHeading { color: #f59e42; font-size: 2rem; @@ -337,6 +380,41 @@ table th, table td { background: #f9fafb; } +/* Dark theme for all table types */ +[data-theme='dark'] .skinToneTable, +[data-theme='dark'] .highlightsTable, +[data-theme='dark'] .retiredTable, +[data-theme='dark'] table { + background: var(--dark-bg-secondary) !important; + border-color: var(--dark-border) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .skinToneTable th, +[data-theme='dark'] .highlightsTable th, +[data-theme='dark'] .retiredTable th, +[data-theme='dark'] table th { + background: var(--dark-bg-tertiary) !important; + color: var(--dark-text-primary) !important; + border-color: var(--dark-border) !important; +} + +[data-theme='dark'] .skinToneTable td, +[data-theme='dark'] .highlightsTable td, +[data-theme='dark'] .retiredTable td, +[data-theme='dark'] table td { + border-color: var(--dark-border) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .achievementsTable tr:nth-child(even), +[data-theme='dark'] .skinToneTable tr:nth-child(even), +[data-theme='dark'] .highlightsTable tr:nth-child(even), +[data-theme='dark'] .retiredTable tr:nth-child(even), +[data-theme='dark'] table tr:nth-child(even) { + background: var(--dark-bg-tertiary) !important; +} + .badgeImgSmall { width: 44px; height: 44px; @@ -347,6 +425,17 @@ table th, table td { box-shadow: 0 1.5px 6px rgba(0,0,0,0.04); } +/* Dark theme for badge images */ +[data-theme='dark'] .badgeImg { + border-color: var(--dark-border) !important; + background: var(--dark-bg-primary) !important; +} + +[data-theme='dark'] .badgeImgSmall { + border-color: var(--dark-border) !important; + background: var(--dark-bg-primary) !important; +} + @media (max-width: 800px) { .achievementsTable, .skinToneTable, .highlightsTable, .retiredTable { font-size: 0.95rem; @@ -409,6 +498,52 @@ table th, table td { margin: 32px 0; } +/* Dark theme for text elements */ +[data-theme='dark'] .github-badges-page h2 { + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .github-badges-page a { + color: var(--ifm-color-primary) !important; +} + +[data-theme='dark'] .github-badges-page a:hover { + color: var(--ifm-color-primary-light) !important; +} + +[data-theme='dark'] .github-badges-page p, +[data-theme='dark'] .github-badges-page li { + color: var(--dark-text-secondary) !important; +} + +[data-theme='dark'] .github-badges-page hr { + border-top-color: var(--dark-border) !important; +} + +/* Additional text elements */ +.subheading { + color: #24292f; + font-size: 1.5rem; + font-weight: 600; + margin: 32px 0 16px 0; +} + +.paragraph { + color: #4b5563; + font-size: 1rem; + line-height: 1.6; + margin-bottom: 16px; +} + +/* Dark theme for additional text elements */ +[data-theme='dark'] .subheading { + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .paragraph { + color: var(--dark-text-secondary) !important; +} + .github-badges-page .section { margin-bottom: 32px; } @@ -457,6 +592,16 @@ table th, table td { line-height: 1.6; } +/* Dark theme for certification section */ +[data-theme='dark'] .certificationHero { + background: var(--dark-bg-primary) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .certificationHero p { + color: var(--dark-text-secondary) !important; +} + .certificationCards { max-width: 1200px; margin: 0 auto; @@ -479,6 +624,13 @@ table th, table td { backdrop-filter: blur(8px); } +/* Dark theme for certification cards */ +[data-theme='dark'] .certCard { + background: linear-gradient(135deg, var(--dark-bg-secondary), var(--dark-bg-tertiary)) !important; + color: var(--dark-text-primary) !important; + box-shadow: var(--dark-shadow-lg) !important; +} + .certCard::before { content: ''; position: absolute; @@ -523,6 +675,15 @@ table th, table td { margin-bottom: 2rem; } +/* Dark theme for card content */ +[data-theme='dark'] .cardContent h2 { + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .cardContent p { + color: var(--dark-text-secondary) !important; +} + .certBadge { flex: 0 0 200px; padding: 1rem; @@ -581,6 +742,15 @@ table th, table td { color: white; } +/* Dark theme for certification links */ +[data-theme='dark'] .certLink { + color: var(--ifm-color-primary) !important; +} + +[data-theme='dark'] .certLink:hover { + color: var(--ifm-color-primary-light) !important; +} + .certLink::after { content: "→"; margin-left: 8px; @@ -722,26 +892,65 @@ table th, table td { } /* Dark mode support */ -@media (prefers-color-scheme: dark) { - .skinToneBadgeCard { - background: #0d1117; - } - - .badgeHeader h3 { - color: #c9d1d9; - } - - .variant { - background: #161b22; - } - - .variant:hover { - background: #1c2128; - } - - .skinToneLabel { - color: #8b949e; - } +[data-theme='dark'] .skinToneBadgeCard { + background: var(--dark-bg-secondary); + color: var(--dark-text-primary); +} + +[data-theme='dark'] .badgeHeader h3 { + color: var(--dark-text-primary); +} + +[data-theme='dark'] .variant { + background: var(--dark-bg-tertiary); + color: var(--dark-text-primary); +} + +[data-theme='dark'] .variant:hover { + background: var(--dark-card-hover-bg); +} + +[data-theme='dark'] .skinToneLabel { + color: var(--dark-text-muted); +} + +[data-theme='dark'] .achievementsTable { + background: var(--dark-bg-secondary); + color: var(--dark-text-primary); +} + +[data-theme='dark'] .achievementsTable th { + background: var(--dark-bg-tertiary); + color: var(--dark-text-primary); + border-color: var(--dark-border); +} + +[data-theme='dark'] .achievementsTable td { + border-color: var(--dark-border) !important; + color: var(--dark-text-primary) !important; + background: var(--dark-bg-secondary) !important; +} + +[data-theme='dark'] .achievementsTable td:last-child { + background: var(--dark-bg-secondary) !important; +} + +[data-theme='dark'] .achievementsTable tr { + background: var(--dark-bg-secondary) !important; +} + +[data-theme='dark'] .achievementsTable tr:hover { + background: var(--dark-card-hover-bg) !important; +} + +[data-theme='dark'] .title { + color: var(--dark-text-primary); +} + +[data-theme='dark'] .bannerAchievements { + background: var(--dark-bg-secondary); + color: var(--dark-text-primary); + border-color: var(--dark-border); } /* Footer Styles */ @@ -751,6 +960,8 @@ table th, table td { margin-top: 60px; } +/* Footer - keeping original styling */ + .footerGrid { display: grid; grid-template-columns: 1fr 2fr 1fr; @@ -935,67 +1146,179 @@ table th, table td { box-shadow: 0 1px 3px rgba(0,0,0,0.05); } +/* Enhanced Level Images Container */ .achievementsTable .levelImages { display: flex; flex-wrap: wrap; - gap: clamp(6px, 1vw, 10px); + gap: clamp(8px, 1.2vw, 12px); justify-content: center; - margin: 8px 0; - padding: 8px; - background: #f8fafc; - border-radius: 8px; - border: 1px solid #e5e7eb; + margin: 12px 0; + padding: 12px; + background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); + border-radius: 16px; + border: 2px solid #e2e8f0; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.achievementsTable .levelImages:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7); + border-color: #c7d2fe; } .achievementsTable .levelImages img { - width: clamp(32px, 5vw, 44px); - height: clamp(32px, 5vw, 44px); - transition: transform 0.2s ease; + width: clamp(36px, 5vw, 48px); + height: clamp(36px, 5vw, 48px); + border-radius: 12px; + border: 2px solid #e5e7eb; + background: white; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; } .achievementsTable .levelImages img:hover { - transform: scale(1.15) rotate(5deg); + transform: scale(1.2) rotate(8deg); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15), 0 3px 8px rgba(0, 0, 0, 0.1); + border-color: #3b82f6; + z-index: 10; + position: relative; } +/* Enhanced Needed Amount Section */ .achievementsTable .neededAmount { - font-weight: 500; - color: #374151; - background: linear-gradient(to right, #f1f5f9, #e2e8f0); - padding: 6px 14px; - border-radius: 12px; + font-weight: 600; + color: #1e293b; + background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); + padding: 10px 16px; + border-radius: 16px; font-size: 0.9em; - margin-top: 6px; - box-shadow: 0 1px 2px rgba(0,0,0,0.05); - border: 1px solid #e5e7eb; + margin-top: 8px; + text-align: center; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); + border: 2px solid #e2e8f0; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + letter-spacing: 0.025em; } -/* Adjust levels text styling */ +.achievementsTable .neededAmount::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); + transition: left 0.5s ease; +} + +.achievementsTable .neededAmount:hover { + transform: translateY(-2px) scale(1.02); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06); + border-color: #3b82f6; +} + +.achievementsTable .neededAmount:hover::before { + left: 100%; +} + +/* Enhanced Level Text Styling */ .achievementsTable .levelText { - font-weight: 600; - color: #1f2937; - margin-bottom: 4px; - padding: 6px 12px; - background: #f1f5f9; - border-radius: 6px; - font-size: 0.9em; - border: 1px solid #e2e8f0; + font-weight: 700; + color: white; + margin-bottom: 8px; + padding: 8px 14px; + background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); + border-radius: 12px; + font-size: 0.85em; + text-align: center; + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3), 0 2px 4px rgba(59, 130, 246, 0.2); + text-transform: uppercase; + letter-spacing: 0.05em; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + border: none; +} + +.achievementsTable .levelText:hover { + transform: translateY(-1px); + box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4), 0 3px 6px rgba(59, 130, 246, 0.3); +} + +/* Enhanced Badge Levels Container */ +.achievementsTable .badgeLevels { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + padding: 16px; + background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); + border-radius: 20px; + border: 2px solid #e2e8f0; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + width: 100%; + max-width: 280px; + margin: 0 auto; +} + +.achievementsTable .badgeLevels::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); + opacity: 0.8; } -/* Single badge center alignment */ +.achievementsTable .badgeLevels:hover { + transform: translateY(-3px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06); + border-color: #3b82f6; +} + +/* Enhanced Single Badge Container */ .achievementsTable .singleBadge { display: flex; flex-direction: column; align-items: center; - gap: 10px; - padding: 12px; - background: white; - border-radius: 8px; - box-shadow: 0 1px 3px rgba(0,0,0,0.05); + gap: 12px; + padding: 16px; + background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); + border-radius: 20px; + border: 2px solid #e2e8f0; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; width: 100%; - max-width: 200px; + max-width: 220px; margin: 0 auto; } +.achievementsTable .singleBadge::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, #10b981, #3b82f6); + opacity: 0.8; +} + +.achievementsTable .singleBadge:hover { + transform: translateY(-3px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06); + border-color: #10b981; +} + .achievementsTable .singleBadge img { margin: 4px 0; } @@ -1051,12 +1374,116 @@ table th, table td { } } -/* Dark mode adjustments */ +/* Enhanced Dark Mode Adjustments */ [data-theme='dark'] .achievementsTable .neededAmount { - background: var(--ifm-color-emphasis-200); - color: var(--ifm-color-content); + background: linear-gradient(135deg, var(--dark-bg-tertiary) 0%, var(--dark-bg-secondary) 100%) !important; + color: var(--dark-text-primary) !important; + border-color: var(--dark-border) !important; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important; +} + +[data-theme='dark'] .achievementsTable .neededAmount::before { + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important; +} + +[data-theme='dark'] .achievementsTable .neededAmount:hover { + border-color: var(--ifm-color-primary) !important; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3) !important; } [data-theme='dark'] .achievementsTable .levelText { - color: var(--ifm-color-content); + background: linear-gradient(135deg, var(--ifm-color-primary) 0%, var(--ifm-color-primary-dark) 100%) !important; + color: white !important; + box-shadow: 0 4px 12px rgba(37, 194, 160, 0.3), 0 2px 4px rgba(37, 194, 160, 0.2) !important; +} + +[data-theme='dark'] .achievementsTable .levelText:hover { + box-shadow: 0 6px 16px rgba(37, 194, 160, 0.4), 0 3px 6px rgba(37, 194, 160, 0.3) !important; +} + +/* Dark theme for enhanced badge containers */ +[data-theme='dark'] .achievementsTable .badgeLevels { + background: linear-gradient(135deg, var(--dark-bg-secondary) 0%, var(--dark-bg-tertiary) 100%) !important; + border-color: var(--dark-border) !important; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .achievementsTable .badgeLevels::before { + background: linear-gradient(90deg, var(--ifm-color-primary), #8b5cf6, #ec4899) !important; +} + +[data-theme='dark'] .achievementsTable .badgeLevels:hover { + border-color: var(--ifm-color-primary) !important; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !important; +} + +[data-theme='dark'] .achievementsTable .singleBadge { + background: linear-gradient(135deg, var(--dark-bg-secondary) 0%, var(--dark-bg-tertiary) 100%) !important; + border-color: var(--dark-border) !important; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2) !important; + color: var(--dark-text-primary) !important; +} + +[data-theme='dark'] .achievementsTable .singleBadge::before { + background: linear-gradient(90deg, #10b981, var(--ifm-color-primary)) !important; +} + +[data-theme='dark'] .achievementsTable .singleBadge:hover { + border-color: #10b981 !important; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !important; +} + +/* Dark theme for enhanced level images */ +[data-theme='dark'] .achievementsTable .levelImages { + background: linear-gradient(135deg, var(--dark-bg-tertiary) 0%, var(--dark-bg-secondary) 100%) !important; + border-color: var(--dark-border) !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; +} + +[data-theme='dark'] .achievementsTable .levelImages:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; + border-color: var(--ifm-color-primary) !important; +} + +[data-theme='dark'] .achievementsTable .levelImages img { + border-color: var(--dark-border) !important; + background: var(--dark-bg-primary) !important; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3) !important; +} + +[data-theme='dark'] .achievementsTable .levelImages img:hover { + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4) !important; + border-color: var(--ifm-color-primary) !important; +} + +/* Enhanced styling for inline needed text */ +.achievementsTable td b { + display: inline-block; + background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); + color: white; + padding: 4px 10px; + border-radius: 8px; + font-size: 0.85em; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3); + margin-right: 8px; + transition: all 0.2s ease; +} + +.achievementsTable td b:hover { + transform: translateY(-1px); + box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4); +} + +/* Dark theme for inline needed text */ +[data-theme='dark'] .achievementsTable td b { + background: linear-gradient(135deg, var(--ifm-color-primary) 0%, var(--ifm-color-primary-dark) 100%) !important; + box-shadow: 0 2px 6px rgba(37, 194, 160, 0.3) !important; +} + +[data-theme='dark'] .achievementsTable td b:hover { + box-shadow: 0 4px 10px rgba(37, 194, 160, 0.4) !important; } diff --git a/src/pages/badges/github-badges.tsx b/src/pages/badges/github-badges.tsx index e475b13a..454e0c45 100644 --- a/src/pages/badges/github-badges.tsx +++ b/src/pages/badges/github-badges.tsx @@ -1,8 +1,35 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import Head from '@docusaurus/Head'; import { motion, HTMLMotionProps } from 'framer-motion'; import type { ReactElement } from 'react'; import Layout from '@theme/Layout'; +import { useColorMode } from '@docusaurus/theme-common'; +import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; + +// Safe hook for color mode that handles SSR +function useSafeColorMode() { + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + let colorMode = 'light'; + let isDark = false; + + if (mounted && ExecutionEnvironment.canUseDOM) { + try { + const { useColorMode: useColorModeHook } = require('@docusaurus/theme-common'); + const colorModeResult = useColorModeHook(); + colorMode = colorModeResult.colorMode; + isDark = colorMode === 'dark'; + } catch (error) { + console.warn('Failed to get color mode:', error); + } + } + + return { colorMode, isDark, mounted }; +} import styles from './github-badges.module.css'; type MotionDivProps = HTMLMotionProps<"div">; @@ -10,7 +37,9 @@ type MotionTrProps = HTMLMotionProps<"tr">; import Link from '@docusaurus/Link'; -const GithubBadges = (): React.ReactElement => { +const GithubBadgesContent = (): React.ReactElement => { + const { colorMode, isDark, mounted } = useSafeColorMode(); + // Scroll to top button logic useEffect(() => { const scrollToTopBtn = document.getElementById("scrollToTop"); @@ -43,7 +72,9 @@ const GithubBadges = (): React.ReactElement => { title="GitHub Achievements - RecodeHive" description="Explore GitHub achievements and badges" > -
+
{/* Hero section */} GitHub Achievements - RecodeHive @@ -764,4 +795,8 @@ const handleScrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth" }); }; +const GithubBadges = (): React.ReactElement => { + return ; +}; + export default GithubBadges; diff --git a/src/pages/blogs/blogs.css b/src/pages/blogs/blogs.css index 2b2f860f..67feb600 100644 --- a/src/pages/blogs/blogs.css +++ b/src/pages/blogs/blogs.css @@ -39,17 +39,17 @@ --blog-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } -/* Dark Mode Variables */ +/* Dark Mode Variables - Using standardized colors */ [data-theme='dark'] { - --blog-text-primary: #f7fafc; - --blog-text-secondary: #e2e8f0; - --blog-text-muted: #a0aec0; - --blog-bg-primary: #1a202c; - --blog-bg-secondary: #2d3748; - --blog-bg-card: #2d3748; - --blog-border: #4a5568; - --blog-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); - --blog-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2); + --blog-text-primary: var(--dark-text-primary); + --blog-text-secondary: var(--dark-text-secondary); + --blog-text-muted: var(--dark-text-muted); + --blog-bg-primary: var(--dark-bg-primary); + --blog-bg-secondary: var(--dark-bg-secondary); + --blog-bg-card: var(--dark-card-bg); + --blog-border: var(--dark-border); + --blog-shadow: var(--dark-shadow); + --blog-shadow-lg: var(--dark-shadow-lg); --blog-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } diff --git a/src/pages/broadcasts/index.css b/src/pages/broadcasts/index.css index ed9efaf3..a320cbaa 100644 --- a/src/pages/broadcasts/index.css +++ b/src/pages/broadcasts/index.css @@ -11,11 +11,19 @@ text-align: center; } +[data-theme='dark'] .podcast-subtitle { + color: var(--dark-text-secondary); +} + h1 { text-align: center; margin-bottom: 1rem; } +[data-theme='dark'] h1 { + color: var(--dark-text-primary); +} + .podcast-grid { display: grid; grid-template-columns: repeat(3, 1fr); @@ -32,10 +40,19 @@ h1 { cursor: pointer; } +[data-theme='dark'] .podcast-card { + background: var(--dark-card-bg); + box-shadow: var(--dark-shadow); +} + .podcast-card:hover { transform: translateY(-4px); } +[data-theme='dark'] .podcast-card:hover { + box-shadow: var(--dark-shadow-lg); +} + .podcast-content { height: 100%; } @@ -52,6 +69,10 @@ h1 { color: #333; } +[data-theme='dark'] .podcast-info h3 { + color: var(--dark-text-primary); +} + .podcast-description { font-size: 0.9rem; color: #666; @@ -66,6 +87,10 @@ h1 { text-overflow: ellipsis; } +[data-theme='dark'] .podcast-description { + color: var(--dark-text-secondary); +} + .podcast-publisher { font-size: 0.8rem; color: #888; @@ -73,6 +98,10 @@ h1 { font-style: italic; } +[data-theme='dark'] .podcast-publisher { + color: var(--dark-text-muted); +} + .podcast-embed { height: 100%; border-radius: 0 0 12px 12px; @@ -105,16 +134,31 @@ h1 { transition: all 0.2s ease; } +[data-theme='dark'] .pagination-button { + background: var(--dark-bg-secondary); + border-color: var(--dark-border); + color: var(--dark-text-primary); +} + .pagination-button:hover { background: #f0f0f0; } +[data-theme='dark'] .pagination-button:hover { + background: var(--dark-card-hover-bg); +} + .pagination-button.active { background: #0066cc; color: white; border-color: #0066cc; } +[data-theme='dark'] .pagination-button.active { + background: var(--ifm-color-primary); + border-color: var(--ifm-color-primary); +} + @media (max-width: 968px) { .podcast-grid { grid-template-columns: repeat(2, 1fr); @@ -200,6 +244,10 @@ h1 { text-align: center; } +[data-theme='dark'] .video-subtitle { + color: var(--dark-text-secondary); +} + .video-section { margin-bottom: 3rem; } @@ -228,10 +276,19 @@ h1 { height: 100%; } +[data-theme='dark'] .video-card { + background: var(--dark-card-bg); + box-shadow: var(--dark-shadow); +} + .video-card:hover { transform: translateY(-4px); } +[data-theme='dark'] .video-card:hover { + box-shadow: var(--dark-shadow-lg); +} + .video-content { height: 100%; display: flex; diff --git a/src/pages/broadcasts/video.css b/src/pages/broadcasts/video.css index 32ebefef..78209cb8 100644 --- a/src/pages/broadcasts/video.css +++ b/src/pages/broadcasts/video.css @@ -15,6 +15,10 @@ font-weight: 300; } +[data-theme='dark'] .video-subtitle { + color: var(--dark-text-secondary); +} + .video-section { margin-bottom: 4rem; position: relative; @@ -61,11 +65,21 @@ isolation: isolate; } +[data-theme='dark'] .video-card { + background: var(--dark-card-bg); + border-color: var(--dark-border); + box-shadow: var(--dark-shadow); +} + .video-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } +[data-theme='dark'] .video-card:hover { + box-shadow: var(--dark-shadow-lg); +} + .video-content { height: 100%; display: flex; @@ -80,6 +94,11 @@ border: 1px solid #e9ecef; } +[data-theme='dark'] .video-info { + background: var(--dark-bg-secondary); + border-color: var(--dark-border); +} + .video-title { margin: 0 0 0.75rem 0; font-size: 1.15rem; @@ -94,6 +113,10 @@ letter-spacing: -0.01em; } +[data-theme='dark'] .video-title { + color: var(--dark-text-primary); +} + .video-type { font-size: 0.9rem; color: #6c757d; /* Neutral gray color */ @@ -103,6 +126,10 @@ margin-top: 0.5rem; } +[data-theme='dark'] .video-type { + color: var(--dark-text-secondary); +} + /* Force the video type tags to use neutral colors */ .video-card .video-type span, .video-card .video-type { @@ -110,6 +137,12 @@ color: #495057 !important; } +[data-theme='dark'] .video-card .video-type span, +[data-theme='dark'] .video-card .video-type { + background: var(--dark-bg-tertiary) !important; + color: var(--dark-text-secondary) !important; +} + .video-type span { display: inline-flex; align-items: center; @@ -121,12 +154,23 @@ border: 1px solid #e9ecef !important; /* Force subtle border */ } +[data-theme='dark'] .video-type span { + background: var(--dark-bg-tertiary) !important; + color: var(--dark-text-secondary) !important; + border-color: var(--dark-border) !important; +} + /* Ensure the emoji and text inside the span are also not green */ .video-type span *, .video-type span { color: #495057 !important; } +[data-theme='dark'] .video-type span *, +[data-theme='dark'] .video-type span { + color: var(--dark-text-secondary) !important; +} + .video-thumbnail { position: relative; width: 600px; /* Set desired width */ @@ -239,11 +283,22 @@ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } +[data-theme='dark'] .tab-button { + background: var(--dark-bg-secondary); + color: var(--dark-text-primary); + border-color: var(--dark-border); + box-shadow: var(--dark-shadow); +} + .tab-button:hover { background: var(--ifm-color-primary-lighter); color: var(--ifm-color-white); } +[data-theme='dark'] .tab-button:hover { + background: var(--dark-card-hover-bg); +} + .tab-button.active { background: var(--ifm-color-primary); color: var(--ifm-color-white); diff --git a/src/pages/careers/index.tsx b/src/pages/careers/index.tsx index 3cd4e624..75e255d6 100644 --- a/src/pages/careers/index.tsx +++ b/src/pages/careers/index.tsx @@ -3,6 +3,33 @@ import Layout from "@theme/Layout"; import Head from "@docusaurus/Head"; import { motion } from "framer-motion"; import Link from "@docusaurus/Link"; +import { useColorMode } from '@docusaurus/theme-common'; +import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; + +// Safe hook for color mode that handles SSR +function useSafeColorMode() { + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + let colorMode = 'light'; + let isDark = false; + + if (mounted && ExecutionEnvironment.canUseDOM) { + try { + const { useColorMode: useColorModeHook } = require('@docusaurus/theme-common'); + const colorModeResult = useColorModeHook(); + colorMode = colorModeResult.colorMode; + isDark = colorMode === 'dark'; + } catch (error) { + console.warn('Failed to get color mode:', error); + } + } + + return { colorMode, isDark, mounted }; +} // Animation variants for consistent animations const fadeIn = { @@ -123,7 +150,8 @@ const testimonials = [ } ]; -export default function CareersPage() { +function CareersContent() { + const { colorMode, isDark, mounted } = useSafeColorMode(); const [activeTestimonial, setActiveTestimonial] = useState(0); useEffect(() => { @@ -146,7 +174,11 @@ export default function CareersPage() { /> -
+
{/* Hero Section */}
-

+

Our Culture & Values

-

+

We're building more than just a company—we're creating a community of learners, innovators, and leaders.

@@ -211,16 +247,22 @@ export default function CareersPage() { {cultureValues.map((value, index) => (
🚀
-

+

{value.title}

-

+

{value.description}

@@ -429,4 +471,8 @@ export default function CareersPage() {
); +} + +export default function CareersPage() { + return ; } \ No newline at end of file diff --git a/src/pages/community/community.css b/src/pages/community/community.css index fe3241d6..d722d320 100644 --- a/src/pages/community/community.css +++ b/src/pages/community/community.css @@ -6,8 +6,9 @@ transition: background-color 0.3s ease; } +/* Community page should maintain its own background regardless of theme */ [data-theme='dark'] .community-page { - background: #121212; + background: transparent; } /* CSS Custom Properties for better browser support */ @@ -21,11 +22,11 @@ } [data-theme='dark'] { - --text-primary: #ffffff; - --text-secondary: #edf2f7; - --bg-primary: #1a1a1a; - --bg-secondary: #121212; - --border-color: #2d2d2d; + --text-primary: var(--dark-text-primary); + --text-secondary: var(--dark-text-secondary); + --bg-primary: var(--dark-bg-secondary); + --bg-secondary: var(--dark-bg-primary); + --border-color: var(--dark-border); } /* Hero Section */ diff --git a/src/pages/courses/courses.css b/src/pages/courses/courses.css new file mode 100644 index 00000000..49987b84 --- /dev/null +++ b/src/pages/courses/courses.css @@ -0,0 +1,1224 @@ +/* Courses Page Modern Responsive Styles */ + +/* CSS Custom Properties for Consistent Design */ +:root { + /* Spacing System (8px grid) */ + --courses-spacing-xs: 0.5rem; /* 8px */ + --courses-spacing-sm: 1rem; /* 16px */ + --courses-spacing-md: 1.5rem; /* 24px */ + --courses-spacing-lg: 2rem; /* 32px */ + --courses-spacing-xl: 3rem; /* 48px */ + --courses-spacing-2xl: 4rem; /* 64px */ + --courses-spacing-3xl: 6rem; /* 96px */ + + /* Border Radius System */ + --courses-radius-sm: 0.5rem; /* 8px */ + --courses-radius-md: 0.75rem; /* 12px */ + --courses-radius-lg: 1rem; /* 16px */ + --courses-radius-xl: 1.5rem; /* 24px */ + --courses-radius-2xl: 2rem; /* 32px */ + + /* Typography Scale */ + --courses-text-xs: 0.75rem; /* 12px */ + --courses-text-sm: 0.875rem; /* 14px */ + --courses-text-base: 1rem; /* 16px */ + --courses-text-lg: 1.125rem; /* 18px */ + --courses-text-xl: 1.25rem; /* 20px */ + --courses-text-2xl: 1.5rem; /* 24px */ + --courses-text-3xl: 1.875rem; /* 30px */ + --courses-text-4xl: 2.25rem; /* 36px */ + --courses-text-5xl: 3rem; /* 48px */ + --courses-text-6xl: 3.75rem; /* 60px */ + + /* Transitions */ + --courses-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); + --courses-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + --courses-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); + + /* Light Theme Colors */ + --courses-bg-primary: #ffffff; + --courses-bg-secondary: #f8fafc; + --courses-bg-tertiary: #f1f5f9; + --courses-text-primary: #0f172a; + --courses-text-secondary: #475569; + --courses-text-muted: #64748b; + --courses-border: #e2e8f0; + --courses-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); + --courses-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --courses-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); +} + +/* Dark Theme Colors */ +[data-theme='dark'] { + --courses-bg-primary: var(--dark-bg-primary); + --courses-bg-secondary: var(--dark-bg-secondary); + --courses-bg-tertiary: var(--dark-bg-tertiary); + --courses-text-primary: var(--dark-text-primary); + --courses-text-secondary: var(--dark-text-secondary); + --courses-text-muted: var(--dark-text-muted); + --courses-border: var(--dark-border); + --courses-shadow: var(--dark-shadow); + --courses-shadow-lg: var(--dark-shadow-lg); + --courses-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5); +} + +/* Main page container */ +.courses-page { + background-color: var(--courses-bg-primary); + color: var(--courses-text-primary); + transition: var(--courses-transition-slow); + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + line-height: 1.6; +} + +/* Section Layouts */ +.courses-hero { + background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%); + border-color: var(--courses-border); + position: relative; + overflow: hidden; +} + +.courses-hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 70%); + pointer-events: none; +} + +.courses-section { + background-color: var(--courses-bg-primary); + color: var(--courses-text-primary); + border-color: var(--courses-border); + transition: var(--courses-transition-slow); +} + +.courses-stats-section { + background-color: var(--courses-bg-secondary); + border-color: var(--courses-border); + position: relative; +} + +.courses-stats-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(45deg, rgba(99, 102, 241, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%); + pointer-events: none; +} + +.courses-faq-section { + background-color: var(--courses-bg-secondary); + border-color: var(--courses-border); +} + +/* Container and Layout Utilities */ +.courses-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--courses-spacing-md); +} + +.courses-container-wide { + max-width: 1400px; + margin: 0 auto; + padding: 0 var(--courses-spacing-md); +} + +.courses-grid { + display: grid; + gap: var(--courses-spacing-lg); +} + +.courses-grid-2 { + grid-template-columns: repeat(2, 1fr); +} + +.courses-grid-3 { + grid-template-columns: repeat(3, 1fr); +} + +.courses-grid-4 { + grid-template-columns: repeat(4, 1fr); +} + +.courses-flex { + display: flex; + gap: var(--courses-spacing-md); +} + +.courses-flex-center { + display: flex; + align-items: center; + justify-content: center; +} + +.courses-flex-between { + display: flex; + align-items: center; + justify-content: space-between; +} + +/* Card Components */ +.courses-card { + background-color: var(--courses-bg-primary); + border: 1px solid var(--courses-border); + border-radius: var(--courses-radius-xl); + padding: var(--courses-spacing-lg); + color: var(--courses-text-primary); + box-shadow: var(--courses-shadow); + transition: var(--courses-transition); + position: relative; + overflow: hidden; +} + +.courses-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(99, 102, 241, 0.02) 100%); + opacity: 0; + transition: var(--courses-transition); + pointer-events: none; +} + +.courses-card:hover { + transform: translateY(-4px); + box-shadow: var(--courses-shadow-xl); + border-color: rgba(59, 130, 246, 0.3); +} + +.courses-card:hover::before { + opacity: 1; +} + +.courses-stat-card { + background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%); + border: 1px solid var(--courses-border); + border-radius: var(--courses-radius-xl); + padding: var(--courses-spacing-xl); + color: var(--courses-text-primary); + box-shadow: var(--courses-shadow-lg); + transition: var(--courses-transition); + position: relative; + overflow: hidden; +} + +.courses-stat-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%); + opacity: 0; + transition: var(--courses-transition); + pointer-events: none; +} + +.courses-stat-card:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: var(--courses-shadow-xl); + border-color: rgba(59, 130, 246, 0.4); +} + +.courses-stat-card:hover::before { + opacity: 1; +} + +/* Course Timeline Cards */ +.courses-timeline-card { + background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%); + border: 1px solid var(--courses-border); + border-radius: var(--courses-radius-xl); + padding: var(--courses-spacing-lg); + transition: var(--courses-transition); + position: relative; + overflow: hidden; + backdrop-filter: blur(10px); +} + +.courses-timeline-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(99, 102, 241, 0.03) 100%); + opacity: 0; + transition: var(--courses-transition); + pointer-events: none; +} + +.courses-timeline-card:hover { + transform: translateY(-6px); + box-shadow: var(--courses-shadow-xl); + border-color: rgba(59, 130, 246, 0.4); +} + +.courses-timeline-card:hover::before { + opacity: 1; +} + +/* Button Components */ +.courses-button { + background-color: var(--courses-bg-tertiary); + color: var(--courses-text-primary); + border: 1px solid var(--courses-border); + border-radius: var(--courses-radius-lg); + padding: var(--courses-spacing-sm) var(--courses-spacing-lg); + font-weight: 600; + font-size: var(--courses-text-base); + transition: var(--courses-transition); + cursor: pointer; + position: relative; + overflow: hidden; + backdrop-filter: blur(10px); +} + +.courses-button::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + transition: var(--courses-transition); +} + +.courses-button:hover { + transform: translateY(-2px); + box-shadow: var(--courses-shadow-lg); + border-color: rgba(59, 130, 246, 0.5); +} + +.courses-button:hover::before { + left: 100%; +} + +.courses-button-primary { + background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); + color: white; + border: none; + box-shadow: var(--courses-shadow-lg); +} + +.courses-button-primary:hover { + background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%); + transform: translateY(-3px); + box-shadow: var(--courses-shadow-xl); +} + +.courses-button-secondary { + background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%); + color: var(--courses-text-primary); + border: 1px solid var(--courses-border); + backdrop-filter: blur(10px); +} + +.courses-button-secondary:hover { + border-color: rgba(59, 130, 246, 0.5); + background: linear-gradient(135deg, var(--courses-bg-secondary) 0%, var(--courses-bg-tertiary) 100%); +} + +.courses-button-ghost { + background: transparent; + color: var(--courses-text-secondary); + border: 1px solid var(--courses-border); +} + +.courses-button-ghost:hover { + background-color: var(--courses-bg-secondary); + color: var(--courses-text-primary); + border-color: rgba(59, 130, 246, 0.3); +} + +/* Icon Buttons */ +.courses-icon-button { + width: 48px; + height: 48px; + border-radius: 50%; + background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%); + border: 1px solid var(--courses-border); + display: flex; + align-items: center; + justify-content: center; + transition: var(--courses-transition); + cursor: pointer; + backdrop-filter: blur(10px); +} + +.courses-icon-button:hover { + transform: scale(1.1); + box-shadow: var(--courses-shadow-lg); + border-color: rgba(59, 130, 246, 0.5); +} + +/* Modal Components */ +.courses-modal { + background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%); + color: var(--courses-text-primary); + border: 1px solid var(--courses-border); + border-radius: var(--courses-radius-xl); + box-shadow: var(--courses-shadow-xl); + backdrop-filter: blur(20px); + position: relative; + overflow: hidden; +} + +.courses-modal::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%); + pointer-events: none; +} + +/* Text Styles */ +.courses-text-primary { + color: var(--courses-text-primary); +} + +.courses-text-secondary { + color: var(--courses-text-secondary); +} + +.courses-text-muted { + color: var(--courses-text-muted); +} + +.courses-text-gradient { + background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + font-weight: 700; +} + +.courses-heading-1 { + font-size: var(--courses-text-6xl); + font-weight: 800; + line-height: 1.1; + letter-spacing: -0.025em; + text-align: center; +} + +.courses-heading-2 { + font-size: var(--courses-text-5xl); + font-weight: 700; + line-height: 1.2; + letter-spacing: -0.025em; +} + +.courses-heading-3 { + font-size: var(--courses-text-4xl); + font-weight: 600; + line-height: 1.3; +} + +.courses-heading-4 { + font-size: var(--courses-text-3xl); + font-weight: 600; + line-height: 1.4; +} + +.courses-body-large { + font-size: var(--courses-text-xl); + line-height: 1.6; + text-align: center; +} + +.courses-body { + font-size: var(--courses-text-base); + line-height: 1.6; +} + +.courses-body-small { + font-size: var(--courses-text-sm); + line-height: 1.5; +} + +/* Topic Tags */ +.courses-topic-tag { + background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%); + color: var(--courses-text-primary); + border: 1px solid var(--courses-border); + border-radius: var(--courses-radius-lg); + padding: var(--courses-spacing-xs) var(--courses-spacing-md); + font-size: var(--courses-text-sm); + font-weight: 500; + transition: var(--courses-transition); + cursor: pointer; + position: relative; + overflow: hidden; + backdrop-filter: blur(10px); +} + +.courses-topic-tag::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%); + opacity: 0; + transition: var(--courses-transition); + pointer-events: none; +} + +.courses-topic-tag:hover { + transform: translateY(-2px); + box-shadow: var(--courses-shadow-lg); + border-color: rgba(59, 130, 246, 0.5); + color: #3b82f6; +} + +.courses-topic-tag:hover::before { + opacity: 1; +} + +/* Special Topic Tag Variants */ +.courses-topic-tag-featured { + background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); + color: white; + border: none; + box-shadow: var(--courses-shadow); +} + +.courses-topic-tag-featured:hover { + background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%); + transform: translateY(-3px); + box-shadow: var(--courses-shadow-lg); +} + +.courses-topic-tag-new { + background: linear-gradient(135deg, #10b981 0%, #059669 100%); + color: white; + border: none; + position: relative; +} + +.courses-topic-tag-new::after { + content: 'NEW'; + position: absolute; + top: -8px; + right: -8px; + background: #ef4444; + color: white; + font-size: 10px; + padding: 2px 6px; + border-radius: 8px; + font-weight: 700; +} + +/* FAQ Components */ +.courses-faq-item { + background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%); + border: 1px solid var(--courses-border); + border-radius: var(--courses-radius-xl); + overflow: hidden; + transition: var(--courses-transition); + backdrop-filter: blur(10px); +} + +.courses-faq-item:hover { + box-shadow: var(--courses-shadow-lg); + border-color: rgba(59, 130, 246, 0.3); +} + +.courses-faq-button { + background: transparent; + color: var(--courses-text-primary); + border: none; + width: 100%; + text-align: left; + padding: var(--courses-spacing-lg); + font-weight: 600; + font-size: var(--courses-text-lg); + transition: var(--courses-transition); + cursor: pointer; +} + +.courses-faq-button:hover { + background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%); +} + +.courses-faq-answer { + background: linear-gradient(135deg, var(--courses-bg-secondary) 0%, var(--courses-bg-tertiary) 100%); + color: var(--courses-text-secondary); + padding: var(--courses-spacing-lg); + border-top: 1px solid var(--courses-border); +} + +/* Project Cards */ +.courses-project-card { + background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%); + border: 1px solid var(--courses-border); + border-radius: var(--courses-radius-xl); + color: var(--courses-text-primary); + transition: var(--courses-transition); + overflow: hidden; + position: relative; + backdrop-filter: blur(10px); +} + +.courses-project-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(99, 102, 241, 0.03) 100%); + opacity: 0; + transition: var(--courses-transition); + pointer-events: none; +} + +.courses-project-card:hover { + transform: translateY(-6px); + box-shadow: var(--courses-shadow-xl); + border-color: rgba(59, 130, 246, 0.4); +} + +.courses-project-card:hover::before { + opacity: 1; +} + +/* Navigation Buttons */ +.courses-nav-button { + background: linear-gradient(135deg, var(--courses-bg-primary) 0%, var(--courses-bg-secondary) 100%); + color: var(--courses-text-primary); + border: 1px solid var(--courses-border); + width: 48px; + height: 48px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: var(--courses-transition); + cursor: pointer; + backdrop-filter: blur(10px); + font-weight: 600; + font-size: var(--courses-text-lg); +} + +.courses-nav-button:hover { + background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); + color: white; + transform: scale(1.1); + box-shadow: var(--courses-shadow-lg); + border-color: transparent; +} + +.courses-nav-button:active { + transform: scale(0.95); +} + +/* Carousel Indicators */ +.courses-carousel-indicators { + display: flex; + justify-content: center; + gap: var(--courses-spacing-xs); + margin-top: var(--courses-spacing-md); +} + +.courses-carousel-indicator { + width: 12px; + height: 12px; + border-radius: 50%; + background-color: var(--courses-border); + transition: var(--courses-transition); + cursor: pointer; +} + +.courses-carousel-indicator.active { + background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); + transform: scale(1.2); + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); +} + +.courses-carousel-indicator:hover { + background-color: var(--courses-text-muted); + transform: scale(1.1); +} + +/* Legacy Theme Overrides - Simplified */ +.courses-gradient-text { + background: linear-gradient(135deg, var(--courses-text-primary) 0%, #3b82f6 50%, #6366f1 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.courses-bg-overlay { + background: radial-gradient(circle, rgba(59, 130, 246, 0.1), transparent 70%); +} + +/* Utility Classes */ +.courses-hide-scrollbar::-webkit-scrollbar { + display: none; +} + +.courses-hide-scrollbar { + -ms-overflow-style: none; + scrollbar-width: none; +} + +.courses-backdrop-blur { + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +.courses-glass { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); +} + +[data-theme='dark'] .courses-glass { + background: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +/* Animation Utilities */ +.courses-fade-in { + animation: coursesFadeIn 0.6s ease-out forwards; +} + +.courses-slide-up { + animation: coursesSlideUp 0.6s ease-out forwards; +} + +.courses-scale-in { + animation: coursesScaleIn 0.4s ease-out forwards; +} + +@keyframes coursesFadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes coursesSlideUp { + from { + opacity: 0; + transform: translateY(40px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes coursesScaleIn { + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* Floating Animation */ +.courses-float { + animation: coursesFloat 6s ease-in-out infinite; +} + +@keyframes coursesFloat { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-10px); + } +} + +/* Pulse Animation */ +.courses-pulse { + animation: coursesPulse 2s infinite; +} + +@keyframes coursesPulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } + 100% { + transform: scale(1); + } +} + +/* Gradient Animation */ +.courses-gradient-animate { + background-size: 200% 200%; + animation: coursesGradient 4s ease infinite; +} + +@keyframes coursesGradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +/* Responsive Design System */ + +/* Extra Large Desktop (1400px+) */ +@media (min-width: 1400px) { + .courses-container { + max-width: 1320px; + } + + .courses-container-wide { + max-width: 1600px; + } + + .courses-heading-1 { + font-size: 4.5rem; + } + + .courses-heading-2 { + font-size: 3.5rem; + } + + .courses-grid-4 { + grid-template-columns: repeat(4, 1fr); + } +} + +/* Large Desktop (1200px - 1399px) */ +@media (max-width: 1399px) and (min-width: 1200px) { + .courses-container { + max-width: 1140px; + } + + .courses-heading-1 { + font-size: 4rem; + } + + .courses-heading-2 { + font-size: 3rem; + } + + .courses-grid-4 { + grid-template-columns: repeat(3, 1fr); + } + + .courses-spacing-3xl { + --courses-spacing-3xl: 5rem; + } +} + +/* Desktop (992px - 1199px) */ +@media (max-width: 1199px) and (min-width: 992px) { + .courses-container { + max-width: 960px; + } + + .courses-heading-1 { + font-size: 3.5rem; + } + + .courses-heading-2 { + font-size: 2.5rem; + } + + .courses-grid-4, + .courses-grid-3 { + grid-template-columns: repeat(2, 1fr); + } + + .courses-spacing-3xl { + --courses-spacing-3xl: 4rem; + } + + .courses-card { + padding: var(--courses-spacing-md); + } +} + +/* Tablet (768px - 991px) */ +@media (max-width: 991px) and (min-width: 768px) { + .courses-container { + max-width: 720px; + padding: 0 var(--courses-spacing-lg); + } + + .courses-heading-1 { + font-size: 3rem; + } + + .courses-heading-2 { + font-size: 2.25rem; + text-align: center; + } + + .courses-grid-4, + .courses-grid-3, + .courses-grid-2 { + grid-template-columns: repeat(2, 1fr); + gap: var(--courses-spacing-md); + } + + .courses-flex { + flex-direction: column; + gap: var(--courses-spacing-md); + } + + .courses-spacing-3xl { + --courses-spacing-3xl: 3rem; + } + + .courses-spacing-2xl { + --courses-spacing-2xl: 2.5rem; + } + + /* Hero section adjustments */ + .courses-hero { + padding: var(--courses-spacing-2xl) var(--courses-spacing-md); + } + + /* Button adjustments */ + .courses-button { + width: 100%; + justify-content: center; + } + + /* Navigation buttons */ + .courses-nav-button { + width: 44px; + height: 44px; + } +} + +/* Mobile Large (576px - 767px) */ +@media (max-width: 767px) and (min-width: 576px) { + .courses-container { + max-width: 540px; + padding: 0 var(--courses-spacing-md); + } + + .courses-heading-1 { + font-size: 2.5rem; + line-height: 1.2; + } + + .courses-heading-2 { + font-size: 2rem; + text-align: center; + line-height: 1.3; + } + + .courses-heading-3 { + font-size: 1.75rem; + text-align: center; + } + + .courses-grid-4, + .courses-grid-3, + .courses-grid-2 { + grid-template-columns: 1fr; + gap: var(--courses-spacing-md); + } + + .courses-spacing-3xl { + --courses-spacing-3xl: 2.5rem; + } + + .courses-spacing-2xl { + --courses-spacing-2xl: 2rem; + } + + .courses-spacing-xl { + --courses-spacing-xl: 1.5rem; + } + + /* Hero section */ + .courses-hero { + padding: var(--courses-spacing-xl) var(--courses-spacing-md); + text-align: center; + } + + /* Cards */ + .courses-card, + .courses-stat-card, + .courses-timeline-card { + padding: var(--courses-spacing-md); + } + + /* Buttons */ + .courses-button { + width: 100%; + padding: var(--courses-spacing-md) var(--courses-spacing-lg); + font-size: var(--courses-text-base); + } + + .courses-button-primary, + .courses-button-secondary { + margin-bottom: var(--courses-spacing-sm); + } + + /* Navigation */ + .courses-nav-button { + width: 40px; + height: 40px; + font-size: var(--courses-text-base); + } + + /* Topic tags */ + .courses-topic-tag { + font-size: var(--courses-text-xs); + padding: var(--courses-spacing-xs) var(--courses-spacing-sm); + } + + /* FAQ */ + .courses-faq-button { + padding: var(--courses-spacing-md); + font-size: var(--courses-text-base); + } + + .courses-faq-answer { + padding: var(--courses-spacing-md); + font-size: var(--courses-text-sm); + } +} + +/* Mobile Small (320px - 575px) */ +@media (max-width: 575px) { + .courses-container { + padding: 0 var(--courses-spacing-sm); + } + + .courses-heading-1 { + font-size: 2rem; + line-height: 1.1; + margin-bottom: var(--courses-spacing-md); + } + + .courses-heading-2 { + font-size: 1.75rem; + line-height: 1.2; + margin-bottom: var(--courses-spacing-md); + } + + .courses-heading-3 { + font-size: 1.5rem; + margin-bottom: var(--courses-spacing-sm); + } + + .courses-heading-4 { + font-size: 1.25rem; + margin-bottom: var(--courses-spacing-sm); + } + + .courses-spacing-3xl { + --courses-spacing-3xl: 2rem; + } + + .courses-spacing-2xl { + --courses-spacing-2xl: 1.5rem; + } + + .courses-spacing-xl { + --courses-spacing-xl: 1rem; + } + + /* Hero section */ + .courses-hero { + padding: var(--courses-spacing-lg) var(--courses-spacing-sm); + min-height: auto; + } + + /* Grid adjustments */ + .courses-grid { + gap: var(--courses-spacing-sm); + } + + /* Cards */ + .courses-card, + .courses-stat-card, + .courses-timeline-card, + .courses-project-card { + padding: var(--courses-spacing-sm); + border-radius: var(--courses-radius-lg); + } + + /* Buttons */ + .courses-button { + padding: var(--courses-spacing-sm) var(--courses-spacing-md); + font-size: var(--courses-text-sm); + border-radius: var(--courses-radius-md); + } + + .courses-icon-button, + .courses-nav-button { + width: 36px; + height: 36px; + font-size: var(--courses-text-sm); + } + + /* Topic tags */ + .courses-topic-tag { + font-size: 11px; + padding: 4px var(--courses-spacing-xs); + border-radius: var(--courses-radius-sm); + } + + /* Modal */ + .courses-modal { + margin: var(--courses-spacing-sm); + padding: var(--courses-spacing-md); + border-radius: var(--courses-radius-lg); + } + + /* FAQ */ + .courses-faq-item { + border-radius: var(--courses-radius-lg); + } + + .courses-faq-button { + padding: var(--courses-spacing-sm); + font-size: var(--courses-text-sm); + } + + .courses-faq-answer { + padding: var(--courses-spacing-sm); + font-size: var(--courses-text-xs); + line-height: 1.5; + } + + /* Carousel indicators */ + .courses-carousel-indicator { + width: 8px; + height: 8px; + } + + /* Text adjustments */ + .courses-body-large { + font-size: var(--courses-text-base); + text-align: center; + } + + .courses-body { + font-size: var(--courses-text-sm); + } + + .courses-body-small { + font-size: var(--courses-text-xs); + } +} + +/* Extra Small Mobile (max-width: 320px) */ +@media (max-width: 320px) { + .courses-container { + padding: 0 var(--courses-spacing-xs); + } + + .courses-heading-1 { + font-size: 1.75rem; + } + + .courses-heading-2 { + font-size: 1.5rem; + } + + .courses-card, + .courses-stat-card, + .courses-timeline-card { + padding: var(--courses-spacing-xs); + } + + .courses-button { + padding: var(--courses-spacing-xs) var(--courses-spacing-sm); + font-size: var(--courses-text-xs); + } +} + +/* Print Styles */ +@media print { + .courses-page { + background: white !important; + color: black !important; + } + + .courses-nav-button, + .courses-button, + .courses-carousel-indicators { + display: none !important; + } + + .courses-card, + .courses-stat-card, + .courses-timeline-card { + break-inside: avoid; + box-shadow: none !important; + border: 1px solid #ccc !important; + } +} + +/* High Contrast Mode Support */ +@media (prefers-contrast: high) { + .courses-card, + .courses-stat-card, + .courses-timeline-card { + border-width: 2px; + } + + .courses-button { + border-width: 2px; + } + + .courses-topic-tag { + border-width: 2px; + } +} + +/* Reduced Motion Support */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + .courses-float, + .courses-pulse, + .courses-gradient-animate { + animation: none !important; + } +} diff --git a/src/pages/courses/index.tsx b/src/pages/courses/index.tsx index 62e51ea6..354fdd88 100644 --- a/src/pages/courses/index.tsx +++ b/src/pages/courses/index.tsx @@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from "react"; import Layout from "@theme/Layout"; import Head from "@docusaurus/Head"; import { motion } from "framer-motion"; +import './courses.css'; // Animation variants for consistent animations const fadeIn = { @@ -134,18 +135,12 @@ const faqs = [ { q: "Do I need to learn anything before this course starts?", a: "No prior experience is required. All fundamentals will be covered." }, ]; -export default function CoursesLanding() { +function CoursesContent() { + const [showAllTopics, setShowAllTopics] = useState(false); const [modal, setModal] = useState({ open: false, content: "" }); - const [openFaq, setOpenFaq] = useState(null); + const [openFaq, setOpenFaq] = useState(null); const [activeProjectIndex, setActiveProjectIndex] = useState(0); - const [showStickyEnroll, setShowStickyEnroll] = useState(false); - const [countdownValues, setCountdownValues] = useState({ - days: 0, - hours: 0, - minutes: 0, - seconds: 0, - }); const [animatedStats, setAnimatedStats] = useState({ Youtube: 0, LinkedIn: 0, @@ -157,37 +152,7 @@ export default function CoursesLanding() { const techTagsRef = useRef(null); const statsRef = useRef(null); - // Countdown timer effect - useEffect(() => { - // Set the countdown date to 2 days from now - const countdownDate = new Date(); - countdownDate.setDate(countdownDate.getDate() + 2); - - const updateCountdown = () => { - const now = new Date().getTime(); - const distance = countdownDate.getTime() - now; - - const days = Math.floor(distance / (1000 * 60 * 60 * 24)); - const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); - const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); - const seconds = Math.floor((distance % (1000 * 60)) / 1000); - - setCountdownValues({ - days, - hours, - minutes, - seconds - }); - }; - - // Initial update - updateCountdown(); - // Set interval to update every second - const interval = setInterval(updateCountdown, 1000); - - return () => clearInterval(interval); - }, []); // Horizontal scrolling for tech tags useEffect(() => { @@ -209,15 +174,7 @@ export default function CoursesLanding() { } }, []); - // Check scroll position for sticky enroll button - useEffect(() => { - const checkScroll = () => { - setShowStickyEnroll(window.scrollY > 500); - }; - window.addEventListener('scroll', checkScroll); - return () => window.removeEventListener('scroll', checkScroll); - }, []); // Set up automatic carousel rotation useEffect(() => { @@ -273,7 +230,7 @@ export default function CoursesLanding() { return () => observer.disconnect(); }, [isStatsVisible]); - const handleCourseClick = (course) => { + const handleCourseClick = (course: any) => { if (course.title.includes("Coming Soon")) { setModal({ open: true, content: "This course is coming soon!" }); } else { @@ -281,11 +238,11 @@ export default function CoursesLanding() { } }; - const handleAction = (type) => { + const handleAction = (type: string) => { setModal({ open: true, content: type === "enroll" ? "Enrollment flow coming soon!" : "Purchase flow coming soon!" }); }; - const scrollProjects = (dir) => { + const scrollProjects = (dir: number) => { const newIndex = activeProjectIndex + dir; if (newIndex >= 0 && newIndex < projects.length) { @@ -299,11 +256,11 @@ export default function CoursesLanding() { } }; - const goToProjectSlide = (index) => { + const goToProjectSlide = (index: number) => { setActiveProjectIndex(index); }; - const handleInfo = (info) => setModal({ open: true, content: info }); + const handleInfo = (info: string) => setModal({ open: true, content: info }); return ( @@ -319,91 +276,91 @@ export default function CoursesLanding() { -ms-overflow-style: none; scrollbar-width: none; } - + /* Custom animations */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } - + @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } - + .float-animation { animation: float 3s ease-in-out infinite; } - + .animate-slide { display: inline-block; white-space: nowrap; padding-right: 100%; } - + /* Fade-in animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } - + .animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; } - + /* Scale-in animation */ @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } - + .animate-scaleIn { animation: scaleIn 0.3s ease-out forwards; } - + /* Slide-in animation */ @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } - + .animate-slideInUp { animation: slideInUp 0.5s ease-out forwards; } - + /* Pulse animation */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } - + .animate-pulse { animation: pulse 2s infinite; } `} -
+
{/* Modal */} {modal.open && ( -
-
+
+
-
{modal.content}
+
{modal.content}
)} {/* Hero Section */} -
- - Transform Your Career
in Data Engineering -
- + - Master the art of data engineering with industry-leading courses designed for modern tech careers. - -
- - - - + + + +
{/* Tech Tags */} -
- {techTags.map((tag, idx) => ( - - {tag} - - ))} +
+
+ {techTags.map((tag, idx) => ( + + {tag} + + ))} +
- - {/* Partner Logos */} - -

Students now available at

-
- {partnerLogos.map((logo, idx) => ( - - ))} + {/* Partner Logos */} +
+

Students now available at

+
+ {partnerLogos.map((logo, idx) => ( + + ))} +
{/* Projects Carousel */} -
-
- - Explore over 14+ extensive projects - - -
- -
+
+
+
+ + Explore over 14+ extensive projects + + +
+
- {projects.map((img, idx) => ( -
- {`Project -
- ))} +
+ {projects.map((img, idx) => ( +
+ {`Project +
+ ))} +
-
- -
-
- {projects.map((_, idx) => (
- -
- - {/* Testimonials */} -
-
- - Kind Words from Our Students - -
- {testimonials.map((t, idx) => ( - handleInfo(t.review)} - > -
-
-
- {t.name} scrollProjects(1)} + > + > + +
+
+ {projects.map((_, idx) => ( +
-

{t.name}

-
- {Array.from({ length: t.stars }).map((_, i) => ( - - ★ - - ))} -
-

{t.review}

- - ))} + ))} +
+
- {/* Courses Timeline Section */} -
- - Courses Available - - - Courses Covered In the Program - -
- {/* Left column */} -
- {courses.filter((_, i) => i % 2 === 0).map((course, idx) => ( + {/* Testimonials */} +
+
+
+ + Kind Words from Our Students + +
+ {testimonials.map((t, idx) => ( handleCourseClick(course)} - initial={{ opacity: 0, x: -30 }} - whileInView={{ opacity: 1, x: 0 }} + key={idx} + className="courses-card group cursor-pointer flex flex-col items-center text-center" + initial={{ opacity: 0, y: 30 }} + whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: idx * 0.1 }} + whileHover={{ scale: 1.02 }} + onClick={() => handleInfo(t.review)} > -
+
+
{course.title} -
-
-

{course.title}

-

{course.desc}

+

{t.name}

+
+ {Array.from({ length: t.stars }).map((_, i) => ( + + ★ + + ))}
- - - +

+ {t.review} +

))}
- {/* Timeline */} -
-
- {courses.map((course, idx) => ( - +
+
+ + {/* Courses Timeline Section */} +
+
+ + Courses Available + + + Courses Covered In the Program + +
+ {/* Left column */} +
+ {courses.filter((_, i) => i % 2 === 0).map((course, idx) => ( handleCourseClick(course)} + initial={{ opacity: 0, x: -30 }} + whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} - transition={{ duration: 0.3, delay: idx * 0.1 }} + transition={{ duration: 0.5, delay: idx * 0.1 }} > -
- {course.number} +
+ {course.title} +
- {idx !== courses.length - 1 &&
} +
+

{course.title}

+

{course.desc}

+
+ + + - - ))} - handleAction("enroll")} - initial={{ opacity: 0, y: 20 }} - whileInView={{ opacity: 1, y: 0 }} - viewport={{ once: true }} - transition={{ duration: 0.5, delay: 0.8 }} - whileHover={{ y: -5 }} - whileTap={{ y: 0 }} - > - Enroll now - + ))} +
+ {/* Timeline */} +
+
+ {courses.map((course, idx) => ( + + +
+ {course.number} +
+ {idx !== courses.length - 1 &&
} + + + ))} + handleAction("enroll")} + initial={{ opacity: 0, y: 20 }} + whileInView={{ opacity: 1, y: 0 }} + viewport={{ once: true }} + transition={{ duration: 0.5, delay: 0.8 }} + whileHover={{ y: -5 }} + whileTap={{ y: 0 }} + > + Enroll now + +
+ {/* Right column */} +
+ {courses.filter((_, i) => i % 2 === 1).map((course, idx) => ( + handleCourseClick(course)} + initial={{ opacity: 0, x: 30 }} + whileInView={{ opacity: 1, x: 0 }} + viewport={{ once: true }} + transition={{ duration: 0.5, delay: idx * 0.1 }} + > +
+

{course.title}

+

{course.desc}

+
+
+ {course.title} +
+
+ + + + + ))} +
+ + {/* Mobile Enroll Button */} +
+ handleAction("enroll")} + initial={{ opacity: 0, y: 20 }} + whileInView={{ opacity: 1, y: 0 }} + viewport={{ once: true }} + transition={{ duration: 0.5, delay: 0.8 }} + whileHover={{ y: -3 }} + whileTap={{ y: 0 }} + > + Enroll now + +
- {/* Right column */} -
- {courses.filter((_, i) => i % 2 === 1).map((course, idx) => ( +
+
+ + {/* Project Reviews Section */} +
+
+ + Project reviews from students + +
+ {projectReviews.map((review, idx) => ( handleCourseClick(course)} - initial={{ opacity: 0, x: 30 }} - whileInView={{ opacity: 1, x: 0 }} + key={idx} + className="courses-card flex flex-col items-center text-center cursor-pointer group" + initial={{ opacity: 0, y: 30 }} + whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: idx * 0.1 }} + whileHover={{ scale: 1.02 }} + onClick={() => handleInfo(review.review)} > -
-

{course.title}

-

{course.desc}

-
-
+
+
{course.title} -
- - - +

{review.name}

+

+ {review.review} +

))}
- {/* Project Reviews Section */} -
- - Project reviews from students - -
- {projectReviews.map((review, idx) => ( - handleInfo(review.review)} - > - {review.name} -

{review.name}

-

{review.review}

- - ))} -
-
- {/* Topics Tag Cloud & Community Stats */} -
- - 100+ topics taught... - - - {(showAllTopics ? topics : topics.slice(0, 20)).map((topic, idx) => ( - - {topic} - - ))} - - - - + 100+ topics taught... + + + {(showAllTopics ? topics : topics.slice(0, 20)).map((topic, idx) => ( + + {topic} + + ))} + + + + +
{/* Community Stats */} -
+
{stats.map((stat, idx) => ( -
-
- + {isStatsVisible ? animatedStats[stat.label] : 0} - {stat.suffix} + {stat.suffix} +
+
+ {stat.label}
-
{stat.label}
-
+
{/* FAQ Section */} -
- - Commonly asked questions - -
- {faqs.map((faq, idx) => ( - - -
-
- {faq.a} + {faq.q} + + + + + +
+
+ {faq.a} +
-
- - ))} + + ))} +
); -} \ No newline at end of file +} + +export default function CoursesLanding() { + return ; +} \ No newline at end of file diff --git a/src/pages/get-started/index.tsx b/src/pages/get-started/index.tsx index f7704dc0..873f7f07 100644 --- a/src/pages/get-started/index.tsx +++ b/src/pages/get-started/index.tsx @@ -4,6 +4,33 @@ import Link from "@docusaurus/Link"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import { motion, useAnimation, useInView } from "framer-motion"; import Head from '@docusaurus/Head'; +import { useColorMode } from '@docusaurus/theme-common'; +import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; + +// Safe hook for color mode that handles SSR +function useSafeColorMode() { + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + let colorMode = 'light'; + let isDark = false; + + if (mounted && ExecutionEnvironment.canUseDOM) { + try { + const { useColorMode: useColorModeHook } = require('@docusaurus/theme-common'); + const colorModeResult = useColorModeHook(); + colorMode = colorModeResult.colorMode; + isDark = colorMode === 'dark'; + } catch (error) { + console.warn('Failed to get color mode:', error); + } + } + + return { colorMode, isDark, mounted }; +} import styles from "./styles.module.css"; // Type definitions @@ -606,8 +633,9 @@ const LearningPath = ({ ); }; -export default function GetStarted() { +function GetStartedContent() { const { siteConfig } = useDocusaurusContext(); + const { colorMode, isDark, mounted } = useSafeColorMode(); type CompletedPaths = Record; const [completedPaths, setCompletedPaths] = useState(() => { @@ -661,7 +689,9 @@ export default function GetStarted() { -
+
{/* Features Section */}
@@ -856,3 +886,7 @@ export default function GetStarted() { ); } + +export default function GetStarted() { + return ; +} diff --git a/src/pages/get-started/styles.module.css b/src/pages/get-started/styles.module.css index fe037d37..22ab02e9 100644 --- a/src/pages/get-started/styles.module.css +++ b/src/pages/get-started/styles.module.css @@ -1,4 +1,55 @@ /* Base styles - Mobile First */ + +/* Dark theme support */ +[data-theme='dark'] .features { + background: var(--dark-bg-primary); + color: var(--dark-text-primary); +} + +[data-theme='dark'] .sectionHeader h2 { + color: var(--dark-text-primary); +} + +[data-theme='dark'] .sectionHeader p { + color: var(--dark-text-secondary); +} + +[data-theme='dark'] .featuresGrid { + background: var(--dark-bg-primary); +} + +[data-theme='dark'] .feature { + background: var(--dark-bg-secondary); + border-color: var(--dark-border); + color: var(--dark-text-primary); +} + +[data-theme='dark'] .feature:hover { + background: var(--dark-card-hover-bg); + box-shadow: var(--dark-shadow-lg); +} + +[data-theme='dark'] .statsSection { + background: var(--dark-bg-secondary); + color: var(--dark-text-primary); +} + +[data-theme='dark'] .statCard { + background: var(--dark-bg-tertiary); + color: var(--dark-text-primary); + border-color: var(--dark-border); +} + +[data-theme='dark'] .learningPath { + background: var(--dark-bg-secondary); + border-color: var(--dark-border); + color: var(--dark-text-primary); +} + +[data-theme='dark'] .learningPath:hover { + background: var(--dark-card-hover-bg); + box-shadow: var(--dark-shadow-lg); +} .buttons { display: flex; justify-content: center; diff --git a/src/pages/our-sponsors/Sponsors.css b/src/pages/our-sponsors/Sponsors.css index 77e6cf49..4c8e2b72 100644 --- a/src/pages/our-sponsors/Sponsors.css +++ b/src/pages/our-sponsors/Sponsors.css @@ -4,6 +4,11 @@ margin: 0 auto; } +[data-theme='dark'] .sponsor-page { + background: var(--dark-bg-primary); + color: var(--dark-text-primary); +} + .sponsor-page .sponsor-header { text-align: center; margin-bottom: 2rem; @@ -28,6 +33,10 @@ padding-bottom: 0.5rem; } +[data-theme='dark'] .tabs { + border-bottom-color: var(--dark-border); +} + .tab-button { padding: 0.75rem 1.5rem; margin: 0 0.5rem; @@ -45,6 +54,10 @@ gap: 8px; } +[data-theme='dark'] .tab-button { + color: var(--dark-text-secondary); +} + .tab-button.active { color: #4f46e5; } @@ -118,6 +131,11 @@ align-items: center; } +[data-theme='dark'] .sponsor-page .sponsor-card { + background: var(--dark-card-bg); + border-color: var(--dark-border); +} + .sponsor-page .sponsor-card::before { position: absolute; top: 0; @@ -158,6 +176,10 @@ color: #111827; } +[data-theme='dark'] .sponsor-page .sponsor-card .sponsor-name { + color: var(--dark-text-primary); +} + .sponsor-page .sponsor-card .sponsor-desc { font-size: 0.95rem; color: #4b5563; @@ -165,6 +187,10 @@ line-height: 1.4; } +[data-theme='dark'] .sponsor-page .sponsor-card .sponsor-desc { + color: var(--dark-text-secondary); +} + .sponsor-page .sponsor-card .social-links { display: flex; justify-content: center; @@ -294,6 +320,11 @@ background: white; } +[data-theme='dark'] .scanner-content { + background: var(--dark-bg-secondary); + color: var(--dark-text-primary); +} + .sponsors-section { margin-top: 2rem; } diff --git a/src/pages/podcasts/index.css b/src/pages/podcasts/index.css index a7bd1c71..fbfdc72f 100644 --- a/src/pages/podcasts/index.css +++ b/src/pages/podcasts/index.css @@ -11,11 +11,19 @@ text-align: center; } +[data-theme='dark'] .podcast-subtitle { + color: var(--dark-text-secondary); +} + h1 { text-align: center; margin-bottom: 1rem; } +[data-theme='dark'] h1 { + color: var(--dark-text-primary); +} + .podcast-grid { display: grid; grid-template-columns: repeat(3, 1fr); @@ -31,10 +39,19 @@ h1 { transition: transform 0.2s ease; } +[data-theme='dark'] .podcast-card { + background: var(--dark-card-bg); + box-shadow: var(--dark-shadow); +} + .podcast-card:hover { transform: translateY(-4px); } +[data-theme='dark'] .podcast-card:hover { + box-shadow: var(--dark-shadow-lg); +} + .podcast-content { height: 100%; } @@ -51,6 +68,10 @@ h1 { color: #333; } +[data-theme='dark'] .podcast-info h3 { + color: var(--dark-text-primary); +} + .podcast-description { font-size: 0.9rem; color: #666; @@ -65,6 +86,10 @@ h1 { text-overflow: ellipsis; } +[data-theme='dark'] .podcast-description { + color: var(--dark-text-secondary); +} + .podcast-publisher { font-size: 0.8rem; color: #888; @@ -72,6 +97,10 @@ h1 { font-style: italic; } +[data-theme='dark'] .podcast-publisher { + color: var(--dark-text-muted); +} + .podcast-embed { height: 100%; border-radius: 0 0 12px 12px; @@ -166,11 +195,20 @@ h1 { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } +[data-theme='dark'] .podcast-transcript { + background: var(--dark-card-bg); + box-shadow: var(--dark-shadow); +} + .podcast-transcript h2 { margin-bottom: 1rem; color: #333; } +[data-theme='dark'] .podcast-transcript h2 { + color: var(--dark-text-primary); +} + .podcast-card { cursor: pointer; } diff --git a/src/pages/showcase/styles.module.css b/src/pages/showcase/styles.module.css index adca91cc..b8c0987b 100644 --- a/src/pages/showcase/styles.module.css +++ b/src/pages/showcase/styles.module.css @@ -32,6 +32,10 @@ margin-right: 0.5rem; } +[data-theme='dark'] .checkboxListItem { + color: var(--dark-text-primary); +} + .checkboxListItem:last-child { margin-right: 0; } @@ -47,6 +51,16 @@ border: 1px solid gray; } +[data-theme='dark'] .searchContainer input { + background: var(--dark-input-bg); + border-color: var(--dark-input-border); + color: var(--dark-text-primary); +} + +[data-theme='dark'] .searchContainer input:focus { + border-color: var(--dark-input-focus-border); +} + .showcaseList { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); diff --git a/src/theme/Footer/Layout/enhanced-footer.css b/src/theme/Footer/Layout/enhanced-footer.css index 84adfd0c..9194553c 100644 --- a/src/theme/Footer/Layout/enhanced-footer.css +++ b/src/theme/Footer/Layout/enhanced-footer.css @@ -1,12 +1,167 @@ -/* Enhanced Footer Styles */ +/* Enhanced Footer Styles - COMPLETELY ISOLATED FROM THEME CHANGES */ .enhanced-footer { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%); - color: #e2e8f0; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; + background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important; + color: #e2e8f0 !important; position: relative; overflow: hidden; } +/* Override ALL possible Docusaurus and theme styles with maximum specificity */ +.enhanced-footer, +.enhanced-footer *, +.enhanced-footer h1, +.enhanced-footer h2, +.enhanced-footer h3, +.enhanced-footer h4, +.enhanced-footer h5, +.enhanced-footer h6, +.enhanced-footer p, +.enhanced-footer span, +.enhanced-footer div, +.enhanced-footer a, +.enhanced-footer li, +.enhanced-footer ul, +.enhanced-footer button, +.enhanced-footer input, +[data-theme='dark'] .enhanced-footer, +[data-theme='light'] .enhanced-footer, +html[data-theme='dark'] .enhanced-footer, +html[data-theme='light'] .enhanced-footer, +[data-theme='dark'] .enhanced-footer *, +[data-theme='light'] .enhanced-footer *, +[data-theme='dark'] .enhanced-footer h1, +[data-theme='dark'] .enhanced-footer h2, +[data-theme='dark'] .enhanced-footer h3, +[data-theme='dark'] .enhanced-footer h4, +[data-theme='dark'] .enhanced-footer h5, +[data-theme='dark'] .enhanced-footer h6, +[data-theme='dark'] .enhanced-footer p, +[data-theme='dark'] .enhanced-footer span, +[data-theme='dark'] .enhanced-footer div, +[data-theme='dark'] .enhanced-footer a, +[data-theme='dark'] .enhanced-footer li, +[data-theme='dark'] .enhanced-footer ul, +[data-theme='dark'] .enhanced-footer button, +[data-theme='dark'] .enhanced-footer input, +[data-theme='light'] .enhanced-footer h1, +[data-theme='light'] .enhanced-footer h2, +[data-theme='light'] .enhanced-footer h3, +[data-theme='light'] .enhanced-footer h4, +[data-theme='light'] .enhanced-footer h5, +[data-theme='light'] .enhanced-footer h6, +[data-theme='light'] .enhanced-footer p, +[data-theme='light'] .enhanced-footer span, +[data-theme='light'] .enhanced-footer div, +[data-theme='light'] .enhanced-footer a, +[data-theme='light'] .enhanced-footer li, +[data-theme='light'] .enhanced-footer ul, +[data-theme='light'] .enhanced-footer button, +[data-theme='light'] .enhanced-footer input, +html[data-theme='dark'] .enhanced-footer *, +html[data-theme='light'] .enhanced-footer * { + background-color: inherit !important; + color: inherit !important; +} + +/* Force the main footer background and colors to never change */ +.enhanced-footer { + background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important; + color: #e2e8f0 !important; +} + +/* Absolute protection against any theme changes */ +[data-theme='dark'] .enhanced-footer, +[data-theme='light'] .enhanced-footer, +html[data-theme='dark'] .enhanced-footer, +html[data-theme='light'] .enhanced-footer { + background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important; + color: #e2e8f0 !important; +} + +/* Force all text elements to maintain their colors */ +[data-theme='dark'] .enhanced-footer h1, +[data-theme='dark'] .enhanced-footer h2, +[data-theme='dark'] .enhanced-footer h3, +[data-theme='dark'] .enhanced-footer h4, +[data-theme='dark'] .enhanced-footer h5, +[data-theme='dark'] .enhanced-footer h6, +[data-theme='light'] .enhanced-footer h1, +[data-theme='light'] .enhanced-footer h2, +[data-theme='light'] .enhanced-footer h3, +[data-theme='light'] .enhanced-footer h4, +[data-theme='light'] .enhanced-footer h5, +[data-theme='light'] .enhanced-footer h6 { + color: #ffffff !important; +} + +[data-theme='dark'] .enhanced-footer p, +[data-theme='dark'] .enhanced-footer span, +[data-theme='dark'] .enhanced-footer div, +[data-theme='dark'] .enhanced-footer li, +[data-theme='light'] .enhanced-footer p, +[data-theme='light'] .enhanced-footer span, +[data-theme='light'] .enhanced-footer div, +[data-theme='light'] .enhanced-footer li { + color: #e2e8f0 !important; +} + +[data-theme='dark'] .enhanced-footer a, +[data-theme='light'] .enhanced-footer a { + color: #cbd5e1 !important; +} + +[data-theme='dark'] .enhanced-footer a:hover, +[data-theme='light'] .enhanced-footer a:hover { + color: #ffffff !important; +} + +/* Specific protection for footer elements */ +[data-theme='dark'] .enhanced-footer .footer-brand-title, +[data-theme='light'] .enhanced-footer .footer-brand-title { + color: #ffffff !important; +} + +[data-theme='dark'] .enhanced-footer .footer-column-title, +[data-theme='light'] .enhanced-footer .footer-column-title { + color: #ffffff !important; +} + +[data-theme='dark'] .enhanced-footer .footer-link, +[data-theme='light'] .enhanced-footer .footer-link { + color: #cbd5e1 !important; +} + +[data-theme='dark'] .enhanced-footer .footer-link:hover, +[data-theme='light'] .enhanced-footer .footer-link:hover { + color: #ffffff !important; +} + +[data-theme='dark'] .enhanced-footer .footer-copyright, +[data-theme='light'] .enhanced-footer .footer-copyright { + color: #94a3b8 !important; +} + +[data-theme='dark'] .enhanced-footer .developer-link, +[data-theme='light'] .enhanced-footer .developer-link { + color: #fbbf24 !important; +} + +[data-theme='dark'] .enhanced-footer .developer-link:hover, +[data-theme='light'] .enhanced-footer .developer-link:hover { + color: #f59e0b !important; +} + +[data-theme='dark'] .enhanced-footer .legal-link, +[data-theme='light'] .enhanced-footer .legal-link { + color: #94a3b8 !important; +} + +[data-theme='dark'] .enhanced-footer .legal-link:hover, +[data-theme='light'] .enhanced-footer .legal-link:hover { + color: #ffffff !important; +} + /* Add animated background pattern */ .enhanced-footer::before { content: ''; @@ -70,10 +225,7 @@ 100% { transform: translateY(0px) translateX(0px); } } -/* Dark theme support */ -[data-theme='dark'] .enhanced-footer { - background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%); -} +/* NO THEME OVERRIDES - FOOTER STAYS THE SAME ALWAYS */ .container { max-width: 1200px;