1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7613],{50921:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/creators-in-residence",function(){return n(94617)}])},94617:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return x}});var a=n(47568),s=n(97582),r=n(85893);n(67294);var o=n(69553),i=n(9008),l=n.n(i),d=n(4298),c=n.n(d),m=function(){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(l(),{children:[(0,r.jsx)("title",{children:"Creator Hackathon 26 â talabat"}),(0,r.jsx)("meta",{name:"description",content:"The UAE's first creator hackathon. AED 10,000 in prizes. Win your way into talabat's Creators-in-Residence."}),(0,r.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),(0,r.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n /* TT Commons Pro font â loaded from project assets */\n @font-face {\n font-family: 'TT Commons Pro';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url('/assets/fonts/tt_commons/TT_Commons_Pro_Regular.woff2') format('woff2'),\n url('/assets/fonts/tt_commons/TT_Commons_Pro_Regular.woff') format('woff');\n }\n @font-face {\n font-family: 'TT Commons Pro';\n font-style: normal;\n font-weight: 500;\n font-display: swap;\n src: url('/assets/fonts/tt_commons/TT_Commons_Pro_Medium.woff2') format('woff2'),\n url('/assets/fonts/tt_commons/TT_Commons_Pro_Medium.woff') format('woff');\n }\n @font-face {\n font-family: 'TT Commons Pro';\n font-style: normal;\n font-weight: 700;\n font-display: swap;\n src: url('/assets/fonts/tt_commons/TT_Commons_Pro_Bold.woff2') format('woff2'),\n url('/assets/fonts/tt_commons/TT_Commons_Pro_Bold.woff') format('woff');\n }\n @font-face {\n font-family: 'TT Commons Pro';\n font-style: normal;\n font-weight: 800;\n font-display: swap;\n src: url('/assets/fonts/tt_commons/TT_Commons_Pro_Bold.woff2') format('woff2'),\n url('/assets/fonts/tt_commons/TT_Commons_Pro_Bold.woff') format('woff');\n }\n\n /* Custom color overrides â #cir-page scoping beats Bootstrap's .text-primary */\n #cir-page .bg-brown { background-color: #411517 !important; }\n #cir-page .bg-brown-light { background-color: #5A2325 !important; }\n #cir-page .bg-primary { background-color: #FF5900 !important; }\n #cir-page .bg-primary-dark { background-color: #E04E00 !important; }\n #cir-page .bg-cream { background-color: #F4EDE3 !important; }\n #cir-page .bg-cream-dark { background-color: #E6DCD3 !important; }\n #cir-page .bg-lime { background-color: #B5E327 !important; }\n #cir-page .bg-lime-dark { background-color: #9ACC1F !important; }\n\n #cir-page .bg-cream\\/50 { background-color: rgba(244,237,227,0.5) !important; }\n #cir-page .bg-lime\\/10 { background-color: rgba(181,227,39,0.1) !important; }\n #cir-page .bg-primary\\/5 { background-color: rgba(255,89,0,0.05) !important; }\n #cir-page .bg-primary\\/10 { background-color: rgba(255,89,0,0.1) !important; }\n #cir-page .bg-primary\\/20 { background-color: rgba(255,89,0,0.2) !important; }\n #cir-page .bg-white\\/8 { background-color: rgba(255,255,255,0.08) !important; }\n #cir-page .bg-white\\/10 { background-color: rgba(255,255,255,0.1) !important; }\n #cir-page .bg-white\\/15 { background-color: rgba(255,255,255,0.15) !important; }\n\n #cir-page .text-brown { color: #411517 !important; }\n #cir-page .text-primary { color: #FF5900 !important; }\n #cir-page .text-lime { color: #B5E327 !important; }\n #cir-page .text-brown\\/8 { color: rgba(65,21,23,0.08) !important; }\n #cir-page .text-brown\\/15 { color: rgba(65,21,23,0.15) !important; }\n #cir-page .text-brown\\/30 { color: rgba(65,21,23,0.3) !important; }\n #cir-page .text-brown\\/35 { color: rgba(65,21,23,0.35) !important; }\n #cir-page .text-brown\\/40 { color: rgba(65,21,23,0.4) !important; }\n #cir-page .text-brown\\/45 { color: rgba(65,21,23,0.45) !important; }\n #cir-page .text-brown\\/50 { color: rgba(65,21,23,0.5) !important; }\n #cir-page .text-brown\\/60 { color: rgba(65,21,23,0.6) !important; }\n #cir-page .text-brown\\/65 { color: rgba(65,21,23,0.65) !important; }\n #cir-page .text-brown\\/70 { color: rgba(65,21,23,0.7) !important; }\n #cir-page .text-brown\\/80 { color: rgba(65,21,23,0.8) !important; }\n #cir-page .text-primary\\/10 { color: rgba(255,89,0,0.1) !important; }\n #cir-page .text-primary\\/15 { color: rgba(255,89,0,0.15) !important; }\n #cir-page .text-primary\\/40 { color: rgba(255,89,0,0.4) !important; }\n #cir-page .text-lime\\/20 { color: rgba(181,227,39,0.2) !important; }\n #cir-page .text-white\\/25 { color: rgba(255,255,255,0.25) !important; }\n #cir-page .text-white\\/35 { color: rgba(255,255,255,0.35) !important; }\n #cir-page .text-white\\/40 { color: rgba(255,255,255,0.4) !important; }\n #cir-page .text-white\\/50 { color: rgba(255,255,255,0.5) !important; }\n #cir-page .text-white\\/60 { color: rgba(255,255,255,0.6) !important; }\n #cir-page .text-white\\/70 { color: rgba(255,255,255,0.7) !important; }\n #cir-page .text-white\\/80 { color: rgba(255,255,255,0.8) !important; }\n\n #cir-page .border-brown { border-color: #411517 !important; }\n #cir-page .border-cream-dark { border-color: #E6DCD3 !important; }\n #cir-page .border-white\\/8 { border-color: rgba(255,255,255,0.08) !important; }\n #cir-page .border-white\\/10 { border-color: rgba(255,255,255,0.1) !important; }\n\n #cir-page .divide-brown\\/10 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(65,21,23,0.1) !important; }\n #cir-page .divide-cream-dark > :not([hidden]) ~ :not([hidden]) { border-color: #E6DCD3 !important; }\n #cir-page .shadow-primary\\/20 { --tw-shadow-color: rgba(255,89,0,0.2) !important; }\n #cir-page .shadow-lime\\/20 { --tw-shadow-color: rgba(181,227,39,0.2) !important; }\n\n #cir-page .fill-white { fill: #fff !important; }\n #cir-page .font-sans { font-family: \"TT Commons Pro\", system-ui, sans-serif !important; }\n #cir-page.font-sans { font-family: \"TT Commons Pro\", system-ui, sans-serif !important; }\n #cir-page.text-brown { color: #411517 !important; }\n\n /* Hover variants */\n #cir-page .hover\\:bg-primary-dark:hover { background-color: #E04E00 !important; }\n #cir-page .hover\\:bg-lime-dark:hover { background-color: #9ACC1F !important; }\n #cir-page .hover\\:bg-white\\/15:hover { background-color: rgba(255,255,255,0.15) !important; }\n #cir-page .hover\\:text-primary:hover { color: #FF5900 !important; }\n #cir-page .hover\\:text-white:hover { color: #fff !important; }\n #cir-page .hover\\:text-white\\/50:hover { color: rgba(255,255,255,0.5) !important; }\n #cir-page .hover\\:text-white\\/60:hover { color: rgba(255,255,255,0.6) !important; }\n\n .reveal {\n opacity: 0;\n transform: translateY(32px);\n transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);\n }\n .reveal.visible {\n opacity: 1;\n transform: translateY(0);\n }\n .reveal-delay-1 { transition-delay: .1s; }\n .reveal-delay-2 { transition-delay: .2s; }\n .reveal-delay-3 { transition-delay: .3s; }\n .reveal-delay-4 { transition-delay: .4s; }\n .reveal-delay-5 { transition-delay: .5s; }\n\n .marquee-track {\n display: flex;\n width: max-content;\n animation: marquee 20s linear infinite;\n }\n @keyframes marquee {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n }\n\n .faq-body {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows .4s cubic-bezier(.16,1,.3,1);\n }\n .faq-item.open .faq-body { grid-template-rows: 1fr; }\n .faq-body > div { overflow: hidden; }\n .faq-item.open .faq-chevron { transform: rotate(180deg); }\n .faq-chevron { transition: transform .3s ease; }\n\n .nav-scrolled {\n background: rgba(65, 21, 23, 0.92);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n }\n\n @keyframes gentle-float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n .float { animation: gentle-float 5s ease-in-out infinite; }\n\n @keyframes spin-slow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n .spin-slow { animation: spin-slow 8s linear infinite; }\n\n @keyframes pulse-glow {\n 0%, 100% { box-shadow: 0 0 0 0 rgba(181,227,39,.5); }\n 50% { box-shadow: 0 0 24px 4px rgba(181,227,39,.3); }\n }\n .pulse-glow { animation: pulse-glow 2.5s ease-in-out infinite; }\n\n .card-lift {\n transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;\n }\n .card-lift:hover {\n transform: translateY(-6px);\n box-shadow: 0 20px 40px rgba(65,21,23,.12);\n }\n\n .bento { display: grid; gap: 1rem; grid-template-columns: 1fr; }\n @media (min-width: 640px) {\n .bento { grid-template-columns: repeat(2, 1fr); }\n .bento-wide { grid-column: span 2; }\n }\n @media (min-width: 768px) {\n .bento {\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: auto auto;\n }\n }\n\n .count-up { font-variant-numeric: tabular-nums; }\n\n @keyframes dot-pulse {\n 0%, 100% { box-shadow: 0 0 0 0 rgba(255,89,0,.4); }\n 50% { box-shadow: 0 0 0 8px rgba(255,89,0,0); }\n }\n .dot-active { animation: dot-pulse 2s ease-in-out infinite; }\n\n .grain::after {\n content: '';\n position: absolute;\n inset: 0;\n opacity: .035;\n pointer-events: none;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n background-size: 128px;\n }\n\n .mobile-menu {\n transform: translateX(100%);\n transition: transform .35s cubic-bezier(.16,1,.3,1);\n }\n .mobile-menu.open { transform: translateX(0); }\n"}})]}),(0,r.jsx)(c(),{src:"https://cdn.tailwindcss.com",strategy:"beforeInteractive"}),(0,r.jsx)(c(),{id:"tailwind-config",strategy:"beforeInteractive",children:"\n if (typeof tailwind !== 'undefined') {\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#FF5900',\n 'primary-dark': '#E04E00',\n brown: '#411517',\n 'brown-light': '#5A2325',\n cream: '#F4EDE3',\n 'cream-dark': '#E6DCD3',\n lime: '#B5E327',\n 'lime-dark': '#9ACC1F',\n },\n fontFamily: {\n sans: ['\"TT Commons Pro\"', 'system-ui', 'sans-serif'],\n },\n },\n },\n }\n }\n"}),(0,r.jsx)("div",{id:"cir-page",className:"font-sans text-brown bg-white antialiased overflow-x-hidden",dangerouslySetInnerHTML:{__html:'\n <nav id="nav" class="fixed top-0 left-0 right-0 z-50 bg-brown transition-all duration-300" style="background-color:#481015">\n <div class="max-w-7xl mx-auto px-5 sm:px-8 h-16 flex items-center justify-between">\n <a href="#" class="flex items-center gap-3 shrink-0">\n <img src="/assets/images/creators-in-residence/talabat-logo.png" alt="talabat" style="height:3rem">\n </a>\n <div class="hidden md:flex items-center gap-8">\n <a href="#cir" class="text-white/70 hover:text-white text-[13px] font-semibold tracking-wide uppercase transition-colors">CIR</a>\n <a href="#hackathon" class="text-white/70 hover:text-white text-[13px] font-semibold tracking-wide uppercase transition-colors">Hackathon</a>\n <a href="#benefits" class="text-white/70 hover:text-white text-[13px] font-semibold tracking-wide uppercase transition-colors">Benefits</a>\n <a href="#how-it-works" class="text-white/70 hover:text-white text-[13px] font-semibold tracking-wide uppercase transition-colors">How it works</a>\n <a href="#faq" class="text-white/70 hover:text-white text-[13px] font-semibold tracking-wide uppercase transition-colors">FAQ</a>\n </div>\n <div class="flex items-center gap-3">\n <a href="https://forms.gle/L6jqifZpTZStQvXL8" target="_blank" class="hidden sm:inline-flex items-center rounded-full bg-lime text-brown font-bold text-sm px-6 py-2.5 hover:bg-lime-dark transition-all pulse-glow">\n Apply Now\n </a>\n <button id="menu-toggle" class="md:hidden w-10 h-10 flex flex-col items-center justify-center gap-1.5" aria-label="Menu">
1\n <span class="w-5 h-0.5 bg-white transition-all" id="bar1"></span>\n <span class="w-5 h-0.5 bg-white transition-all" id="bar2"></span>\n <span class="w-5 h-0.5 bg-white transition-all" id="bar3"></span>\n </button>\n </div>\n </div>\n <div id="mobile-menu" class="mobile-menu fixed top-0 right-0 w-72 h-screen bg-brown shadow-2xl z-50 p-8 pt-20 md:hidden">\n <button id="menu-close" class="absolute top-5 right-5 w-10 h-10 flex items-center justify-center text-white/60 hover:text-white text-2xl">×</button>\n <div class="flex flex-col gap-6">\n <a href="#cir" class="text-white/80 hover:text-white text-lg font-semibold nav-link-mobile">CIR</a>\n <a href="#hackathon" class="text-white/80 hover:text-white text-lg font-semibold nav-link-mobile">Hackathon</a>\n <a href="#benefits" class="text-white/80 hover:text-white text-lg font-semibold nav-link-mobile">Benefits</a>\n <a href="#how-it-works" class="text-white/80 hover:text-white text-lg font-semibold nav-link-mobile">How it works</a>\n <a href="#faq" class="text-white/80 hover:text-white text-lg font-semibold nav-link-mobile">FAQ</a>\n <a href="https://forms.gle/L6jqifZpTZStQvXL8" target="_blank" class="inline-flex items-center justify-center rounded-full bg-lime text-brown font-bold text-base px-6 py-3 mt-2 nav-link-mobile">Apply Now</a>\n </div>\n </div>\n </nav>\n <div id="overlay" class="fixed inset-0 bg-black/40 z-40 hidden md:hidden"></div>\n\n <section class="relative bg-cream min-h-screen flex items-center justify-center overflow-hidden grain">\n <div class="absolute top-[15%] right-[10%] text-primary/15 text-5xl spin-slow select-none pointer-events-none" aria-hidden="true">✦</div>\n <div class="absolute bottom-[20%] left-[8%] text-primary/10 text-3xl spin-slow select-none pointer-events-none" style="animation-duration:12s" aria-hidden="true">✦</div>\n <div class="absolute top-[60%] right-[25%] text-brown/8 text-2xl spin-slow select-none pointer-events-none" style="animation-duration:15s" aria-hidden="true">✦</div>\n\n <div class="max-w-5xl mx-auto px-5 sm:px-8 pt-28 pb-20 md:pt-16 md:pb-24 text-center relative z-10">\n <div class="float mb-8 md:mb-14">\n <img src="/assets/images/creators-in-residence/hackathon-logo-light.png" alt="Creator Hackathon \'26" class="mx-auto w-[260px] sm:w-[380px] md:w-[520px] lg:w-[600px] drop-shadow-2xl">\n </div>\n\n <h1 class="reveal font-extrabold text-brown text-[1.5rem] sm:text-3xl md:text-4xl lg:text-[2.75rem] leading-tight max-w-3xl mx-auto">\n The UAE\'s first creator hackathon.<br>\n <span class="text-primary">And the front door to something bigger.</span>\n </h1>\n\n <p class="reveal reveal-delay-1 text-brown/60 text-base sm:text-lg md:text-xl mt-6 md:mt-8 max-w-2xl mx-auto leading-relaxed font-light">\n Two days at talabat HQ. Twenty creators. AED 10,000 in prizes. And five of you join our first-ever Creators‑in‑Residence.\n </p>\n\n <div class="reveal reveal-delay-2 mt-10 md:mt-12 flex flex-col sm:flex-row items-center justify-center gap-4">\n <a href="https://forms.gle/L6jqifZpTZStQvXL8" target="_blank" class="inline-flex items-center gap-2 rounded-full bg-primary text-white font-extrabold text-lg px-10 py-4 hover:bg-primary-dark transition-all shadow-lg shadow-primary/20">\n Apply Now\n <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>\n </a>\n </div>\n\n <div class="reveal reveal-delay-3 mt-8 flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-brown/40 text-sm font-medium">\n <span>Jul 23–24</span>\n <span class="text-primary/40">·</span>\n <span>talabat HQ Dubai</span>\n <span class="text-primary/40">·</span>\n <span>Applications close <strong class="text-brown/70">July 14, 10:00 AM</strong></span>\n </div>\n </div>\n </section>\n\n <div class="bg-primary py-3 overflow-hidden select-none" aria-hidden="true">\n <div class="marquee-track">
1\n <span class="flex items-center gap-6 px-6 text-white font-extrabold text-sm tracking-[.2em] uppercase whitespace-nowrap">\n <span>Creator Hackathon 26</span><span class="text-white/50 text-lg">✦</span>\n <span>20 Creators</span><span class="text-white/50 text-lg">✦</span>\n <span>AED 10K Prizes</span><span class="text-white/50 text-lg">✦</span>\n <span>Creators-in-Residence</span><span class="text-white/50 text-lg">✦</span>\n <span>Jul 23–24 Dubai</span><span class="text-white/50 text-lg">✦</span>\n <span>Creator Hackathon 26</span><span class="text-white/50 text-lg">✦</span>\n <span>20 Creators</span><span class="text-white/50 text-lg">✦</span>\n <span>AED 10K Prizes</span><span class="text-white/50 text-lg">✦</span>\n <span>Creators-in-Residence</span><span class="text-white/50 text-lg">✦</span>\n <span>Jul 23–24 Dubai</span><span class="text-white/50 text-lg">✦</span>\n </span>\n <span class="flex items-center gap-6 px-6 text-white font-extrabold text-sm tracking-[.2em] uppercase whitespace-nowrap">\n <span>Creator Hackathon 26</span><span class="text-white/50 text-lg">✦</span>\n <span>20 Creators</span><span class="text-white/50 text-lg">✦</span>\n <span>AED 10K Prizes</span><span class="text-white/50 text-lg">✦</span>\n <span>Creators-in-Residence</span><span class="text-white/50 text-lg">✦</span>\n <span>Jul 23–24 Dubai</span><span class="text-white/50 text-lg">✦</span>\n <span>Creator Hackathon 26</span><span class="text-white/50 text-lg">✦</span>\n <span>20 Creators</span><span class="text-white/50 text-lg">✦</span>\n <span>AED 10K Prizes</span><span class="text-white/50 text-lg">✦</span>\n <span>Creators-in-Residence</span><span class="text-white/50 text-lg">✦</span>\n <span>Jul 23–24 Dubai</span><span class="text-white/50 text-lg">✦</span>\n </span>\n </div>\n </div>\n\n <section class="bg-cream py-16 sm:py-24 md:py-36 relative grain" id="cir">\n <div class="max-w-6xl mx-auto px-5 sm:px-8">\n <div class="max-w-3xl mx-auto text-center mb-16 md:mb-24">\n <h2 class="reveal font-extrabold text-2xl sm:text-4xl md:text-5xl lg:text-[3.5rem] text-brown leading-[1.1]">\n We\'re building something that <em class="italic text-primary">doesn\'t exist yet.</em>\n </h2>\n <p class="reveal reveal-delay-1 text-brown/65 text-base sm:text-lg mt-8 leading-relaxed max-w-2xl mx-auto">\n Most brand-creator relationships end when the campaign does. A brief, a post, a payment, and everyone moves on.\n </p>\n <p class="reveal reveal-delay-2 text-brown/80 text-base sm:text-lg mt-5 leading-relaxed max-w-2xl mx-auto font-medium">\n talabat is building Creators‑in‑Residence — a community where a small group of creators work with us long-term. Not as vendors on a roster. As people who genuinely get the brand, have full creative freedom, and help shape what talabat looks and sounds like.\n </p>\n <p class="reveal reveal-delay-3 text-brown/50 text-sm mt-6 max-w-xl mx-auto">\n This is Cohort 1. Year one. Five creators. We\'re building this together — and we\'re looking for people who want to be in the room when it starts.\n </p>\n </div>\n\n <div class="reveal text-center mb-14">\n <span class="inline-block bg-brown text-white font-extrabold text-sm sm:text-base uppercase tracking-widest px-6 py-3 rounded-full">\n You don\'t apply to CIR. You earn your way in.\n </span>\n </div>\n\n <div class="bento max-w-4xl mx-auto">\n <div class="reveal bg-white rounded-2xl p-7 sm:p-8 card-lift bento-wide">\n <div class="flex items-start gap-4">\n <div class="w-12 h-12 bg-primary rounded-xl flex items-center justify-center shrink-0">\n <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
1<path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>\n </div>\n <div>\n <h3 class="font-bold text-brown text-lg">A yearly retainer contract</h3>\n <p class="text-brown/60 text-sm mt-1 leading-relaxed">A real commitment, not a one-off fee. You\'re part of this for the long haul.</p>\n </div>\n </div>\n </div>\n\n <div class="reveal reveal-delay-1 bg-white rounded-2xl p-7 sm:p-8 card-lift">\n <div class="w-12 h-12 bg-primary rounded-xl flex items-center justify-center mb-4">\n <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>\n </div>\n <h3 class="font-bold text-brown text-lg">Full creative freedom</h3>\n <p class="text-brown/60 text-sm mt-1 leading-relaxed">Your voice, your format, your ideas. We don\'t do scripts.</p>\n </div>\n\n <div class="reveal reveal-delay-1 bg-white rounded-2xl p-7 sm:p-8 card-lift">\n <div class="w-12 h-12 bg-primary rounded-xl flex items-center justify-center mb-4">\n <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/></svg>\n </div>\n <h3 class="font-bold text-brown text-lg">Shape talabat\'s creator strategy</h3>\n <p class="text-brown/60 text-sm mt-1 leading-relaxed">You\'re in the room, building this with us.</p>\n </div>\n\n <div class="reveal reveal-delay-2 bg-white rounded-2xl p-7 sm:p-8 card-lift">\n <div class="w-12 h-12 bg-primary rounded-xl flex items-center justify-center mb-4">\n <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>\n </div>\n <h3 class="font-bold text-brown text-lg">Industry expert sessions</h3>\n <p class="text-brown/60 text-sm mt-1 leading-relaxed">Ongoing development with people who actually know what works.</p>\n </div>\n\n <div class="reveal reveal-delay-2 bg-white rounded-2xl p-7 sm:p-8 card-lift">\n <div class="w-12 h-12 bg-primary rounded-xl flex items-center justify-center mb-4">\n <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>\n </div>\n <h3 class="font-bold text-brown text-lg">Jam sessions</h3>\n <p class="text-brown/60 text-sm mt-1 leading-relaxed">Regular creative sessions with the cohort and the talabat team.</p>\n </div>\n\n <div class="reveal reveal-delay-3 bg-white rounded-2xl p-7 sm:p-8 card-lift">\n <div class="w-12 h-12 bg-primary rounded-xl flex items-center justify-center mb-4">\n <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>\n </div>\n <h3 class="font-bold text-brown text-lg">A tools budget</h3>\n <p class="text-brown/60 text-sm mt-1 leading-relaxed">Create at your full potential, not limited by what you can afford.</p>\n </div>\n </div>\n\n <p class="reveal text-center text-brown/40 text-sm mt-8 italic">And more to come as we build this together.</p>\n </div>\n </section>\n\n <section class="bg-white py-16 sm:py-24 md:py-36" id="hackathon">\n <div class="max-w-6xl mx-auto px-5 sm:px-8">\n <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">\n <div>\n <div class="reveal">\n <img src="/assets/images/creators-in-residence/hackathon-logo-dark.png" alt="Creator Hackathon \'26" class="w-40 sm:w-48 md:w-56 mb-8">\n </div>\n <h2 class="reveal reveal-delay-1 font-extrabold text-2xl sm:text-4xl md:text-5xl text-brown leading-[1.1]">\n Creator Hackathon 26 is how we <em class="italic text-primary">find you.</em>\n </h2>\n <p class="reveal reveal-delay-2 text-brown/65 text-base sm:text-lg mt-6 leading-relaxed">\n We could scroll TikTok and DM people. But that only finds who\'s already visible. The best creators for talabat might be someone with 9,000 followers who makes their flatmate cry-laugh over a Mart order at 2am. We\'d never find them from a spreadsheet.\n </p>\n <p class="reveal reveal-delay-3 text-brown/80 text-base sm:text-lg mt-5 leading-relaxed font-medium">\n So we built a hackathon.\n </p>\n <p class="reveal reveal-delay-3 text-brown/65 text-base sm:text-lg mt-5 leading-relaxed">\n Two days at talabat HQ in Dubai. Day one: you experience the real talabat — the riders, the kitchens, the Mart pickers, the people behind the app. Day t
1wo: you create. Your voice, your format, your ideas. No scripts. No 20-page briefs. Just a short creative compass and the freedom to make what you make best.\n </p>\n <p class="reveal reveal-delay-4 text-brown/80 text-base mt-5 leading-relaxed font-semibold">\n AED 10,000 in prizes for the top 3. And 5 creators — chosen on performance across the event and a competition window after — join CIR.\n </p>\n </div>\n\n <div class="grid grid-cols-2 gap-3 sm:gap-5">\n <div class="reveal bg-cream rounded-2xl p-5 sm:p-8 text-center card-lift">\n <div class="font-extrabold text-4xl sm:text-5xl md:text-6xl text-primary count-up" data-target="20">0</div>\n <div class="text-brown/60 text-xs sm:text-sm mt-2 font-semibold">creators selected</div>\n </div>\n <div class="reveal reveal-delay-1 bg-cream rounded-2xl p-5 sm:p-8 text-center card-lift">\n <div class="font-extrabold text-4xl sm:text-5xl md:text-6xl text-primary count-up" data-target="2">0</div>\n <div class="text-brown/60 text-xs sm:text-sm mt-2 font-semibold">days at talabat HQ</div>\n </div>\n <div class="reveal reveal-delay-2 bg-primary rounded-2xl p-5 sm:p-8 text-center card-lift">\n <div class="font-extrabold text-3xl sm:text-4xl md:text-5xl text-white">10K</div>\n <div class="text-white/60 text-xs sm:text-sm mt-2 font-semibold">AED in prizes</div>\n </div>\n <div class="reveal reveal-delay-3 bg-brown rounded-2xl p-5 sm:p-8 text-center card-lift">\n <div class="font-extrabold text-4xl sm:text-5xl md:text-6xl text-lime count-up" data-target="5">0</div>\n <div class="text-white/60 text-xs sm:text-sm mt-2 font-semibold">join CIR</div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class="bg-primary py-16 sm:py-24 md:py-36 text-white relative grain" id="benef
1its">\n <div class="max-w-6xl mx-auto px-5 sm:px-8">\n <div class="text-center mb-16 md:mb-20">\n <h2 class="reveal font-extrabold text-2xl sm:text-4xl md:text-5xl leading-[1.1]">\n Win or not, you leave with<br class="hidden sm:block"> more than you <em class="italic text-lime">came with.</em>\n </h2>\n <p class="reveal reveal-delay-1 text-white/60 text-base sm:text-lg mt-5 max-w-2xl mx-auto">\n Every one of the 20 creators gets real value out of this. Not a branded tote bag and a LinkedIn post.\n </p>\n </div>\n\n <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 max-w-5xl mx-auto">\n <div class="reveal bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl p-7 card-lift">\n <div class="w-11 h-11 bg-white/15 rounded-xl flex items-center justify-center mb-4">\n <svg class="w-5 h-5 text-white/80" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>\n </div>\n <h3 class="font-bold text-white text-base">A masterclass by TikTok</h3>\n <p class="text-white/70 text-sm mt-2 leading-relaxed">Real craft sessions on hooks, retention, and what\'s actually working in MENA right now.</p>\n </div>\n\n <div class="reveal reveal-delay-1 bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl p-7 card-lift">\n <div class="w-11 h-11 bg-white/15 rounded-xl flex items-center justify-center mb-4">\n <svg class="w-5 h-5 text-white/80" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>\n </div>\n <h3 class="font-bold text-white text-base">talabat immersion with leadership</h3>\n <p class="text-white/70 text-sm mt-2 leading-relaxed">Not a PR session — an honest conversation about what we\'re trying to do and where creators fit.</p>\n </div>\n\n <div class="reveal reveal-delay-2 bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl p-7 card-lift">\n <div class="w-11 h-11 bg-white/15 rounded-xl flex items-center justify-center mb-4">\n <svg class="w-5 h-5 text-white/80" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>\n </div>\n <h3 class="font-bold text-white text-base">Front-line experiences</h3>\n <p class="text-white/70 text-sm mt-2 leading-relaxed">Shadow riders, walk through cloud kitchens, sit with Mart pickers and our community. Stories nobody else can tell.</p>\n </div>\n\n <div class="reveal reveal-delay-2 bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl p-7 card-lift">\n <div class="w-11 h-11 bg-white/15 rounded-xl flex items-center justify-center mb-4">\n <svg class="w-5 h-5 text-white/80" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>\n </div>\n <h3 class="font-bold text-white text-base">Food & transport covered</h3>\n <p class="text-white/70 text-sm mt-2 leading-relaxed">The hackathon costs you nothing to attend.</p>\n </div>\n\n <div class="reveal reveal-delay-3 bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl p-7 card-lift">\n <div class="w-11 h-11 bg-white/15 rounded-xl flex items-center justify-center mb-4">\n <svg class="w-5 h-5 text-white/80" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
1<path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>\n </div>\n <h3 class="font-bold text-white text-base">Exclusive talabat merch</h3>\n <p class="text-white/70 text-sm mt-2 leading-relaxed">For all 20 participants.</p>\n </div>\n\n <div class="reveal reveal-delay-3 bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl p-7 card-lift">\n <div class="w-11 h-11 bg-white/15 rounded-xl flex items-center justify-center mb-4">\n <svg class="w-5 h-5 text-white/80" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>\n </div>\n <h3 class="font-bold text-white text-base">A network of 19 other creators</h3>\n <p class="text-white/70 text-sm mt-2 leading-relaxed">Mixed niches, mixed styles. Relationships that outlast the event.</p>\n </div>\n </div>\n\n <div class="reveal mt-16 md:mt-20 max-w-3xl mx-auto">\n <div class="bg-brown rounded-3xl p-8 sm:p-12 text-center">\n <p class="text-white/40 text-xs font-bold uppercase tracking-[.25em] mb-6">Top 3 prizes</p>\n <div class="grid grid-cols-3 gap-3 sm:gap-8 max-w-md mx-auto">\n <div>\n <div class="font-extrabold text-2xl sm:text-4xl md:text-5xl text-lime">5K</div>\n <div class="text-white/40 text-[10px] sm:text-sm mt-1">1st place</div>\n </div>\n <div>\n <div class="font-extrabold text-2xl sm:text-4xl md:text-5xl text-lime">3K</div>\n <div class="text-white/40 text-[10px] sm:text-sm mt-1">2nd place</div>\n </div>\n <div>\n <div class="font-extrabold text-2xl sm:text-4xl md:text-5xl text-lime">2K</div>\n <div class="text-white/40 text-[10px] sm:text-sm mt-1">3rd place</div>\n </div>\n </div>\n <p class="text-white/25 text-xs mt-5">AED · Total prize pool AED 10,000</p>\n </div>\n\n <p class="reveal text-center text-white/70 text-base sm:text-lg mt-8 leading-relaxed max-w-2xl mx-auto">\n <strong class="text-lime font-bold">5 creators join CIR</strong> — a yearly contract, creative freedom, industry expert sessions, jam sessions, a tools budget, and the chance to shape talabat\'s creator strategy from day one. <em class="text-white/60">The hackathon finds you. The residency keeps you.</em>\n </p>\n </div>\n </div>\n </section>\n\n <section class="bg-cream py-16 sm:py-24 md:py-36 relative grain">\n <div class="max-w-6xl mx-auto px-5 sm:px-8">\n <div class="text-center mb-12 md:mb-20">\n <h2 class="reveal font-extrabold text-2xl sm:text-4xl md:text-5xl text-brown leading-[1.1]">\n Built for small creators who<br class="hidden sm:block"> punch above their <em class="italic text-primary">weight.</em>\n </h2>\n <p class="reveal reveal-delay-1 text-brown/50 text-base sm:text-lg mt-5 max-w-xl mx-auto">\n We\'re not looking for the biggest accounts. We\'re looking for the ones whose followers actually care.\n </p>\n </div>\n\n <div class="grid sm:grid-cols-2 gap-4 max-w-4xl mx-auto">\n <div class="reveal bg-white rounded-2xl border border-cream-dark p-6 sm:p-8 card-lift">\n <h3 class="text-primary font-extrabold text-xs uppercase tracking-[.2em] mb-5">The numbers</h3>\n <ul class="space-y-3">\n <li class="flex items-start gap-3">\n <span class="text-primary mt-1 shrink-0">✦</span>\n <span class="text-brown/80 text-sm leading-relaxed">8K–55K followers on either TikTok or Instagram</span>\n </li>\n <li class="flex items-start gap-3">
1\n <span class="text-primary mt-1 shrink-0">✦</span>\n <span class="text-brown/80 text-sm leading-relaxed">4%+ engagement on TikTok, 2%+ on Instagram</span>\n </li>\n <li class="flex items-start gap-3">\n <span class="text-primary mt-1 shrink-0">✦</span>\n <span class="text-brown/80 text-sm leading-relaxed">UAE-based, 18+, available for both days in Dubai</span>\n </li>\n <li class="flex items-start gap-3">\n <span class="text-primary mt-1 shrink-0">✦</span>\n <span class="text-brown/80 text-sm leading-relaxed">Your primary audience is in the UAE — you create for UAE communities</span>\n </li>\n </ul>\n </div>\n\n <div class="reveal reveal-delay-1 bg-white rounded-2xl border border-cream-dark p-6 sm:p-8 card-lift">\n <h3 class="text-primary font-extrabold text-xs uppercase tracking-[.2em] mb-5">The niches</h3>\n <p class="text-brown/65 text-sm leading-relaxed">\n Any niche that intersects with everyday life. Students, gym culture, late-night cravings, parents, weekend energy, campus life, travellers.\n </p>\n <p class="text-brown/45 text-sm mt-4 leading-relaxed italic">\n If talabat shows up in your world, you belong here.\n </p>\n </div>\n\n <div class="reveal reveal-delay-2 sm:col-span-2 bg-white rounded-2xl border border-cream-dark p-6 sm:p-8 card-lift">\n <h3 class="text-primary font-extrabold text-xs uppercase tracking-[.2em] mb-5">What we actually look at</h3>\n <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">\n <div class="flex items-start gap-3">\n <div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center shrink-0">\n <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>\n </div>\n <div>\n <span class="text-brown font-bold text-sm">Brand fit</span>\n <p class="text-brown/45 text-xs mt-0.5">Does your content world overlap with talabat\'s everyday moments?</p>\n </div>\n </div>\n <div class="flex items-start gap-3">\n <div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center shrink-0">\n <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>\n </div>\n <div>\n <span class="text-brown font-bold text-sm">Content craft</span>\n <p class="text-brown/45 text-xs mt-0.5">Strong hooks, clear voice, formats that hold attention.</p>\n </div>\n </div>\n <div class="flex items-start gap-3">\n <div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center shrink-0">\n <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>\n </div>\n <div>\n <span class="text-brown font-bold text-sm">Audience quality</span>\n <p class="text-brown/45 text-xs mt-0.5">Sends, saves, shares — the signals that matter.</p>\n </div>\n </div>\n <div class="flex items-start gap-3">\n <div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center shrink-0">\n <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
1<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>\n </div>\n <div>\n <span class="text-brown font-bold text-sm">Motivation</span>\n <p class="text-brown/45 text-xs mt-0.5">Energy and intent count. Your application tells us why you want this.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <p class="reveal text-center text-brown/35 text-sm mt-10">Authentic beats polished. If that sounds like you, apply.</p>\n </div>\n </section>\n\n <section class="bg-white py-16 sm:py-24 md:py-36" id="how-it-works">\n <div class="max-w-6xl mx-auto px-5 sm:px-8">\n <div class="text-center mb-16 md:mb-20">\n <h2 class="reveal font-extrabold text-2xl sm:text-4xl md:text-5xl text-brown leading-[1.1]">\n One application. Five steps.<br><em class="italic text-primary">Here\'s the whole picture.</em>\n </h2>\n </div>\n\n <div class="max-w-3xl mx-auto">\n <div class="reveal flex gap-4 sm:gap-8">\n <div class="flex flex-col items-center">\n <div class="w-10 h-10 sm:w-12 sm:h-12 bg-primary rounded-full flex items-center justify-center text-white font-extrabold text-base sm:text-lg shrink-0 dot-active">1</div>\n <div class="w-px bg-primary/20 flex-1 mt-2"></div>\n </div>\n <div class="pb-8 sm:pb-14">\n <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">\n <h3 class="font-extrabold text-lg sm:text-xl text-brown">Apply</h3>\n <span class="text-primary font-bold text-sm">Jul 6–14</span>\n </div>\n <p class="text-brown/60 text-sm sm:text-base mt-2 leading-relaxed">Takes about 10 minutes. Link your socials, answer a few questions, and record a 60-second video telling us why you belong here. That\'s it.</p>\n </div>\n </div>\n\n <div class="reveal flex gap-4 sm:gap-8">\n <div class="flex flex-col items-center">\n <div class="w-10 h-10 sm:w-12 sm:h-12 bg-primary rounded-full flex items-center justify-center text-white font-extrabold text-base sm:text-lg shrink-0">2</div>\n <div class="w-px bg-primary/20 flex-1 mt-2"></div>\n </div>\n <div class="pb-8 sm:pb-14">\n <h3 class="font-extrabold text-lg sm:text-xl text-brown">Get selected</h3>\n <p class="text-brown/60 text-sm sm:text-base mt-2 leading-relaxed">We pick the Top 20 on brand fit, content craft, audience quality, and motivation — not follower count. You\'ll know before the warm-up call on Jul 22.</p>\n <p class="text-brown/40 text-xs mt-2 italic">If you don\'t receive an email from an official talabat.com domain, you didn\'t make the cut.</p>\n </div>\n </div>\n\n <div class="reveal flex gap-4 sm:gap-8">\n <div class="flex flex-col items-center">\n <div class="w-10 h-10 sm:w-12 sm:h-12 bg-primary rounded-full flex items-center justify-center text-white font-extrabold text-base sm:text-lg shrink-0">3</div>\n <div class="w-px bg-primary/20 flex-1 mt-2"></div>\n </div>\n <div class="pb-8 sm:pb-14">\n <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">\n <h3 class="font-extrabold text-lg sm:text-xl text-brown">The hackathon</h3>\n <span class="text-primary font-bold text-sm">Jul 23–24</span>\n </div>\n <p class="text-brown/60 text-sm sm:text-base mt-2 leading-relaxed">Two days at talabat HQ. Day 1: immerse yourself in the brand. Day 2: create and compete — your content, your voice, going live together.</p>\n </div>\n </div>\n\n <div class="reveal flex gap-4 sm:gap-8">\n <div class="flex flex-col items-center">\n <div class="w-10 h-10 sm:w-12 sm:h-12 bg-primary rounded-full flex items-center justify-center text-white font-extrabold text-base sm:text-lg shrink-0">4</div>\n <div class="w-px bg-primary/20 flex-1 mt-2"></div>\n </div>\n <div class="pb-8 sm:pb-14">\n <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">\n <h3 class="font-extrabold text-lg sm:text-xl text-brown">The competition window</h3>
1\n <span class="text-primary font-bold text-sm">Jul 25 – Aug 2</span>\n </div>\n <p class="text-brown/60 text-sm sm:text-base mt-2 leading-relaxed">Keep creating from your own channels. We watch how your content travels, how your audience responds, and how consistently you show up.</p>\n </div>\n </div>\n\n <div class="reveal flex gap-4 sm:gap-8">\n <div class="flex flex-col items-center">\n <div class="w-10 h-10 sm:w-12 sm:h-12 bg-lime rounded-full flex items-center justify-center text-brown font-extrabold text-base sm:text-lg shrink-0 border-4 border-brown">5</div>\n </div>\n <div>\n <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">\n <h3 class="font-extrabold text-lg sm:text-xl text-brown">CIR Cohort 1 revealed</h3>\n <span class="text-primary font-bold text-sm">Aug 14</span>\n </div>\n <p class="text-brown/60 text-sm sm:text-base mt-2 leading-relaxed">Top 3 take home the prize money. Five creators join talabat\'s Creators‑in‑Residence.</p>\n </div>\n </div>\n </div>\n\n <div class="reveal mt-16 max-w-2xl mx-auto">\n <div class="bg-white rounded-2xl overflow-hidden shadow-sm">\n <div class="bg-brown px-4 sm:px-6 py-3">\n <h3 class="text-white font-bold text-xs sm:text-sm uppercase tracking-wider">Key dates at a glance</h3>\n </div>\n <div class="divide-y divide-cream-dark text-xs sm:text-sm">\n <div class="flex justify-between items-center px-4 sm:px-6 py-3 sm:py-3.5">\n <span class="text-brown/60 shrink-0 w-20 sm:w-28">Jul 6</span>\n <span class="text-brown font-semibold text-right">Applications open</span>\n </div>\n <div class="flex justify-between items-center px-4 sm:px-6 py-3 sm:py-3.5 bg-cream/50">\n <span class="text-primary font-bold shrink-0 w-20 sm:w-28">Jul 14</span>\n <span class="text-brown font-semibold text-right">Applications close <span class="text-brown/40 font-normal hidden sm:inline">(10:00 AM)</span></span>\n </div>\n <div class="flex justify-between items-center px-4 sm:px-6 py-3 sm:py-3.5">\n <span class="text-brown/60 shrink-0 w-20 sm:w-28">Jul 22</span>\n <span class="text-brown font-semibold text-right">Warm-up call</span>\n </div>\n <div class="flex justify-between items-center px-4 sm:px-6 py-3 sm:py-3.5 bg-primary/5">\n <span class="text-primary font-bold shrink-0 w-20 sm:w-28">Jul 23</span>\n <span class="text-brown font-bold text-right">Day 1 — Immerse</span>\n </div>\n <div class="flex justify-between items-center px-4 sm:px-6 py-3 sm:py-3.5 bg-primary/5">\n <span class="text-primary font-bold shrink-0 w-20 sm:w-28">Jul 24</span>\n <span class="text-brown font-bold text-right">Day 2 — Compete + GO LIVE</span>\n </div>\n <div class="flex justify-between items-center px-4 sm:px-6 py-3 sm:py-3.5">\n <span class="text-brown/60 shrink-0 w-20 sm:w-28">Jul 25 – Aug 2</span>\n <span class="text-brown font-semibold text-right">Competition window</span>\n </div>\n <div class="flex justify-between items-center px-4 sm:px-6 py-3 sm:py-3.5 bg-lime/10">\n <span class="text-brown font-bold shrink-0 w-20 sm:w-28">Aug 14</span>\n <span class="text-brown font-bold text-right">CIR Cohort 1 revealed ✦</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class="bg-cream py-16 sm:py-24 md:py-36" id="faq">\n <div class="max-w-3xl mx-auto px-5 sm:px-8">\n <h2 class="reveal font-extrabold text-2xl sm:text-4xl md:text-5xl text-brown text-center leading-[1.1] mb-10 sm:mb-14">\n The fine print <span class="text-brown/30 font-light">(but friendlier)</span>\n </h2>\n\n <div class="space-y-0 divide-y divide-brown/10">\n <div class="faq-item">\n <button onclick="this.parentElement.classList.toggle(\'open\')" class="w-full flex justify-between items-center py-4 sm:py-6 text-left group min-h-[48px]">
1\n <span class="font-bold text-brown text-base sm:text-lg pr-4 group-hover:text-primary transition-colors">What are the follower requirements?</span>\n <svg class="faq-chevron w-5 h-5 text-primary shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>\n </button>\n <div class="faq-body">\n <div><p class="text-brown/60 text-sm sm:text-base pb-6 leading-relaxed">8,000–55,000 followers on either TikTok or Instagram, with at least 4% engagement rate on TikTok and 2% on Instagram. We care about real engagement over raw reach — a tight community is exactly what we\'re looking for.</p></div>\n </div>\n </div>\n\n <div class="faq-item">\n <button onclick="this.parentElement.classList.toggle(\'open\')" class="w-full flex justify-between items-center py-4 sm:py-6 text-left group min-h-[48px]">\n <span class="font-bold text-brown text-base sm:text-lg pr-4 group-hover:text-primary transition-colors">What\'s the application like?</span>\n <svg class="faq-chevron w-5 h-5 text-primary shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>\n </button>\n <div class="faq-body">\n <div><p class="text-brown/60 text-sm sm:text-base pb-6 leading-relaxed">About 10 minutes. Link your social profiles, answer a few questions, and record a 60-second video telling us why you want in. Low barrier, high signal.</p></div>\n </div>\n </div>\n\n <div class="faq-item">\n <button onclick="this.parentElement.classList.toggle(\'open\')" class="w-full flex justify-between items-center py-4 sm:py-6 text-left group min-h-[48px]">\n <span class="font-bold text-brown text-base sm:text-lg pr-4 group-hover:text-primary transition-colors">What niches are you looking for?</span>\n <svg class="faq-chevron w-5 h-5 text-primary shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>\n </button>\n <div class="faq-body">\n <div><p class="text-brown/60 text-sm sm:text-base pb-6 leading-relaxed">All of them — as long as they intersect with everyday life. Students, gym culture, late-night cravings, parents, weekend energy, campus life, singles, young couples, travellers. If talabat shows up in your niche, you belong here.</p></div>\n </div>\n </div>\n\n <div class="faq-item">\n <button onclick="this.parentElement.classList.toggle(\'open\')" class="w-full flex justify-between items-center py-4 sm:py-6 text-left group min-h-[48px]">\n <span class="font-bold text-brown text-base sm:text-lg pr-4 group-hover:text-primary transition-colors">What platforms count?</span>\n <svg class="faq-chevron w-5 h-5 text-primary shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>\n </button>\n <div class="faq-body">\n <div><p class="text-brown/60 text-sm sm:text-base pb-6 leading-relaxed">TikTok-first, but we welcome IG Reels, YouTube Shorts and long-form, and others. Strong TikTok presence gives you an edge.</p></div>\n </div>\n </div>\n\n <div class="faq-item">\n <button onclick="this.parentElement.classList.toggle(\'open\')" class="w-full flex justify-between items-center py-4 sm:py-6 text-left group min-h-[48px]">\n <span class="font-bold text-brown text-base sm:text-lg pr-4 group-hover:text-primary transition-colors">Do I need to be in Dubai?</span>\n <svg class="faq-chevron w-5 h-5 text-primary shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>\n </button>\n <div class="faq-body">\n <div><p class="text-brown/60 text-sm sm:text-base pb-6 leading-relaxed">You need to be UAE-based (18+) and available in Dubai for the warm-up call (Jul 22), both event days (Jul 23–24), and the competition window (Jul 25 – Aug 2). Transport within the UAE is covered.</p></div>\n </div>\n </div>\n\n <div class="faq-item">\n <button onclick="this.parentElement.classList.toggle(\'open\')" class="w-full flex justify-between items-center py-4 sm:py-6 text-left group min-h-[48px]">
1\n <span class="font-bold text-brown text-base sm:text-lg pr-4 group-hover:text-primary transition-colors">Is travel and food covered?</span>\n <svg class="faq-chevron w-5 h-5 text-primary shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>\n </button>\n <div class="faq-body">\n <div><p class="text-brown/60 text-sm sm:text-base pb-6 leading-relaxed">Yes — food and transport within the UAE are covered for all 20 participants, capped reasonably. Coming to the hackathon costs you nothing.</p></div>\n </div>\n </div>\n\n <div class="faq-item">\n <button onclick="this.parentElement.classList.toggle(\'open\')" class="w-full flex justify-between items-center py-4 sm:py-6 text-left group min-h-[48px]">\n <span class="font-bold text-brown text-base sm:text-lg pr-4 group-hover:text-primary transition-colors">What if I don\'t win the hackathon prizes?</span>\n <svg class="faq-chevron w-5 h-5 text-primary shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>\n </button>\n <div class="faq-body">\n <div><p class="text-brown/60 text-sm sm:text-base pb-6 leading-relaxed">You still leave with a TikTok masterclass, front-line brand access no one else gets, a creator network, and exclusive talabat merch. Nobody walks away empty-handed.</p></div>\n </div>\n </div>\n\n <div class="faq-item">\n <button onclick="this.parentElement.classList.toggle(\'open\')" class="w-full flex justify-between items-center py-4 sm:py-6 text-left group min-h-[48px]">\n <span class="font-bold text-brown text-base sm:text-lg pr-4 group-hover:text-primary transition-colors">What exactly is Creators-in-Residence?</span>\n <svg class="faq-chevron w-5 h-5 text-primary shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>\n </button>\n <div class="faq-body">\n <div><p class="text-brown/60 text-sm sm:text-base pb-6 leading-relaxed">talabat\'s creator community — the first of its kind. Five creators from the hackathon are selected into a yearly contract with a retainer, full creative freedom, industry expert sessions, jam sessions, a tools budget, and a real voice in shaping talabat\'s creator strategy. This is Cohort 1. You help build it.</p></div>\n </div>\n </div>\n\n <div class="faq-item">\n <button onclick="this.parentElement.classList.toggle(\'open\')" class="w-full flex justify-between items-center py-4 sm:py-6 text-left group min-h-[48px]">\n <span class="font-bold text-brown text-base sm:text-lg pr-4 group-hover:text-primary transition-colors">Is this the only way into CIR?</span>\n <svg class="faq-chevron w-5 h-5 text-primary shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>\n </button>\n <div class="faq-body">\n <div><p class="text-brown/60 text-sm sm:text-base pb-6 leading-relaxed">For now, yes. Creator Hackathon 26 is the first and only entry point into Cohort 1.</p></div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class="bg-primary py-20 sm:py-28 md:py-40 text-white relative overflow-hidden grain" id="apply">\n <div class="absolute top-[15%] left-[10%] text-brown/15 text-6xl spin-slow select-none pointer-events-none" aria-hidden="true">✦</div>\n <div class="absolute bottom-[20%] right-[12%] text-lime/20 text-4xl spin-slow select-none pointer-events-none" style="animation-duration:10s" aria-hidden="true">✦</div>\n\n <div class="max-w-3xl mx-auto px-5 sm:px-8 text-center relative z-10">\n <h2 class="reveal font-extrabold text-3xl sm:text-5xl md:text-6xl lg:text-7xl leading-[1.05]">\n 10 minutes.<br>One video. <em class="italic text-lime">That\'s it.</em>\n </h2>\n <p class="reveal reveal-delay-1 text-white/70 text-base sm:text-lg mt-8 max-w-xl mx-auto leading-relaxed">\n AED 10,000 in prizes. A spot in talabat\'s first-ever creator community. And it starts with a 60-second clip telling us why you belong here.\n </p>\n <div class="reveal reveal-delay-2 mt-12">\n <a href="https://forms.gle/L6jqifZpTZStQvXL8" target="_blank" class="inline-flex items-center gap-2 sm:gap-3 rounded-full bg-lime text-brown font-extrabold text-lg sm:text-xl px-8 sm:px-12 py-4 sm:py-5 hover:bg-lime-dark transition-all pulse-glow shadow-lg shadow-lime/20">\n Apply Now\n <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2.5" viewB
1ox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>\n </a>\n </div>\n <p class="reveal reveal-delay-3 text-white/35 text-sm mt-8">\n Applications open Jul 6, close Jul 14 · Questions? <a href="mailto:[email protected]" class="underline hover:text-white/50 transition-colors">[email protected]</a>\n </p>\n </div>\n </section>\n\n <footer class="bg-brown py-14">\n <div class="max-w-7xl mx-auto px-5 sm:px-8">\n <div class="flex flex-col md:flex-row justify-between items-start gap-8">\n <div>\n <img src="/assets/images/creators-in-residence/talabat-logo.png" alt="talabat" style="height:3rem">\n </div>\n\n <div class="flex gap-3">\n <a href="https://www.tiktok.com/@talabat" class="w-10 h-10 bg-white/8 rounded-full flex items-center justify-center hover:bg-white/15 transition-colors" aria-label="TikTok">\n <svg class="w-[18px] h-[18px] fill-white/60" viewBox="0 0 24 24"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1v-3.5a6.37 6.37 0 00-.79-.05A6.34 6.34 0 003.15 15.2a6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.34-6.34V8.93a8.24 8.24 0 004.76 1.51v-3.4a4.85 4.85 0 01-1-.35z"/></svg>\n </a>\n <a href="https://www.instagram.com/talabat" class="w-10 h-10 bg-white/8 rounded-full flex items-center justify-center hover:bg-white/15 transition-colors" aria-label="Instagram">\n <svg class="w-[18px] h-[18px] fill-white/60" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>\n </a>\n <a href="https://www.linkedin.com/company/talabat-com/" class="w-10 h-10 bg-white/8 rounded-full flex items-center justify-center hover:bg-white/15 transition-colors" aria-label="LinkedIn">\n <svg class="w-[18px] h-[18px] fill-white/60" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>\n </a>\n <a href="https://www.youtube.com/@Talabat" class="w-10 h-10 bg-white/8 rounded-full flex items-center justify-center hover:bg-white/15 transition-colors" aria-label="YouTube">\n <svg class="w-[18px] h-[18px] fill-white/60" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>\n </a>\n </div>\n </div>\n\n <div class="border-t border-white/8 mt-10 pt-8">\n <p class="text-white/40 text-sm">talabat HQ · Office B06, City Walk, Dubai, United Arab Emirates</p>\n </div>\n\n <div class="border-t border-white/8 mt-6 pt-6">\n <p class="text-white/35 text-xs leading-relaxed max-w-4xl">\n Creator Hackathon 26 is organised by Talabat Holding PLC. By
1submitting an application you agree to these terms. talabat reserves the right to modify, postpone, or cancel the event at any time without prior notice. All selection and judging decisions are made at talabat\'s sole discretion and are final. Prizes are subject to applicable terms, conditions, and UAE regulations; prize values are in AED and may be subject to tax obligations of the recipient. talabat shall not be liable for any direct, indirect, or consequential loss or damage arising from participation in or inability to participate in the event. Eligibility requirements will be verified; any misrepresentation may result in disqualification. This event is governed by the laws of the United Arab Emirates.\n </p>\n </div>\n\n <div class="border-t border-white/8 mt-6 pt-6 flex flex-col sm:flex-row justify-between items-center gap-4">\n <p class="text-white/40 text-sm">© 2026 Talabat Holding PLC</p>\n <a href="https://corporate.talabat.com/privacy/" class="text-white/40 text-sm hover:text-white/60 transition-colors">Privacy</a>\n </div>\n </div>\n </footer>\n'}}),(0,r.jsx)(c(),{id:"interaction-script",strategy:"lazyOnload",children:"\n var revealEls = document.querySelectorAll('.reveal');\n var revealObserver = new IntersectionObserver(function(entries) {\n entries.forEach(function(e) { if (e.isIntersecting) { e.target.classList.add('visible'); revealObserver.unobserve(e.target); } });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n revealEls.forEach(function(el) { revealObserver.observe(el); });\n\n var nav = document.getElementById('nav');\n window.addEventListener('scroll', function() {\n nav.classList.toggle('nav-scrolled', window.scrollY > 80);\n }, { passive: true });\n\n var menuToggle = document.getElementById('menu-toggle');\n var menuClose = document.getElementById('menu-close');\n var mobileMenu = document.getElementById('mobile-menu');\n var overlay = document.getElementById('overlay');\n function openMenu() { mobileMenu.classList.add('open'); overlay.classList.remove('hidden'); document.body.style.overflow = 'hidden'; }\n function closeMenu() { mobileMenu.classList.remove('open'); overlay.classList.add('hidden'); document.body.style.overflow = ''; }\n menuToggle.addEventListener('click', openMenu);\n menuClose.addEventListener('click', closeMenu);\n overlay.addEventListener('click', closeMenu);\n document.querySelectorAll('.nav-link-mobile').forEach(function(l) { l.addEventListener('click', closeMenu); });\n\n var countEls = document.querySelectorAll('.count-up');\n var countObserver = new IntersectionObserver(function(entries) {\n entries.forEach(function(e) {\n if (e.isIntersecting) {\n var target = parseInt(e.target.dataset.target);\n var current = 0;\n var step = Math.max(1, Math.floor(target / 30));\n var timer = setInterval(function() {\n current += step;\n if (current >= target) { current = target; clearInterval(timer); }\n e.target.textContent = current;\n }, 30);\n countObserver.unobserve(e.target);\n }\n });\n }, { threshold: 0.5 });\n countEls.forEach(function(el) { countObserver.observe(el); });\n"})]})},p=function(){return(0,r.jsx)(m,{})};p.getInitialProps=(0,a.Z)(function(){return(0,s.__generator)(this,function(e){return[2,{namespacesRequired:(0,o.Dj)([])}]})});var x=p},4298:function(e,t,n){e.exports=n(20699)}},function(e){e.O(0,[9774,2888,179],function(){return e(e.s=50921)}),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.