refactor: home page style updates (#183)

Author: mrksbnc

package.json

@@ -14,5 +14,5 @@
   "devDependencies": {
     "prettier": "^3.8.1"
   },
-  "packageManager": "pnpm@10.5.2+sha512.da9dc28cd3ff40d0592188235ab25d3202add8a207afbedc682220e4a0029ffbff4562102b9e6e46b4e3f9e8bd53e6d05de48544b0c57d4b0179e22c76d1199b"
+  "packageManager": "pnpm@10.28.1+sha512.7d7dbbca9e99447b7c3bf7a73286afaaf6be99251eb9498baefa7d406892f67b879adb3a1d7e687fc4ccc1a388c7175fbaae567a26ab44d1067b54fcb0d6a316"
 }

website/src/components/HomepageFeatures/index.tsx

@@ -40,18 +40,20 @@ const FeatureList: FeatureItem[] = [
   },
 ];
 
-function Feature({ title, imgSrc, img, description, buttonHref, buttonText }: FeatureItem) {
+function Feature({ title, imgSrc, img, description, buttonHref, buttonText }: FeatureItem): JSX.Element {
   return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">{img ? img : <img src={imgSrc} className={styles.featureSvg} role="img" />}</div>
-      <div className="padding-horiz--md">
-        <Heading as="h3">{title}</Heading>
+    <div className={styles.featureCol}>
+      <div>
+        {img ? img : <img src={imgSrc} className={styles.featureSvg} role="img" />}
+        <Heading as="h3" className={styles.featureHeading}>
+          {title}
+        </Heading>
         <p>{description}</p>
-        <div className={styles.buttons}>
-          <Link href={buttonHref} className="button button--secondary button--lg">
-            {buttonText}
-          </Link>
-        </div>
+      </div>
+      <div className={styles.buttons}>
+        <Link href={buttonHref} className="button button--secondary button--lg">
+          {buttonText}
+        </Link>
       </div>
     </div>
   );
@@ -61,7 +63,7 @@ export default function HomepageFeatures(): JSX.Element {
   return (
     <section className={styles.features}>
       <div className="container">
-        <div className="row">
+        <div className={styles.featureList}>
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />
           ))}

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

@@ -1,8 +1,8 @@
 .features {
+  width: 100%;
   display: flex;
   align-items: center;
-  padding: 2rem 0;
-  width: 100%;
+  padding-bottom: 2rem;
 }
 
 .featureSvg {
@@ -11,6 +11,56 @@
 }
 
 .featureImg {
-  height: 400px;
   width: 400px;
+  height: 400px;
+  border-radius: 0.75rem;
+}
+
+.featureCol {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  max-width: 400px;
+  width: 100%;
+}
+
+.featureList {
+  gap: 0.5rem;
+  display: flex;
+  padding-top: 2rem;
+}
+
+.featureCol > div:first-child {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+
+.featureCol h3,
+.featureCol p {
+  width: 100%;
+  text-align: left;
+}
+
+.featureHeading {
+  font-size: 1.5rem;
+  padding-top: 0.75rem;
+}
+
+.buttons {
+  width: 100%;
+  margin-top: 1rem;
+}
+
+@media screen and (max-width: 768px) {
+  .featureList {
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .featureCol {
+    width: 100%;
+    max-width: 400px;
+  }
 }