Alliance Insurance - Hero Slider<\/title>\r\n\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.6.0\/css\/all.min.css\"\/>\r\n\r\n<style>\r\n .slide {\r\n opacity: 0;\r\n transition: opacity 1s ease-in-out;\r\n }\r\n .slide.active {\r\n opacity: 1;\r\n }\r\n\r\n .title-anim {\r\n animation: floatIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;\r\n }\r\n\r\n @keyframes floatIn {\r\n 0% { opacity: 0; transform: translateY(60px) scale(0.96); filter: blur(6px); }\r\n 60% { opacity: 1; filter: blur(0px); }\r\n 100% { opacity: 1; transform: translateY(0) scale(1); }\r\n }\r\n\r\n .nav-line {\r\n width: 40px;\r\n height: 4px;\r\n background: rgba(255,255,255,0.4);\r\n border-radius: 10px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .nav-line.active {\r\n width: 70px;\r\n background: #FF9D00;\r\n }\r\n<\/style>\r\n<\/head>\r\n\r\n<body class=\"font-sans\">\r\n\r\n<div class=\"relative h-screen overflow-hidden\">\r\n\r\n \r\n <div id=\"slides\">\r\n\r\n <div class=\"slide active absolute inset-0 bg-cover bg-center\"\r\n style=\"background-image:url('https:\/\/picsum.photos\/id\/1015\/1920\/1080')\">\r\n <div class=\"absolute inset-0 bg-black\/60\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"slide absolute inset-0 bg-cover bg-center\"\r\n style=\"background-image:url('https:\/\/picsum.photos\/id\/201\/1920\/1080')\">\r\n <div class=\"absolute inset-0 bg-black\/60\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"slide absolute inset-0 bg-cover bg-center\"\r\n style=\"background-image:url('https:\/\/picsum.photos\/id\/866\/1920\/1080')\">\r\n <div class=\"absolute inset-0 bg-black\/60\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"absolute inset-0 flex flex-col z-10 text-white\">\r\n\r\n \r\n <div class=\"flex-1 flex flex-col items-center justify-center px-6 text-center\">\r\n\r\n <h1 id=\"title\"\r\n class=\"text-3xl md:text-5xl font-bold max-w-4xl mb-[50px]\"><\/h1>\r\n\r\n \r\n <div class=\"flex flex-col md:flex-row gap-5\">\r\n\r\n <a href=\"#\"\r\n class=\"bg-[#00164E] hover:bg-[#002266]\r\n px-8 py-4 rounded-xl font-semibold text-base\r\n flex items-center justify-center gap-2\r\n w-[280px] shadow-md transition text-white\">\r\n <i class=\"fa-solid fa-car\"><\/i>\r\n Get Motor Insurance\r\n <\/a>\r\n\r\n <a href=\"#\"\r\n class=\"bg-[#FF9D00] hover:bg-white\r\n text-black\r\n px-8 py-4 rounded-xl font-semibold text-base\r\n flex items-center justify-center gap-2\r\n w-[280px]\r\n transition-all duration-300\">\r\n <i class=\"fa-solid fa-list-check\"><\/i>\r\n Explore Products\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"pb-10 px-10 md:px-20 flex justify-start\">\r\n\r\n <div class=\"flex flex-row gap-5\">\r\n\r\n \r\n <a href=\"https:\/\/wa.me\/255777000001\"\r\n target=\"_blank\"\r\n class=\"group flex items-center gap-4\r\n bg-white\/10 backdrop-blur-md\r\n border border-white\/15\r\n hover:bg-white\/15 hover:-translate-y-1\r\n px-5 py-4 rounded-2xl\r\n w-[280px]\r\n transition-all duration-300\">\r\n\r\n <div class=\"bg-white\/10 p-2.5 rounded-xl transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6\">\r\n <i class=\"fa-brands fa-whatsapp text-xl text-green-400\"><\/i>\r\n <\/div>\r\n\r\n <div class=\"flex-1\">\r\n <div class=\"font-semibold text-base\">Herichat<\/div>\r\n <div class=\"text-sm text-[#FF9D00]\">+255 777 000 001<\/div>\r\n <\/div>\r\n\r\n <i class=\"fa-solid fa-arrow-right text-base opacity-60\r\n group-hover:opacity-100\r\n group-hover:translate-x-2\r\n transition-all duration-300\"><\/i>\r\n\r\n <\/a>\r\n\r\n \r\n <a href=\"#\"\r\n class=\"group flex items-center gap-4\r\n bg-white\/10 backdrop-blur-md\r\n border border-white\/15\r\n hover:bg-white\/15 hover:-translate-y-1\r\n px-5 py-4 rounded-2xl\r\n w-[280px]\r\n transition-all duration-300\">\r\n\r\n <div class=\"bg-white\/10 p-2.5 rounded-xl transition-transform duration-300 group-hover:scale-110 group-hover:-rotate-6\">\r\n <i class=\"fa-solid fa-shield-halved text-xl\"><\/i>\r\n <\/div>\r\n\r\n <div class=\"flex-1\">\r\n <div class=\"font-semibold text-base\">Heribima<\/div>\r\n <div class=\"text-sm text-[#FF9D00]\">Quick claims<\/div>\r\n <\/div>\r\n\r\n <i class=\"fa-solid fa-arrow-right text-base opacity-60\r\n group-hover:opacity-100\r\n group-hover:translate-x-2\r\n transition-all duration-300\"><\/i>\r\n\r\n <\/a>\r\n\r\n \r\n <a href=\"#\"\r\n class=\"group flex items-center gap-4\r\n bg-white\/10 backdrop-blur-md\r\n border border-white\/15\r\n hover:bg-white\/15 hover:-translate-y-1\r\n px-5 py-4 rounded-2xl\r\n w-[280px]\r\n transition-all duration-300\">\r\n\r\n <div class=\"bg-white\/10 p-2.5 rounded-xl transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6\">\r\n <i class=\"fa-solid fa-camera text-xl\"><\/i>\r\n <\/div>\r\n\r\n <div class=\"flex-1\">\r\n <div class=\"font-semibold text-base\">Heriphoto<\/div>\r\n <div class=\"text-sm text-[#FF9D00]\">Upload photos<\/div>\r\n <\/div>\r\n\r\n <i class=\"fa-solid fa-arrow-right text-base opacity-60\r\n group-hover:opacity-100\r\n group-hover:translate-x-2\r\n transition-all duration-300\"><\/i>\r\n\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"pb-10 flex justify-center\">\r\n\r\n <div class=\"flex gap-3\">\r\n\r\n <div class=\"nav-line active\" onclick=\"goToSlide(0)\"><\/div>\r\n <div class=\"nav-line\" onclick=\"goToSlide(1)\"><\/div>\r\n <div class=\"nav-line\" onclick=\"goToSlide(2)\"><\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\nconst slides = document.querySelectorAll(\".slide\");\r\nconst lines = document.querySelectorAll(\".nav-line\");\r\n\r\nconst titles = [\r\n \"Your Shield Against the Unexpected.\",\r\n \"Secure Tomorrow, Today.\",\r\n \"Your Future, Protected.\"\r\n];\r\n\r\nlet index = 0;\r\nconst title = document.getElementById(\"title\");\r\n\r\nfunction render() {\r\n slides.forEach((s, i) => s.classList.toggle(\"active\", i === index));\r\n lines.forEach((l, i) => l.classList.toggle(\"active\", i === index));\r\n\r\n title.classList.remove(\"title-anim\");\r\n title.textContent = titles[index];\r\n void title.offsetWidth;\r\n title.classList.add(\"title-anim\");\r\n}\r\n\r\nfunction goToSlide(i) {\r\n index = i;\r\n render();\r\n}\r\n\r\nfunction next() {\r\n index = (index + 1) % slides.length;\r\n render();\r\n}\r\n\r\nsetInterval(next, 6000);\r\nrender();\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Alliance Insurance – Hero Slider Get Motor Insurance Explore Products Herichat +255 777 000 001 Heribima Quick claims Heriphoto Upload photos<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.heritageinsurance.co.tz\/index.php\/wp-json\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heritageinsurance.co.tz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.heritageinsurance.co.tz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.heritageinsurance.co.tz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heritageinsurance.co.tz\/index.php\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":16,"href":"https:\/\/www.heritageinsurance.co.tz\/index.php\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":32,"href":"https:\/\/www.heritageinsurance.co.tz\/index.php\/wp-json\/wp\/v2\/pages\/12\/revisions\/32"}],"wp:attachment":[{"href":"https:\/\/www.heritageinsurance.co.tz\/index.php\/wp-json\/wp\/v2\/media?parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nAlliance Insurance - Hero Slider<\/title>\r\n\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.6.0\/css\/all.min.css\"\/>\r\n\r\n<style>\r\n .slide {\r\n opacity: 0;\r\n transition: opacity 1s ease-in-out;\r\n }\r\n .slide.active {\r\n opacity: 1;\r\n }\r\n\r\n .title-anim {\r\n animation: floatIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;\r\n }\r\n\r\n @keyframes floatIn {\r\n 0% { opacity: 0; transform: translateY(60px) scale(0.96); filter: blur(6px); }\r\n 60% { opacity: 1; filter: blur(0px); }\r\n 100% { opacity: 1; transform: translateY(0) scale(1); }\r\n }\r\n\r\n .nav-line {\r\n width: 40px;\r\n height: 4px;\r\n background: rgba(255,255,255,0.4);\r\n border-radius: 10px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .nav-line.active {\r\n width: 70px;\r\n background: #FF9D00;\r\n }\r\n<\/style>\r\n<\/head>\r\n\r\n<body class=\"font-sans\">\r\n\r\n<div class=\"relative h-screen overflow-hidden\">\r\n\r\n \r\n <div id=\"slides\">\r\n\r\n <div class=\"slide active absolute inset-0 bg-cover bg-center\"\r\n style=\"background-image:url('https:\/\/picsum.photos\/id\/1015\/1920\/1080')\">\r\n <div class=\"absolute inset-0 bg-black\/60\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"slide absolute inset-0 bg-cover bg-center\"\r\n style=\"background-image:url('https:\/\/picsum.photos\/id\/201\/1920\/1080')\">\r\n <div class=\"absolute inset-0 bg-black\/60\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"slide absolute inset-0 bg-cover bg-center\"\r\n style=\"background-image:url('https:\/\/picsum.photos\/id\/866\/1920\/1080')\">\r\n <div class=\"absolute inset-0 bg-black\/60\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"absolute inset-0 flex flex-col z-10 text-white\">\r\n\r\n \r\n <div class=\"flex-1 flex flex-col items-center justify-center px-6 text-center\">\r\n\r\n <h1 id=\"title\"\r\n class=\"text-3xl md:text-5xl font-bold max-w-4xl mb-[50px]\"><\/h1>\r\n\r\n \r\n <div class=\"flex flex-col md:flex-row gap-5\">\r\n\r\n <a href=\"#\"\r\n class=\"bg-[#00164E] hover:bg-[#002266]\r\n px-8 py-4 rounded-xl font-semibold text-base\r\n flex items-center justify-center gap-2\r\n w-[280px] shadow-md transition text-white\">\r\n <i class=\"fa-solid fa-car\"><\/i>\r\n Get Motor Insurance\r\n <\/a>\r\n\r\n <a href=\"#\"\r\n class=\"bg-[#FF9D00] hover:bg-white\r\n text-black\r\n px-8 py-4 rounded-xl font-semibold text-base\r\n flex items-center justify-center gap-2\r\n w-[280px]\r\n transition-all duration-300\">\r\n <i class=\"fa-solid fa-list-check\"><\/i>\r\n Explore Products\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"pb-10 px-10 md:px-20 flex justify-start\">\r\n\r\n <div class=\"flex flex-row gap-5\">\r\n\r\n \r\n <a href=\"https:\/\/wa.me\/255777000001\"\r\n target=\"_blank\"\r\n class=\"group flex items-center gap-4\r\n bg-white\/10 backdrop-blur-md\r\n border border-white\/15\r\n hover:bg-white\/15 hover:-translate-y-1\r\n px-5 py-4 rounded-2xl\r\n w-[280px]\r\n transition-all duration-300\">\r\n\r\n <div class=\"bg-white\/10 p-2.5 rounded-xl transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6\">\r\n <i class=\"fa-brands fa-whatsapp text-xl text-green-400\"><\/i>\r\n <\/div>\r\n\r\n <div class=\"flex-1\">\r\n <div class=\"font-semibold text-base\">Herichat<\/div>\r\n <div class=\"text-sm text-[#FF9D00]\">+255 777 000 001<\/div>\r\n <\/div>\r\n\r\n <i class=\"fa-solid fa-arrow-right text-base opacity-60\r\n group-hover:opacity-100\r\n group-hover:translate-x-2\r\n transition-all duration-300\"><\/i>\r\n\r\n <\/a>\r\n\r\n \r\n <a href=\"#\"\r\n class=\"group flex items-center gap-4\r\n bg-white\/10 backdrop-blur-md\r\n border border-white\/15\r\n hover:bg-white\/15 hover:-translate-y-1\r\n px-5 py-4 rounded-2xl\r\n w-[280px]\r\n transition-all duration-300\">\r\n\r\n <div class=\"bg-white\/10 p-2.5 rounded-xl transition-transform duration-300 group-hover:scale-110 group-hover:-rotate-6\">\r\n <i class=\"fa-solid fa-shield-halved text-xl\"><\/i>\r\n <\/div>\r\n\r\n <div class=\"flex-1\">\r\n <div class=\"font-semibold text-base\">Heribima<\/div>\r\n <div class=\"text-sm text-[#FF9D00]\">Quick claims<\/div>\r\n <\/div>\r\n\r\n <i class=\"fa-solid fa-arrow-right text-base opacity-60\r\n group-hover:opacity-100\r\n group-hover:translate-x-2\r\n transition-all duration-300\"><\/i>\r\n\r\n <\/a>\r\n\r\n \r\n <a href=\"#\"\r\n class=\"group flex items-center gap-4\r\n bg-white\/10 backdrop-blur-md\r\n border border-white\/15\r\n hover:bg-white\/15 hover:-translate-y-1\r\n px-5 py-4 rounded-2xl\r\n w-[280px]\r\n transition-all duration-300\">\r\n\r\n <div class=\"bg-white\/10 p-2.5 rounded-xl transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6\">\r\n <i class=\"fa-solid fa-camera text-xl\"><\/i>\r\n <\/div>\r\n\r\n <div class=\"flex-1\">\r\n <div class=\"font-semibold text-base\">Heriphoto<\/div>\r\n <div class=\"text-sm text-[#FF9D00]\">Upload photos<\/div>\r\n <\/div>\r\n\r\n <i class=\"fa-solid fa-arrow-right text-base opacity-60\r\n group-hover:opacity-100\r\n group-hover:translate-x-2\r\n transition-all duration-300\"><\/i>\r\n\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"pb-10 flex justify-center\">\r\n\r\n <div class=\"flex gap-3\">\r\n\r\n <div class=\"nav-line active\" onclick=\"goToSlide(0)\"><\/div>\r\n <div class=\"nav-line\" onclick=\"goToSlide(1)\"><\/div>\r\n <div class=\"nav-line\" onclick=\"goToSlide(2)\"><\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\nconst slides = document.querySelectorAll(\".slide\");\r\nconst lines = document.querySelectorAll(\".nav-line\");\r\n\r\nconst titles = [\r\n \"Your Shield Against the Unexpected.\",\r\n \"Secure Tomorrow, Today.\",\r\n \"Your Future, Protected.\"\r\n];\r\n\r\nlet index = 0;\r\nconst title = document.getElementById(\"title\");\r\n\r\nfunction render() {\r\n slides.forEach((s, i) => s.classList.toggle(\"active\", i === index));\r\n lines.forEach((l, i) => l.classList.toggle(\"active\", i === index));\r\n\r\n title.classList.remove(\"title-anim\");\r\n title.textContent = titles[index];\r\n void title.offsetWidth;\r\n title.classList.add(\"title-anim\");\r\n}\r\n\r\nfunction goToSlide(i) {\r\n index = i;\r\n render();\r\n}\r\n\r\nfunction next() {\r\n index = (index + 1) % slides.length;\r\n render();\r\n}\r\n\r\nsetInterval(next, 6000);\r\nrender();\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Alliance Insurance – Hero Slider Get Motor Insurance Explore Products Herichat +255 777 000 001 Heribima Quick claims Heriphoto Upload photos<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.heritageinsurance.co.tz\/index.php\/wp-json\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heritageinsurance.co.tz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.heritageinsurance.co.tz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.heritageinsurance.co.tz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heritageinsurance.co.tz\/index.php\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":16,"href":"https:\/\/www.heritageinsurance.co.tz\/index.php\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":32,"href":"https:\/\/www.heritageinsurance.co.tz\/index.php\/wp-json\/wp\/v2\/pages\/12\/revisions\/32"}],"wp:attachment":[{"href":"https:\/\/www.heritageinsurance.co.tz\/index.php\/wp-json\/wp\/v2\/media?parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}