{"id":1373,"date":"2025-10-04T14:55:02","date_gmt":"2025-10-04T14:55:02","guid":{"rendered":"https:\/\/jacobs-tech.com\/?page_id=1373"},"modified":"2025-10-19T11:23:36","modified_gmt":"2025-10-19T11:23:36","slug":"marketing","status":"publish","type":"page","link":"https:\/\/suffix.com\/en\/marketing","title":{"rendered":"Marketing"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1373\" class=\"elementor elementor-1373\" wpc-filter-elementor-widget=\"1\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b8cc4c e-con-full e-flex e-con e-parent\" data-id=\"4b8cc4c\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ob_column_hoveranimator&quot;:&quot;no&quot;,&quot;_ob_glider_is_slider&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e72719b elementor-widget__width-inherit ob-has-background-overlay elementor-widget elementor-widget-html\" data-id=\"e72719b\" data-element_type=\"widget\" data-settings=\"{&quot;_ob_perspektive_use&quot;:&quot;no&quot;,&quot;_ob_widget_stalker_use&quot;:&quot;no&quot;,&quot;_ob_poopart_use&quot;:&quot;yes&quot;,&quot;_ob_shadough_use&quot;:&quot;no&quot;,&quot;_ob_allow_hoveranimator&quot;:&quot;no&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Fixed Background Parallax Scroll<\/title>\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <script>\r\n        tailwind.config = {\r\n            theme: {\r\n                extend: {\r\n                    screens: {\r\n                        'md': '768px',   \/\/ Tablet\r\n                        'lg': '1025px',  \/\/ Laptop\r\n                        'xl': '1367px',  \/\/ Desktop (1367px and up)\r\n                    },\r\n                    fontFamily: {\r\n                        'favorit': ['favorit-regular', 'sans-serif'],\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    <\/script>\r\n    <style>\r\n        @font-face {\r\n            font-family: 'favorit-regular';\r\n            src: url('https:\/\/suffix.com\/wp-content\/themes\/jacobstech\/fonts\/favorit-regular.woff2') format('woff2'),\r\n                 url('https:\/\/suffix.com\/wp-content\/themes\/jacobstech\/fonts\/favorit-regular.woff') format('woff');\r\n            font-weight: normal;\r\n            font-style: normal;\r\n            font-display: swap;\r\n        }\r\n\r\n        body {\r\n            overflow-x: hidden;\r\n            background-color: #0d0d0d;\r\n            font-family: 'favorit-regular', sans-serif;\r\n        }\r\n\r\n        #parallax-bg { \r\n            position: absolute;\r\n            top: 0; \r\n            left: 0; \r\n            width: 100%; \r\n            height: 100%; \r\n            z-index: 1; \r\n            overflow: hidden; \r\n            background-color: #000; \r\n        }\r\n\r\n        #bg-image {\r\n            background-image: url('https:\/\/suffix.com\/wp-content\/uploads\/2025\/09\/Marketing-scaled.jpg');\r\n            background-size: cover;\r\n            background-position: center center;\r\n            width: 100%;\r\n            height: 100%;\r\n            will-change: filter, opacity;\r\n        }\r\n\r\n        #bg-overlay {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-color: #000000;\r\n            opacity: 0.3;\r\n            will-change: opacity;\r\n        }\r\n\r\n        #hero-content-scroll-area {\r\n            position: relative;\r\n            z-index: 10;\r\n            min-height: 101vh; \r\n            background-color: transparent;\r\n        }\r\n\r\n        #parallax-grid {\r\n            position: sticky; \r\n            top: 0; \r\n            height: 100vh; \r\n            display: flex;\r\n            align-items: center;\r\n        }\r\n\r\n        #motion-content.no-transform {\r\n            transform: none !important;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-900\">\r\n\r\n    <!-- 1. FIXED PARALLAX BACKGROUND -->\r\n    <div id=\"parallax-bg\">\r\n        <div id=\"bg-image\">\r\n            <div id=\"bg-overlay\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- 2. SCROLLABLE HERO CONTENT AREA -->\r\n    <div id=\"hero-content-scroll-area\">\r\n        \r\n        <!-- The Grid that houses the two text columns -->\r\n        <div id=\"parallax-grid\" class=\"container mx-auto max-w-7xl px-[30px] lg:px-[50px]\">\r\n            <div id=\"grid-content\" class=\"w-full grid grid-cols-1 lg:grid-cols-2 gap-[60px] lg:gap-12 xl:gap-16 mb-[3vh] md:mb-[4vh] lg:mb-[6vh] xl:mb-[8vh]\">\r\n                \r\n                <!-- LEFT COLUMN -->\r\n                <div id=\"left-column\" class=\"flex items-center pt-[120px] lg:pt-0 lg:h-screen z-20\">\r\n                    <h1 class=\"text-white uppercase font-bold leading-none tracking-[0.09em] m-0 font-favorit\r\n                               text-[36px] \r\n                               md:text-[52px] \r\n                               lg:text-[52px] \r\n                               xl:text-[64px]\">\r\n                        Marketing\r\n                    <\/h1>\r\n                <\/div>\r\n\r\n                <!-- RIGHT COLUMN -->\r\n                <div id=\"motion-content\" class=\"text-white self-auto lg:self-end font-favorit\r\n                                                text-[18px] leading-[1.6] font-normal\r\n                                                md:text-[24px] md:leading-[1.5]\r\n                                                lg:text-[24px] lg:leading-[1.5]\r\n                                                xl:text-[28px] xl:leading-[1.45]\r\n                                                max-w-none lg:max-w-[90%] xl:max-w-[85%]\">\r\n                    <p class=\"mb-5 lg:mb-[30px] 2xl:mb-[40px]\">\r\n                        Your event deserves to be seen, heard, and remembered. Our marketing team blends creative content creation, sport influencers marketing, and targeted campaigns to deliver results. With expertise in social media, on-ground coverage, entertainment, PR, and paid media, we generate excitement before, during, and after the event. \r\n                    <\/p>\r\n                    <p class=\"mb-0\">\r\n                        Our in-house database of participants and proven digital reach give us a head start in driving registrations and awareness. Simply put, we turn your event into a movement.\r\n                    <\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- JAVASCRIPT SCROLL LOGIC -->\r\n    <script>\r\n        const MOTION_SPEED = 1.4;\r\n        const VIEWPORT_EFFECT_END_RATIO = 0.65;\r\n        const MAX_BLUR = 12;\r\n        const MAX_OVERLAY_OPACITY = 0.95;\r\n\r\n        const heroWrapper = document.getElementById('hero-content-scroll-area');\r\n        const bgImage = document.getElementById('bg-image');\r\n        const bgOverlay = document.getElementById('bg-overlay');\r\n        const motionContent = document.getElementById('motion-content');\r\n\r\n        const calculateEffectRatio = (rectTop) => {\r\n            const viewportHeight = window.innerHeight;\r\n            const effectRange = viewportHeight * VIEWPORT_EFFECT_END_RATIO; \r\n            const scrollDistance = -rectTop; \r\n            let ratio = scrollDistance \/ effectRange;\r\n            return Math.max(0, Math.min(1, ratio));\r\n        };\r\n\r\n        const isMobileViewport = () => {\r\n            return window.innerWidth <= 1024;\r\n        };\r\n\r\n        const handleScrollEffects = () => {\r\n            if (!heroWrapper || !bgImage || !bgOverlay || !motionContent) {\r\n                return;\r\n            }\r\n\r\n            const rect = heroWrapper.getBoundingClientRect();\r\n            const scrollRatio = calculateEffectRatio(rect.top);\r\n\r\n            \/\/ Background Effects (Blur and Overlay)\r\n            const currentBlur = scrollRatio * MAX_BLUR;\r\n            bgImage.style.filter = `blur(${currentBlur}px)`;\r\n            const baseOpacity = 0.85; \/\/ always visible from start\r\nconst currentOpacity = baseOpacity + (scrollRatio * (MAX_OVERLAY_OPACITY - baseOpacity));\r\n\r\n            \/\/const currentOpacity = scrollRatio * MAX_OVERLAY_OPACITY;\r\n            \/\/bgOverlay.style.opacity = currentOpacity;\r\n\r\n            \/\/ Content Motion Effect (Right Column Lift)\r\n            if (!isMobileViewport()) {\r\n                const totalMovementRange = window.innerHeight * MOTION_SPEED;\r\n                const currentLift = scrollRatio * totalMovementRange;\r\n                \r\n                motionContent.style.transition = 'transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1)'; \r\n                motionContent.style.transform = `translateY(-${currentLift}px)`;\r\n                motionContent.style.willChange = 'transform';\r\n                motionContent.classList.remove('no-transform');\r\n            } else {\r\n                motionContent.style.transform = 'none';\r\n                motionContent.style.willChange = 'auto';\r\n                motionContent.classList.add('no-transform');\r\n            }\r\n        };\r\n\r\n        window.addEventListener('scroll', handleScrollEffects);\r\n        window.addEventListener('resize', handleScrollEffects);\r\n        \r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            handleScrollEffects();\r\n        });\r\n    <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6e81881 e-con-full e-flex e-con e-parent\" data-id=\"6e81881\" data-element_type=\"container\" data-settings=\"{&quot;_ob_use_container_extras&quot;:&quot;no&quot;,&quot;_ob_column_hoveranimator&quot;:&quot;no&quot;,&quot;_ob_glider_is_slider&quot;:&quot;no&quot;,&quot;_ob_column_has_pseudo&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3aa5ab5 ob-has-background-overlay elementor-widget elementor-widget-spacer\" data-id=\"3aa5ab5\" data-element_type=\"widget\" data-settings=\"{&quot;_ob_spacerat_use&quot;:&quot;no&quot;,&quot;_ob_perspektive_use&quot;:&quot;no&quot;,&quot;_ob_widget_stalker_use&quot;:&quot;no&quot;,&quot;_ob_poopart_use&quot;:&quot;yes&quot;,&quot;_ob_shadough_use&quot;:&quot;no&quot;,&quot;_ob_allow_hoveranimator&quot;:&quot;no&quot;}\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d5a6651 ob-harakiri-inherit ob-has-background-overlay elementor-widget elementor-widget-heading\" data-id=\"d5a6651\" data-element_type=\"widget\" data-settings=\"{&quot;_ob_use_harakiri&quot;:&quot;yes&quot;,&quot;_ob_harakiri_writing_mode&quot;:&quot;inherit&quot;,&quot;_ob_harakiri_text_clip&quot;:&quot;none&quot;,&quot;_ob_perspektive_use&quot;:&quot;no&quot;,&quot;_ob_widget_stalker_use&quot;:&quot;no&quot;,&quot;_ob_poopart_use&quot;:&quot;yes&quot;,&quot;_ob_shadough_use&quot;:&quot;no&quot;,&quot;_ob_allow_hoveranimator&quot;:&quot;no&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Some of Our Work<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a72766 ob-has-background-overlay elementor-widget elementor-widget-spacer\" data-id=\"8a72766\" data-element_type=\"widget\" data-settings=\"{&quot;_ob_spacerat_use&quot;:&quot;no&quot;,&quot;_ob_perspektive_use&quot;:&quot;no&quot;,&quot;_ob_widget_stalker_use&quot;:&quot;no&quot;,&quot;_ob_poopart_use&quot;:&quot;yes&quot;,&quot;_ob_shadough_use&quot;:&quot;no&quot;,&quot;_ob_allow_hoveranimator&quot;:&quot;no&quot;}\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14c2cb4 ob-has-background-overlay elementor-widget elementor-widget-jj_events_featured\" data-id=\"14c2cb4\" data-element_type=\"widget\" data-settings=\"{&quot;_ob_perspektive_use&quot;:&quot;no&quot;,&quot;_ob_widget_stalker_use&quot;:&quot;no&quot;,&quot;_ob_poopart_use&quot;:&quot;yes&quot;,&quot;_ob_shadough_use&quot;:&quot;no&quot;,&quot;_ob_allow_hoveranimator&quot;:&quot;no&quot;}\" data-widget_type=\"jj_events_featured.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- DEBUG IDs: 2405,2394,2386 --><div class=\"jj-events-widget featured-3\" style=\"--jj-gap:32px; --jj-img-h:340px;\"><div class=\"luxury-grid featured-grid\"><!-- RENDERING CARD: 2405 --><article class=\"jj-event-card jj-fade-in jj-visible\">  <a class=\"jj-card-link\" href=\"https:\/\/suffix.com\/en\/events\/gulf-bank-642-marathon-3\">      <div class=\"post-thumbnail-container\">          <img decoding=\"async\" src=\"https:\/\/suffix.com\/wp-content\/uploads\/Marketing\/Gulf%20Bank%20642%20-%20Marketing\/Main-Image.jpg\" alt=\"Gulf Bank 642 Marathon\" class=\"jj-card-img\" style=\"height:var(--jj-img-h); object-fit:cover; width:100%;\"\/>      <\/div>      <div class=\"jj-card-meta\">          <span class=\"jj-card-type\">RUNNING<\/span>          <span class=\"jj-card-yearloc\">2025 \/ Kuwait<\/span>      <\/div>      <h3 class=\"jj-card-title\">Gulf Bank 642 Marathon<\/h3>      <div class=\"jj-card-managed\"><\/div>  <\/a><\/article><!-- RENDERING CARD: 2394 --><article class=\"jj-event-card jj-fade-in jj-visible\">  <a class=\"jj-card-link\" href=\"https:\/\/suffix.com\/en\/events\/kib-the-stadium-2\">      <div class=\"post-thumbnail-container\">          <img decoding=\"async\" src=\"https:\/\/suffix.com\/wp-content\/uploads\/Marketing\/KIBTheStadiumMarketing\/Main-Image-scaled.jpg\" alt=\"KIB | The Stadium \" class=\"jj-card-img\" style=\"height:var(--jj-img-h); object-fit:cover; width:100%;\"\/>      <\/div>      <div class=\"jj-card-meta\">          <span class=\"jj-card-type\">EQUESTRIAN<\/span>          <span class=\"jj-card-yearloc\">2025 \/ Kuwait<\/span>      <\/div>      <h3 class=\"jj-card-title\">KIB | The Stadium <\/h3>      <div class=\"jj-card-managed\"><\/div>  <\/a><\/article><!-- RENDERING CARD: 2386 --><article class=\"jj-event-card jj-fade-in jj-visible\">  <a class=\"jj-card-link\" href=\"https:\/\/suffix.com\/en\/events\/nbk-ramadan-challenge-2\">      <div class=\"post-thumbnail-container\">          <img decoding=\"async\" src=\"https:\/\/suffix.com\/wp-content\/uploads\/Marketing\/NBK%20Ramadan%20Challenge%20-%20Marketing\/Main-Image-scaled.jpg\" alt=\"NBK Ramadan Challenge\" class=\"jj-card-img\" style=\"height:var(--jj-img-h); object-fit:cover; width:100%;\"\/>      <\/div>      <div class=\"jj-card-meta\">          <span class=\"jj-card-type\">RUNNING<\/span>          <span class=\"jj-card-yearloc\">2025 \/ Kuwait<\/span>      <\/div>      <h3 class=\"jj-card-title\">NBK Ramadan Challenge<\/h3>      <div class=\"jj-card-managed\"><\/div>  <\/a><\/article><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Fixed Background Parallax Scroll Marketing Your event deserves to be seen, heard, and remembered. Our marketing team blends creative content creation, sport influencers marketing, and&hellip;<\/p>\n","protected":false},"author":1,"featured_media":346,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"_eb_attr":"","_customify_content_layout":"full-stretched","_customify_sidebar":"content","_customify_page_header_display":"default","_customify_disable_header":"","_customify_disable_header_top":"","_customify_disable_header_main":"","_customify_disable_header_bottom":"","_customify_disable_page_title":"","_customify_disable_content_vertical_padding":"","_customify_disable_footer_top":"","_customify_disable_footer_main":"","_customify_disable_footer_bottom":"","_customify_breadcrumb_display":"","_customify_header_transparent_display":"","footnotes":""},"class_list":["post-1373","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/suffix.com\/en\/wp-json\/wp\/v2\/pages\/1373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/suffix.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/suffix.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/suffix.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/suffix.com\/en\/wp-json\/wp\/v2\/comments?post=1373"}],"version-history":[{"count":154,"href":"https:\/\/suffix.com\/en\/wp-json\/wp\/v2\/pages\/1373\/revisions"}],"predecessor-version":[{"id":3468,"href":"https:\/\/suffix.com\/en\/wp-json\/wp\/v2\/pages\/1373\/revisions\/3468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/suffix.com\/en\/wp-json\/wp\/v2\/media\/346"}],"wp:attachment":[{"href":"https:\/\/suffix.com\/en\/wp-json\/wp\/v2\/media?parent=1373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}