docs(guide): update the framework overview & quickstart guides

docs/angular/overview.md

@@ -14,33 +14,47 @@ sidebar_label: Overview
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
-`@ionic/angular` combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers.
+`@ionic/angular` brings the full power of the Ionic Framework to Angular developers. It offers seamless integration with the Angular ecosystem, so you can build high-quality cross-platform apps using familiar Angular tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities.
 
 ## Angular Version Support
 
-Ionic v7 supports Angular v14+. As part of their upgrade strategy, Angular has built-in tooling to help automate upgrades and provide feedback to developers whenever changes to an API occurred. This reduces update friction and keeps the ecosystem in a evergreen state.
+Ionic Angular supports the latest versions of Angular. For detailed information on supported versions and our support policy, see the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular).
 
 ## Angular Tooling
 
-With Ionic 4+, the official Angular stack for building an app and routing are used, so your app can fall in-line with the rest of the great Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps.
+Ionic uses the official Angular stack for building apps and routing, so your app can fall in line with the rest of the Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps.
+
+## Native Tooling
+
+[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Angular, enabling your apps to run natively on iOS, Android, and the web with a single codebase.
+
+## Installation
+
+```shell-session
+$ npm install -g @ionic/cli
+$ ionic start myApp tabs --type angular
+
+$ ionic serve █
+```
 
 ## Resources
 
 <DocsCards>
-  <DocsCard header="Getting Started" href="your-first-app" icon="/icons/feature-component-actionsheet-icon.png">
-    <p>Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.</p>
-  </DocsCard>
 
-<DocsCard header="Navigation" href="navigation" icon="/icons/feature-component-navigation-icon.png">
-  <p>Learn the basics of navigation inside your app with Ionic and Angular Router</p>
+<DocsCard header="Getting Started" href="quickstart" icon="/icons/guide-quickstart-icon.png">
+  <p>Quickly set up your first Ionic Angular app and learn the basics of the framework and CLI.</p>
+</DocsCard>
+
+<DocsCard header="Build Your First App" href="your-first-app" icon="/icons/logo-angular-icon.png">
+  <p>Build a real Photo Gallery app with Ionic Angular and native device features.</p>
 </DocsCard>
 
-<DocsCard header="Lifecycle" href="lifecycle" icon="/icons/feature-guide-components-icon.png">
-  <p>Learn about using Ionic lifecycle events in class components and with hooks</p>
+<DocsCard header="Navigation" href="navigation" icon="/icons/component-navigation-icon.png">
+  <p>Master navigation in Ionic Angular using Angular Router.</p>
 </DocsCard>
 
-<DocsCard header="Build Options" href="build-options" icon="/icons/logo-angular-icon.png">
-  <p>Learn about using Modules or Standalone Components in Ionic.</p>
+<DocsCard header="Components" href="/docs/components" icon="/icons/guide-components-icon.png">
+  <p>Explore Ionic’s rich library of UI components for building beautiful apps.</p>
 </DocsCard>
 
 </DocsCards>

docs/index.md

@@ -22,7 +22,7 @@ import DocsCards from '@components/global/DocsCards';
   <meta property="og:url" content="https://ionicframework.com/docs" />
 </head>
 
-Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md).
+Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.md), [React](react/overview.md), and [Vue](vue/overview.md).
 
 Get started building by [installing Ionic](intro/cli.md) or following our [First App Tutorial](intro/next.md#build-your-first-app) to learn the main concepts.
 
@@ -58,7 +58,7 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First
 
 ## Overview
 
-Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.md), [React](react.md), or [Vue](vue/overview.md). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we <a href="https://youtu.be/p3AN3igqiRc" target="_blank">created a video</a> to walk you through the basics.
+Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.md), [React](react/overview.md), or [Vue](vue/overview.md). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we <a href="https://youtu.be/p3AN3igqiRc" target="_blank">created a video</a> to walk you through the basics.
 
 ### One codebase, running everywhere
 

docs/react/overview.md

