mistake on achieve word corrected

Author: olafch

docs/src/components/HomepageFeatures/index.tsx

@@ -33,7 +33,7 @@ const FeatureList: FeatureItem[] = [
     title: 'Powered by React Native and Expo',
     Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
     description: (
-      <>We are using the newest tools to acheive the best performance and developer experience.</>
+      <>We are using the newest tools to achieve the best performance and developer experience.</>
     ),
   },
 ]

docs/src/pages/index.module.css

@@ -3,6 +3,11 @@
  * and scoped locally.
  */
 
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
 .heroBanner {
   padding: 4rem 0;
   text-align: center;
@@ -27,11 +32,12 @@
 }
 
 .imageWrapper {
-  padding: 0 0px;
+  padding: 0 16px;
 }
 
 .image {
-  width: 30%;
+  width: 100%;
+  max-width: 400px;
   height: auto;
   border-radius: 12px;
 }

docs/src/pages/index.tsx

@@ -1,36 +1,25 @@
-import React from 'react'
-import Link from '@docusaurus/Link'
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import HomepageFeatures from '@site/src/components/HomepageFeatures'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import styles from './index.module.css'
 import Heading from '@theme/Heading'
+import Link from '@docusaurus/Link'
 import Layout from '@theme/Layout'
-import clsx from 'clsx'
 import Slider from 'react-slick'
-import styles from './index.module.css'
+import React from 'react'
+import clsx from 'clsx'
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext()
 
   const settings = {
-    dots: true,
-    infinite: true,
-    speed: 500,
-    slidesToShow: 1,
-    slidesToScroll: 1,
+    adaptiveHeight: true,
+    arrows: true,
     autoplay: true,
     autoplaySpeed: 3000,
-    // centerPadding: '100px',
-    arrows: true,
-    centerMode: true,
-    adaptiveHeight: true,
+    dots: true,
+    infinite: true,
+    pauseOnHover: false,
     responsive: [
-      {
-        breakpoint: 1200,
-        settings: {
-          slidesToShow: 2,
-          slidesToScroll: 1,
-        },
-      },
       {
         breakpoint: 1000,
         settings: {
@@ -39,20 +28,16 @@ function HomepageHeader() {
         },
       },
       {
-        breakpoint: 500,
-        settings: {
-          slidesToShow: 2,
-          slidesToScroll: 1,
-        },
-      },
-      {
-        breakpoint: 300,
+        breakpoint: 550,
         settings: {
           slidesToShow: 1,
           slidesToScroll: 1,
         },
       },
     ],
+    slidesToScroll: 1,
+    slidesToShow: 3,
+    speed: 500,
   }
 
   return (
@@ -115,99 +100,3 @@ export default function Home(): JSX.Element {
     </Layout>
   )
 }
-
-// import React from 'react'
-// import Link from '@docusaurus/Link'
-// import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
-// import HomepageFeatures from '@site/src/components/HomepageFeatures'
-// import Heading from '@theme/Heading'
-// import Layout from '@theme/Layout'
-// import clsx from 'clsx'
-// import Slider from 'react-slick'
-// import styles from './index.module.css'
-
-// function HomepageHeader() {
-//   const { siteConfig } = useDocusaurusContext()
-
-//   const settings = {
-//     dots: true,
-//     infinite: true,
-//     speed: 500,
-//     slidesToShow: 1,
-//     centerMode: true,
-//     slidesToScroll: 1,
-//     centerPadding: '400px',
-//     autoplay: true,
-//     draggable: true,
-//     autoplaySpeed: 2500,
-//     responsive: [
-//       {
-//         breakpoint: 996, //996
-//         settings: {
-//           slidesToShow: 1,
-//           slidesToScroll: 1,
-//         },
-//       },
-//     ],
-//   }
-
-//   return (
-//     <header className={clsx('hero hero--primary padding-vert--xl', styles.heroBanner)}>
-//       <div className="container padding-vert--xl">
-//         <Heading as="h1" className="hero__title">
-//           {siteConfig.title}
-//         </Heading>
-//         <p className="hero__subtitle">{siteConfig.tagline}</p>
-//         <div className={styles.buttons}>
-//           <Link className="button button--secondary button--lg" to="/docs/overview">
-//             See docs
-//           </Link>
-//         </div>
-//         <div className={styles.sliderContainer}>
-//           <Slider {...settings}>
-//             <div>
-//               <img
-//                 src="/img/iphone_signup_draft_light.png"
-//                 alt="First iPhone draft"
-//                 className={styles.image}
-//               />
-//             </div>
-//             <div>
-//               <img
-//                 src="/img/iphone_signup_draft_dark.png"
-//                 alt="Second iPhone draft"
-//                 className={styles.image}
-//               />
-//             </div>
-//             <div>
-//               <img
-//                 src="/img/iphone_settings_draft_light.png"
-//                 alt="Third iPhone draft"
-//                 className={styles.image}
-//               />
-//             </div>
-//             <div>
-//               <img
-//                 src="/img/iphone_settings_draft_dark.png"
-//                 alt="Fourth iPhone draft"
-//                 className={styles.image}
-//               />
-//             </div>
-//           </Slider>
-//         </div>
-//       </div>
-//     </header>
-//   )
-// }
-
-// export default function Home(): JSX.Element {
-//   const { siteConfig } = useDocusaurusContext()
-//   return (
-//     <Layout title={siteConfig.title} description="Description will go into a meta tag in <head />">
-//       <HomepageHeader />
-//       <main>
-//         <HomepageFeatures />
-//       </main>
-//     </Layout>
-//   )
-// }