Refactor HomepageFeatures component: improve feature descriptions and enhance layout styling

Author: itsneufox

frontend/src/components/HomepageFeatures/index.tsx

@@ -21,7 +21,7 @@ const FeatureList: FeatureItem[] = [
       <>
         Got an old AMX lying about? Load it up on the open.mp server straight
         out of the box and join your friends playing on the SA:MP client. Then
-        when you want to enhance your code try our...
+        when you want to enhance your code look in our docs.
       </>
     ),
     link: "/docs",
@@ -34,7 +34,7 @@ const FeatureList: FeatureItem[] = [
       <>
         We've stuck with pawn, but with a new compiler engineered to make your
         code more robust, and more functions to manipulate the server and
-        client. If that's still not enough there's an...
+        client.
       </>
     ),
     link: "https://github.com/openmultiplayer/omp-stdlib/#openmp-includes",
@@ -47,7 +47,7 @@ const FeatureList: FeatureItem[] = [
       <>
         The server is fully open source, and we welcome all contributions big or
         small. Help write the next version, or just post about any problems you
-        find; despite our attempts to have...
+        find, despite our attempts to have perfect code, bugs happen and your feedback is valuable.
       </>
     ),
     link: "https://github.com/openmultiplayer",
@@ -60,65 +60,52 @@ const FeatureList: FeatureItem[] = [
       <>
         Get access to all the server features available in pawn, plus the
         universe of C++ libraries and frameworks. Once you've mastered this why
-        not help improve the server via our...
+        not help improve the server via our open contribution process on GitHub.
       </>
     ),
     link: "https://github.com/openmultiplayer/open.mp-sdk",
     linkText: "Check out SDK repository",
   },
 ];
 
-function Feature({ title, Img, description, link, linkText }: FeatureItem) {
+const Feature = ({ title, Img, description, link, linkText }: FeatureItem) => {
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        maxWidth: 500,
-        flexGrow: 1,
-      }}
-    >
-      <div className="text--center">
+    <div className={styles.featureItem}>
+      <div className={styles.featureImageContainer}>
         <Image
-          className={styles.featureSvg}
+          className={styles.featureImage}
           sources={{ light: Img, dark: Img }}
+          alt={`${title} illustration`}
         />
       </div>
-      <div className="text--center padding-horiz--md">
+      <div className={styles.featureContent}>
         <Heading as="h3">{title}</Heading>
         <p>{description}</p>
       </div>
-      <div style={{ display: "flex", flexDirection: "column", flex: 1 }} />
-      <Link
-        style={{ alignSelf: "center" }}
-        className={clsx("button button--primary button--md", styles.button)}
-        to={link}
-      >
-        {linkText}
-      </Link>
+      <div className={styles.featureFooter}>
+        <Link
+          className={clsx("button button--primary button--md", styles.button)}
+          to={link}
+        >
+          {linkText}
+        </Link>
+      </div>
     </div>
   );
-}
+};
 
-export default function HomepageFeatures(): ReactNode {
+const HomepageFeatures = (): JSX.Element => {
   return (
-    <section className={styles.features}>
+    <section className={styles.featuresSection}>
       <div className="container">
-        <div className="row" style={{ justifyContent: "space-around" }}>
-          {FeatureList.filter((_, index) => index < 2).map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-        <div
-          className="row margin-top--lg"
-          style={{ justifyContent: "space-around" }}
-        >
-          {FeatureList.filter((_, index) => index >= 2).map((props, idx) => (
+        <div className={styles.featuresRow}>
+          {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />
           ))}
         </div>
       </div>
     </section>
   );
-}
+};
+
+export default HomepageFeatures;