diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index 630e309..09a38dc 100644 --- a/website/docusaurus.config.ts +++ b/website/docusaurus.config.ts @@ -9,11 +9,19 @@ const projectName = "developer-experience"; const config: Config = { title: "Cardano Developer Experience", - tagline: "Your comprehensive guide to building on Cardano", - favicon: "img/favicon.ico", + tagline: "Community-driven developer experience initiatives at Intersect MBO", + favicon: "img/favicon.png", // GitHub Pages adds a trailing slash by default that I don't want trailingSlash: false, + // Add Google Fonts + stylesheets: [ + { + href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap', + type: 'text/css', + }, + ], + // Set the production url of your site here url: 'https://devex.intersectmbo.org', // Set the // pathname under which your site is served @@ -56,10 +64,10 @@ const config: Config = { // Replace with your project's social card image: "img/docusaurus-social-card.jpg", navbar: { - title: "Cardano DevEx", + title: "Developer Experience", logo: { alt: "Intersect MBO Logo", - src: "img/OSO-image_modified.PNG", + src: "img/intersect-logo.png", }, items: [ { @@ -68,58 +76,93 @@ const config: Config = { position: "left", label: "Documentation", }, + { + type: "dropdown", + label: "Resources", + position: "left", + items: [ + { + label: "Getting Started", + to: "/docs/getting-started", + }, + { + label: "How-to Guides", + to: "/docs/how-to-guide/beginner", + }, + { + label: "Working Groups", + to: "/docs/working-group/q1-2025", + }, + ], + }, { href: "https://github.com/IntersectMBO/developer-experience", label: "GitHub", position: "right", }, - // { - // href: "https://discord.com/channels/1136727663583698984/1250047836339306526", - // label: "Discord", - // position: "right", - // }, + { + href: "https://intersectmbo.org", + label: "Intersect MBO", + position: "right", + }, ], }, footer: { style: "dark", links: [ { - title: "Docs", + title: "Documentation", items: [ { - label: "Documentation", + label: "Getting Started", to: "/docs/getting-started", }, + { + label: "How-to Guides", + to: "/docs/how-to-guide/beginner", + }, + { + label: "Working Groups", + to: "/docs/working-group/q1-2025", + }, ], }, { - title: "Community", + title: "Intersect Ecosystem", items: [ - // { - // label: "Discord", - // href: "https://discordapp.com/invite/docusaurus", - // }, - // { - // label: "X", - // href: "https://x.com/docusaurus", - // }, + { + label: "Intersect MBO", + href: "https://intersectmbo.org", + }, + { + label: "Cardano Foundation", + href: "https://cardanofoundation.org", + }, + { + label: "IOG", + href: "https://iohk.io", + }, ], }, { - title: "More", + title: "Resources", items: [ - // { - // label: "Blog", - // to: "/blog", - // }, { - label: "GitHub", + label: "GitHub Repository", href: "https://github.com/IntersectMBO/developer-experience", }, + { + label: "Community Resources", + to: "/docs/resources/community", + }, + { + label: "Tools & APIs", + to: "/docs/resources/tools", + }, ], }, ], - copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`, + copyright: `Copyright © ${new Date().getFullYear()} Intersect MBO. Built with Docusaurus.`, }, prism: { theme: prismThemes.github, diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx index fb792e1..5d3fd67 100644 --- a/website/src/components/HomepageFeatures/index.tsx +++ b/website/src/components/HomepageFeatures/index.tsx @@ -5,52 +5,50 @@ import styles from './styles.module.css'; type FeatureItem = { title: string; - icon: string; description: ReactNode; }; const FeatureList: FeatureItem[] = [ { - title: 'Comprehensive Guides', - icon: '📚', + title: 'Developer Experience Working Group', description: ( <> - Step-by-step guides from beginner to advanced, covering everything from - setting up your development environment to building complex dApps on Cardano. + Join our community-driven initiative led by developer advocates. Participate in + bi-weekly meetings, identify developer challenges, and collaborate on solutions + to enhance the Cardano Layer 1 developer experience. ), }, { - title: 'Hands-On Learning', - icon: '🛠️', + title: 'Developer Advocate Program', description: ( <> - Interactive tutorials and workshops that get you building immediately. - Learn by doing with real examples and practical exercises. + Connect with developer advocates who foster vibrant communities, onboard new + developers, maintain documentation, and engage through workshops and mentorship + programs within the Cardano ecosystem. ), }, { - title: 'Community Driven', - icon: '🤝', + title: 'Member-Driven Organization', description: ( <> - Built by the community, for the community. Join our working groups - and help shape the future of Cardano development. + Become part of Intersect MBO, a member-driven organization at the heart of Cardano. + Engage in working groups, vote on key decisions, and help shape the future of + the Cardano ecosystem through collaborative innovation. ), }, ]; -function Feature({title, icon, description}: FeatureItem) { +function Feature({title, description}: FeatureItem) { return (
-
-
{icon}
-
-
- {title} -

{description}

+
+
+ {title} +

{description}

+
); @@ -60,6 +58,14 @@ export default function HomepageFeatures(): ReactNode { return (
+
+ + Join the Developer Experience Initiative + +

+ Community-driven programs enhancing Cardano's developer ecosystem +

+
{FeatureList.map((props, idx) => ( diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css index 7404274..fd4f7cd 100644 --- a/website/src/components/HomepageFeatures/styles.module.css +++ b/website/src/components/HomepageFeatures/styles.module.css @@ -1,15 +1,125 @@ .features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; + padding: 6rem 0; + background: #ffffff; } -.featureIcon { - font-size: 4rem; +.featuresHeader { + text-align: center; + margin-bottom: 4rem; +} + +.featuresTitle { + font-size: 2.5rem; + font-weight: 700; + color: var(--ifm-color-primary); margin-bottom: 1rem; - display: flex; - justify-content: center; - align-items: center; - height: 120px; + line-height: 1.2; +} + +.featuresSubtitle { + font-size: 1.25rem; + color: var(--ifm-color-content-secondary); + margin: 0; + line-height: 1.5; +} + +.featureCard { + background: #ffffff; + border: 1px solid rgba(1, 40, 170, 0.1); + border-radius: 16px; + padding: 2.5rem 2rem; + height: 100%; + transition: all 0.3s ease; + box-shadow: 0 2px 8px rgba(1, 40, 170, 0.05); +} + +.featureCard:hover { + border-color: var(--ifm-color-primary); + box-shadow: 0 8px 32px rgba(1, 40, 170, 0.15); + transform: translateY(-4px); +} + +.featureContent { + text-align: center; +} + +.featureTitle { + font-size: 1.5rem; + font-weight: 600; + color: var(--ifm-color-primary); + margin-bottom: 1.5rem; + line-height: 1.3; +} + +.featureDescription { + font-size: 1rem; + color: var(--ifm-color-content-secondary); + line-height: 1.6; + margin: 0; +} + +/* Dark mode styles */ +[data-theme='dark'] .features { + background: var(--ifm-background-color); } + +[data-theme='dark'] .featureCard { + background: var(--ifm-background-surface-color); + border-color: rgba(77, 102, 209, 0.2); +} + +[data-theme='dark'] .featureCard:hover { + border-color: var(--ifm-color-primary); + box-shadow: 0 8px 32px rgba(77, 102, 209, 0.2); +} + +/* Responsive design */ +@media screen and (max-width: 996px) { + .features { + padding: 4rem 0; + } + + .featuresTitle { + font-size: 2rem; + } + + .featuresSubtitle { + font-size: 1.125rem; + } + + .featureCard { + padding: 2rem 1.5rem; + } +} + +@media (max-width: 768px) { + .features { + padding: 3rem 0; + } + + .featuresHeader { + margin-bottom: 3rem; + } + + .featuresTitle { + font-size: 1.75rem; + } + + .featuresSubtitle { + font-size: 1rem; + } + + .featureCard { + padding: 1.5rem 1rem; + margin-bottom: 1.5rem; + } + + .featureTitle { + font-size: 1.25rem; + margin-bottom: 1rem; + } + + .featureDescription { + font-size: 0.95rem; + } +} \ No newline at end of file diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 2bc6a4c..6be52d2 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -4,27 +4,507 @@ * work well for content-centric websites. */ -/* You can override the default Infima variables here. */ +/* Intersect MBO Brand Colors - Custom Blue Theme */ :root { - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; + /* Primary Brand Colors */ + --ifm-color-primary: #0128aa; + --ifm-color-primary-dark: #011a7a; + --ifm-color-primary-darker: #01166b; + --ifm-color-primary-darkest: #011255; + --ifm-color-primary-light: #1a3bb8; + --ifm-color-primary-lighter: #2644c1; + --ifm-color-primary-lightest: #4d66d1; + + /* Secondary Colors */ + --ifm-color-secondary: #f8f9fa; + --ifm-color-secondary-dark: #e9ecef; + --ifm-color-secondary-darker: #dee2e6; + --ifm-color-secondary-darkest: #ced4da; + --ifm-color-secondary-light: #ffffff; + --ifm-color-secondary-lighter: #ffffff; + --ifm-color-secondary-lightest: #ffffff; + + /* Accent Colors */ + --ifm-color-accent: #00d4aa; + --ifm-color-accent-dark: #00b894; + --ifm-color-accent-darker: #00a085; + --ifm-color-accent-darkest: #008975; + --ifm-color-accent-light: #1ad8b8; + --ifm-color-accent-lighter: #33dcc6; + --ifm-color-accent-lightest: #66e4d4; + + /* Typography */ + --ifm-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + --ifm-font-family-monospace: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace; + --ifm-font-size-base: 16px; + --ifm-line-height-base: 1.6; + + /* Code styling */ --ifm-code-font-size: 95%; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); + --docusaurus-highlighted-code-line-bg: rgba(1, 40, 170, 0.1); + + /* Spacing */ + --ifm-spacing-horizontal: 1.5rem; + --ifm-spacing-vertical: 1rem; } -/* For readability concerns, you should choose a lighter palette in dark mode. */ +/* Dark Mode - Intersect Brand Colors */ [data-theme='dark'] { - --ifm-color-primary: #25c2a0; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + /* Primary Brand Colors - Adjusted for dark mode */ + --ifm-color-primary: #4d66d1; + --ifm-color-primary-dark: #2644c1; + --ifm-color-primary-darker: #1a3bb8; + --ifm-color-primary-darkest: #0128aa; + --ifm-color-primary-light: #6b7fd8; + --ifm-color-primary-lighter: #7a8ddd; + --ifm-color-primary-lightest: #9aa8e4; + + /* Secondary Colors for dark mode */ + --ifm-color-secondary: #2d3748; + --ifm-color-secondary-dark: #1a202c; + --ifm-color-secondary-darker: #171923; + --ifm-color-secondary-darkest: #0f1419; + --ifm-color-secondary-light: #4a5568; + --ifm-color-secondary-lighter: #718096; + --ifm-color-secondary-lightest: #a0aec0; + + /* Accent Colors - Maintained for consistency */ + --ifm-color-accent: #00d4aa; + --ifm-color-accent-dark: #00b894; + --ifm-color-accent-darker: #00a085; + --ifm-color-accent-darkest: #008975; + --ifm-color-accent-light: #1ad8b8; + --ifm-color-accent-lighter: #33dcc6; + --ifm-color-accent-lightest: #66e4d4; + + /* Dark mode code highlighting */ + --docusaurus-highlighted-code-line-bg: rgba(77, 102, 209, 0.2); +} + +/* Custom Intersect Branding Styles */ + +/* Navbar styling */ +.navbar { + background: #0128aa; + box-shadow: 0 2px 8px rgba(1, 40, 170, 0.15); +} + +.navbar__brand { + font-weight: 600; + font-size: 1.25rem; + color: white !important; +} + +.navbar__logo { + height: 32px; + width: auto; +} + +/* Navbar text elements - white on blue background */ +.navbar__item { + color: white !important; +} + +.navbar__link { + color: white !important; + font-weight: 500; +} + +.navbar__link:hover { + color: rgba(255, 255, 255, 0.8) !important; +} + +.navbar__link--active { + color: white !important; + font-weight: 600; +} + +/* Dropdown menu styling */ +.navbar__item--show .navbar__link { + color: white !important; +} + +.dropdown__link { + color: var(--ifm-color-primary) !important; +} + +.dropdown__link:hover { + color: var(--ifm-color-primary-dark) !important; + background-color: rgba(1, 40, 170, 0.1); +} + +/* Mobile menu toggle */ +.navbar__toggle { + color: white !important; +} + +.navbar-sidebar__brand { + color: white !important; +} + + +/* Card styling */ +.card { + border: 1px solid rgba(1, 40, 170, 0.1); + border-radius: 12px; + transition: all 0.2s ease; +} + +.card:hover { + border-color: var(--ifm-color-primary); + box-shadow: 0 4px 20px rgba(1, 40, 170, 0.1); + transform: translateY(-2px); +} + +/* Footer styling */ +.footer { + background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); + border-top: 3px solid var(--ifm-color-primary); +} + +.footer__title { + color: var(--ifm-color-primary-light); + font-weight: 600; +} + +.footer__link-item { + color: var(--ifm-color-secondary-lighter); + transition: color 0.2s ease; +} + +.footer__link-item:hover { + color: var(--ifm-color-primary-light); +} + +/* Hero section styling */ +.hero { + background: linear-gradient(135deg, rgba(1, 40, 170, 0.03) 0%, rgba(0, 212, 170, 0.03) 100%); + padding: 6rem 0 4rem 0; + border-bottom: 1px solid rgba(1, 40, 170, 0.1); +} + +.hero__title { + font-size: 3.5rem; + font-weight: 700; + color: var(--ifm-color-primary); + margin-bottom: 1.5rem; + line-height: 1.1; +} + +.hero__subtitle { + font-size: 1.5rem; + font-weight: 400; + color: var(--ifm-color-primary); + margin: 1.5rem 0; + line-height: 1.4; +} + +/* Enhanced button styling */ +.button--primary { + background: var(--ifm-color-primary); + border: 2px solid var(--ifm-color-primary); + color: white !important; + font-weight: 600; + padding: 0.875rem 2rem; + border-radius: 50px !important; + transition: all 0.2s ease; +} + +.button--primary:hover { + background: var(--ifm-color-primary-dark); + border-color: var(--ifm-color-primary-dark); + color: white !important; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(1, 40, 170, 0.3); +} + +.button--secondary { + background: transparent; + border: 2px solid var(--ifm-color-primary); + color: var(--ifm-color-primary) !important; + font-weight: 600; + padding: 0.875rem 2rem; + border-radius: 50px !important; + transition: all 0.2s ease; +} + +.button--secondary:hover { + background: var(--ifm-color-primary); + color: white !important; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(1, 40, 170, 0.2); +} + +.button--outline { + background: transparent; + border: 2px solid var(--ifm-color-primary); + color: var(--ifm-color-primary) !important; + font-weight: 600; + padding: 0.75rem 1.5rem; + border-radius: 50px !important; + transition: all 0.2s ease; +} + +.button--outline:hover { + background: var(--ifm-color-primary); + color: white !important; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(1, 40, 170, 0.2); +} + +/* Orange join button variant */ +.button--primary.button--orange { + background: #f55521 !important; + border: 2px solid #f55521 !important; + color: white !important; + font-weight: 600; + padding: 0.875rem 2rem; + border-radius: 50px !important; + transition: all 0.2s ease; + box-shadow: 0 2px 8px rgba(245, 85, 33, 0.2); +} + +.button--primary.button--orange:hover { + background: #e0481a !important; + border-color: #e0481a !important; + color: white !important; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(245, 85, 33, 0.3); +} + +/* Dark mode orange button */ +[data-theme='dark'] .button--primary.button--orange { + background: #f55521 !important; + border-color: #f55521 !important; + color: white !important; +} + +[data-theme='dark'] .button--primary.button--orange:hover { + background: #e0481a !important; + border-color: #e0481a !important; + color: white !important; +} + +/* Dark mode button fixes */ +[data-theme='dark'] .button--primary { + background: var(--ifm-color-primary); + border-color: var(--ifm-color-primary); + color: white !important; } + +[data-theme='dark'] .button--primary:hover { + background: var(--ifm-color-primary-dark); + border-color: var(--ifm-color-primary-dark); + color: white !important; +} + +[data-theme='dark'] .button--secondary { + background: transparent; + border-color: var(--ifm-color-primary); + color: var(--ifm-color-primary) !important; +} + +[data-theme='dark'] .button--secondary:hover { + background: var(--ifm-color-primary); + color: white !important; +} + +[data-theme='dark'] .button--outline { + background: transparent; + border-color: var(--ifm-color-primary); + color: var(--ifm-color-primary) !important; +} + +[data-theme='dark'] .button--outline:hover { + background: var(--ifm-color-primary); + color: white !important; +} + +/* Code blocks */ +.prism-code { + border-radius: 8px; + border: 1px solid rgba(1, 40, 170, 0.1); +} + +/* Sidebar styling */ +.theme-doc-sidebar-container { + border-right: 1px solid rgba(1, 40, 170, 0.1); +} + +.menu__link--active { + background: transparent !important; + color: #0128aa !important; + font-weight: 600; +} + +.menu__link--active:hover { + background: transparent !important; + color: #0128aa !important; +} + +/* More specific selectors for active menu items */ +.theme-doc-sidebar-container .menu__link--active { + color: #0128aa !important; + background: transparent !important; +} + +.theme-doc-sidebar-container .menu__link--active:hover { + color: #0128aa !important; + background: transparent !important; +} + +/* Override any conflicting styles */ +.menu__link--active, +.menu__link--active:visited, +.menu__link--active:focus, +.menu__link--active:active { + color: #0128aa !important; + background: transparent !important; +} + +.menu__link { + color: var(--ifm-color-content) !important; +} + +.menu__link:hover { + background: rgba(1, 40, 170, 0.05); + color: var(--ifm-color-content) !important; +} + +/* Dark mode sidebar fixes */ +[data-theme='dark'] .menu__link { + color: white !important; +} + +[data-theme='dark'] .menu__link:hover { + color: white !important; +} + +[data-theme='dark'] .menu__link--active { + background: transparent !important; + color: #0128aa !important; +} + +[data-theme='dark'] .menu__link--active:hover { + background: transparent !important; + color: #0128aa !important; +} + +/* More specific dark mode selectors */ +[data-theme='dark'] .theme-doc-sidebar-container .menu__link--active { + color: #0128aa !important; + background: transparent !important; +} + +[data-theme='dark'] .theme-doc-sidebar-container .menu__link--active:hover { + color: #0128aa !important; + background: transparent !important; +} + +/* Override dark mode conflicting styles */ +[data-theme='dark'] .menu__link--active, +[data-theme='dark'] .menu__link--active:visited, +[data-theme='dark'] .menu__link--active:focus, +[data-theme='dark'] .menu__link--active:active { + color: #0128aa !important; + background: transparent !important; +} + +/* Dark mode navbar - ensure plain white text */ +[data-theme='dark'] .navbar__brand, +[data-theme='dark'] .navbar__item, +[data-theme='dark'] .navbar__link, +[data-theme='dark'] .navbar__link--active, +[data-theme='dark'] .navbar__toggle, +[data-theme='dark'] .navbar-sidebar__brand, +[data-theme='dark'] .navbar__item--show .navbar__link { + color: white !important; +} + +[data-theme='dark'] .navbar__link:hover { + color: white !important; + opacity: 0.8; +} + +/* Responsive design improvements */ +@media (max-width: 996px) { + .navbar__brand { + font-size: 1.1rem; + } + + .hero { + padding: 4rem 0 3rem 0; + } + + .hero__title { + font-size: 2.5rem; + } + + .hero__subtitle { + font-size: 1.25rem; + } +} + +@media (max-width: 768px) { + .hero { + padding: 3rem 0 2rem 0; + } + + .hero__title { + font-size: 2rem; + } + + .hero__subtitle { + font-size: 1.125rem; + } + + .button--primary, + .button--secondary { + padding: 0.75rem 1.5rem; + font-size: 0.95rem; + } +} + +/* Link visibility fixes */ +a { + color: var(--ifm-color-primary) !important; + text-decoration: none; + transition: color 0.2s ease; +} + +a:hover { + color: var(--ifm-color-primary-dark) !important; + text-decoration: underline; +} + +/* Dark mode link fixes */ +[data-theme='dark'] a { + color: var(--ifm-color-primary) !important; +} + +[data-theme='dark'] a:hover { + color: var(--ifm-color-primary-light) !important; +} + +/* Footer link fixes */ +.footer__link-item { + color: var(--ifm-color-secondary-lighter) !important; + transition: color 0.2s ease; +} + +.footer__link-item:hover { + color: var(--ifm-color-primary-light) !important; +} + +[data-theme='dark'] .footer__link-item { + color: var(--ifm-color-secondary-lighter) !important; +} + +[data-theme='dark'] .footer__link-item:hover { + color: var(--ifm-color-primary-light) !important; +} + +/* Loading and transition effects */ +* { + transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; +} \ No newline at end of file diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index 9f71a5d..b6dacdf 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -1,23 +1,316 @@ /** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. + * Professional Homepage Styles */ .heroBanner { - padding: 4rem 0; + padding: 6rem 0 4rem 0; text-align: center; position: relative; overflow: hidden; + background: linear-gradient(135deg, rgba(1, 40, 170, 0.03) 0%, rgba(0, 212, 170, 0.03) 100%); + border-bottom: 1px solid rgba(1, 40, 170, 0.1); +} + +.heroContent { + max-width: 800px; + margin: 0 auto; +} + +.heroSubtitle { + font-size: 1.5rem; + font-weight: 400; + color: var(--ifm-color-primary); + margin: 1.5rem 0; + line-height: 1.4; +} + +.heroDescription { + font-size: 1.125rem; + color: var(--ifm-color-content-secondary); + margin: 2rem 0 3rem 0; + line-height: 1.6; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.buttons { + display: flex; + align-items: center; + justify-content: center; + gap: 1.5rem; + flex-wrap: wrap; + margin-top: 2rem; } @media screen and (max-width: 996px) { .heroBanner { - padding: 2rem; + padding: 4rem 0 3rem 0; + } + + .heroSubtitle { + font-size: 1.25rem; + } + + .heroDescription { + font-size: 1rem; + margin: 1.5rem 0 2.5rem 0; + } +} + +@media (max-width: 768px) { + .heroBanner { + padding: 3rem 0 2rem 0; + } + + .buttons { + flex-direction: column; + gap: 1rem; + } + + .heroSubtitle { + font-size: 1.125rem; + } + + .heroDescription { + font-size: 0.95rem; + margin: 1.25rem 0 2rem 0; } } -.buttons { +/* Community Section */ +.communitySection { + padding: 6rem 0; + background: var(--ifm-background-color); +} + +.communityContent { + max-width: 1200px; + margin: 0 auto; +} + +.sectionTitle { + font-size: 2.5rem; + font-weight: 700; + color: var(--ifm-color-primary); + margin-bottom: 1.5rem; + line-height: 1.2; +} + +.sectionDescription { + font-size: 1.125rem; + color: var(--ifm-color-content-secondary); + line-height: 1.6; + margin-bottom: 2rem; +} + +.communityStats { + display: flex; + gap: 2rem; + margin-top: 2rem; +} + +.communityActions { + margin-top: 2rem; + display: flex; + gap: 1rem; + flex-wrap: wrap; +} + +.statItem { + text-align: center; +} + +.statNumber { + font-size: 1.5rem; + font-weight: 700; + color: var(--ifm-color-primary); + margin-bottom: 0.5rem; +} + +.statLabel { + font-size: 0.875rem; + color: var(--ifm-color-content-secondary); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.communityImage { display: flex; align-items: center; justify-content: center; + height: 100%; +} + +.imagePlaceholder { + background: var(--ifm-color-primary); + color: white; + padding: 3rem 2rem; + border-radius: 16px; + text-align: center; + width: 100%; + max-width: 400px; +} + +.imagePlaceholder h3 { + font-size: 2rem; + margin-bottom: 0.5rem; +} + +.imagePlaceholder p { + font-size: 1rem; + opacity: 0.9; + margin: 0; +} + +/* Resources Section */ +.resourcesSection { + padding: 6rem 0; + background: linear-gradient(135deg, rgba(1, 40, 170, 0.02) 0%, rgba(0, 212, 170, 0.02) 100%); +} + +.resourcesHeader { + text-align: center; + margin-bottom: 4rem; } + +.resourceCard { + background: white; + border: 1px solid rgba(1, 40, 170, 0.1); + border-radius: 16px; + padding: 2.5rem 2rem; + height: 100%; + transition: all 0.3s ease; + box-shadow: 0 2px 8px rgba(1, 40, 170, 0.05); +} + +.resourceCard:hover { + border-color: var(--ifm-color-primary); + box-shadow: 0 8px 32px rgba(1, 40, 170, 0.15); + transform: translateY(-4px); +} + +.resourceTitle { + font-size: 1.5rem; + font-weight: 600; + color: var(--ifm-color-primary); + margin-bottom: 1rem; +} + +.resourceDescription { + font-size: 1rem; + color: var(--ifm-color-content-secondary); + line-height: 1.6; + margin-bottom: 1.5rem; +} + +/* Getting Involved Section */ +.gettingInvolvedSection { + padding: 6rem 0; + background: var(--ifm-background-color); +} + +.gettingInvolvedContent { + max-width: 1200px; + margin: 0 auto; +} + +.involvedImage { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +.involvedActions { + display: flex; + gap: 1rem; + margin-top: 2rem; + flex-wrap: wrap; +} + +/* Dark mode styles */ +[data-theme='dark'] .resourceCard { + background: var(--ifm-background-surface-color); + border-color: rgba(77, 102, 209, 0.2); +} + +[data-theme='dark'] .resourceCard:hover { + border-color: var(--ifm-color-primary); + box-shadow: 0 8px 32px rgba(77, 102, 209, 0.2); +} + +[data-theme='dark'] .resourcesSection { + background: linear-gradient(135deg, rgba(77, 102, 209, 0.02) 0%, rgba(0, 212, 170, 0.02) 100%); +} + +/* Responsive design for new sections */ +@media screen and (max-width: 996px) { + .sectionTitle { + font-size: 2rem; + } + + .sectionDescription { + font-size: 1rem; + } + + .communityStats { + gap: 1.5rem; + } + + .statNumber { + font-size: 1.25rem; + } + + .resourceCard { + padding: 2rem 1.5rem; + margin-bottom: 1.5rem; + } + + .involvedActions { + flex-direction: column; + } +} + +@media (max-width: 768px) { + + .communitySection, + .resourcesSection, + .gettingInvolvedSection { + padding: 4rem 0; + } + + .sectionTitle { + font-size: 1.75rem; + } + + .sectionDescription { + font-size: 0.95rem; + } + + .communityStats { + flex-direction: column; + gap: 1rem; + text-align: center; + } + + .imagePlaceholder { + padding: 2rem 1.5rem; + } + + .imagePlaceholder h3 { + font-size: 1.5rem; + } + + .resourceCard { + padding: 1.5rem 1rem; + } + + .resourceTitle { + font-size: 1.25rem; + } + + .resourceDescription { + font-size: 0.95rem; + } +} \ No newline at end of file diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 1afa497..db4b23e 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -11,33 +11,208 @@ import styles from './index.module.css'; function HomepageHeader() { const {siteConfig} = useDocusaurusContext(); return ( -
+
- - {siteConfig.title} - -

{siteConfig.tagline}

-
- {/* - Docusaurus Tutorials - 5min ⏱️ - */} +
+ + {siteConfig.title} + +

{siteConfig.tagline}

+

+ Join the Developer Experience Working Group and connect with developer advocates + who are enhancing the Cardano ecosystem. Access comprehensive resources, participate + in bi-weekly meetings, and collaborate with a community-driven initiative focused on + improving developer tools and processes. +

+
+ + Join Working Group + + + Learn About Programs + +
); } +function CommunitySection() { + return ( +
+
+
+
+
+ + Have Any Questions or Need Help? + +

+ Go to our GitHub repository and create a blank issue to ask, suggest, or question anything. + Our developer advocates and community members will be happy to assist you with your + Cardano development journey. +

+
+
+
GitHub
+
Issues
+
+
+
Community
+
Support
+
+
+
Open
+
Source
+
+
+
+ + Join Intersect + + + Visit GitHub Repository + +
+
+
+
+
+ GitHub Issues +

Ask • Suggest • Question

+
+
+
+
+
+
+
+ ); +} + +function ResourcesSection() { + return ( +
+
+
+ + Developer Resources + +

+ Access comprehensive documentation, guides, and tools designed to accelerate + your Cardano development journey. +

+
+
+
+
+ Getting Started +

+ Step-by-step guides to begin your Cardano development journey with + essential tools and setup instructions. +

+ + Start Building + +
+
+
+
+ How-to Guides +

+ Practical tutorials covering smart contracts, DeFi applications, and + advanced Cardano development techniques. +

+ + Learn More + +
+
+
+
+ Working Groups +

+ Explore our Q1 2025 working group sessions, resources, and community + initiatives shaping the Cardano ecosystem. +

+ + Explore Groups + +
+
+
+
+
+ ); +} + +function GettingInvolvedSection() { + return ( +
+
+
+
+
+
+
+ Join Intersect MBO +

Member-Driven Organization

+
+
+
+
+ + Get Involved Today + +

+ Become a member of Intersect MBO and actively participate in shaping + the future of Cardano. Join working groups, vote on key decisions, + and contribute to collaborative innovation. +

+
+ + Become a Member + + + View Q1 2025 Sessions + +
+
+
+
+
+
+ ); +} + export default function Home(): ReactNode { const {siteConfig} = useDocusaurusContext(); return ( - + title={`${siteConfig.title}`} + description="Join the Developer Experience Working Group at Intersect MBO. Connect with developer advocates, access comprehensive Cardano resources, and participate in community-driven initiatives to enhance the developer ecosystem.">
+
); diff --git a/website/static/img/Open Source Office Image (1).avif b/website/static/img/Open Source Office Image (1).avif new file mode 100644 index 0000000..537cb63 Binary files /dev/null and b/website/static/img/Open Source Office Image (1).avif differ diff --git a/website/static/img/favicon.png b/website/static/img/favicon.png new file mode 100644 index 0000000..970d220 Binary files /dev/null and b/website/static/img/favicon.png differ diff --git a/website/static/img/intersect-logo.png b/website/static/img/intersect-logo.png new file mode 100644 index 0000000..bee7686 Binary files /dev/null and b/website/static/img/intersect-logo.png differ