Tweak homepage

apps/docs/.vitepress/theme/style.css

@@ -100,8 +100,8 @@
 
   --vp-home-hero-image-background-image: linear-gradient(
     -45deg,
-    #064f6c 50%,
-    #6ba25a 50%
+    #064f6c99 50%,
+    #6ba25a99 50%
   );
   --vp-home-hero-image-filter: blur(44px);
 }

apps/docs/src/index.md

@@ -7,7 +7,7 @@ hero:
   text: 'The multi-framework JavaScript library for responsive images.'
   tagline: Responsive images made easy.
   image:
-    src: ./assets/aurora.jpg
+    src: ./assets/aurora-home.webp
     alt: VitePress
   actions:
     - theme: brand
@@ -18,20 +18,20 @@ hero:
     #   link: /api-examples
 
 features:
+  - title: Multi Framework
+    details: 'Supports Vite and Webpack for local image processing, a framework-agnostic core and components for multiple frontend frameworks: Ember.js and more in the future.'
   - title: Next-gen image formats
-    details: Supports basic PNG and JPEG formats, as well as next-gen WebP and AVIF, for best image quality at low file sizes.
-  - title: Fast image processing
-    details: Super fast image processing, thanks to the awesome sharp library.
-  - title: Layout modes
-    details: Layout modes for fixed sizes (with 1x and 2x image variants) as well as responsive layouts (srcset with optimized image sizes across all devices).
+    details: Supports basic PNG and JPEG formats, as well as next-gen WebP and AVIF, for increased performance with optimal image quality at small file sizes.
+  - title: Local image processing
+    details: Fast image processing of local images with a selection of optionally applyable filters and effects, using the popular sharp library.
   - title: Image CDNs
     details: Besides processing of local images, it also supports integrating remote images from <b>image CDNs</b> like Cloudinary or imgix using a versatile image provider abstraction
+  - title: Image Placeholders
+    details: Supports Low Quality Image Placeholders (LQIP) techniques to show a preview while loading, using different strategies like a blurry low-res image, BlurHash or a simple dominant color.
+  - title: Layout modes
+    details: Layout modes for fixed sizes (with 1x and 2x image variants) as well as responsive layouts (srcset with optimized image sizes across all devices).
   - title: Web Performance
     details: Lazy rendering by default, with optimized content-visibility and decoding settings and optimized markup, to prevent CLS (Cumulative Layout Shift), a core Web Vital and Lighthouse metric.
-  - title: Low Quality Image Placeholders
-    details: Supports advanced LQIP techniques to show a preview while loading, using different configurable strategies like a blurry low-res image, BlurHash or a simple dominant color.
-  - title: Multi Framework
-    details: 'Supports Vite and Webpack for local image processing, a framework-agnostic core and components for multiple frontend frameworks: Ember.js and more in the future.'
   - title: High Quality
     details: Engineered with quality in mind, all functionality is fully tested (unit and integration tests), packages ship with native TypeScript types.
 ---