style: adjust overall visuals to match previous hackathon (#83)

EdroCode · web-flow · commit 5df823ef2ec3 · 2025-11-29T18:07:46.000Z
* style: adjust overall visuals to match previous hackathon

* chore: format code to pass mix format check

* chore: format code to pass mix format check
diff --git a/lib/ares_web/live/app/account_live/index.html.heex b/lib/ares_web/live/app/account_live/index.html.heex
@@ -1,9 +1,9 @@
 <.navbar fixed={true} />
 
 <main class="min-h-screen bg-black text-white">
-  <div class="max-w-xl mx-auto py-16">
-    <h1 class="text-4xl font-black mb-6 text-center">Personal Information</h1>
-    <p class="text-sm text-gray-300 text-center mb-8">
+  <div class="max-w-xl mx-auto py-16 mt-12">
+    <h1 class="text-6xl font-black mb-6 text-center">Personal Information</h1>
+    <p class="text-2xl text-gray-300 text-center mb-8">
       Use a permanent address where you can receive mail.
     </p>
 
@@ -70,7 +70,7 @@
           placeholder="XXXXX"
           class="w-full bg-white text-black rounded px-3 py-2"
         />
-        <p class="text-xs text-gray-400 mt-1">
+        <p class="text-sm text-gray-400 mt-1">
           Since the registration is closed, you can only register if you have a team waiting for you.
         </p>
       </div>
@@ -83,7 +83,7 @@
       </div>
 
       <div>
-        <label class="block text-sm text-gray-200 mb-2">Notes</label>
+        <label class="block text-base text-gray-200 mb-2">Notes</label>
         <textarea
           name="user[notes]"
           placeholder="If you have any notes about food restrictions or anything else let us know"
@@ -94,23 +94,25 @@
       <div>
         <label class="block text-sm text-gray-200 mb-2">Upload CV</label>
         <input type="file" name="user[cv]" class="text-sm text-gray-200" />
-        <p class="text-xs text-gray-400 mt-1">
+        <p class="text-small text-gray-400 mt-1">
           Upload your CV so that the companies at the event know who you are 👀
         </p>
       </div>
 
       <div class="flex items-center gap-3">
         <label class="inline-flex items-center gap-2">
           <input type="checkbox" name="user[agree]" />
-          <span class="text-sm text-gray-200">
+          <span class="text-base text-gray-200">
             I agree with the
             <a href="/regulamento" class="text-primary underline">event regulations</a>
           </span>
         </label>
       </div>
 
       <div>
-        <button class="px-4 py-2 bg-emerald-600 rounded text-white">Submit</button>
+        <button class="px-4 py-2 bg-[#67b22e] cursor-pointer hover:bg-[#4f8c21] rounded text-white">
+          Submit
+        </button>
       </div>
     </form>
   </div>
diff --git a/lib/ares_web/live/app/faqs_live/index.html.heex b/lib/ares_web/live/app/faqs_live/index.html.heex
@@ -3,14 +3,14 @@
   <div class="min-h-screen bg-black py-8 sm:py-12 md:py-16">
     <div class="max-w-4xl mx-auto px-4 sm:px-6 md:px-8">
       <div class="text-center mb-8 sm:mb-12 md:mb-16">
-        <h1 class="text-white text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black mb-6 sm:mb-8 font-display">
+        <h1 class="text-white text-center tracking-wide text-4xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-6 sm:mb-8 mt-16 font-display">
           Frequently asked questions
         </h1>
         <div class="mb-6 sm:mb-8">
-          <p class="text-white text-sm sm:text-base md:text-lg lg:text-xl leading-relaxed font-mono">
+          <p class="text-white text-center text-sm sm:text-base md:text-lg lg:text-2xl leading-relaxed font-mono">
             HAVE A DIFFERENT QUESTION AND CAN'T FIND THE ANSWER YOU'RE LOOKING FOR? REACH OUT TO OUR SUPPORT TEAM BY
             <a
-              href="mailto:geral@ares.org"
+              href="mailto:geral@bugsbyte.org"
               class="text-blue-400 hover:text-blue-300 underline"
             >
               SENDING US AN EMAIL
@@ -24,7 +24,7 @@
         <%= for faq <- @faqs do %>
           <div class="border-b border-gray-600">
             <button
-              class="w-full text-left py-4 sm:py-5 md:py-6 flex items-center justify-between hover:text-green-400 transition-colors focus:outline-none focus:text-green-400"
+              class="w-full cursor-pointer text-left py-4 sm:py-5 md:py-6 flex items-center justify-between hover:text-green-400 transition-colors focus:outline-none focus:text-green-400"
               data-faq-id={faq["id"]}
               aria-expanded={if faq["expanded"], do: "true", else: "false"}
               type="button"
@@ -53,7 +53,7 @@
               id={"content-#{faq["id"]}"}
               class={"overflow-hidden transition-all duration-300 ease-in-out #{if faq["expanded"], do: "max-h-screen opacity-100 pb-4 sm:pb-5 md:pb-6", else: "max-h-0 opacity-0"}"}
             >
-              <p class="text-gray-300 text-sm sm:text-base md:text-lg leading-relaxed">
+              <p class="text-white text-2xl leading-relaxed mb-6">
                 {faq["answer"]}
               </p>
             </div>
diff --git a/lib/ares_web/live/app/home_live/index.html.heex b/lib/ares_web/live/app/home_live/index.html.heex
@@ -1,32 +1,32 @@
-<div class="h-[100vh] relative overflow-hidden bg-black">
+<div class="h-[100vh] relative overflow-hidden bg-black ">
   <div
-    class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-90"
-    style="background-image: url('/images/background.jpg');"
+    class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-40"
+    style="background-image: url('/images/background.jpg') ;"
   >
   </div>
   <div class="relative z-10 flex items-center justify-center h-full px-8 md:px-16">
-    <div class="flex items-center justify-center gap-8 lg:gap-16 max-w-7xl w-full">
+    <div class="flex items-center justify-center gap-8 lg:gap-16 max-w-7xl w-full ml-32 h-16">
       <div class="text-center lg:text-left">
-        <div class="mb-6">
-          <span class="text-white text-lg md:text-4xl font-light tracking-[0.4em] uppercase">
-            {gettext("Welcome to ")}
+        <div class="mb-2">
+          <span class="text-white font-VT323 tracking-wide text-lg md:text-5xl font-medium tracking-[0.4em] uppercase">
+            {gettext("HACKATHON")}
           </span>
         </div>
 
-        <div class="mb-8">
-          <h1 class="text-white font-black leading-none text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl tracking-tighter">
-            {gettext("BugsByte")}
+        <div class="">
+          <h1 class="text-white font-resegrg tracking-wider leading-none text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-7xl tracking-tighter">
+            {gettext("BUGSBYTE")}
           </h1>
         </div>
 
-        <div class="mb-6">
-          <p class="text-gray-300 text-base sm:text-lg md:text-xl lg:text-2xl mx-auto">
+        <div class="mb-1">
+          <p class="text-gray-300 tracking-wide font-bold text-base sm:text-lg md:text-xl lg:text-3xl mx-auto">
             Peace of mind from prototype to production
           </p>
         </div>
 
         <div class="mb-16">
-          <span class="text-white text-lg md:text-4xl font-light tracking-[0.4em]">
+          <span class="text-white font-VT323 font-bold tracking-wide text-lg md:text-4xl font-light tracking-[0.4em]">
             {gettext("28 - 30 March")}
           </span>
         </div>
@@ -47,7 +47,7 @@
 
 <div class="min-h-screen bg-black py-8 sm:py-12 md:py-16">
   <div class="max-w-6xl mx-auto px-4 sm:px-6 md:px-8">
-    <h2 class="text-white text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black mb-8 sm:mb-12 md:mb-16 text-center">
+    <h2 class="text-white text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black mb-8 sm:mb-12 md:mb-16 tracking-wide text-left">
       What is it?
     </h2>
 
@@ -62,7 +62,7 @@
       </p>
     </div>
 
-    <div class="mt-6 sm:mt-8 md:mt-10 grid max-w-xl grid-cols-1 gap-6 sm:gap-8 text-sm sm:text-base md:text-lg lg:text-xl leading-6 sm:leading-7 text-justify lg:max-w-6xl lg:grid-cols-2 uppercase mx-auto">
+    <div class="mx-auto mt-6 sm:mt-8 md:mt-10 grid max-w-6xl grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8 text-white text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl leading-relaxed text-justify uppercase">
       <div>
         <p class="text-white">
           THIS COMPETITION AIMS TO NOT ONLY SHARPEN AN ENVIRONMENT OF ACTIVE LEARNING, MENTORSHIP,
@@ -94,14 +94,14 @@
       </div>
     </div>
 
-    <div class="w-full max-w-xl lg:max-w-6xl text-left text-base sm:text-lg md:text-xl lg:text-2xl tracking-wide uppercase mt-8 sm:mt-12 md:mt-16 mx-auto">
+    <div class="w-full max-w-xl lg:max-w-6xl text-left text-lg sm:text-lg md:text-xl lg:text-3xl tracking-wide uppercase mt-8 sm:mt-12 md:mt-16 mx-auto">
       <p class="text-white mb-3 sm:mb-4">THE THIRD EDITION WILL BE HAPPENING FROM</p>
-      <p class="text-2xl sm:text-3xl md:text-4xl text-primary uppercase mb-6 sm:mb-8 md:mb-10">
+      <p class="text-2xl sm:text-3xl md:text-5xl text-primary uppercase mb-6 sm:mb-8 md:mb-10">
         28<span class="text-lg sm:text-xl md:text-2xl">TH</span> TO 30<span class="text-lg sm:text-xl md:text-2xl">TH</span> MARCH 2025
       </p>
 
       <p class="text-white mb-3 sm:mb-4">WHERE IS HAPPENING</p>
-      <p class="text-2xl sm:text-3xl md:text-4xl text-primary uppercase">FORUM BRAGA</p>
+      <p class="text-2xl sm:text-3xl md:text-5xl text-primary uppercase">FORUM BRAGA</p>
     </div>
   </div>
 </div>
@@ -168,13 +168,14 @@
 
 <div class="min-h-screen bg-black py-8 sm:py-12 md:py-16">
   <div class="max-w-6xl mx-auto px-4 sm:px-6 md:px-8 w-full">
-    <h2 class="text-white text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black mb-8 sm:mb-12 md:mb-16 text-left">
+    <h2 class="text-white tracking-wide text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black mb-8 sm:mb-6 md:mb-10 text-left">
       Sponsors
     </h2>
 
     <div class="text-left mb-8 sm:mb-12 md:mb-16">
       <p class="text-white text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl leading-relaxed">
-        TAKE A LOOK AT THE SPONSORS AND SUPPORTERS WHO MADE THIS EVENT POSSIBLE.
+        TAKE A LOOK AT THE <span class="text-primary">SPONSORS AND SUPPORTERS</span>
+        WHO MADE THIS EVENT POSSIBLE.
       </p>
     </div>
 
@@ -214,7 +215,7 @@
               <img
                 src={Ares.Companies.icon_path(supporter["icon"])}
                 alt={supporter["title"]}
-                class="h-12 sm:h-14 md:h-16 lg:h-20 object-contain"
+                class="h-12 sm:h-14 md:h-32 lg:h-40 object-contain"
               />
             </a>
           <% end %>
@@ -226,7 +227,7 @@
 
 <div class="min-h-screen bg-black py-8 sm:py-12 md:py-16">
   <div class="max-w-6xl mx-auto px-4 sm:px-6 md:px-8 w-full">
-    <h2 class="text-white text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black mb-8 sm:mb-12 md:mb-16 text-left font-display">
+    <h2 class="text-white tracking-wide text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black mb-2 sm:mb-2 md:mb-6 text-left font-display">
       Gallery
     </h2>
 
diff --git a/lib/ares_web/live/app/team_formation_live/index.html.heex b/lib/ares_web/live/app/team_formation_live/index.html.heex
@@ -3,8 +3,8 @@
 <div class="min-h-screen bg-black text-white pt-28 pb-16 px-4 sm:px-6 lg:px-8">
   <div class="max-w-xl mx-auto">
     <div class="text-center mb-6">
-      <h1 class="md:text-6xl text-3xl font-extrabold tracking-tight mb-2">Team Formation</h1>
-      <p class="text-lg text-gray-300 max-w-2xl mx-auto">
+      <h1 class="md:text-6xl text-3xl font-extrabold tracking-tight mb-3">Team Formation</h1>
+      <p class="text-3xl text-gray-300 max-w-2xl mx-auto">
         If you have already registered, you can join a team or create a new one.
       </p>
     </div>
@@ -41,7 +41,10 @@
       </div>
     </div>
 
-    <div :if={@tab == "create"} class="bg-transparent rounded-lg p-8">
+    <div
+      :if={@tab == "create"}
+      class="bg-transparent rounded-lg p-8 transform scale-125 mt-56 mb-40"
+    >
       <.form
         :let={f}
         for={@changeset}
@@ -64,7 +67,7 @@
               />
             </div>
 
-            <div class="md:col-span-2">
+            <div class="md:col-span-2 ">
               <.input
                 field={f[:description]}
                 type="textarea"
@@ -140,8 +143,8 @@
         
 <!-- Team Members -->
         <div class="border-b border-gray-200 pb-8">
-          <h2 class="text-2xl font-semibold text-white mb-6">Membros da Equipa</h2>
-          <p class="text-sm text-gray-600 mb-6">
+          <h2 class="text-2xl font-semibold text-white mb-4">Membros da Equipa</h2>
+          <p class="text-lg text-gray-600 mb-6 ">
             Adiciona os membros que já tens confirmados (opcional)
           </p>
           
@@ -250,9 +253,9 @@
         <div class="flex justify-center pt-6">
           <button
             type="submit"
-            class="px-4 py-2 bg-emerald-500 hover:bg-emerald-600 text-white rounded-md text-lg inline-flex items-center"
+            class="px-4 py-2 bg-[#67b22e] cursor-pointer hover:bg-[#4f8c21] text-white rounded-md text-lg inline-flex items-center"
           >
-            <.icon name="hero-users" class="w-5 h-5 mr-2" /> Create
+            <.icon name="hero-users" class="w-5 h-5 mr-2  " /> Create
           </button>
         </div>
       </.form>
@@ -309,7 +312,7 @@
         <div class="flex items-center">
           <button
             type="submit"
-            class="px-4 py-2 bg-emerald-500 hover:bg-emerald-600 text-white rounded-md"
+            class="px-4 py-2 bg-emerald-500 hover:bg-emerald-600 text-white rounded-md "
           >
             Create
           </button>
@@ -318,7 +321,7 @@
     </div>
     
 <!-- Additional Info -->
-    <div class="mt-12 bg-black p-6">
+    <div class="mt-12 bg-black p-6 mt-56">
       <h3 class="text-lg font-semibold text-white mb-3">Informações Importantes</h3>
       <ul class="text-gray-300 space-y-4">
         <li class="flex items-start gap-3">
