Skip to content

Commit 7b69539

Browse files
Ranchhand87Ranchhand87
authored
Merge pull request #87 from danbaruka/main
feat: complete homepage redesign with Intersect MBO branding
2 parents e7a573c + d9c3f20 commit 7b69539

File tree

9 files changed

+1201
-94
lines changed

9 files changed

+1201
-94
lines changed

‎website/docusaurus.config.ts‎

Lines changed: 70 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,19 @@ const projectName = "developer-experience";
99

1010
const config: Config = {
1111
title: "Cardano Developer Experience",
12-
tagline: "Your comprehensive guide to building on Cardano",
13-
favicon: "img/favicon.ico",
12+
tagline: "Community-driven developer experience initiatives at Intersect MBO",
13+
favicon: "img/favicon.png",
1414
// GitHub Pages adds a trailing slash by default that I don't want
1515
trailingSlash: false,
1616

17+
// Add Google Fonts
18+
stylesheets: [
19+
{
20+
href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap',
21+
type: 'text/css',
22+
},
23+
],
24+
1725
// Set the production url of your site here
1826
url: 'https://devex.intersectmbo.org',
1927
// Set the /<baseUrl>/ pathname under which your site is served
@@ -56,10 +64,10 @@ const config: Config = {
5664
// Replace with your project's social card
5765
image: "img/docusaurus-social-card.jpg",
5866
navbar: {
59-
title: "Cardano DevEx",
67+
title: "Developer Experience",
6068
logo: {
6169
alt: "Intersect MBO Logo",
62-
src: "img/OSO-image_modified.PNG",
70+
src: "img/intersect-logo.png",
6371
},
6472
items: [
6573
{
@@ -68,58 +76,93 @@ const config: Config = {
6876
position: "left",
6977
label: "Documentation",
7078
},
79+
{
80+
type: "dropdown",
81+
label: "Resources",
82+
position: "left",
83+
items: [
84+
{
85+
label: "Getting Started",
86+
to: "/docs/getting-started",
87+
},
88+
{
89+
label: "How-to Guides",
90+
to: "/docs/how-to-guide/beginner",
91+
},
92+
{
93+
label: "Working Groups",
94+
to: "/docs/working-group/q1-2025",
95+
},
96+
],
97+
},
7198
{
7299
href: "https://github.com/IntersectMBO/developer-experience",
73100
label: "GitHub",
74101
position: "right",
75102
},
76-
// {
77-
// href: "https://discord.com/channels/1136727663583698984/1250047836339306526",
78-
// label: "Discord",
79-
// position: "right",
80-
// },
103+
{
104+
href: "https://intersectmbo.org",
105+
label: "Intersect MBO",
106+
position: "right",
107+
},
81108
],
82109
},
83110
footer: {
84111
style: "dark",
85112
links: [
86113
{
87-
title: "Docs",
114+
title: "Documentation",
88115
items: [
89116
{
90-
label: "Documentation",
117+
label: "Getting Started",
91118
to: "/docs/getting-started",
92119
},
120+
{
121+
label: "How-to Guides",
122+
to: "/docs/how-to-guide/beginner",
123+
},
124+
{
125+
label: "Working Groups",
126+
to: "/docs/working-group/q1-2025",
127+
},
93128
],
94129
},
95130
{
96-
title: "Community",
131+
title: "Intersect Ecosystem",
97132
items: [
98-
// {
99-
// label: "Discord",
100-
// href: "https://discordapp.com/invite/docusaurus",
101-
// },
102-
// {
103-
// label: "X",
104-
// href: "https://x.com/docusaurus",
105-
// },
133+
{
134+
label: "Intersect MBO",
135+
href: "https://intersectmbo.org",
136+
},
137+
{
138+
label: "Cardano Foundation",
139+
href: "https://cardanofoundation.org",
140+
},
141+
{
142+
label: "IOG",
143+
href: "https://iohk.io",
144+
},
106145
],
107146
},
108147
{
109-
title: "More",
148+
title: "Resources",
110149
items: [
111-
// {
112-
// label: "Blog",
113-
// to: "/blog",
114-
// },
115150
{
116-
label: "GitHub",
151+
label: "GitHub Repository",
117152
href: "https://github.com/IntersectMBO/developer-experience",
118153
},
154+
{
155+
label: "Community Resources",
156+
to: "/docs/resources/community",
157+
},
158+
{
159+
label: "Tools & APIs",
160+
to: "/docs/resources/tools",
161+
},
119162
],
120163
},
121164
],
122-
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
165+
copyright: `Copyright © ${new Date().getFullYear()} Intersect MBO. Built with Docusaurus.`,
123166
},
124167
prism: {
125168
theme: prismThemes.github,

‎website/src/components/HomepageFeatures/index.tsx‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,52 +5,50 @@ import styles from './styles.module.css';
55

66
type FeatureItem = {
77
title: string;
8-
icon: string;
98
description: ReactNode;
109
};
1110

1211
const FeatureList: FeatureItem[] = [
1312
{
14-
title: 'Comprehensive Guides',
15-
icon: '📚',
13+
title: 'Developer Experience Working Group',
1614
description: (
1715
<>
18-
Step-by-step guides from beginner to advanced, covering everything from
19-
setting up your development environment to building complex dApps on Cardano.
16+
Join our community-driven initiative led by developer advocates. Participate in
17+
bi-weekly meetings, identify developer challenges, and collaborate on solutions
18+
to enhance the Cardano Layer 1 developer experience.
2019
</>
2120
),
2221
},
2322
{
24-
title: 'Hands-On Learning',
25-
icon: '🛠️',
23+
title: 'Developer Advocate Program',
2624
description: (
2725
<>
28-
Interactive tutorials and workshops that get you building immediately.
29-
Learn by doing with real examples and practical exercises.
26+
Connect with developer advocates who foster vibrant communities, onboard new
27+
developers, maintain documentation, and engage through workshops and mentorship
28+
programs within the Cardano ecosystem.
3029
</>
3130
),
3231
},
3332
{
34-
title: 'Community Driven',
35-
icon: '🤝',
33+
title: 'Member-Driven Organization',
3634
description: (
3735
<>
38-
Built by the community, for the community. Join our working groups
39-
and help shape the future of Cardano development.
36+
Become part of Intersect MBO, a member-driven organization at the heart of Cardano.
37+
Engage in working groups, vote on key decisions, and help shape the future of
38+
the Cardano ecosystem through collaborative innovation.
4039
</>
4140
),
4241
},
4342
];
4443

45-
function Feature({title, icon, description}: FeatureItem) {
44+
function Feature({title, description}: FeatureItem) {
4645
return (
4746
<div className={clsx('col col--4')}>
48-
<div className="text--center">
49-
<div className={styles.featureIcon}>{icon}</div>
50-
</div>
51-
<div className="text--center padding-horiz--md">
52-
<Heading as="h3">{title}</Heading>
53-
<p>{description}</p>
47+
<div className={styles.featureCard}>
48+
<div className={styles.featureContent}>
49+
<Heading as="h3" className={styles.featureTitle}>{title}</Heading>
50+
<p className={styles.featureDescription}>{description}</p>
51+
</div>
5452
</div>
5553
</div>
5654
);
@@ -60,6 +58,14 @@ export default function HomepageFeatures(): ReactNode {
6058
return (
6159
<section className={styles.features}>
6260
<div className="container">
61+
<div className={styles.featuresHeader}>
62+
<Heading as="h2" className={styles.featuresTitle}>
63+
Join the Developer Experience Initiative
64+
</Heading>
65+
<p className={styles.featuresSubtitle}>
66+
Community-driven programs enhancing Cardano's developer ecosystem
67+
</p>
68+
</div>
6369
<div className="row">
6470
{FeatureList.map((props, idx) => (
6571
<Feature key={idx} {...props} />

‎website/src/components/HomepageFeatures/styles.module.css‎

Lines changed: 120 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,125 @@
11
.features {
2-
display: flex;
3-
align-items: center;
4-
padding: 2rem 0;
5-
width: 100%;
2+
padding: 6rem 0;
3+
background: #ffffff;
64
}
75

8-
.featureIcon {
9-
font-size: 4rem;
6+
.featuresHeader {
7+
text-align: center;
8+
margin-bottom: 4rem;
9+
}
10+
11+
.featuresTitle {
12+
font-size: 2.5rem;
13+
font-weight: 700;
14+
color: var(--ifm-color-primary);
1015
margin-bottom: 1rem;
11-
display: flex;
12-
justify-content: center;
13-
align-items: center;
14-
height: 120px;
16+
line-height: 1.2;
17+
}
18+
19+
.featuresSubtitle {
20+
font-size: 1.25rem;
21+
color: var(--ifm-color-content-secondary);
22+
margin: 0;
23+
line-height: 1.5;
24+
}
25+
26+
.featureCard {
27+
background: #ffffff;
28+
border: 1px solid rgba(1, 40, 170, 0.1);
29+
border-radius: 16px;
30+
padding: 2.5rem 2rem;
31+
height: 100%;
32+
transition: all 0.3s ease;
33+
box-shadow: 0 2px 8px rgba(1, 40, 170, 0.05);
34+
}
35+
36+
.featureCard:hover {
37+
border-color: var(--ifm-color-primary);
38+
box-shadow: 0 8px 32px rgba(1, 40, 170, 0.15);
39+
transform: translateY(-4px);
40+
}
41+
42+
.featureContent {
43+
text-align: center;
44+
}
45+
46+
.featureTitle {
47+
font-size: 1.5rem;
48+
font-weight: 600;
49+
color: var(--ifm-color-primary);
50+
margin-bottom: 1.5rem;
51+
line-height: 1.3;
52+
}
53+
54+
.featureDescription {
55+
font-size: 1rem;
56+
color: var(--ifm-color-content-secondary);
57+
line-height: 1.6;
58+
margin: 0;
59+
}
60+
61+
/* Dark mode styles */
62+
[data-theme='dark'] .features {
63+
background: var(--ifm-background-color);
1564
}
65+
66+
[data-theme='dark'] .featureCard {
67+
background: var(--ifm-background-surface-color);
68+
border-color: rgba(77, 102, 209, 0.2);
69+
}
70+
71+
[data-theme='dark'] .featureCard:hover {
72+
border-color: var(--ifm-color-primary);
73+
box-shadow: 0 8px 32px rgba(77, 102, 209, 0.2);
74+
}
75+
76+
/* Responsive design */
77+
@media screen and (max-width: 996px) {
78+
.features {
79+
padding: 4rem 0;
80+
}
81+
82+
.featuresTitle {
83+
font-size: 2rem;
84+
}
85+
86+
.featuresSubtitle {
87+
font-size: 1.125rem;
88+
}
89+
90+
.featureCard {
91+
padding: 2rem 1.5rem;
92+
}
93+
}
94+
95+
@media (max-width: 768px) {
96+
.features {
97+
padding: 3rem 0;
98+
}
99+
100+
.featuresHeader {
101+
margin-bottom: 3rem;
102+
}
103+
104+
.featuresTitle {
105+
font-size: 1.75rem;
106+
}
107+
108+
.featuresSubtitle {
109+
font-size: 1rem;
110+
}
111+
112+
.featureCard {
113+
padding: 1.5rem 1rem;
114+
margin-bottom: 1.5rem;
115+
}
116+
117+
.featureTitle {
118+
font-size: 1.25rem;
119+
margin-bottom: 1rem;
120+
}
121+
122+
.featureDescription {
123+
font-size: 0.95rem;
124+
}
125+
}

0 commit comments

Comments
 (0)