Skip to content

Commit 8abb891

Browse files
AmyrAhmadyAmyrAhmady
authored
Merge pull request #1121 from itsneufox/homepage-fix
Homepage
2 parents ef6c59b + 6ad8b0e commit 8abb891

File tree

4 files changed

+450
-185
lines changed

4 files changed

+450
-185
lines changed

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

Lines changed: 26 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const FeatureList: FeatureItem[] = [
2121
<>
2222
Got an old AMX lying about? Load it up on the open.mp server straight
2323
out of the box and join your friends playing on the SA:MP client. Then
24-
when you want to enhance your code try our...
24+
when you want to enhance your code look in our docs.
2525
</>
2626
),
2727
link: "/docs",
@@ -34,7 +34,7 @@ const FeatureList: FeatureItem[] = [
3434
<>
3535
We've stuck with pawn, but with a new compiler engineered to make your
3636
code more robust, and more functions to manipulate the server and
37-
client. If that's still not enough there's an...
37+
client.
3838
</>
3939
),
4040
link: "https://github.com/openmultiplayer/omp-stdlib/#openmp-includes",
@@ -47,7 +47,7 @@ const FeatureList: FeatureItem[] = [
4747
<>
4848
The server is fully open source, and we welcome all contributions big or
4949
small. Help write the next version, or just post about any problems you
50-
find; despite our attempts to have...
50+
find, despite our attempts to have perfect code, bugs happen and your feedback is valuable.
5151
</>
5252
),
5353
link: "https://github.com/openmultiplayer",
@@ -60,65 +60,52 @@ const FeatureList: FeatureItem[] = [
6060
<>
6161
Get access to all the server features available in pawn, plus the
6262
universe of C++ libraries and frameworks. Once you've mastered this why
63-
not help improve the server via our...
63+
not help improve the server via our open contribution process on GitHub.
6464
</>
6565
),
6666
link: "https://github.com/openmultiplayer/open.mp-sdk",
6767
linkText: "Check out SDK repository",
6868
},
6969
];
7070

71-
function Feature({ title, Img, description, link, linkText }: FeatureItem) {
71+
const Feature = ({ title, Img, description, link, linkText }: FeatureItem) => {
7272
return (
73-
<div
74-
style={{
75-
display: "flex",
76-
flexDirection: "column",
77-
alignItems: "center",
78-
maxWidth: 500,
79-
flexGrow: 1,
80-
}}
81-
>
82-
<div className="text--center">
73+
<div className={styles.featureItem}>
74+
<div className={styles.featureImageContainer}>
8375
<Image
84-
className={styles.featureSvg}
76+
className={styles.featureImage}
8577
sources={{ light: Img, dark: Img }}
78+
alt={`${title} illustration`}
8679
/>
8780
</div>
88-
<div className="text--center padding-horiz--md">
81+
<div className={styles.featureContent}>
8982
<Heading as="h3">{title}</Heading>
9083
<p>{description}</p>
9184
</div>
92-
<div style={{ display: "flex", flexDirection: "column", flex: 1 }} />
93-
<Link
94-
style={{ alignSelf: "center" }}
95-
className={clsx("button button--primary button--md", styles.button)}
96-
to={link}
97-
>
98-
{linkText}
99-
</Link>
85+
<div className={styles.featureFooter}>
86+
<Link
87+
className={clsx("button button--primary button--md", styles.button)}
88+
to={link}
89+
>
90+
{linkText}
91+
</Link>
92+
</div>
10093
</div>
10194
);
102-
}
95+
};
10396

