UI improved for tablet

Amanmahe · Nov 13, 2024 · 11a186f · 11a186f
1 parent 4b6c314
commit 11a186f
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 52 deletions.
diff --git a/src/components/LandingComp/FAQSection.tsx b/src/components/LandingComp/FAQSection.tsx
@@ -170,7 +170,7 @@ const FAQSection = () => {
       <h1 className="text-3xl font-bold text-center text-foreground md:text-4xl lg:text-5xl">
         Frequently Asked Questions
       </h1>
-      <div className="mx-auto mt-8 max-w-6xl px-8 sm:px-10 md:px-10 lg:px-12 2xl:px-10 ">
+      <div className="mx-auto mt-8 max-w-6xl px-8 sm:px-10 md:px-10 lg:px-16 xl:px-12 2xl:px-10 ">
         <Accordion type="single" collapsible className=" max-w-7xl">
           {FAQs.map((faq, index) => (
             <AccordionItem value={`item-${index}`} key={index}>

diff --git a/src/components/LandingComp/Features.tsx b/src/components/LandingComp/Features.tsx
@@ -37,61 +37,62 @@ export function Features() {
         image: "./assets/Pause.png",
       },
     ];
- 
+
   return (
     <section className="w-full py-12">
-    <div className="container px-4 md:px-6 lg:px-8 max-w-6xl">
-      <div className="flex flex-col items-left justify-start space-y-2 text-left">
-        <div className="space-y-2 flex flex-col justify-start items-left">
-          <h1 className="text-2xl font-bold tracking-wide sm:text-3xl lg:text-[2.5rem] text-left">
-            <span className="inline-block overflow-hidden whitespace-nowrap animate-typewriter space-x-4">
-              {["Chords", "is", "packed", "with", "features"].map((word, index) => (
-                <span
-                  key={index}
-                  className="inline-block "
-                  style={{
-                    animationDelay: `${index * 1.5}s`, // Stagger delay between each word
-                  }}
-                >
-                  {word}
-                </span>
-              ))}
-            </span>
-          </h1>
-          <p className="max-w-[700px] text-muted-foreground md:text-xl/relaxed text-left">
-            An overview of all the core features <Chords /> provides.
-          </p>
+      <div className="container px-8 md:px-16 lg:px-16 xl:px-8 max-w-6xl">
+        <div className="flex flex-col items-left justify-start space-y-2 text-left">
+          <div className="space-y-2 flex flex-col justify-start items-left">
+            <h1 className="text-2xl font-bold tracking-wide sm:text-3xl lg:text-[2.5rem] text-left">
+              <span className="inline-block overflow-hidden whitespace-normal sm:whitespace-nowrap animate-typewriter space-x-4">
+                {["Chords", "is", "packed", "with", "features"].map((word, index) => (
+                  <span
+                    key={index}
+                    className="inline-block"
+                    style={{
+                      animationDelay: `${index * 1.5}s`, // Stagger delay between each word
+                    }}
+                  >
+                    {word}
+                  </span>
+                ))}
+              </span>
+            </h1>
+
+            <p className="max-w-[700px] text-muted-foreground md:text-xl/relaxed text-left">
+              An overview of all the core features <Chords /> provides.
+            </p>
+          </div>
         </div>
-      </div>
-
-      {/* Grid Layout for Cards */}
-      <div className="mx-auto grid max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 pt-12 pl-2">
-        {features.map((feature, index) => (
-          <Card
-            key={index}
-            className="flex flex-col items-center justify-center space-y-2 p-3 min-h-40 shadow-none"
-          >
-            <div className="flex justify-center gap-2 items-center flex-col">
-              <div className="flex items-center justify-center w-12 h-12 p-2 text-background bg-primary rounded-full">
-                <Image
-                  src={feature.image}
-                  alt="Icon"
-                  width={36}
-                  height={36}
-                  className="invert dark:invert-0"
-                />
+
+        {/* Grid Layout for Cards */}
+        <div className="mx-auto grid max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 pt-12 pl-2">
+          {features.map((feature, index) => (
+            <Card
+              key={index}
+              className="flex flex-col items-center justify-center space-y-2 p-3 min-h-40 shadow-none"
+            >
+              <div className="flex justify-center gap-2 items-center flex-col">
+                <div className="flex items-center justify-center w-12 h-12 p-2 text-background bg-primary rounded-full">
+                  <Image
+                    src={feature.image}
+                    alt="Icon"
+                    width={36}
+                    height={36}
+                    className="invert dark:invert-0"
+                  />
+                </div>
+                <h2 className="text-lg font-bold text-center">{feature.title}</h2>
               </div>
-              <h2 className="text-lg font-bold text-center">{feature.title}</h2>
-            </div>
-            <p className="text-primary/50 text-sm text-center max-w-xs">
-              {feature.description}
-            </p>
-          </Card>
-        ))}
+              <p className="text-primary/50 text-sm text-center max-w-xs">
+                {feature.description}
+              </p>
+            </Card>
+          ))}
+        </div>
       </div>
-    </div>
-  </section>
-
+    </section>
+
 
   );
 }
diff --git a/src/components/LandingComp/TechStack.tsx b/src/components/LandingComp/TechStack.tsx
@@ -60,7 +60,7 @@ const Stack = () => {
   ];
   return (
     <section className="w-full pt-12">
-  <div className="container grid grid-cols-1 md:grid-cols-2 items-center gap-8 px-8 sm:px-4 md:px-14 lg:px-24 2xl:px-26 max-w-7xl ">
+  <div className="container grid grid-cols-1 md:grid-cols-2 items-center gap-8 px-8 sm:px-4 md:px-14 lg:px-16 xl:px-24 max-w-7xl ">
 
     {/* Left Side (Text Content) */}
     <div className="space-y-6 text-left ">