From 55523237b27c0a6e60260d2c6f8124f4a25e9315 Mon Sep 17 00:00:00 2001
From: jhpin2 <jahidhasanpintu82@gmail.com>
Date: Wed, 26 Feb 2025 17:25:44 +0600
Subject: [PATCH] feature card done

---
 src/app/page.tsx                      | 60 ++++++++++++++-------------
 src/components/FeatureCardSection.tsx | 14 +++----
 src/components/FeatureSection.tsx     | 22 +++++-----
 src/components/HeroSection.tsx        |  4 +-
 src/components/SocialSection.tsx      |  2 +-
 5 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3fa17e7..6da813e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -38,29 +38,29 @@ const Home = () => {
   };
 
   // For a different section, you could create another data object with different values
-  const marketingToolData = {
-    titleColoredText: "AI-Powered",
-    titleBoldText: "Marketing Suite",
+  const bulkSocialData = {
+    titleColoredText: "Bulk Social Media",
+    titleBoldText: "Post Generator",
     description:
-      "Transform your marketing strategy with our comprehensive AI-powered tools. Perfect for businesses of all sizes, our platform helps you create engaging campaigns that convert prospects into loyal customers.",
+      "Transform your workflow with our Bulk Social Media Post Generator. Input your ideas, set the tone, and let AI deliver a month's worth of scroll-stopping posts in just minutes. Say goodbye to stress and hello to seamless, cohesive content creation!",
 
-    imageUrl: "/assets/gif/marketing-tool.gif",
+    imageUrl: "/assets/images/bulk-gen.png",
     imageAlt: "Marketing tool interface",
     imagePosition: "right",
-    backgroundColor: "#e8f4ff",
+    backgroundColor: "#ffffff",
 
-    headingText: "Supercharge Your Marketing:",
-    coloredHeading: "Smart Automation",
+    headingText: "Create an Entire Month's Content in",
+    coloredHeading: "Just 5 Minutes!",
     paragraphText:
-      "Tired of repetitive marketing tasks? With MarketBoost Pro, you can automate your entire campaign workflow. Our intelligent assistant helps you create, schedule, and analyze all in one place.",
-    highlightedBrandName: "MarketBoost Pro,",
-    highlightedFeature: "intelligent assistant",
+      "Why create one post at a time when you can plan for the whole month in minutes? With PlanPost AI, you can",
+    highlightedBrandName: "PlanPost AI,",
+    highlightedFeature: "whole month",
 
     features: [
-      "Content Generation",
-      "Campaign Scheduling",
-      "Performance Analytics",
-      "Multi-channel Publishing",
+      "Bulk Generate Content Instantly",
+      "Stay Consistent Across Platforms",
+      "Save Time, Stay Ahead",
+      "Edit and Customize",
     ],
 
     ctaText: "Get Started Today",
@@ -75,27 +75,28 @@ const Home = () => {
     cards: [
       {
         id: 1,
-        imageUrl: "/assets/svg/smartchat-card.svg",
+        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: 2,
+        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: 2,
-        imageUrl: "/assets/svg/content-generator-card.svg",
-        imageAlt: "Content Generator illustration",
-        title: "Content Generator",
-        description:
-          "Create high-quality, SEO-optimized content for your blog, social media, and marketing campaigns with our AI-powered content generator.",
-      },
+
       {
         id: 3,
-        imageUrl: "/assets/svg/analytics-card.svg",
+        imageUrl: "/assets/images/bulk-gen.png",
         imageAlt: "Analytics Dashboard illustration",
-        title: "Analytics Dashboard",
+        title: "Bulk Generate",
         description:
-          "Gain valuable insights into your marketing performance with our comprehensive analytics dashboard powered by artificial intelligence.",
+          "Quickly create multiple tailored social media posts with AI, ensuring a consistent brand voice while saving time and effort.",
       },
     ],
   };
@@ -130,9 +131,10 @@ const Home = () => {
     <div className="bg-[#EBEAF3]">
       <HeroSection />
       <SocialSection />
-      <FeatureSection {...designToolData} />
-      {/* <FeatureSection {...marketingToolData} />
       <FeatureCardSection {...marketingToolsData} />
+      <FeatureSection {...designToolData} />
+      <FeatureSection {...bulkSocialData} />
+      {/*
       <FeatureCardSection {...automationToolsData} /> */}
       <PricingSection />
       <FAQSection />
diff --git a/src/components/FeatureCardSection.tsx b/src/components/FeatureCardSection.tsx
index 7311cda..4f2d9ac 100644
--- a/src/components/FeatureCardSection.tsx
+++ b/src/components/FeatureCardSection.tsx
@@ -41,14 +41,14 @@ const FeatureCardSection: React.FC<FeatureCardSectionProps> = ({
       <div className="w-10/12 mx-auto py-16">
         <div className="max-w-[750px] mx-auto mb-10">
           <div className="text-center">
-            <span className="text-[#6a47ed] text-center text-5xl font-light font-['Inter'] leading-[48px]">
+            <span className="text-[#6a47ed] text-center text-2xl md:text-5xl font-light font-['Inter'] leading-[28px] md:leading-[48px]">
               {titleColoredText}
             </span>
-            <span className="text-[#434343] text-center text-5xl font-bold font-['Inter'] leading-[48px]">
+            <span className="text-[#434343] text-center text-2xl md:text-5xl font-bold font-['Inter'] leading-[28px] md:leading-[48px]">
               {" " + titleBoldText}
             </span>
           </div>
-          <div className="max-w-[750px] mt-4 text-center text-[#9b97bb] text-base font-normal font-['Inter'] leading-normal">
+          <div className="max-w-[750px] mt-4 text-center text-[#9b97bb] text-sm md:text-base font-normal font-['Inter'] leading-normal">
             {description}
           </div>
         </div>
@@ -57,15 +57,15 @@ const FeatureCardSection: React.FC<FeatureCardSectionProps> = ({
           {cards.map((card) => (
             <div
               key={card.id}
-              className="marketing-card w-full max-w-[404px] h-[490px] bg-white rounded-[20px] border border-[#ebebeb] mx-auto"
+              className="marketing-card w-full max-w-[404px] h-[400px] md:h-[450px] bg-white rounded-[20px] border border-[#ebebeb] mx-auto"
             >
-              <div className="shadow-md rounded-3xl flex justify-center m-2 h-48 overflow-hidden">
+              <div className="shadow-md rounded-3xl flex justify-center m-2 h-48 md:h-64 overflow-hidden">
                 <Image
                   src={card.imageUrl}
                   alt={card.imageAlt}
                   width={360}
-                  height={180}
-                  className="object-cover w-full h-full"
+                  height={480}
+                  className="h-full w-full"
                 />
               </div>
               <div className="text-[#252525] w-[90%] mx-auto mt-[20px] text-2xl font-semibold font-['Inter']">
diff --git a/src/components/FeatureSection.tsx b/src/components/FeatureSection.tsx
index cb7fca3..6c7778a 100644
--- a/src/components/FeatureSection.tsx
+++ b/src/components/FeatureSection.tsx
@@ -60,17 +60,16 @@ const FeatureSection: React.FC<DesignToolProps> = ({
   // Create the image container and content container
   const imageContainer = (
     <div
-      className={`w-full max-w-[684px] h-[491px] relative rotate-180 ${imageContainerClasses}`}
+      className={`w-full  rotate-180 ${imageContainerClasses}`}
       style={{ backgroundColor }}
     >
-      <div className="rotate-180 absolute top-[50px] right-0">
+      <div className="rotate-180 ">
         <Image
           className="clip-path"
           src={imageUrl}
           alt={imageAlt}
           width={684}
           height={491}
-          style={{ clipPath: "inset(0 3px 0 0)" }}
         />
       </div>
     </div>
@@ -78,7 +77,7 @@ const FeatureSection: React.FC<DesignToolProps> = ({
 
   const contentContainer = (
     <div className="details-box-content p-[50px]">
-      <div className="max-w-[424px]">
+      <div className="">
         <span className="text-[#252525] text-2xl font-bold font-['Inter'] leading-normal">
           {headingText}
         </span>
@@ -87,7 +86,7 @@ const FeatureSection: React.FC<DesignToolProps> = ({
         </span>
       </div>
 
-      <div className="max-w-[433px] my-4">
+      <div className=" my-4">
         <span className="text-[#505050] text-base font-normal font-['Inter'] leading-normal">
           {paragraphText.split(highlightedBrandName)[0]}
         </span>
@@ -132,21 +131,21 @@ const FeatureSection: React.FC<DesignToolProps> = ({
         ))}
       </div>
 
-      <div className="w-[245px] my-10">
+      <div className="my-10 inline-block">
         <div
-          className="h-[75px] py-[5px] px-[7px] flex justify-center items-center bg-[#ff2b85]/30 rounded-[14px]"
+          className="p-[5px] rounded-[14px]"
           style={{ backgroundColor: `${ctaBackgroundColor}30` }}
         >
           <div
-            className="py-[5px] px-[7px] flex justify-center items-center bg-[#ff2b85]/30 rounded-[14px]"
+            className="p-[5px] rounded-[14px]"
             style={{ backgroundColor: `${ctaBackgroundColor}30` }}
           >
             <div
-              className="py-[14px] px-[22px] rounded-lg justify-center items-center gap-2.5 inline-flex"
+              className="py-[14px] px-[22px] rounded-lg"
               style={{ backgroundColor: ctaBackgroundColor }}
             >
               <p
-                className="text-base font-semibold font-['Inter'] leading-normal"
+                className="text-base font-semibold font-['Inter'] leading-normal whitespace-nowrap"
                 style={{ color: ctaTextColor }}
               >
                 {ctaText}
@@ -175,8 +174,7 @@ const FeatureSection: React.FC<DesignToolProps> = ({
       </div>
 
       <div className="details-card">
-        <div className="h-[540px] max-w-[1320px] w-full flex items-center mx-auto bg-white rounded-[40px] overflow-hidden">
-          {/* Render components based on image position */}
+        <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">
           {imagePosition === "left" ? (
             <>
               {imageContainer}
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
index 507a082..fe97da4 100644
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -30,7 +30,7 @@ const HeroSection: React.FC = () => {
             className={`${styles.glass} absolute my-20 md:my-40 w-full md:w-7/12 z-10`}
           >
             <div className="p-8 md:p-16">
-              <div className="text-2xl md:text-6xl leading-5xl font-normal font-['Gendy'] ">
+              <div className="text-2xl md:text-4xl lg:text-6xl leading-5xl font-normal font-['Gendy'] ">
                 <span className="text-[#ff256d] md:text-white ">R</span>
                 <span className="text-[#252525] ">
                   evolutionize Your Social Media Strategy with a Personalized
@@ -38,7 +38,7 @@ const HeroSection: React.FC = () => {
                 <br />
                 <span className="text-[#ff256d]"> AI Agent</span>
               </div>
-              <p className="w-full md:w-10/12 text-xs md:text-[20px] mt-4 leading-relaxed md:leading-loose">
+              <p className="w-full md:w-10/12 text-xs md:text-[15px] lg:text-[20px] mt-4 leading-relaxed md:leading-loose">
                 Customize your social media content, automate posts, and grow
                 your brand with a personalized AI assistant designed for
                 businesses and marketers.
diff --git a/src/components/SocialSection.tsx b/src/components/SocialSection.tsx
index 50c09f5..6266364 100644
--- a/src/components/SocialSection.tsx
+++ b/src/components/SocialSection.tsx
@@ -3,7 +3,7 @@ import React from "react";
 const SocialSection: React.FC = () => {
   return (
     <section className="social" data-aos="fade-up" data-aos-duration="1500">
-      <div className="h-[507px] flex justify-center relative">
+      <div className="h-0 md:h-[180px] lg:h-[250px] flex justify-center relative">
         <div className="absolute top-[-200px]">
           <img src="/assets/images/temp-example.png" alt="" />
         </div>