{"id":261,"date":"2026-03-07T02:34:35","date_gmt":"2026-03-07T02:34:35","guid":{"rendered":"https:\/\/adsum.com.my\/website\/?page_id=261"},"modified":"2026-03-31T09:24:23","modified_gmt":"2026-03-31T09:24:23","slug":"nexcard","status":"publish","type":"post","link":"https:\/\/adsum.com.my\/website\/nexcard\/","title":{"rendered":"NexCard"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"261\" class=\"elementor elementor-261\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c38ac6b e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"c38ac6b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0077e8b elementor-widget elementor-widget-html\" data-id=\"0077e8b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;800&display=swap\" rel=\"stylesheet\">\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\n\n<style>\n    html, body {\n        margin: 0; padding: 0; overflow-x: hidden; background-color: #050608;\n    }\n\n    #nexcard-widget {\n        position: relative; width: 100vw; background: #050608; font-family: 'Inter', sans-serif;\n    }\n\n    #nexcard-loader {\n        position: absolute; top: 0; left: 0; width: 100%; height: 100vh;\n        background: #050608; color: #fff; z-index: 9999;\n        display: flex; flex-direction: column; justify-content: center; align-items: center;\n        font-weight: 600; transition: opacity 0.5s ease-out;\n    }\n    \n    .loader-bar-container {\n        width: 200px; height: 4px; background: #333; border-radius: 4px; margin-top: 15px; overflow: hidden;\n    }\n    #loader-bar { height: 100%; width: 0%; background: #DE6A2E; transition: width 0.1s; }\n\n    #nexcard-reveal-container {\n        position: relative; width: 100%; height: 100vh; overflow: hidden;\n        background: radial-gradient(circle at 35% 30%, rgba(222, 106, 46, 0.15) 0%, transparent 55%),\n                    radial-gradient(circle at 75% 70%, rgba(50, 80, 150, 0.12) 0%, transparent 55%), #050608;\n    }\n\n    .nexcard-title {\n        position: absolute; top: 10%; left: 50%; transform: translateX(-50%);\n        font-weight: 800; font-size: clamp(3.5rem, 10vw, 14rem); margin: 0;\n        z-index: 1; white-space: nowrap; letter-spacing: -3px; line-height: 1;\n    }\n    .nexcard-title .white { color: #ffffff; }\n    .nexcard-title .orange { color: #DE6A2E; }\n\n    #nexcard-canvas {\n        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); \n        width: 90vw; max-width: 900px; aspect-ratio: 16 \/ 9; object-fit: contain;\n        z-index: 2; pointer-events: none;\n    }\n\n    .nc-text-block {\n        position: absolute; z-index: 10; color: #ffffff; opacity: 0;\n        pointer-events: none; max-width: 400px; text-align: left;\n    }\n    .nc-text-block h2 { font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 800; margin: 0 0 10px 0; }\n    .nc-text-block p { font-size: 1rem; color: #a0a0a5; line-height: 1.5; }\n    \n    .nc-text-block ul { list-style: none; padding: 0; margin: 0; }\n    .nc-text-block li { position: relative; padding-left: 20px; font-size: 0.9rem; color: #d0d0d5; margin-bottom: 8px; }\n    .nc-text-block li::before { content: '\u2022'; color: #DE6A2E; position: absolute; left: 0; font-weight: 800; }\n\n    #nc-text-1 { top: 35%; left: 8%; }\n    #nc-text-2 { top: 35%; right: 8%; }\n    #nc-text-3 { top: 50%; left: 8%; }\n    #nc-text-4 { top: 50%; right: 8%; }\n\n    #nc-scroll-hint {\n        position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);\n        color: #777; font-size: 0.75rem; letter-spacing: 2px; z-index: 10; text-transform: uppercase;\n    }\n\n    @media (max-width: 768px) {\n        #nexcard-canvas { top: 40%; width: 100vw; }\n        .nc-text-block {\n            left: 5% !important; right: 5% !important; top: auto !important;\n            bottom: 10%; width: 90%; max-width: none; text-align: center;\n        }\n        .nc-text-block ul { display: inline-block; text-align: left; }\n        .nexcard-title { top: 15%; font-size: 4rem; }\n    }\n<\/style>\n\n<div id=\"nexcard-widget\">\n    <div id=\"nexcard-loader\">\n        <div id=\"loader-text\">Initializing Experience... 0%<\/div>\n        <div class=\"loader-bar-container\"><div id=\"loader-bar\"><\/div><\/div>\n    <\/div>\n    <div id=\"nexcard-reveal-container\">\n        <h1 class=\"nexcard-title\"><span class=\"white\">Nex<\/span><span class=\"orange\">Card<\/span><\/h1>\n        <canvas id=\"nexcard-canvas\" width=\"1920\" height=\"1080\"><\/canvas>\n        <div class=\"nc-text-block\" id=\"nc-text-1\">\n            <h2>Tap to Share<\/h2>\n            <p>No app required. Just tap your NexCard to share contacts instantly.<\/p>\n            <ul><li>Works with iOS & Android<\/li><li>Instant sharing<\/li><\/ul>\n        <\/div>\n        <div class=\"nc-text-block\" id=\"nc-text-2\">\n            <h2>Real-time Analytics<\/h2>\n            <p>Track who views your profile and when with live insights.<\/p>\n            <ul><li>View engagement live<\/li><li>Optimize strategy<\/li><\/ul>\n        <\/div>\n        <div class=\"nc-text-block\" id=\"nc-text-3\">\n            <h2>Eco-Friendly<\/h2>\n            <p>One card replaces thousands of paper business cards.<\/p>\n            <ul><li>Reduce paper waste<\/li><li>No reprinting costs<\/li><\/ul>\n        <\/div>\n        <div class=\"nc-text-block\" id=\"nc-text-4\">\n            <h2>Fully Customizable<\/h2>\n            <p>Update your information anytime from our dashboard.<\/p>\n            <ul><li>Edit details live<\/li><li>Brand colors<\/li><\/ul>\n        <\/div>\n        <div id=\"nc-scroll-hint\">Scroll to explore<\/div>\n    <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n    gsap.registerPlugin(ScrollTrigger);\n    const canvas = document.getElementById(\"nexcard-canvas\");\n    const context = canvas.getContext(\"2d\");\n    const frameCount = 174;\n    const currentFrame = index => `https:\/\/adsum.com.my\/website\/wp-content\/uploads\/2026\/03\/img_${(index + 1).toString().padStart(3, '0')}-1.webp`;\n    const images = [];\n    const seq = { frame: 0 };\n    let loadedCount = 0;\n\n    for (let i = 0; i < frameCount; i++) {\n        const img = new Image();\n        img.src = currentFrame(i);\n        img.onload = () => {\n            loadedCount++;\n            document.getElementById(\"loader-text\").innerText = `Loading... ${Math.round((loadedCount \/ frameCount) * 100)}%`;\n            document.getElementById(\"loader-bar\").style.width = `${(loadedCount \/ frameCount) * 100}%`;\n            if (loadedCount === 1) render();\n            if (loadedCount === frameCount) initAnimation();\n        };\n        images.push(img);\n    }\n\n    function render() {\n        const frameIndex = Math.round(seq.frame);\n        if (images[frameIndex]) {\n            context.clearRect(0, 0, canvas.width, canvas.height);\n            context.drawImage(images[frameIndex], 0, 0, canvas.width, canvas.height);\n        }\n    }\n\n    function initAnimation() {\n        document.getElementById(\"nexcard-loader\").style.display = \"none\";\n        const tl = gsap.timeline({\n          scrollTrigger: {\n            trigger: \"#nexcard-reveal-container\",\n            start: \"top top\",\n            end: \"+=4000\",\n            scrub: 0.6,\n            pin: true,\n            snap: {\n              snapTo: [0, 0.25, 0.5, 0.75, 1],\n              duration: 0.6,\n              ease: \"power2.out\"\n            }\n          }\n        });\n        tl.to(seq, { frame: frameCount - 1, snap: \"frame\", ease: \"none\", duration: 1, onUpdate: render }, 0);\n        tl.to(\"#nc-scroll-hint\", { opacity: 0, duration: 0.05 }, 0);\n        \n        const textAnims = [\n            { id: \"#nc-text-1\", start: 0.1, end: 0.25 },\n            { id: \"#nc-text-2\", start: 0.35, end: 0.5 },\n            { id: \"#nc-text-3\", start: 0.6, end: 0.75 },\n            { id: \"#nc-text-4\", start: 0.85, end: 0.98 }\n        ];\n\n        textAnims.forEach(anim => {\n            tl.fromTo(anim.id, { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.08 }, anim.start)\n              .to(anim.id, { opacity: 0, y: -20, duration: 0.08 }, anim.end);\n        });\n        \n        ScrollTrigger.refresh();\n        window.nexcardIsReady = true;\n        window.dispatchEvent(new Event('nexcard-ready'));\n    }\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-923cfcc e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"923cfcc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-50b08b9 elementor-widget elementor-widget-html\" data-id=\"50b08b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n.nc-snap-section {\n    position: relative;\n    width: 100%;\n    min-height: 100svh;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    background: radial-gradient(circle at 50% 40%, rgba(50, 85, 130, 0.15) 0%, #050608 80%);\n    font-family: 'Inter', sans-serif;\n    padding: 100px 20px;\n    box-sizing: border-box;\n    text-align: center;\n}\n\n.nc-cta-heading {\n    font-size: clamp(2.5rem, 5vw, 4.5rem);\n    font-weight: 800;\n    color: #ffffff;\n    margin: 0 0 20px 0;\n    line-height: 1.15;\n    letter-spacing: -1px;\n    opacity: 0;\n    transform: translateY(30px);\n}\n\n.nc-cta-highlight {\n    background: linear-gradient(90deg, #FF8A50 0%, #E25319 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n\n.nc-cta-subheading {\n    font-size: clamp(1rem, 1.2vw, 1.25rem);\n    color: #a0a0a5;\n    max-width: 650px;\n    margin: 0 auto 40px auto;\n    line-height: 1.6;\n    opacity: 0;\n    transform: translateY(20px);\n}\n\n.nc-cta-buttons {\n    display: flex;\n    gap: 20px;\n    justify-content: center;\n    flex-wrap: wrap;\n    margin-bottom: 80px;\n    opacity: 0;\n    transform: translateY(20px);\n}\n\n.nc-cta-btn {\n    font-size: 1.05rem;\n    font-weight: 600;\n    padding: 16px 36px;\n    border-radius: 50px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.nc-cta-btn-primary {\n    background-color: #F86E30;\n    color: #000;\n    border: none;\n}\n\n.nc-cta-btn-primary:hover {\n    transform: translateY(-2px);\n}\n\n.nc-cta-btn-secondary {\n    background: transparent;\n    color: #fff;\n    border: 1px solid rgba(255,255,255,0.3);\n}\n\n.nc-cta-footer-text {\n    font-size: 0.85rem;\n    color: #777;\n    opacity: 0;\n}\n<\/style>\n\n<div id=\"nc-cta-section\" class=\"nc-snap-section\">\n    <h2 class=\"nc-cta-heading\">\n        Ready to upgrade your<br>\n        <span class=\"nc-cta-highlight\">networking game?<\/span>\n    <\/h2>\n\n    <p class=\"nc-cta-subheading\">\n        Join 50,000+ professionals who have switched to NexCard.\n        Order today and get free shipping worldwide.\n    <\/p>\n\n    <div class=\"nc-cta-buttons\">\n        <button class=\"nc-cta-btn nc-cta-btn-primary\">Get your card now<\/button>\n        <button class=\"nc-cta-btn nc-cta-btn-secondary\">Contact Sales<\/button>\n    <\/div>\n\n    <p class=\"nc-cta-footer-text\">\n        No subscription fees for basic cards. 30-day money-back guarantee.\n    <\/p>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n    gsap.registerPlugin(ScrollTrigger);\n\n    const section = document.getElementById(\"nc-cta-section\");\n\n    const tl = gsap.timeline({\n        scrollTrigger: {\n            trigger: section,\n            start: \"top 75%\",\n            toggleActions: \"play none none reverse\"\n        }\n    });\n\n    tl.to(\".nc-cta-heading\", { y: 0, opacity: 1, duration: 0.6, ease: \"power2.out\" })\n      .to(\".nc-cta-subheading\", { y: 0, opacity: 1, duration: 0.6 }, \"-=0.4\")\n      .to(\".nc-cta-buttons\", { y: 0, opacity: 1, duration: 0.6 }, \"-=0.4\")\n      .to(\".nc-cta-footer-text\", { opacity: 1, duration: 0.6 }, \"-=0.2\");\n\n    function initSection2Snap() {\n        ScrollTrigger.create({\n            trigger: section,\n            start: \"top bottom\", \n            end: \"top top\",      \n            snap: {\n                snapTo: [0, 1], \n                duration: 0.3,\n                delay: 0,\n                ease: \"power1.inOut\"\n            }\n        });\n        ScrollTrigger.refresh();\n    }\n\n    if (window.nexcardIsReady) {\n        initSection2Snap();\n    } else {\n        window.addEventListener('nexcard-ready', initSection2Snap);\n    }\n});\n<\/script>\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>A single tap is all it takes to share your contact info, social profiles, and portfolio instantly.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_canvas","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[13],"tags":[],"class_list":["post-261","post","type-post","status-publish","format-standard","hentry","category-products"],"_links":{"self":[{"href":"https:\/\/adsum.com.my\/website\/wp-json\/wp\/v2\/posts\/261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adsum.com.my\/website\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/adsum.com.my\/website\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/adsum.com.my\/website\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adsum.com.my\/website\/wp-json\/wp\/v2\/comments?post=261"}],"version-history":[{"count":5,"href":"https:\/\/adsum.com.my\/website\/wp-json\/wp\/v2\/posts\/261\/revisions"}],"predecessor-version":[{"id":1881,"href":"https:\/\/adsum.com.my\/website\/wp-json\/wp\/v2\/posts\/261\/revisions\/1881"}],"wp:attachment":[{"href":"https:\/\/adsum.com.my\/website\/wp-json\/wp\/v2\/media?parent=261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/adsum.com.my\/website\/wp-json\/wp\/v2\/categories?post=261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/adsum.com.my\/website\/wp-json\/wp\/v2\/tags?post=261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}