From 6d0f0d217750b9e5713bc5e7d314c131904a6dfe Mon Sep 17 00:00:00 2001
From: rzmk <30333942+rzmk@users.noreply.github.com>
Date: Fri, 27 Sep 2024 09:38:35 -0400
Subject: [PATCH] feat: add download from the Microsoft Store button

---
 src/components/Hero.jsx | 87 ++++++++++++++++++++++++-----------------
 1 file changed, 51 insertions(+), 36 deletions(-)

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index cc87add..d533fb3 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -121,42 +121,57 @@ export const Hero = () => {
                 >
                     <div className="grid grid-cols-1 place-items-center gap-2 sm:flex-row mt-14 mb-24 sm:mb-40 justify-center">
                         {downloadData && OS !== "unknown" ? (
-                            <>
-                                <p className="text-white text-md text-center mx-auto mb-4">
-                                    Download qsv pro and explore the free plan or unlock features with a paid plan.
-                                </p>
-                                <div className="flex justify-center">
-                                    {Object.keys(downloadData).map(
-                                        (platform) => (
-                                            <div
-                                                key={platform}
-                                                className={`mx-4 ${
-                                                    platform === OS
-                                                        ? "text-white text-xl font-bold"
-                                                        : "text-white"
-                                                }`}
-                                            >
-                                                {downloadData[platform].map(
-                                                    (download, index) => (
-                                                        <a
-                                                            key={index}
-                                                            href={`https://github.com/dathere/qsv-pro-releases/releases/download/${name}/${download[1]}`} // Replace with actual download path
-                                                            className={`block lg:min-w-96 text-white font-bold py-2 px-4 rounded mt-4 ${
-                                                                platform === OS
-                                                                    ? " bg-teal-600 hover:bg-teal-700"
-                                                                    : " bg-blue-500 hover:bg-blue-700"
-                                                            }`}
-                                                            download
-                                                        >
-                                                            {download[0]}
-                                                        </a>
-                                                    )
-                                                )}
-                                            </div>
-                                        )
-                                    )}
-                                </div>
-                            </>
+                          <>
+                              <p className="text-white text-md text-center mx-auto mb-4">
+                                  Download qsv pro and explore the free plan
+                                  or unlock features with a paid plan.
+                              </p>
+                              <div className="flex justify-center">
+                                  {Object.keys(downloadData).map(
+                                      (platform) => (
+                                          <div
+                                              key={platform}
+                                              className={`mx-4 ${
+                                                  platform === OS
+                                                      ? "text-white text-xl font-bold"
+                                                      : "text-white"
+                                              }`}
+                                          >
+                                              {downloadData[platform].map(
+                                                  (download, index) => (
+                                                      <>
+                                                          {platform ===
+                                                              "windows" && (
+                                                              <div className="flex justify-center">
+                                                                  <a href="https://apps.microsoft.com/detail/xpffdj3f1jsztf?mode=full">
+                                                                      <img
+                                                                          src="https://get.microsoft.com/images/en-us%20light.svg"
+                                                                          width="200"
+                                                                      />
+                                                                  </a>
+                                                              </div>
+                                                          )}
+                                                          <a
+                                                              key={index}
+                                                              href={`https://github.com/dathere/qsv-pro-releases/releases/download/${name}/${download[1]}`} // Replace with actual download path
+                                                              className={`block lg:min-w-96 text-white font-bold py-2 px-4 rounded mt-4 ${
+                                                                  platform ===
+                                                                  OS
+                                                                      ? " bg-teal-600 hover:bg-teal-700"
+                                                                      : " bg-blue-500 hover:bg-blue-700"
+                                                              }`}
+                                                              download
+                                                          >
+                                                              {download[0]}
+                                                          </a>
+                                                      </>
+                                                  )
+                                              )}
+                                          </div>
+                                      )
+                                  )}
+                              </div>
+                          </>
                         ) : (
                             <>
                                 <a