Skip to content

Commit bac384f

Browse files
tovi-fhetovi-fhe
authored
Update homepage design (#105)
* Update homepage design * Fix book layout
1 parent 5476bb6 commit bac384f

File tree

10 files changed

+216
-235
lines changed

10 files changed

+216
-235
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"react-dom": "^18.2.0",
3232
"react-ga4": "^2.1.0",
3333
"react-gtm-module": "^2.0.11",
34+
"react-icons": "^5.5.0",
3435
"react-tsparticles": "^2.12.2",
3536
"styled-components": "^6.1.16",
3637
"tailwindcss": "^3.4.1",

‎pnpm-lock.yaml‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/HomepageFeatures/index.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -95,27 +95,27 @@ export default function HomepageFeatures(): JSX.Element {
9595
return (
9696
<section className={styles.features}>
9797
<div className="container" style={{ marginBottom: "80px"}}>
98-
<div className="row" style={{ display: 'flex', justifyContent: 'center' , color: '#0073E6'}}>
99-
<Heading as="h1" className="text--center margin-bottom--lg orb-font" style={{ fontSize: 40, fontWeight: 'normal' }}>
98+
<div className="row" style={{ display: 'flex', justifyContent: 'flex-start' }}>
99+
<Heading as="h1" className="margin-bottom--lg orb-font" style={{ fontSize: 40, fontWeight: 'normal' }}>
100100
Useful Links
101101
</Heading>
102102
</div>
103103
{/* style={{ gap: "20px"}} */}
104-
<div className="row feature_container" style={{ gap: "20px", justifyContent: "center" , color: colorMode === 'dark' ? '#E6F7FF' : '#003366'}}>
104+
<div className="row feature_container" style={{ gap: "20px", justifyContent: "space-between" , color: colorMode === 'dark' ? '#E6F7FF' : '#003366'}}>
105105
{FeatureList.map((props, idx) => (
106-
<div key={idx} className="col col--3">
106+
<div key={idx} style={{ padding: '0px' }} className="col col--3">
107107
<Feature {...props} />
108108
</div>
109109
))}
110110
</div>
111-
<div className="row" style={{ display: 'flex', justifyContent: 'center', marginTop: '40px', color: '#0073E6'}}>
112-
<Heading as="h1" className="text--center orb-font" style={{ fontSize: 40, fontWeight: 'normal', color: '#0073E6'}}>
111+
<div className="row" style={{ display: 'flex', justifyContent: 'center', marginTop: '80px'}}>
112+
<Heading as="h1" className="text--center orb-font" style={{ fontSize: 40, fontWeight: 'normal'}}>
113113
Connect With US
114114
</Heading>
115115
</div>
116116
<div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', marginTop: '40px', gap: '20px'}}>
117117
<div className={clsx("card", styles.custom__card_1)} style={{ height: '200px', width: '500px', padding: '20px' , color: '#0073E6'}}>
118-
<div className="orb-font" style={{ fontSize: 26, fontWeight: 'bold' }}>Fhenix Developer Updates</div>
118+
<div className="orb-font" style={{ fontSize: 26, fontWeight: 'bold', color: '#0073E6' }}>Fhenix Developer Updates</div>
119119
<div style={{ color: colorMode === 'dark' ? '#E6F7FF' : '#003366'}}>Stay up-to-date on the latest Fhenix developer news</div>
120120
<div className="row" style={{ flex: 1 }}></div>
121121
<div style={{ display: 'flex', justifyContent: 'flex-start', marginTop: '10px' }}>
@@ -128,7 +128,7 @@ export default function HomepageFeatures(): JSX.Element {
128128

129129
</div>
130130
<div className={clsx("card", styles.custom__card_1)} style={{ height: '200px', width: '500px', padding: '20px', color: '#0073E6'}}>
131-
<div className="orb-font" style={{ fontSize: 26, fontWeight: 'bold' }}>Even More Resources</div>
131+
<div className="orb-font" style={{ fontSize: 26, fontWeight: 'bold', color: '#0073E6' }}>Even More Resources</div>
132132
<div style={{ color: colorMode === 'dark' ? '#E6F7FF' : '#003366'}}>Hear from Fhenix co-founders, engineering and research teams, ecosystem projects, and more. Join us!</div>
133133
<div className="row" style={{ flex: 1 }}></div>
134134
<div style={{ display: 'flex', justifyContent: 'flex-start', marginTop: '10px' }}>

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

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -21,66 +21,68 @@
2121
}
2222

2323

24-
html[data-theme='light'] .custom__card:hover {
25-
background: linear-gradient(180deg, rgba(245, 241, 241, 0.849)0%, rgba(143, 152, 197, 0.2) 100%);
26-
box-shadow: 4px 4px 8px rgba(87, 100, 170, 0.3);
27-
}
28-
29-
html[data-theme='dark'] .custom__card:hover {
30-
background: linear-gradient(180deg, rgba(87, 100, 170, 0.2) 0%, rgba(143, 152, 197, 0.2) 100%);
31-
box-shadow: 4px 4px 8px rgba(87, 100, 170, 0.3);
32-
}
33-
34-
3524
.custom__card {
3625
/* Rectangle 39 */
3726
height: 308px;
38-
box-sizing: border-box;
39-
transition: box-shadow .3s;
27+
background: #D9F0FF;
28+
/* box-sizing: border-box; */
29+
transition: box-shadow .3s, background .3s;
4030
width: 100%;
4131
/* background: var(--ifm-color-background); */
42-
border: 1.5px solid var(--ifm-color-text);
32+
/* border: 1.5px solid var(--ifm-color-text); */
4333
/* box-shadow: 0px 0px 25px 0px rgba(255, 255, 255, 0.10); */
4434
border-radius: 20.2632px;
4535
/* justify-content: center; */
4636

4737
/* background: rgba(255, 255, 255, 0.05); */
4838
backdrop-filter: blur(39.0119514465332px);
4939

50-
border: 1px solid #7040C832;
40+
/* border: 1px solid #7040C832; */
41+
}
42+
43+
html[data-theme='dark'] .custom__card {
44+
background: #1A1A1A;
45+
color: #E6F7FF;
5146
}
5247

5348
.custom__card_1 {
5449
/* Rectangle 39 */
50+
background: #D9F0FF;
51+
5552
height: 308px;
5653
box-sizing: border-box;
57-
transition: box-shadow .3s;
54+
/* transition: box-shadow .3s; */
55+
transition: background .3s;
5856
width: 100%;
5957
min-width: 325px;
6058
/* background: var(--ifm-color-background); */
61-
border: 1.5px solid var(--ifm-color-text);
59+
/* border: 1.5px solid var(--ifm-color-text); */
6260
/* box-shadow: 0px 0px 25px 0px rgba(255, 255, 255, 0.10); */
6361
border-radius: 20.2632px;
6462
/* justify-content: center; */
6563

6664
/* background: rgba(28, 28, 28, 0.05); */
6765
backdrop-filter: blur(39.0119514465332px);
6866

69-
border: 1px solid #7040C832;
67+
/* border: 1px solid #7040C832; */
68+
}
69+
70+
html[data-theme='dark'] .custom__card_1 {
71+
background: #1A1A1A;
72+
color: #E6F7FF;
7073
}
7174

72-
html[data-theme='light'] .custom__card_1:hover {
73-
background: linear-gradient(180deg, rgba(245, 241, 241, 0.849)0%, rgba(143, 152, 197, 0.2) 100%);
74-
box-shadow: 4px 4px 8px rgba(87, 100, 170, 0.3);
75+
html[data-theme='light'] {
76+
background: #E6F7FF;
7577
}
7678

77-
html[data-theme='dark'] .custom__card_1:hover {
78-
background: linear-gradient(180deg, rgba(87, 100, 170, 0.2) 0%, rgba(143, 152, 197, 0.2) 100%);
79-
box-shadow: 4px 4px 8px rgba(87, 100, 170, 0.3);
80-
color: white;
79+
html[data-theme='dark'] {
80+
background: #141414;
8181
}
8282

8383

84+
85+
8486
@media (max-width: 1440px) {
8587
.custom__card {
8688
height: 400px;

‎src/css/custom.css‎

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,25 @@ pre code {
134134
src: url('../../static/fonts/Orbitron-VariableFont.ttf');
135135
}
136136

137+
@font-face {
138+
font-family: 'Orbitron';
139+
src: url('../../static/fonts/Orbitron-VariableFont.ttf');
140+
}
141+
142+
@font-face {
143+
font-family: 'RedditSans';
144+
src: url('../../static/fonts/RedditSans-VariableFont_wght.ttf');
145+
}
146+
147+
148+
@font-face {
149+
font-family: 'RedditMono';
150+
src: url('../../static/fonts/RedditMono-VariableFont_wght.ttf');
151+
}
152+
153+
154+
155+
137156
.hero {
138157
color: var(--ifm-color-text);
139158
padding-bottom: 0px;
@@ -251,7 +270,7 @@ pre code {
251270
display: inline-block;
252271
cursor: pointer;
253272
transition: all 0.2s ease-in-out;
254-
font-family: Orbitron;
273+
font-family: RedditSans;
255274
}
256275

257276
.docs-button:hover {
@@ -281,7 +300,7 @@ pre code {
281300
.tutorial-button {
282301
padding: 5px 10px;
283302
border: 1px #0073E6 solid;
284-
border-radius: 10px; /* Adjust as necessary for the roundness */
303+
border-radius: 50px; /* Adjust as necessary for the roundness */
285304

286305
color: #0073E6; /* Text color */
287306
font-size: 16px; /* Adjust as necessary */
@@ -290,7 +309,14 @@ pre code {
290309
display: inline-block;
291310
cursor: pointer;
292311
transition: all 0.2s ease-in-out;
293-
font-family: Orbitron;
312+
font-family: RedditSans;
313+
}
314+
315+
.tutorial-button:hover {
316+
background-color: #0073E6;
317+
color: white;
318+
text-decoration: none;
319+
294320
}
295321

296322
.tutorial-button img {
@@ -309,7 +335,12 @@ pre code {
309335
}
310336

311337
.orb-font {
312-
font-family: Orbitron;
338+
font-family: RedditMono;
339+
color: #003366;
340+
}
341+
342+
[data-theme='dark'] .orb-font {
343+
color: #E6F7FF; /* Using the same color as your --ifm-color-text in dark mode */
313344
}
314345

315346
/*
@@ -425,14 +456,13 @@ pre code {
425456
}
426457
}
427458

428-
@media (max-width: 996px) {
459+
460+
@media (max-width: 796px) {
429461

430462
.heroBanner {
431463
padding: 2rem;
432464
}
433-
.hide-small-width {
434-
display: none;
435-
}
465+
436466
.button {
437467
width: 30%;
438468
min-width: 250px;
@@ -443,6 +473,11 @@ pre code {
443473
}
444474
}
445475

476+
@media (max-width: 1000px) {
477+
.hide-small-width {
478+
display: none;
479+
}
480+
}
446481

447482
@media (min-width: 1400px) {
448483
.button--lol {
@@ -451,9 +486,6 @@ pre code {
451486
.heroBanner {
452487

453488
}
454-
.hide-small-width {
455-
display: block;
456-
}
457489
}
458490

459491
/* discord */

0 commit comments

Comments
 (0)