docs: migrate guides from v1 to v2 Starlight

packages/docs/src/content/docs/guides/background-removal.mdx

@@ -0,0 +1,75 @@
+---
+title: Guides/Background Removal
+order: 1
+---
+
+<script>
+
+import Callout from '$lib/components/Callout.svelte'
+import { Tabs, Tab} from '$lib/components/Tabs'
+import { CldOgImage, CldImage } from 'svelte-cloudinary'
+
+</script>
+
+# Removing a Background from an Image
+
+The CldImage component allows you to easily remove backgrounds from images using the `removeBackground` prop.
+
+<Callout emoji={false}>
+  Removing backgrounds require enabling the <a href="https://cloudinary.com/documentation/cloudinary_ai_background_removal_addon">Cloudinary AI Background Removal Add-On</a> which includes a free tier for getting started.
+</Callout>
+
+## Example
+
+<div style="max-width: 500px; margin: 0 auto">
+    <CldImage
+      width={960}
+      height={600}
+      src={`images/turtle`}
+      sizes="(max-width: 480px) 100vw, 50vw"
+      removeBackground
+      alt=""
+    />
+</div>
+
+<Tabs>
+  <Tab type="code" open title="CldImage">
+
+```svelte
+<script>
+	import { CldImage } from 'svelte-cloudinary';
+</script>
+
+<CldImage
+	width="960"
+	height="600"
+	src="images/turtle"
+	sizes="100vw"
+	removeBackground
+	alt="Turtle"
+/>
+```
+
+  </Tab>
+  <Tab title="getCldImageUrl">
+
+```html
+<script>
+	import { getCldImageUrl } from 'svelte-cloudinary';
+
+	const cldUrl = getCldImageUrl({
+		width: 960,
+		height: 600,
+		src: 'images/turtle',
+		removeBackground: true
+	});
+</script>
+```
+
+  </Tab>
+</Tabs>
+
+## Learn More
+
+- [CldImage](/cldimage/usage)
+- [getCldImageUrl](/getcldimageurl/usage)

packages/docs/src/content/docs/guides/image-optimization.mdx

@@ -0,0 +1,73 @@
+---
+title: Guides/Image Optimization
+order: 2
+---
+
+<script>
+
+import Callout from '$lib/components/Callout.svelte'
+import Video from '$lib/components/Video.svelte'
+import { Tabs, Tab} from '$lib/components/Tabs'
+import { CldOgImage, CldImage } from 'svelte-cloudinary'
+
+</script>
+
+# Optimizing Images in Svelte/SvelteKit
+
+Automatically optimize images using the CldImage component. By default, CldImage opts you in to automatic optimization including delivering the most optimal format for the browser (WebP, AVIF).
+
+You can further optimize delivery by using [responsive sizing](/guides/responsive-images) by using the `sizes` prop.
+
+## Example
+
+<div style="max-width: 500px; margin: 0 auto">
+  <CldImage
+    width="960"
+    height="600"
+    src={`images/turtle`}
+    sizes="100vw"
+    alt="Turtle"
+  />
+</div>
+
+<Tabs tabs={['CldImage', 'getCldImageUrl']}>
+<Tab type="code" open title="CldImage">
+
+```svelte
+<script>
+	import { CldImage } from 'svelte-cloudinary';
+</script>
+
+<CldImage width="960" height="600" src="images/turtle" sizes="100vw" alt="Turtle" />
+```
+
+  </Tab>
+  <Tab type="code" title="getCldImageUrl">
+
+```svelte
+<script>
+	import { getCldImageUrl } from 'svelte-cloudinary';
+
+	getCldImageUrl({
+		width: 960,
+		height: 600,
+		src: 'images/turtle'
+	});
+</script>
+```
+
+  </Tab>
+</Tabs>
+
+## Watch & Learn
+
+<Video
+  title="Optimize Images, Responsive Sizing, & AI Cropping in Svelte with Svelte Cloudinary"
+  url="https://www.youtube.com/watch?v=Vr3H3XREkbw"
+/>
+
+## Learn More
+
+- [Responsive Images](/guides/responsive-images)
+- [CldImage](/cldimage/usage)
+- [getCldImageUrl](/getcldimageurl/usage)

packages/docs/src/content/docs/guides/image-overlays.mdx

