docs(misc): various updates embedding videos in docs pages

Author: juristr

astro-docs/src/content/docs/getting-started/ai-setup.mdoc

@@ -11,6 +11,11 @@ Nx provides deep integration with AI coding assistants through the **Nx Model Co
 
 ## Configure Nx AI Integration
 
+{% youtube
+src="https://youtu.be/8gdvIz2r_QM"
+title="Set Up AI Agents in Nx"
+/%}
+
 ### Automatic AI Setup
 
 To automatically configure your Nx workspace to work best with AI agents and assistants, run the following command:

astro-docs/src/content/docs/getting-started/editor-setup.mdoc

@@ -14,6 +14,8 @@ Nx Console editor extensions make your developer experience richer. The extensio
 - visualize dependencies between projects and tasks
 - and more!
 
+You can explore more of the features [in our dedicated Nx Console guides](/docs/guides/nx-console).
+
 ## Download
 
 ### Official Integrations

astro-docs/src/content/docs/getting-started/nx-cloud.mdoc

@@ -15,7 +15,19 @@ Nx Cloud improves many aspects of the CI/CD process:
 - **Cost** - 40% - 75% reduction in CI costs (observed on the Nx OSS monorepo)
 - **Reliability** - by automatically identifying flaky tasks (e2e tests in particular) and re-running them
 
-{% call_to_action variant="default" title="Recover lost time with Nx Cloud" url="https://cloud.nx.app/get-started?utm_source=nx-dev&utm_medium=nx-cloud_intro&utm_campaign=try-nx-cloud" description="Setup takes less than 2 minutes" /%}
+## Connect your workspace to Nx Cloud
+
+The most straightforward way to connect your Nx workspace with Nx Cloud is via the web application:
+
+{% call_to_action variant="default" title="Create a new or connect an existing repo" url="https://cloud.nx.app/get-started?utm_source=nx-dev&utm_medium=nx-cloud_intro&utm_campaign=try-nx-cloud" description="Setup takes less than 2 minutes" /%}
+
+Alternatively, you can also run the following command in your Nx workspace (make sure you have it pushed to a remote repository first):
+
+```shell
+nx connect
+```
+
+For more details, [follow our in-depth guide](/docs/guides/nx-cloud/setup-ci) for setting up CI with Nx.
 
 ## How Nx Cloud improves CI
 
@@ -31,7 +43,7 @@ For example:
 - More work needs to run in CI - Add more agent machines, Nx Cloud automatically assigns available work to extra agent machines.
 - Known flaky tasks waste CI time on needed reruns - Nx Cloud automatically detects flaky tasks and reruns automatically in the current CI execution.
 
