From 0601f2af559404f7f71837abd4676cb2df0009f5 Mon Sep 17 00:00:00 2001
From: "CHIEFSOFT\\ameye" <ameye@chiefsfot.com>
Date: Fri, 21 Feb 2025 13:46:22 -0500
Subject: [PATCH] performance page

---
 app/(services)/performance/page.jsx           | 137 +++++++++---------
 .../features/PerformanceServiceSection.jsx    |  49 +++++++
 2 files changed, 121 insertions(+), 65 deletions(-)
 create mode 100644 components/features/PerformanceServiceSection.jsx

diff --git a/app/(services)/performance/page.jsx b/app/(services)/performance/page.jsx
index ff5864a..354ba8f 100644
--- a/app/(services)/performance/page.jsx
+++ b/app/(services)/performance/page.jsx
@@ -10,7 +10,7 @@ import FancyFeatureThirtyThree from "../../../components/features/FancyFeatureTh
 import Image from "next/image";
 import FooterFinSite from "@/components/footer/FooterFinSite";
 import Header from "../../../components/header/Header";
-import FeatureThree from "@/components/features/FeatureThree";
+import PerformanceServiceSection from "@/components/features/PerformanceServiceSection";
 import FeatureFive from "@/components/features/FeatureFive";
 
 export const metadata = {
@@ -53,6 +53,76 @@ const ServiceV1 = () => {
       </div>
       {/* /.fancy-hero-three */}
 
+
+
+      {/* =====================================================
+            Fancy Text block Twelve
+        ===================================================== */}
+      <div className="fancy-text-block-twelve mt-170 md-mt-100">
+        <div className="container">
+          <div className="row">
+            <div
+                className="col-lg-6"
+                data-aos="fade-right"
+                data-aos-duration="1200"
+            >
+              <div className="text-wrapper">
+                <div className="title-style-three">
+                  {/*<h6>Why us?</h6>*/}
+                  {/*<h2>*/}
+                  {/*  <span>*/}
+                  {/*    Why your should*/}
+                  {/*    <Image width="530" height="54" src="/images/shape/line-shape-6.svg" alt="image" />*/}
+                  {/*  </span>*/}
+                  {/*  choose deski.*/}
+                  {/*</h2>*/}
+                </div>
+                <p className="sub-text pb-35">
+                  Now, what does performance marketing entail? It’s about deploying strategies that hit the mark, such as:
+                </p>
+                <ul className="list-item-one">
+                  <li> Crafting targeted advertising campaigns</li>
+                  <li>Launching paid media ads that speak to the heart</li>
+                  <li>Employing retargeting strategies to keep your brand top-of-mind</li>
+                  <li>Optimizing your website for search engines—because visibility is key</li>
+                  <li>Hosting engaging webinars that inform and attract</li>
+                  <li>Utilizing email outreach to nurture leads</li>
+                  <li>Networking on LinkedIn to build relationships</li>
+                  <li>Supporting your sales team with the tools they need to succeed</li>
+                </ul>
+              </div>
+              {/* <!-- /.text-wrapper --> */}
+            </div>
+            {/* End .col-6 */}
+
+            <div
+                className="col-lg-5 ms-auto"
+                data-aos="fade-left"
+                data-aos-duration="1200"
+            >
+              <div className="img-gallery">
+                <Image width={402} height={430} style={{height:'fit-content'}}     src="/images/media/img_37.png" alt="image" />
+                <Image width={121} height={145}
+                       src="/images/shape/53.svg"
+                       alt="shape"
+                       className="shapes shape-one"
+                />
+                <Image width={144} height={144}
+                       src="/images/shape/52.svg"
+                       alt="shape"
+                       className="shapes shape-two"
+                />
+              </div>
+              {/* <!-- /.img-gallery --> */}
+            </div>
+            {/* End col-lg-5 */}
+          </div>
+        </div>
+      </div>
+      {/* <!-- /.fancy-text-block-twelve --> */}
+
+
+
       {/*   =============================================
         Fancy Text block Eleven
     ==============================================  */}
@@ -90,7 +160,7 @@ const ServiceV1 = () => {
 
           <div className="wrapper">
             <div className="row justify-content-center">
-              <FeatureThree />
+              <PerformanceServiceSection />
             </div>
           </div>
         </div>
@@ -164,69 +234,6 @@ const ServiceV1 = () => {
 
 
 
-      {/* =====================================================
-            Fancy Text block Twelve
-        ===================================================== */}
-      <div className="fancy-text-block-twelve mt-170 md-mt-100">
-        <div className="container">
-          <div className="row">
-            <div
-              className="col-lg-6"
-              data-aos="fade-right"
-              data-aos-duration="1200"
-            >
-              <div className="text-wrapper">
-                <div className="title-style-three">
-                  <h6>Why us?</h6>
-                  <h2>
-                    <span>
-                      Why your should
-                      <Image width="530" height="54" src="/images/shape/line-shape-6.svg" alt="image" />
-                    </span>
-                    choose deski.
-                  </h2>
-                </div>
-                <p className="sub-text pb-35">
-                  A ticketing system is a tool, primarily for customer service.
-                  It helps customer representativ inquiries from one interface
-                  without any struggles.
-                </p>
-                <ul className="list-item-one">
-                  <li>Amazing communication.</li>
-                  <li>Best trendinf designing experience.</li>
-                  <li>Email & Live chat.</li>
-                </ul>
-              </div>
-              {/* <!-- /.text-wrapper --> */}
-            </div>
-            {/* End .col-6 */}
-
-            <div
-              className="col-lg-5 ms-auto"
-              data-aos="fade-left"
-              data-aos-duration="1200"
-            >
-              <div className="img-gallery">
-                <Image width={402} height={430} style={{height:'fit-content'}}     src="/images/media/img_37.png" alt="image" />
-                <Image width={121} height={145}
-                  src="/images/shape/53.svg"
-                  alt="shape"
-                  className="shapes shape-one"
-                />
-                <Image width={144} height={144}
-                  src="/images/shape/52.svg"
-                  alt="shape"
-                  className="shapes shape-two"
-                />
-              </div>
-              {/* <!-- /.img-gallery --> */}
-            </div>
-            {/* End col-lg-5 */}
-          </div>
-        </div>
-      </div>
-      {/* <!-- /.fancy-text-block-twelve --> */}
-
 
 
       {/* =====================================================
diff --git a/components/features/PerformanceServiceSection.jsx b/components/features/PerformanceServiceSection.jsx
new file mode 100644
index 0000000..5e3cb49
--- /dev/null
+++ b/components/features/PerformanceServiceSection.jsx
@@ -0,0 +1,49 @@
+//PerformanceServiceSection
+import React from "react";
+import Image from "next/image";
+const FeatureContent = [
+    {
+        icon: "09",
+        meta: "Project management",
+        subTitle: `tempor incididunt ut labor culpa dolore magna aliqua. Ut enim qui minim veniam,`,
+        dataDelay: "0",
+    },
+    {
+        icon: "10",
+        meta: "Customer Support",
+        subTitle: `Excepteur sint occaecat cupidatat non proident, sunt in culpa non officia.`,
+        dataDelay: "100",
+    },
+    {
+        icon: "11",
+        meta: "Marketing",
+        subTitle: `consectetur adipiscing elit, sed dou eiusmod tempor incididu ut lab et dolore.`,
+        dataDelay: "300",
+    },
+];
+
+const PerformanceServiceSection = () => {
+    return (
+        <div className="row justify-content-center">
+            {FeatureContent.map((val, i) => (
+                <div
+                    className="col-lg-4 col-md-6"
+                    key={i}
+                    data-aos="fade-up"
+                    data-aos-duration="1200"
+                    data-aos-delay={val.dataDelay}
+                >
+                    <div className="block-style-three">
+                        <div className="icon">
+                            <Image width={78} height={78} style={{objectFit:'contain'}}    src={`/images/icon/${val.icon}.svg`} alt="icon" />
+                        </div>
+                        <h4>{val.meta}</h4>
+                        <p className="font-rubik">{val.subTitle}</p>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default PerformanceServiceSection;