From b4f34c76f6a984d439a7498d66e9601e842d2de8 Mon Sep 17 00:00:00 2001
From: WitaLisek <kacper.dabkowski28@gmail.com>
Date: Sun, 19 Jan 2025 17:03:02 +0100
Subject: [PATCH] fix: Mobile

---
 frontend/app/app.vue                          |  2 +-
 .../app/components/{logo.vue => Logo.vue}     |  4 --
 frontend/app/pages/index.vue                  | 48 +++++++------------
 3 files changed, 19 insertions(+), 35 deletions(-)
 rename frontend/app/components/{logo.vue => Logo.vue} (97%)

diff --git a/frontend/app/app.vue b/frontend/app/app.vue
index 8e7f33e..b0fcb69 100644
--- a/frontend/app/app.vue
+++ b/frontend/app/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="text-black dark:text-white">
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
diff --git a/frontend/app/components/logo.vue b/frontend/app/components/Logo.vue
similarity index 97%
rename from frontend/app/components/logo.vue
rename to frontend/app/components/Logo.vue
index e9164e2..0234c9d 100644
--- a/frontend/app/components/logo.vue
+++ b/frontend/app/components/Logo.vue
@@ -1,7 +1,3 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
   <svg width="2261.9407" height="2876.5688" viewBox="0 0 598.4718 761.09217" xmlns="http://www.w3.org/2000/svg">
     <g transform="translate(-191.55971,-145.82944)" stroke-width="20" fill="none" stroke="currentColor">
diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue
index d916676..bfdef11 100644
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -1,34 +1,22 @@
-<script setup lang="ts">
-</script>
-
 <template>
-  <div class="px-4 py-4 bg-gray-100 dark:bg-zinc-900">
-    <div class="flex justify-center items-center h-screen">
-      <logo class="fill-current text-black dark:text-white max-h-96 max-w-96 mr-12" src="img/logo.svg" alt="Hack4Krak logo" />
-      <USeparator orientation="vertical" class="h-88" size="lg" :ui="{ border: 'border-black dark:border-white' }" />
-      <div class="ml-10 text-black dark:text-white">
-        <div class="text-8xl font-semibold">
-          Hack4Krak
-        </div>
-        <div class="mt-4 mb-10 h-fit w-[600px] text-lg text-black/80 dark:text-white/80">
-          Organization responsible for managing the largest Capture the Flag (CTF) competition for high school students in Kraków, Poland.
-        </div>
-        <div class="flex text-4xl font-medium text-black/90 dark:text-white/90">
-          Strona w trakcie tworzenia
-        </div>
-        <div>
-          <div class="mt-10 flex text-4xl items-center">
-            <a class="h-fit w-32 mr-32" href="https://discord.gg/ASPqckzEd8">
-              <Icon name="logos:discord" class="[&>path]:fill-black dark:[&>path]:fill-white" mode="svg" alt="Official logo of Discord" />
-            </a>
-            <a class="h-fit w-12 text-black dark:text-white" href="https://github.com/Hack4Krak/Hack4KrakSite/">
-              <Icon name="mdi:github" />
-            </a>
-            <a class="h-fit w-24 text-black dark:text-white" href="https://github.com/Hack4Krak/Hack4KrakSite/">
-              <Icon name="octicon:logo-github-24" />
-            </a>
-          </div>
-        </div>
+  <div class="flex flex-col md:flex-row justify-center items-center h-screen bg-gray-100 dark:bg-zinc-900">
+    <Logo class="max-h-48 max-w-48 md:max-h-96 md:max-w-96 md:mr-12" />
+    <USeparator orientation="vertical" class="h-88 md:block hidden" size="lg" :ui="{ border: 'border-black dark:border-white' }" />
+    <div class="mt-5 md:mt-0 md:ml-10 text-center md:text-left dark:text-white">
+      <h1 class="text-5xl md:text-8xl font-semibold">
+        Hack4Krak
+      </h1>
+      <p class="mt-4 mb-10 text-base md:text-lg max-w-xs md:max-w-150">
+        Organization responsible for managing the largest Capture the Flag (CTF) competition for high school students in Kraków, Poland.
+      </p>
+      <div class="mt-10 flex justify-center md:justify-start h-10 text-2xl md:text-4xl items-center">
+        <a class="mr-5" href="https://discord.gg/ASPqckzEd8" target="_blank">
+          <Icon name="logos:discord" class="[&>path]:fill-black dark:[&>path]:fill-white" mode="svg" alt="Discord" />
+        </a>
+        <a class="flex" href="https://github.com/Hack4Krak/Hack4KrakSite/" target="_blank">
+          <Icon name="mdi:github" class="mr-2" alt="" />
+          <Icon name="octicon:logo-github-24" alt="GitHub" />
+        </a>
       </div>
     </div>
   </div>