Merge pull request #90 from Aryann15/footer-enhancement

Footer enhancement
Curio-org · Dec 12, 2023 · 5e1a12e · 5e1a12e
2 parents 5a529f0 + 9a87d4e
commit 5e1a12e
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 50 deletions.
diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
@@ -3,25 +3,28 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-
-  background: var(--color-footer);
+  /* background: #292c35; */
+  /* background: var(--color-footer); */
+  padding: 30px;
+  color: #fff;
 }
 
 .curio_footer-heading {
-  display: flex;
+  /* display: flex;
   justify-content: center;
-  width: 100%;
+  width: 100%; */
   text-align: center;
 
-  margin-bottom: 3rem;
+  margin-bottom: 2rem;
 }
 
 .curio_footer-heading h1 {
-  font-family: var(--font-family);
+  /* font-family: var(--font-family); */
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 800;
-  font-size: 2.1rem;
-  line-height: 35px;
-  margin-top: 3rem;
+  font-size: 2.5rem;
+  line-height: 1.2;
+  /* margin-top: 3rem; */
 }
 
 .curio_footer-btn {
@@ -47,57 +50,63 @@
 
 .curio_footer_links {
   display: flex;
-  justify-content: space-between;
+  /* justify-content: space-between; */
+  justify-content: space-around;
   align-items: flex-start;
-  flex-direction: row;
+  /* flex-direction: row; */
   flex-wrap: wrap;
-
   width: 100%;
   text-align: left;
+  margin-top: 2rem;
 }
 
-.curio_footer_links div {
+/* .curio_footer_links div {
   width: 250px;
   margin: 1rem;
-}
+  display: flex;
+} */
 
 .curio_footer_links_logo {
   display: flex;
   flex-direction: column;
+  align-items: center;
 }
 
 .curio_footer_links_logo img {
-  width: 20vw;
-  height: 20vw;
-
+  /* width: 20vw;
+  height: 20vw; */
+  /* width: 100px; */
+  width: 45%;
+  height: auto;
   margin-bottom: 1rem;
 }
 
 .curio_footer_links_logo p {
   font-family: var(--font-family);
-  font-size: 0.85rem;
-  line-height: 15px;
-  color: #fff;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  /* color: #fff; */
 }
 
 .curio_footer_links_div {
   display: flex;
-  justify-content: flex-start;
+  /* justify-content: flex-start; */
+  align-items: center;
   flex-direction: column;
+  margin-right: 30px;
 }
 
 .curio_footer_links_div h4 {
-  font-size: 1rem;
-  line-height: 17px;
+  font-size: 1.1rem;
+  /* line-height: 17px; */
   font-family: var(--font-family);
   color: #fff;
-
-  margin-bottom: 0.9rem;
+  margin-bottom: 0.5rem;
 }
 
 .curio_footer_links_div p {
-  font-size: 0.7rem;
-  line-height: 15px;
+  font-size: 0.8rem;
+  line-height: 1.2;
   font-family: var(--font-family);
   color: #fff;
 
@@ -108,7 +117,7 @@
 .curio_footer_copyright {
   margin-top: 2rem;
   text-align: center;
-  width: 100%;
+  /* width: 100%; */
 }
 
 .curio_footer_copyright p {
@@ -118,9 +127,19 @@
   color: #fff;
 }
 
-@media only screen and (min-width: 768px) {
+@media only screen and (max-width: 768px) {
   .curio_footer_links_logo img {
-    width: 7vw;
-    height: 7vw;
+    width: 80%;
   }
-}
+
+  .curio_footer_links {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .curio_footer_links_div {
+    margin-right: 0;
+    margin-bottom: 20px;
+  }
+}
diff --git a/src/components/Footer/Twilio.css b/src/components/Footer/Twilio.css
@@ -1,57 +1,62 @@
 .request {
+  display: flex;
+  flex-direction: column;
   align-items: center;
 }
 
 .request h2 {
   font-size: 1.8rem;
-  line-height: 45px;
+  /* line-height: 45px; */
+  line-height: 2.5rem;
   font-weight: 800;
+  /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
   font-family: var(--font-family);
   max-width: 510px;
   margin-bottom: 1.5rem;
-  margin-left: 0.2rem;
 }
 
 .request_form {
-  justify-content: center;
+  /* justify-content: center; */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .request_form input {
-  display: flex;
-  flex: 2;
+  /* display: flex; */
+  /* flex: 2; */
   width: 100%;
   min-height: 50px;
-  margin: 2px;
+  margin: 10px 0;
   font-family: var(--font-family);
   background: #fff;
   border: 2px solid #fff;
   padding: 0 1rem;
   outline: none;
-  color: #fff;
+  color:  #3d6184;
   border-radius: 5px;
   font-style: normal;
   font-weight: normal;
-  font-size: 1.2rem;
-  line-height: 27px;
-  color: #3d6184;
+  font-size: 1rem;
+  line-height: 1.5;
+  /* color: #3d6184; */
   transition: ease 0.2s;
-  margin-top: 5px;
-  overflow: scroll;
+  /* overflow: scroll; */
 }
 
 .request_form input:focus{
   box-shadow: 0 0 3px #ff4820;
 }
 
 .request_form button {
-  flex: 0.6;
+  /* flex: 0.6; */
   width: 100%;
   min-height: 50px;
-  margin: 2px;
+  margin: 10px 0;
   font-family: var(--font-family);
   font-weight: 400;
-  font-size: 20px;
-  line-height: 28px;
+  font-size: 1.2rem;
+  line-height: 1.5;
   background: #ff4820;
   border: 2px solid #ff4820;
   padding: 0 1rem;
@@ -67,3 +72,15 @@
 .request_form button:hover{
   background: #ce3a19 ;
 }
+
+
+@media only screen and (max-width: 768px) {
+  .request_form {
+    max-width: 80%; /* Adjust the maximum width for smaller screens */
+  }
+
+  .request_form input,
+  .request_form button {
+    width: 100%;
+  }
+}
diff --git a/src/components/Footer/Twilio.tsx b/src/components/Footer/Twilio.tsx
@@ -36,18 +36,20 @@ const Twilio = () => {
             value={number}
             placeholder="Enter The Language"
             onChange={(e) => setNumber(e.target.value)}
+            className="twilio-input"
           />
           <input
             placeholder="Enter the URL of Video"
             value={body}
             onChange={(e) => setBody(e.target.value)}
+            className="twilio-input"
           />
           {/* {console.log(`Number is ${number} and the Message is ${body}`)} */}
-          <button type="submit">Send</button>
+          <button type="submit" className="twilio-button" >Send</button>
         </form>
       </div>
     </div>
   );
 };
 
-export default Twilio;
+export default Twilio;