docs: Docs Updates (#62)

# Description

Adds / updates some language on the homepage and getting started page.

This additionally removes the breadcrumb from the layout as it's not
really currently serving any purpose.

## Type of change

<!-- Please select all options that are applicable. -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Fix or improve the documentation
- [ ] This change requires a documentation update


# Checklist

<!-- These must all be followed and checked. -->

- [ ] I have followed the contributing guidelines of this project as
mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md)
- [ ] I have created an
[issue](https://github.com/cloudinary-community/svelte-cloudinary/issues)
ticket for this PR
- [ ] I have checked to ensure there aren't other open [Pull
Requests](https://github.com/cloudinary-community/svelte-cloudinary/pulls)
for the same update/change?
- [ ] I have performed a self-review of my own code
- [ ] I have run tests locally to ensure they all pass
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes needed to the documentation

docs/src/docs/index.md

@@ -11,15 +11,18 @@ order: 1
 
 # Svelte Cloudinary
 
-High-performance image delivery and uploading at scale in Svelte/SvelteKit powered by
-Cloudinary.
-* Automatically optimize images and deliver in modern formats
-* Remove backgrounds from images
-* Dynamically add image and text overlays to images
-* AI-based cropping and resizing
-* Transform images using color and effects
-* Generate Open Graph Social Media cards on the fly
-* ...all at scale with Cloudinary
+Leverage the power of Cloudinary’s Programmable Media to enable high-performance image delivery and uploads in Svelte/SvelteKit applications at scale.
+
+This SDK enables the following:
+* **Automated image optimization:** Our solution automatically refines images for optimal performance and renders them in the latest formats.
+* **Remove background:** Effortlessly remove backgrounds from images for a polished and professional appearance.
+* **Dynamic image and text overlays:** Customize your images further by dynamically adding image and text overlays, giving a unique touch to each visual.
+* **AI-powered image processing:** Take advantage of AI-driven technology for intelligent cropping and resizing, ensuring your images are always displayed in optimal dimensions.
+* **Image transformation:** Modify the aesthetics of your images using a variety of color alterations and special effects.
+* **On-the-fly Open Graph social media cards:** Generate customized social media cards dynamically to represent your content engagingly and effectively in social sharing.
+* **Scalability with Cloudinary:** Experience the power of Cloudinary in handling all these functions at scale, ensuring a smooth and seamless user experience.
+
+Benefit from these use cases and take your media experience to the next level by using Cloudinary in Svelte/SveltekIt applications.
 
 <style>
 .grid {

docs/src/docs/installation.md

@@ -9,12 +9,13 @@ order: 2
     import Callout from '$lib/components/Callout.svelte'
 </script>
 
-# Installing Svelte Cloudinary
+# Installation
 
-## Getting Started
+## Installing Svelte Cloudinary
+
+To install Svelte Cloudinary, you can use your favorite package manager including npm, pnpm or yarn:
 
 <!-- <Steps> -->
-### Installation
 
 <Tabs tabs={["npm","pnpm","yarn"]}>
   <Tab type="shell">
@@ -30,7 +31,7 @@ order: 2
 
 ### Configuration
 
-Add the following variable to your `.env.local` or `.env` file.
+Next, you need to setup the environment variable. Insert the following variable into your `.env.local` or `.env` file:
 
 <Code>
 VITE_PUBLIC_CLOUDINARY_CLOUD_NAME="[Your Cloud Name]"
@@ -42,15 +43,15 @@ VITE_PUBLIC_CLOUDINARY_CLOUD_NAME="[Your Cloud Name]"
 
 ## Using Svelte Cloudinary
 
-Learn how to add one of the Svelte Cloudinary components:
+Check out our comprehensive guides on how to use the Svelte Cloudinary library. Whether you're rendering images, generating social media cards, or looking to leverage our built-in upload UI, we've got you covered:
 
-* [CldImage](/CldImage/usage)
-* [CldOgImage](/cldogimage/usage)
-* [CldUploadButton](/clduploadbutton/usage)
-* [CldUploadWidget](/clduploadwidget/usage)
-* [CldVideoPlayer](/cldvideoplayer/usage)
+* [CldImage](/CldImage/usage): Optimize and transform images including dynamic cropping and resizing and background removal.
+* [CldOgImage](/cldogimage/usage): Create and add dynamically generated, custom Social Media cards to your site.
+* [CldUploadButton](/clduploadbutton/usage): Drop in a button that allows your visitors to upload files.
+* [CldUploadWidget](/clduploadwidget/usage): Gain full control of how you build your UI for uploading files.
+* [CldVideoPlayer](/cldvideoplayer/usage): Add videos with optimization and transformations using the Cloudinary Video Player.
 
 Or use the helper methods to generate URLs:
 <!---->
-* [getCldImageUrl](/getcldimageurl/usage)
-* [getCldOgImageUrl](/getcldogimageurl/usage)
+* [getCldImageUrl](/getcldimageurl/usage): Create an optimized Cloudinary URL with whatever trasnformations using the same API as CldImage.
+* [getCldOgImageUrl](/getcldogimageurl/usage): Generate a custom social media card URL with the same API as CldOgImage.

docs/src/lib/components/Layout.svelte

@@ -60,13 +60,5 @@
 		}
 	]}
 />
-<ul
-	class="breadcrumb mt-2.5 flex items-center gap-1 overflow-hidden text-sm text-gray-500 contrast-more:text-current"
->
-	<li
-		class="whitespace-nowrap transition-colors font-medium text-gray-700 contrast-more:font-bold contrast-more:text-current dark:text-gray-400 contrast-more:dark:text-current"
-	>
-		{title}
-	</li>
-</ul>
+
 <slot />