104-
export default function HomepageFeatures(): ReactNode {
97+
const HomepageFeatures = (): JSX.Element => {
10598
return (
106-
<section className={styles.features}>
99+
<section className={styles.featuresSection}>
107100
<div className="container">
108-
<div className="row" style={{ justifyContent: "space-around" }}>
109-
{FeatureList.filter((_, index) => index < 2).map((props, idx) => (
110-
<Feature key={idx} {...props} />
111-
))}
112-
</div>
113-
<div
114-
className="row margin-top--lg"
115-
style={{ justifyContent: "space-around" }}
116-
>
117-
{FeatureList.filter((_, index) => index >= 2).map((props, idx) => (
101+
<div className={styles.featuresRow}>
102+
{FeatureList.map((props, idx) => (
118103
<Feature key={idx} {...props} />
119104
))}
120105
</div>
121106
</div>
122107
</section>
123108
);
124-
}
109+
};
110+
111+
export default HomepageFeatures;

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

Lines changed: 125 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,131 @@
1-
.features {
1+
.featuresSection {
22
display: flex;
33
align-items: center;
4-
padding: 2rem 0;
4+
padding: 0 0 3rem;
55
width: 100%;
6+
background: none;
7+
position: relative;
8+
overflow: hidden;
69
}
710

8-
.featureSvg {
9-
height: 200px;
10-
width: 200px;
11+
.featuresRow {
12+
display: flex;
13+
flex-wrap: wrap;
14+
justify-content: space-around;
15+
gap: 2rem;
16+
}
17+
18+
.featureItem {
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
max-width: 450px;
23+
flex: 1 1 calc(50% - 2rem);
24+
min-width: 280px;
25+
padding: 1.5rem;
26+
border-radius: 12px;
27+
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
28+
transition: transform 0.3s ease, box-shadow 0.3s ease;
29+
background-color: var(--ifm-card-background-color);
30+
animation: fadeInUp 0.5s ease forwards;
31+
opacity: 0;
32+
}
33+
34+
.featureItem:hover {
35+
transform: translateY(-5px);
36+
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
37+
}
38+
39+
.featureItem:nth-child(1) { animation-delay: 0.1s; }
40+
.featureItem:nth-child(2) { animation-delay: 0.2s; }
41+
.featureItem:nth-child(3) { animation-delay: 0.3s; }
42+
.featureItem:nth-child(4) { animation-delay: 0.4s; }
43+
44+
.featureImageContainer {
45+
text-align: center;
46+
margin-bottom: 1.25rem;
47+
padding: 0.75rem;
48+
border-radius: 50%;
49+
background-color: var(--ifm-color-primary-lightest);
50+
width: 100px;
51+
height: 100px;
52+
display: flex;
53+
align-items: center;
54+
justify-content: center;
55+
}
56+
57+
.featureImage {
58+
height: auto;
59+
width: 100%;
60+
max-width: 70px;
61+
object-fit: contain;
62+
}
63+
64+
.featureContent {
65+
text-align: center;
66+
padding: 0 1rem;
67+
flex-grow: 1;
68+
}
69+
70+
.featureContent h3 {
71+
margin-bottom: 0.75rem;
72+
font-size: 1.35rem;
73+
color: var(--ifm-color-primary);
74+
}
75+
76+
.featureContent p {
77+
color: var(--ifm-color-emphasis-700);
78+
line-height: 1.6;
79+
}
80+
81+
.featureFooter {
82+
margin-top: 1.5rem;
83+
width: 100%;
84+
display: flex;
85+
justify-content: center;
86+
}
87+
88+
.button {
89+
transition: all 0.2s ease-in-out;
90+
padding: 0.75rem 1.5rem;
91+
font-weight: 600;
92+
border-radius: 30px;
93+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
94+
}
95+
96+
.button:hover {
97+
transform: translateY(-2px);
98+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
99+
}
100+
101+
@keyframes fadeInUp {
102+
from {
103+
opacity: 0;
104+
transform: translateY(20px);
105+
}
106+
to {
107+
opacity: 1;
108+
transform: translateY(0);
109+
}
11110
}
111+
112+
@media (max-width: 768px) {
113+
.featureItem {
114+
flex: 1 1 100%;
115+
margin-bottom: 1.5rem;
116+
}
117+
118+
.featuresRow {
119+
flex-direction: column;
120+
gap: 1.5rem;
121+
}
122+
123+
.featureImageContainer {
124+
width: 90px;
125+
height: 90px;
126+
}
127+
128+
.featureContent h3 {
129+
font-size: 1.25rem;
130+
}
131+
}

0 commit comments

Comments
 (0)