Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 70 additions & 27 deletions website/docusaurus.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 /<baseUrl>/ pathname under which your site is served
Expand Down Expand Up @@ -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: [
{
Expand All @@ -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",
},
// {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would keep the link to the channel somewhere, but it is ok to remove it, if there is not a way to cleanly advise that the link may be dead if they have not already joined Intersect and thereby the Discord.

// 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,
Expand Down
46 changes: 26 additions & 20 deletions website/src/components/HomepageFeatures/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className={clsx('col col--4')}>
<div className="text--center">
<div className={styles.featureIcon}>{icon}</div>
</div>
<div className="text--center padding-horiz--md">
<Heading as="h3">{title}</Heading>
<p>{description}</p>
<div className={styles.featureCard}>
<div className={styles.featureContent}>
<Heading as="h3" className={styles.featureTitle}>{title}</Heading>
<p className={styles.featureDescription}>{description}</p>
</div>
</div>
</div>
);
Expand All @@ -60,6 +58,14 @@ export default function HomepageFeatures(): ReactNode {
return (
<section className={styles.features}>
<div className="container">
<div className={styles.featuresHeader}>
<Heading as="h2" className={styles.featuresTitle}>
Join the Developer Experience Initiative
</Heading>
<p className={styles.featuresSubtitle}>
Community-driven programs enhancing Cardano's developer ecosystem
</p>
</div>
<div className="row">
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
Expand Down
130 changes: 120 additions & 10 deletions website/src/components/HomepageFeatures/styles.module.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading