Skip to content

Commit 098669a

Browse files
author
Alexia Michelle
committed
fix
1 parent d59eb42 commit 098669a

5 files changed

Lines changed: 88 additions & 57 deletions

File tree

‎src/components/HomepageFeatures/index.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,11 @@ const FeatureList = [
3737

3838
function Feature({ Svg, title, description }) {
3939
return (
40-
<div className={clsx('col col--4', styles.featureCard)}>
40+
<div className={styles.featureCard}>
4141
<div className="text--center">
4242
<Svg className={styles.featureSvg} role="img" />
4343
</div>
44-
<div className="text--center padding-horiz--md">
44+
<div className="padding-horiz--md">
4545
<Heading as="h3">{title}</Heading>
4646
<p>{description}</p>
4747
</div>
@@ -55,7 +55,9 @@ export default function HomepageFeatures() {
5555
<div className="container">
5656
<div className="row">
5757
{FeatureList.map((props, idx) => (
58-
<Feature key={idx} {...props} />
58+
<div key={idx} className="col col--4" style={{ marginBottom: '2rem' }}>
59+
<Feature {...props} />
60+
</div>
5961
))}
6062
</div>
6163
</div>

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

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,41 @@
11
.features {
2-
display: grid;
3-
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
4-
gap: 2rem;
5-
padding: 2rem 0;
2+
display: flex;
3+
align-items: center;
4+
padding: 6rem 0;
5+
width: 100%;
66
}
77

88
.featureCard {
9-
background: var(--ifm-background-color);
10-
border: 1px solid #1e053a;
11-
border-radius: 8px;
12-
padding: 1.5rem;
9+
background: rgba(255, 255, 255, 0.02);
10+
border: 1px solid rgba(255, 255, 255, 0.05);
11+
border-radius: 16px;
12+
padding: 2.5rem;
1313
text-align: center;
14-
transition: transform 0.2s ease, box-shadow 0.2s ease;
14+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
15+
height: 100%;
1516
}
1617

1718
.featureCard:hover {
18-
transform: translateY(-4px);
19-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
19+
transform: translateY(-8px);
20+
background: rgba(255, 255, 255, 0.04);
21+
border-color: rgba(162, 155, 254, 0.3);
22+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
2023
}
2124

2225
.featureSvg {
23-
height: 120px;
24-
width: 120px;
26+
height: 80px;
27+
width: 80px;
28+
margin-bottom: 2rem;
29+
filter: drop-shadow(0 0 10px rgba(162, 155, 254, 0.2));
30+
}
31+
32+
.featureCard h3 {
33+
font-weight: 700;
2534
margin-bottom: 1rem;
35+
font-size: 1.5rem;
36+
}
37+
38+
.featureCard p {
39+
line-height: 1.6;
40+
color: #a0aec0;
2641
}

‎src/css/custom.css‎

Lines changed: 35 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,33 @@
44
* work well for content-centric websites.
55
*/
66

7-
/* Override Infima variables for n8n.io inspired dark theme */
7+
/* Override Infima variables for Premium Dark theme */
88
:root {
9-
/* Primary color - deep purple */
10-
--ifm-color-primary: #8e44ad;
11-
--ifm-color-primary-dark: #7d3c98;
12-
--ifm-color-primary-darker: #763990;
13-
--ifm-color-primary-darkest: #612e76;
14-
--ifm-color-primary-light: #9b59b6;
15-
--ifm-color-primary-lighter: #a569bd;
16-
--ifm-color-primary-lightest: #bb8fce;
9+
/* Primary color - Deep Amethyst */
10+
--ifm-color-primary: #9b59b6;
11+
--ifm-color-primary-dark: #8e44ad;
12+
--ifm-color-primary-darker: #8842a5;
13+
--ifm-color-primary-darkest: #703688;
14+
--ifm-color-primary-light: #a569bd;
15+
--ifm-color-primary-lighter: #bb8fce;
16+
--ifm-color-primary-lightest: #d2b4de;
1717

18-
/* Typography */
19-
--ifm-font-family-base: 'Inter', sans-serif;
20-
--ifm-font-color-base: #f8f9fa;
21-
/* Light text */
18+
/* Typography - Clean & Modern */
19+
--ifm-font-family-base: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
20+
--ifm-font-color-base: #e9ecef;
21+
--ifm-heading-color: #ffffff;
2222

23-
/* Code */
24-
--ifm-code-font-size: 95%;
25-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
23+
/* Code & Details */
24+
--ifm-code-font-size: 90%;
25+
--docusaurus-highlighted-code-line-bg: rgba(155, 89, 182, 0.1);
2626
}
2727

28-
/* Dark mode overrides */
28+
/* Premium Dark overrides */
2929
[data-theme='dark'] {
30-
--ifm-background-color: #0b0118;
31-
/* Near‑black purple */
32-
--ifm-navbar-background-color: #090113;
33-
--ifm-footer-background-color: #06010d;
30+
--ifm-background-color: #080112;
31+
/* Deepest Purple/Black */
32+
--ifm-navbar-background-color: #09021a;
33+
--ifm-footer-background-color: #05010b;
3434

3535
--ifm-color-primary: #a29bfe;
3636
--ifm-color-primary-dark: #8179f8;
@@ -40,26 +40,25 @@
4040
--ifm-color-primary-lighter: #d4d0fe;
4141
--ifm-color-primary-lightest: #f1f0ff;
4242

43-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
44-
}
43+
--ifm-contents-border-color: rgba(255, 255, 255, 0.05);
44+
--ifm-toc-border-color: rgba(255, 255, 255, 0.05);
4545

46-
/* Global element tweaks */
47-
a {
48-
color: var(--ifm-color-primary);
49-
text-decoration: none;
46+
/* Modern Depth */
47+
--glow-accent: rgba(162, 155, 254, 0.15);
5048
}
5149

52-
a:hover {
53-
opacity: 0.85;
50+
/* Layout Polish */
51+
.navbar {
52+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
53+
backdrop-filter: blur(10px);
54+
-webkit-backdrop-filter: blur(10px);
55+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
5456
}
5557

56-
/* Buttons */
57-
.button {
58-
border-radius: 8px;
59-
transition: background-color 0.2s ease;
58+
.footer {
59+
border-top: 1px solid rgba(255, 255, 255, 0.05);
6060
}
6161

62-
/* Footer */
63-
footer {
64-
border-top: 1px solid #1e053a;
62+
.button--primary {
63+
box-shadow: 0 4px 14px 0 var(--glow-accent);
6564
}

‎src/pages/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ import styles from './index.module.css';
1010
function HomepageHeader() {
1111
const { siteConfig } = useDocusaurusContext();
1212
return (
13-
<header className={clsx('hero hero--primary', styles.heroBanner)}>
13+
<header className={clsx('hero', styles.heroBanner)}>
1414
<div className="container">
1515
<Heading as="h1" className="hero__title">
1616
{siteConfig.title}
1717
</Heading>
1818
<p className="hero__subtitle">{siteConfig.tagline}</p>
1919
<div className={styles.buttons}>
2020
<Link
21-
className="button button--secondary button--lg"
21+
className="button button--primary button--lg"
2222
to="/docs/intro">
2323
Get Started 🐶
2424
</Link>

‎src/pages/index.module.css‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,27 @@
44
*/
55

66
.heroBanner {
7-
padding: 5rem 0;
7+
padding: 8rem 0;
88
text-align: center;
99
position: relative;
1010
overflow: hidden;
11-
background: linear-gradient(135deg, #0b0118, #090113);
12-
color: var(--ifm-font-color-base);
11+
background: radial-gradient(circle at center, #1a0233 0%, #080112 100%);
12+
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
13+
}
14+
15+
.heroBanner :global(.hero__title) {
16+
font-size: 4rem;
17+
font-weight: 800;
18+
letter-spacing: -0.02em;
19+
margin-bottom: 1rem;
20+
}
21+
22+
.heroBanner :global(.hero__subtitle) {
23+
font-size: 1.5rem;
24+
color: #a0aec0;
25+
max-width: 800px;
26+
margin: 0 auto 2rem;
27+
font-weight: 400;
1328
}
1429

1530

0 commit comments

Comments
 (0)