From 44ce1736546518254d4f5b75ea7f9fb14582aba3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kry=C5=A1tof=20Korb?= <krystof@korb.cz>
Date: Tue, 17 Sep 2024 10:56:50 +0200
Subject: [PATCH] Update home with region & senate coming soon

---
 frontend/src/routes/index/IndexPage.vue | 66 ++++++++++++++++++++-----
 1 file changed, 53 insertions(+), 13 deletions(-)

diff --git a/frontend/src/routes/index/IndexPage.vue b/frontend/src/routes/index/IndexPage.vue
index b97bf109..ef42a548 100644
--- a/frontend/src/routes/index/IndexPage.vue
+++ b/frontend/src/routes/index/IndexPage.vue
@@ -84,19 +84,59 @@ const handleSubscribe = async () => {
       <BlobComponent color="blue" class="blob1" />
       <BlobComponent color="red" class="blob2" />
       <StackComponent spacing="medium" centered class="calc-main">
-        <BodyText size="medium" tag="h1" color="fg-strong">
-          <strong>Volby do Senátu a zastupitelstev krajů 2024</strong
-          ><br />
-          20. a 21. září 2024
-          <br />
-        </BodyText>
-        <HeadlineText tag="p" size="small">
-          Krajské a senátní volby
-          <span style="color: rgb(var(--color-neutral-fg))"> 2024 </span>
-        </HeadlineText>
-        <BodyText size="large"
-          >Připravujeme pro vás volební kalkulačku pro krajské a senátní volby</BodyText
-        >
+          <StackComponent spacing="large" centered space-between>
+            <BodyText size="medium" tag="h1" color="fg-strong">
+            <strong>Volby do Senátu a zastupitelstev krajů 2024</strong
+            ><br />
+            20. a 21. září 2024
+            <br />
+          </BodyText>
+          <HeadlineText tag="p" size="small">
+            Krajské a senátní volby
+            <span style="color: rgb(var(--color-neutral-fg))"> 2024 </span>
+          </HeadlineText>
+          <StackComponent horizontal spacing="large" wrap style="justify-content: center;">
+            <StackComponent vertical spacing="small" centered>
+              <ButtonComponent
+                kind="filled"
+                color="primary"
+                @click="
+                  router.push({
+                    name: appRoutes.districtSelectionHackRegion.name,
+                    params: { ...route.params },
+                    query: { ...route.query },
+                  })
+                "
+              >
+                Vybrat kraj
+                <template #iconAfter>
+                  <IconComponent :icon="mdiArrowRight" />
+                </template>
+              </ButtonComponent>
+              <BodyText size="small"> 25 otázek, 5–10 minut</BodyText>
+            </StackComponent>
+            <StackComponent vertical spacing="small" centered>
+              <ButtonComponent
+                kind="filled"
+                color="primary"
+                @click="
+                  router.push({
+                    name: appRoutes.districtSelectionHackSenate.name,
+                    params: { ...route.params },
+                    query: { ...route.query },
+                  })
+                "
+                disabled
+              >
+                Vybrat senátní obvod
+                <template #iconAfter>
+                  <IconComponent :icon="mdiArrowRight" />
+                </template>
+              </ButtonComponent>
+              <BodyText size="small"> Senátní kalkulačku spustíme již brzy! </BodyText>
+            </StackComponent>
+          </StackComponent>
+        </StackComponent>
         <StackComponent class="section" spacing="large" centered>
           <ButtonComponent kind="link" @click="scrollDown">
             <div class="button-content">