From c87bf84495a2f36e881845ec50f3c39db0219610 Mon Sep 17 00:00:00 2001
From: Shayan Danish <136985581+Shayan12456@users.noreply.github.com>
Date: Thu, 31 Oct 2024 13:18:29 +0000
Subject: [PATCH 1/2] overlapping-text-issue-resolved

---
 src/components/PrimaryFeatures.jsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/PrimaryFeatures.jsx b/src/components/PrimaryFeatures.jsx
index b7f1562..b497223 100644
--- a/src/components/PrimaryFeatures.jsx
+++ b/src/components/PrimaryFeatures.jsx
@@ -37,8 +37,11 @@ const features = [
   },
 ];
 
+
+
 export function PrimaryFeatures() {
   let [tabOrientation, setTabOrientation] = useState('horizontal');
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
 
   useEffect(() => {
     let lgMediaQuery = window.matchMedia('(min-width: 1024px)');
@@ -55,11 +58,24 @@ export function PrimaryFeatures() {
     };
   }, []);
 
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(max-width: 370px)');
+    const handleResize = (e) => setIsSmallScreen(e.matches);
+    mediaQuery.addEventListener('change', handleResize);
+
+    // Initial check
+    setIsSmallScreen(mediaQuery.matches);
+
+    return () => mediaQuery.removeEventListener('change', handleResize);
+  }, []);
+
   return (
     <section
       id="features"
       aria-label="Features for running your books"
-      className="relative overflow-hidden pb-28 pt-20 sm:py-32"
+      // className="relative overflow-hidden pb-28 pt-20 sm:py-32"
+      className={`${isSmallScreen ? 'pt-6 ' : 'pt-20 '}relative overflow-hidden pb-28 sm:py-32`}
+
     >
       <BlurBG />
       <Container className="relative">
@@ -67,7 +83,7 @@ export function PrimaryFeatures() {
           <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
             Elevate your web development experience with the comprehensive toolset!
           </h2>
-          <p className="mt-6 text-lg tracking-tight text-emerald-100">
+          <p className={`${isSmallScreen ? 'mt-3 leading-normal text-base' : 'mt-6'} text-lg tracking-tight text-emerald-100`}>
             Everything you need to create pixel-perfect, responsive websites with ease.
           </p>
         </div>

From 4b04411cbb428d4ba0aede4df1647fa4e6333dad Mon Sep 17 00:00:00 2001
From: Shayan Danish <136985581+Shayan12456@users.noreply.github.com>
Date: Thu, 31 Oct 2024 14:02:53 +0000
Subject: [PATCH 2/2] issue-resolved

---
 src/components/PrimaryFeatures.jsx | 22 +++-------------------
 src/styles/tailwind.css            | 23 +++++++++++++++++++++++
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/PrimaryFeatures.jsx b/src/components/PrimaryFeatures.jsx
index b497223..79e2bdd 100644
--- a/src/components/PrimaryFeatures.jsx
+++ b/src/components/PrimaryFeatures.jsx
@@ -37,11 +37,8 @@ const features = [
   },
 ];
 
-
-
 export function PrimaryFeatures() {
   let [tabOrientation, setTabOrientation] = useState('horizontal');
-  const [isSmallScreen, setIsSmallScreen] = useState(false);
 
   useEffect(() => {
     let lgMediaQuery = window.matchMedia('(min-width: 1024px)');
@@ -58,24 +55,11 @@ export function PrimaryFeatures() {
     };
   }, []);
 
-  useEffect(() => {
-    const mediaQuery = window.matchMedia('(max-width: 370px)');
-    const handleResize = (e) => setIsSmallScreen(e.matches);
-    mediaQuery.addEventListener('change', handleResize);
-
-    // Initial check
-    setIsSmallScreen(mediaQuery.matches);
-
-    return () => mediaQuery.removeEventListener('change', handleResize);
-  }, []);
-
   return (
     <section
       id="features"
       aria-label="Features for running your books"
-      // className="relative overflow-hidden pb-28 pt-20 sm:py-32"
-      className={`${isSmallScreen ? 'pt-6 ' : 'pt-20 '}relative overflow-hidden pb-28 sm:py-32`}
-
+      className="relative overflow-hidden pb-28 pt-20 sm:py-32 overflow-avoid"
     >
       <BlurBG />
       <Container className="relative">
@@ -83,7 +67,7 @@ export function PrimaryFeatures() {
           <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
             Elevate your web development experience with the comprehensive toolset!
           </h2>
-          <p className={`${isSmallScreen ? 'mt-3 leading-normal text-base' : 'mt-6'} text-lg tracking-tight text-emerald-100`}>
+          <p className="mt-6 text-lg tracking-tight text-emerald-100 text-overflow-avoid">
             Everything you need to create pixel-perfect, responsive websites with ease.
           </p>
         </div>
@@ -234,4 +218,4 @@ const FeatureMedia = memo(function FeatureMedia({ feature }) {
         ))}
     </div>
   );
-});
+});
\ No newline at end of file
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index b509cbc..bca7b27 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -28,4 +28,27 @@
 /* Gap between columns */
 .column-gap-6 {
   column-gap: 1.5rem;  
+}
+
+@media (max-width: 370px) {
+  .overflow-avoid {
+    padding-top: 20px;
+  }
+}
+
+@media (max-width: 340px) {
+  .overflow-avoid {
+    padding-top: 10px;
+  }
+}
+
+@media (max-width: 325px) {
+  .overflow-avoid {
+    padding-top: 5px;
+  }
+
+  .text-overflow-avoid {
+    font-size: 1rem;
+    margin-top: 0.25rem;
+  }
 }
\ No newline at end of file