From 8873a2e4fba1ded0791a86214e500541ae3af503 Mon Sep 17 00:00:00 2001
From: Refaldy <refaldy.rizky22@gmail.com>
Date: Thu, 7 Sep 2023 14:08:50 +0700
Subject: [PATCH 1/2] fix(frontend): responsive hero pages in index.vue

---
 frontend/pages/index.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index ff67308..c1cea00 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -7,11 +7,11 @@ useHead({
 <template>
     <div class="page">
         <section id="hero" class="section">
-            <div class="container | mx-auto px-5">
-                <div class="hero-card | p-12 rounded-2xl blur-bg">
-                    <div class="flex between">
+            <div class="container mx-auto px-5 w-full lg:w-3/4 xl:w-1/2">
+                <div class="hero-card p-12 rounded-2xl blur-bg">
+                    <div class="flex flex-col lg:flex-row lg:grid lg:grid-cols-2">
                         <div class="card-left">
-                            <h1 class="hero-title | mb-8  leading-snug">TeknumConf<br/> 2023</h1>
+                            <h1 class="hero-title mb-8 leading-snug lg:text-3xl xl:text-4xl">TeknumConf<br/> 2023</h1>
                             <h3 v-if="config.public.announcementDate" class="text-xl lg:text-3xl mb-5 flex items-center gap-3">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M19 19H5V8h14m-3-7v2H8V1H6v2H5c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-1V1"/></svg>
                                 <span>{{config.public.announcementDate}}</span>
@@ -20,10 +20,10 @@ useHead({
                                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 6.5A2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5A2.5 2.5 0 0 1 9.5 9A2.5 2.5 0 0 1 12 6.5M12 2a7 7 0 0 1 7 7c0 5.25-7 13-7 13S5 14.25 5 9a7 7 0 0 1 7-7m0 2a5 5 0 0 0-5 5c0 1 0 3 5 9.71C17 12 17 10 17 9a5 5 0 0 0-5-5Z"/></svg>
                                 <span>Depok, Indonesia</span>
                             </h3>
-                            <Btn :isLink="true" to="register" class="mt-15 text-center"  size="xl">Save my spot!</Btn>
+                            <Btn :isLink="true" to="register" class="mt-5 lg:mt-15 text-center" size="xl">Save my spot!</Btn>
                         </div>
-                        <div class="card-right flex flex-grow-1 justify-end items-center">
-                            <img src="@/assets/images/logo-white.png" alt="TeknumConf logo" class="w-100 hidden lg:block rounded-full">
+                        <div class="card-right flex justify-center lg:justify-end items-center">
+                            <img src="@/assets/images/logo-white.png" alt="TeknumConf logo" class="w-1/2 lg:w-full hidden lg:block rounded-full">
                         </div>
                     </div>
                 </div>

From 1e10418c2d1e6bf50c21d373b547df5758e9e00f Mon Sep 17 00:00:00 2001
From: Refaldy <refaldy.rizky22@gmail.com>
Date: Thu, 7 Sep 2023 14:46:54 +0700
Subject: [PATCH 2/2] fix(frontend): responsive hero pages in index.vue #2

---
 frontend/pages/index.vue | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index c1cea00..bbb4772 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -7,11 +7,11 @@ useHead({
 <template>
     <div class="page">
         <section id="hero" class="section">
-            <div class="container mx-auto px-5 w-full lg:w-3/4 xl:w-1/2">
-                <div class="hero-card p-12 rounded-2xl blur-bg">
-                    <div class="flex flex-col lg:flex-row lg:grid lg:grid-cols-2">
+            <div class="container | mx-auto px-5">
+                <div class="hero-card | p-12 rounded-2xl blur-bg">
+                    <div class="flex between">
                         <div class="card-left">
-                            <h1 class="hero-title mb-8 leading-snug lg:text-3xl xl:text-4xl">TeknumConf<br/> 2023</h1>
+                            <h1 class="hero-title | mb-8  leading-snug">TeknumConf<br/> 2023</h1>
                             <h3 v-if="config.public.announcementDate" class="text-xl lg:text-3xl mb-5 flex items-center gap-3">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M19 19H5V8h14m-3-7v2H8V1H6v2H5c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-1V1"/></svg>
                                 <span>{{config.public.announcementDate}}</span>
@@ -20,10 +20,10 @@ useHead({
                                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 6.5A2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5A2.5 2.5 0 0 1 9.5 9A2.5 2.5 0 0 1 12 6.5M12 2a7 7 0 0 1 7 7c0 5.25-7 13-7 13S5 14.25 5 9a7 7 0 0 1 7-7m0 2a5 5 0 0 0-5 5c0 1 0 3 5 9.71C17 12 17 10 17 9a5 5 0 0 0-5-5Z"/></svg>
                                 <span>Depok, Indonesia</span>
                             </h3>
-                            <Btn :isLink="true" to="register" class="mt-5 lg:mt-15 text-center" size="xl">Save my spot!</Btn>
+                            <Btn :isLink="true" to="register" class="mt-5 lg:mt-15 text-center btn-save-my-spot" size="xl">Save my spot!</Btn>
                         </div>
-                        <div class="card-right flex justify-center lg:justify-end items-center">
-                            <img src="@/assets/images/logo-white.png" alt="TeknumConf logo" class="w-1/2 lg:w-full hidden lg:block rounded-full">
+                        <div class="card-right flex flex-grow-1 justify-end items-center">
+                            <img src="@/assets/images/logo-white.png" alt="TeknumConf logo" class="w-100 hidden lg:block rounded-full">
                         </div>
                     </div>
                 </div>
@@ -61,6 +61,14 @@ useHead({
     outline: 2px solid rgba(255, 255, 255, 0.245);
     transition: all .3s;
 }
+
+
+@media screen and (max-width: 768px) {
+  .card-left h1 {
+    font-size: 32px;
+  }
+}
+
 .hero-card:hover {
     background-color: rgba(255, 255, 255, 0.115);
     outline: 2px solid white;