fix: Improve mobile responsiveness and update links on amiusing.reque… (#9)

* fix: Improve mobile responsiveness and update links on amiusing.requestly.io

* reverting back the links and testing as well, all working

Author: Somilg11

components/Yes.js

@@ -72,7 +72,7 @@ export default function Yes() {
             target="_blank"
             rel="noreferrer noopener"
           >
-            Coinditionally replace part of an URL String
+            Conditionally replace part of an URL String
           </a>
           <a
             href="https://docs.requestly.com/general/rule-types/modify-user-agents"

package-lock.json

@@ -11,6 +11,7 @@ export default function Home({ headers }) {
         <title>
           Am I Using Requestly | Requestly - Intercept & Modify HTTP(s) Requests
         </title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta
           name="description"
           content="Requestly allows you to Intercept & Modify network requests. Main features include Modifying headers, Setting  up redirects, Switch hosts, inserting custom scripts and much more"

pages/index.js

@@ -13,29 +13,56 @@
 
 .grid {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+  .grid {
+    grid-template-columns: 1fr 1fr;
+  }
 }
 
 .success,
 .next {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 2rem;
-  min-height: 100vh;
+  padding: 1rem;
+  min-height: 50vh;
+}
+
+@media (min-width: 768px) {
+  .success,
+  .next {
+    padding: 2rem;
+    min-height: 100vh;
+  }
 }
 
 .success {
   background: #0648b3;
   color: #fff;
-  text-align: right;
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .success {
+    text-align: right;
+  }
 }
 
 .success h1 {
-  font-size: 3.2rem;
+  font-size: 2rem;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
+}
+
+@media (min-width: 768px) {
+  .success h1 {
+    font-size: 3.2rem;
+    justify-content: flex-end;
+  }
 }
 
 .success a {
@@ -44,16 +71,28 @@
 }
 
 .success svg {
-  width: 3rem;
+  width: 2rem;
   margin-right: 0.8rem;
 }
 
+@media (min-width: 768px) {
+  .success svg {
+    width: 3rem;
+  }
+}
+
 .failure {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 2rem;
+  padding: 1rem;
+}
+
+@media (min-width: 768px) {
+  .failure {
+    padding: 2rem;
+  }
 }
 
 .failure {
@@ -63,22 +102,34 @@
 }
 
 .failure h1 {
-  font-size: 3.2rem;
+  font-size: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+@media (min-width: 768px) {
+  .failure h1 {
+    font-size: 3.2rem;
+  }
+}
+
 .failure a {
   color: #fff;
   font-weight: 800;
 }
 
 .failure svg {
-  width: 3rem;
+  width: 2rem;
   margin-right: 0.8rem;
 }
 
+@media (min-width: 768px) {
+  .failure svg {
+    width: 3rem;
+  }
+}
+
 .info {
   margin-top: 2rem;
 }
@@ -88,10 +139,16 @@ p + p {
 }
 
 .next h2 {
-  font-size: 2rem;
+  font-size: 1.5rem;
   color: #0648b3;
 }
 
+@media (min-width: 768px) {
+  .next h2 {
+    font-size: 2rem;
+  }
+}
+
 .next .options {
   margin-top: 2rem;
   display: flex;
@@ -116,3 +173,41 @@ p + p {
 a + a {
   margin-top: 0.6rem;
 }
+
+/* Mobile-specific improvements */
+@media (max-width: 767px) {
+  .next .options {
+    align-items: stretch;
+  }
+  
+  .next a {
+    padding: 0.5rem 0;
+    word-wrap: break-word;
+  }
+  
+  .info {
+    margin-top: 1rem;
+  }
+  
+  .info p {
+    font-size: 0.95rem;
+    line-height: 1.5;
+  }
+}
+
+/* Ensure text doesn't overflow on very small screens */
+@media (max-width: 480px) {
+  .success h1,
+  .failure h1 {
+    font-size: 1.5rem;
+  }
+  
+  .next h2 {
+    font-size: 1.2rem;
+  }
+  
+  .success svg,
+  .failure svg {
+    width: 1.5rem;
+  }
+}