github.com/wawandco/ox@v0.13.6-0.20230809142027-913b3d837f2a/docs/web/src/components/HomepageFeatures.js (about)

     1  import React from 'react';
     2  import clsx from 'clsx';
     3  import styles from './HomepageFeatures.module.css';
     4  
     5  const FeatureList = [
     6    {
     7      title: 'Development streamlined',
     8      description: (
     9        <>
    10          Ox aims to facilitate development tasks. It is a tool that helps you improve your team release cycle by automating repetitive tasks.
    11        </>
    12      ),
    13      image: "/img/streamline-illustration.svg",
    14    },
    15    {
    16      title: 'Maintainability in mind',
    17      description: (
    18        <>
    19          Besides allowing to accelerate your development, Ox aims to make your code more maintainable. It is thought not only for MVP's but large codebases.
    20        </>
    21      ),
    22      image: "/img/maintanability-illustration.svg",
    23    },
    24    {
    25      title: 'Plugin System',
    26      description: (
    27        <>
    28          Extend or customize your development environment with plugins. Ox allows to plug the tools you need to get the job done.
    29        </>
    30      ),
    31      image: "/img/plugin-illustration.svg",
    32    },
    33  ];
    34  
    35  function Feature({image, title, description}) {
    36    return (
    37      <div className={clsx('col col--4')}>
    38        <div className="text--center" style={{marginBottom: 3 +"em", marginTop: 4 +"em"}}>
    39          <img src={image} style={{height: 180 + "px" }} />
    40        </div>
    41        <div className="text--center padding-horiz--md">
    42          <h3>{title}</h3>
    43          <p>{description}</p>
    44        </div>
    45      </div>
    46    );
    47  }
    48  
    49  export default function HomepageFeatures() {
    50    return (
    51      <section className={styles.features}>
    52        <div className="container">
    53          <div className="row">
    54            {FeatureList.map((props, idx) => (
    55              <Feature key={idx} {...props} />
    56            ))}
    57          </div>
    58        </div>
    59      </section>
    60    );
    61  }