Enhance Homepage Features with Dynamic Content and Improved UX

src/components/HomepageFeatures/index.js

@@ -1,45 +1,12 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 
-const FeatureList = [
-  {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
-      </>
-    ),
-  },
-  {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
-    description: (
-      <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
-      </>
-    ),
-  },
-  {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
-      </>
-    ),
-  },
-];
-
-function Feature({Svg, title, description}) {
+function Feature({ Svg, title, description }) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
+        <Svg className={styles.featureSvg} role="img" aria-label={title} />
       </div>
       <div className="text--center padding-horiz--md">
         <h3>{title}</h3>
@@ -50,15 +17,42 @@ function Feature({Svg, title, description}) {
 }
 
 export default function HomepageFeatures() {
+  const [featureList, setFeatureList] = useState([]);
+  const [filter, setFilter] = useState('');
+
+  useEffect(() => {
+    async function fetchFeatures() {
+      try {
+        const response = await fetch('https://example.com/api/features');
+        const data = await response.json();
+        setFeatureList(data);
+      } catch (error) {
+        console.error('Error fetching feature list:', error);
+      }
+    }
+    fetchFeatures();
+  }, []);
+
+  const filteredFeatures = featureList.filter(feature =>
+    feature.title.toLowerCase().includes(filter.toLowerCase())
+  );
+
   return (
     <section className={styles.features}>
       <div className="container">
+        <input
+          type="text"
+          placeholder="Filter features"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+          aria-label="Filter features"
+        />
         <div className="row">
-          {FeatureList.map((props, idx) => (
+          {filteredFeatures.map((props, idx) => (
             <Feature key={idx} {...props} />
           ))}
         </div>
       </div>
     </section>
   );
-}
+}

src/components/HomepageFeatures/styles.module.css

@@ -3,9 +3,37 @@
   align-items: center;
   padding: 2rem 0;
   width: 100%;
+  transition: transform 0.3s ease-in-out;
+}
+
+.features:hover {
+  transform: scale(1.05);
 }
 
 .featureSvg {
   height: 200px;
   width: 200px;
+  transition: transform 0.3s ease-in-out;
+}
+
+.featureSvg:hover {
+  transform: rotate(10deg);
 }
+
+@media (max-width: 768px) {
+  .features {
+    flex-direction: column;
+  }
+
+  .featureSvg {
+    height: 150px;
+    width: 150px;
+  }
+}
+
+@media (max-width: 480px) {
+  .featureSvg {
+    height: 100px;
+    width: 100px;
+  }
+}