docs(js): Use split layout in Angular & SvelteKit quick start guide (#17227)

<!-- Use this checklist to make sure your PR is ready for merge. You may
delete any sections you don't need. -->

## DESCRIBE YOUR PR
This branch updates the following quick start guides to use the new
split layout:
- Angular wizard
- Angular manual setup
- SvelteKit wizard
- SvelteKit manual setup
- SvelteKit on Cloudflare

I created temporary include files for tunneling and source maps content
(which I will clean up once all guides are updated). I then also updated
the Browser JS quick start guide to use these new include files.

Closes: #17187

## IS YOUR CHANGE URGENT?  

Help us prioritize incoming PRs by letting us know when the change needs
to go live.
- [ ] Urgent deadline (GA date, etc.): <!-- ENTER DATE HERE -->
- [ ] Other deadline: <!-- ENTER DATE HERE -->
- [x] None: Not urgent, can wait up to 1 week+

## SLA

- Teamwork makes the dream work, so please add a reviewer to your PRs.
- Please give the docs team up to 1 week to review your PR unless you've
added an urgent due date to it.
Thanks in advance for your help!

## PRE-MERGE CHECKLIST

*Make sure you've checked the following before merging your changes:*

- [ ] Checked Vercel preview for correctness, including links
- [ ] PR was reviewed and approved by any necessary SMEs (subject matter
experts)
- [ ] PR was reviewed and approved by a member of the [Sentry docs
team](https://github.com/orgs/getsentry/teams/docs)

## EXTRA RESOURCES

- [Sentry Docs contributor guide](https://docs.sentry.io/contributing/)

Author: inventarSarah

docs/platforms/javascript/guides/angular/index.mdx

@@ -22,20 +22,33 @@ at least Angular 17.
 
 </Expandable>
 
-## Step 1: Install
+<StepComponent>
+## Install
 
-To install Sentry, run the following command within your project:
+<SplitLayout>
+<SplitSection>
+<SplitSectionText>
+
+Run the Sentry wizard to automatically configure Sentry in your Angular application. It will then guide you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.
+
+</SplitSectionText>
+
+<SplitSectionCode>
 
 ```bash
 npx @sentry/wizard@latest -i angular
 ```
 
-The wizard then guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.
+</SplitSectionCode>
+</SplitSection>
+</SplitLayout>
 
 <Include name="quick-start-features-expandable" />
 
 This guide assumes that you enable all features and allow the wizard to add an example component to your application. You can add or remove features at any time, but setting them up now will save you the effort of configuring them manually later.
 
+Prefer to set things up yourself? Check out the [Manual Setup](/platforms/javascript/guides/angular/manual-setup/) guide.
+
 <Expandable title="What does the installation wizard change inside your application?">
 
 - Adds a `Sentry.init()` call into your `main.ts` file
@@ -46,11 +59,11 @@ This guide assumes that you enable all features and allow the wizard to add an e
 
 </Expandable>
 
-## Step 2: Avoid Ad Blockers With Tunneling (Optional)
+## Avoid Ad Blockers With Tunneling (Optional)
 
-<PlatformContent includePath="getting-started-tunneling" />
+<PlatformContent includePath="getting-started-tunneling-splitlayout" />
 
-## Step 3: Verify
+## Verify
 
 If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that the Sentry SDK is sending data to your Sentry project by using the example component created by the installation wizard:
 
@@ -89,6 +102,9 @@ Our next recommended steps for you are:
 <Expandable permalink={false} title="Are you having problems setting up the SDK?">
 
 - If you encountered issues with our installation wizard, try <PlatformLink to="/manual-setup">setting up Sentry manually</PlatformLink>
+- Find various topics in <PlatformLink to="/troubleshooting">Troubleshooting</PlatformLink>
 - [Get support](https://sentry.zendesk.com/hc/en-us/)
 
 </Expandable>
+
+</StepComponent>

docs/platforms/javascript/guides/angular/manual-setup.mdx

@@ -19,9 +19,23 @@ You need:
 - Your application up and running
 - Angular version `14.0.0` or above
 
-## Step 1: Install
+<StepComponent>
 
-### Install the Sentry SDK
+## Install
+
+<SplitLayout>
+
+<SplitSection>
+
+<SplitSectionText>
+
+Run the command for your preferred package manager to add the Sentry SDK to your application.
+
+If you're updating your Sentry SDK to the latest version, check out our [migration guide](https://github.com/getsentry/sentry-javascript/blob/master/MIGRATION.md) to learn more about breaking changes.
+
+</SplitSectionText>
+
+<SplitSectionCode>
 
 ```bash {tabTitle:npm}
 npm install @sentry/angular --save
@@ -35,6 +49,10 @@ yarn add @sentry/angular
 pnpm add @sentry/angular
 ```
 
+</SplitSectionCode>
+</SplitSection>
+</SplitLayout>
+
 <Expandable title="Which SDK version should you use with your Angular version?" permalink="true" level="warning">
 
 In its current major version, the Sentry Angular SDK supports Angular 14 and newer.
@@ -59,9 +77,7 @@ Since version 8, `@sentry/angular-ivy` was <PlatformLink to="/migration/v7-to-v8
 
 </Expandable>
 
-If you're updating your Sentry SDK to the latest version, check out our [migration guide](https://github.com/getsentry/sentry-javascript/blob/master/MIGRATION.md) to learn more about breaking changes.
-
-## Step 2: Configure
+## Configure
 
 Choose the features you want to configure, and this guide will show you how:
 
@@ -77,10 +93,19 @@ Choose the features you want to configure, and this guide will show you how:
 
 <Include name="quick-start-features-expandable" />
 
+### Initialize the SDK
+
+<SplitLayout>
+
+<SplitSection>
+
+<SplitSectionText>
+
 The main configuration should happen as early as possible in your app's lifecycle. Typically that means in your `main.ts` file.
-In addition, you'll need to register some providers to fully instrument your application.
 
-### Initialize the SDK
+</SplitSectionText>
+
+<SplitSectionCode>
 
 ```typescript {tabTitle: App Config} {filename: main.ts} {5-48}
 import { bootstrapApplication } from "@angular/platform-browser";
@@ -213,10 +238,30 @@ platformBrowserDynamic()
   .catch((err) => console.error(err));
 ```
 
+</SplitSectionCode>
+</SplitSection>
+</SplitLayout>
+
 ### Register Sentry Providers
 
+<SplitLayout>
+
+<SplitSection>
+
+<SplitSectionText>
+
 The Sentry Angular SDK exports a couple of Angular providers that are necessary to fully instrument your application. We recommend registering them in your `app.config.ts` or main `app.module.ts`:
 
+<Alert level="warning">
+
+If your Angular app is configured for SSR, make sure that the Sentry providers are not accidentally passed to the SSR config (`app.config.server.ts`). The Sentry Angular SDK can only be used in the browser.
+
+</Alert>
+
+</SplitSectionText>
+
+<SplitSectionCode>
+
 ```typescript {tabTitle: App Config (Angular 19+)} {filename: app.config.ts} {9, 14-25}
 import {
   ApplicationConfig,
@@ -312,11 +357,9 @@ import * as Sentry from "@sentry/angular";
 export class AppModule {}
 ```
 
-<Alert>
-
-If your Angular app is configured for SSR, make sure that the Sentry providers are not accidentally passed to the SSR config (`app.config.server.ts`). The Sentry Angular SDK can only be used in the browser.
-
-</Alert>
+</SplitSectionCode>
+</SplitSection>
+</SplitLayout>
 
 <OnboardingOption optionId="performance">
 
@@ -337,23 +380,35 @@ export class AppModule {
 
 </OnboardingOption>
 
-## Step 3: Add Readable Stack Traces With Source Maps (Optional)
-
-<PlatformContent includePath="getting-started-sourcemaps-short-version" />
+### Add Readable Stack Traces With Source Maps (Optional)
 
-Alternatively, take a look at our <PlatformLink to="/sourcemaps">Uploading Source Maps</PlatformLink> docs
+<PlatformContent includePath="getting-started-sourcemaps-short-version-splitlayout" />
 
-## Step 4: Avoid Ad Blockers With Tunneling (Optional)
+### Avoid Ad Blockers With Tunneling (Optional)
 
-<PlatformContent includePath="getting-started-tunneling" />
+<PlatformContent includePath="getting-started-tunneling-splitlayout" />
 
-## Step 5: Verify
+## Verify
 
 Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
 
 ### Issues
 
-To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your components (e.g. `app.component.ts`), which will trigger an error that Sentry will capture when you click it:
+<SplitLayout>
+<SplitSection>
+<SplitSectionText>
+
+To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your components (e.g. `app.component.ts`), which will trigger an error that Sentry will capture when you click it.
+
+<OnboardingOption optionId="performance" hideForThisOption>
+  Open the page in a browser and click the button to trigger a frontend error.
+</OnboardingOption>
+
+<PlatformContent includePath="getting-started-browser-sandbox-warning" />
+
+</SplitSectionText>
+
+<SplitSectionCode>
 
 ```javascript {filename: app.component.ts} {5, 9-11}
 @Component({
@@ -370,16 +425,24 @@ class AppComponent {
 }
 ```
 
-<OnboardingOption optionId="performance" hideForThisOption>
-  Open the page in a browser and click the button to trigger a frontend error.
-</OnboardingOption>
-
-<PlatformContent includePath="getting-started-browser-sandbox-warning" />
+</SplitSectionCode>
+</SplitSection>
+</SplitLayout>
 
 <OnboardingOption optionId="performance">
 ### Tracing
 
-To test your tracing configuration, update the previous code snippet to start a trace to measure the time it takes to execute your code:
+<SplitLayout>
+<SplitSection>
+<SplitSectionText>
+
+To test your tracing configuration, update the previous code snippet to start a trace to measure the time it takes to execute your code.
+
+Open the page in a browser and click the button to trigger a frontend error and performance trace.
+
+</SplitSectionText>
+
+<SplitSectionCode>
 
 ```javascript {filename: app.component.ts} {10-11, 13-14}
 @Component({
@@ -400,13 +463,15 @@ class AppComponent {
 }
 ```
 
-Open the page in a browser and click the button to trigger a frontend error and performance trace.
+</SplitSectionCode>
+</SplitSection>
+</SplitLayout>
 
 </OnboardingOption>
 
 <OnboardingOption optionId="logs">
 
-<Include name="logs/javascript-quick-start-verify-logs" />
+<Include name="logs/javascript-quick-start-verify-logs-splitlayout" />
 
 </OnboardingOption>
 
@@ -422,6 +487,7 @@ At this point, you should have integrated Sentry into your Angular application a
 
 Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are:
 
+- Explore [practical guides](/guides/) on what to monitor, log, track, and investigate after setup
 - Extend Sentry to your backend using one of our [SDKs](/)
 - Continue to <PlatformLink to="/configuration">customize your configuration</PlatformLink>
 - Make use of <PlatformLink to="/features">Angular-specific features</PlatformLink>
@@ -434,3 +500,5 @@ Now's a good time to customize your setup and look into more advanced topics. Ou
 - [Get support](https://sentry.zendesk.com/hc/en-us/)
 
 </Expandable>
+
+</StepComponent>

docs/platforms/javascript/guides/sveltekit/index.mdx

@@ -13,15 +13,26 @@ categories:
 
 <PlatformContent includePath="getting-started-prerequisites" />
 
-## Step 1: Install
+<StepComponent>
+## Install
 
-To install Sentry using the installation wizard, run the following command within your project:
+<SplitLayout>
+<SplitSection>
+<SplitSectionText>
+
+Run the Sentry wizard to automatically configure Sentry in your Angular application. It will then guide you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.
+
+</SplitSectionText>
+
+<SplitSectionCode>
 
 ```bash
 npx @sentry/wizard@latest -i sveltekit
 ```
 
-The wizard then guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.
+</SplitSectionCode>
+</SplitSection>
+</SplitLayout>
 
 <Include name="quick-start-features-expandable" />
 
@@ -39,11 +50,11 @@ This guide assumes that you enable all features and allow the wizard to create a
 
 </Expandable>
 
-## Step 2: Avoid Ad Blockers With Tunneling (Optional)
+## Avoid Ad Blockers With Tunneling (Optional)
 
 <PlatformContent includePath="getting-started-tunneling" />
 
-## Step 3: Verify Your Setup
+## Verify Your Setup
 
 If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page and route created by the installation wizard:
 
@@ -89,3 +100,5 @@ Our next recommended steps for you are:
 - [Get support](https://sentry.zendesk.com/hc/en-us/)
 
 </Expandable>
+
+</StepComponent>

includes/logs/javascript-quick-start-verify-logs-splitlayout.mdx

@@ -0,0 +1,28 @@
+### Logs <FeatureBadge type="new" size="small" />
+
+<SplitLayout>
+<SplitSection>
+<SplitSectionText>
+To verify that Sentry catches your logs, add some log statements to your application:
+
+</SplitSectionText>
+
+<SplitSectionCode>
+
+```javascript
+Sentry.logger.info("User example action completed");
+
+Sentry.logger.warn("Slow operation detected", {
+  operation: "data_fetch",
+  duration: 3500,
+});
+
+Sentry.logger.error("Validation failed", {
+  field: "email",
+  reason: "Invalid email",
+});
+```
+
+</SplitSectionCode>
+</SplitSection>
+</SplitLayout>