import clsx from 'clsx';
import Heading from '@theme/Heading';
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}) {
//   return (
//     <div className={clsx('col col--4')}>
//       <div className="text--center">
//         <Svg className={styles.featureSvg} role="img" />
//       </div>
//       <div className="text--center padding-horiz--md">
//         <Heading as="h3">{title}</Heading>
//         <p>{description}</p>
//       </div>
//     </div>
//   );
// }

// export default function HomepageFeatures() {
//   return (
//     <section className={styles.features}>
//       <div className="container">
//         <div className="row">
//           {FeatureList.map((props, idx) => (
//             <Feature key={idx} {...props} />
//           ))}
//         </div>
//       </div>
//     </section>
//   );
// }


// const FeatureList = [
//   {
//     title: 'Developer-Friendly',
//     Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
//     description: (
//       <>
//         Cloudtopiaa Cloud is designed with developers in mind, offering a seamless
//         and intuitive environment for building, scaling, and managing cloud infrastructure.
//         Get started quickly with our comprehensive reference materials and documentation.
//       </>
//     ),
//   },
//   {
//     title: 'Focus on Cloud Solutions',
//     Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
//     description: (
//       <>
//         Cloudtopiaa Cloud allows you to focus on building innovative cloud solutions while
//         we handle the infrastructure. Explore our in-depth docs and API references for 
//         managing instances, storage, and network configurations.
//       </>
//     ),
//   },
//   {
//     title: 'Powered by Robust Infrastructure',
//     Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
//     description: (
//       <>
//         Built on a scalable infrastructure, Cloudtopiaa Cloud enables you to deploy and manage
//         cloud services with ease. Leverage the power of our platform with custom solutions 
//         and extensive reference guides.
//       </>
//     ),
//   },
// ];

// function Feature({Svg, title, description}) {
//   return (
//     <div className={clsx('col col--4')}>
//       <div className="text--center">
//         <Svg className={styles.featureSvg} role="img" />
//       </div>
//       <div className="text--center padding-horiz--md">
//         <h3>{title}</h3>
//         <p>{description}</p>
//       </div>
//     </div>
//   );
// }

// export default function HomepageFeatures() {
//   return (
//     <section className={styles.features}>
//       <div className="container">
//         <div className="row">
//           {FeatureList.map((props, idx) => (
//             <Feature key={idx} {...props} />
//           ))}
//         </div>
//       </div>
//     </section>
//   );
// }


const FeatureList = [
  {
    title: 'Explore Technical Tutorials',
    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
    description: (
      <>
        If you're looking to understand how to technically implement and use Cloudtopiaa Cloud, 
        head over to the <strong>Tutorials</strong> section. Our detailed guides will help you 
        set up, configure, and optimize your cloud infrastructure step by step.
      </>
    ),
  },
  {
    title: 'Stay Updated with Latest Blogs',
    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
    description: (
      <>
        To stay on top of the latest updates, tips, and best practices for using Cloudtopiaa Cloud, 
        check out our <strong>Cloudtopiaa Blogs</strong> section. You'll find expert advice and 
        insights that keep you informed on the newest trends and features.
      </>
    ),
  },
  {
    title: 'Reference Documentation',
    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
    description: (
      <>
        Need detailed documentation? Visit our <strong>Docs</strong> section to find in-depth 
        reference material on using Cloudtopiaa Cloud's API, instance management, and much more. 
        Everything you need to know to get the most out of the platform is available there.
      </>
    ),
  },
];

function Feature({Svg, title, description}) {
  return (
    <div className={clsx('col col--4')}>
      <div className="text--center">
        <Svg className={styles.featureSvg} role="img" />
      </div>
      <div className="text--center padding-horiz--md">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
    </div>
  );
}

export default function HomepageFeatures() {
  return (
    <section className={styles.features}>
      <div className="container">
        <div className="row">
          {FeatureList.map((props, idx) => (
            <Feature key={idx} {...props} />
          ))}
        </div>
      </div>
    </section>
  );
}
