Create a feature page for Dashify Search and update learn more buttons

Made learn more buttons have more contextual labels.

content/features/search.md

@@ -0,0 +1,29 @@
++++
+title = 'Search orders from anywhere in the WooCommerce admin'
+
+subtitle = 'Dashify Pro adds a global order search to the WordPress admin top toolbar. Search and save time by quickly jumping to orders.'
+
+description = 'Dashify Pro adds a global order search to the WordPress admin top toolbar. Search and save time by quickly jumping to orders.'
+
+imageURL = '/images/global-search.png'
+imageAlt = 'Screenshot of the WordPress admin dashboard, with a popup search appearing over the dashboard that shows a result showing for a searched query, along with a few recent orders. The ID, status, name, and date of the orders are previewed.'
+
+[[highlights]]
+title = "Search by order ID"
+description = "Type an order ID and see the status, customer name, and order date."
+
+[[highlights]]
+title = "Jump to order edit page"
+description = "Clicking on a result takes you directly to the order edit page."
+
+[[highlights]]
+title = "View recent orders"
+description = "The search window shows the most recent 3 orders, which you can click on to see more details."
+
+[[highlights]]
+title = "Mobile friendly"
+description = "The search window fits well on small screens and mobile devices."
+
+layout = 'feature'
+draft = false
++++

layouts/index.html

@@ -103,7 +103,7 @@ <h3 class="text-2xl font-semibold text-gray-600 mb-2">
 				href="/features/order-navigation"
 				class="rounded-lg py-2 px-3 text-sm bg-gray-800 text-gray-50 hover:bg-gray-700 hover:text-gray-100 transition-colors"
 			>
-				Learn more →
+				See the order navigation buttons in action →
 			</a>
 			</div>
 		</div>
@@ -226,9 +226,17 @@ <h2 class="text-4xl px-4 text-center font-bold mb-6">Get even more WooCommerce u
 				>
 			</div>
 			<div>
-				<h3 class="text-2xl font-semibold mb-2">Search for orders from anywhere</h3>
+				<h3 class="text-2xl font-semibold mb-2">Search orders from anywhere</h3>
 				<p class="text-gray-200">Need to jump to a specific order? Use Dashfy’s quick search to get to the order from any page in the WordPress admin.</p>
 			</div>
+			<div class="mt-6">
+				<a
+					href="/features/search/"
+					class="rounded-lg py-2 px-3 text-sm bg-gray-50 text-gray-800 hover:bg-gray-200 hover:text-gray-700 transition"
+				>
+					Learn more about Dashify Search →
+				</a>
+			</div>
 		</div>
 		<div id="sku" class="scroll-mt-24 lg:flex flex-col justify-evenly bg-gradient-to-br from-gray-500 to-gray-700 border border-gray-500 p-8 lg:basis-[48%] rounded-lg m-0.5 mt-8">
 			<div class="lg:flex items-center">
@@ -244,11 +252,11 @@ <h3 class="text-2xl font-semibold mb-2">Sort order items by SKU</h3>
 			</div>
 			<div class="mt-6">
 				<a
-				href="/features/sort-by-sku/"
-				class="rounded-lg py-2 px-3 text-sm bg-gray-50 text-gray-800 hover:bg-gray-200 hover:text-gray-700 transition"
-			>
-				Learn more →
-			</a>
+					href="/features/sort-by-sku/"
+					class="rounded-lg py-2 px-3 text-sm bg-gray-50 text-gray-800 hover:bg-gray-200 hover:text-gray-700 transition"
+				>
+					Learn more about sorting by SKU →
+				</a>
 			</div>
 		</div>
 		<div id="future" class="scroll-mt-24 lg:flex flex-col justify-evenly bg-gradient-to-br from-gray-500 to-gray-700 border border-gray-500 p-8 lg:basis-[48%] rounded-lg m-0.5 mt-8">
@@ -313,7 +321,7 @@ <h3 class="text-2xl font-semibold">Pro — <b>$3 USD</b> per month, per site</h3
 					<svg class="text-gray-500 w-5 h-5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
 						<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
 					</svg>
-					<a href="#global-search" class="text-blue-500 font-bold">Search for orders from any admin page</a>
+					<a href="#global-search" class="text-blue-500 font-bold">Search orders from any admin page</a>
 				</li>
 				<li class="py-4 flex items-center gap-2">
 					<svg class="text-gray-500 w-5 h-5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">