Cards Interativos<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <style>\r\n body,\r\n h1,\r\n h2,\r\n h3,\r\n p,\r\n button {\r\n margin: 0;\r\n padding: 0;\r\n font-family: Arial, sans-serif;\r\n }\r\n\r\n button {\r\n border: none;\r\n background: none;\r\n cursor: pointer;\r\n }\r\n\r\n \/* Bot\u00f5es principais *\/\r\n .lagos-button,\r\n .jardins-button {\r\n background-color: transparent;\r\n border: 2px solid;\r\n border-radius: 50px;\r\n font-weight: bold;\r\n padding: 12px 24px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .lagos-button {\r\n border-color: #00714D;\r\n color: #00714D;\r\n }\r\n\r\n .lagos-button.active-button {\r\n background-color: #00714D;\r\n color: #FFF;\r\n }\r\n\r\n .lagos-button:hover {\r\n color: #FFF;\r\n background-color: #00714D; \/* Cor do hover igual \u00e0 do bot\u00e3o ativo *\/\r\n }\r\n\r\n .jardins-button {\r\n border-color: #462753;\r\n color: #462753;\r\n }\r\n\r\n .jardins-button.active-button {\r\n background-color: #462753;\r\n color: #FFF;\r\n }\r\n\r\n .jardins-button:hover {\r\n color: #FFF;\r\n background-color: #462753; \/* Cor do hover igual \u00e0 do bot\u00e3o ativo *\/\r\n }\r\n\r\n \/* Card Style *\/\r\n .card {\r\n width: 100%;\r\n max-width: 325px;\r\n background: #FFF;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n text-align: center;\r\n margin-bottom: 20px;\r\n overflow: hidden;\r\n padding: 15px;\r\n }\r\n\r\n .card img {\r\n width: 100%;\r\n display: block;\r\n }\r\n\r\n .card-content {\r\n padding-top: 10px;\r\n }\r\n\r\n .card-link {\r\n display: block;\r\n padding: 10px 0;\r\n border-radius: 8px;\r\n font-weight: bold;\r\n color: #FFF;\r\n text-decoration: none;\r\n }\r\n\r\n .card-link span {\r\n display: block;\r\n line-height: 1.2;\r\n }\r\n\r\n .card-link .small-text {\r\n font-size: 1rem;\r\n font-weight: normal;\r\n }\r\n\r\n .card-link .large-text {\r\n font-size: 1.2rem;\r\n font-weight: bold;\r\n }\r\n\r\n .card-link.lagos {\r\n background-color: #00714D;\r\n }\r\n\r\n .card-link.jardins {\r\n background-color: #462753;\r\n }\r\n\r\n \/* Responsividade *\/\r\n @media (min-width: 1024px) {\r\n #cardsContainer {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n justify-content: flex-start; \/* Alinhamento dos cards \u00e0 esquerda *\/\r\n }\r\n\r\n .card {\r\n flex: 1 1 calc(25% - 20px);\r\n }\r\n\r\n .lagos-button,\r\n .jardins-button {\r\n width: auto; \/* Largura autom\u00e1tica para bot\u00f5es na vers\u00e3o desktop *\/\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body class=\"min-h-screen bg-gray-100 flex flex-col items-center text-black\">\r\n \r\n <div class=\"flex flex-col md:flex-row md:justify-start gap-4 my-8 w-full px-4 pb-12\">\r\n <button id=\"lagosButton\" class=\"lagos-button active-button w-full md:w-auto\">\r\n LAGOS DE JUREMA\r\n <\/button>\r\n <button id=\"jardinsButton\" class=\"jardins-button w-full md:w-auto\">\r\n JARDINS DE JUREMA\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"cardsContainer\" class=\"flex flex-wrap justify-center gap-6 px-4\"><\/div>\r\n\r\n \r\n <script>\r\n const buttons = document.querySelectorAll(\"button\");\r\n const cardsContainer = document.getElementById(\"cardsContainer\");\r\n\r\n const lagosCards = [\r\n { img: \"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-content\/uploads\/2024\/12\/frame_3.webp\", title: \"PISCINAS\", link: \"https:\/\/juremaaguasquentes.com.br\/wp-content\/uploads\/2024\/12\/CARDAPIO--PISCINA-LAGOS.pdf\" },\r\n { img: \"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-content\/uploads\/2024\/12\/frame_5.webp\", title: \"ESPA\u00c7O LE\u00c3O\", link: \"https:\/\/juremaaguasquentes.com.br\/wp-content\/uploads\/2024\/12\/CARDAPIO-ESPAC%CC%A7O-LEAO.pdf\" },\r\n { img: \"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-content\/uploads\/2024\/12\/frame_7.webp\", title: \"SORVETES\", link: \"https:\/\/juremaaguasquentes.com.br\/wp-content\/uploads\/2024\/12\/CARDAPIO-SORVETES.pdf\" },\r\n { img: \"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-content\/uploads\/2024\/12\/frame_9.webp\", title: \"ROOM SERVICE\", link: \"https:\/\/juremaaguasquentes.com.br\/wp-content\/uploads\/2024\/12\/CARDAPIO-ROOM-SERVICE-LAGOS.pdf\" }\r\n ];\r\n\r\n const jardinsCards = [\r\n { img: \"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-content\/uploads\/2024\/12\/frame_4.webp\", title: \"PISCINAS\", link: \"https:\/\/juremaaguasquentes.com.br\/wp-content\/uploads\/2024\/12\/CARDAPIO-PISCINA-JARDINS.pdf\" },\r\n { img: \"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-content\/uploads\/2024\/12\/frame_6.webp\", title: \"ESPA\u00c7O BAMBU\", link: \"https:\/\/juremaaguasquentes.com.br\/wp-content\/uploads\/2024\/12\/CARDAPIO-ESPAC%CC%A7O-BAMBU.pdf\" },\r\n { img: \"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-content\/uploads\/2024\/12\/frame_8.webp\", title: \"SORVETES\", link: \"https:\/\/juremaaguasquentes.com.br\/wp-content\/uploads\/2024\/12\/CARDAPIO-SORVETES.pdf\" },\r\n { img: \"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-content\/uploads\/2024\/12\/frame_2.webp\", title: \"ROOM SERVICE\", link: \"https:\/\/juremaaguasquentes.com.br\/wp-content\/uploads\/2024\/12\/CARDAPIO-ROOM-SERVICE-JARDINS.pdf\" }\r\n ];\r\n\r\n function renderCards(cards, type) {\r\n cardsContainer.innerHTML = cards\r\n .map(card => ` \r\n <div class=\"card\">\r\n <img decoding=\"async\" src=\"${card.img}\" alt=\"${card.title}\">\r\n <div class=\"card-content hover:text-white\">\r\n <a href=\"${card.link}\" target=\"_blank\" class=\"card-link ${type}\">\r\n <span class=\"small-text\">Card\u00e1pio<\/span>\r\n <span class=\"text-2xl\">${card.title}<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n `).join(\"\");\r\n }\r\n\r\n buttons.forEach(button => {\r\n button.addEventListener(\"click\", () => {\r\n buttons.forEach(btn => btn.classList.remove(\"active-button\"));\r\n button.classList.add(\"active-button\");\r\n\r\n if (button.id === \"jardinsButton\") {\r\n renderCards(jardinsCards, \"jardins\");\r\n window.location.hash = \"jardins\"; \/\/ Define a hash para #jardins\r\n } else {\r\n renderCards(lagosCards, \"lagos\");\r\n window.location.hash = \"lagos\"; \/\/ Define a hash para #lagos\r\n }\r\n });\r\n });\r\n\r\n \/\/ Renderizar Lagos por padr\u00e3o\r\n renderCards(lagosCards, \"lagos\");\r\n window.location.hash = \"lagos\"; \/\/ Hash padr\u00e3o inicial\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b72b16 elementor-widget elementor-widget-image\" data-id=\"1b72b16\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"2512\" height=\"464\" src=\"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-content\/uploads\/2024\/12\/logos-1.webp\" class=\"attachment-full size-full wp-image-207\" alt=\"\" srcset=\"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-content\/uploads\/2024\/12\/logos-1.webp 2512w, https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-content\/uploads\/2024\/12\/logos-1-300x55.webp 300w, https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-content\/uploads\/2024\/12\/logos-1-1024x189.webp 1024w, https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-content\/uploads\/2024\/12\/logos-1-768x142.webp 768w, https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-content\/uploads\/2024\/12\/logos-1-1536x284.webp 1536w, https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-content\/uploads\/2024\/12\/logos-1-2048x378.webp 2048w\" sizes=\"(max-width: 2512px) 100vw, 2512px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>Card\u00e1pios Conhe\u00e7a nossos card\u00e1pios Cards Interativos LAGOS DE JUREMA JARDINS DE JUREMA<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-json\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":131,"href":"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":219,"href":"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-json\/wp\/v2\/pages\/18\/revisions\/219"}],"wp:attachment":[{"href":"https:\/\/juremaaguasquentes.com.br\/cardapios\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}