@@ -0,0 +1,121 @@
+---
+title: Guides/Image Overlays
+order: 3
+---
+
+<script>
+
+import Callout from '$lib/components/Callout.svelte'
+import Video from '$lib/components/Video.svelte'
+import { Tabs, Tab} from '$lib/components/Tabs'
+import { CldOgImage, CldImage } from 'svelte-cloudinary'
+
+</script>
+
+# Overlaying Images
+
+You can add images on top of other images by using image-based overlays.
+
+## Example
+
+<div style="max-width: 500px; margin: 0 auto">
+  <CldImage
+    width="960"
+    height="600"
+    src={`images/turtle`}
+    sizes="100vw"
+    overlays={[{
+      publicId: 'images/earth',
+      position: {
+        x: 50,
+        y: 50,
+        gravity: 'north_west',
+      },
+      effects: [
+        {
+          crop: 'fill',
+          gravity: 'auto',
+          width: 500,
+          height: 500
+        }
+      ]
+    }]}
+    alt="Turtle with earth"
+  />
+</div>
+
+<Tabs tabs={['CldImage', 'getCldImageUrl']}>
+<Tab type="code" open title="CldImage">
+
+```svelte
+<script>
+	import { CldImage } from 'svelte-cloudinary';
+</script>
+
+<CldImage
+	width="960"
+	height="600"
+	src="images/turtle"
+	sizes="100vw"
+	overlays={[
+		{
+			publicId: 'images/earth',
+			position: {
+				x: 50,
+				y: 50,
+				gravity: 'north_west'
+			},
+			effects: [
+				{
+					crop: 'fill',
+					gravity: 'auto',
+					width: 500,
+					height: 500
+				}
+			]
+		}
+	]}
+	alt="Turtle with earth"
+/>
+```
+
+  </Tab>
+  <Tab type="code" title="getCldImageUrl">
+
+```svelte
+<script>
+	import { getCldImageUrl } from 'svelte-cloudinary';
+
+	const cldUrl = getCldImageUrl({
+		width: 960,
+		height: 600,
+		src: 'images/turtle',
+		overlays: [
+			{
+				publicId: 'images/earth',
+				position: {
+					x: 50,
+					y: 50,
+					gravity: 'north_west'
+				},
+				effects: [
+					{
+						crop: 'fill',
+						gravity: 'auto',
+						width: 500,
+						height: 500
+					}
+				]
+			}
+		]
+	});
+</script>
+```
+
+  </Tab>
+</Tabs>
+
+## Learn More
+
+- [CldImage](/cldimage/usage)
+- [getCldImageUrl](/getcldimageurl/usage)

packages/docs/src/content/docs/guides/image-underlays.mdx

@@ -0,0 +1,77 @@
+---
+title: Guides/Image Underlays
+order: 4
+---
+
+<script>
+
+import Callout from '$lib/components/Callout.svelte'
+import Video from '$lib/components/Video.svelte'
+import { Tabs, Tab} from '$lib/components/Tabs'
+import { CldOgImage, CldImage } from 'svelte-cloudinary'
+
+</script>
+
+# Adding Layers Under Images
+
+Underlays function very similar to overlays in terms of options, however they **do not support text**.
+
+See the examples above under Overlays to learn more about the available configurations.
+
+## Example
+
+<div style="max-width: 500px; margin: 0 auto">
+  <CldImage
+    width="960"
+    height="600"
+    src={`images/turtle`}
+    sizes="100vw"
+    removeBackground
+    underlay="images/galaxy"
+    alt="Turtle swimming in a galaxy"
+  />
+</div>
+
+<Tabs tabs={['CldImage', 'getCldImageUrl']}>
+<Tab type="code" open title="CldImage">
+
+```svelte
+<script>
+	import { CldImage } from 'svelte-cloudinary';
+</script>
+
+<CldImage
+	width="960"
+	height="600"
+	src="images/turtle"
+	sizes="100vw"
+	removeBackground
+	underlay="images/galaxy"
+	alt="Turtle swimming in a galaxy"
+/>
+```
+
+  </Tab>
+  <Tab type="code" title="getCldImageUrl">
+
+```svelte
+<script>
+	import { getCldImageUrl } from 'svelte-cloudinary';
+
+	const cldUrl = getCldImageUrl({
+		width: 960,
+		height: 600,
+		src: 'images/turtle',
+		removeBackground: true,
+		underlay: 'images/galaxy'
+	});
+</script>
+```
+
+  </Tab>
+</Tabs>
+
+## Learn More
+
+- [CldImage](/cldimage/usage)
+- [getCldImageUrl](/getcldimageurl/usage)