From e92d58b9728c2beb4846b3104deac2f68bcd6224 Mon Sep 17 00:00:00 2001
From: Kevin Stederoth <43753494+ksted@users.noreply.github.com>
Date: Tue, 12 Nov 2024 11:42:37 +0100
Subject: [PATCH] fix: hero button link (#792)

* fix: add link to hero content button

* chore: update demo data with links

* docs: update changelog
---
 apps/web/components/ui/HeroContent/HeroContent.vue     | 10 ++++++++--
 .../useHomepageData/homepageTemplateData.json          |  6 +++---
 docs/changelog/changelog_en.md                         |  1 +
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/ui/HeroContent/HeroContent.vue b/apps/web/components/ui/HeroContent/HeroContent.vue
index 747630f2a..cf1c42148 100644
--- a/apps/web/components/ui/HeroContent/HeroContent.vue
+++ b/apps/web/components/ui/HeroContent/HeroContent.vue
@@ -30,7 +30,9 @@
         {{ heroItemProps.description }}
       </p>
       <div class="flex flex-col md:flex-row gap-4 mt-6">
-        <UiButton size="lg">{{ heroItemProps.callToAction }}</UiButton>
+        <UiButton :tag="NuxtLink" :to="localePath(props.heroItemProps.link ?? '')" size="lg">{{
+          heroItemProps.callToAction
+        }}</UiButton>
       </div>
     </div>
   </div>
@@ -39,8 +41,12 @@
 <script setup lang="ts">
 import { HeroContentProps, SizeKey } from '../HeroCarousel/types';
 
-defineProps<{
+const props = defineProps<{
   heroItemProps: HeroContentProps;
   currentSizeKey: SizeKey;
 }>();
+
+const localePath = useLocalePath();
+
+const NuxtLink = resolveComponent('NuxtLink');
 </script>
diff --git a/apps/web/composables/useHomepageData/homepageTemplateData.json b/apps/web/composables/useHomepageData/homepageTemplateData.json
index 9b9c73c53..ef3893b9b 100644
--- a/apps/web/composables/useHomepageData/homepageTemplateData.json
+++ b/apps/web/composables/useHomepageData/homepageTemplateData.json
@@ -16,7 +16,7 @@
       "description": "Immerse yourself in rich, crystal-clear audio with our cutting-edge headphones. Designed for the ultimate listening experience, whether you're a casual listener or an audiophile. Discover the perfect blend of style, comfort, and sound quality that elevates your music to new heights.\n\n",
       "descriptionColor": "#000000",
       "callToAction": "Order Now",
-      "link": ""
+      "link": "/gear"
     },
     {
       "image": {
@@ -33,7 +33,7 @@
       "description": "Unleash your audio with our state-of-the-art wireless earbuds. Designed for all-day comfort and uncompromised sound quality, these earbuds deliver crisp highs and deep bass, letting you enjoy your music without any distractions. Discover freedom with a perfect fit, long battery life, and intuitive controls.",
       "descriptionColor": "#000000",
       "callToAction": "Shop Earbuds",
-      "link": ""
+      "link": "/gear"
     },
     {
       "image": {
@@ -50,7 +50,7 @@
       "description": "Transform your space with our portable speakers that pack a punch. Crafted for superior sound performance, these speakers are perfect for home or on the go. With easy connectivity and a sleek design, elevate your listening experience whether you're indoors or outdoors.",
       "descriptionColor": "#000000",
       "callToAction": "Browse Speakers",
-      "link": ""
+      "link": "/gear"
     }
   ],
   "valueProposition": [
diff --git a/docs/changelog/changelog_en.md b/docs/changelog/changelog_en.md
index 978eb4208..720adad5f 100644
--- a/docs/changelog/changelog_en.md
+++ b/docs/changelog/changelog_en.md
@@ -15,6 +15,7 @@
 - Load more accurate images sizes for product page.
 - Reload page after login so the customer class affects prices and categories
 - Empty cart notification was displayed when user navigates to cart. Now only shown when the cart is emptied in checkout.
+- The hero button now links to the provided destination.
 
 ## v1.7.0 (2024-11-06) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.6.0...v1.7.0" target="_blank" rel="noopener"><b>Overview of all changes</b></a>