feat(accessibility): improve code structure, accessibility, and styling

- Replaced SVG icons with `react-icons` for professional appearance
- Added day and night themes for icons and buttons
- Improved contact section layout and accessibility
- Updated footer with additional elements and social media links
- Reversed flexbox column order for hero container
- Enhanced overall styling for better user experience

package.json

@@ -12,6 +12,7 @@
     "emailjs": "^4.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-scripts": "^5.0.1",
     "react-simple-typewriter": "^5.0.1",
     "react-slick": "^0.30.2",

src/components/Contact/Contact.css

@@ -1,15 +1,15 @@
-.Contact {
+.contact {
   margin: 100px 200px;
 }
 
-.Contact .content {
+.contact .content {
   display: flex;
   flex-direction: row;
   justify-content: center;
 }
 
-.Contact .left,
-.Contact .right {
+.contact .left,
+.contact .right {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -29,73 +29,80 @@
   color: var(--text-color);
 }
 
-.Contact .left {
+.contact .left {
   width: 500px;
   height: 450px;
   padding: 10px;
 }
 
-.Contact .right {
+.contact .right {
   width: 750px;
   height: 450px;
 }
 
-.Contact .box {
+.contact .box {
   padding: 30px;
   border-radius: 10px;
 }
 
-.Contact .details h1 {
+.contact .details h1 {
   font-size: 25px;
   color: var(--text-color);
 }
 
-.Contact .details h2 {
+.contact .details h2 {
   font-size: 15px;
   color: var(--text-color);
 }
 
-.Contact .details p {
+.contact .details p {
   font-size: 12px;
   color: var(--text-color);
 }
 
-.right .input {
+.contact .contact-info {
   display: flex;
   flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
 }
 
-.btn-send {
+.contact .contact-info div {
   display: flex;
-  justify-content: center;
-  align-items: center !important;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: 0.5s all ease;
-  border: none;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.contact .contact-info a {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
   color: var(--text-color);
-  background: var(--send-btn-bg-light);
-  width: 150px !important;
-  max-width: 100%;
-  margin: 0 auto;
 }
 
-[data-theme="dark"] .btn-send {
-  background: var(--send-btn-bg-dark);
-  color: #000000;
+.contact .contact-info .contact-icon {
+  font-size: 1.5rem;
+  color: var(--text-color);
+  transition: color 0.3s;
 }
 
-.btn-send:hover {
-  background: var(--send-btn-bg-light);
+.contact .contact-info a:hover .contact-icon {
   color: var(--button-hover-color);
-  transform: translateY(-3px);
 }
 
-[data-theme="dark"] .btn-send:hover {
-  background: var(--send-btn-bg-dark);
+.contact .input {
+  display: flex;
+  flex-direction: column;
+}
+
+.contact .input label {
+  font-size: 0.9rem;
+  color: var(--text-color);
 }
 
-.Contact input {
+.contact .input input,
+.contact .input textarea {
   background-color: var(--input-bg) !important;
   color: var(--text-color);
   width: 100%;
@@ -108,16 +115,36 @@
   height: 35px;
 }
 
-.Contact textarea {
-  background-color: var(--input-bg);
-  color: var(--text-color);
-  width: 100%;
+.contact .input textarea {
+  height: auto;
   padding: 20px;
-  border-radius: 5px;
-  outline: none;
-  margin-top: 10px;
-  margin-bottom: 20px;
+}
+
+.btn-send {
+  display: flex;
+  justify-content: center;
+  align-items: center !important;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: 0.5s all ease;
   border: none;
+  color: var(--text-color);
+  background: var(--send-btn);
+  width: 120px !important;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 6px;
+}
+
+[data-theme="dark"] .btn-send {
+  background: var(--send-btn-bg-dark);
+  color: #ffffff;
+}
+
+.btn-send:hover {
+  background: var(--button-hover-bg);
+  color: var(--button-hover-color);
+  transform: translateY(-3px);
 }
 
 .phone,
@@ -147,6 +174,7 @@
   color: var(--text-color);
   font-size: 12px;
 }
+
 .success-message {
   color: rgb(161, 143, 255);
   font-size: 1.1rem;
@@ -175,25 +203,20 @@
 }
 
 @media (max-width: 500px) {
-  .Contact  {
+  .contact {
     margin: 0;
   }
-  .Contact .content{
-    display: flex;
+  .contact .content {
     flex-direction: column;
   }
-
-  .content .left, .content .right{
+  .contact .left,
+  .contact .right {
     width: 370px;
     font-size: 0.8rem;
     padding: 0px 20px;
-  }
-  .Contact .left,
-  .Contact .right {
-    backdrop-filter: none;  
+    backdrop-filter: none;
   }
   .contact-title h1 {
     margin-left: 20px;
   }
 }
-