{"id":10,"date":"2025-09-26T08:50:41","date_gmt":"2025-09-26T08:50:41","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/home\/"},"modified":"2025-09-30T06:10:38","modified_gmt":"2025-09-30T06:10:38","slug":"home","status":"publish","type":"page","link":"https:\/\/ska-blocks.com\/docs\/","title":{"rendered":"Home"},"content":{"rendered":"\n<div class=\"max-lg:-mt-24 space-y-gutter [&amp;_a]:transition-colors wp-block-ska-element\">\n<script>\nskaMousePos = () => ({\n\tx: 0,\n\ty: 0,\n\tinit() {\n\t\tthis.$el.addEventListener('mousemove', e => {\n\t\t\tthis.x = e.offsetX\n\t\t\tthis.y = e.offsetY\n\t\t}, {passive: true})\n\t},\n})\n<\/script>\n\n\n\n<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-gutter wp-block-ska-element\">\n<div x-data=\"skaMousePos()\" class=\"flex relative bg-zinc-50 rounded-2xl hover:shadow-md hover:shadow-zinc-900\/5 transition-shadow group wp-block-ska-element\">\n<div class=\"pointer-events-none wp-block-ska-element\">\n<div class=\"[mask-image:linear-gradient(white,transparent)] absolute inset-0 rounded-2xl group-hover:opacity-50 transition duration-300 wp-block-ska-element\">\n<svg aria-hidden=\"true\" class=\"absolute inset-x-0 -inset-y-1\/3 w-full h-[160%] skew-y-[-18deg] fill-black\/[0.02] stroke-black\/5 wp-block-ska-image image\">\n\t<defs>\n\t\t<pattern id=\":R56hdsqla:\" width=\"72\" height=\"56\" patternUnits=\"userSpaceOnUse\" x=\"50%\" y=\"16\">\n\t\t\t<path d=\"M.5 56V.5H72\" fill=\"none\"><\/path>\n\t\t<\/pattern>\n\t<\/defs>\n\t<rect width=\"100%\" height=\"100%\" stroke-width=\"0\" fill=\"url(#:R56hdsqla:)\"><\/rect><svg x=\"50%\" y=\"16\">\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"0\" y=\"56\"><\/rect>\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"72\" y=\"168\"><\/rect>\n\t<\/svg>\n<\/svg>\n<\/div>\n\n\n\n<div :style=\"{maskImage: `radial-gradient(180px at ${x}px ${y}px, white, transparent)`}\" class=\"absolute inset-0 bg-gradient-to-r from-primary-light\/1 to-primary\/10 rounded-2xl opacity-0 group-hover:opacity-100 transition duration-300 wp-block-ska-text ska-text\"><\/div>\n\n\n\n<div style=\"mask-image: radial-gradient(180px at 1px 143px, white, transparent);\" class=\"absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 mix-blend-overlay transition duration-300 wp-block-ska-element\">\n<svg aria-hidden=\"true\" class=\"absolute inset-x-0 -inset-y-1\/3 w-full h-[160%] skew-y-[-18deg] fill-black\/50 stroke-black\/70 wp-block-ska-image image\">\n\t<defs>\n\t\t<pattern id=\":R1d6hdsqla:\" width=\"72\" height=\"56\" patternUnits=\"userSpaceOnUse\" x=\"50%\" y=\"16\">\n\t\t\t<path d=\"M.5 56V.5H72\" fill=\"none\"><\/path>\n\t\t<\/pattern>\n\t<\/defs>\n\t<rect width=\"100%\" height=\"100%\" stroke-width=\"0\" fill=\"url(#:R1d6hdsqla:)\"><\/rect><svg x=\"50%\" y=\"16\">\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"0\" y=\"56\"><\/rect>\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"72\" y=\"168\"><\/rect>\n\t<\/svg>\n<\/svg>\n<\/div>\n<\/div>\n\n\n\n<div class=\"absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900\/7.5 group-hover:ring-zinc-900\/10 wp-block-ska-text ska-text\"><\/div>\n\n\n\n<div class=\"relative px-4 pt-16 pb-4 w-full rounded-2xl wp-block-ska-element\">\n<div class=\"flex justify-center items-center size-20 bg-zinc-900\/5 group-hover:bg-white\/50 rounded-full ring-1 ring-zinc-900\/25 group-hover:ring-zinc-900\/25 backdrop-blur-[2px] transition duration-300 wp-block-ska-element\">\n<img loading=\"lazy\" decoding=\"sync\" class=\"size-16 transition-colors duration-300 fill-zinc-700\/10 stroke-zinc-700 group-hover:stroke-zinc-900 wp-block-ska-image image\" src=\"https:\/\/ska-blocks.com\/wp-content\/plugins\/ska-blocks\/icon.png\" alt=\"ska-blocks logo\" width=\"150\" height=\"150\"\/>\n<\/div>\n\n\n\n<h3 class=\"mt-4 mb-0 text-sm font-semibold leading-7 text-zinc-900 wp-block-ska-element\">\n<a href=\"\/docs\/ska-blocks\/getting-started-with-ska-blocks\/\" class=\"text-site group-hover:text-link wp-block-ska-element\">\n<span class=\"absolute inset-0 rounded-2xl wp-block-ska-text ska-text\"><\/span>\n\n\n\n<span class=\"wp-block-ska-text ska-text\">ska-blocks<\/span>\n<\/a>\n<\/h3>\n\n\n\n<p class=\"mt-1 text-sm text-zinc-600\">What is ska-blocks? How to add Tailwind classes to WordPress blocks? What are selectors? How do presets work?<\/p>\n<\/div>\n<\/div>\n\n\n\n<div x-data=\"skaMousePos()\" class=\"flex relative bg-zinc-50 rounded-2xl hover:shadow-md hover:shadow-zinc-900\/5 transition-shadow group wp-block-ska-element\">\n<div class=\"pointer-events-none wp-block-ska-element\">\n<div class=\"absolute inset-0 rounded-2xl group-hover:opacity-50 transition duration-300 wp-block-ska-element [mask-image:linear-gradient(white,transparent)]\">\n<svg aria-hidden=\"true\" class=\"absolute inset-x-0 w-full h-[160%] skew-y-[-18deg] fill-black\/[0.02] stroke-black\/5 wp-block-ska-image inset-y-[-30%] image\">\n\t<defs>\n\t\t<pattern id=\":R56hdsqla:\" width=\"72\" height=\"56\" patternUnits=\"userSpaceOnUse\" x=\"50%\" y=\"16\">\n\t\t\t<path d=\"M.5 56V.5H72\" fill=\"none\"><\/path>\n\t\t<\/pattern>\n\t<\/defs>\n\t<rect width=\"100%\" height=\"100%\" stroke-width=\"0\" fill=\"url(#:R56hdsqla:)\"><\/rect><svg x=\"50%\" y=\"16\">\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"0\" y=\"56\"><\/rect>\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"72\" y=\"168\"><\/rect>\n\t<\/svg>\n<\/svg>\n<\/div>\n\n\n\n<div :style=\"{maskImage: `radial-gradient(180px at ${x}px ${y}px, white, transparent)`}\" class=\"absolute inset-0 bg-gradient-to-r from-primary-light\/1 to-primary\/10 rounded-2xl opacity-0 group-hover:opacity-100 transition duration-300 wp-block-ska-text ska-text\"><\/div>\n\n\n\n<div style=\"mask-image: radial-gradient(180px at 1px 143px, white, transparent);\" class=\"absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 mix-blend-overlay transition duration-300 wp-block-ska-element\">\n<svg aria-hidden=\"true\" class=\"absolute inset-x-0 w-full h-[160%] skew-y-[-18deg] fill-black\/50 stroke-black\/70 wp-block-ska-image inset-y-[-30%] image\">\n\t<defs>\n\t\t<pattern id=\":R1d6hdsqla:\" width=\"72\" height=\"56\" patternUnits=\"userSpaceOnUse\" x=\"50%\" y=\"16\">\n\t\t\t<path d=\"M.5 56V.5H72\" fill=\"none\"><\/path>\n\t\t<\/pattern>\n\t<\/defs>\n\t<rect width=\"100%\" height=\"100%\" stroke-width=\"0\" fill=\"url(#:R1d6hdsqla:)\"><\/rect><svg x=\"50%\" y=\"16\">\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"0\" y=\"56\"><\/rect>\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"72\" y=\"168\"><\/rect>\n\t<\/svg>\n<\/svg>\n<\/div>\n<\/div>\n\n\n\n<div class=\"absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900\/7.5 group-hover:ring-zinc-900\/10 wp-block-ska-text ska-text\"><\/div>\n\n\n\n<div class=\"relative px-4 pt-16 pb-4 w-full rounded-2xl wp-block-ska-element\">\n<div class=\"flex justify-center items-center size-20 bg-zinc-900\/5 group-hover:bg-white\/50 rounded-full ring-1 ring-zinc-900\/25 group-hover:ring-zinc-900\/25 backdrop-blur-[2px] transition duration-300 wp-block-ska-element\">\n<img loading=\"lazy\" decoding=\"sync\" class=\"size-16 transition-colors duration-300 fill-zinc-700\/10 stroke-zinc-700 group-hover:stroke-zinc-900 wp-block-ska-image image\" src=\"https:\/\/ska-blocks.com\/wp-content\/themes\/ska-theme\/icon.png\" alt=\"ska-theme logo\" width=\"150\" height=\"150\"\/>\n<\/div>\n\n\n\n<h3 class=\"mt-4 mb-0 text-sm font-semibold leading-7 text-zinc-900 wp-block-ska-element\">\n<a href=\"\/docs\/ska-theme\/getting-started-with-ska-theme\/\" class=\"wp-block-ska-element\">\n<span class=\"absolute inset-0 rounded-2xl wp-block-ska-text ska-text\"><\/span>\n\n\n\n<span class=\"text-site group-hover:text-link wp-block-ska-text ska-text\">ska-theme<\/span>\n<\/a>\n<\/h3>\n\n\n\n<p class=\"mt-1 text-sm text-zinc-600\">How to use ska-theme? What templates does it come with? What modules are included? How to make UI elements? What integrations are available?<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-gutter wp-block-ska-element\">\n<div x-data=\"skaMousePos()\" class=\"flex relative bg-zinc-50 rounded-2xl hover:shadow-md hover:shadow-zinc-900\/5 transition-shadow group wp-block-ska-element\">\n<div class=\"pointer-events-none wp-block-ska-element\">\n<div class=\"[mask-image:linear-gradient(white,transparent)] absolute inset-0 rounded-2xl group-hover:opacity-50 transition duration-300 wp-block-ska-element\">\n<svg aria-hidden=\"true\" class=\"absolute inset-x-0 -inset-y-1\/3 w-full h-[160%] skew-y-[-18deg] fill-black\/[0.02] stroke-black\/5 wp-block-ska-image image\">\n\t<defs>\n\t\t<pattern id=\":R56hdsqla:\" width=\"72\" height=\"56\" patternUnits=\"userSpaceOnUse\" x=\"50%\" y=\"16\">\n\t\t\t<path d=\"M.5 56V.5H72\" fill=\"none\"><\/path>\n\t\t<\/pattern>\n\t<\/defs>\n\t<rect width=\"100%\" height=\"100%\" stroke-width=\"0\" fill=\"url(#:R56hdsqla:)\"><\/rect><svg x=\"50%\" y=\"16\">\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"0\" y=\"56\"><\/rect>\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"72\" y=\"168\"><\/rect>\n\t<\/svg>\n<\/svg>\n<\/div>\n\n\n\n<div :style=\"{maskImage: `radial-gradient(180px at ${x}px ${y}px, white, transparent)`}\" class=\"absolute inset-0 bg-gradient-to-r from-primary-light\/1 to-primary\/10 rounded-2xl opacity-0 group-hover:opacity-100 transition duration-300 wp-block-ska-text ska-text\"><\/div>\n\n\n\n<div style=\"mask-image: radial-gradient(180px at 1px 143px, white, transparent);\" class=\"absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 mix-blend-overlay transition duration-300 wp-block-ska-element\">\n<svg aria-hidden=\"true\" class=\"absolute inset-x-0 w-full h-[160%] skew-y-[-18deg] fill-black\/50 stroke-black\/70 wp-block-ska-image inset-y-[-30%] image\">\n\t<defs>\n\t\t<pattern id=\":R1d6hdsqla:\" width=\"72\" height=\"56\" patternUnits=\"userSpaceOnUse\" x=\"50%\" y=\"16\">\n\t\t\t<path d=\"M.5 56V.5H72\" fill=\"none\"><\/path>\n\t\t<\/pattern>\n\t<\/defs>\n\t<rect width=\"100%\" height=\"100%\" stroke-width=\"0\" fill=\"url(#:R1d6hdsqla:)\"><\/rect><svg x=\"50%\" y=\"16\">\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"0\" y=\"56\"><\/rect>\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"72\" y=\"168\"><\/rect>\n\t<\/svg>\n<\/svg>\n<\/div>\n<\/div>\n\n\n\n<div class=\"absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900\/7.5 group-hover:ring-zinc-900\/10 wp-block-ska-text ska-text\"><\/div>\n\n\n\n<div class=\"relative px-4 pt-16 pb-4 w-full rounded-2xl wp-block-ska-element\">\n<div class=\"flex justify-center items-center size-10 bg-zinc-900\/5 group-hover:bg-white\/50 rounded-full ring-1 ring-zinc-900\/25 group-hover:ring-zinc-900\/25 backdrop-blur-[2px] transition duration-300 wp-block-ska-element\">\n<div aria-hidden=\"true\" class=\"size-6 transition-colors duration-300 fill-zinc-700\/10 stroke-zinc-700 group-hover:stroke-zinc-900 wp-block-ska-image image\"><svg   viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M12 6.04168C10.4077 4.61656 8.30506 3.75 6 3.75C4.94809 3.75 3.93834 3.93046 3 4.26212V18.5121C3.93834 18.1805 4.94809 18 6 18C8.30506 18 10.4077 18.8666 12 20.2917M12 6.04168C13.5923 4.61656 15.6949 3.75 18 3.75C19.0519 3.75 20.0617 3.93046 21 4.26212V18.5121C20.0617 18.1805 19.0519 18 18 18C15.6949 18 13.5923 18.8666 12 20.2917M12 6.04168V20.2917\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n<\/svg><\/div>\n<\/div>\n\n\n\n<h3 class=\"mt-4 mb-0 text-sm font-semibold leading-7 text-zinc-900 wp-block-ska-element\">\n<a href=\"https:\/\/ska-blocks.com\/docs\/all\/\" class=\"wp-block-ska-element\">\n<span class=\"absolute inset-0 rounded-2xl wp-block-ska-text ska-text\"><\/span>\n\n\n\n<span class=\"text-site group-hover:text-link wp-block-ska-text ska-text\">All articles<\/span>\n<\/a>\n<\/h3>\n<\/div>\n<\/div>\n\n\n\n<div x-data=\"skaMousePos()\" class=\"flex relative bg-zinc-50 rounded-2xl hover:shadow-md hover:shadow-zinc-900\/5 transition-shadow group wp-block-ska-element\">\n<div class=\"pointer-events-none wp-block-ska-element\">\n<div class=\"[mask-image:linear-gradient(white,transparent)] absolute inset-0 rounded-2xl group-hover:opacity-50 transition duration-300 wp-block-ska-element\">\n<svg aria-hidden=\"true\" class=\"absolute inset-x-0 -inset-y-1\/3 w-full h-[160%] skew-y-[-18deg] fill-black\/[0.02] stroke-black\/5 wp-block-ska-image image\">\n\t<defs>\n\t\t<pattern id=\":R56hdsqla:\" width=\"72\" height=\"56\" patternUnits=\"userSpaceOnUse\" x=\"50%\" y=\"16\">\n\t\t\t<path d=\"M.5 56V.5H72\" fill=\"none\"><\/path>\n\t\t<\/pattern>\n\t<\/defs>\n\t<rect width=\"100%\" height=\"100%\" stroke-width=\"0\" fill=\"url(#:R56hdsqla:)\"><\/rect><svg x=\"50%\" y=\"16\">\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"0\" y=\"56\"><\/rect>\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"72\" y=\"168\"><\/rect>\n\t<\/svg>\n<\/svg>\n<\/div>\n\n\n\n<div :style=\"{maskImage: `radial-gradient(180px at ${x}px ${y}px, white, transparent)`}\" class=\"absolute inset-0 bg-gradient-to-r from-primary-light\/1 to-primary\/10 rounded-2xl opacity-0 group-hover:opacity-100 transition duration-300 wp-block-ska-text ska-text\"><\/div>\n\n\n\n<div style=\"mask-image: radial-gradient(180px at 1px 143px, white, transparent);\" class=\"absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 mix-blend-overlay transition duration-300 wp-block-ska-element\">\n<svg aria-hidden=\"true\" class=\"absolute inset-x-0 w-full h-[160%] skew-y-[-18deg] fill-black\/50 stroke-black\/70 wp-block-ska-image inset-y-[-30%] image\">\n\t<defs>\n\t\t<pattern id=\":R1d6hdsqla:\" width=\"72\" height=\"56\" patternUnits=\"userSpaceOnUse\" x=\"50%\" y=\"16\">\n\t\t\t<path d=\"M.5 56V.5H72\" fill=\"none\"><\/path>\n\t\t<\/pattern>\n\t<\/defs>\n\t<rect width=\"100%\" height=\"100%\" stroke-width=\"0\" fill=\"url(#:R1d6hdsqla:)\"><\/rect><svg x=\"50%\" y=\"16\">\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"0\" y=\"56\"><\/rect>\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"72\" y=\"168\"><\/rect>\n\t<\/svg>\n<\/svg>\n<\/div>\n<\/div>\n\n\n\n<div class=\"absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900\/7.5 group-hover:ring-zinc-900\/10 wp-block-ska-text ska-text\"><\/div>\n\n\n\n<div class=\"relative px-4 pt-16 pb-4 w-full rounded-2xl wp-block-ska-element\">\n<div class=\"flex justify-center items-center size-10 bg-zinc-900\/5 group-hover:bg-white\/50 rounded-full ring-1 ring-zinc-900\/25 group-hover:ring-zinc-900\/25 backdrop-blur-[2px] transition duration-300 wp-block-ska-element\">\n<div aria-hidden=\"true\" class=\"size-6 transition-colors duration-300 fill-zinc-700\/10 stroke-zinc-700 group-hover:stroke-zinc-900 wp-block-ska-image image\"><svg   viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M9.75001 3.10408V8.81802C9.75001 9.41476 9.51295 9.98705 9.091 10.409L5.00001 14.5M9.75001 3.10408C9.49886 3.12743 9.24884 3.15465 9.00001 3.18568M9.75001 3.10408C10.4908 3.03521 11.2413 3 12 3C12.7587 3 13.5093 3.03521 14.25 3.10408M14.25 3.10408V8.81802C14.25 9.41476 14.4871 9.98705 14.909 10.409L19.8 15.3M14.25 3.10408C14.5011 3.12743 14.7512 3.15465 15 3.18568M19.8 15.3L18.2299 15.6925C16.1457 16.2136 13.9216 15.9608 12 15C10.0784 14.0392 7.85435 13.7864 5.7701 14.3075L5.00001 14.5M19.8 15.3L21.2022 16.7022C22.4341 17.9341 21.8527 20.0202 20.1354 20.3134C17.4911 20.7649 14.773 21 12 21C9.227 21 6.50891 20.7649 3.86459 20.3134C2.14728 20.0202 1.56591 17.9341 2.7978 16.7022L5.00001 14.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n<\/svg><\/div>\n<\/div>\n\n\n\n<h3 class=\"mt-4 mb-0 text-sm font-semibold leading-7 text-zinc-900 wp-block-ska-element\">\n<a href=\"\/docs\/changelog\/\" class=\"wp-block-ska-element\">\n<span class=\"absolute inset-0 rounded-2xl wp-block-ska-text ska-text\"><\/span>\n\n\n\n<span class=\"text-site group-hover:text-link wp-block-ska-text ska-text\">Changelog<\/span>\n<\/a>\n<\/h3>\n<\/div>\n<\/div>\n\n\n\n<div x-data=\"skaMousePos()\" class=\"flex relative bg-zinc-50 rounded-2xl hover:shadow-md hover:shadow-zinc-900\/5 transition-shadow group wp-block-ska-element\">\n<div class=\"pointer-events-none wp-block-ska-element\">\n<div class=\"[mask-image:linear-gradient(white,transparent)] absolute inset-0 rounded-2xl group-hover:opacity-50 transition duration-300 wp-block-ska-element\">\n<svg aria-hidden=\"true\" class=\"absolute inset-x-0 -inset-y-1\/3 w-full h-[160%] skew-y-[-18deg] fill-black\/[0.02] stroke-black\/5 wp-block-ska-image image\">\n\t<defs>\n\t\t<pattern id=\":R56hdsqla:\" width=\"72\" height=\"56\" patternUnits=\"userSpaceOnUse\" x=\"50%\" y=\"16\">\n\t\t\t<path d=\"M.5 56V.5H72\" fill=\"none\"><\/path>\n\t\t<\/pattern>\n\t<\/defs>\n\t<rect width=\"100%\" height=\"100%\" stroke-width=\"0\" fill=\"url(#:R56hdsqla:)\"><\/rect><svg x=\"50%\" y=\"16\">\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"0\" y=\"56\"><\/rect>\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"72\" y=\"168\"><\/rect>\n\t<\/svg>\n<\/svg>\n<\/div>\n\n\n\n<div :style=\"{maskImage: `radial-gradient(180px at ${x}px ${y}px, white, transparent)`}\" class=\"absolute inset-0 bg-gradient-to-r from-primary-light\/1 to-primary\/10 rounded-2xl opacity-0 group-hover:opacity-100 transition duration-300 wp-block-ska-text ska-text\"><\/div>\n\n\n\n<div style=\"mask-image: radial-gradient(180px at 1px 143px, white, transparent);\" class=\"absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 mix-blend-overlay transition duration-300 wp-block-ska-element\">\n<svg aria-hidden=\"true\" class=\"absolute inset-x-0 w-full h-[160%] skew-y-[-18deg] fill-black\/50 stroke-black\/70 wp-block-ska-image inset-y-[-30%] image\">\n\t<defs>\n\t\t<pattern id=\":R1d6hdsqla:\" width=\"72\" height=\"56\" patternUnits=\"userSpaceOnUse\" x=\"50%\" y=\"16\">\n\t\t\t<path d=\"M.5 56V.5H72\" fill=\"none\"><\/path>\n\t\t<\/pattern>\n\t<\/defs>\n\t<rect width=\"100%\" height=\"100%\" stroke-width=\"0\" fill=\"url(#:R1d6hdsqla:)\"><\/rect><svg x=\"50%\" y=\"16\">\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"0\" y=\"56\"><\/rect>\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"72\" y=\"168\"><\/rect>\n\t<\/svg>\n<\/svg>\n<\/div>\n<\/div>\n\n\n\n<div class=\"absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900\/7.5 group-hover:ring-zinc-900\/10 wp-block-ska-text ska-text\"><\/div>\n\n\n\n<div class=\"relative px-4 pt-16 pb-4 w-full rounded-2xl wp-block-ska-element\">\n<div class=\"flex justify-center items-center size-10 bg-zinc-900\/5 group-hover:bg-white\/50 rounded-full ring-1 ring-zinc-900\/25 group-hover:ring-zinc-900\/25 backdrop-blur-[2px] transition duration-300 wp-block-ska-element\">\n<div aria-hidden=\"true\" class=\"size-6 transition-colors duration-300 fill-zinc-700\/10 stroke-zinc-700 group-hover:stroke-zinc-900 wp-block-ska-image image\"><svg   viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M11.4194 15.1694L17.25 21C18.2855 22.0355 19.9645 22.0355 21 21C22.0355 19.9645 22.0355 18.2855 21 17.25L15.1233 11.3733M11.4194 15.1694L13.9155 12.1383C14.2315 11.7546 14.6542 11.5132 15.1233 11.3733M11.4194 15.1694L6.76432 20.8219C6.28037 21.4096 5.55897 21.75 4.79768 21.75C3.39064 21.75 2.25 20.6094 2.25 19.2023C2.25 18.441 2.59044 17.7196 3.1781 17.2357L10.0146 11.6056M15.1233 11.3733C15.6727 11.2094 16.2858 11.1848 16.8659 11.2338C16.9925 11.2445 17.1206 11.25 17.25 11.25C19.7353 11.25 21.75 9.23528 21.75 6.75C21.75 6.08973 21.6078 5.46268 21.3523 4.89779L18.0762 8.17397C16.9605 7.91785 16.0823 7.03963 15.8262 5.92397L19.1024 2.64774C18.5375 2.39223 17.9103 2.25 17.25 2.25C14.7647 2.25 12.75 4.26472 12.75 6.75C12.75 6.87938 12.7555 7.00749 12.7662 7.13411C12.8571 8.20956 12.6948 9.39841 11.8617 10.0845L11.7596 10.1686M10.0146 11.6056L5.90901 7.5H4.5L2.25 3.75L3.75 2.25L7.5 4.5V5.90901L11.7596 10.1686M10.0146 11.6056L11.7596 10.1686M18.375 18.375L15.75 15.75M4.86723 19.125H4.87473V19.1325H4.86723V19.125Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n<\/svg><\/div>\n<\/div>\n\n\n\n<h3 class=\"mt-4 mb-0 text-sm font-semibold leading-7 text-zinc-900 wp-block-ska-element\">\n<a href=\"https:\/\/wordpress.org\/plugins\/ska-blocks\/?preview=1\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"wp-block-ska-element\">\n<span class=\"absolute inset-0 rounded-2xl wp-block-ska-text ska-text\"><\/span>\n\n\n\n<span class=\"text-site group-hover:text-link wp-block-ska-text ska-text\">Live preview on WP Playground<\/span>\n<\/a>\n<\/h3>\n<\/div>\n<\/div>\n\n\n\n<div x-data=\"skaMousePos()\" class=\"flex relative bg-zinc-50 rounded-2xl hover:shadow-md hover:shadow-zinc-900\/5 transition-shadow group wp-block-ska-element\">\n<div class=\"pointer-events-none wp-block-ska-element\">\n<div class=\"[mask-image:linear-gradient(white,transparent)] absolute inset-0 rounded-2xl group-hover:opacity-50 transition duration-300 wp-block-ska-element\">\n<svg aria-hidden=\"true\" class=\"absolute inset-x-0 -inset-y-1\/3 w-full h-[160%] skew-y-[-18deg] fill-black\/[0.02] stroke-black\/5 wp-block-ska-image image\">\n\t<defs>\n\t\t<pattern id=\":R56hdsqla:\" width=\"72\" height=\"56\" patternUnits=\"userSpaceOnUse\" x=\"50%\" y=\"16\">\n\t\t\t<path d=\"M.5 56V.5H72\" fill=\"none\"><\/path>\n\t\t<\/pattern>\n\t<\/defs>\n\t<rect width=\"100%\" height=\"100%\" stroke-width=\"0\" fill=\"url(#:R56hdsqla:)\"><\/rect><svg x=\"50%\" y=\"16\">\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"0\" y=\"56\"><\/rect>\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"72\" y=\"168\"><\/rect>\n\t<\/svg>\n<\/svg>\n<\/div>\n\n\n\n<div :style=\"{maskImage: `radial-gradient(180px at ${x}px ${y}px, white, transparent)`}\" class=\"absolute inset-0 bg-gradient-to-r from-primary-light\/1 to-primary\/10 rounded-2xl opacity-0 group-hover:opacity-100 transition duration-300 wp-block-ska-text ska-text\"><\/div>\n\n\n\n<div style=\"mask-image: radial-gradient(180px at 1px 143px, white, transparent);\" class=\"absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 mix-blend-overlay transition duration-300 wp-block-ska-element\">\n<svg aria-hidden=\"true\" class=\"absolute inset-x-0 w-full h-[160%] skew-y-[-18deg] fill-black\/50 stroke-black\/70 wp-block-ska-image inset-y-[-30%] image\">\n\t<defs>\n\t\t<pattern id=\":R1d6hdsqla:\" width=\"72\" height=\"56\" patternUnits=\"userSpaceOnUse\" x=\"50%\" y=\"16\">\n\t\t\t<path d=\"M.5 56V.5H72\" fill=\"none\"><\/path>\n\t\t<\/pattern>\n\t<\/defs>\n\t<rect width=\"100%\" height=\"100%\" stroke-width=\"0\" fill=\"url(#:R1d6hdsqla:)\"><\/rect><svg x=\"50%\" y=\"16\">\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"0\" y=\"56\"><\/rect>\n\t\t<rect stroke-width=\"0\" width=\"73\" height=\"57\" x=\"72\" y=\"168\"><\/rect>\n\t<\/svg>\n<\/svg>\n<\/div>\n<\/div>\n\n\n\n<div class=\"absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900\/7.5 group-hover:ring-zinc-900\/10 wp-block-ska-text ska-text\"><\/div>\n\n\n\n<div class=\"relative px-4 pt-16 pb-4 w-full rounded-2xl wp-block-ska-element\">\n<div class=\"flex justify-center items-center size-10 bg-zinc-900\/5 group-hover:bg-white\/50 rounded-full ring-1 ring-zinc-900\/25 group-hover:ring-zinc-900\/25 backdrop-blur-[2px] transition duration-300 wp-block-ska-element\">\n<div aria-hidden=\"true\" class=\"size-6 transition-colors duration-300 fill-zinc-700\/10 stroke-zinc-700 group-hover:stroke-zinc-900 wp-block-ska-image image\"><svg   viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M21.75 6.75V17.25C21.75 18.4926 20.7426 19.5 19.5 19.5H4.5C3.25736 19.5 2.25 18.4926 2.25 17.25V6.75M21.75 6.75C21.75 5.50736 20.7426 4.5 19.5 4.5H4.5C3.25736 4.5 2.25 5.50736 2.25 6.75M21.75 6.75V6.99271C21.75 7.77405 21.3447 8.49945 20.6792 8.90894L13.1792 13.5243C12.4561 13.9694 11.5439 13.9694 10.8208 13.5243L3.32078 8.90894C2.65535 8.49945 2.25 7.77405 2.25 6.99271V6.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n<\/svg><\/div>\n<\/div>\n\n\n\n<h3 class=\"mt-4 mb-0 text-sm font-semibold leading-7 text-zinc-900 wp-block-ska-element\">\n<a href=\"mailto:dev@sinukoduleheabi.ee\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"wp-block-ska-element\">\n<span class=\"absolute inset-0 rounded-2xl wp-block-ska-text ska-text\"><\/span>\n\n\n\n<span class=\"text-site group-hover:text-link wp-block-ska-text ska-text\">Contact<\/span>\n<\/a>\n<\/h3>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"full-width","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":8,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":385,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/pages\/10\/revisions\/385"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}