From 19984aa25c7b40e1ac8cf807c06a19d4ef13ae92 Mon Sep 17 00:00:00 2001
From: PedroCoutinho <edr0c0de@protonmail.com>
Date: Thu, 11 Dec 2025 22:19:01 +0000
Subject: [PATCH] feat: add squiggly effect

---
 assets/css/app.css                            |  22 +++-
 lib/ares_web/components/footer_component.ex   |   2 +-
 .../components/layouts/root.html.heex         |   3 +-
 .../live/app/home_live/index.html.heex        | 106 ++++++++++++++++--
 4 files changed, 113 insertions(+), 20 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 7c31c2bd..db1b3645 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -11,12 +11,6 @@
    The heroicons installation itself is managed by your mix.exs */
 @plugin "../vendor/heroicons";
 
-/* daisyUI Tailwind Plugin. You can update this file by fetching the latest version with:
-   curl -sLO https://github.com/saadeghi/daisyui/releases/latest/download/daisyui.js
-   Make sure to look at the daisyUI changelog: https://daisyui.com/docs/changelog/ */
-@plugin "../vendor/daisyui" {
-  themes: false;
-}
 
 /* Add variants based on LiveView classes */
 @custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
@@ -46,6 +40,22 @@
   --color-border: rgba(249, 250, 251, 0.1);
 }
 
