From 2b4ce80d1190285da613c8f4ef417368f8fb7ef3 Mon Sep 17 00:00:00 2001
From: Joshua Oloton <olotonjoshua@gmail.com>
Date: Sat, 17 Aug 2024 10:18:13 +0100
Subject: [PATCH 1/2] chore: add interactivity to contact us page

---
 src/app/(landing-routes)/contact-us/page.tsx    | 6 +++---
 src/components/common/contact-us-form/index.tsx | 2 +-
 src/components/layouts/footer/index.tsx         | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/(landing-routes)/contact-us/page.tsx b/src/app/(landing-routes)/contact-us/page.tsx
index 7ca45b82a..9fb8e8202 100644
--- a/src/app/(landing-routes)/contact-us/page.tsx
+++ b/src/app/(landing-routes)/contact-us/page.tsx
@@ -26,11 +26,11 @@ const Contact = () => {
               </h3>
               <div className="grid gap-5 lg:gap-3">
                 {contactInfo.map((info) => (
-                  <div key={info.alt} className="flex items-center gap-4">
-                    <div className="rounded-sm bg-neutral-dark-1 p-2.5">
+                  <div key={info.alt} className="flex items-center gap-4 hover:bg-stroke-colors-stroke transition-all duration-300 group">
+                    <div className="rounded-sm bg-neutral-dark-1 p-2.5 group-hover:bg-primary duration-300">
                       <info.Icon color="white" size={24} />
                     </div>
-                    <p className="text-lg leading-5">{info.text}</p>
+                    <p className="text-lg leading-5 group-hover:font-medium transition-all duration-300">{info.text}</p>
                   </div>
                 ))}
               </div>
diff --git a/src/components/common/contact-us-form/index.tsx b/src/components/common/contact-us-form/index.tsx
index 456dba77e..2e5bc65cd 100644
--- a/src/components/common/contact-us-form/index.tsx
+++ b/src/components/common/contact-us-form/index.tsx
@@ -223,7 +223,7 @@ const ContactForm: React.FC = () => {
             variant="primary"
             size="lg"
             isLoading={loading}
-            className="w-full px-4 py-7 hover:bg-destructive"
+            className="w-full px-4 py-7 hover:bg-destructive hover:-translate-y-2 transition-all"
           >
             <Mail />
             Send
diff --git a/src/components/layouts/footer/index.tsx b/src/components/layouts/footer/index.tsx
index 57614c79c..b240f4345 100644
--- a/src/components/layouts/footer/index.tsx
+++ b/src/components/layouts/footer/index.tsx
@@ -188,13 +188,13 @@ const Footer = () => {
                   </div>
                   <CustomButton
                     variant="primary"
-                    className="h-full"
+                    className="h-full hover:-translate-y-2 transition-all"
                     onClick={handleSubmit}
                   >
                     {loading ? (
                       <LoadingSpinner className="size-4 animate-spin sm:size-5" />
                     ) : (
-                      "Subscibe"
+                      "Subscribe"
                     )}
                   </CustomButton>
                 </div>
@@ -249,13 +249,13 @@ const Footer = () => {
                   />
                   <CustomButton
                     variant="primary"
-                    className="h-full hover:bg-destructive"
+                    className="h-full hover:bg-destructive hover:-translate-y-1 transition-all"
                     onClick={handleSubmit}
                   >
                     {loading ? (
                       <LoadingSpinner className="size-4 animate-spin sm:size-5" />
                     ) : (
-                      "Subscibe"
+                      "Subscribe"
                     )}
                   </CustomButton>
                 </div>

From d9174aa8919c4a57468ac79782fe085c4ff9a2de Mon Sep 17 00:00:00 2001
From: Joshua Oloton <olotonjoshua@gmail.com>
Date: Sat, 17 Aug 2024 10:22:32 +0100
Subject: [PATCH 2/2] chore: add interactivity to contact us page

---
 src/app/(landing-routes)/contact-us/page.tsx    | 11 ++++++++---
 src/components/common/contact-us-form/index.tsx |  2 +-
 src/components/layouts/footer/index.tsx         |  4 ++--
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/app/(landing-routes)/contact-us/page.tsx b/src/app/(landing-routes)/contact-us/page.tsx
index 9fb8e8202..1cc7ac903 100644
--- a/src/app/(landing-routes)/contact-us/page.tsx
+++ b/src/app/(landing-routes)/contact-us/page.tsx
@@ -26,11 +26,16 @@ const Contact = () => {
               </h3>
               <div className="grid gap-5 lg:gap-3">
                 {contactInfo.map((info) => (
-                  <div key={info.alt} className="flex items-center gap-4 hover:bg-stroke-colors-stroke transition-all duration-300 group">
-                    <div className="rounded-sm bg-neutral-dark-1 p-2.5 group-hover:bg-primary duration-300">
+                  <div
+                    key={info.alt}
+                    className="group flex items-center gap-4 transition-all duration-300 hover:bg-stroke-colors-stroke"
+                  >
+                    <div className="rounded-sm bg-neutral-dark-1 p-2.5 duration-300 group-hover:bg-primary">
                       <info.Icon color="white" size={24} />
                     </div>
-                    <p className="text-lg leading-5 group-hover:font-medium transition-all duration-300">{info.text}</p>
+                    <p className="text-lg leading-5 transition-all duration-300 group-hover:font-medium">
+                      {info.text}
+                    </p>
                   </div>
                 ))}
               </div>
diff --git a/src/components/common/contact-us-form/index.tsx b/src/components/common/contact-us-form/index.tsx
index 2e5bc65cd..7609b15a6 100644
--- a/src/components/common/contact-us-form/index.tsx
+++ b/src/components/common/contact-us-form/index.tsx
@@ -223,7 +223,7 @@ const ContactForm: React.FC = () => {
             variant="primary"
             size="lg"
             isLoading={loading}
-            className="w-full px-4 py-7 hover:bg-destructive hover:-translate-y-2 transition-all"
+            className="w-full px-4 py-7 transition-all hover:-translate-y-2 hover:bg-destructive"
           >
             <Mail />
             Send
diff --git a/src/components/layouts/footer/index.tsx b/src/components/layouts/footer/index.tsx
index b240f4345..b5de8c731 100644
--- a/src/components/layouts/footer/index.tsx
+++ b/src/components/layouts/footer/index.tsx
@@ -188,7 +188,7 @@ const Footer = () => {
                   </div>
                   <CustomButton
                     variant="primary"
-                    className="h-full hover:-translate-y-2 transition-all"
+                    className="h-full transition-all hover:-translate-y-2"
                     onClick={handleSubmit}
                   >
                     {loading ? (
@@ -249,7 +249,7 @@ const Footer = () => {
                   />
                   <CustomButton
                     variant="primary"
-                    className="h-full hover:bg-destructive hover:-translate-y-1 transition-all"
+                    className="h-full transition-all hover:-translate-y-1 hover:bg-destructive"
                     onClick={handleSubmit}
                   >
                     {loading ? (