blog page structure updated

public/assets/css/main.css

@@ -7245,8 +7245,8 @@ blockquote i {
   font-size: 36px;
   color: var(--theme-color);
   position: absolute;
-  bottom: -20px;
+  bottom: -25px;
-  right: -10px;
+  right: -25px;
 }
 
 .tagcloud.tagcloud-sm span {

src/app/blog/[slug]/BlogDetailsClient.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import Header1 from "@/components/layout/Header1";
+import Footer1 from "@/components/layout/Footer1";
+import InnerBanner from "@/components/common/InnerBanner";
+import { BlogType } from "@/types";
+
+interface BlogDetailsClientProps {
+    blog: BlogType | undefined;
+}
+
+export default function BlogDetailsClient({ blog }: BlogDetailsClientProps) {
+    const router = useRouter();
+
+    useEffect(() => {
+        if (typeof window !== "undefined" && (window as any).initMetatron) {
+            (window as any).initMetatron();
+        }
+    }, [blog]);
+
+    if (!blog) {
+        return (
+            <>
+                <Header1 />
+                <div className="section-space text-center">
+                    <div className="container">
+                        <h2>Blog Not Found</h2>
+                        <button onClick={() => router.back()} className="primary-btn-1 mt-20">
+                            Go Back
+                        </button>
+                    </div>
+                </div>
+                <Footer1 />
+            </>
+        );
+    }
+
+    return (
+        <>
+            <Header1 />
+            <main>
+                <InnerBanner title={blog.title} />
+
+                <section className="blog-details-area section-space">
+                    <div className="container">
+                        <div className="row justify-content-center">
+                            <div className="col-lg-10">
+                                <div className="blog-details-content">
+                                    <div className="blog-details-img mb-40">
+                                        <img src={blog.image} alt={blog.title} className="w-100" />
+                                    </div>
+
+                                    <div className="blog-meta mb-30">
+                                        <span><i className="fa-solid fa-user"></i> By Admin</span>
+                                        <span><i className="fa-solid fa-calendar-days"></i> {blog.date}</span>
+                                        <span><i className="fa-solid fa-tag"></i> {blog.category}</span>
+                                    </div>
+
+                                    <h2 className="details-title mb-30">{blog.title}</h2>
+
+                                    <div className="details-text mb-40">
+                                        <p>{blog.details}</p>
+                                    </div>
+
+                                    {blog.blockquote && (
+                                        <blockquote className="blog-blockquote mb-40">
+                                            <div className="quote-icon">
+                                                <i className="fa-solid fa-quote-right"></i>
+                                            </div>
+                                            <p>{blog.blockquote}</p>
+                                        </blockquote>
+                                    )}
+
+                                    <div className="details-text mb-60">
+                                        <p>{blog.description}</p>
+                                    </div>
+
+                                    <div className="back-btn-wrapper pt-40 border-top">
+                                        <button onClick={() => router.back()} className="primary-btn-5 btn-hover">
+                                            <i className="fa-solid fa-arrow-left"></i> &nbsp; Back to Previous Page
+                                            <span className="btn-hover-span"></span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </main>
+            <Footer1 />
+
+            <style jsx>{`
+                .blog-details-img img {
+                    height: 500px;
+                    object-fit: cover;
+                    border-radius: 24px;
+                    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+                }
+                .blog-meta {
+                    display: flex;
+                    gap: 30px;
+                    font-size: 16px;
+                    color: #64748b;
+                    font-weight: 600;
+                }
+                .blog-meta i {
+                    color: #3779b9;
+                    margin-right: 8px;
+                }
+                .details-title {
+                    font-size: 42px;
+                    font-weight: 800;
+                    color: #0f172a;
+                    line-height: 1.2;
+                }
+                .details-text p {
+                    font-size: 18px;
+                    line-height: 1.8;
+                    color: #475569;
+                }
+                .blog-blockquote {
+                    background: #f8fbff;
+                    padding: 40px 60px;
+                    border-left: 5px solid #3779b9;
+                    border-radius: 0 24px 24px 0;
+                    position: relative;
+                }
+                .quote-icon {
+                    position: absolute;
+                    top: 20px;
+                    left: 20px;
+                    font-size: 40px;
+                    color: rgba(55, 121, 185, 0.1);
+                }
+                .blog-blockquote p {
+                    font-size: 22px;
+                    font-style: italic;
+                    font-weight: 700;
+                    color: #1e293b;
+                    line-height: 1.5;
+                    margin: 0;
+                }
+                .border-top {
+                    border-top: 1px solid #e2e8f0;
+                }
+                @media (max-width: 991px) {
+                    .details-title { font-size: 32px; }
+                    .blog-details-img img { height: 400px; }
+                    .blog-blockquote { padding: 30px 40px; }
+                }
+                @media (max-width: 767px) {
+                    .blog-meta { flex-direction: column; gap: 10px; }
+                    .blog-details-img img { height: 300px; }
+                }
+            `}</style>
+        </>
+    );
+}

src/app/blog/[slug]/page.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { blogs } from "@/utils/data";
+import BlogDetailsClient from "./BlogDetailsClient";
+
+export async function generateStaticParams() {
+    return blogs.map((blog) => ({
+        slug: blog.slug,
+    }));
+}
+
+export default async function BlogDetailsPage({ params }: { params: Promise<{ slug: string }> }) {
+    const { slug } = await params;
+    const blog = blogs.find((b) => b.slug === slug);
+
+    return <BlogDetailsClient blog={blog} />;
+}

src/app/blog/page.tsx

@@ -27,7 +27,7 @@ export default function Home1() {
             <Header1 />
             <main>
                 <InnerBanner title="Our Blog" />
-                <BlogSection />
+                <BlogSection hideHeader={true} />
 
             </main>
             <Footer1 />

src/app/faq/page.tsx

@@ -5,6 +5,7 @@ import Header1 from "@/components/layout/Header1";
 import Footer1 from "@/components/layout/Footer1";
 import InnerBanner from "@/components/common/InnerBanner";
 import FaqPageSection from "@/components/faq/FaqPageSection";
+import FaqVideoSection from "@/components/careers/FaqVideoSection";
 
 export default function FaqPage() {
     useEffect(() => {
@@ -24,6 +25,7 @@ export default function FaqPage() {
             <main>
                 <InnerBanner title="FAQ" />
                 <FaqPageSection />
+                <FaqVideoSection />
             </main>
             <Footer1 />
         </>

src/app/globals.css

@@ -520,7 +520,7 @@ body {
 .fo-section {
   position: relative;
   overflow: visible;
-  background: #f5f0ec;
+  /* background: #f5f0ec; */
   padding-top: 80px;
   padding-bottom: 80px;
 }
@@ -655,14 +655,14 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(255, 255, 255, 0.15);
+  /* background: rgba(255, 255, 255, 0.15); */
   text-decoration: none;
   transition: background 0.3s;
 }
 
-.fo-hover-btn:hover {
+/* .fo-hover-btn:hover {
   background: rgba(255, 255, 255, 0.28);
-}
+} */
 
 /* ══════════════════════════════════
    MAIN CARD
@@ -691,8 +691,8 @@ body {
 .fo-item:hover .fo-card-top,
 .fo-item--active .fo-card-top {
   background-color: #fff;
-  border-left: 2px solid var(--getizy-secondary);
+  border-left: 4px solid var(--getizy-secondary);
-  border-right: 2px solid var(--getizy-secondary);
+  border-right: 4px solid var(--getizy-secondary);
 }
 
 .fo-card-title {
@@ -737,7 +737,7 @@ body {
   background-color: #fff;
   padding: 20px 20px 20px 20px;
   position: relative;
-  border: 2px solid transparent;
+  border: 4px solid transparent;
   border-image: linear-gradient(90deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%);
   border-image-slice: 1;
   transition: padding 0.45s ease, border 0.45s ease;
@@ -748,7 +748,7 @@ body {
   border-image: none;
   border-color: var(--getizy-secondary);
   border-style: solid;
-  border-width: 2px;
+  border-width: 4px;
   border-top: none;
   padding: 0 32px 40px 32px;
 }
@@ -1696,7 +1696,7 @@ body {
 .video-three {
   position: relative;
   z-index: 10;
-  padding-bottom: 120px;
+  padding-bottom: 80px;
 }
 
 .video-three__inner {
@@ -1709,7 +1709,7 @@ body {
   border-right-width: 10px;
   border-left-width: 10px;
   overflow: visible;
-  padding: 304px 0 0;
+  padding: 120px 0 0;
   margin-top: -169px;
   z-index: 1;
 }
@@ -2283,7 +2283,7 @@ body {
    ═══════════════════════════════════════════════════════════ */
 .service-three {
   position: relative;
-  background-color: #ecf2fc;
+  /* background-color: #ecf2fc; */
   padding: 80px 0;
   overflow: hidden;
   z-index: 1;
@@ -2325,14 +2325,14 @@ body {
 .service-three__item__content {
   position: relative;
   z-index: 2;
-  background-color: #fff;
+  background-color: #3779b9;
   border-radius: 20px 20px 0 0;
   padding: 0 28px 22px;
   transition: all 500ms ease;
 }
 
 .service-three__item:hover .service-three__item__content {
-  background-color: #1b272a;
+  background-color: #1a1f2b;
 }
 
 .service-three__item__icon {
@@ -2346,7 +2346,7 @@ body {
   align-items: center;
   justify-content: center;
   margin: 0 auto -22px;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: #1a1f2b;
   font-size: 42px;
   color: var(--getizy-base, #3779b9);
   transition: all 500ms ease;
@@ -2365,7 +2365,7 @@ body {
 }
 
 .service-three__item__title a {
-  color: #1a1f2b;
+  color: #fff;
   transition: all 500ms ease;
 }
 
@@ -2376,7 +2376,7 @@ body {
 .service-three__item__text {
   line-height: 26px;
   margin: 0;
-  color: #6c7279;
+  color: #fff;
   transition: all 500ms ease;
 }
 
@@ -2464,9 +2464,9 @@ body {
 
 .work-process-wrapper.style2 {
   position: relative;
-  background-color: #3d72fc;
+  /* background-color: #3d72fc; */
   border-radius: 40px;
-  padding: 100px 60px;
+  padding: 0px 20px;
   overflow: hidden;
   z-index: 1;
 }
@@ -2560,7 +2560,7 @@ body {
   position: absolute;
   width: 450px;
   height: 450px;
-  border: 2px dashed rgba(255, 255, 255, 0.3);
+  border: 2px dashed #1a1f2b !important;
   border-radius: 50%;
   z-index: 1;
   animation: rotate 30s linear infinite;
@@ -2568,7 +2568,7 @@ body {
 
 .process-card {
   position: absolute;
-  background: #fff;
+  background: #3779b9;
   padding: 15px 25px;
   border-radius: 12px;
   display: flex;
@@ -2591,7 +2591,7 @@ body {
   transform: translateY(-50%);
   width: 32px;
   height: 32px;
-  background: #3d72fc;
+  background: #1a1f2b;
   color: #fff;
   border-radius: 50%;
   display: flex;
@@ -2611,7 +2611,7 @@ body {
 .process-card .text {
   font-size: 15px;
   font-weight: 700;
-  color: #1a1f2b;
+  color: #fff;
   line-height: 1.1;
   letter-spacing: -0.01em;
 }

src/app/services/page.tsx

@@ -46,8 +46,8 @@ export default function Home3() {
                 {/* <ServiceSection /> */}
                 <ServiceSection2 />
                 <WorkProcessSection />
-                <FeaturesSection2 />
                 <AboutService />
+                <FeaturesSection2 />
                 {/* <ProjectsSection /> */}
                 {/* <BrandsSection /> */}
                 {/* <FaqSection /> */}

src/components/careers/ContactSection.tsx

@@ -107,7 +107,7 @@ const ContactSection = () => {
                                             <input type="email" name="email" placeholder="Email address" required />
                                         </div>
                                         <div className="form-one__control form-one__control--full">
-                                            <textarea name="message" placeholder="Message" required></textarea>
+                                            <textarea name="message" placeholder="Message" rows={6} required></textarea>
                                         </div>
                                         <div className="form-one__control form-one__control--full">
                                             <button type="submit" className="tolak-btn">

src/components/careers/FaqVideoSection.tsx

@@ -1,177 +1,208 @@
 "use client";
 
-import React, { useState, useEffect, useRef } from "react";
+import React from "react";
-import Image from "next/image";
 
 const FaqVideoSection = () => {
-    const [activeAccordion, setActiveAccordion] = useState<number | null>(1);
-    const sectionRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        const observer = new IntersectionObserver(
-            (entries) => {
-                entries.forEach((entry) => {
-                    if (entry.isIntersecting) {
-                        const elements = entry.target.querySelectorAll(".wow");
-                        elements.forEach((el) => {
-                            const htmlEl = el as HTMLElement;
-                            const delay = htmlEl.dataset.wowDelay || "0ms";
-                            setTimeout(() => {
-                                htmlEl.classList.add("animated");
-
-                                if (htmlEl.classList.contains("fadeInLeft")) {
-                                    htmlEl.classList.add("fadeInLeft");
-                                } else if (htmlEl.classList.contains("fadeInRight")) {
-                                    htmlEl.classList.add("fadeInRight");
-                                } else {
-                                    htmlEl.classList.add("fadeInUp");
-                                }
-
-                                htmlEl.style.visibility = "visible";
-                            }, parseInt(delay));
-                        });
-                        observer.unobserve(entry.target);
-                    }
-                });
-            },
-            { threshold: 0.1 }
-        );
-
-        if (sectionRef.current) {
-            observer.observe(sectionRef.current);
-        }
-
-        return () => observer.disconnect();
-    }, []);
-
-    const toggleAccordion = (index: number) => {
-        setActiveAccordion(activeAccordion === index ? null : index);
-    };
-
-    const faqItems = [
-        {
-            id: 0,
-            title: "Maecenas facilisis erat id odio",
-            content: "Solution the connection, we create business marketing platforms business Solution as slightly believable now.",
-        },
-        {
-            id: 1,
-            title: "Digital data facilisis erat id solution business",
-            content: "Solution the connection, we create business marketing platforms business Solution as slightly believable now.",
-        },
-        {
-            id: 2,
-            title: "We adapt our delivery to the way your solution",
-            content: "Solution the connection, we create business marketing platforms business Solution as slightly believable now.",
-        },
-        {
-            id: 3,
-            title: "Best service facilisis erat id solution business",
-            content: "Solution the connection, we create business marketing platforms business Solution as slightly believable now.",
-        },
-    ];
-
     return (
         <>
-            <section ref={sectionRef} className="faq-two">
+            <section className="faq-two">
                 <div
                     className="faq-two__bg jarallax"
                     style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/faq-bg-2.jpg)" }}
                 ></div>
                 <div className="container">
-                    <div className="row">
+                    <div className="row justify-content-center">
-                        <div className="col-lg-6 wow fadeInLeft" data-wow-delay="0ms" style={{ visibility: "hidden" }}>
+                        <div className="col-lg-8 wow fadeInUp" data-wow-delay="0ms">
-                            <div className="faq-two__content">
+                            <div className="contact-form-card">
-                                <h2 className="faq-two__content__title">
+                                <div className="section-title-wrapper text-center mb-40">
-                                    Frequently Asked Questions For It&apos;s a Section on Documents
+                                    <span className="section-subtitle">Get In Touch</span>
-                                </h2>
+                                    <h2 className="section-heading text-white">Have a Project in Mind?</h2>
-                                <p className="faq-two__content__text">
+                                </div>
-                                    Business tailored design, management &amp; support services Business
+                                <form className="faq-contact-form">
-                                    business agency elit, sed do eiusmod tempor &nbsp;majority have
+                                    <div className="row">
-                                    in some we form, by injected humour solution.
+                                        <div className="col-md-6 mb-20">
-                                </p>
+                                            <input type="text" placeholder="Your Name" required />
-                                <ul className="faq-two__content__list">
-                                    <li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}>
-                                        <div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#3779b9", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div>
-                                        You solution business will be fully satisfied you are under.
-                                    </li>
-                                    <li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}>
-                                        <div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#3779b9", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div>
-                                        You solution business will be fully satisfied you are under.
-                                    </li>
-                                    <li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}>
-                                        <div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#3779b9", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div>
-                                        You solution business will be fully satisfied you are under.
-                                    </li>
-                                    <li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}>
-                                        <div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#3779b9", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div>
-                                        You solution business will be fully satisfied you are under.
-                                    </li>
-                                    <li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700" }}>
-                                        <div style={{ width: "40px", height: "40px", borderRadius: "50%", border: "2px solid #fb8459", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "20px", color: "#fb8459" }}>?</div>
-                                        <span>Where Common Question are Answere</span>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div className="col-lg-6 wow fadeInRight" data-wow-delay="200ms" style={{ visibility: "hidden" }}>
-                            <div className="faq-two__accordion tolak-accrodion">
-                                {faqItems.map((item) => (
-                                    <div
-                                        key={item.id}
-                                        className={`accrodion ${activeAccordion === item.id ? "active" : ""}`}
-                                    >
-                                        <div
-                                            className="accrodion-title"
-                                            onClick={() => toggleAccordion(item.id)}
-                                        >
-                                            <h4>
-                                                <i className="fa fa-check-circle" style={{ color: activeAccordion === item.id ? "#fff" : "#fb8459" }}></i>
-                                                {item.title}
-                                                <span className="accrodion-title__icon"></span>
-                                            </h4>
                                         </div>
-                                        <div className="accrodion-content">
+                                        <div className="col-md-6 mb-20">
-                                            <div className="inner">
+                                            <input type="email" placeholder="Email Address" required />
-                                                <div className="inner__image">
+                                        </div>
-                                                    <img
+                                        <div className="col-md-6 mb-20">
-                                                        src="https://tolaklaravel.bracketweb.com/assets/images/resources/accordian-logo.png"
+                                            <input type="tel" placeholder="Phone Number" required />
-                                                        alt="Logo"
+                                        </div>
-                                                        width={50}
+                                        <div className="col-md-6 mb-20">
-                                                        height={50}
+                                            <input type="text" placeholder="Subject" required />
-                                                    />
+                                        </div>
-                                                </div>
+                                        <div className="col-md-12 mb-20">
-                                                <p>{item.content}</p>
+                                            <textarea placeholder="Write a Message" rows={7} required></textarea>
-                                            </div>
+                                        </div>
+                                        <div className="col-md-12 text-center">
+                                            <button type="submit" className="primary-btn-1">
+                                                SEND A MESSAGE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
+                                            </button>
                                         </div>
                                     </div>
-                                ))}
+                                </form>
                             </div>
                         </div>
                     </div>
                 </div>
             </section>
 
-            <section className="video-three wow fadeInUp" data-wow-delay="400ms">
+            <section className="video-three wow fadeInUp" data-wow-delay="200ms">
                 <div className="container">
                     <div
                         className="video-three__inner"
-                        style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/video-bg-3.jpg)" }}
+                        style={{
+                            backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/video-bg-3.jpg)",
+                            backgroundPosition: 'center',
+                            backgroundSize: 'cover'
+                        }}
                     >
-                        <div className="video-three__btn">
+                        <div className="video-content-overlay">
-                            <div className="video-three__btn__logo-outer"></div>
+                            <h2 className="consultation-title">Take the First Step Towards Digital Excellence.</h2>
-                            <div className="video-three__btn__logo-inner">
+                            <p className="consultation-text">Book Your Personalized Consultation with Our Experts Today.</p>
-                                <img
+                            <a href="/contact" className="primary-btn-1-link mt-30">
-                                    src="https://tolaklaravel.bracketweb.com/assets/images/resources/accordian-logo.png"
+                                Schedule Consultation &nbsp; | <i className="fa-solid fa-calendar-check"></i>
-                                    alt="Rotating Logo"
+                            </a>
-                                    width={140}
-                                    height={140}
-                                />
-                            </div>
                         </div>
                     </div>
                 </div>
             </section>
+
+            <style jsx>{`
+                .faq-two {
+                    padding: 120px 0 200px;
+                    position: relative;
+                    background-color: #0f172a;
+                    clip-path: none !important;
+                }
+                .faq-two__bg {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background-attachment: fixed;
+                    background-size: cover;
+                    opacity: 0.15;
+                }
+                .contact-form-card {
+                    background: rgba(26, 31, 43, 0.8);
+                    backdrop-filter: blur(10px);
+                    padding: 60px;
+                    border-radius: 30px;
+                    border: 1px solid rgba(255, 255, 255, 0.05);
+                    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
+                    margin-bottom: 20px;
+                }
+                .section-subtitle {
+                    color: #3779b9;
+                    text-transform: uppercase;
+                    letter-spacing: 2px;
+                    font-weight: 700;
+                    font-size: 14px;
+                    display: block;
+                    margin-bottom: 15px;
+                }
+                .section-heading {
+                    font-size: 42px;
+                    font-weight: 800;
+                    margin-bottom: 0;
+                }
+                .faq-contact-form input,
+                .faq-contact-form textarea {
+                    width: 100%;
+                    background: rgba(255, 255, 255, 0.03);
+                    border: 1px solid rgba(255, 255, 255, 0.1);
+                    padding: 18px 25px;
+                    border-radius: 12px;
+                    color: #fff;
+                    outline: none;
+                    transition: all 0.3s ease;
+                }
+                .faq-contact-form textarea {
+                    min-height: 220px;
+                    resize: vertical;
+                }
+                .faq-contact-form input:focus,
+                .faq-contact-form textarea:focus {
+                    background: rgba(255, 255, 255, 0.05);
+                    border-color: #3779b9;
+                    box-shadow: 0 0 15px rgba(55, 121, 185, 0.2);
+                }
+                .primary-btn-1, .primary-btn-1-link {
+                    background: #3779b9;
+                    color: #fff;
+                    padding: 18px 45px;
+                    border-radius: 50px;
+                    font-weight: 700;
+                    border: none;
+                    cursor: pointer;
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 10px;
+                    transition: all 0.3s ease;
+                    text-transform: uppercase;
+                    font-size: 14px;
+                    letter-spacing: 1px;
+                    margin-top: 25px;
+                }
+                .primary-btn-1:hover, .primary-btn-1-link:hover {
+                    transform: translateY(-3px);
+                    box-shadow: 0 15px 30px rgba(55, 121, 185, 0.4);
+                    color: #fff;
+                }
+                .video-three__inner {
+                    border-radius: 30px;
+                    overflow: hidden;
+                    min-height: 500px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: relative;
+                }
+                .video-three__inner::before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    background: rgba(15, 23, 42, 0.6);
+                }
+                .video-content-overlay {
+                    position: relative;
+                    z-index: 1;
+                    text-align: center;
+                    max-width: 800px;
+                    padding: 0 20px;
+                }
+                .consultation-title {
+                    font-size: 48px;
+                    color: #fff;
+                    font-weight: 800;
+                    line-height: 1.2;
+                    margin-bottom: 20px;
+                }
+                .consultation-text {
+                    font-size: 20px;
+                    color: rgba(255, 255, 255, 0.8);
+                    margin-bottom: 0;
+                }
+                @media (max-width: 991px) {
+                    .consultation-title {
+                        font-size: 36px;
+                    }
+                    .contact-form-card {
+                        padding: 40px 30px;
+                    }
+                }
+                @media (max-width: 767px) {
+                    .consultation-title {
+                        font-size: 30px;
+                    }
+                }
+            `}</style>
         </>
     );
 };

src/components/careers/ServiceSection.tsx

@@ -90,10 +90,10 @@ const ServiceSection2 = () => {
 
     return (
         <section ref={sectionRef} className="service-three">
-            <div
+            {/* <div
                 className="service-three__bg"
                 style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/service-bg-3.jpg)" }}
-            ></div>
+            ></div> */}
             <div
                 className="service-three__shape"
                 style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/shapes/service-shape-3.png)" }}

src/components/careers/WorkProcessSection.tsx

@@ -49,7 +49,7 @@ const WorkProcessSection2 = () => {
                 <a href="#">
                     <img
                         className="rotate360"
-                        src="https://tolaklaravel.bracketweb.com/assets/images/shapes/workProcessShape2_3.png"
+                        src="/assets/imgs/shapes/shape-10.png"
                         alt="shape"
                     />
                 </a>
@@ -57,10 +57,10 @@ const WorkProcessSection2 = () => {
             <div className="container">
                 <div className="work-process-wrapper style2">
                     <div className="shape1 d-none d-xxl-block">
-                        <img src="https://tolaklaravel.bracketweb.com/assets/images/shapes/workProcessShape2_1.png" alt="shape" />
+                        <img src="/assets/imgs/shapes/shape-10.png" />
                     </div>
                     <div className="shape2 d-none d-xxl-block">
-                        <img src="https://tolaklaravel.bracketweb.com/assets/images/shapes/workProcessShape2_2.png" alt="shape" />
+                        <img src="/assets/imgs/shapes/shape-10.png" />
                     </div>
 
                     <div className="row gy-5 gx-70 align-items-center">
@@ -68,23 +68,15 @@ const WorkProcessSection2 = () => {
                             <div className="work-process-content">
                                 <div className="section-title">
                                     <div className="subtitle text-white wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
-                                        <img src="https://tolaklaravel.bracketweb.com/assets/images/icon/arrowLeftWhite.svg" alt="icon" />
+                                        <span className="section-sub-title">How we do</span>
-                                        <span className="text-white">How we do</span>
-                                        <img src="https://tolaklaravel.bracketweb.com/assets/images/icon/arrowRightWhite.svg" alt="icon" />
                                     </div>
-                                    <h2 className="title text-white wow" data-wow-delay="0.6s" style={{ visibility: "hidden" }}>
+                                    <h2 className="title wow" data-wow-delay="0.6s" style={{ visibility: "hidden" }}>
                                         Amazing Solutions <br /> For business
                                     </h2>
-                                    <p className="text-white wow" data-wow-delay="0.5s" style={{ visibility: "hidden" }}>
+                                    <p className="wow text-dark" data-wow-delay="0.5s" style={{ visibility: "hidden" }}>
                                         We don&apos;t believe in a one-size-fit-all approach. Our services are carefully
                                         customized to suit your specific need, ensuring you to achieve your goals.
                                     </p>
-                                    <div className="btn-wrapper mt-4">
-                                        <a className="gt-btn style5" href="#">
-                                            <b>HOW IT WORKS</b>
-                                            <i className="fa-sharp fa-regular fa-arrow-right-long"></i>
-                                        </a>
-                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -93,7 +85,7 @@ const WorkProcessSection2 = () => {
                             <div className="work-process-thumb wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
                                 <div className="thumb2_1">
                                     <img
-                                        src="https://tolaklaravel.bracketweb.com/assets/images/resources/workProcessThumb1_1.png"
+                                        src="/assets/img-app/home/section8/left.webp"
                                         style={{ filter: "none", maxWidth: "100%" }}
                                         alt="thumb"
                                     />

src/components/common/InnerBanner.tsx

@@ -37,8 +37,8 @@ const InnerBanner = ({
           background-position: center;
           background-repeat: no-repeat;
           background-size: cover;
-          padding-top: 120px;
+          padding-top: 150px;
-          padding-bottom: 120px;
+          padding-bottom: 150px;
         }
 
         /* dark gradient overlay */

src/components/contact/ContactSection.tsx

@@ -61,7 +61,7 @@ const ContactSection = () => {
                                         <input type="text" placeholder="Subject" required />
                                     </div>
                                     <div className="col-md-12 mb-20">
-                                        <textarea placeholder="Write a Message" rows={4} required></textarea>
+                                        <textarea placeholder="Write a Message" rows={7} required></textarea>
                                     </div>
                                     <div className="col-md-12">
                                         <button type="submit" className="primary-btn-1 w-100">
@@ -85,7 +85,7 @@ const ContactSection = () => {
                     }
                 }
                 .section-subtitle {
-                    color: #6366f1;
+                    color: #3779b9;
                     font-weight: 600;
                     margin-bottom: 12px;
                     display: flex;
@@ -98,7 +98,7 @@ const ContactSection = () => {
                 .section-subtitle .dash {
                     width: 25px;
                     height: 2px;
-                    background: #6366f1;
+                    background: #3779b9;
                     display: inline-block;
                 }
                 .section-title {
@@ -118,13 +118,13 @@ const ContactSection = () => {
                     align-items: center;
                     justify-content: center;
                     margin-right: 25px;
-                    color: #6366f1;
+                    color: #3779b9;
                     font-size: 28px;
                     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                     box-shadow: 0 10px 25px rgba(99, 102, 241, 0.1);
                 }
                 .contact-info-item:hover .icon {
-                    background: #6366f1;
+                    background: #3779b9;
                     color: #fff;
                     transform: scale(1.1) rotate(10deg);
                     box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3);
@@ -150,10 +150,10 @@ const ContactSection = () => {
                     transition: color 0.3s ease;
                 }
                 .contact-info-item .content h6 a:hover {
-                    color: #6366f1;
+                    color: #3779b9;
                 }
                 .contact-form-wrapper {
-                    background: #f8fafc;
+                    background: #1a1f2b;
                     padding: 60px;
                     border-radius: 24px;
                     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.03);
@@ -170,13 +170,17 @@ const ContactSection = () => {
                     font-size: 15px;
                     color: #1e293b;
                 }
+                .contact-form textarea {
+                    min-height: 180px;
+                    resize: vertical;
+                }
                 .contact-form input:focus,
                 .contact-form textarea:focus {
-                    border-color: #6366f1;
+                    border-color: #3779b9;
                     box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
                 }
                 .primary-btn-1 {
-                    background: #6366f1;
+                    background: #3779b9;
                     color: #fff;
                     padding: 20px 30px;
                     border: none;
@@ -191,9 +195,9 @@ const ContactSection = () => {
                     box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
                 }
                 .primary-btn-1:hover {
-                    background: #4f46e5;
+                    background: #3779b9;
                     transform: translateY(-3px);
-                    box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3);
+                    box-shadow: 0 15px 30px rgba(55, 121, 185, 0.5);
                 }
                 @media (max-width: 991px) {
                     .contact-form-wrapper {

src/components/faq/FaqPageSection.tsx

@@ -2,49 +2,6 @@
 
 import React, { useState } from "react";
 
-const faqData = [
-    {
-        category: "General Inquiries",
-        items: [
-            { id: 1, question: "What is Metatron Cube Software Solutions?", answer: "Metatron Cube is a premier IT consulting and software development agency specializing in tailored business solutions, digital transformation, and high-performance technology management." },
-            { id: 2, question: "How can I start a project with you?", answer: "Starting a project is simple. You can reach out through our contact form, email us directly, or schedule a free discovery call to discuss your business requirements." },
-            { id: 3, question: "Where is your company located?", answer: "We are headquartered in a modern tech hub, serving clients globally with our distributed team of expert developers and consultants." },
-            { id: 4, question: "Do you offer free consultations?", answer: "Yes, we provide a complimentary initial consultation to understand your needs and determine how our solutions can best drive your business growth." },
-            { id: 5, question: "What industries do you specialize in?", answer: "We have extensive experience in Fintech, Healthcare, E-commerce, Logistics, and Enterprise Resource Planning (ERP) sectors." }
-        ]
-    },
-    {
-        category: "Services & Solutions",
-        items: [
-            { id: 6, question: "What software development services do you provide?", answer: "We offer full-cycle development including web applications, mobile apps (iOS/Android), custom ERP systems, and API integrations." },
-            { id: 7, question: "Do you provide UI/UX design services?", answer: "Absolutely. Our design team focuses on creating user-centric, intuitive, and visually stunning interfaces that enhance user engagement and brand value." },
-            { id: 8, question: "Can you help migrate our legacy system to the cloud?", answer: "Yes, we specialize in cloud migration strategies for AWS, Azure, and Google Cloud, ensuring zero data loss and minimal downtime." },
-            { id: 9, question: "Do you offer dedicated developer teams?", answer: "Yes, we provide staff augmentation and dedicated teams that integrate seamlessly with your in-house workflow to accelerate development." },
-            { id: 10, question: "What is your typical development methodology?", answer: "We primarily follow Agile and Scrum methodologies to ensure transparency, flexibility, and rapid delivery of high-quality software." }
-        ]
-    },
-    {
-        category: "Support & Maintenance",
-        items: [
-            { id: 11, question: "How do you handle software security?", answer: "Security is built into our dev process. We perform regular code audits, penetration testing, and follow industry standard compliance like GDPR or HIPAA where applicable." },
-            { id: 12, question: "Do you provide 24/7 technical support?", answer: "We offer various support tiers, including 24/7 critical incident response and proactive system monitoring to ensure your operations never stop." },
-            { id: 13, question: "What happens after the project is launched?", answer: "After launch, we provide a warranty period followed by optional maintenance packages to handle updates, scaling, and feature enhancements." },
-            { id: 14, question: "How do you manage data backups?", answer: "We implement automated daily backups with redundant storage across different geographic locations to ensure data recoverability under any circumstances." },
-            { id: 15, question: "Can you provide training for our staff?", answer: "Yes, we provide comprehensive documentation and training sessions to ensure your team is fully equipped to manage the new system efficiently." }
-        ]
-    },
-    {
-        category: "Consulting & Strategy",
-        items: [
-            { id: 16, question: "How do you help businesses with digital transformation?", answer: "We analyze your current processes, identify bottlenecks, and implement digital solutions that automate workflows and improve overall efficiency." },
-            { id: 17, question: "Do you provide IT infrastructure consulting?", answer: "Yes, we advise on server architecture, network security, and infrastructure scaling to support your business's future growth." },
-            { id: 18, question: "How do you measure project success?", answer: "We define clear KPIs at the start, such as performance metrics, user adoption rates, and ROI, and track them throughout the lifecycle." },
-            { id: 19, question: "Can you help us with technology stack selection?", answer: "Our consultants evaluate your project needs to recommend the most scalable, cost-effective, and future-proof tech stack (e.g., React, Node.js, Python)." },
-            { id: 20, question: "Do you work with startups?", answer: "Yes, we love working with startups to build MVPs (Minimum Viable Products) quickly and efficiently to help them secure funding and market traction." }
-        ]
-    }
-];
-
 const FaqPageSection = () => {
     const [activeId, setActiveId] = useState<number | null>(1);
 
@@ -52,78 +9,227 @@ const FaqPageSection = () => {
         setActiveId(activeId === id ? null : id);
     };
 
+    const leftFaqs = [
+        {
+            id: 1,
+            question: "How does Metatron Cube ensure project success?",
+            answer: "We follow a rigorous discovery process, Agile development cycles, and continuous quality assurance to ensure every project meets client goals on time and within budget."
+        },
+        {
+            id: 2,
+            question: "What tech stacks do you specialize in?",
+            answer: "Our expertise spans modern frameworks including React, Next.js, Node.js, and Python, along with specialized platforms like Shopify and custom ERP solutions."
+        },
+        {
+            id: 3,
+            question: "How do you handle intellectual property (IP)?",
+            answer: "Upon project completion and final payment, full ownership and IP rights of the source code and assets are transferred to the client, as stipulated in our standard agreements."
+        },
+        {
+            id: 4,
+            question: "Can you work with our existing in-house team?",
+            answer: "Absolutely. We offer staff augmentation and dedicated team models that integrate seamlessly with your internal workflows and communication tools."
+        },
+        {
+            id: 5,
+            question: "What is your communication model during development?",
+            answer: "We use Slack, Jira, and regular Zoom check-ins to provide transparent updates. You'll have a dedicated project manager acting as your primary point of contact."
+        }
+    ];
+
+    const rightFaqs = [
+        {
+            id: 6,
+            question: "How do you maintain code quality and standards?",
+            answer: "Our developers follow strict linting rules, conduct peer code reviews, and implement automated testing to maintain a clean, scalable, and bug-free codebase."
+        },
+        {
+            id: 7,
+            question: "What are your post-launch support options?",
+            answer: "We offer tiered maintenance packages that include security patches, performance monitoring, regular backups, and feature enhancements to keep your platform running smoothly."
+        },
+        {
+            id: 8,
+            question: "How quickly can you start a new project?",
+            answer: "Depending on the scope and resource availability, we can typically kick off a project within 1 to 2 weeks after the discovery phase and agreement signing."
+        },
+        {
+            id: 9,
+            question: "Do you provide UI/UX design services?",
+            answer: "Yes, our design-led approach ensures that every project starts with a focus on user experience, creating intuitive and visually stunning interfaces."
+        },
+        {
+            id: 10,
+            question: "How do you handle security and data protection?",
+            answer: "We implement industry-standard encryption, secure API protocols, and regular security audits to protect your data and ensure compliance with global standards."
+        }
+    ];
+
+    const leftFaqs2 = [
+        {
+            id: 11,
+            question: "How does Metatron Cube ensure project success?",
+            answer: "We follow a rigorous discovery process, Agile development cycles, and continuous quality assurance to ensure every project meets client goals on time and within budget."
+        },
+        {
+            id: 12,
+            question: "What tech stacks do you specialize in?",
+            answer: "Our expertise spans modern frameworks including React, Next.js, Node.js, and Python, along with specialized platforms like Shopify and custom ERP solutions."
+        },
+        {
+            id: 13,
+            question: "How do you handle intellectual property (IP)?",
+            answer: "Upon project completion and final payment, full ownership and IP rights of the source code and assets are transferred to the client, as stipulated in our standard agreements."
+        },
+        {
+            id: 14,
+            question: "Can you work with our existing in-house team?",
+            answer: "Absolutely. We offer staff augmentation and dedicated team models that integrate seamlessly with your internal workflows and communication tools."
+        },
+        {
+            id: 15,
+            question: "What is your communication model during development?",
+            answer: "We use Slack, Jira, and regular Zoom check-ins to provide transparent updates. You'll have a dedicated project manager acting as your primary point of contact."
+        }
+    ];
+
+    const rightFaqs2 = [
+        {
+            id: 16,
+            question: "How do you maintain code quality and standards?",
+            answer: "Our developers follow strict linting rules, conduct peer code reviews, and implement automated testing to maintain a clean, scalable, and bug-free codebase."
+        },
+        {
+            id: 17,
+            question: "What are your post-launch support options?",
+            answer: "We offer tiered maintenance packages that include security patches, performance monitoring, regular backups, and feature enhancements to keep your platform running smoothly."
+        },
+        {
+            id: 18,
+            question: "How quickly can you start a new project?",
+            answer: "Depending on the scope and resource availability, we can typically kick off a project within 1 to 2 weeks after the discovery phase and agreement signing."
+        },
+        {
+            id: 19,
+            question: "Do you provide UI/UX design services?",
+            answer: "Yes, our design-led approach ensures that every project starts with a focus on user experience, creating intuitive and visually stunning interfaces."
+        },
+        {
+            id: 20,
+            question: "How do you handle security and data protection?",
+            answer: "We implement industry-standard encryption, secure API protocols, and regular security audits to protect your data and ensure compliance with global standards."
+        }
+    ];
+
     return (
-        <section className="faq-page-section section-space">
+        <section className="faq-page-section">
             <div className="container">
                 <div className="row justify-content-center">
                     <div className="col-lg-8">
                         <div className="section-title-wrapper text-center mb-60">
                             <span className="section-subtitle">
-                                <i className="fa-solid fa-circle-question"></i> HELP KNOWLEDGE BASE
+                                <img src="/assets/img-app/fav-icon.webp" alt="" className="subtitle-icon" /> FAQ
                             </span>
                             <h2 className="section-title">Frequently Asked Questions</h2>
                             <p className="section-desc">
-                                Find answers to common questions about our services, processes, and how we can help your business thrive in the digital age.
+                                Transparent answers to the most common questions about our agency, development process, and partnership models.
                             </p>
                         </div>
                     </div>
                 </div>
 
-                <div className="faq-content-wrapper">
+                {/* Section 1: 3-Column with Image */}
-                    {faqData.map((category, catIndex) => (
+                <div className="row align-items-center mb-40">
-                        <div key={catIndex} className="faq-category-block mb-50">
+                    {/* Left Side FAQs */}
-                            <h3 className="category-header">
+                    <div className="col-lg-4 col-md-12">
-                                <span className="category-count">0{catIndex + 1}</span> {category.category}
+                        <div className="accordion-custom">
-                            </h3>
+                            {leftFaqs.map((faq) => (
-                            <div className="accordion-custom">
+                                <div key={faq.id} className={`faq-item ${activeId === faq.id ? "active" : ""}`}>
-                                {category.items.map((faq) => (
+                                    <button className="faq-question" onClick={() => toggleAccordion(faq.id)}>
-                                    <div
+                                        <span className="question-text">{faq.question}</span>
-                                        key={faq.id}
+                                        <span className="faq-icon">
-                                        className={`faq-item ${activeId === faq.id ? "active" : ""}`}
+                                            <i className="fa-solid fa-chevron-down"></i>
-                                    >
+                                        </span>
-                                        <button
+                                    </button>
-                                            className="faq-question"
+                                    <div className={`faq-answer ${activeId === faq.id ? "show" : ""}`}>
-                                            onClick={() => toggleAccordion(faq.id)}
+                                        <div className="answer-inner">{faq.answer}</div>
-                                            aria-expanded={activeId === faq.id}
-                                        >
-                                            <span className="question-text">{faq.question}</span>
-                                            <span className="faq-icon">
-                                                {activeId === faq.id ? <i className="fa-solid fa-minus"></i> : <i className="fa-solid fa-plus"></i>}
-                                            </span>
-                                        </button>
-                                        <div className={`faq-answer ${activeId === faq.id ? "show" : ""}`}>
-                                            <div className="answer-inner">
-                                                {faq.answer}
-                                            </div>
-                                        </div>
                                     </div>
-                                ))}
+                                </div>
-                            </div>
+                            ))}
                         </div>
-                    ))}
+                    </div>
+
+                    {/* Center Image */}
+                    <div className="col-lg-4 col-md-12 text-center">
+                        <div className="faq-center-image-wrap">
+                            <img src="/assets/img-app/home/section9/faq.webp" alt="FAQ Center" className="main-faq-img" />
+                        </div>
+                    </div>
+
+                    {/* Right Side FAQs */}
+                    <div className="col-lg-4 col-md-12">
+                        <div className="accordion-custom">
+                            {rightFaqs.map((faq) => (
+                                <div key={faq.id} className={`faq-item ${activeId === faq.id ? "active" : ""}`}>
+                                    <button className="faq-question" onClick={() => toggleAccordion(faq.id)}>
+                                        <span className="question-text">{faq.question}</span>
+                                        <span className="faq-icon">
+                                            <i className="fa-solid fa-chevron-down"></i>
+                                        </span>
+                                    </button>
+                                    <div className={`faq-answer ${activeId === faq.id ? "show" : ""}`}>
+                                        <div className="answer-inner">{faq.answer}</div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
                 </div>
 
-                <div className="faq-cta text-center mt-80">
+                {/* Section 2: 2-Column Standard Layout */}
-                    <div className="cta-box">
+                <div className="row section-space-top">
-                        <h3>Still have questions?</h3>
+                    <div className="col-lg-6 col-md-12">
-                        <p>If you couldn't find the answer you were looking for, feel free to contact us. Our team is ready to help you!</p>
+                        <div className="accordion-custom">
-                        <a href="/contact" className="primary-btn-1 mt-20">
+                            {leftFaqs2.map((faq) => (
-                            Contact Support &nbsp; | <i className="fa-solid fa-arrow-right"></i>
+                                <div key={faq.id} className={`faq-item ${activeId === faq.id ? "active" : ""}`}>
-                        </a>
+                                    <button className="faq-question" onClick={() => toggleAccordion(faq.id)}>
+                                        <span className="question-text">{faq.question}</span>
+                                        <span className="faq-icon">
+                                            <i className="fa-solid fa-chevron-down"></i>
+                                        </span>
+                                    </button>
+                                    <div className={`faq-answer ${activeId === faq.id ? "show" : ""}`}>
+                                        <div className="answer-inner">{faq.answer}</div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                    <div className="col-lg-6 col-md-12">
+                        <div className="accordion-custom">
+                            {rightFaqs2.map((faq) => (
+                                <div key={faq.id} className={`faq-item ${activeId === faq.id ? "active" : ""}`}>
+                                    <button className="faq-question" onClick={() => toggleAccordion(faq.id)}>
+                                        <span className="question-text">{faq.question}</span>
+                                        <span className="faq-icon">
+                                            <i className="fa-solid fa-chevron-down"></i>
+                                        </span>
+                                    </button>
+                                    <div className={`faq-answer ${activeId === faq.id ? "show" : ""}`}>
+                                        <div className="answer-inner">{faq.answer}</div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
                     </div>
                 </div>
             </div>
 
             <style jsx>{`
                 .faq-page-section {
-                    background: #f8fafc;
+                    background: #f8fbff;
                     padding: 80px 0;
                 }
-                @media (max-width: 767px) {
-                    .faq-page-section {
-                        padding: 60px 0;
-                    }
-                }
                 .section-subtitle {
                     color: #3779b9;
                     font-weight: 700;
@@ -133,60 +239,42 @@ const FaqPageSection = () => {
                     gap: 10px;
                     text-transform: uppercase;
                     letter-spacing: 1px;
+                    font-size: 14px;
+                }
+                .subtitle-icon {
+                    width: 20px;
+                    height: 20px;
+                    object-fit: contain;
                 }
                 .section-title {
                     font-size: 48px;
                     font-weight: 800;
-                    color: #0f172a;
+                    color: #1a1f2b;
                     margin-bottom: 20px;
                 }
                 .section-desc {
                     color: #64748b;
-                    max-width: 700px;
+                    max-width: 600px;
                     margin: 0 auto;
                     font-size: 16px;
-                }
+                    margin-bottom: 40px;
-                .faq-content-wrapper {
-                    max-width: 900px;
-                    margin: 0 auto;
-                }
-                .category-header {
-                    font-size: 24px;
-                    font-weight: 700;
-                    color: #0f172a;
-                    margin-bottom: 25px;
-                    display: flex;
-                    align-items: center;
-                    gap: 15px;
-                    padding-bottom: 15px;
-                    border-bottom: 2px solid #e2e8f0;
-                }
-                .category-count {
-                    color: #3779b9;
-                    font-size: 14px;
-                    background: rgba(60, 114, 252, 0.1);
-                    padding: 4px 10px;
-                    border-radius: 4px;
-                }
-                .accordion-custom {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 12px;
                 }
                 .faq-item {
                     background: #fff;
                     border-radius: 12px;
                     border: 1px solid #e2e8f0;
+                    margin-bottom: 15px;
                     overflow: hidden;
                     transition: all 0.3s ease;
+                    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
                 }
                 .faq-item.active {
                     border-color: #3779b9;
-                    box-shadow: 0 10px 30px rgba(60, 114, 252, 0.08);
+                    box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
                 }
                 .faq-question {
                     width: 100%;
-                    padding: 22px 30px;
+                    padding: 18px 25px;
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
@@ -197,26 +285,24 @@ const FaqPageSection = () => {
                     outline: none;
                 }
                 .question-text {
-                    font-size: 18px;
+                    font-size: 15px;
                     font-weight: 700;
-                    color: #1e293b;
+                    color: #1a1f2b;
-                    transition: all 0.3s ease;
+                    line-height: 1.4;
-                }
-                .faq-item:hover .question-text {
-                    color: #3779b9;
                 }
                 .faq-item.active .question-text {
                     color: #3779b9;
                 }
                 .faq-icon {
-                    width: 32px;
+                    width: 28px;
-                    height: 32px;
+                    height: 28px;
+                    min-width: 28px;
                     background: #f1f5f9;
                     border-radius: 50%;
                     display: flex;
                     align-items: center;
                     justify-content: center;
-                    font-size: 12px;
+                    font-size: 11px;
                     color: #64748b;
                     transition: all 0.3s ease;
                 }
@@ -231,34 +317,39 @@ const FaqPageSection = () => {
                     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                 }
                 .faq-answer.show {
-                    max-height: 500px;
+                    max-height: 300px;
                 }
                 .answer-inner {
-                    padding: 0 30px 25px;
+                    padding: 0 25px 20px;
                     color: #64748b;
-                    line-height: 1.7;
+                    line-height: 1.6;
-                    font-size: 16px;
+                    font-size: 14px;
+                }
+                .faq-center-image-wrap {
+                    padding: 0 15px;
+                }
+                .main-faq-img {
+                    width: 100%;
+                    max-width: 400px;
+                    border-radius: 20px;
+                    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
                 }
                 @media (max-width: 991px) {
+                    .col-lg-4 {
+                        margin-bottom: 30px;
+                    }
+                    .faq-center-image-wrap {
+                        order: -1;
+                        margin-bottom: 40px;
+                    }
                     .section-title {
                         font-size: 36px;
                     }
-                    .faq-question {
-                        padding: 18px 20px;
-                    }
-                    .question-text {
-                        font-size: 16px;
-                        padding-right: 15px;
-                    }
-                }
-                .faq-cta {
-                    padding-top: 60px;
-                    border-top: 1px solid #e2e8f0;
                 }
                 .cta-box h3 {
                     font-size: 32px;
                     font-weight: 800;
-                    color: #0f172a;
+                    color: #1a1f2b;
                     margin-bottom: 15px;
                 }
                 .cta-box p {

src/components/home/home-1/BlogSection.tsx

@@ -1,29 +1,41 @@
 import { blogs } from "@/utils/data";
+import Link from "next/link";
 
-const BlogSection = () => (
+const BlogSection = ({ hideHeader = false }: { hideHeader?: boolean }) => (
     <section className="blog-section-one section-space">
         <div className="small-container">
-            <div className="title-box mb-40 wow fadeInLeft" data-wow-delay=".5s">
+            {!hideHeader && (
-                <span className="section-sub-title">LATEST blog</span>
+                <div className="title-box mb-40 wow fadeInLeft" data-wow-delay=".5s">
-                <h3 className="section-title mt-10">Latest Blog Insights</h3>
+                    <span className="section-sub-title">LATEST blog</span>
-            </div>
+                    <h3 className="section-title mt-10">Latest Blog Insights</h3>
+                </div>
+            )}
             <div className="row g-4">
                 {blogs.slice(0, 3).map((blog, index) => (
                     <div key={blog.id} className="col-xxl-4 col-xl-4 col-lg-6">
-                        <div className="blog-style-one">
+                        <div className="blog-style-one relative overflow-hidden">
-                            <a className="blog-image w-img" href="#"><img src={blog.image} alt="" /></a>
+                            <Link className="blog-image w-img block relative" href={`/blog/${blog.slug}`}>
+                                <img src={blog.image} alt={blog.title} />
+                                <span className="blog-category-tag">{blog.category}</span>
+                            </Link>
                             <div className="blog-content">
                                 <div className="post-meta">
-                                    <span className="p-relative"><a href="#"><i className="fa-solid fa-user"></i> By {blog.authorName}</a></span>
+                                    <span className="p-relative">
-                                    <span className="p-relative"><a href="#"><i className="fa-solid fa-calendar-days"></i>{blog.date}</a></span>
+                                        <i className="fa-solid fa-user"></i> By Admin
+                                    </span>
+                                    <span className="p-relative">
+                                        <i className="fa-solid fa-calendar-days"></i> {blog.date}
+                                    </span>
                                 </div>
                                 <hr />
-                                <h5 className="blog-title mb-30"><a href="#">{blog.title}</a></h5>
+                                <h5 className="blog-title mb-30">
+                                    <Link href={`/blog/${blog.slug}`}>{blog.title}</Link>
+                                </h5>
                                 <div className="blog-link">
-                                    <a className="primary-btn-5 btn-hover" href="#">
+                                    <Link className="primary-btn-5 btn-hover" href={`/blog/${blog.slug}`}>
                                         Read MORE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                                         <span className="btn-hover-span"></span>
-                                    </a>
+                                    </Link>
                                 </div>
                             </div>
                         </div>
@@ -31,6 +43,60 @@ const BlogSection = () => (
                 ))}
             </div>
         </div>
+
+        <style jsx>{`
+            .relative { position: relative; }
+            .blog-image { position: relative; display: block; overflow: hidden; border-radius: 20px 20px 0 0; }
+            .blog-image img { width: 100%; border-radius: 20px 20px 0 0; }
+            .blog-category-tag {
+                position: absolute;
+                bottom: 0px;
+                right: 0px;
+                background: #3779b9;
+                color: #fff;
+                padding: 10px 20px;
+                font-size: 13px;
+                font-weight: 700;
+                text-transform: uppercase;
+                z-index: 2;
+                border-radius: 12px 0 0 0;
+                letter-spacing: 0.5px;
+            }
+            .blog-style-one {
+                border-left: 1px solid #e2e8f0;
+                border-right: 1px solid #e2e8f0;
+                border-bottom: 1px solid #e2e8f0;
+                border-radius: 20px 20px 15px 15px;
+                background: #fff;
+                transition: all 0.3s ease;
+            }
+            .blog-style-one:hover {
+                border-color: #3779b9;
+                box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
+            }
+            .blog-content {
+                padding: 30px 25px;
+            }
+            .blog-title {
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                line-height: 1.5;
+                height: 3em;
+            }
+            .post-meta span {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+                margin-right: 15px;
+                font-size: 14px;
+                color: #64748b;
+            }
+            .post-meta i {
+                color: #3779b9;
+            }
+        `}</style>
     </section>
 );
 

src/components/home/home-1/FeaturesSection.tsx

@@ -53,7 +53,7 @@ const ArrowIcon = () => (
 
 const features: FeatureItem[] = [
     {
-        title: "Versatile Latest Technology",
+        title: "The future Latest Technology",
         desc: "There are many variations of passages of Lorem Ipsum avalab but the majority have suffered alteration in some having fun",
         icon: <IdeaIcon />,
         image: "/assets/img-app/about/about-img2.png",

src/components/home/home-1/TestimonialsSection.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { testimonialSlides } from "@/utils/data";
 
 const TestimonialsSection = () => (
-    <section className="testimonials-two-section fix">
+    <section className="testimonials-two-section fix section-space pt-0">
         <div className="container-fluid g-0">
             <div className="row g-0">
                 <div className="col-xxl-4 col-xl-4 col-lg-12">

src/components/home/home-2/Blog2Section.tsx

@@ -1,4 +1,5 @@
 import { blogs2 } from "@/utils/data";
+import Link from "next/link";
 
 const Blog2Section = () => (
     <section className="blog-two-section section-space">
@@ -8,55 +9,103 @@ const Blog2Section = () => (
                     <span className="section-sub-title">BLOG & NEWS</span>
                     <h3 className="section-title mt-10">Explore Blogs And News</h3>
                 </div>
-                <a className="primary-btn-1 btn-hover" href="#">
+                <Link className="primary-btn-1 btn-hover" href="/blog">
                     view all &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                     <span className="btn-hover-span"></span>
-                </a>
+                </Link>
             </div>
             <div className="row g-4">
                 <div className="col-xxl-8 col-xl-8 col-lg-12">
                     {blogs2[0] && (
-                        <div key={blogs2[0].id} className="blog-style-two">
+                        <div key={blogs2[0].id} className="blog-style-two relative overflow-hidden">
-                            <a className="blog-image w-img" href="#">
+                            <Link className="blog-image w-img relative block" href={`/blog/${blogs2[0].slug}`}>
                                 <img src={blogs2[0].image} alt="" />
-                            </a>
+                                <span className="blog-category-tag">{blogs2[0].category}</span>
+                            </Link>
                             <div className="blog-content-area">
                                 <div className="post-meta">
-                                    <span className="p-relative"><a href="#"><i className="fa-solid fa-user"></i> By Admin</a></span>
+                                    <span className="p-relative"><i className="fa-solid fa-user"></i> By Admin</span>
-                                    <span className="p-relative"><a href="#"><i className="fa-solid fa-calendar-days"></i>{blogs2[0].date}</a></span>
+                                    <span className="p-relative"><i className="fa-solid fa-calendar-days"></i> {blogs2[0].date}</span>
                                 </div>
                                 <hr />
-                                <h5 className="blog-title"><a href="#">{blogs2[0].title}</a></h5>
+                                <h5 className="blog-title">
-                                <p className="blog-text">Lorem ipsum dolor sit amet consectetur the adipiscing elit Morbi is sodales consequat</p>
+                                    <Link href={`/blog/${blogs2[0].slug}`}>{blogs2[0].title}</Link>
-                                <a className="primary-btn-5 btn-hover" href="#">
+                                </h5>
+                                <p className="blog-text">Stay updated with the latest trends and insights from our team of experts in the industry.</p>
+                                <Link className="primary-btn-5 btn-hover" href={`/blog/${blogs2[0].slug}`}>
                                     Read MORE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                                     <span className="btn-hover-span"></span>
-                                </a>
+                                </Link>
                             </div>
                         </div>
                     )}
                 </div>
                 <div className="col-xxl-4 col-xl-4 col-lg-12">
                     {blogs2.slice(1, 2).map((blog) => (
-                        <div key={blog.id} className="blog-style-two d-block">
+                        <div key={blog.id} className="blog-style-two d-block relative overflow-hidden">
                             <div className="blog-content-area">
                                 <div className="post-meta">
-                                    <span className="p-relative"><a href="#"><i className="fa-solid fa-user"></i> By Admin</a></span>
+                                    <span className="p-relative"><i className="fa-solid fa-user"></i> By Admin</span>
-                                    <span className="p-relative"><a href="#"><i className="fa-solid fa-calendar-days"></i>{blog.date}</a></span>
+                                    <span className="p-relative"><i className="fa-solid fa-calendar-days"></i> {blog.date}</span>
                                 </div>
                                 <hr />
-                                <h5 className="blog-title"><a href="#">{blog.title}</a></h5>
+                                <h5 className="blog-title">
-                                <p className="blog-text">Lorem ipsum dolor sit amet consectetur the adipiscing elit Morbi is sodales consequat</p>
+                                    <Link href={`/blog/${blog.slug}`}>{blog.title}</Link>
-                                <a className="primary-btn-5 btn-hover" href="#">
+                                </h5>
+                                <p className="blog-text">Discover more about how we drive digital excellence.</p>
+                                <Link className="primary-btn-5 btn-hover" href={`/blog/${blog.slug}`}>
                                     Read MORE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                                     <span className="btn-hover-span"></span>
-                                </a>
+                                </Link>
                             </div>
                         </div>
                     ))}
                 </div>
             </div>
         </div>
+
+        <style jsx>{`
+            .relative { position: relative; }
+            .blog-image { position: relative; display: block; overflow: hidden; border-radius: 20px 20px 0 0; }
+            .blog-image img { width: 100%; border-radius: 20px 20px 0 0; }
+            .blog-category-tag {
+                position: absolute;
+                bottom: 0px;
+                right: 0px;
+                background: #3779b9;
+                color: #fff;
+                padding: 10px 20px;
+                font-size: 11px;
+                font-weight: 700;
+                text-transform: uppercase;
+                z-index: 2;
+                border-radius: 12px 0 0 0;
+            }
+            .blog-style-two {
+                border-left: 1px solid #e2e8f0;
+                border-right: 1px solid #e2e8f0;
+                border-bottom: 1px solid #e2e8f0;
+                border-radius: 20px 20px 15px 15px;
+                background: #fff;
+                transition: all 0.3s ease;
+                height: 100%;
+            }
+            .blog-style-two:hover {
+                border-color: #3779b9;
+                box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
+            }
+            .blog-content-area {
+                padding: 30px 25px;
+            }
+            .blog-title {
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                line-height: 1.5;
+                height: 3em;
+            }
+        `}</style>
     </section>
 );
 

src/components/home/home-2/IconCounterSection.tsx

@@ -1,6 +1,6 @@
 const IconCounterSection = () => {
     return (
-        <section className="icon-box-counter-section section-space pt-0">
+        <section className="icon-box-counter-section section-space">
             <div className="small-container">
                 <div className="row g-4">
                     {[

src/components/home/home-2/WorkProcessSection.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 const WorkProcessSection = () => (
-    <section className="work-process-section section-space p-relative" style={{ backgroundImage: "url(/assets/imgs/bg/process-bg.png)", margin:'80px 0px' }}>
+    <section className="work-process-section section-space p-relative" style={{ backgroundImage: "url(/assets/imgs/bg/process-bg.png)" }}>
         <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/bg/line.png)" }}></div>
         <div className="small-container">
             <div className="title-box text-center mb-60 wow fadeInLeft" data-wow-delay=".5s">

src/components/home/home-3/BlogSection.tsx

@@ -1,4 +1,5 @@
 import { blogs } from "@/utils/data";
+import Link from "next/link";
 
 const BlogSection = () => (
     <section className="blog-section-one section-space">
@@ -8,30 +9,37 @@ const BlogSection = () => (
                     <span className="section-sub-title no-border">Blog & news</span>
                     <h3 className="section-title mt-10">Explore Blogs and News</h3>
                 </div>
-                <a className="primary-btn-1 btn-hover" href="#">
+                <Link className="primary-btn-1 btn-hover" href="/blog">
                     view all &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                     <span className="btn-hover-span"></span>
-                </a>
+                </Link>
             </div>
             <div className="row g-4">
                 {blogs.slice(0, 3).map((blog, index) => (
                     <div key={blog.id} className="col-xxl-4 col-xl-4 col-lg-6">
-                        <div className="blog-style-one">
+                        <div className="blog-style-one relative overflow-hidden">
-                            <a className="blog-image w-img" href="#">
+                            <Link className="blog-image w-img block relative" href={`/blog/${blog.slug}`}>
-                                <img src={blog.image} alt="" />
+                                <img src={blog.image} alt={blog.title} />
-                            </a>
+                                <span className="blog-category-tag">{blog.category}</span>
+                            </Link>
                             <div className="blog-content">
                                 <div className="post-meta">
-                                    <span className="p-relative"><a href="#"><i className="fa-solid fa-user"></i> By {blog.authorName}</a></span>
+                                    <span className="p-relative">
-                                    <span className="p-relative"><a href="#"><i className="fa-solid fa-calendar-days"></i>{blog.date}</a></span>
+                                        <i className="fa-solid fa-user"></i> By Admin
+                                    </span>
+                                    <span className="p-relative">
+                                        <i className="fa-solid fa-calendar-days"></i> {blog.date}
+                                    </span>
                                 </div>
                                 <hr />
-                                <h5 className="blog-title mb-30"><a href="#">{blog.title}</a></h5>
+                                <h5 className="blog-title mb-30">
+                                    <Link href={`/blog/${blog.slug}`}>{blog.title}</Link>
+                                </h5>
                                 <div className="blog-link">
-                                    <a className="primary-btn-1 btn-hover" href="#">
+                                    <Link className="primary-btn-1 btn-hover" href={`/blog/${blog.slug}`}>
                                         Read MORE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                                         <span className="btn-hover-span"></span>
-                                    </a>
+                                    </Link>
                                 </div>
                             </div>
                         </div>
@@ -39,6 +47,48 @@ const BlogSection = () => (
                 ))}
             </div>
         </div>
+
+        <style jsx>{`
+            .relative { position: relative; }
+            .blog-image { position: relative; display: block; overflow: hidden; border-radius: 20px 20px 0 0; }
+            .blog-image img { width: 100%; border-radius: 20px 20px 0 0; }
+            .blog-category-tag {
+                position: absolute;
+                bottom: 0px;
+                right: 0px;
+                background: #3779b9;
+                color: #fff;
+                padding: 10px 25px;
+                font-size: 14px;
+                font-weight: 700;
+                text-transform: uppercase;
+                z-index: 2;
+                border-radius: 12px 0 0 0;
+            }
+            .blog-style-one {
+                border-left: 1px solid #e2e8f0;
+                border-right: 1px solid #e2e8f0;
+                border-bottom: 1px solid #e2e8f0;
+                border-radius: 20px 20px 15px 15px;
+                background: #fff;
+                transition: all 0.3s ease;
+            }
+            .blog-style-one:hover {
+                border-color: #3779b9;
+                box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
+            }
+            .blog-content {
+                padding: 30px 25px;
+            }
+            .blog-title {
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                line-height: 1.5;
+                height: 3em;
+            }
+        `}</style>
     </section>
 );
 

src/components/mobile-app-development-service/BannerBottom.tsx

@@ -102,18 +102,18 @@ const BannerBottom = () => {
                                 onClick={() => setIsContactOpen(true)}
                                 style={{
                                     cursor: 'pointer',
-                                    background: 'rgba(55, 121, 185, 0.1)',
+                                    background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important',
                                     padding: '10px 25px',
                                     borderRadius: '50px',
                                     border: '1px solid rgba(55, 121, 185, 0.2)',
                                     transition: 'all 0.3s'
                                 }}
                                 onMouseEnter={(e) => {
-                                    e.currentTarget.style.background = 'rgba(55, 121, 185, 0.15)';
+                                    e.currentTarget.style.background = 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important';
                                     e.currentTarget.style.transform = 'translateY(-2px)';
                                 }}
                                 onMouseLeave={(e) => {
-                                    e.currentTarget.style.background = 'rgba(55, 121, 185, 0.1)';
+                                    e.currentTarget.style.background = 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important';
                                     e.currentTarget.style.transform = 'translateY(0)';
                                 }}
                             >

src/components/mobile-app-development-service/Service.tsx

@@ -43,7 +43,7 @@ const Service = () => {
 
                 {/* Service Cards */}
                 <div className="row g-4">
-                    {services.slice(0, 6).map((service, i) => (
+                    {services.slice(6, 12).map((service, i) => (
                         <div key={service.id} className="col-lg-4 col-md-6 d-flex" data-aos="zoom-in" data-aos-duration={800 + i * 100}>
                             <ServiceCard service={service} />
                         </div>
@@ -53,7 +53,7 @@ const Service = () => {
                 {/* Bottom CTA Area */}
                 <div className="row justify-content-center mt-5">
                     <div className="col-lg-8 text-center" data-aos="fade-up" data-aos-duration="1000">
-                        <div className="service-bottom-cta">
+                        <div className="service-bottom-cta mt-50">
                             <button onClick={() => setIsContactOpen(true)} className="vl-btn1">
                                 Request Free Proposal <i className="fa-solid fa-angle-right"></i>
                             </button>

src/components/mobile-app-development-service/Testimonial.tsx

@@ -204,7 +204,7 @@ const Testimonial = () => {
                             )}
 
                             {/* Google Action Button */}
-                            <div className="mt-5 text-center text-lg-start" style={{ paddingLeft: '20px' }}>
+                            <div className="mt-50 text-center text-lg-start" style={{ paddingLeft: '20px' }}>
                                 <GsapReveal y={20} delay={0.5}>
                                     <Link
                                         href="https://www.google.com/maps/place/Metatron+Cube+Software+Solutions/@34.0518468,-56.3267266,3z/data=!4m8!3m7!1s0x89d4d4dc0e01490b:0xf0ca6a97298a109c!8m2!3d34.0518468!4d-56.3267266!9m1!1b1!16s%2Fg%2F11k197xnvf?entry=ttu&g_ep=EgoyMDI1MTAxMy4wIKXMDSoASAFQAw%3D%3D"

src/components/web-development-service/BannerBottom.tsx

@@ -98,18 +98,18 @@ const BannerBottom = () => {
                                 onClick={() => setIsContactOpen(true)}
                                 style={{
                                     cursor: 'pointer',
-                                    background: '#3779b9',
+                                    background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important',
                                     padding: '10px 25px',
                                     borderRadius: '50px',
                                     border: '1px solid rgba(55, 121, 185, 0.2)',
                                     transition: 'all 0.3s'
                                 }}
                                 onMouseEnter={(e) => {
-                                    e.currentTarget.style.background = '#3779b9';
+                                    e.currentTarget.style.background = 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important';
                                     e.currentTarget.style.transform = 'translateY(-2px)';
                                 }}
                                 onMouseLeave={(e) => {
-                                    e.currentTarget.style.background = '#3779b9';
+                                    e.currentTarget.style.background = 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important';
                                     e.currentTarget.style.transform = 'translateY(0)';
                                 }}
                             >

src/components/web-development-service/Service.tsx

@@ -55,7 +55,7 @@ const Service = () => {
                 {/* Bottom CTA Area */}
                 <div className="row justify-content-center mt-5">
                     <div className="col-lg-8 text-center" data-aos="fade-up" data-aos-duration="1000">
-                        <div className="service-bottom-cta">
+                        <div className="service-bottom-cta mt-50">
                             <button onClick={() => setIsContactOpen(true)} className="vl-btn1">
                                 Start Your Project Today <i className="fa-solid fa-angle-right"></i>
                             </button>

src/components/web-development-service/Testimonial.tsx

@@ -203,7 +203,7 @@ const Testimonial = () => {
                             )}
 
                             {/* Google Action Button */}
-                            <div className="mt-5 text-center text-lg-start" style={{ paddingLeft: '20px' }}>
+                            <div className="mt-50 text-center text-lg-start" style={{ paddingLeft: '20px' }}>
                                 <GsapReveal y={20} delay={0.5}>
                                     <Link
                                         href="https://www.google.com/maps/place/Metatron+Cube+Software+Solutions/@34.0518468,-56.3267266,3z/data=!4m8!3m7!1s0x89d4d4dc0e01490b:0xf0ca6a97298a109c!8m2!3d34.0518468!4d-56.3267266!9m1!1b1!16s%2Fg%2F11k197xnvf?entry=ttu&g_ep=EgoyMDI1MTAxMy4wIKXMDSoASAFQAw%3D%3D"

src/types/index.ts

@@ -28,7 +28,11 @@ export interface BlogType {
     image: string;
     date: string;
     title: string;
+    slug: string;
+    category: string;
     description?: string;
+    details?: string;
+    blockquote?: string;
     authorName?: string;
     aosClass?: string;
     link?: string;

src/utils/data.ts

@@ -1,209 +1,419 @@
 import type { BlogType, CaseStudyType, PricingType, ServiceType, TeamMemberType, TestimonialType } from "@/types";
 
-// Home 1 Data
+export const services: ServiceType[] = [
-export const services1: ServiceType[] = [
     {
         id: 1,
-        icon: '/assets/imgs/icon/icon.png',
+        icon: '/assets/img/icons/service-icon1.svg',
-        image: '/assets/img/about/about-img14.png',
+        title: 'Custom Website Development',
-        title: 'Database Security',
+        description: 'Tailor-made websites built specifically for your business goals and audience.',
-        description: 'Lorem ipsum dolor sit amet, is consectetur adipisci elit. Integer feugiat tortor non there are many other nullam.',
     },
     {
         id: 2,
-        icon: '/assets/imgs/icon/icon-2.png',
+        icon: '/assets/img/home/section3/e-commerce.webp',
-        image: '/assets/img/about/about-img15.png',
+        title: 'E-commerce Development',
-        title: 'IT Consultancy',
+        description: 'High-converting online stores with seamless checkout and payment integration.',
-        description: 'Lorem ipsum dolor sit amet, is consectetur adipisci elit. Integer feugiat tortor non there are many other nullam.',
     },
     {
         id: 3,
-        icon: '/assets/imgs/icon/icon-3.png',
+        icon: '/assets/img/home/section3/landing.webp',
-        image: '/assets/img/about/about-img14.png',
+        title: 'Landing Page Development',
-        title: 'App Development',
+        description: 'Conversion-focused landing pages built for Meta Ads & Google Ads campaigns.',
-        description: 'Lorem ipsum dolor sit amet, is consectetur adipisci elit. Integer feugiat tortor non there are many other nullam.',
     },
     {
         id: 4,
-        icon: '/assets/imgs/icon/icon-4.png',
+        icon: '/assets/img/home/section3/ui-ux.webp',
-        image: '/assets/img/about/about-img15.png',
+        title: 'UI/UX Design',
-        title: 'Network Security',
+        description: 'User-centered designs that increase engagement and reduce bounce rates.',
-        description: 'Lorem ipsum dolor sit amet, is consectetur adipisci elit. Integer feugiat tortor non there are many other nullam.',
+    },
+    {
+        id: 5,
+        icon: '/assets/img/home/section3/redesign.webp',
+        title: 'Website Redesign',
+        description: 'Modernize your outdated website into a fast, mobile-friendly platform.',
+    },
+    {
+        id: 6,
+        icon: '/assets/img/home/section3/maintanence.webp',
+        title: 'Website Maintenance & Support',
+        description: 'Ongoing updates, security monitoring, and performance optimization.',
+    },
+    {
+        id: 7,
+        icon: '/assets/img-app/home/section3/android.webp',
+        title: 'Android App Development',
+        description: 'Custom Android apps built for performance and scalability.',
+    },
+    {
+        id: 8,
+        icon: '/assets/img-app/home/section3/ios.webp',
+        title: 'iOS App Development',
+        description: 'High-quality iPhone and iPad applications optimized for Apple ecosystem.',
+    },
+    {
+        id: 9,
+        icon: '/assets/img-app/home/section3/cross.webp',
+        title: 'Cross-Platform App Development',
+        description: 'One codebase, multiple platforms — cost-effective and scalable.',
+    },
+    {
+        id: 10,
+        icon: '/assets/img-app/home/section3/mvp.webp',
+        title: 'MVP Development',
+        description: 'Launch faster with a Minimum Viable Product to validate your idea.',
+    },
+    {
+        id: 11,
+        icon: '/assets/img-app/home/section3/ui.webp',
+        title: 'UI/UX App Design',
+        description: 'Visually stunning and conversion-focused mobile app interfaces.',
+    },
+    {
+        id: 12,
+        icon: '/assets/img-app/home/section3/app.webp',
+        title: 'App Maintenance & Support',
+        description: 'Ongoing updates, bug fixes, security monitoring, and feature upgrades.',
     }
 ];
 
-// Home 2 Data
 export const features2 = [
     { id: 1, title: "Cyber Security", icon: "/assets/imgs/service/service-icon1.png", description: "Lorem Ipsum is simply dummy text of the printing and typesetting" },
     { id: 2, title: "IT Management", icon: "/assets/imgs/service/service-icon2.png", description: "Lorem Ipsum is simply dummy text of the printing and typesetting" },
     { id: 3, title: "Web Development", icon: "/assets/imgs/service/service-icon3.png", description: "Lorem Ipsum is simply dummy text of the printing and typesetting" }
 ];
 
-export const services2: ServiceType[] = [
+
+export const caseStudies: CaseStudyType[] = [
     {
         id: 1,
-        icon: '/assets/imgs/icon/icon-2.png',
+        image: '/assets/img/all-images/case/case-img1.png',
-        image: '/assets/imgs/service/service-1.jpg',
+        tag: '#CloudFlex Solution',
-        title: 'IT Consultancy',
+        title: 'Upgrading IT for Financial Secure',
-        description: 'It is a long established fact that a reader will content of a page when looking at layout the point of using lorem.',
+        link: '/case-details/single'
     },
     {
         id: 2,
-        icon: '/assets/imgs/icon/icon-3.png',
+        image: '/assets/img/all-images/case/case-img2.png',
-        image: '/assets/imgs/service/service-2.jpg',
+        tag: '#CloudFlex Solution',
-        title: 'App Development',
+        title: 'Scaling IT for EcoSolutions',
-        description: 'It is a long established fact that a reader will content of a page when looking at layout the point of using lorem.',
+        link: '/case-details/single'
     },
     {
         id: 3,
-        icon: '/assets/imgs/icon/icon.png',
+        image: '/assets/img/all-images/case/case-img3.png',
-        image: '/assets/imgs/service/service-3.jpg',
+        tag: '#CloudFlex Solution',
-        title: 'Database Security',
+        title: 'Optimizing IT For Solutions',
-        description: 'It is a long established fact that a reader will content of a page when looking at layout the point of using lorem.',
+        link: '/case-details/single'
     },
     {
         id: 4,
-        icon: '/assets/imgs/icon/icon-2.png',
+        image: '/assets/img/all-images/case/case-img9.png',
-        image: '/assets/imgs/service/service-4.jpg',
+        tag: '#CloudFlex Solution',
-        title: 'Marketing & Reporting',
+        title: 'Stories: IT Solutions At Work',
-        description: 'It is a long established fact that a reader will content of a page when looking at layout the point of using lorem.',
+        link: '/case-details/single'
-    }
-];
-
-// Home 3 Data
-export const services3: ServiceType[] = [
-    {
-        id: 4,
-        icon: '/assets/imgs/icon/icon-4.png',
-        image: '/assets/imgs/service/service-4.jpg',
-        title: 'Database Security',
-        description: 'Lorem ipsum dolor sit amet, is consectetur adipisci elit. Integer feugiat tortor non there are many other nullam.',
     },
     {
         id: 5,
-        icon: '/assets/imgs/icon/icon-5.png',
+        image: '/assets/img/all-images/case/case-img10.png',
-        image: '/assets/imgs/service/service-5.jpg',
+        tag: '#CloudFlex Solution',
-        title: 'IT Consultancy',
+        title: 'IT Solutions Driving Success',
-        description: 'Lorem ipsum dolor sit amet, is consectetur adipisci elit. Integer feugiat tortor non there are many other nullam.',
+        link: '/case-details/single'
     },
     {
         id: 6,
-        icon: '/assets/imgs/icon/icon-6.png',
+        image: '/assets/img/all-images/case/case-img11.png',
-        image: '/assets/imgs/service/service-6.jpg',
+        tag: '#CloudFlex Solution',
-        title: 'App Development',
+        title: 'Real Solutions, Real Impact',
-        description: 'Lorem ipsum dolor sit amet, is consectetur adipisci elit. Integer feugiat tortor non there are many other nullam.',
+        link: '/case-details/single'
+    },
+];
+
+export const testimonialSlides: TestimonialType[] = [
+    {
+        rating: 5,
+        message: 'Partnering with ETech has transformed our IT Solution Their tailored solutions help streamline our operations, improve cybersecurity, and drive efficiency across the board. We\'ve experienced fewer disruptions, faster an.',
+        image: '/assets/img/all-images/testimonial/testimonial-img2.png',
+        name: 'Ben Stokes',
+        role: 'Owner Taxfirm'
     },
     {
-        id: 7,
+        rating: 5,
-        icon: '/assets/imgs/icon/icon-7.png',
+        message: 'Partnering with ETech has transformed our IT Solution Their tailored solutions help streamline our operations, improve cybersecurity, and drive efficiency across the board. We\'ve experienced fewer disruptions, faster an.',
-        image: '/assets/imgs/service/service-7.jpg',
+        image: '/assets/img/all-images/testimonial/testimonial-img3.png',
-        title: 'Technology Consultancy',
+        name: 'Ben Stokes',
-        description: 'Lorem ipsum dolor sit amet, is consectetur adipisci elit. Integer feugiat tortor non there are many other nullam.',
+        role: 'Owner Taxfirm'
+    },
+    {
+        rating: 5,
+        message: 'Partnering with ETech has transformed our IT Solution Their tailored solutions help streamline our operations, improve cybersecurity, and drive efficiency across the board. We\'ve experienced fewer disruptions, faster an.',
+        image: '/assets/img/all-images/testimonial/testimonial-img4.png',
+        name: 'Ben Stokes',
+        role: 'Owner Taxfirm'
+    },
+    {
+        rating: 5,
+        message: 'Partnering with ETech has transformed our IT Solution Their tailored solutions help streamline our operations, improve cybersecurity, and drive efficiency across the board. We\'ve experienced fewer disruptions, faster an.',
+        image: '/assets/img/all-images/testimonial/testimonial-img5.png',
+        name: 'Ben Stokes',
+        role: 'Owner Taxfirm'
     }
 ];
 
 export const teamMembers: TeamMemberType[] = [
     {
         id: 1,
-        name: 'Kristin Watson',
+        name: 'SR. Alex Robertson',
-        image: '/assets/imgs/team/team-1.jpg',
+        image: '/assets/img/all-images/team/team-img1.png',
-        role: 'Customer support'
+        role: 'Head Of Cybersecurity'
     },
     {
         id: 2,
-        name: 'Annette Black',
+        name: 'Shelia Abernathy',
-        image: '/assets/imgs/team/team-2.jpg',
+        image: '/assets/img/all-images/team/team-img2.png',
-        role: 'Web Designer'
+        role: 'Software Development'
     },
     {
         id: 3,
-        name: 'Ralph Edwards',
+        name: 'Devin Romaguera',
-        image: '/assets/imgs/team/team-3.jpg',
+        image: '/assets/img/all-images/team/team-img3.png',
-        role: 'UI/UX Designer'
+        role: 'Data Analytics Specialist'
-    }
-];
-
-export const caseStudies: CaseStudyType[] = [
-    { id: 1, image: '/assets/img/case/case-img9.png', tag: 'Technology', title: 'Platform Integration', link: '#' },
-    { id: 2, image: '/assets/img/case/case-img10.png', tag: 'Technology', title: 'IT Management', link: '#' },
-    { id: 3, image: '/assets/img/case/case-img9.png', tag: 'Solution', title: 'Web Development', link: '#' },
-    { id: 4, image: '/assets/img/case/case-img10.png', tag: 'Security', title: 'Network Security', link: '#' },
-    { id: 5, image: '/assets/img/case/case-img9.png', tag: 'Security', title: 'Network Security', link: '#' },
-    { id: 6, image: '/assets/img/case/case-img10.png', tag: 'Technology', title: 'Platform Integration', link: '#' },
-    { id: 7, image: '/assets/img/case/case-img9.png', tag: 'Security', title: 'IT Management', link: '#' },
-    { id: 8, image: '/assets/img/case/case-img10.png', tag: 'Technology', title: 'Web Development', link: '#' }
-];
-
-export const testimonialSlides: TestimonialType[] = [
-    {
-        id: 1,
-        rating: 5,
-        message: '“ Consectetur adipiscing elit. Integer is nunc viverra laoreet est the is porta pretium metus aliquam eget maecenas porta is nunc viverra Aenean ”',
-        image: '/assets/imgs/resources/testimonials-1.png',
-        name: 'Kathryn Murphy',
-        role: 'Engineering'
     },
     {
-        id: 2,
+        id: 4,
-        rating: 5,
+        name: 'SR. Alex Robertson',
-        message: '“ Consectetur adipiscing elit. Integer is nunc viverra laoreet est the is porta pretium metus aliquam eget maecenas porta is nunc viverra Aenean ”',
+        image: '/assets/img/all-images/team/team-img8.png',
-        image: '/assets/imgs/resources/testimonials-2.png',
+        role: 'Head Of Cybersecurity'
-        name: 'Annette Black',
-        role: 'Engineering'
     },
     {
-        id: 3,
+        id: 5,
-        rating: 5,
+        name: 'Shelia Abernathy',
-        message: '“ Consectetur adipiscing elit. Integer is nunc viverra laoreet est the is porta pretium metus aliquam eget maecenas porta is nunc viverra Aenean ”',
+        image: '/assets/img/all-images/team/team-img9.png',
-        image: '/assets/imgs/resources/testimonials-1.png',
+        role: 'Software Development'
-        name: 'Eleanor Pena',
+    },
-        role: 'Engineering'
+    {
+        id: 6,
+        name: 'Devin Romaguera',
+        image: '/assets/img/all-images/team/team-img10.png',
+        role: 'Data Analytics Specialist'
+    },
+    {
+        id: 7,
+        name: 'SR. Alex Robertson',
+        image: '/assets/img/all-images/team/team-img11.png',
+        role: 'Head Of Cybersecurity'
+    },
+    {
+        id: 8,
+        name: 'Shelia Abernathy',
+        image: '/assets/img/all-images/team/team-img12.png',
+        role: 'Software Development'
+    },
+    {
+        id: 9,
+        name: 'Devin Romaguera',
+        image: '/assets/img/all-images/team/team-img13.png',
+        role: 'Data Analytics Specialist'
+    },
+    {
+        id: 10,
+        name: 'SR. Alex Robertson',
+        image: '/assets/img/all-images/team/team-img14.png',
+        role: 'Head Of Cybersecurity'
+    },
+    {
+        id: 11,
+        name: 'Shelia Abernathy',
+        image: '/assets/img/all-images/team/team-img15.png',
+        role: 'Software Development'
+    },
+    {
+        id: 12,
+        name: 'Devin Romaguera',
+        image: '/assets/img/all-images/team/team-img16.png',
+        role: 'Data Analytics Specialist'
     }
 ];
 
-// Compatibility exports
-export const services = [...services1, ...services3];
-export const testimonials = testimonialSlides.map(t => ({
-    image: t.image,
-    name: t.name,
-    role: t.role,
-    message: t.message
-}));
-
 export const blogs: BlogType[] = [
     {
         id: 1,
-        image: '/assets/imgs/blog/blog-1.jpg',
+        image: '/assets/img/all-images/blog/blog-img1.png',
-        date: '28 Nov, 2024',
+        date: '03 March 2026',
-        title: 'Necessity May Give us Best Virtual Court',
+        title: 'Mastering Digital Transformation: A Guide for Modern Enterprises',
-        description: 'Fuel your business success with our custom IT services. We design solutions that are tailored to your an specific needs.',
+        slug: 'mastering-digital-transformation',
+        category: 'Technology',
+        description: 'Fuel your business success with our custom IT services. We design solutions that are tailored to your specific needs.',
+        details: 'Digital transformation is the process of using digital technologies to create new — or modify existing — business processes, culture, and customer experiences to meet changing business and market requirements. This reimagining of business in the digital age is digital transformation. It transcends traditional roles like sales, marketing, and customer service. Instead, digital transformation begins and ends with how you think about, and engage with, customers. ',
+        blockquote: '“Success in digital transformation is not just about the technology; it’s about the cultural shift and visual excellence that drives user engagement.”',
         authorName: 'Admin',
+        aosClass: "fade-left",
     },
     {
         id: 2,
-        image: '/assets/imgs/blog/blog-2.jpg',
+        image: '/assets/img/all-images/blog/blog-img2.png',
-        date: '28 Nov, 2024',
+        date: '02 March 2026',
-        title: 'Tackling the Changes of Retail Industry',
+        title: 'The Future of E-commerce: Trends to Watch in 2026',
-        description: 'Fuel your business success with our custom IT services. We design solutions that are tailored to your an specific needs.',
+        slug: 'future-of-ecommerce-2026',
+        category: 'E-commerce',
+        description: 'Stay ahead of the competition with the latest insights into the e-commerce landscape and consumer behavior.',
+        details: 'The e-commerce industry continues to evolve at a breakneck pace. In 2026, we are seeing a significant shift towards hyper-personalization powered by AI, seamless headless commerce architectures, and the integration of social commerce directly into the shopping journey. Businesses that fail to adapt to these mobile-first and speed-optimized trends risk falling behind in an increasingly crowded marketplace.',
+        blockquote: '“E-commerce is no longer just a digital storefront; it’s an immersive, personalized experience that connects brands with customers on a deeper level.”',
         authorName: 'Admin',
+        aosClass: 'fade-right',
     },
     {
         id: 3,
-        image: '/assets/imgs/blog/blog-3.jpg',
+        image: '/assets/img/all-images/blog/blog-img17.png',
-        date: '28 Nov, 2024',
+        date: '01 March 2026',
-        title: 'Easy and Most Powerful Server and Platform',
+        title: 'Elevating User Experiences through Design Thinking',
-        description: 'Fuel your business success with our custom IT services. We design solutions that are tailored to your an specific needs.',
+        slug: 'elevating-ux-design-thinking',
+        category: 'Design',
+        description: 'Discover how design thinking can transform your product development process and create lasting user value.',
+        details: 'Design thinking is a non-linear, iterative process that teams use to understand users, challenge assumptions, redefine problems and create innovative solutions to prototype and test. Involving five phases—Empathize, Define, Ideate, Prototype and Test—it is most useful to tackle problems that are ill-defined or unknown. At Metatron Cube, we integrate these principles to ensure every pixel serves a purpose.',
+        blockquote: '“Design is not just what it looks like and feels like. Design is how it works and how it makes the user feel empowered.”',
         authorName: 'Admin',
     }
 ];
 
-export const blogs2: BlogType[] = blogs.map(b => ({
+export const blogs2: BlogType[] = [
-    id: b.id,
+    {
-    title: b.title,
+        id: 1,
-    date: b.date,
+        title: 'Scalable IT solutions tailored to meet a unique business needs',
-    image: b.image,
+        slug: 'scalable-it-solutions',
-    link: '#'
+        category: 'Services',
-}));
+        date: '4 August 2024',
+        image: '/assets/img/all-images/blog/blog-img8.png',
+        link: '/blog-details/single'
+    },
+    {
+        id: 2,
+        title: 'Unlock the full potential Best your business with tailored IT',
+        slug: 'unlock-potential-it',
+        category: 'Business',
+        date: '5 August 2024',
+        image: '/assets/img/all-images/blog/blog-img9.png',
+        link: '/blog-details/single'
+    },
+    {
+        id: 3,
+        title: 'Optimize your operations with tailored IT services that grow',
+        slug: 'optimize-operations',
+        category: 'Efficiency',
+        date: '6 August 2024',
+        image: '/assets/img/all-images/blog/blog-img10.png',
+        link: '/blog-details/single'
+    },
+    {
+        id: 4,
+        title: 'Unlock the Future of Your IT & Business With Best Innovative',
+        slug: 'unlock-future-it',
+        category: 'Innovation',
+        date: '4 August 2024',
+        image: '/assets/img/all-images/blog/blog-img11.png',
+        link: '/blog-details/single'
+    },
+    {
+        id: 5,
+        title: 'Transform Your Operations An with Technology Experience',
+        slug: 'transform-operations-tech',
+        category: 'Tech',
+        date: '5 August 2024',
+        image: '/assets/img/all-images/blog/blog-img12.png',
+        link: '/blog-details/single'
+    },
+    {
+        id: 6,
+        title: 'Empowering Your Business And Through Technology Tailored IT',
+        slug: 'empowering-business-tech',
+        category: 'Growth',
+        date: '6 August 2024',
+        image: '/assets/img/all-images/blog/blog-img13.png',
+        link: '/blog-details/single'
+    },
+    {
+        id: 7,
+        title: 'Discover the Power of Data-Driven Insights Transforming',
+        slug: 'data-driven-insights',
+        category: 'Data',
+        date: '4 August 2024',
+        image: '/assets/img/all-images/blog/blog-img14.png',
+        link: '/blog-details/single'
+    },
+    {
+        id: 8,
+        title: 'Scalable IT solutions tailored to meet a unique business needs',
+        slug: 'scalable-solutions-business',
+        category: 'Scalability',
+        date: '5 August 2024',
+        image: '/assets/img/all-images/blog/blog-img15.png',
+        link: '/blog-details/single'
+    },
+    {
+        id: 9,
+        title: 'Maximize Efficiency Minimize Risk With Expert Management',
+        slug: 'maximize-efficiency-it',
+        category: 'Management',
+        date: '6 August 2024',
+        image: '/assets/img/all-images/blog/blog-img16.png',
+        link: '/blog-details/single'
+    }
+];
+
+export const testimonials: TestimonialType[] = [
+    {
+        image: '/assets/img/all-images/testimonial/testimonial-img2.png',
+        name: 'Sheldon Jackson',
+        role: 'Shop Store Owner',
+        message: '“Working with has been a game- Best changer for our business. Their IT and support team is always responsive, an their expertise has helped us stream our operations, We no longer worry.”',
+    },
+    {
+        image: '/assets/img/all-images/testimonial/testimonial-img8.png',
+        name: 'Alex Robertson',
+        role: 'Shop Store Owner',
+        message: '“Our network security has never been stronger. Their proactive monitoring and customized security solutions on have given us peace of mind. Our data is safe, and our compliance has Tech.”',
+    },
+    {
+        image: '/assets/img/all-images/testimonial/testimonial-img7.png',
+        name: 'Henry Gayle',
+        role: 'Shop Store Owner',
+        message: '“Has provided us on with top-notch IT services. Their solutions are tailored to our business, & their ongoing support is second to none. We’ve seen significant improvements in our productivity and.”',
+    },
+    {
+        image: '/assets/img/all-images/testimonial/testimonial-img9.png',
+        name: 'Patricia Sanders',
+        role: 'Rainbow Bay Crafts',
+        message: '"Thanks to the IT solutions provided by ETEch, we have seen a remarkable improvement in our operational best efficiency. Our processes are now a streamlined, and our teams can best.”',
+    },
+    {
+        image: '/assets/img/all-images/testimonial/testimonial-img2.png',
+        name: 'Rodger Struck',
+        role: 'Rhodes Furniture',
+        message: '"The cybersecurity measures Solution implemented by MetatronCube have given us peace of mind. We feel confident that our data is secure, & we\'ve experience zero breaches since partnering MetatronCube.”',
+    },
+    {
+        image: '/assets/img/all-images/testimonial/testimonial-img3.png',
+        name: 'Eddie Lake',
+        role: 'Finast Company',
+        message: '"Migrating to the cloud was seamless with MetatronCube. Their best team guided us through every step now our employees can work from anywhere, IT boosting our team productivity significantly.”',
+    },
+    {
+        image: '/assets/img/all-images/testimonial/testimonial-img4.png',
+        name: 'Ricky Smith',
+        role: 'Tam\'s Stationers',
+        message: '"Working with MetatronCube has been solution transformative experience for our best organization. Before their involvement, we faced significant challenges with our outdated IT infrastructure.“',
+    },
+    {
+        image: '/assets/img/all-images/testimonial/testimonial-img5.png',
+        name: 'Lorri Warf',
+        role: 'Seamans Furniture',
+        message: '"Partnering with MetatronCube has been one of the best decisions we\'ve made. We are comprehensive cybersecurity on solutions provided us with the best assurance we needed to protect.”',
+    },
+    {
+        image: '/assets/img/all-images/testimonial/testimonial-img9.png',
+        name: 'Bradley Lawlor',
+        role: 'Mostow Co.',
+        message: '"MetatronCube has completely transformed the way we operate as a business. Their custom IT solutions have streamlined our processes, enabling us collaborate effectively across teams, regardless.”',
+    },
+];
 
 export const pricingPlans: PricingType[] = [
     {