🎨 style(index.md): update feature section with icons and improve read…

…ability

The feature section in the index.md file has been updated to include icons for each feature. This improves the visual representation of the features and makes it easier to identify each feature at a glance. Additionally, the formatting of the feature section has been improved for better readability.

index.md

@@ -18,14 +18,41 @@ hero:
       link: /introduction
 
 features:
-  - title: 💰 Payment Intent
+  - icon: 💰
+    title: Payment Intent
     details: Accept payment methods from around the globe with a single secure, embeddable UI component
-  - title: 🔗 Link Authentication Element
+  - icon: 🔗
+    title: Link Authentication Element
     details: Accept a payment with Stripe Link Payment
-  - title: 💸 Pay Button Element
+  - icon: 💸
+    title: Pay Button Element
     details: Show multiple one-click payment buttons (including Apple Pay and Google Pay) to your customers at the same time
-  - title: 💳 Address Element
+  - icon: 💳
+    title: Address Element
     details: The Address Element is an embeddable UI component that autofills your customers’ billing and shipping addresses quickly and accurately
-  - title: 🧱 Advanced UI Elements
+  - icon: 🧱
+    title: Advanced UI Elements
     details: Implement more of Stripe's advanced UI Elements
 ---
+
+<!-- <style>
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+</style> -->