+.squiggle-slow {
+  filter: url(#melt-flow-slow);
+  -webkit-filter: url(#melt-flow-slow);
+}
+
+.squiggle-medium {
+  filter: url(#melt-flow-medium);
+  -webkit-filter: url(#melt-flow-medium);
+}
+
+.squiggle-fast {
+  filter: url(#melt-flow-fast);
+  -webkit-filter: url(#melt-flow-fast);
+}
+
+
 /* Custom CSS classes for the colors */
 
 .text-secondary {
diff --git a/lib/ares_web/components/footer_component.ex b/lib/ares_web/components/footer_component.ex
index 6071e26f..c5daa004 100644
--- a/lib/ares_web/components/footer_component.ex
+++ b/lib/ares_web/components/footer_component.ex
@@ -12,7 +12,7 @@ defmodule AresWeb.FooterComponent do
     <footer class="relative flex h-48 items-center justify-center">
       <div class="absolute inset-0 overflow-hidden">
         <img
-          class="h-full w-full object-cover object-[40%_83%] opacity-100"
+          class="h-full w-full object-cover object-[40%_83%] opacity-100 squiggle-fast"
           src="/images/footer-background.png"
           alt="Footer background"
         />
diff --git a/lib/ares_web/components/layouts/root.html.heex b/lib/ares_web/components/layouts/root.html.heex
index 65ace872..d0c81f0a 100644
--- a/lib/ares_web/components/layouts/root.html.heex
+++ b/lib/ares_web/components/layouts/root.html.heex
@@ -4,9 +4,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
-    <.live_title default="Ares" suffix=" · Phoenix Framework">
+    <.live_title default="Hackathon BugsByte" suffix=" · Phoenix Framework">
       {assigns[:page_title]}
     </.live_title>
+    <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
     <link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>
     </script>
diff --git a/lib/ares_web/live/app/home_live/index.html.heex b/lib/ares_web/live/app/home_live/index.html.heex
index e846dd2a..fd0ae758 100644
--- a/lib/ares_web/live/app/home_live/index.html.heex
+++ b/lib/ares_web/live/app/home_live/index.html.heex
@@ -1,6 +1,6 @@
 <div class="h-[100vh] overflow-hidden bg-black z-10">
   <div
-    class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-40"
+    class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-40 squiggle-slow"
     style="background-image: url('/images/background.jpg') ;"
   >
   </div>
@@ -14,13 +14,95 @@
         </div>
 
         <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">
+          <svg width="0" height="0" class="absolute">
+            <defs>
+              <filter id="melt-flow-slow">
+                <feTurbulence
+                  type="fractalNoise"
+                  baseFrequency="0.008 0.012"
+                  numOctaves="5"
+                  result="turbulence"
+                >
+                  <animate
+                    attributeName="seed"
+                    from="1"
+                    to="6000"
+                    dur="4220s"
+                    repeatCount="indefinite"
+                  />
+                </feTurbulence>
+
+                <feDisplacementMap
+                  in="SourceGraphic"
+                  in2="turbulence"
+                  scale="18"
+                  xChannelSelector="R"
+                  yChannelSelector="G"
+                />
+
+                <feGaussianBlur stdDeviation="0.4" />
+              </filter>
+              <filter id="melt-flow-medium">
+                <feTurbulence
+                  type="fractalNoise"
+                  baseFrequency="0.008 0.012"
+                  numOctaves="5"
+                  result="turbulence"
+                >
+                  <animate
+                    attributeName="seed"
+                    from="1"
+                    to="6000"
+                    dur="1220s"
+                    repeatCount="indefinite"
+                  />
+                </feTurbulence>
+
+                <feDisplacementMap
+                  in="SourceGraphic"
+                  in2="turbulence"
+                  scale="18"
+                  xChannelSelector="R"
+                  yChannelSelector="G"
+                />
+
+                <feGaussianBlur stdDeviation="0.4" />
+              </filter>
+              <filter id="melt-flow-fast">
+                <feTurbulence
+                  type="fractalNoise"
+                  baseFrequency="0.008 0.012"
+                  numOctaves="5"
+                  result="turbulence"
+                >
+                  <animate
+                    attributeName="seed"
+                    from="1"
+                    to="6000"
+                    dur="720s"
+                    repeatCount="indefinite"
+                  />
+                </feTurbulence>
+
+                <feDisplacementMap
+                  in="SourceGraphic"
+                  in2="turbulence"
+                  scale="18"
+                  xChannelSelector="R"
+                  yChannelSelector="G"
+                />
+
+                <feGaussianBlur stdDeviation="0.4" />
+              </filter>
+            </defs>
+          </svg>
+          <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 squiggle-medium">
             {gettext("BUGSBYTE")}
           </h1>
         </div>
 
         <div class="mb-16">
-          <span class="text-white font-VT323 font-bold tracking-wide 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>
@@ -64,7 +146,7 @@
 
 <div class="min-h-screen bg-black py-8 sm:py-12 md:py-16">
   <div class="max-w-5xl 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-wider text-center tracking-wider">
       What is it?
     </h2>
 
@@ -74,7 +156,7 @@
         IS A NON-STOP COMPETITIVE PROGRAMMING EVENT THAT AIMS TO
         FOSTER COLLABORATION AND FUN AMONG ITS PARTICIPANTS WHILE PROVIDING THEM WITH
         CLOSER CONTACT WITH ATTENDING COMPANIES. THE EVENT LASTS APPROXIMATELY <span class="text-pink">48 HOURS</span>,
-        DURING WHICH EACH TEAM DEVELOPS A PROJECT BASED ON <span class="text-primary">THEMES PROPOSED BY THE
+        DURING WHICH EACH TEAM DEVELOPS A PROJECT BASED ON <span class="text-primary ">THEMES PROPOSED BY THE
                     SPONSORING COMPANIES</span>. AT THE END OF THE EVENT, THE BEST PROJECTS ARE REWARDED WITH <span class="text-pink">MONETARY PRIZES</span>.
       </p>
     </div>
@@ -89,7 +171,7 @@
           PROJECT SUCCESS. THROUGH TEAMWORK, TIME NEXT STEP IN THEIR PROFESSIONAL AND ACADEMIC
           MANAGEMENT, COMMUNICATION, CREATIVITY, AND JOURNEYS—ALL WHILE ENJOYING THE EXPERIENCE.
           CRITICAL THINKING, PARTICIPANTS WILL DEVELOP A
-          WELL-ROUNDED SKILL SET CRUCIAL FOR ACHIEVING A
+          WELL-ROUNDED SKILL SET CRUCIAL FOR ACHIEVING Awobble
           SUCCESSFUL PROJECT.
         </p>
       </div>
@@ -125,7 +207,7 @@
 
 <div class="min-h-screen bg-black py-16">
   <div class="max-w-5xl mx-auto px-4 sm: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-left">
+    <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 tracking-wider">
       Prizes
     </h2>
 
@@ -185,7 +267,7 @@
 
 <div class="min-h-screen bg-black py-8 sm:py-12 md:py-16">
   <div class="max-w-5xl 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 text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black mb-8 sm:mb-12 md:mb-16 text-left tracking-wide">
       Sponsors
     </h2>
 
@@ -199,7 +281,7 @@
     <div class="mb-8 sm:mb-12 md:mb-16">
       <div class="border border-white rounded-lg p-4 sm:p-6 md:p-8 relative">
         <div class="absolute -top-3 sm:-top-4 left-4 sm:left-8 bg-black px-3 sm:px-4">
-          <span class="text-white text-sm sm:text-base md:text-lg font-medium uppercase">
+          <span class="text-white text-sm sm:text-base md:text-lg font-medium uppercase ">
             SPONSOR
           </span>
         </div>
@@ -221,7 +303,7 @@
     <div class="mb-8 sm:mb-12 md:mb-16">
       <div class="border border-white rounded-lg p-4 sm:p-6 md:p-8 relative">
         <div class="absolute -top-3 sm:-top-4 left-4 sm:left-8 bg-black px-3 sm:px-4">
-          <span class="text-white text-sm sm:text-base md:text-lg font-medium uppercase">
+          <span class="text-white text-sm sm:text-base md:text-lg font-medium uppercase ">
             SUPPORTERS
           </span>
         </div>
@@ -244,7 +326,7 @@
 
 <div class="min-h-screen bg-black py-8 sm:py-12 md:py-16">
   <div class="max-w-5xl 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 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 tracking-wider">
       Gallery
     </h2>
 
@@ -260,7 +342,7 @@
           <img
             src={image_path}
             alt="BugsByte 2025 Gallery Image"
-            class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+            class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110 "
           />
         </div>
       <% end %>