Skip to content

Commit 21c64f8

Browse files
FangolingFangoling
authored
Merge pull request #5 from EduIDE/marketing-page
Add marketing landing page
2 parents c06ace7 + f2379bb commit 21c64f8

46 files changed

Lines changed: 2147 additions & 319 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docusaurus.config.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import type {Config} from '@docusaurus/types';
33
import type * as Preset from '@docusaurus/preset-classic';
44

55
const config: Config = {
6-
title: 'EduIDE Docs',
7-
tagline: 'Documentation and product guidance for EduIDE',
6+
title: 'edu ide — The IDE built for learning',
7+
tagline: 'A browser-based development environment designed for education',
88
favicon: 'img/logo.svg',
9+
910
future: {
1011
v4: true,
1112
},

‎src/components/landing/Button.module.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.btnPrimary {
2+
background: var(--landing-teal);
3+
color: #fff !important;
4+
border: none;
5+
padding: 13px 24px;
6+
border-radius: 10px;
7+
font-size: 15px;
8+
font-weight: 500;
9+
cursor: pointer;
10+
font-family: 'DM Sans', sans-serif;
11+
transition: background 0.15s, transform 0.1s;
12+
text-decoration: none !important;
13+
display: inline-block;
14+
}
15+
16+
.btnPrimary:hover {
17+
background: var(--landing-teal-dark);
18+
color: #fff !important;
19+
}
20+
21+
.btnPrimary:active {
22+
transform: scale(0.98);
23+
}
24+
25+
.btnSecondary {
26+
background: transparent;
27+
color: var(--landing-text) !important;
28+
border: 0.5px solid var(--landing-border-med);
29+
padding: 13px 24px;
30+
border-radius: 10px;
31+
font-size: 15px;
32+
font-weight: 500;
33+
cursor: pointer;
34+
font-family: 'DM Sans', sans-serif;
35+
transition: background 0.15s;
36+
text-decoration: none !important;
37+
display: inline-block;
38+
}
39+
40+
.btnSecondary:hover {
41+
background: var(--landing-surface);
42+
color: var(--landing-text) !important;
43+
}

‎src/components/landing/Button.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import Link from '@docusaurus/Link';
3+
import styles from './Button.module.css';
4+
5+
interface ButtonProps {
6+
variant: 'primary' | 'secondary';
7+
to: string;
8+
target?: string;
9+
children: React.ReactNode;
10+
}
11+
12+
const Button = React.memo<ButtonProps>(function Button({
13+
variant,
14+
to,
15+
target,
16+
children,
17+
}) {
18+
return (
19+
<Link
20+
className={variant === 'primary' ? styles.btnPrimary : styles.btnSecondary}
21+
to={to}
22+
target={target}
23+
{...(target === '_blank' ? { rel: 'noopener noreferrer' } : {})}
24+
>
25+
{children}
26+
</Link>
27+
);
28+
});
29+
30+
export default Button;

‎src/components/landing/CtaSection.module.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.ctaSection {
2+
padding: 5rem 2rem;
3+
text-align: center;
4+
max-width: 700px;
5+
margin: 0 auto;
6+
}
7+
8+
.ctaSection h2 {
9+
font-size: 38px;
10+
font-weight: 400;
11+
margin-bottom: 1rem;
12+
line-height: 1.15;
13+
color: var(--landing-text);
14+
}
15+
16+
.ctaSection p {
17+
font-size: 16px;
18+
color: var(--landing-muted);
19+
margin-bottom: 2.5rem;
20+
line-height: 1.7;
21+
}
22+
23+
.ctaActions {
24+
display: flex;
25+
gap: 14px;
26+
justify-content: center;
27+
flex-wrap: wrap;
28+
}
29+
30+
@media (max-width: 560px) {
31+
.ctaSection h2 {
32+
font-size: 28px;
33+
}
34+
35+
.ctaActions {
36+
flex-direction: column;
37+
align-items: center;
38+
}
39+
}

‎src/components/landing/CtaSection.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Button from "./Button";
2+
import styles from "./CtaSection.module.css";
3+
4+
export default function CtaSection() {
5+
return (
6+
<section className={styles.ctaSection} aria-labelledby="cta-heading">
7+
<h2 id="cta-heading">Ready to try EduIDE?</h2>
8+
<p>
9+
Open the IDE in your browser. Or deploy it for your next course in
10+
minutes.
11+
</p>
12+
<div className={styles.ctaActions}>
13+
<Button
14+
variant="primary"
15+
to="https://theia.artemis.cit.tum.de/"
16+
target="_blank"
17+
>
18+
Get Started
19+
</Button>
20+
<Button variant="secondary" to="/student/intro">
21+
Read the Docs
22+
</Button>
23+
</div>
24+
</section>
25+
);
26+
}

‎src/components/landing/FeatureShowcase.module.css‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
.section {
2+
padding: 5rem 2rem;
3+
max-width: 1100px;
4+
margin: 0 auto;
5+
}
6+
7+
.inner {
8+
display: grid;
9+
grid-template-columns: 1fr 1.5fr;
10+
gap: 4rem;
11+
align-items: center;
12+
}
13+
14+
.inner.reverse {
15+
grid-template-columns: 1.5fr 1fr;
16+
}
17+
18+
.inner.reverse .textCol {
19+
order: 2;
20+
}
21+
22+
.inner.reverse .mediaCol {
23+
order: 1;
24+
}
25+
26+
.textCol {
27+
display: flex;
28+
flex-direction: column;
29+
gap: 0;
30+
}
31+
32+
.label {
33+
font-size: 12px;
34+
font-weight: 500;
35+
letter-spacing: 0.09em;
36+
text-transform: uppercase;
37+
color: var(--landing-teal);
38+
margin-bottom: 0.75rem;
39+
}
40+
41+
.textCol h2 {
42+
font-size: 2rem;
43+
font-weight: 600;
44+
line-height: 1.15;
45+
letter-spacing: -0.03em;
46+
color: var(--landing-text);
47+
margin-bottom: 1rem;
48+
}
49+
50+
.textCol p {
51+
font-size: 16px;
52+
color: var(--landing-muted);
53+
line-height: 1.75;
54+
margin-bottom: 1.5rem;
55+
}
56+
57+
.link {
58+
font-size: 15px;
59+
font-weight: 500;
60+
color: var(--landing-teal);
61+
text-decoration: none;
62+
display: inline-flex;
63+
align-items: center;
64+
gap: 5px;
65+
}
66+
67+
.link:hover {
68+
text-decoration: underline;
69+
}
70+
71+
.mediaCol {
72+
position: relative;
73+
overflow: hidden;
74+
background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
75+
aspect-ratio: 16 / 10;
76+
border-radius: 16px;
77+
display: flex;
78+
align-items: center;
79+
justify-content: center;
80+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
81+
}
82+
83+
.mediaCol.hasVideo {
84+
background: none;
85+
aspect-ratio: auto;
86+
border-radius: 0;
87+
box-shadow: none;
88+
mask-image:
89+
linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%),
90+
linear-gradient(to bottom, transparent 0%, black 4%, black 88%, transparent 100%);
91+
mask-composite: intersect;
92+
-webkit-mask-image:
93+
linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%),
94+
linear-gradient(to bottom, transparent 0%, black 4%, black 88%, transparent 100%);
95+
-webkit-mask-composite: source-in;
96+
}
97+
98+
.mediaCol img {
99+
width: 100%;
100+
height: 100%;
101+
object-fit: cover;
102+
display: block;
103+
border-radius: 16px;
104+
}
105+
106+
.mediaCol video {
107+
display: block;
108+
width: 100%;
109+
height: auto;
110+
}
111+
112+
.gifPlaceholder {
113+
display: flex;
114+
flex-direction: column;
115+
align-items: center;
116+
justify-content: center;
117+
gap: 10px;
118+
color: rgba(255, 255, 255, 0.7);
119+
font-size: 14px;
120+
}
121+
122+
.gifPlaceholder svg {
123+
opacity: 0.5;
124+
}
125+
126+
@media (max-width: 820px) {
127+
.inner,
128+
.inner.reverse {
129+
grid-template-columns: 1fr;
130+
gap: 2rem;
131+
}
132+
133+
.inner.reverse .textCol {
134+
order: 0;
135+
}
136+
137+
.inner.reverse .mediaCol {
138+
order: 0;
139+
}
140+
}

0 commit comments

Comments
 (0)