progress on docs rewrite

docs/content/index.md

@@ -7,34 +7,56 @@ description: Everything you wish the HTML select element could do, shipped as a
 ---
 
 :::lead
-Everything you wish the HTML `<select>` element could do, wrapped up into a lightweight, extensible Vue component.
+Vue Select is a feature rich combobox component. You might know it as a dropdown or
+typeahead select. They're a staple on the web, and they're notoriously tough to get right!
 :::
 
+Vue Select provides a default template that fits most use cases. The component is designed
+to be as lightweight as possible, while maintaining high standards for accessibility, developer
+experience, and customization.
+
 :::quick-links
 
-:::quick-link{title="Installation" icon="installation" href="/"}
-Step-by-step guides to setting up your system and installing the library.
+:::quick-link{title="Installation" href="/guide/install"}
+Step-by-step instructions to install Vue Select in your project. Couple lines and you're done!
+
+#icon
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+</svg>
 :::
 
-:::quick-link{title="Architecture guide" icon="presets" href="/"}
-Learn how the internals work and contribute.
-:::
+:::quick-link{title="Options and Selections" href="/"}
+You'll need to register some options so your users can select them.
 
-:::quick-link{title="Plugins" icon="plugins" href="/"}
-Extend the library with third-party plugins or write your own.
-:::
-
-:::quick-link{title="API reference" icon="theming" href="/"}
-Learn to easily customize and modify your app's visual design to fit your brand.
-:::
+#icon
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+<path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" />
+</svg>
 
 :::
 
+:::quick-link{title="Customizing" href="/"}
+Vue Select is plug-and-play by design, but you can always customize the look and feel.
 
-Vue Select is a feature rich select/dropdown/typeahead component. It provides a default
-template that fits most use cases for a filterable select dropdown. The component is designed to be as
-lightweight as possible, while maintaining high standards for accessibility,
-developer experience, and customization.
+#icon
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+</svg>
+:::
+
+:::quick-link{title="Premium Resources" icon="theming" href="/"}
+Pre-built Vue Select instances with custom themes and features. Infinite scroll, remote option
+loading and more.
+
+#icon
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
+</svg>
+
+:::
+
+:::
 
 ## Features