Skip to content

Commit 6cd824b

Browse files
author
Alexia Michelle
committed
feat: add homepage screenshot and Cockpit sections with new images, styles, and an updated homepage description.
1 parent 3046f63 commit 6cd824b

5 files changed

Lines changed: 147 additions & 1 deletion

File tree

‎src/pages/index.js‎

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,78 @@ function HomepageHeader() {
3535
);
3636
}
3737

38+
function HomepageScreenshot() {
39+
return (
40+
<section className={styles.screenshotSection}>
41+
<div className="container">
42+
<div className="row">
43+
<div className="col col--12 text--center">
44+
<Heading as="h2">
45+
<Translate id="homepage.screenshotTitle">
46+
Beautiful, Stable, and Familiar
47+
</Translate>
48+
</Heading>
49+
<p className="margin-bottom--lg">
50+
<Translate id="homepage.screenshotSubtitle">
51+
A clean KDE Plasma experience powered by the rock-solid Debian base.
52+
</Translate>
53+
</p>
54+
<img
55+
src="/img/desktop-screenshot.png"
56+
alt="GoldenDog Linux Desktop"
57+
className={styles.desktopScreenshot}
58+
/>
59+
</div>
60+
</div>
61+
</div>
62+
</section>
63+
);
64+
}
65+
66+
function CockpitSection() {
67+
return (
68+
<section className={clsx(styles.cockpitSection, 'padding-vert--xl')}>
69+
<div className="container">
70+
<div className="row row--align-center">
71+
<div className="col col--6">
72+
<Heading as="h2">
73+
<Translate id="homepage.cockpitTitle">
74+
Server Management Made Easy
75+
</Translate>
76+
</Heading>
77+
<p>
78+
<Translate id="homepage.cockpitDesc">
79+
GoldenDog Linux comes pre-configured with Cockpit, giving you a powerful web-based interface to manage your system, monitor performance, and handle updates with zero effort.
80+
</Translate>
81+
</p>
82+
<Link
83+
className="button button--secondary button--lg"
84+
to="/docs/popular-apps">
85+
<Translate id="homepage.learnMore">
86+
Learn More
87+
</Translate>
88+
</Link>
89+
</div>
90+
<div className="col col--6">
91+
<div className={styles.cockpitImageGrid}>
92+
<img
93+
src="/img/cockpit-login.png"
94+
alt="Cockpit Login"
95+
className={styles.cockpitImageSmall}
96+
/>
97+
<img
98+
src="/img/cockpit-dashboard.png"
99+
alt="Cockpit Dashboard"
100+
className={styles.cockpitImageLarge}
101+
/>
102+
</div>
103+
</div>
104+
</div>
105+
</div>
106+
</section>
107+
);
108+
}
109+
38110
export default function Home() {
39111
const { siteConfig } = useDocusaurusContext();
40112
return (
@@ -46,12 +118,14 @@ export default function Home() {
46118
})}
47119
description={translate({
48120
id: 'homepage.description',
49-
message: 'Description will go into a meta tag in <head />',
121+
message: 'A stable, KDE-based distribution for every user.',
50122
description: 'The description of the homepage',
51123
})}>
52124
<HomepageHeader />
53125
<main>
126+
<HomepageScreenshot />
54127
<HomepageFeatures />
128+
<CockpitSection />
55129
</main>
56130
</Layout>
57131
);

‎src/pages/index.module.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,76 @@
3838
display: flex;
3939
align-items: center;
4040
justify-content: center;
41+
}
42+
43+
.screenshotSection {
44+
background: var(--ifm-background-color);
45+
padding: 4rem 0;
46+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
47+
}
48+
49+
.desktopScreenshot {
50+
max-width: 1000px;
51+
width: 100%;
52+
border-radius: 12px;
53+
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
54+
border: 1px solid rgba(255, 255, 255, 0.1);
55+
margin-top: 2rem;
56+
}
57+
58+
.cockpitSection {
59+
background: linear-gradient(180deg, var(--ifm-background-color) 0%, #0c0217 100%);
60+
}
61+
62+
.cockpitImageGrid {
63+
position: relative;
64+
height: 400px;
65+
display: flex;
66+
align-items: center;
67+
justify-content: center;
68+
}
69+
70+
.cockpitImageSmall {
71+
position: absolute;
72+
width: 60%;
73+
border-radius: 8px;
74+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
75+
top: 10%;
76+
left: 0;
77+
z-index: 1;
78+
border: 1px solid rgba(255, 255, 255, 0.05);
79+
transition: transform 0.3s ease;
80+
}
81+
82+
.cockpitImageLarge {
83+
position: absolute;
84+
width: 80%;
85+
border-radius: 8px;
86+
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
87+
bottom: 10%;
88+
right: 0;
89+
z-index: 2;
90+
border: 1px solid rgba(255, 255, 255, 0.1);
91+
transition: transform 0.3s ease;
92+
}
93+
94+
.cockpitImageSmall:hover,
95+
.cockpitImageLarge:hover {
96+
transform: scale(1.02);
97+
z-index: 3;
98+
}
99+
100+
@media screen and (max-width: 996px) {
101+
.cockpitImageGrid {
102+
height: auto;
103+
flex-direction: column;
104+
gap: 1rem;
105+
margin-top: 2rem;
106+
}
107+
108+
.cockpitImageSmall,
109+
.cockpitImageLarge {
110+
position: static;
111+
width: 100%;
112+
}
41113
}

‎static/img/cockpit-dashboard.png‎

434 KB
Loading

‎static/img/cockpit-login.png‎

371 KB
Loading

‎static/img/desktop-screenshot.png‎

1.08 MB
Loading

0 commit comments

Comments
 (0)