From 55c88ffdf6941fe590d1f6a508fd20cfe669291f Mon Sep 17 00:00:00 2001
From: Ananta Krishnan B <anantukid@gmail.com>
Date: Wed, 7 Aug 2024 13:13:42 +0530
Subject: [PATCH 1/3] chore: made timer partially responsive

---
 src/components/timer/Timer.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/timer/Timer.tsx b/src/components/timer/Timer.tsx
index 676a2f8..82928f6 100644
--- a/src/components/timer/Timer.tsx
+++ b/src/components/timer/Timer.tsx
@@ -26,39 +26,39 @@ const Timer = () => {
   }, []);
 
   return (
-    <div className="max-w-screen-lg h-full bg-gradient-to-r from-[#14357A] via-[#1088AC] to-[#1083A9] rounded-3xl skew-x-[-25deg] mx-auto mt-[-30px] partial-border-gradient w-full">
-      <div className="h-fit w-full timer-bg rounded-xl text-white text-8xl inline-block text-center p-8">
-        <div className="flex justify-around">
-          <div className="w-1/4 float-left">
+    <div className="w-3/5 md:w-full max-w-screen-lg h-full bg-gradient-to-r from-[#14357A] via-[#1088AC] to-[#1083A9] rounded-3xl skew-x-[-25deg] mx-auto mt-[-30px] partial-border-gradient">
+      <div className="h-fit w-full timer-bg rounded-xl text-white text-4xl md:text-8xl inline-block text-center p-4 md:p-8">
+        <div className="flex flex-col md:flex-row justify-around">
+          <div className="w-full md:w-1/4 mb-4 md:mb-0">
             <div className="skew-x-[25deg]">
-              <p id="day" className="-mb-10 font-extrabold">
+              <p id="day" className="-mb-2 md:-mb-10 font-extrabold">
                 {days < 10 ? "0" + days : days}
               </p>
-              <span className="text-3xl font-thin">DAYS</span>
+              <span className="text-lg md:text-3xl font-thin">DAYS</span>
             </div>
           </div>
-          <div className="w-1/4 float-left">
+          <div className="w-full md:w-1/4 mb-4 md:mb-0">
             <div className="skew-x-[25deg]">
-              <p id="hour" className="-mb-10 font-extrabold">
+              <p id="hour" className="-mb-2 md:-mb-10 font-extrabold">
                 {hours < 10 ? "0" + hours : hours}
               </p>
-              <span className="text-3xl font-thin">HOURS</span>
+              <span className="text-lg md:text-3xl font-thin">HOURS</span>
             </div>
           </div>
-          <div className="w-1/4 float-left">
+          <div className="w-full md:w-1/4 mb-4 md:mb-0">
             <div className="skew-x-[25deg]">
-              <p id="minute" className="-mb-10 font-extrabold">
+              <p id="minute" className="-mb-2 md:-mb-10 font-extrabold">
                 {minutes < 10 ? "0" + minutes : minutes}
               </p>
-              <span className="text-3xl font-thin">MINUTES</span>
+              <span className="text-lg md:text-3xl font-thin">MINUTES</span>
             </div>
           </div>
-          <div className="w-1/4 float-left">
+          <div className="w-full md:w-1/4">
             <div className="skew-x-[25deg]">
-              <p id="second" className="-mb-10 font-extrabold">
+              <p id="second" className="-mb-2 md:-mb-10 font-extrabold">
                 {seconds < 10 ? "0" + seconds : seconds}
               </p>
-              <span className="text-3xl font-thin">SECONDS</span>
+              <span className="text-lg md:text-3xl font-thin">SECONDS</span>
             </div>
           </div>
         </div>

From 55be19c09e7cc637b9a6a89dc74a484351a20224 Mon Sep 17 00:00:00 2001
From: Ananta Krishnan B <anantukid@gmail.com>
Date: Wed, 7 Aug 2024 13:18:08 +0530
Subject: [PATCH 2/3] chore: made the with smaller for better responsiveness

---
 src/components/timer/Timer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/timer/Timer.tsx b/src/components/timer/Timer.tsx
index 82928f6..4b4e1c2 100644
--- a/src/components/timer/Timer.tsx
+++ b/src/components/timer/Timer.tsx
@@ -26,7 +26,7 @@ const Timer = () => {
   }, []);
 
   return (
-    <div className="w-3/5 md:w-full max-w-screen-lg h-full bg-gradient-to-r from-[#14357A] via-[#1088AC] to-[#1083A9] rounded-3xl skew-x-[-25deg] mx-auto mt-[-30px] partial-border-gradient">
+    <div className="w-1/2 md:w-full max-w-screen-lg h-full bg-gradient-to-r from-[#14357A] via-[#1088AC] to-[#1083A9] rounded-3xl skew-x-[-25deg] mx-auto mt-[-30px] partial-border-gradient">
       <div className="h-fit w-full timer-bg rounded-xl text-white text-4xl md:text-8xl inline-block text-center p-4 md:p-8">
         <div className="flex flex-col md:flex-row justify-around">
           <div className="w-full md:w-1/4 mb-4 md:mb-0">

From 7b7c2340ce72d216889d23149f550827ee57d7d1 Mon Sep 17 00:00:00 2001
From: Ananta Krishnan B <anantukid@gmail.com>
Date: Thu, 8 Aug 2024 12:07:47 +0530
Subject: [PATCH 3/3] chore: made responsive timer into a 2x2 grid

---
 src/components/timer/Timer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/timer/Timer.tsx b/src/components/timer/Timer.tsx
index 4b4e1c2..0670024 100644
--- a/src/components/timer/Timer.tsx
+++ b/src/components/timer/Timer.tsx
@@ -26,9 +26,9 @@ const Timer = () => {
   }, []);
 
   return (
-    <div className="w-1/2 md:w-full max-w-screen-lg h-full bg-gradient-to-r from-[#14357A] via-[#1088AC] to-[#1083A9] rounded-3xl skew-x-[-25deg] mx-auto mt-[-30px] partial-border-gradient">
+    <div className="w-3/5 md:w-full max-w-screen-lg h-full bg-gradient-to-r from-[#14357A] via-[#1088AC] to-[#1083A9] rounded-3xl skew-x-[-25deg] mx-auto mt-8 md:mt-12 partial-border-gradient">
       <div className="h-fit w-full timer-bg rounded-xl text-white text-4xl md:text-8xl inline-block text-center p-4 md:p-8">
-        <div className="flex flex-col md:flex-row justify-around">
+        <div className="grid grid-cols-2 grid-rows-2 md:flex md:flex-row justify-around">
           <div className="w-full md:w-1/4 mb-4 md:mb-0">
             <div className="skew-x-[25deg]">
               <p id="day" className="-mb-2 md:-mb-10 font-extrabold">