Add first testimonials

assets/style.css

@@ -7,3 +7,9 @@
 	mask-size: contain;
 	mask-repeat: no-repeat;
 }
+
+.star {
+	mask-image: url(/images/star.svg);
+	mask-size: contain;
+	mask-repeat: no-repeat;
+}

layouts/index.html

@@ -1,13 +1,54 @@
 {{ define "main" }}
-<section class="pt-40 pb-32 px-4 text-center bg-gradient-to-b from-[#9D6095B3] to-[#E8A04DB3]">
+<section class="pt-40 pb-16 px-4 text-center bg-gradient-to-b from-[#9D6095B3] to-[#E8A04DB3]">
 	<h1 class="text-white text-5xl font-bold mb-16">Better WooCommerce order management.</h1>
 	<img
 		src="images/dashify-order-list.png"
 		alt="Screenshot of the WooCommerce order list page with Dashify styles and functionality."
 		class="max-w-full lg:max-w-7xl lg:w-none mx-auto rounded-lg shadow-2xl"
 	>
-	<p class="text-white text-3xl font-semibold mt-16 mb-12">Search, navigate, and manage orders faster with Dashify.</p>
-	<a href="https://wordpress.org/plugins/dashify/" class="py-4 px-6 rounded-full bg-gray-800 text-gray-50 text-lg font-semibold hover:shadow-lg transition">Get Dashify for free</a>
+	<div class="mt-28">
+		<p
+			class="text-white text-[2.5rem] font-semibold mb-8"
+		>Search, navigate, and manage orders faster with Dashify.</p>
+		<a
+			href="https://wordpress.org/plugins/dashify/"
+			class="inline-block py-4 px-6 rounded-full bg-gray-800 text-gray-50 text-2xl font-semibold hover:shadow-lg transition"
+		>Get Dashify for free</a>
+	</div>
+	<article class="flex flex-col gap-4 md:gap-0 md:flex-row align-middle mt-28 xl:mx-20 text-left">
+		<article class="flex flex-col gap-4 p-8 mx-8 md:w-1/2 bg-gray-50 rounded-lg shadow-md">
+			<div class="flex">
+				<span class="star inline-block bg-[#e26f56] w-[30px] h-[30px]"></span>
+				<span class="star inline-block bg-[#e26f56] w-[30px] h-[30px]"></span>
+				<span class="star inline-block bg-[#e26f56] w-[30px] h-[30px]"></span>
+				<span class="star inline-block bg-[#e26f56] w-[30px] h-[30px]"></span>
+				<span class="star inline-block bg-[#e26f56] w-[30px] h-[30px]"></span>
+			</div>
+			<p>I’ve been recommending clients use Shopify, because it’s a lot easier to use for beginners, but this totally changes the usability of WooCommerce. This is really excellent.</p>
+			<p>
+				<a
+					href="https://wordpress.org/support/topic/beautiful-391/"
+					class="text-blue-500 font-bold"
+				>@vhmc41</a>
+			</p>
+		</article>
+		<article class="flex flex-col gap-4 p-8 mx-8 md:w-1/2 bg-gray-50 rounded-lg shadow-md">
+			<div class="flex">
+				<span class="star inline-block bg-[#e26f56] w-[30px] h-[30px]"></span>
+				<span class="star inline-block bg-[#e26f56] w-[30px] h-[30px]"></span>
+				<span class="star inline-block bg-[#e26f56] w-[30px] h-[30px]"></span>
+				<span class="star inline-block bg-[#e26f56] w-[30px] h-[30px]"></span>
+				<span class="star inline-block bg-[#e26f56] w-[30px] h-[30px]"></span>
+			</div>
+			<p>I’m often ashamed of showing the WooCommerce backend to my clients who deal daily with various “easy-to-use” SaaS. This plugin dramatically improved the WooCommerce user experience out-of-the-box.</p>
+			<p>
+				<a
+					href="https://wordpress.org/support/topic/out-of-the-box-modern-woocommerce-backend-design/"
+					class="text-blue-500 font-bold"
+				>@digitaltreecompany</a>
+			</p>
+		</article>
+	</article>
 </section>
 <section id="features" class="pt-16 px-4 max-w-7xl mx-auto scroll-mt-16">
 	<h2 class="text-4xl text-center font-bold text-gray-700 mb-8">How does Dashify make WooCommerce better?</h2>