feature card responsiveness fixed

src/app/page.tsx

@@ -159,32 +159,66 @@ const Home = () => {
     ],
   };
 
-  // Example of another feature card section with different content and 2 columns
+  const allInOneToolsData = {
-  // const automationToolsData = {
+    titleColoredText: "All-in-One AI",
-  //   titleColoredText: "Automation",
+    titleBoldText: "Marketing Platform",
-  //   titleBoldText: "Solutions",
+    description:
-  //   description:
+      "Revolutionize your marketing with our All-in-One AI Marketing platform. Effortlessly generate content, design stunning visuals, and engage with customers in minutes, all while maintaining brand consistency and maximizing efficiency. Save time and streamline your business processes with this powerful, all-in-one platform.",
-  //     "Discover powerful automation tools that streamline your workflow and boost productivity across your organization.",
+    cards: [
-  //   cards: [
+      {
-  //     {
+        id: 1,
-  //       id: 1,
+        imageUrl: "/assets/images/onclick-shedule-min.png",
-  //       imageUrl: "/assets/svg/workflow-automation.svg",
+        imageAlt: "Content Generator illustration",
-  //       imageAlt: "Workflow automation illustration",
+        title: "One Click Scheduling",
-  //       title: "Workflow Automation",
+        description:
-  //       description:
+          "Schedule your social media posts across platforms effortlessly with just one click, ensuring perfect timing for your audience.",
-  //         "Automate repetitive tasks and streamline complex business processes with our intuitive workflow automation tools.",
+      },
-  //     },
+      {
-  //     {
+        id: 2,
-  //       id: 2,
+        imageUrl: "/assets/images/competetor-analysis-min.png",
-  //       imageUrl: "/assets/svg/email-marketing.svg",
+        imageAlt: "Competitor Analytes",
-  //       imageAlt: "Email marketing automation illustration",
+        title: "Competitor Analytes",
-  //       title: "Email Marketing",
+        description:
-  //       description:
+          "Analyze competitors strategies with detailed insights to track trends, discover opportunities, and stay ahead in your industry.",
-  //         "Create, schedule, and analyze email campaigns automatically with our powerful email marketing automation platform.",
+      },
-  //     },
+
-  //   ],
+      {
-  //   gridColumns: 2 as const, // 2 columns for this section
+        id: 3,
-  // };
+        imageUrl: "/assets/images/AdLibrary-min.png",
+        imageAlt: "Analytics Dashboard illustration",
+        title: "Ad Library",
+        description:
+          "Explore a collection of successful ad examples to inspire your campaigns and create impactful advertisements that drive results.",
+      },
+      {
+        id: 4,
+        imageUrl: "/assets/images/design-tool.gif",
+        imageAlt: "Content Generator illustration",
+        title: "Your Design. Your Way",
+        description:
+          "Improve your AI-generated content with tools to boost engagement, readability, and performance for maximum impact.",
+      },
+      {
+        id: 5,
+        imageUrl: "/assets/images/smartchat.png",
+        imageAlt: "Smart Chatbot illustration",
+        title: "Smart Chatbot",
+        description:
+          "Empower your social media with an AI-powered chatbot that enhances customer engagement and automates responses across platforms.",
+      },
+
+      {
+        id: 6,
+        imageUrl: "/assets/images/bulk-gen.png",
+        imageAlt: "Analytics Dashboard illustration",
+        title: "Bulk Generate",
+        description:
+          "Quickly create multiple tailored social media posts with AI, ensuring a consistent brand voice while saving time and effort.",
+      },
+    ],
+    gridColumns: 3 as const, // 2 columns for this section
+  };
+
   return (
     <div className="bg-[#EBEAF3]">
       <HeroSection />
@@ -194,8 +228,8 @@ const Home = () => {
       <FeatureSection {...designToolData} />
       <FeatureSection {...adCreativeData} />
       <FeatureSection {...chatBotData} />
-      {/*
+
-      <FeatureCardSection {...automationToolsData} /> */}
+      <FeatureCardSection {...allInOneToolsData} />
       <PricingSection />
       <FAQSection />
     </div>

src/components/FeatureSection.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import Link from "next/link";
 import React from "react";
 
 interface DesignToolProps {
@@ -76,39 +77,39 @@ const FeatureSection: React.FC<DesignToolProps> = ({
   );
 
   const contentContainer = (
-    <div className="details-box-content p-[50px]">
+    <div className="details-box-content p-5 md:p-[50px]">
       <div className="">
-        <span className="text-[#252525] text-2xl font-bold font-['Inter'] leading-normal">
+        <span className="text-[#252525] text-xs md:text-2xl font-bold font-['Inter'] leading-normal">
           {headingText}
         </span>
-        <span className="text-[#6a47ed] text-[56px] font-bold font-['Inter'] leading-[56px] block">
+        <span className="text-[#6a47ed] text-2xl md:text-[56px] font-bold font-['Inter'] leading-8 md:leading-[56px] block">
           {coloredHeading}
         </span>
       </div>
 
-      <div className=" my-4">
+      <div className="my-2 md:my-4">
-        <span className="text-[#505050] text-base font-normal font-['Inter'] leading-normal">
+        <span className="text-[#505050] text-xs md:text-base font-normal font-['Inter'] leading-normal">
           {paragraphText.split(highlightedBrandName)[0]}
         </span>
-        <span className="text-[#ff2b85] text-base font-bold font-['Inter'] leading-normal">
+        <span className="text-[#ff2b85] text-xs md:text-base font-bold font-['Inter'] leading-normal">
           {highlightedBrandName}
         </span>
-        <span className="text-[#505050] text-base font-normal font-['Inter'] leading-normal">
+        <span className="text-[#505050] text-xs md:text-base font-normal font-['Inter'] leading-normal">
           {
             paragraphText
               .split(highlightedBrandName)[1]
               .split(highlightedFeature)[0]
           }
         </span>
-        <span className="text-[#ff2b85] text-base font-bold font-['Inter'] leading-normal">
+        <span className="text-[#ff2b85] text-xs md:text-base font-bold font-['Inter'] leading-normal">
           {highlightedFeature}
         </span>
-        <span className="text-[#505050] text-base font-normal font-['Inter'] leading-normal">
+        <span className="text-[#505050] text-xs md:text-base font-normal font-['Inter'] leading-normal">
           {paragraphText.split(highlightedFeature)[1]}
         </span>
       </div>
 
-      <div className="h-36 flex-col justify-start items-start gap-4 inline-flex">
+      <div className="h-24 md:h-36 flex-col justify-start items-start gap-1 md:gap-4 inline-flex">
         {features.map((feature, index) => (
           <div
             key={index}
@@ -124,35 +125,37 @@ const FeatureSection: React.FC<DesignToolProps> = ({
                 />
               </div>
             </div>
-            <div className="text-[#252525] text-base font-normal font-['Inter'] leading-normal">
+            <div className="text-[#252525] text-xs md:text-base font-normal font-['Inter'] leading-normal">
               {feature}
             </div>
           </div>
         ))}
       </div>
 
-      <div className="my-10">
+      <div className="my-2 md:my-10">
-        <div
+        <Link href="https://dashboard.planpostai.com/">
-          className="p-[5px] rounded-[14px] inline-block"
-          style={{ backgroundColor: `${ctaBackgroundColor}30` }}
-        >
           <div
-            className="p-[5px] rounded-[14px]"
+            className="p-[5px] rounded-[14px] inline-block"
             style={{ backgroundColor: `${ctaBackgroundColor}30` }}
           >
             <div
-              className="py-[14px] px-[22px] rounded-lg"
+              className="p-[5px] rounded-[14px]"
-              style={{ backgroundColor: ctaBackgroundColor }}
+              style={{ backgroundColor: `${ctaBackgroundColor}30` }}
             >
-              <p
+              <div
-                className="text-base font-semibold font-['Inter'] leading-normal whitespace-nowrap"
+                className="py-[14px] px-[22px] rounded-lg"
-                style={{ color: ctaTextColor }}
+                style={{ backgroundColor: ctaBackgroundColor }}
               >
-                {ctaText}
+                <p
-              </p>
+                  className="text-xs md:text-base font-semibold font-['Inter'] leading-normal whitespace-nowrap"
+                  style={{ color: ctaTextColor }}
+                >
+                  {ctaText}
+                </p>
+              </div>
             </div>
           </div>
-        </div>
+        </Link>
       </div>
     </div>
   );
@@ -161,20 +164,20 @@ const FeatureSection: React.FC<DesignToolProps> = ({
     <section className={`design-tool my-20 ${className || ""}`}>
       <div className="section-title text-center my-5">
         <div>
-          <span className="text-[#6a47ed] text-5xl font-light font-['Inter'] leading-[48px]">
+          <span className="text-[#6a47ed] text-2xl md:text-5xl font-light font-['Inter'] leading-[28px] md:leading-[48px]">
             {titleColoredText}
           </span>
-          <span className="text-[#252525] text-5xl font-bold font-['Inter'] leading-[48px]">
+          <span className="text-[#252525] text-2xl md:text-5xl font-bold font-['Inter'] leading-[28px] md:leading-[48px]">
             {" " + titleBoldText}
           </span>
         </div>
-        <div className="w-full max-w-[1008px] mx-auto text-center text-[#9b97bb] text-base font-normal font-['Inter'] leading-normal">
+        <div className="w-full max-w-[80%] mx-auto text-center text-[#9b97bb] text-xs md:text-base font-normal font-['Inter'] leading-normal">
           {description}
         </div>
       </div>
 
       <div className="details-card">
-        <div className="w-11/12 xl:w-10/12 py-10 flex gap-x-5 items-center mx-auto bg-white rounded-[40px] overflow-hidden">
+        <div className="w-11/12 xl:w-10/12 py-0 md:py-10 flex flex-col md:flex-row gap-x-5 items-center mx-auto bg-white rounded-[40px] overflow-hidden">
           {imagePosition === "left" ? (
             <>
               {imageContainer}