docs(components): update main components page to match sidebar sections (#4195)

Co-authored-by: Brandy Smith <[email protected]>

Author: brandyscarney

docs/components.md

@@ -19,7 +19,7 @@ import DocsCards from '@components/global/DocsCards';
   `}</style>
 </head>
 
-Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the [API Index](api.md) for a complete list of each component and sub-component.
+Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the [API Index](api.md) for a complete list of each component and sub-component.
 
 <intro-end />
 
@@ -49,8 +49,9 @@ Ionic apps are made of high-level building blocks called Components, which allow
 </DocsCard>
 
 <DocsCard header="Card" href="api/card" icon="/icons/component-card-icon.png">
-  <!-- prettier-ignore -->
-  <p>Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.</p>
+  <p>
+    Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.
+  </p>
 </DocsCard>
 
 <DocsCard header="Checkbox" href="api/checkbox" icon="/icons/component-checkbox-icon.png">
@@ -85,7 +86,7 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <p>Infinite scroll allows you to load new data as the user scrolls through your app.</p>
 </DocsCard>
 
-<DocsCard header="Input" href="api/input" icon="/icons/component-input-icon.png">
+<DocsCard header="Inputs" href="api/input" icon="/icons/component-input-icon.png">
   <p>Inputs provides a way for users to enter data in your app.</p>
 </DocsCard>
 
@@ -119,10 +120,6 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <p>Navigation is how users move between different pages in your app.</p>
 </DocsCard>
 
-<DocsCard header="OTP Input" href="api/input-otp" icon="/icons/component-input-otp-icon.png">
-  <p>OTP inputs offer a simple way to enter one-time passwords using multiple boxes with automatic focus.</p>
-</DocsCard>
-
 <DocsCard header="Popover" href="api/popover" icon="/icons/component-popover-icon.png">
   <p>Popover provides an easy way to present information or options without changing contexts.</p>
 </DocsCard>
@@ -135,6 +132,10 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <p>Radio inputs allow you to present a set of exclusive options.</p>
 </DocsCard>
 
+<DocsCard header="Range" href="api/range" icon="/icons/component-range-icon.png">
+  <p>Range sliders let users select a value by dragging a knob along a track.</p>
+</DocsCard>
+
 <DocsCard header="Refresher" href="api/refresher" img="/icons/feature-component-refresher-icon.png">
   <p>Refresher provides pull-to-refresh functionality on a content component.</p>
 </DocsCard>
@@ -164,7 +165,7 @@ Ionic apps are made of high-level building blocks called Components, which allow
 </DocsCard>
 
 <DocsCard header="Toast" href="api/toast" icon="/icons/component-toast-icon.png">
-  <p>Toast is used to show a notification over the top of an app's content. It can be temporary or dismissible.</p>
+  <p>Toasts are subtle notifications that appear over your app's content without interrupting user interaction.</p>
 </DocsCard>
 
 <DocsCard header="Toggle" href="api/toggle" icon="/icons/component-toggle-icon.png">

sidebars.js

@@ -252,15 +252,15 @@ module.exports = {
     },
     {
       type: 'category',
-      label: 'Action Sheet',
+      label: 'Accordion',
       collapsed: false,
-      items: ['api/action-sheet'],
+      items: ['api/accordion', 'api/accordion-group'],
     },
     {
       type: 'category',
-      label: 'Accordion',
+      label: 'Action Sheet',
       collapsed: false,
-      items: ['api/accordion', 'api/accordion-group'],
+      items: ['api/action-sheet'],
     },
     {
       type: 'category',
@@ -276,7 +276,7 @@ module.exports = {
     },
     {
       type: 'category',
-      label: 'Breadcrumb',
+      label: 'Breadcrumbs',
       collapsed: false,
       items: ['api/breadcrumb', 'api/breadcrumbs'],
     },
@@ -337,19 +337,19 @@ module.exports = {
     },
     {
       type: 'category',
-      label: 'Infinite Scroll',
+      label: 'Icons',
       collapsed: false,
-      items: ['api/infinite-scroll', 'api/infinite-scroll-content'],
+      items: ['api/icon'],
     },
     {
       type: 'category',
-      label: 'Icons',
+      label: 'Infinite Scroll',
       collapsed: false,
-      items: ['api/icon'],
+      items: ['api/infinite-scroll', 'api/infinite-scroll-content'],
     },
     {
       type: 'category',
-      label: 'Input',
+      label: 'Inputs',
       collapsed: false,
       items: ['api/input', 'api/input-password-toggle', 'api/input-otp', 'api/textarea'],
     },