From 39451e0a8f35af1ac41e1b548fa43aa3abc37dcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Enric=20Perpiny=C3=A0=20Pitarch?=
 <56732262+evilmonkey19@users.noreply.github.com>
Date: Thu, 4 Apr 2024 23:23:47 +0200
Subject: [PATCH] Fixed button, added support for mobile in Header and landing
 part

---
 .vscode/launch.json          | 23 +++++++++++++++++++++++
 components/Header.tsx        |  2 +-
 components/Landing.tsx       | 29 +++++++++++++++++------------
 static/icons/union_green.svg |  6 ------
 static/icons/union_pink.svg  |  6 ------
 5 files changed, 41 insertions(+), 25 deletions(-)
 create mode 100644 .vscode/launch.json
 delete mode 100644 static/icons/union_green.svg
 delete mode 100644 static/icons/union_pink.svg

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..1e39838
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,23 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "request": "launch",
+            "name": "Launch Program",
+            "type": "node",
+            "program": "${workspaceFolder}/dev.ts",
+            "cwd": "${workspaceFolder}",
+            "runtimeExecutable": "/Users/enric/.deno/bin/deno",
+            "runtimeArgs": [
+                "run",
+                "--inspect-wait",
+                "--allow-all",
+                "--watch=static/,routes/,components/"
+            ],
+            "attachSimplePort": 9229
+        }
+    ]
+}
\ No newline at end of file
diff --git a/components/Header.tsx b/components/Header.tsx
index 871054c..d643bcf 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -4,7 +4,7 @@ export default function Header() {
       <a className="text-2xl font-bold" href="/" title="Jump to the beginning">
         <img src="/logo.png" alt="Logo from ET English Theater" width="40px" height="40px" />
       </a>
-      <div className="flex gap-4 md:gap-16 text-xl text-black-950 font-light">
+      <div className="flex gap-4 md:gap-16 text-lg md:text-xl text-black-950 font-light">
         <a href="#events" title="Jump to events">Events</a>
         <a href="#productions" title="Jump to productions">Productions</a>
       </div>
diff --git a/components/Landing.tsx b/components/Landing.tsx
index 827aecc..9fc2416 100644
--- a/components/Landing.tsx
+++ b/components/Landing.tsx
@@ -1,22 +1,27 @@
 const Landing = () => (
-  <div className="h-svh bg-contain bg-right bg-no-repeat bg-black md:grid grid-cols-7" style="background-image: url('background_landing.webp')">
+  <div className="h-svh bg-cover md:bg-contain bg-right bg-no-repeat bg-black md:grid grid-cols-7" 
+    style={{ backgroundImage: "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background_landing.webp')" }}>
         <div className="col-span-1"></div>
-        <div className="col-span-5 h-svh flex flex-col justify-center items-left gap-8 text-gray-50">
+        <div className="col-span-5 h-svh flex flex-col justify-center items-left gap-8 text-gray-50 mx-4 md:mx-0">
           <div className="md:h-16"></div>
-          <p className="text-8xl text-left text-balance">English Theater Improv Club</p>
+          <p className="text-6xl md:text-8xl text-left text-balance">English Theater Improv Club</p>
           <div className="flex gap-4 w-max-32">
-            <p className="font-rye text-8xl text-[#5063a1] self-place-top h-24">“</p>
-            <p className="text-balance font-light leading-loose self-center text-lg">We are a theater association based in Stockholm, Sweden. 
+            <p className="font-rye text-6xl md:text-8xl text-[#5063a1] self-place-top h-24">“</p>
+            <p className="text-pretty md:text-balance font-light leading-loose self-center text-lg">We are a theater association based in Stockholm, Sweden. 
             We try to bring the joy of <span className="font-bold">improv and theater</span> to local and international students.</p>
           </div>
-          <div className="flex gap-4 text-xl">
-            <a href="/" className="relative">
-              <img className="w-full" src="/icons/union_green.svg" />
-              <p className="text-[#159288] hover:bg-[#159288] hover:text-gray-50 absolute top-5 left-12 text-2xl font-semibold w-full">Hire us</p>
+          <div className="flex flex-col md:flex-row gap-2 md:gap-4 items-center text-xl">
+            <a href="/" className="group">
+              <svg class="stroke-[#159288] group-hover:fill-[#159288]" height="120" width="215" xmlns="http://www.w3.org/2000/svg">
+                <polygon points="10,10 200,10 200,90 70,90 20,115 30,90 10,90" class="stroke-[3]" />
+                <text x="60" y="60" class="group-hover:stroke-gray-50 group-hover:fill-gray-50 fill-[#159288] font-sans text-3xl stroke-1">Hire us</text>
+              </svg>
             </a>
-            <a href="/" className="relative">
-              <img className="w-full" src="/icons/union_pink.svg" />
-              <p className="text-[#b961c1] hover:text-[#ffce5f] absolute top-5 left-12 text-2xl font-semibold">Join us</p>
+            <a href="/" class="group">
+              <svg class="stroke-[#b961c1] group-hover:fill-[#b961c1]" height="120" width="215" xmlns="http://www.w3.org/2000/svg">
+              <polygon points="10,10 200,10 200,90 70,90 20,115 30,90 10,90" class="stroke-[3]" />
+                  <text x="60" y="60" class="group-hover:stroke-gray-50 group-hover:fill-gray-50 fill-[#b961c1] font-sans text-3xl stroke-1">Join us</text>
+                </svg> 
             </a>
           </div>
         <div className="col-span-1"></div>
diff --git a/static/icons/union_green.svg b/static/icons/union_green.svg
deleted file mode 100644
index 548a87f..0000000
--- a/static/icons/union_green.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="188" height="87" viewBox="0 0 188 87" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1_13_16" fill="white">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M188 0H0V72H16.9792L11.75 86.75L42.4067 72H188V0Z"/>
-</mask>
-<path d="M0 0V-2H-2V0H0ZM188 0H190V-2H188V0ZM0 72H-2V74H0V72ZM16.9792 72L18.8642 72.6683L19.8102 70H16.9792V72ZM11.75 86.75L9.86496 86.0817L8.243 90.6568L12.6171 88.5522L11.75 86.75ZM42.4067 72V70H41.9506L41.5396 70.1978L42.4067 72ZM188 72V74H190V72H188ZM0 2H188V-2H0V2ZM2 72V0H-2V72H2ZM16.9792 70H0V74H16.9792V70ZM15.0941 71.3317L9.86496 86.0817L13.635 87.4183L18.8642 72.6683L15.0941 71.3317ZM12.6171 88.5522L43.2738 73.8022L41.5396 70.1978L10.8829 84.9478L12.6171 88.5522ZM188 70H42.4067V74H188V70ZM186 0V72H190V0H186Z" fill="#17A398" mask="url(#path-1-inside-1_13_16)"/>
-</svg>
diff --git a/static/icons/union_pink.svg b/static/icons/union_pink.svg
deleted file mode 100644
index c1ada91..0000000
--- a/static/icons/union_pink.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="184" height="87" viewBox="0 0 184 87" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1_13_20" fill="white">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M184 0H0V72H24.5656L17 86.75L61.3544 72H184V0Z"/>
-</mask>
-<path d="M0 0V-2H-2V0H0ZM184 0H186V-2H184V0ZM0 72H-2V74H0V72ZM24.5656 72L26.3452 72.9128L27.8392 70H24.5656V72ZM17 86.75L15.2204 85.8372L12.9866 90.1923L17.6311 88.6478L17 86.75ZM61.3544 72V70H61.0305L60.7233 70.1022L61.3544 72ZM184 72V74H186V72H184ZM0 2H184V-2H0V2ZM2 72V0H-2V72H2ZM24.5656 70H0V74H24.5656V70ZM22.7861 71.0872L15.2204 85.8372L18.7796 87.6628L26.3452 72.9128L22.7861 71.0872ZM17.6311 88.6478L61.9855 73.8978L60.7233 70.1022L16.3689 84.8522L17.6311 88.6478ZM184 70H61.3544V74H184V70ZM182 0V72H186V0H182Z" fill="#EA7AF4" mask="url(#path-1-inside-1_13_20)"/>
-</svg>