update

frontEnd/components/pages/services/ServicesBanner.tsx

@@ -0,0 +1,113 @@
+"use client";
+import { useEffect } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+import Image from "next/legacy/image";
+import Link from "next/link";
+
+
+const ServicesBanner = () => {
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+    if (document.querySelector(".service-banner")) {
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: ".service-banner",
+          start: "center center",
+          end: "+=100%",
+          scrub: true,
+          pin: false,
+        },
+      });
+
+      tl.to(".thumb-one", {
+        opacity: 0.3,
+        y: "-100%",
+        zIndex: -1,
+        duration: 2,
+      });
+
+      tl.to(
+        ".thumb-two",
+        {
+          opacity: 0.3,
+          scale: 2,
+          y: "100%",
+          zIndex: -1,
+          duration: 2,
+        },
+        0
+      );
+    }
+  }, []);
+
+  return (
+    <section className="enterprise-banner position-relative overflow-hidden">
+      <div className="banner-background">
+        <div className="gradient-overlay"></div>
+        <div className="geometric-pattern"></div>
+      </div>
+      
+      <div className="container">
+        <div className="row justify-content-center">
+          <div className="col-12 col-xl-10">
+            <div className="enterprise-banner__content">
+              <div className="banner-badge mb-4">
+                <span className="enterprise-badge">
+                  Enterprise Services
+                </span>
+              </div>
+              
+              <h1 className="enterprise-title mb-4">
+                The end-to-end bespoke software development company you need
+              </h1>
+              
+              <p className="enterprise-description mb-5">
+                Empower your business with sophisticated tech solutions by GNX. 
+                From ideation to implementation, with a team of experts right at your fingertips
+              </p>
+              
+              <div className="enterprise-cta">
+                <Link href="/contact-us" className="btn btn-primary btn-lg me-3 mb-3">
+                  <span>Get Free Quote</span>
+                  <i className="fa-solid fa-arrow-right ms-2"></i>
+                </Link>
+                <Link href="#scroll-to" className="btn btn-outline-light btn-lg mb-3">
+                  <span>Explore Services</span>
+                  <i className="fa-solid fa-arrow-down ms-2"></i>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <ul className="social">
+        <li>
+          <Link
+            href="https://www.linkedin.com/company/gnxtech"
+            target="_blank"
+            aria-label="connect with us on linkedin"
+           >
+            <i className="fa-brands fa-linkedin-in"></i>
+          </Link>
+        </li>
+        <li>
+          <Link
+            href="https://github.com/gnxtech"
+            target="_blank"
+            aria-label="view our code on github"
+           >
+            <i className="fa-brands fa-github"></i>
+          </Link>
+        </li>
+      </ul>
+      <Link href="#scroll-to" className="scroll-to">
+        Scroll
+        <span className="arrow"></span>
+      </Link>
+  
+    </section>
+  );
+};
+
+export default ServicesBanner;