@@ -0,0 +1,60 @@
+---
+title: 'Ionic React Overview'
+sidebar_label: Overview
+---
+
+<head>
+  <title>Ionic React Overview | React Version Support and Tooling</title>
+  <meta
+    name="description"
+    content="@ionic/react combines the Ionic experience with the tooling and APIs tailored to React developers. Learn more about version support and resources in our React Overview."
+  />
+</head>
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+`@ionic/react` brings the full power of the Ionic Framework to React developers. It offers seamless integration with the React ecosystem, so you can build high-quality cross-platform apps using familiar React tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities.
+
+## React Version Support
+
+Ionic React supports the latest versions of React. For detailed information on supported versions and our support policy, see the [Ionic React Support Policy](/docs/reference/support#ionic-react).
+
+## React Tooling
+
+Ionic React works seamlessly with the React CLI and popular React tooling. You can use your favorite libraries for state management, testing, and more. Ionic React is designed to fit naturally into the React ecosystem, so you can use tools like Create React App, Vite, or Next.js to scaffold and build your apps.
+
+## Native Tooling
+
+[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Angular, enabling your apps to run natively on iOS, Android, and the web with a single codebase.
+
+## Installation
+
+```shell-session
+$ npm install -g @ionic/cli
+$ ionic start myApp tabs --type react
+
+$ ionic serve █
+```
+
+## Resources
+
+<DocsCards>
+
+<DocsCard header="Getting Started" href="quickstart" icon="/icons/guide-quickstart-icon.png">
+  <p>Quickly set up your first Ionic React app and learn the basics of the framework and CLI.</p>
+</DocsCard>
+
+<DocsCard header="Build Your First App" href="your-first-app" icon="/icons/logo-react-icon.png">
+  <p>Build a real Photo Gallery app with Ionic React and native device features.</p>
+</DocsCard>
+
+<DocsCard header="Navigation" href="navigation" icon="/icons/component-navigation-icon.png">
+  <p>Master navigation in Ionic React using React Router.</p>
+</DocsCard>
+
+<DocsCard header="Components" href="/docs/components" icon="/icons/guide-components-icon.png">
+  <p>Explore Ionic’s rich library of UI components for building beautiful apps.</p>
+</DocsCard>
+
+</DocsCards>

docs/vue/overview.md

@@ -14,30 +14,21 @@ sidebar_label: Overview
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
-`@ionic/vue` combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers.
+`@ionic/vue` brings the full power of the Ionic Framework to Vue developers. It offers seamless integration with the Vue ecosystem, so you can build high-quality cross-platform apps using familiar Vue tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities.
 
 ## Vue Version Support
 
-Ionic Vue is built on top of Vue 3.0.0. If you've built an app with early versions of Ionic Vue, you'll want to upgrade to the latest release and upgrade your Vue dependencies.
+Ionic Vue supports the latest versions of Vue. For detailed information on supported versions and our support policy, see the [Ionic Vue Support Policy](/docs/reference/support#ionic-vue).
 
 ## Vue Tooling
 
-Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meaning you'll be building with the Vue CLI and all of it's features. In addition, starter projects also ship with few features enabled by default, like Routing and TypeScript support.
+Ionic Vue projects use the same tooling as standard Vue CLI projects, so you can take advantage of the full Vue CLI feature set for building, testing, and deploying your apps. Starter projects come with useful features enabled by default, such as Vue Router for navigation and TypeScript support for type safety and improved developer experience.
 
 ## Native Tooling
 
-[Capacitor](https://capacitorjs.com) is the official cross-platform app runtime used to make your `Ionic Vue` web app run natively on iOS, Android, and the web.
+[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Vue, enabling your apps to run natively on iOS, Android, and the web with a single codebase.
 
-While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.md) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova).
-
-## From the Community
-
-<!-- cspell:disable -->
-
-- [Using Vue.js with Ionic & Capacitor](https://dev.to/aaronksaunders/using-vue-js-v3-beta-with-ionic-components-capacitor-plugins-2b6f) - Aaron Saunders
-- [Building Mobile Apps With Vue3 and Ionic](https://soshace.com/building-mobile-apps-with-vue3-and-ionic/) - Oluwaseun Raphael Afolayan
-
-<!-- cspell:enable -->
+While you can use many [Cordova](https://cordova.apache.org/) plugins with Ionic Vue, Capacitor is the recommended and fully supported solution. The [Ionic CLI](../cli.md) does not provide official Cordova integration for Ionic Vue projects. For more information on using Cordova plugins with Capacitor, see the [Capacitor documentation](https://capacitorjs.com/docs/cordova).
 
 ## Installation
 
@@ -51,16 +42,21 @@ $ ionic serve █
 ## Resources
 
 <DocsCards>
-  <DocsCard header="Getting Started" href="your-first-app" icon="/icons/feature-component-actionsheet-icon.png">
-    <p>Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.</p>
-  </DocsCard>
 
-<DocsCard header="Navigation" href="navigation" icon="/icons/feature-component-navigation-icon.png">
-  <p>Learn the basics of navigation inside your app with Ionic and Vue Router</p>
+<DocsCard header="Getting Started" href="quickstart" icon="/icons/guide-quickstart-icon.png">
+  <p>Quickly set up your first Ionic Vue app and learn the basics of the framework and CLI.</p>
+</DocsCard>
+
+<DocsCard header="Build Your First App" href="your-first-app" icon="/icons/logo-vue-icon.png">
+  <p>Build a real Photo Gallery app with Ionic Vue and native device features.</p>
+</DocsCard>
+
+<DocsCard header="Navigation" href="navigation" icon="/icons/component-navigation-icon.png">
+  <p>Master navigation in Ionic Vue using Vue Router.</p>
 </DocsCard>
 
-<DocsCard header="Lifecycle" href="lifecycle" icon="/icons/feature-guide-components-icon.png">
-  <p>Learn about using Ionic lifecycle events in class components and with hooks</p>
+<DocsCard header="Components" href="/docs/components" icon="/icons/guide-components-icon.png">
+  <p>Explore Ionic’s rich library of UI components for building beautiful apps.</p>
 </DocsCard>
 
 </DocsCards>

sidebars.js

@@ -99,7 +99,7 @@ module.exports = {
       label: 'React',
       collapsed: false,
       items: [
-        'react',
+        'react/overview',
         'react/quickstart',
         {
           type: 'category',

vercel.json

@@ -1,6 +1,10 @@
 {
   "redirects": [
     { "source": "/", "destination": "/docs" },
+    {
+      "source": "/docs/angular",
+      "destination": "/docs/angular/overview"
+    },
     {
       "source": "/docs/angular/your-first-app/2-taking-photos",
       "destination": "/docs/angular/your-first-app/taking-photos"
@@ -36,6 +40,10 @@
     },
     { "source": "/docs/next/:match*", "destination": "/docs/:match*" },
     { "source": "/docs/v8/:match*", "destination": "/docs/:match*" },
+    {
+      "source": "/docs/react",
+      "destination": "/docs/react/overview"
+    },
     {
       "source": "/docs/react/your-first-app/2-taking-photos",
       "destination": "/docs/react/your-first-app/taking-photos"
@@ -57,6 +65,10 @@
       "destination": "/docs/react/your-first-app/deploying-mobile"
     },
     { "source": "/docs/react/your-first-app/7-live-reload", "destination": "/docs/react/your-first-app/live-reload" },
+    {
+      "source": "/docs/vue",
+      "destination": "/docs/vue/overview"
+    },
     { "source": "/docs/vue/your-first-app/2-taking-photos", "destination": "/docs/vue/your-first-app/taking-photos" },
     { "source": "/docs/vue/your-first-app/3-saving-photos", "destination": "/docs/vue/your-first-app/saving-photos" },
     { "source": "/docs/vue/your-first-app/4-loading-photos", "destination": "/docs/vue/your-first-app/loading-photos" },