feat: improve heroUI, footer-button and contribution-card in contact …

…section (#535)

## Related Issue

Improving the components of heroUI, Footer and contributor card,

Closes: #514

### Describe the changes you've made

- Make changes in CSS files named heroUI.css and Contect.css
- Updated the behavior of heroUI with screen changes
- In contribution card aligned the content at the center and changed the
background color to blue-gradient.

## Type of change

What sort of change have you made:

- [x] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

<!-- Describe how have you verified the changes made -->
The changes has tested for different screen like PC, Tab, mobile.

## Checklist

<!--
Example how to mark a checkbox:-
- [x] My code follows the code style of this project.
-->

- [x] My code follows the guidelines of this project.
- [x] I have performed a self-review of my own code.
- [ ] I have commented on my code, particularly wherever it was hard to
understand.
- [ ] I have made corresponding changes to the documentation.
- [x] My changes generate no new warnings.
- [x] I have added tests that prove my fix is effective or that my
feature works.
- [x] Any dependent changes have been merged and published in downstream
modules.

## Screenshots (if applicable)

![Screenshot 2023-07-25
155452](https://github.com/amanjaiman1/Product_3D/assets/107640576/011ff0c4-716c-4a41-b9a0-f9fb8c0e529c)
![Screenshot 2023-07-25
155540](https://github.com/amanjaiman1/Product_3D/assets/107640576/30eefff2-681b-4679-8cb5-b1be19f948b3)
![Screenshot 2023-07-25
155510](https://github.com/amanjaiman1/Product_3D/assets/107640576/7eb74a41-f2c1-49cf-a313-625d64f98926)
![Screenshot 2023-07-25
155617](https://github.com/amanjaiman1/Product_3D/assets/107640576/3ba62fff-a391-4600-8ac5-060d42016a39)


## Code of Conduct

- [x] I agree to follow this project's [Code of
Conduct](https://github.com/amanjaiman1/Product_3D/blob/main/CODE_OF_CONDUCT.md)

src/containers/Footer/index.jsx

@@ -12,12 +12,12 @@ const Button = ({ styles }) => {
     <button
       type="button"
       className={`
-        py-4 px-6 bg-gradient-to-r from-[#5867DD] to-[#b379ff] font-poppins font-medium
+        py-2 px-4 bg-gradient-to-r from-[#5867DD] to-[#b379ff] font-poppins font-medium
          text-[18px] text-white outline-none ${styles} rounded-[5px] w-full md:w-auto h-[49px]
-          md:ml-0 max-sm:w-auto max-sm:h-[67px]
+          md:ml-0 max-sm:w-auto f-btn 
       `}
       style={{
-        boxShadow: " rgb(38, 57, 77) 0px 20px 30px -10px ",
+        boxShadow: " rgb(38, 57, 77) 0px 20px 25px -15px ",
         letterSpacing: "1px",
       }}
     >

src/containers/Hero/homeUI.css

@@ -7,15 +7,15 @@
   padding: 4rem 2rem 5rem 2rem;
 }
 .title {
-  font-size: 3rem;
+  font-size: 3rem !important;
+  font-weight: 700 !important;
 }
-
 @media screen and (min-width: 850px) and (max-width: 1000px) {
   .heroUI {
     padding: 4rem 1rem 4rem 1rem;
   }
   .title {
-    font-size: 2.2rem;
+    font-size: 2.2rem !important;
     width: 105%;
   }
 }
@@ -31,11 +31,14 @@
   .heroUI {
     margin: auto;
     width: 90%;
-    padding: 3rem 1rem 3rem 1rem;
+    padding: 3rem 0.7rem 3rem 0.7rem;
   }
   .heroimg {
     transform: scale(1);
   }
+  .f-btn {
+    width: max-content !important;
+  }
 }
 @media only screen and (max-width: 850px) {
   .heroUI {
@@ -47,7 +50,7 @@
     margin-top: -50px !important;
   }
   .title {
-    font-size: 2rem;
+    font-size: 2rem !important;
   }
 }
 @media only screen and (max-width: 600px) {

src/containers/Hero/index.jsx

@@ -62,10 +62,10 @@ function Hero() {
           <button
             onClick={navigateToCustomisation}
             className="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-pink-500 hover:to-purple-500
-            text-white font-semibold py-4 px-6 rounded-[10px] shadow-lg
+            text-white font-semibold py-4 px-6 rounded-[10px] shadow-lg 
              transform transition-transform ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-600"
           >
-            <span className="flex items-center">
+            <span className="flex items-center f-btn">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 className="h-5 w-5 mr-2"

src/pages/Contact/Contact.css

@@ -56,7 +56,12 @@
   position: absolute;
   width: 99%;
   height: 99%;
-  background-color: paleturquoise;
+  /* background-color: paleturquoise; */
+  background: radial-gradient(
+    circle at 50% 20%,
+    rgb(59, 149, 237) 0%,
+    rgb(7, 90, 173) 90%
+  );
   border-radius: 5px;
   color: white;
   display: flex;
@@ -66,6 +71,11 @@
   gap: 30px;
 }
 
+.font-p {
+  font-weight: 600;
+  word-break: break-word;
+}
+
 .card:hover .content {
   transform: rotateY();
 }
@@ -109,7 +119,6 @@
 }
 
 .title {
-  font-size: 11px;
   max-width: 100%;
   display: flex;
   justify-content: space-between;
@@ -120,10 +129,8 @@
 }
 
 .card-footer {
-  color: black;
-  /* margin-top: 5px; */
-  font-size: 10px;
-  /* content: flex-end; */
+  color: rgb(235, 235, 235);
+  font-size: 13px;
 }
 
 .front .img {

src/pages/Contact/Contact.jsx

@@ -109,22 +109,35 @@ function Contact() {
                           window.open(`https://github.com/${contributor.login}`)
                         }
                       >
-                        <div className="title">
-                          <p className="title">
+                        <div className="">
+                          <p
+                            className="text-black font-p"
+                            style={{ marginBottom: "0.4rem" }}
+                          >
                             <strong>{contributor.login}</strong>
                           </p>
                         </div>
                         {contributor.bio === null ? (
-                          <p className="card-footer mx-10">Bio: Not Available</p>
+                          <p className="card-footer mx-4">
+                            <span className="font-p">Bio:</span>
+                            <br /> Not Available
+                          </p>
                         ) : (
-                          <p className="card-footer mx-10">Bio: {contributor.bio}</p>
+                          <p className="card-footer mx-4">
+                            <span className="font-p">Bio:</span>
+                            <br /> {contributor.bio}
+                          </p>
                         )}
 
                         {contributor.location === null ? (
-                          <p className="card-footer">Location: Not Available</p>
+                          <p className="card-footer">
+                            <span className="font-p">Location:</span>
+                            <br /> Not Available
+                          </p>
                         ) : (
                           <p className="card-footer">
-                            Location: {contributor.location}
+                            <span className="font-p">Location:</span>
+                            <br /> {contributor.location}
                           </p>
                         )}
                       </div>
@@ -149,7 +162,7 @@ function Contact() {
                   </strong>
 
                   <div className="text-black text-xs">
-                    <h4>{contributor.location}</h4>
+                    {/* <h4>{contributor.location}</h4> */}
                     <h4>Contributions : {contributor.contributions}</h4>
                   </div>
                 </div>