-[Read more customer stories](https://nx.dev/blog?filterBy=customer+story)
+[Learn how our customers use Nx Cloud](https://nx.dev/blog?filterBy=customer+story) to help them scale their workspaces and be more efficient.
 
 ## Learn more
 

astro-docs/src/content/docs/getting-started/start-new-project.mdoc

@@ -35,7 +35,7 @@ nx@latest init
 Make sure you have [Nx installed globally](/docs/getting-started/installation) or use `npx` if you're in a JavaScript environment
 {% /aside %}
 
-Nx will detect the underlying workspace configuration, ask you a couple of questions and install itself into the workspace. As you keep going, you can incrementally add functionality, like:
+Nx will detect the underlying workspace configuration, ask you a couple of questions and install itself into the workspace. You can now [run tasks with Nx](/docs/features/run-tasks) and incrementally add functionality, like:
 
 - [Configure caching](/docs/features/cache-task-results)
 - [Adding Nx plugins to help refine your workflows](/docs/plugin-registry)
@@ -55,12 +55,12 @@ This interactive command will guide you through the setup process, allowing you
 
 - **Choose your workspace name** - This will be the name of your root directory
 - **Select your preferred package manager** - npm, yarn, or pnpm
-- **Pick a preset** - Choose from various technology stacks and configurations
+- **Pick a preset** - Choose from [various technology stacks and configurations](/docs/reference/create-nx-workspace#presets)
 - **Configure additional options** - Such as styling solutions, testing frameworks, and more
 
 Choose a preset that matches your technology stack. This gives you a fully configured workspace.
 
-You can also choose **an empty workspace preset** which sets up the bare minimum configuration including Nx itself. This allows you to add technologies and features incrementally over time as you need them.
+You can also choose **an empty workspace preset** (`--preset=ts`) which sets up the bare minimum configuration for TypeScript and Nx. This allows you to add technologies and features incrementally over time as you need them.
 
 ## Option 3: Get the complete Nx platform experience
 

astro-docs/src/content/docs/getting-started/start-with-existing-project.mdoc

@@ -7,6 +7,8 @@ sidebar:
 filter: 'type:Guides'
 ---
 
+{% course_video src="https://youtu.be/3hW53b1IJ84" courseTitle="From PNPM Workspaces to Distributed CI" courseUrl="https://nx.dev/courses/pnpm-nx-next/lessons-01-nx-init" /%}
+
 In many situations, you have an existing codebase and want to improve it with Nx using an **incremental adoption approach**.
 
 Thanks to [Nx's modular architecture](/docs/getting-started/intro), you can start with just **Nx Core** and then gradually add [technology-specific plugins](/docs/technologies), [CI integrations](/docs/getting-started/nx-cloud), or other capabilities as your requirements evolve.
@@ -25,12 +27,13 @@ Whether a monorepo, single project or something in between, `nx init` walks you
 
 ## Next Steps
 
-After initializing Nx, you can explore your workspace with the following commands:
+After initializing Nx, you can [run tasks](/docs/features/run-tasks) with `nx <task> <project-name>` (e.g. `nx build myproject`) or run one or many tasks across all projects with `nx run-many -t <task1> <task2>`.
+
+You can also explore your codebase using:
 
 - `nx graph` to view an interactive graph
 - `nx show projects` to see a list of all projects
 - `nx show project <project-name>` to view an interactive project detailed view
-- `nx run-many -t <target>` to run tasks with Nx, e.g. `nx run-many -t build`
 
 ### Update CI Configurations
 

astro-docs/src/content/docs/guides/Nx Cloud/setup-ci.mdoc

@@ -6,10 +6,16 @@ sidebar:
 filter: 'type:Guides'
 ---
 
-Learn how to set up Nx Cloud for your workspace with your preferred CI platform. Get started connecting to Nx Cloud by running `nx connect`.
+Learn how to set up Nx Cloud for your workspace with your preferred CI platform. Get started connecting to Nx Cloud by running
+
+```shell
+nx connect
+```
 
 Each platform has specific configurations and optimizations that help you build and test only what is affected, retrieve previous successful builds, and optimize CI performance.
 
+{% course_video src="https://www.youtube.com/watch?v=8mqHXYIl_qI" courseTitle="From PNPM Workspaces to Distributed CI" courseUrl="https://nx.dev/courses/pnpm-nx-next/lessons-06-nx-cloud-setup" /%}
+
 ## CI Configuration
 
 {% tabs syncKey="ci-provider" %}

docs/README.md

@@ -304,9 +304,15 @@ Have a more decent button-like widget that you can place below sections of a tut
 This is for embedding a video just like with the Youtube component, but in addition to have a link to a Nx Course (nx.dev/courses) video to improve the discoverability of these courses.
 
 ```markdown
-{% course-video src="https://youtu.be/3hW53b1IJ84" courseTitle="From PNPM Workspaces to Distributed CI" courseUrl="/courses/pnpm-nx-next/lessons-01-nx-init" title="Initialize Nx in Your Project with nx init" /%}
+{% course_video src="https://youtu.be/3hW53b1IJ84" courseTitle="From PNPM Workspaces to Distributed CI" courseUrl="/courses/pnpm-nx-next/lessons-01-nx-init" /%}
 ```
 
+Attributes:
+
+- `src` (required): YouTube video URL
+- `courseTitle` (required): Title of the course
+- `courseUrl` (required): Link to the course page (e.g., `/courses/pnpm-nx-next/lessons-01-nx-init`)
+
 #### Project Details View
 
 Embed a Project Details View that is identical what is shown in Nx Console or `nx show project myproject --web`

nx-dev/ui-common/src/lib/course-video.tsx

@@ -16,7 +16,7 @@ export function CourseVideo({
   courseUrl,
 }: CourseVideoProps): JSX.Element {
   return (
-    <div className="not-prose mx-auto max-w-4xl">
+    <div className="not-prose mx-auto max-w-4xl pt-4">
       <div className="overflow-hidden rounded-xl bg-slate-50 shadow-sm ring-1 ring-slate-900/5 dark:bg-slate-800/50 dark:ring-slate-700/50">
         <div className="aspect-video w-full">
           <YouTube