es lint error fixed

src/app/layout.tsx

@@ -14,8 +14,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "PlanPost AI",
-  description: "Generated by create next app",
+  description: "Generate Schedule Automate",
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -67,6 +67,34 @@ const Home = () => {
     ctaBackgroundColor: "#3482F6",
     ctaTextColor: "white",
   };
+  const adCreativeData = {
+    titleColoredText: "Best AI ",
+    titleBoldText: "Ad Creative Generator",
+    description:
+      "Create eye-catching ads effortlessly with our AI Ad Creative Generator. Enter a prompt, choose your brand tone, and watch as AI produces social media-ready content in just 10-20 seconds. Perfect for busy marketers and business owners who value speed and quality.",
+
+    imageUrl: "/assets/images/adCreative-min.png",
+    imageAlt: "Marketing tool interface",
+    imagePosition: "right",
+    backgroundColor: "#ffffff",
+
+    headingText: "Create Sales-Focused Content in",
+    coloredHeading: "Just Seconds",
+    paragraphText:
+      "Gone are the days of spending hours brainstorming captions or designing posts. With PlanPost AI, you can:",
+    highlightedBrandName: "PlanPost AI,",
+    highlightedFeature: "brainstorming",
+
+    features: [
+      "Generate AI-Driven Captions, Images, and Hashtags",
+      "Save Time, Stay Ahead",
+      "Customizable and On-Brand",
+    ],
+
+    ctaText: "Try For Free",
+    ctaBackgroundColor: "#3482F6",
+    ctaTextColor: "white",
+  };
   const marketingToolsData = {
     titleColoredText: "AI Tools for",
     titleBoldText: "Marketing Success",
@@ -102,38 +130,39 @@ const Home = () => {
   };
 
   // Example of another feature card section with different content and 2 columns
-  const automationToolsData = {
+  // const automationToolsData = {
-    titleColoredText: "Automation",
+  //   titleColoredText: "Automation",
-    titleBoldText: "Solutions",
+  //   titleBoldText: "Solutions",
-    description:
+  //   description:
-      "Discover powerful automation tools that streamline your workflow and boost productivity across your organization.",
+  //     "Discover powerful automation tools that streamline your workflow and boost productivity across your organization.",
-    cards: [
+  //   cards: [
-      {
+  //     {
-        id: 1,
+  //       id: 1,
-        imageUrl: "/assets/svg/workflow-automation.svg",
+  //       imageUrl: "/assets/svg/workflow-automation.svg",
-        imageAlt: "Workflow automation illustration",
+  //       imageAlt: "Workflow automation illustration",
-        title: "Workflow Automation",
+  //       title: "Workflow Automation",
-        description:
+  //       description:
-          "Automate repetitive tasks and streamline complex business processes with our intuitive workflow automation tools.",
+  //         "Automate repetitive tasks and streamline complex business processes with our intuitive workflow automation tools.",
-      },
+  //     },
-      {
+  //     {
-        id: 2,
+  //       id: 2,
-        imageUrl: "/assets/svg/email-marketing.svg",
+  //       imageUrl: "/assets/svg/email-marketing.svg",
-        imageAlt: "Email marketing automation illustration",
+  //       imageAlt: "Email marketing automation illustration",
-        title: "Email Marketing",
+  //       title: "Email Marketing",
-        description:
+  //       description:
-          "Create, schedule, and analyze email campaigns automatically with our powerful email marketing automation platform.",
+  //         "Create, schedule, and analyze email campaigns automatically with our powerful email marketing automation platform.",
-      },
+  //     },
-    ],
+  //   ],
-    gridColumns: 2 as const, // 2 columns for this section
+  //   gridColumns: 2 as const, // 2 columns for this section
-  };
+  // };
   return (
     <div className="bg-[#EBEAF3]">
       <HeroSection />
       <SocialSection />
       <FeatureCardSection {...marketingToolsData} />
-      <FeatureSection {...designToolData} />
       <FeatureSection {...bulkSocialData} />
+      <FeatureSection {...designToolData} />
+      <FeatureSection {...adCreativeData} />
       {/*
       <FeatureCardSection {...automationToolsData} /> */}
       <PricingSection />

src/components/Header.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
+import Image from "next/image";
 
 export default function Header() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -9,7 +10,12 @@ export default function Header() {
   return (
     <nav className="flex items-center justify-between pr-8 absolute z-50 w-full">
       <div className="flex items-center bg-white py-3 pr-6 pl-12 shadow-sm rounded-r-2xl">
-        <img src="assets/images/logo.webp" alt="Logo" className="h-6 w-6" />
+        <Image
+          src="/assets/images/logo.webp"
+          alt="Logo"
+          width={24}
+          height={24}
+        />
         <span className="ml-1 text-2xl font-bold text-[#ff256d]">
           PlanPost AI
         </span>

src/components/HeroSection.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styles from "./HeroSection.module.css";
 import Link from "next/link";
+import Image from "next/image";
 const HeroSection: React.FC = () => {
   return (
     <section className="header">
@@ -14,13 +15,16 @@ const HeroSection: React.FC = () => {
           {/* Right Background */}
           <div className="relative w-full md:w-1/2 bg-[#F9F1FF] h-[400px] md:h-[1075px]">
             <div
-              className="absolute top-0 left-[-150px] mt-0 md:mt-40 ml-16 h-[542px] flex-col justify-start items-start gap-2.5 inline-flex z-50"
+              className="absolute top-0 -left-[150px] mt-0 md:mt-40 ml-16 h-[542px] flex flex-col justify-start items-start gap-2.5 z-50"
               data-aos="fade-left"
               data-aos-duration="2000"
             >
-              <img
+              <Image
                 src="/assets/images/hero-temp-slider.png"
                 alt="Hero Slider"
+                width={750}
+                height={542}
+                priority
               />
             </div>
           </div>
@@ -65,10 +69,12 @@ const HeroSection: React.FC = () => {
                   className="ml-5 mt-5  px-7 py-3.5 bg-[#ff2b85] rounded-xl shadow-md border border-white flex items-center gap-2.5 text-white text-xl font-bold"
                 >
                   Generate
-                  <img
+                  <Image
                     src="/assets/svg/generate-icon.svg"
                     alt="Generate Icon"
                     className="w-6 h-6"
+                    height={24}
+                    width={24}
                   />
                 </Link>
               </div>
@@ -79,7 +85,12 @@ const HeroSection: React.FC = () => {
 
         {/* Social Icons */}
         <div className="absolute top-[142px] left-[77px] social-icons-pp z-20">
-          <img src="/assets/images/social-icons.png" alt="Social Icons" />
+          <Image
+            src="/assets/images/social-icons.png"
+            alt="Social Icons"
+            height={500}
+            width={500}
+          />
         </div>
       </div>
     </section>

src/components/SocialSection.tsx

@@ -1,11 +1,18 @@
+import Image from "next/image";
 import React from "react";
 
 const SocialSection: React.FC = () => {
   return (
     <section className="social" data-aos="fade-up" data-aos-duration="1500">
       <div className="h-0 md:h-[180px] lg:h-[250px] flex justify-center relative">
-        <div className="absolute top-[-200px]">
+        <div className="absolute -top-[200px]">
-          <img src="/assets/images/temp-example.png" alt="" />
+          <Image
+            src="/assets/images/temp-example.png"
+            alt="Example Image"
+            width={1200}
+            height={300}
+            priority
+          />
         </div>
       </div>
     </section>