From e1cdab39ef4aaa9e5e4103ebbd19f53c6f6e33ee Mon Sep 17 00:00:00 2001
From: ADARSHsri2004 <adarshsri619@gmail.com>
Date: Wed, 30 Oct 2024 11:00:35 +0530
Subject: [PATCH] Added Hover effects in buttons across all pages

---
 src/components/Footer/index.jsx |  8 ++++----
 src/components/Navbar/index.jsx | 10 +++++-----
 src/pages/contact/index.jsx     |  6 +++---
 src/pages/event/index.jsx       |  2 +-
 src/pages/home/index.jsx        |  6 +++---
 src/pages/speaker/index.jsx     |  8 ++++----
 6 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
index 8f1ad33..2fa01d7 100644
--- a/src/components/Footer/index.jsx
+++ b/src/components/Footer/index.jsx
@@ -21,19 +21,19 @@ export function Footer() {
                 </li>
                 <li>
                     <a href="https://www.instagram.com/lotengdev/" target="_blank" rel="noopener noreferrer">
-                        <img 
+                        <img className="transform hover:scale-110 transition-transform duration-200"
                             src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png" 
                             alt="Instagram Logo"  
-                            style={{ display: 'inline-block', gap: '15px', width: '40px', height: '40px' }}
+                            style={{ display: 'inline-block', gap: '18px', width: '30px', height: '28px', }}
                         />
                     </a>
                 </li>
                 <li>
                     <a href="https://www.youtube.com/@lotengdev4516" target="_blank" rel="noopener noreferrer">
-                        <img 
+                        <img className="transform hover:scale-110 transition-transform duration-200"
                             src="https://upload.wikimedia.org/wikipedia/commons/4/42/YouTube_icon_%282013-2017%29.png" 
                             alt="YouTube Logo" 
-                            style={{ display: 'inline-block', gap: '15px', width: '40px', height: '40px', paddingLeft: '4px' }}
+                            style={{ display: 'inline-block', gap: '18px', width: '40px', height: '28px', paddingLeft: '4px',marginLeft:'2px' }}
                         />
                     </a>
                 </li>
diff --git a/src/components/Navbar/index.jsx b/src/components/Navbar/index.jsx
index d64b92c..e09a893 100644
--- a/src/components/Navbar/index.jsx
+++ b/src/components/Navbar/index.jsx
@@ -11,10 +11,10 @@ import LogtengDevLogo from '@/assets/lotengdev-logo.svg';
 function CTAButtons() {
     return (
         <div className="hidden lg:flex justify-center">
-            <a href="https://t.me/lotengdev" target="_blank" rel="noopener noreferrer" className="flex items-center bg-blue-600 px-4 py-3 mr-4 rounded text-white">
-                <img className="inline mr-3" src={TelegramIcon} alt="Telegram Icon" />Join Group
+            <a href="https://t.me/lotengdev" target="_blank" rel="noopener noreferrer" className="flex items-center bg-blue-600 px-4 py-3 mr-4 rounded text-white  transform hover:scale-105  transition-transform duration-200  ">
+                <img className="inline mr-3" src={TelegramIcon} alt="Telegram Icon " />Join Group
             </a>
-            <a href="https://github.com/lotengdev/lotengdev-web/" target="_blank" rel="noopener noreferrer" className="flex items-center bg-neutral-100 border border-solid border-grey px-4 py-2 rounded">
+            <a href="https://github.com/lotengdev/lotengdev-web/" target="_blank" rel="noopener noreferrer" className="flex items-center bg-neutral-100 border border-solid border-grey px-4 py-2 rounded transform hover:scale-105  transition-transform duration-200 ">
                 <img className="inline mr-3" src={GithubIcon} alt="GitHub Icon" />Contribute
             </a>
         </div>
@@ -82,8 +82,8 @@ export default function Navbar() {
                     </ul>
 
                     <div className="px-6 flex gap-4 flex-col justify-center mt-20">
-                        <a href="https://t.me/lotengdev" target="_blank" rel="noopener noreferrer" className="inline-flex items-center bg-blue-600 px-4 py-3 rounded text-xs text-white">
-                            <img className="inline mr-3" width={21} onClick={toggleNavbar} src={TelegramIcon} alt="Telegram Icon" />Join Group
+                        <a href="https://t.me/lotengdev" target="_blank" rel="noopener noreferrer" className="inline-flex items-center bg-blue-600 px-4 py-3 rounded text-xs text-white ">
+                            <img className="inline mr-3" width={21} onClick={toggleNavbar} src={TelegramIcon} alt="Telegram Icon " />Join Group
                         </a>
                         <a href="https://github.com/lotengdev/lotengdev-web/" target="_blank" rel="noopener noreferrer" className="inline-flex items-center text-xs  bg-neutral-100 border border-solid border-grey px-4 py-2 rounded">
                             <img className="inline mr-3" width={21} onClick={toggleNavbar} src={GithubIcon} alt="GitHub Icon" />Contribute
diff --git a/src/pages/contact/index.jsx b/src/pages/contact/index.jsx
index eacc4fb..99f1bc1 100644
--- a/src/pages/contact/index.jsx
+++ b/src/pages/contact/index.jsx
@@ -46,10 +46,10 @@ export function ContactPage() {
                 <span>Contact Loteng Dev</span>
                 <div className="flex ml-3">
                 <a href="https://mail.google.com/mail/?view=cm&fs=1&to=lotengdev@gmail.com" target="_blank" rel="noopener noreferrer" className="ml-2">
-                    <img src={emailIcon} alt="Email Icon" className="w-6 h-6" />
+                    <img src={emailIcon} alt="Email Icon" className="w-6 h-6 transform hover:scale-110  transition-transform duration-200 " />
                 </a>
                 <a href="https://t.me/lotengdev" target="_blank" rel="noopener noreferrer" className="ml-2">
-                    <img src={telegramIcon} alt="Telegram Icon" className="w-6 h-6" />
+                    <img src={telegramIcon} alt="Telegram Icon" className="w-6 h-6 transform hover:scale-110  transition-transform duration-200" />
                 </a>
             </div>
             </div>
@@ -77,7 +77,7 @@ export function ContactPage() {
             ></textarea>
             <button
                 type="submit"
-                className="bg-[color:#41B883] text-white font-bold py-2 px-6 rounded-lg text-lg"
+                className="bg-[color:#41B883] text-white font-bold py-2 px-6 rbg-blue-500 rounded transition-all duration-300 ease-in-out transform hover:bg-green-600 hover:scale-105 "
             >
                 Send Email
             </button>
diff --git a/src/pages/event/index.jsx b/src/pages/event/index.jsx
index 1b2ae25..15c4240 100644
--- a/src/pages/event/index.jsx
+++ b/src/pages/event/index.jsx
@@ -267,7 +267,7 @@ export function EventPage() {
                     Next meetup kita mau bahas <br /> apa nih?
                 </Motion.div>
                 <a href="https://github.com/Loteng-Dev/MeetupTopics/issues "
-                    className="text-white bg-[#007BFF] font-normal text-sm px-5 py-2.5 text-center inline-flex items-center mr-2 mb-2 mt-[32px] ">
+                    className="text-white   font-normal text-sm px-5 py-2.5 text-center inline-flex items-center mr-2 mb-2 mt-[32px] rounded-md bg-blue-500 transition-all duration-300 ease-in-out transform hover:bg-blue-700 hover:shadow-lg">
                     + Kirim ide topik
                 </a>
             </section>
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 6dacfb1..af12641 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -37,10 +37,10 @@ export function HomePage() {
                             Programming, dan masih banyak lagi. </span>
                     </div>
                     <div className="flex">
-                        <a href="https://t.me/lotengdev" target='_blank' className="flex items-center bg-blue-600 px-4 py-3 mr-4 rounded text-white text-[12px]">
-                            <img className="inline mr-3 lg:w-auto lg:h-auto h-[12px] w-[12px]" src={TelegramIcon} />Join Group
+                        <a href="https://t.me/lotengdev" target='_blank' className="flex items-center bg-blue-600 px-4 py-3 mr-4 rounded text-white text-[12px] transform hover:scale-105  transition-transform duration-200 ">
+                            <img className="inline mr-3 lg:w-auto lg:h-auto h-[12px] w-[12px] " src={TelegramIcon} />Join Group
                         </a>
-                        <a href="https://github.com/lotengdev/lotengdev-web/" target='_blank' className="flex items-center bg-neutral-100 border border-solid border-grey px-4 py-2 rounded">
+                        <a href="https://github.com/lotengdev/lotengdev-web/" target='_blank' className="flex items-center bg-neutral-100 border border-solid border-grey px-4 py-2 rounded transform hover:scale-105  transition-transform duration-200 ">
                             <img className="inline mr-3 lg:w-auto lg:h-auto h-[12px] w-[12px]" src={GithubIcon} />Contribute
                         </a>
                     </div>
diff --git a/src/pages/speaker/index.jsx b/src/pages/speaker/index.jsx
index 811e00d..7c64662 100644
--- a/src/pages/speaker/index.jsx
+++ b/src/pages/speaker/index.jsx
@@ -69,13 +69,13 @@ export function SpeakerPage() {
                                 </div>
                                 <div className="w-full flex md:justify-start justify-center md:items-start items-center">
                                     <a href="#">
-                                        <img className="w-[23px] h-[23px] mr-2" src={LinkedinIcon} alt="icon_linkedin"/>
+                                        <img className="w-[23px] h-[23px] mr-2 transition-all duration-300 ease-in-out transform hover:scale-110" src={LinkedinIcon} alt="icon_linkedin"/>
                                     </a>
                                     <a href="#">
-                                        <img className="w-[23px] h-[23px] mr-2" src={GithubIcon} alt="icon_github"/>
+                                        <img className="w-[23px] h-[23px] mr-2 transition-all duration-300 ease-in-out transform hover:scale-110" src={GithubIcon} alt="icon_github"/>
                                     </a>
                                     <a href="#">
-                                        <img className="w-[23px] h-[23px]" src={WebsiteIcon} alt="icon_website"/>
+                                        <img className="w-[23px] h-[23px] transition-all duration-300 ease-in-out transform hover:scale-110" src={WebsiteIcon} alt="icon_website"/>
                                     </a>
                                 </div>
                             </div>
@@ -98,7 +98,7 @@ export function SpeakerPage() {
                     Tertarik menjadi pembicara di <br/> acara Lotengdev ?
                 </Motion.div>
                 <a href="https://github.com/Loteng-Dev/MeetupTopics/issues"
-                    className="text-white bg-[#007BFF]  font-normal text-sm px-5 py-2.5 text-center inline-flex items-center mr-2 mb-2 mt-[32px]">
+                    className="text-white   font-normal text-sm px-5 py-2.5 text-center inline-flex items-center mr-2 mb-2 mt-[32px] rounded-md bg-blue-500 transition-all duration-300 ease-in-out transform hover:bg-blue-700 hover:shadow-lg">
                     + Kirim ide topik
                 </a>
             </section>