[
  {
    "path": ".github/copilot-instructions.md",
    "content": "# Role & Tone\n\n- You are a senior frontend developer maintaining HyperUI.\n- **Be concise.** Give direct answers and code. Avoid conversational filler.\n- If a request violates the component guidelines below, briefly explain why and offer a compliant alternative.\n\n# Tech Stack\n\n- **Tailwind CSS v4**: This project uses v4.\n  - Use `@theme` (Tailwind v4) where configuration is needed.\n  - Use `size-*` utilities where appropriate.\n  - Assume modern browser support (no vendor prefixes needed).\n- **Astro**: The documentation site is built with Astro.\n- **HTML**: Use semantic elements (`<nav>`, `<main>`, `<article>`) and ARIA attributes for accessibility.\n\n# Component Guidelines\n\n## Core Philosophy\n\nHyperUI is a **component library for developers**. Components should be:\n\n1. **Clean and neutral** - Use minimal styling that focuses on structure and usability\n2. **Easily customizable** - Avoid unnecessary decorative styling (gradients, excessive color) that developers can't easily override\n3. **Semantic and accessible** - Proper HTML structure, accessible markup, ARIA labels where needed\n4. **Production-ready** - Components that can be dropped directly into projects with Tailwind CSS v4\n5. **Copy-paste friendly** - Developers should understand and be able to modify the code easily\n\n## What We DON'T Do\n\n- ❌ Decorative gradients on backgrounds (unless essential to component function)\n- ❌ Overly branded styling with proprietary color schemes\n- ❌ Unnecessary animations or effects that don't improve UX\n- ❌ External dependencies (date pickers, carousels, third-party libraries)\n- ❌ Opinionated styling that forces a specific design direction\n- ❌ Dark mode variants unless explicitly requested\n\n## What We DO Do\n\n- ✅ Neutral color palettes (grays, blacks, whites, primary accent color)\n- ✅ Tailwind CSS v4 utilities only (no custom CSS where possible)\n- ✅ Clear semantic HTML structure\n- ✅ Accessibility-first approach\n- ✅ Multiple variants that show different use cases, not different \"themes\"\n- ✅ Components that are **blocks developers can build with**, not marketing fluff\n\n## Styling Approach\n\n- **Primary accent color**: Use for CTAs and interactive elements\n- **Neutrals**: Grays for borders, text, secondary content\n- **Backgrounds**: Prefer white/transparent or very subtle grays\n- **Hover states**: Subtle color changes, not dramatic transformations\n- **Text hierarchy**: Use font weights and sizes, not colors\n\n## Component Structure\n\nEach component should have:\n\n1. Clear, descriptive title\n2. Semantic HTML\n3. Accessible ARIA attributes where needed\n4. Responsive design (if applicable)\n5. Obvious primary/secondary actions\n6. No unnecessary decoration\n\n## For Future Development\n\nWhen adding new collections or components:\n\n1. Ask: \"Can a developer easily customize this?\"\n2. Ask: \"Is this decoration or is it essential?\"\n3. Ask: \"Would this work with any brand's color scheme?\"\n4. If the answer to any is no, reconsider the approach\n\n**Remember**: We're not designing finished websites. We're providing building blocks that developers can use to build their own designs. Default to minimal, neutral output unless explicitly asked otherwise.\n"
  },
  {
    "path": ".gitignore",
    "content": "# build output\ndist/\n\n# generated types\n.astro/\n\n# dependencies\nnode_modules/\n\n# logs\n*.log\n*.tmp\n\n# environment variables\n.env*\n\n# macOS\n.DS_Store\n"
  },
  {
    "path": ".prettierignore",
    "content": "# build output\ndist/\n\n# generated types\n.astro/\n\n# dependencies\nnode_modules/\npnpm-lock.yaml\n\n# vs code\n.vscode/\n\n# css\npublic/component.css\n"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"printWidth\": 100,\n  \"semi\": false,\n  \"singleQuote\": true,\n  \"trailingComma\": \"all\",\n  \"plugins\": [\"prettier-plugin-astro\", \"prettier-plugin-tailwindcss\"],\n  \"overrides\": [\n    {\n      \"files\": \"*.astro\",\n      \"options\": {\n        \"parser\": \"astro\"\n      }\n    }\n  ]\n}\n"
  },
  {
    "path": ".vscode/extensions.json",
    "content": "{\n  \"recommendations\": [\n    \"astro-build.astro-vscode\",\n    \"unifiedjs.vscode-mdx\",\n    \"dbaeumer.vscode-eslint\",\n    \"esbenp.prettier-vscode\",\n    \"bradlc.vscode-tailwindcss\"\n  ]\n}\n"
  },
  {
    "path": ".vscode/settings.json",
    "content": "{\n  \"explorer.fileNesting.enabled\": true,\n  \"explorer.fileNesting.expand\": false,\n  \"explorer.fileNesting.patterns\": {\n    \"package.json\": \"pnpm-lock.yaml, pnpm-workspace.yaml\",\n    \"astro.config.js\": \"tsconfig.json\",\n    \"eslint.config.js\": \".prettierrc\",\n    \"README.md\": \"CONTRIBUTING.md, LICENSE\"\n  }\n}\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing to HyperUI\n\nThanks for helping improve HyperUI.\n\n## Before you start\n\nPlease open an issue first before starting work.\n\n## Run the site locally\n\n```bash\ngit clone git@github.com:markmead/hyperui.git\npnpm install\npnpm dev\npnpm run css --watch\n```\n\n## Submit a contribution\n\n1. Open an issue.\n2. Create a branch.\n3. Make your change.\n4. Open a PR for review.\n\nFor full examples and guidance, read: [How to contribute](https://www.hyperui.dev/blog/how-to-contribute)\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) Mark Mead\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# HyperUI\n\n![](https://img.shields.io/github/stars/markmead/hyperui?style=social)\n![](https://img.shields.io/github/issues/markmead/hyperui)\n![](https://img.shields.io/github/license/markmead/hyperui)\n\nFree, open-source Tailwind CSS v4 components for marketing sites, web apps, and eCommerce projects.\n\nBrowse components on [hyperui.dev](https://hyperui.dev), copy the markup, and paste it into your Tailwind project.\n\n## Use HyperUI\n\nThere is no package to install.\n\n1. Find a component on [hyperui.dev](https://hyperui.dev).\n2. Copy the code.\n3. Paste it into your project.\n\n## Run the site locally\n\n```bash\npnpm install\npnpm dev\npnpm run css --watch\n```\n\n## Contributing\n\nPlease open an issue first before starting work.\n\n- Contributing guide: [CONTRIBUTING.md](./CONTRIBUTING.md)\n- Full walkthrough: [How to contribute](https://www.hyperui.dev/blog/how-to-contribute)\n\n## License\n\n[MIT](./LICENSE)\n"
  },
  {
    "path": "astro.config.js",
    "content": "// @ts-check\nimport { defineConfig, fontProviders } from 'astro/config'\n\nimport mdx from '@astrojs/mdx'\nimport sitemap from '@astrojs/sitemap'\n\nimport rehypeExternalLinks from 'rehype-external-links'\nimport tailwindcss from '@tailwindcss/vite'\n\nexport default defineConfig({\n  site: 'https://hyperui.dev',\n  integrations: [\n    mdx({\n      optimize: true,\n    }),\n    sitemap(),\n  ],\n  vite: {\n    plugins: [tailwindcss()],\n  },\n  markdown: {\n    rehypePlugins: [\n      [\n        rehypeExternalLinks,\n        {\n          rel: ['noreferrer'],\n          target: '_blank',\n        },\n      ],\n    ],\n    syntaxHighlight: false,\n  },\n  fonts: [\n    {\n      cssVariable: '--font-google-sans-flex',\n      name: 'Google Sans Flex',\n      provider: fontProviders.google(),\n      weights: [400, 500, 600, 700, 800],\n    },\n  ],\n  redirects: {\n    '/components/marketing/forms': '/components/marketing/contact-forms',\n  },\n})\n"
  },
  {
    "path": "eslint.config.js",
    "content": "// @ts-check\nimport { defineConfig, globalIgnores } from 'eslint/config'\n\nimport astro from 'eslint-plugin-astro'\nimport js from '@eslint/js'\nimport globals from 'globals'\nimport typescript from 'typescript-eslint'\n\nexport default defineConfig([\n  globalIgnores(['dist', '.astro']),\n\n  js.configs.recommended,\n  ...typescript.configs.recommended,\n  ...astro.configs.recommended,\n\n  {\n    files: ['public/**', 'src/**'],\n    languageOptions: {\n      globals: {\n        ...globals.browser,\n      },\n    },\n  },\n])\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"hyperui\",\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"astro dev\",\n    \"build\": \"astro build\",\n    \"check\": \"astro check\",\n    \"lint\": \"eslint .\",\n    \"format\": \"prettier --write . --ignore-path .prettierignore\",\n    \"css\": \"npx @tailwindcss/cli -i ./src/styles/component.css -o ./public/component.css -m\"\n  },\n  \"dependencies\": {\n    \"@astrojs/check\": \"^0.9.7\",\n    \"@astrojs/mdx\": \"5.0.0\",\n    \"@astrojs/rss\": \"^4.0.17\",\n    \"@astrojs/sitemap\": \"3.7.1\",\n    \"@lucide/astro\": \"^0.577.0\",\n    \"@vercel/analytics\": \"^1.6.1\",\n    \"astro\": \"6.0.1\"\n  },\n  \"devDependencies\": {\n    \"@eslint/js\": \"^10.0.1\",\n    \"@tailwindcss/cli\": \"^4.2.1\",\n    \"@tailwindcss/forms\": \"^0.5.11\",\n    \"@tailwindcss/typography\": \"^0.5.19\",\n    \"@tailwindcss/vite\": \"^4.2.1\",\n    \"eslint\": \"^10.0.2\",\n    \"eslint-plugin-astro\": \"^1.6.0\",\n    \"globals\": \"^17.4.0\",\n    \"prettier\": \"^3.8.1\",\n    \"prettier-plugin-astro\": \"^0.14.1\",\n    \"prettier-plugin-tailwindcss\": \"^0.7.2\",\n    \"rehype-external-links\": \"^3.0.0\",\n    \"tailwindcss\": \"^4.2.1\",\n    \"typescript\": \"^5.9.3\",\n    \"typescript-eslint\": \"^8.56.1\"\n  }\n}\n"
  },
  {
    "path": "pnpm-workspace.yaml",
    "content": "minimumReleaseAge: 1440\nstrictDepBuilds: true\nonlyBuiltDependencies:\n  - '@parcel/watcher'\n  - esbuild\n  - sharp\n"
  },
  {
    "path": "public/component.css",
    "content": "/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@import \"https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap\";@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-content:\"\";--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:\"Google Sans Flex\", sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-red-900:oklch(39.6% .141 25.723);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-yellow-100:oklch(97.3% .071 103.193);--color-yellow-300:oklch(90.5% .182 98.111);--color-yellow-400:oklch(85.2% .199 91.936);--color-yellow-500:oklch(79.5% .184 86.047);--color-green-50:oklch(98.2% .018 155.826);--color-green-100:oklch(96.2% .044 156.743);--color-green-200:oklch(92.5% .084 155.995);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-green-900:oklch(39.3% .095 152.535);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-700:oklch(50.8% .118 165.612);--color-teal-300:oklch(85.5% .138 181.071);--color-teal-400:oklch(77.7% .152 181.912);--color-teal-500:oklch(70.4% .14 182.503);--color-teal-600:oklch(60% .118 184.704);--color-teal-700:oklch(51.1% .096 186.391);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-indigo-50:oklch(96.2% .018 272.314);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-indigo-900:oklch(35.9% .144 278.697);--color-purple-100:oklch(94.6% .033 307.174);--color-purple-200:oklch(90.2% .063 306.703);--color-purple-300:oklch(82.7% .119 306.383);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-purple-700:oklch(49.6% .265 301.924);--color-purple-800:oklch(43.8% .218 303.724);--color-purple-900:oklch(38.1% .176 304.987);--color-pink-500:oklch(65.6% .241 354.308);--color-pink-600:oklch(59.2% .249 .584);--color-rose-600:oklch(58.6% .253 17.585);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--breakpoint-2xl:96rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-3xl:48rem;--container-5xl:64rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-xs:.125rem;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--animate-bounce:bounce 1s infinite;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}input:where([type=text]),input:where(:not([type])),input:where([type=email]),input:where([type=url]),input:where([type=password]),input:where([type=number]),input:where([type=date]),input:where([type=datetime-local]),input:where([type=month]),input:where([type=search]),input:where([type=tel]),input:where([type=time]),input:where([type=week]),select:where([multiple]),textarea,select{appearance:none;--tw-shadow:0 0 #0000;background-color:#fff;border-width:1px;border-color:oklch(55.1% .027 264.364);border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem}:is(input:where([type=text]),input:where(:not([type])),input:where([type=email]),input:where([type=url]),input:where([type=password]),input:where([type=number]),input:where([type=date]),input:where([type=datetime-local]),input:where([type=month]),input:where([type=search]),input:where([type=tel]),input:where([type=time]),input:where([type=week]),select:where([multiple]),textarea,select):focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-color:oklch(54.6% .245 262.881);outline:2px solid #0000}input::placeholder,textarea::placeholder{color:oklch(55.1% .027 264.364);opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-date-and-time-value{text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-month-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-day-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-hour-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-minute-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-second-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-millisecond-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{-webkit-print-color-adjust:exact;print-color-adjust:exact;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}select:where([multiple]),select:where([size]:not([size=\"1\"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;print-color-adjust:unset;padding-right:.75rem}input:where([type=checkbox]),input:where([type=radio]){appearance:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:middle;-webkit-user-select:none;user-select:none;color:oklch(54.6% .245 262.881);--tw-shadow:0 0 #0000;background-color:#fff;background-origin:border-box;border-width:1px;border-color:oklch(55.1% .027 264.364);flex-shrink:0;width:1rem;height:1rem;padding:0;display:inline-block}input:where([type=checkbox]){border-radius:0}input:where([type=radio]){border-radius:100%}input:where([type=checkbox]):focus,input:where([type=radio]):focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);outline:2px solid #0000}input:where([type=checkbox]):checked,input:where([type=radio]):checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}input:where([type=checkbox]):checked{background-image:url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\")}@media (forced-colors:active){input:where([type=checkbox]):checked{appearance:auto}}input:where([type=radio]):checked{background-image:url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e\")}@media (forced-colors:active){input:where([type=radio]):checked{appearance:auto}}input:where([type=checkbox]):checked:hover,input:where([type=checkbox]):checked:focus,input:where([type=radio]):checked:hover,input:where([type=radio]):checked:focus{background-color:currentColor;border-color:#0000}input:where([type=checkbox]):indeterminate{background-color:currentColor;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e\");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}@media (forced-colors:active){input:where([type=checkbox]):indeterminate{appearance:auto}}input:where([type=checkbox]):indeterminate:hover,input:where([type=checkbox]):indeterminate:focus{background-color:currentColor;border-color:#0000}input:where([type=file]){background:unset;border-color:inherit;font-size:unset;line-height:inherit;border-width:0;border-radius:0;padding:0}input:where([type=file]):focus{outline:1px solid buttontext;outline:1px auto -webkit-focus-ring-color}}@layer components;@layer utilities{.invisible{visibility:hidden}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing) * 0)}.inset-x-0{inset-inline:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.-start-full{inset-inline-start:-100%}.-start-px{inset-inline-start:-1px}.start-0{inset-inline-start:calc(var(--spacing) * 0)}.start-3{inset-inline-start:calc(var(--spacing) * 3)}.start-full{inset-inline-start:100%}.-end-full{inset-inline-end:-100%}.end-0{inset-inline-end:calc(var(--spacing) * 0)}.end-1{inset-inline-end:calc(var(--spacing) * 1)}.end-4{inset-inline-end:calc(var(--spacing) * 4)}.-top-px{top:-1px}.top-0{top:calc(var(--spacing) * 0)}.top-1{top:calc(var(--spacing) * 1)}.top-1\\/2{top:50%}.top-4{top:calc(var(--spacing) * 4)}.top-12{top:calc(var(--spacing) * 12)}.-right-2{right:calc(var(--spacing) * -2)}.-right-px{right:-1px}.right-0{right:calc(var(--spacing) * 0)}.right-1{right:calc(var(--spacing) * 1)}.right-2{right:calc(var(--spacing) * 2)}.-bottom-7{bottom:calc(var(--spacing) * -7)}.bottom-0{bottom:calc(var(--spacing) * 0)}.-left-2{left:calc(var(--spacing) * -2)}.left-0{left:calc(var(--spacing) * 0)}.left-1\\/2{left:50%}.z-10{z-index:10}.z-50{z-index:50}.z-auto{z-index:auto}.order-last{order:9999}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.-m-1{margin:calc(var(--spacing) * -1)}.m-1{margin:calc(var(--spacing) * 1)}.m-auto{margin:auto}.-mx-4{margin-inline:calc(var(--spacing) * -4)}.mx-auto{margin-inline:auto}.-my-2{margin-block:calc(var(--spacing) * -2)}.-my-3{margin-block:calc(var(--spacing) * -3)}.-my-4{margin-block:calc(var(--spacing) * -4)}.my-0\\.5{margin-block:calc(var(--spacing) * .5)}.-ms-1{margin-inline-start:calc(var(--spacing) * -1)}.-ms-1\\.5{margin-inline-start:calc(var(--spacing) * -1.5)}.-ms-px{margin-inline-start:-1px}.ms-1\\.5{margin-inline-start:calc(var(--spacing) * 1.5)}.ms-4{margin-inline-start:calc(var(--spacing) * 4)}.-me-0\\.5{margin-inline-end:calc(var(--spacing) * -.5)}.-me-1{margin-inline-end:calc(var(--spacing) * -1)}.-me-4{margin-inline-end:calc(var(--spacing) * -4)}.-me-px{margin-inline-end:-1px}.me-1\\.5{margin-inline-end:calc(var(--spacing) * 1.5)}.-mt-0\\.5{margin-top:calc(var(--spacing) * -.5)}.-mt-1\\.5{margin-top:calc(var(--spacing) * -1.5)}.-mt-2{margin-top:calc(var(--spacing) * -2)}.-mt-4{margin-top:calc(var(--spacing) * -4)}.mt-0\\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-1\\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-14{margin-top:calc(var(--spacing) * 14)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-32{margin-top:calc(var(--spacing) * 32)}.-mr-0\\.5{margin-right:calc(var(--spacing) * -.5)}.-mb-0\\.5{margin-bottom:calc(var(--spacing) * -.5)}.-mb-px{margin-bottom:-1px}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.flex{display:flex}.flow-root{display:flow-root}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:var(--aspect-video)}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.size-16{width:calc(var(--spacing) * 16);height:calc(var(--spacing) * 16)}.size-20{width:calc(var(--spacing) * 20);height:calc(var(--spacing) * 20)}.size-32{width:calc(var(--spacing) * 32);height:calc(var(--spacing) * 32)}.size-full{width:100%;height:100%}.h-0\\.5{height:calc(var(--spacing) * .5)}.h-1{height:calc(var(--spacing) * 1)}.h-2{height:calc(var(--spacing) * 2)}.h-3{height:calc(var(--spacing) * 3)}.h-3\\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-32{height:calc(var(--spacing) * 32)}.h-40{height:calc(var(--spacing) * 40)}.h-56{height:calc(var(--spacing) * 56)}.h-64{height:calc(var(--spacing) * 64)}.h-72{height:calc(var(--spacing) * 72)}.h-80{height:calc(var(--spacing) * 80)}.h-87\\.5{height:calc(var(--spacing) * 87.5)}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-46{max-height:calc(var(--spacing) * 46)}.min-h-screen{min-height:100vh}.w-0\\.5{width:calc(var(--spacing) * .5)}.w-1\\/2{width:50%}.w-2\\/3{width:66.6667%}.w-4{width:calc(var(--spacing) * 4)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-32{width:calc(var(--spacing) * 32)}.w-56{width:calc(var(--spacing) * 56)}.w-64{width:calc(var(--spacing) * 64)}.w-96{width:calc(var(--spacing) * 96)}.w-\\[80\\%\\]{width:80%}.w-full{width:100%}.w-px{width:1px}.w-screen{width:100vw}.max-w-3xl{max-width:var(--container-3xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-prose{max-width:65ch}.max-w-screen-2xl{max-width:var(--breakpoint-2xl)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-full{min-width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.origin-center{transform-origin:50%}.-translate-x-1\\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-0{--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-0\\.5{--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-1\\.5{--tw-translate-x:calc(var(--spacing) * 1.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-5{--tw-translate-y:calc(var(--spacing) * -5);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-full{--tw-translate-y:-100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-0{--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-0\\.5{--tw-translate-y:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-1\\.5{--tw-translate-y:calc(var(--spacing) * 1.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-8{--tw-translate-y:calc(var(--spacing) * 8);translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-45{rotate:45deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-bounce{animation:var(--animate-bounce)}.animate-ping{animation:var(--animate-ping)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.appearance-none{appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-\\[24px_1fr\\]{grid-template-columns:24px 1fr}.flex-col{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-px{gap:1px}:where(.space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-0\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-px>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(1px * var(--tw-space-y-reverse));margin-block-end:calc(1px * calc(1 - var(--tw-space-y-reverse)))}:where(.divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-y-2>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(2px * var(--tw-divide-y-reverse));border-bottom-width:calc(2px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-black>:not(:last-child)){border-color:var(--color-black)}:where(.divide-gray-100>:not(:last-child)){border-color:var(--color-gray-100)}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}:where(.divide-gray-300>:not(:last-child)){border-color:var(--color-gray-300)}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\\[10px\\]{border-radius:10px}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-xs{border-radius:var(--radius-xs)}.rounded-s-sm{border-start-start-radius:var(--radius-sm);border-end-start-radius:var(--radius-sm)}.rounded-ss-xl{border-start-start-radius:var(--radius-xl)}.rounded-e-sm{border-start-end-radius:var(--radius-sm);border-end-end-radius:var(--radius-sm)}.rounded-se-3xl{border-start-end-radius:var(--radius-3xl)}.rounded-ee-xl{border-end-end-radius:var(--radius-xl)}.rounded-es-3xl{border-end-start-radius:var(--radius-3xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.border-s-4{border-inline-start-style:var(--tw-border-style);border-inline-start-width:4px}.border-s-\\[3px\\]{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px}.border-e{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-r-2{border-right-style:var(--tw-border-style);border-right-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-amber-500{border-color:var(--color-amber-500)}.border-black{border-color:var(--color-black)}.border-blue-500{border-color:var(--color-blue-500)}.border-blue-600{border-color:var(--color-blue-600)}.border-blue-700{border-color:var(--color-blue-700)}.border-current{border-color:currentColor}.border-emerald-500{border-color:var(--color-emerald-500)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-400{border-color:var(--color-gray-400)}.border-gray-600{border-color:var(--color-gray-600)}.border-gray-700{border-color:var(--color-gray-700)}.border-gray-900\\/10{border-color:#1018281a}@supports (color:color-mix(in lab, red, red)){.border-gray-900\\/10{border-color:color-mix(in oklab, var(--color-gray-900) 10%, transparent)}}.border-green-500{border-color:var(--color-green-500)}.border-indigo-500{border-color:var(--color-indigo-500)}.border-indigo-600{border-color:var(--color-indigo-600)}.border-indigo-900{border-color:var(--color-indigo-900)}.border-purple-500{border-color:var(--color-purple-500)}.border-red-500{border-color:var(--color-red-500)}.border-red-600{border-color:var(--color-red-600)}.border-transparent{border-color:#0000}.border-white{border-color:var(--color-white)}.bg-\\[\\#91a5bb\\]{background-color:#91a5bb}.bg-\\[\\#595759\\]{background-color:#595759}.bg-\\[\\#afbfab\\]{background-color:#afbfab}.bg-\\[\\#d2d3d4\\]{background-color:#d2d3d4}.bg-\\[\\#d89f97\\]{background-color:#d89f97}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-amber-500{background-color:var(--color-amber-500)}.bg-black{background-color:var(--color-black)}.bg-black\\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-blue-700{background-color:var(--color-blue-700)}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-emerald-600{background-color:var(--color-emerald-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-gray-600{background-color:var(--color-gray-600)}.bg-gray-700{background-color:var(--color-gray-700)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-gray-900\\/10{background-color:#1018281a}@supports (color:color-mix(in lab, red, red)){.bg-gray-900\\/10{background-color:color-mix(in oklab, var(--color-gray-900) 10%, transparent)}}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-600{background-color:var(--color-green-600)}.bg-indigo-100{background-color:var(--color-indigo-100)}.bg-indigo-500{background-color:var(--color-indigo-500)}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-indigo-900{background-color:var(--color-indigo-900)}.bg-purple-100{background-color:var(--color-purple-100)}.bg-purple-200{background-color:var(--color-purple-200)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-500{background-color:var(--color-red-500)}.bg-red-600{background-color:var(--color-red-600)}.bg-rose-600{background-color:var(--color-rose-600)}.bg-teal-400{background-color:var(--color-teal-400)}.bg-teal-500{background-color:var(--color-teal-500)}.bg-teal-600{background-color:var(--color-teal-600)}.bg-white{background-color:var(--color-white)}.bg-yellow-300{background-color:var(--color-yellow-300)}.bg-yellow-400{background-color:var(--color-yellow-400)}.bg-linear-to-l{--tw-gradient-position:to left}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-l{--tw-gradient-position:to left in oklab}}.bg-linear-to-l{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-r{--tw-gradient-position:to right in oklab}}.bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-linear-to-t{--tw-gradient-position:to top}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-t{--tw-gradient-position:to top in oklab}}.bg-linear-to-t{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-\\[repeating-linear-gradient\\(45deg\\,var\\(--tw-gradient-from\\)_0\\,var\\(--tw-gradient-from\\)_10px\\,var\\(--tw-gradient-to\\)_10px\\,var\\(--tw-gradient-to\\)_20px\\)\\]{background-image:repeating-linear-gradient(45deg,var(--tw-gradient-from) 0,var(--tw-gradient-from) 10px,var(--tw-gradient-to) 10px,var(--tw-gradient-to) 20px)}.from-gray-900\\/50{--tw-gradient-from:#10182880}@supports (color:color-mix(in lab, red, red)){.from-gray-900\\/50{--tw-gradient-from:color-mix(in oklab, var(--color-gray-900) 50%, transparent)}}.from-gray-900\\/50{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-pink-500{--tw-gradient-from:var(--color-pink-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-yellow-400{--tw-gradient-from:var(--color-yellow-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-red-500{--tw-gradient-via:var(--color-red-500);--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-gray-300{--tw-gradient-to:var(--color-gray-300);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-gray-900\\/25{--tw-gradient-to:#10182840}@supports (color:color-mix(in lab, red, red)){.to-gray-900\\/25{--tw-gradient-to:color-mix(in oklab, var(--color-gray-900) 25%, transparent)}}.to-gray-900\\/25{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-yellow-500{--tw-gradient-to:var(--color-yellow-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.p-0{padding:calc(var(--spacing) * 0)}.p-0\\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-0\\.5{padding-inline:calc(var(--spacing) * .5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.px-12{padding-inline:calc(var(--spacing) * 12)}.py-0\\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-16{padding-block:calc(var(--spacing) * 16)}.ps-4{padding-inline-start:calc(var(--spacing) * 4)}.pe-4{padding-inline-end:calc(var(--spacing) * 4)}.pe-8{padding-inline-end:calc(var(--spacing) * 8)}.pe-10{padding-inline-end:calc(var(--spacing) * 10)}.pe-32{padding-inline-end:calc(var(--spacing) * 32)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-12{padding-top:calc(var(--spacing) * 12)}.pt-16{padding-top:calc(var(--spacing) * 16)}.pt-32{padding-top:calc(var(--spacing) * 32)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pb-1{padding-bottom:calc(var(--spacing) * 1)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pb-8{padding-bottom:calc(var(--spacing) * 8)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-6{padding-left:calc(var(--spacing) * 6)}.\\[text-align\\:_inherit\\]{text-align:inherit}.text-center{text-align:center}.text-left{text-align:left}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-3xl\\/tight{font-size:var(--text-3xl);line-height:var(--leading-tight)}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-\\[10px\\]\\/6{font-size:10px;line-height:calc(var(--spacing) * 6)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-lg\\/tight{font-size:var(--text-lg);line-height:var(--leading-tight)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-sm\\/8{font-size:var(--text-sm);line-height:calc(var(--spacing) * 8)}.text-sm\\/none{font-size:var(--text-sm);line-height:1}.text-sm\\/relaxed{font-size:var(--text-sm);line-height:var(--leading-relaxed)}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-xs\\/none{font-size:var(--text-xs);line-height:1}.text-xs\\/relaxed{font-size:var(--text-xs);line-height:var(--leading-relaxed)}.text-\\[10px\\]{font-size:10px}.leading-10{--tw-leading:calc(var(--spacing) * 10);line-height:calc(var(--spacing) * 10)}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-pretty{text-wrap:pretty}.whitespace-nowrap{white-space:nowrap}.text-\\[\\#0072b1\\]{color:#0072b1}.text-amber-700{color:var(--color-amber-700)}.text-amber-800{color:var(--color-amber-800)}.text-black{color:var(--color-black)}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-blue-900{color:var(--color-blue-900)}.text-emerald-700{color:var(--color-emerald-700)}.text-gray-100{color:var(--color-gray-100)}.text-gray-200{color:var(--color-gray-200)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-600{color:var(--color-green-600)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-green-900{color:var(--color-green-900)}.text-indigo-600{color:var(--color-indigo-600)}.text-indigo-700{color:var(--color-indigo-700)}.text-pink-500{color:var(--color-pink-500)}.text-purple-600{color:var(--color-purple-600)}.text-purple-700{color:var(--color-purple-700)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-red-800{color:var(--color-red-800)}.text-red-900{color:var(--color-red-900)}.text-teal-600{color:var(--color-teal-600)}.text-teal-700{color:var(--color-teal-700)}.text-white{color:var(--color-white)}.text-white\\/90{color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.text-white\\/90{color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.text-white\\/95{color:#fffffff2}@supports (color:color-mix(in lab, red, red)){.text-white\\/95{color:color-mix(in oklab, var(--color-white) 95%, transparent)}}.text-yellow-500{color:var(--color-yellow-500)}.uppercase{text-transform:uppercase}.not-italic{font-style:normal}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.shadow-\\[2px_2px_0_0\\]{--tw-shadow:2px 2px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\\[4px_4px_0_0\\,8px_8px_0_0\\,12px_12px_0_0\\]{--tw-shadow:4px 4px 0 0 var(--tw-shadow-color,currentcolor), 8px 8px 0 0 var(--tw-shadow-color,currentcolor), 12px 12px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\\[4px_4px_0_0\\,8px_8px_0_0\\]{--tw-shadow:4px 4px 0 0 var(--tw-shadow-color,currentcolor), 8px 8px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\\[4px_4px_0_0\\]{--tw-shadow:4px 4px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-3{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-\\[6px\\]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(6px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-black{--tw-shadow-color:#000}@supports (color:color-mix(in lab, red, red)){.shadow-black{--tw-shadow-color:color-mix(in oklab, var(--color-black) var(--tw-shadow-alpha), transparent)}}.shadow-indigo-100{--tw-shadow-color:oklch(93% .034 272.788)}@supports (color:color-mix(in lab, red, red)){.shadow-indigo-100{--tw-shadow-color:color-mix(in oklab, var(--color-indigo-100) var(--tw-shadow-alpha), transparent)}}.ring-black{--tw-ring-color:var(--color-black)}.ring-indigo-50{--tw-ring-color:var(--color-indigo-50)}.ring-indigo-600{--tw-ring-color:var(--color-indigo-600)}.ring-white{--tw-ring-color:var(--color-white)}.ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ring-offset-yellow-300{--tw-ring-offset-color:var(--color-yellow-300)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\\[filter\\]{transition-property:filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\\[inset-inline-start\\]{transition-property:inset-inline-start;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-none{transition-property:none}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.\\[-moz-appearance\\:_textfield\\],.\\[-moz-appearance\\:textfield\\]{-moz-appearance:textfield}.\\[-webkit-tap-highlight-color\\:transparent\\]{-webkit-tap-highlight-color:transparent}.\\[animation-delay\\:0\\.2s\\]{animation-delay:.2s}.\\[animation-delay\\:0\\.4s\\]{animation-delay:.4s}.\\[clip-path\\:_polygon\\(0_0\\,_0\\%_100\\%\\,_100\\%_50\\%\\)\\]{clip-path:polygon(0 0,0% 100%,100% 50%)}.\\[writing-mode\\:vertical-lr\\]{writing-mode:vertical-lr}.ring-inset{--tw-ring-inset:inset}:is(.\\*\\:bg-gray-100>*){background-color:var(--color-gray-100)}:is(.\\*\\:font-medium>*){--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}:is(.\\*\\:text-gray-900>*){color:var(--color-gray-900)}.group-odd\\:flex-row-reverse:is(:where(.group):nth-child(odd) *){flex-direction:row-reverse}.group-odd\\:text-right:is(:where(.group):nth-child(odd) *){text-align:right}.group-even\\:order-last:is(:where(.group):nth-child(2n) *){order:9999}.group-open\\:absolute:is(:where(.group):is([open],:popover-open,:open) *){position:absolute}.group-open\\:start-0:is(:where(.group):is([open],:popover-open,:open) *){inset-inline-start:calc(var(--spacing) * 0)}.group-open\\:top-8:is(:where(.group):is([open],:popover-open,:open) *){top:calc(var(--spacing) * 8)}.group-open\\:top-auto:is(:where(.group):is([open],:popover-open,:open) *){top:auto}.group-open\\:mt-2:is(:where(.group):is([open],:popover-open,:open) *){margin-top:calc(var(--spacing) * 2)}.group-open\\:-rotate-180:is(:where(.group):is([open],:popover-open,:open) *),.group-open\\/keys\\:-rotate-180:is(:where(.group\\/keys):is([open],:popover-open,:open) *),.group-open\\/members\\:-rotate-180:is(:where(.group\\/members):is([open],:popover-open,:open) *),.group-open\\/roles\\:-rotate-180:is(:where(.group\\/roles):is([open],:popover-open,:open) *){rotate:-180deg}@media (hover:hover){.group-hover\\:visible:is(:where(.group):hover *){visibility:visible}.group-hover\\:absolute:is(:where(.group):hover *){position:absolute}.group-hover\\:relative:is(:where(.group):hover *){position:relative}.group-hover\\:start-4:is(:where(.group):hover *){inset-inline-start:calc(var(--spacing) * 4)}.group-hover\\:end-4:is(:where(.group):hover *){inset-inline-end:calc(var(--spacing) * 4)}.group-hover\\:ms-0\\.5:is(:where(.group):hover *){margin-inline-start:calc(var(--spacing) * .5)}.group-hover\\:ms-4:is(:where(.group):hover *){margin-inline-start:calc(var(--spacing) * 4)}.group-hover\\:me-4:is(:where(.group):hover *){margin-inline-end:calc(var(--spacing) * 4)}.group-hover\\:h-full:is(:where(.group):hover *){height:100%}.group-hover\\:w-full:is(:where(.group):hover *){width:100%}.group-hover\\:-translate-x-1:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\\:-translate-x-2:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\\:translate-x-0:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\\:translate-x-0\\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\\:translate-x-1\\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * 1.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\\:-translate-y-1:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\\:-translate-y-2:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\\:translate-y-0:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\\:translate-y-0\\.5:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\\:translate-y-1\\.5:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * 1.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\\:bg-gray-200:is(:where(.group):hover *){background-color:var(--color-gray-200)}.group-hover\\:bg-transparent:is(:where(.group):hover *){background-color:#0000}.group-hover\\:text-gray-700:is(:where(.group):hover *){color:var(--color-gray-700)}.group-hover\\:text-gray-700\\/75:is(:where(.group):hover *){color:#364153bf}@supports (color:color-mix(in lab, red, red)){.group-hover\\:text-gray-700\\/75:is(:where(.group):hover *){color:color-mix(in oklab, var(--color-gray-700) 75%, transparent)}}.group-hover\\:text-indigo-600:is(:where(.group):hover *){color:var(--color-indigo-600)}.group-hover\\:text-white:is(:where(.group):hover *){color:var(--color-white)}.group-hover\\:underline:is(:where(.group):hover *){text-decoration-line:underline}.group-hover\\:underline-offset-4:is(:where(.group):hover *){text-underline-offset:4px}.group-hover\\:opacity-0:is(:where(.group):hover *){opacity:0}.group-hover\\:opacity-50:is(:where(.group):hover *){opacity:.5}.group-hover\\:opacity-100:is(:where(.group):hover *){opacity:1}.group-hover\\:grayscale-50:is(:where(.group):hover *){--tw-grayscale:grayscale(50%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.group-hover\\/card\\:-translate-2:is(:where(.group\\/card):hover *){--tw-translate-x:calc(var(--spacing) * -2);--tw-translate-y:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\\/link\\:block:is(:where(.group\\/link):hover *){display:block}}.peer-checked\\:start-6:is(:where(.peer):checked~*){inset-inline-start:calc(var(--spacing) * 6)}.peer-checked\\:start-8:is(:where(.peer):checked~*){inset-inline-start:calc(var(--spacing) * 8)}.peer-checked\\:block:is(:where(.peer):checked~*){display:block}.peer-checked\\:hidden:is(:where(.peer):checked~*){display:none}.peer-checked\\:w-2:is(:where(.peer):checked~*){width:calc(var(--spacing) * 2)}.peer-checked\\:bg-white:is(:where(.peer):checked~*){background-color:var(--color-white)}.peer-checked\\:ring-transparent:is(:where(.peer):checked~*){--tw-ring-color:transparent}:is(.peer-checked\\:\\*\\:scale-0:is(:where(.peer):checked~*)>*){--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y)}.peer-placeholder-shown\\:translate-y-0:is(:where(.peer):placeholder-shown~*){--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-focus\\:-translate-y-5:is(:where(.peer):focus~*){--tw-translate-y:calc(var(--spacing) * -5);translate:var(--tw-translate-x) var(--tw-translate-y)}.before\\:absolute:before{content:var(--tw-content);position:absolute}.before\\:top-0:before{content:var(--tw-content);top:calc(var(--spacing) * 0)}.before\\:left-1\\/2:before{content:var(--tw-content);left:50%}.before\\:-ms-px:before{content:var(--tw-content);margin-inline-start:-1px}.before\\:-mt-px:before{content:var(--tw-content);margin-top:-1px}.before\\:h-0\\.5:before{content:var(--tw-content);height:calc(var(--spacing) * .5)}.before\\:h-full:before{content:var(--tw-content);height:100%}.before\\:w-0\\.5:before{content:var(--tw-content);width:calc(var(--spacing) * .5)}.before\\:w-full:before{content:var(--tw-content);width:100%}.before\\:-translate-x-1\\/2:before{content:var(--tw-content);--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.before\\:rounded-full:before{content:var(--tw-content);border-radius:3.40282e38px}.before\\:bg-gray-200:before{content:var(--tw-content);background-color:var(--color-gray-200)}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:inset-x-0:after{content:var(--tw-content);inset-inline:calc(var(--spacing) * 0)}.after\\:top-1\\/2:after{content:var(--tw-content);top:50%}.after\\:bottom-0:after{content:var(--tw-content);bottom:calc(var(--spacing) * 0)}.after\\:mt-4:after{content:var(--tw-content);margin-top:calc(var(--spacing) * 4)}.after\\:block:after{content:var(--tw-content);display:block}.after\\:h-0\\.5:after{content:var(--tw-content);height:calc(var(--spacing) * .5)}.after\\:h-1:after{content:var(--tw-content);height:calc(var(--spacing) * 1)}.after\\:w-full:after{content:var(--tw-content);width:100%}.after\\:-translate-y-1\\/2:after{content:var(--tw-content);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.after\\:rounded-lg:after{content:var(--tw-content);border-radius:var(--radius-lg)}.after\\:bg-black:after{content:var(--tw-content);background-color:var(--color-black)}.after\\:bg-gray-200:after{content:var(--tw-content);background-color:var(--color-gray-200)}:is(.\\*\\:first\\:sticky>*):first-child{position:sticky}:is(.\\*\\:first\\:left-0>*):first-child{left:calc(var(--spacing) * 0)}:is(.\\*\\:first\\:bg-white>*):first-child{background-color:var(--color-white)}:is(.\\*\\:first\\:font-medium>*):first-child{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}:is(.peer-checked\\:\\*\\:first\\:hidden:is(:where(.peer):checked~*)>*):first-child,:is(.\\*\\:last\\:hidden>*):last-child{display:none}:is(.peer-checked\\:\\*\\:last\\:block:is(:where(.peer):checked~*)>*):last-child{display:block}.odd\\:-me-3:nth-child(odd){margin-inline-end:calc(var(--spacing) * -3)}.even\\:-ms-3:nth-child(2n){margin-inline-start:calc(var(--spacing) * -3)}:is(.\\*\\:even\\:bg-gray-50>*):nth-child(2n){background-color:var(--color-gray-50)}.checked\\:bg-black:checked{background-color:var(--color-black)}.focus-within\\:translate-y-0:focus-within{--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.focus-within\\:translate-y-4:focus-within{--tw-translate-y:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.focus-within\\:bg-yellow-300:focus-within{background-color:var(--color-yellow-300)}.focus-within\\:ring:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\\:ring-2:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\\:ring-3:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\\:ring-blue-600:focus-within{--tw-ring-color:var(--color-blue-600)}.focus-within\\:ring-yellow-300:focus-within{--tw-ring-color:var(--color-yellow-300)}@media (hover:hover){.hover\\:translate-0\\.5:hover{--tw-translate-x:calc(var(--spacing) * .5);--tw-translate-y:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\\:translate-1:hover{--tw-translate-x:calc(var(--spacing) * 1);--tw-translate-y:calc(var(--spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\\:translate-3:hover{--tw-translate-x:calc(var(--spacing) * 3);--tw-translate-y:calc(var(--spacing) * 3);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\\:-rotate-2:hover{rotate:-2deg}.hover\\:rotate-2:hover{rotate:2deg}.hover\\:border-gray-100:hover{border-color:var(--color-gray-100)}.hover\\:border-gray-400:hover{border-color:var(--color-gray-400)}.hover\\:border-gray-600:hover{border-color:var(--color-gray-600)}.hover\\:border-pink-600:hover{border-color:var(--color-pink-600)}.hover\\:bg-black:hover{background-color:var(--color-black)}.hover\\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\\:bg-emerald-700:hover{background-color:var(--color-emerald-700)}.hover\\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\\:bg-gray-300:hover{background-color:var(--color-gray-300)}.hover\\:bg-gray-600:hover{background-color:var(--color-gray-600)}.hover\\:bg-indigo-50:hover{background-color:var(--color-indigo-50)}.hover\\:bg-indigo-600:hover{background-color:var(--color-indigo-600)}.hover\\:bg-indigo-700:hover{background-color:var(--color-indigo-700)}.hover\\:bg-purple-300:hover{background-color:var(--color-purple-300)}.hover\\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\\:bg-teal-500:hover{background-color:var(--color-teal-500)}.hover\\:bg-teal-600:hover{background-color:var(--color-teal-600)}.hover\\:bg-teal-700:hover{background-color:var(--color-teal-700)}.hover\\:bg-transparent:hover{background-color:#0000}.hover\\:bg-white:hover{background-color:var(--color-white)}.hover\\:bg-yellow-100:hover{background-color:var(--color-yellow-100)}.hover\\:bg-yellow-300:hover{background-color:var(--color-yellow-300)}.hover\\:bg-yellow-400:hover{background-color:var(--color-yellow-400)}.hover\\:bg-yellow-500:hover{background-color:var(--color-yellow-500)}.hover\\:text-blue-600:hover{color:var(--color-blue-600)}.hover\\:text-blue-700:hover{color:var(--color-blue-700)}.hover\\:text-gray-500\\/75:hover{color:#6a7282bf}@supports (color:color-mix(in lab, red, red)){.hover\\:text-gray-500\\/75:hover{color:color-mix(in oklab, var(--color-gray-500) 75%, transparent)}}.hover\\:text-gray-600:hover{color:var(--color-gray-600)}.hover\\:text-gray-600\\/75:hover{color:#4a5565bf}@supports (color:color-mix(in lab, red, red)){.hover\\:text-gray-600\\/75:hover{color:color-mix(in oklab, var(--color-gray-600) 75%, transparent)}}.hover\\:text-gray-700:hover{color:var(--color-gray-700)}.hover\\:text-gray-700\\/75:hover{color:#364153bf}@supports (color:color-mix(in lab, red, red)){.hover\\:text-gray-700\\/75:hover{color:color-mix(in oklab, var(--color-gray-700) 75%, transparent)}}.hover\\:text-gray-900:hover{color:var(--color-gray-900)}.hover\\:text-gray-900\\/75:hover{color:#101828bf}@supports (color:color-mix(in lab, red, red)){.hover\\:text-gray-900\\/75:hover{color:color-mix(in oklab, var(--color-gray-900) 75%, transparent)}}.hover\\:text-indigo-600:hover{color:var(--color-indigo-600)}.hover\\:text-indigo-900:hover{color:var(--color-indigo-900)}.hover\\:text-red-600:hover{color:var(--color-red-600)}.hover\\:text-teal-600\\/75:hover{color:#009588bf}@supports (color:color-mix(in lab, red, red)){.hover\\:text-teal-600\\/75:hover{color:color-mix(in oklab, var(--color-teal-600) 75%, transparent)}}.hover\\:text-teal-700\\/75:hover{color:#00776ebf}@supports (color:color-mix(in lab, red, red)){.hover\\:text-teal-700\\/75:hover{color:color-mix(in oklab, var(--color-teal-700) 75%, transparent)}}.hover\\:text-white:hover{color:var(--color-white)}.hover\\:text-yellow-500:hover{color:var(--color-yellow-500)}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:opacity-75:hover{opacity:.75}.hover\\:opacity-90:hover{opacity:.9}.hover\\:shadow-\\[-1px_-1px_0_0\\]:hover{--tw-shadow:-1px -1px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\\:shadow-none:hover{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\\:ring-1:hover{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\\:ring-gray-400:hover{--tw-ring-color:var(--color-gray-400)}.hover\\:ring-indigo-600:hover{--tw-ring-color:var(--color-indigo-600)}.hover\\:ring-indigo-700:hover{--tw-ring-color:var(--color-indigo-700)}.hover\\:grayscale-0:hover{--tw-grayscale:grayscale(0%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.hover\\:after\\:h-full:hover:after{content:var(--tw-content);height:100%}}.focus\\:relative:focus{position:relative}.focus\\:z-10:focus{z-index:10}.focus\\:translate-y-4:focus{--tw-translate-y:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.focus\\:border-indigo-500:focus{border-color:var(--color-indigo-500)}.focus\\:border-transparent:focus{border-color:#0000}.focus\\:border-white:focus{border-color:var(--color-white)}.focus\\:bg-yellow-100:focus{background-color:var(--color-yellow-100)}.focus\\:bg-yellow-300:focus{background-color:var(--color-yellow-300)}.focus\\:bg-yellow-400:focus{background-color:var(--color-yellow-400)}.focus\\:ring-0:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\\:ring-black:focus{--tw-ring-color:var(--color-black)}.focus\\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\\:ring-indigo-500:focus{--tw-ring-color:var(--color-indigo-500)}.focus\\:ring-transparent:focus{--tw-ring-color:transparent}.focus\\:ring-yellow-300:focus{--tw-ring-color:var(--color-yellow-300)}.focus\\:ring-yellow-400:focus{--tw-ring-color:var(--color-yellow-400)}.focus\\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\\:ring-offset-white:focus{--tw-ring-offset-color:var(--color-white)}.focus\\:outline-hidden:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus\\:outline-hidden:focus{outline-offset:2px;outline:2px solid #0000}}.focus\\:outline-0:focus{outline-style:var(--tw-outline-style);outline-width:0}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\\:bg-blue-600:active{background-color:var(--color-blue-600)}.active\\:text-blue-600:active{color:var(--color-blue-600)}.disabled\\:pointer-events-auto:disabled{pointer-events:auto}.disabled\\:opacity-50:disabled{opacity:.5}.has-checked\\:border-blue-600:has(:checked){border-color:var(--color-blue-600)}.has-checked\\:bg-blue-500:has(:checked){background-color:var(--color-blue-500)}.has-checked\\:bg-green-500:has(:checked){background-color:var(--color-green-500)}.has-checked\\:ring-1:has(:checked){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.has-checked\\:ring-2:has(:checked){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.has-checked\\:ring-amber-500:has(:checked){--tw-ring-color:var(--color-amber-500)}.has-checked\\:ring-black:has(:checked){--tw-ring-color:var(--color-black)}.has-checked\\:ring-blue-500:has(:checked){--tw-ring-color:var(--color-blue-500)}.has-checked\\:ring-blue-600:has(:checked){--tw-ring-color:var(--color-blue-600)}.has-checked\\:ring-red-500:has(:checked){--tw-ring-color:var(--color-red-500)}.has-checked\\:ring-offset-2:has(:checked){--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}@media (min-width:40rem){.sm\\:end-6{inset-inline-end:calc(var(--spacing) * 6)}.sm\\:top-6{top:calc(var(--spacing) * 6)}.sm\\:order-first{order:-9999}.sm\\:order-last{order:9999}.sm\\:col-span-1{grid-column:span 1/span 1}.sm\\:col-span-2{grid-column:span 2/span 2}.sm\\:mt-0{margin-top:calc(var(--spacing) * 0)}.sm\\:mt-4{margin-top:calc(var(--spacing) * 4)}.sm\\:mt-6{margin-top:calc(var(--spacing) * 6)}.sm\\:mt-8{margin-top:calc(var(--spacing) * 8)}.sm\\:mt-48{margin-top:calc(var(--spacing) * 48)}.sm\\:block{display:block}.sm\\:flex{display:flex}.sm\\:grid{display:grid}.sm\\:hidden{display:none}.sm\\:inline{display:inline}.sm\\:inline-flex{display:inline-flex}.sm\\:size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.sm\\:size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.sm\\:size-18{width:calc(var(--spacing) * 18);height:calc(var(--spacing) * 18)}.sm\\:size-20{width:calc(var(--spacing) * 20);height:calc(var(--spacing) * 20)}.sm\\:h-56{height:calc(var(--spacing) * 56)}.sm\\:h-64{height:calc(var(--spacing) * 64)}.sm\\:h-72{height:calc(var(--spacing) * 72)}.sm\\:h-80{height:calc(var(--spacing) * 80)}.sm\\:h-112\\.5{height:calc(var(--spacing) * 112.5)}.sm\\:h-\\[calc\\(100\\%-2rem\\)\\]{height:calc(100% - 2rem)}.sm\\:h-full{height:100%}.sm\\:h-px{height:1px}.sm\\:w-8{width:calc(var(--spacing) * 8)}.sm\\:w-auto{width:auto}.sm\\:max-w-xs{max-width:var(--container-xs)}.sm\\:flex-1{flex:1}.sm\\:shrink-0{flex-shrink:0}.sm\\:basis-56{flex-basis:calc(var(--spacing) * 56)}.sm\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\\:flex-row{flex-direction:row}.sm\\:place-content-center{place-content:center}.sm\\:items-center{align-items:center}.sm\\:items-end{align-items:flex-end}.sm\\:items-stretch{align-items:stretch}.sm\\:justify-between{justify-content:space-between}.sm\\:justify-center{justify-content:center}.sm\\:justify-end{justify-content:flex-end}.sm\\:justify-start{justify-content:flex-start}.sm\\:gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.sm\\:gap-2{gap:calc(var(--spacing) * 2)}.sm\\:gap-4{gap:calc(var(--spacing) * 4)}.sm\\:gap-6{gap:calc(var(--spacing) * 6)}.sm\\:gap-8{gap:calc(var(--spacing) * 8)}:where(.sm\\:divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.sm\\:divide-y-0>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(0px * var(--tw-divide-y-reverse));border-bottom-width:calc(0px * calc(1 - var(--tw-divide-y-reverse)))}.sm\\:self-end{align-self:flex-end}.sm\\:rounded-full{border-radius:3.40282e38px}.sm\\:rounded-ss-\\[30px\\]{border-start-start-radius:30px}.sm\\:border-2{border-style:var(--tw-border-style);border-width:2px}.sm\\:border-indigo-500{border-color:var(--color-indigo-500)}.sm\\:border-l-transparent{border-left-color:#0000}.sm\\:bg-yellow-500{background-color:var(--color-yellow-500)}.sm\\:p-3{padding:calc(var(--spacing) * 3)}.sm\\:p-6{padding:calc(var(--spacing) * 6)}.sm\\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\\:px-8{padding-inline:calc(var(--spacing) * 8)}.sm\\:py-12{padding-block:calc(var(--spacing) * 12)}.sm\\:py-24{padding-block:calc(var(--spacing) * 24)}.sm\\:pt-48{padding-top:calc(var(--spacing) * 48)}.sm\\:pb-4{padding-bottom:calc(var(--spacing) * 4)}.sm\\:text-left{text-align:left}.sm\\:text-right{text-align:right}.sm\\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.sm\\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.sm\\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.sm\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.sm\\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\\:text-lg\\/relaxed{font-size:var(--text-lg);line-height:var(--leading-relaxed)}.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.sm\\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.sm\\:text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.sm\\:text-gray-500{color:var(--color-gray-500)}}@media (min-width:48rem){.md\\:relative{position:relative}.md\\:col-span-1{grid-column:span 1/span 1}.md\\:col-span-2{grid-column:span 2/span 2}.md\\:col-span-3{grid-column:span 3/span 3}.md\\:mt-4{margin-top:calc(var(--spacing) * 4)}.md\\:mt-8{margin-top:calc(var(--spacing) * 8)}.md\\:block{display:block}.md\\:flex{display:flex}.md\\:grid{display:grid}.md\\:hidden{display:none}.md\\:h-\\[calc\\(100\\%-4rem\\)\\]{height:calc(100% - 4rem)}.md\\:h-full{height:100%}.md\\:max-w-none{max-width:none}.md\\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\\:items-center{align-items:center}.md\\:justify-between{justify-content:space-between}.md\\:gap-4{gap:calc(var(--spacing) * 4)}.md\\:gap-8{gap:calc(var(--spacing) * 8)}.md\\:gap-12{gap:calc(var(--spacing) * 12)}:where(.md\\:space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}.md\\:rounded-ss-\\[60px\\]{border-start-start-radius:60px}.md\\:p-12{padding:calc(var(--spacing) * 12)}.md\\:py-4{padding-block:calc(var(--spacing) * 4)}.md\\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}}@media (min-width:64rem){.lg\\:end-8{inset-inline-end:calc(var(--spacing) * 8)}.lg\\:top-8{top:calc(var(--spacing) * 8)}.lg\\:order-last{order:9999}.lg\\:col-span-2{grid-column:span 2/span 2}.lg\\:col-span-3{grid-column:span 3/span 3}.lg\\:col-span-5{grid-column:span 5/span 5}.lg\\:mt-0{margin-top:calc(var(--spacing) * 0)}.lg\\:mt-8{margin-top:calc(var(--spacing) * 8)}.lg\\:mt-24{margin-top:calc(var(--spacing) * 24)}.lg\\:mt-64{margin-top:calc(var(--spacing) * 64)}.lg\\:block{display:block}.lg\\:flex{display:flex}.lg\\:grid{display:grid}.lg\\:hidden{display:none}.lg\\:h-72{height:calc(var(--spacing) * 72)}.lg\\:h-96{height:calc(var(--spacing) * 96)}.lg\\:h-full{height:100%}.lg\\:h-screen{height:100vh}.lg\\:max-w-none{max-width:none}.lg\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\\:grid-cols-\\[1fr_120px\\]{grid-template-columns:1fr 120px}.lg\\:grid-cols-\\[120px_1fr\\]{grid-template-columns:120px 1fr}.lg\\:place-content-center{place-content:center}.lg\\:items-end{align-items:flex-end}.lg\\:items-start{align-items:flex-start}.lg\\:justify-between{justify-content:space-between}.lg\\:justify-end{justify-content:flex-end}.lg\\:justify-start{justify-content:flex-start}.lg\\:gap-6{gap:calc(var(--spacing) * 6)}.lg\\:gap-8{gap:calc(var(--spacing) * 8)}.lg\\:gap-12{gap:calc(var(--spacing) * 12)}.lg\\:gap-32{gap:calc(var(--spacing) * 32)}:where(.lg\\:space-y-16>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)))}.lg\\:gap-y-16{row-gap:calc(var(--spacing) * 16)}.lg\\:border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.lg\\:border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.lg\\:p-4{padding:calc(var(--spacing) * 4)}.lg\\:p-8{padding:calc(var(--spacing) * 8)}.lg\\:p-12{padding:calc(var(--spacing) * 12)}.lg\\:px-8{padding-inline:calc(var(--spacing) * 8)}.lg\\:px-16{padding-inline:calc(var(--spacing) * 16)}.lg\\:py-16{padding-block:calc(var(--spacing) * 16)}.lg\\:py-24{padding-block:calc(var(--spacing) * 24)}.lg\\:py-32{padding-block:calc(var(--spacing) * 32)}.lg\\:ps-16{padding-inline-start:calc(var(--spacing) * 16)}.lg\\:pe-16{padding-inline-end:calc(var(--spacing) * 16)}.lg\\:pt-16{padding-top:calc(var(--spacing) * 16)}.lg\\:pt-24{padding-top:calc(var(--spacing) * 24)}.lg\\:pt-64{padding-top:calc(var(--spacing) * 64)}.lg\\:pb-8{padding-bottom:calc(var(--spacing) * 8)}.lg\\:text-left{text-align:left}.lg\\:text-right{text-align:right}.lg\\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}.ltr\\:border-s-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *){border-inline-start-style:var(--tw-border-style);border-inline-start-width:0}.ltr\\:border-b-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *){border-bottom-style:var(--tw-border-style);border-bottom-width:0}.ltr\\:bg-gray-50:where(:dir(ltr),[dir=ltr],[dir=ltr] *){background-color:var(--color-gray-50)}.ltr\\:bg-white:where(:dir(ltr),[dir=ltr],[dir=ltr] *){background-color:var(--color-white)}.ltr\\:text-left:where(:dir(ltr),[dir=ltr],[dir=ltr] *){text-align:left}.ltr\\:group-open\\:start-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *):is(:where(.group):is([open],:popover-open,:open) *){inset-inline-start:calc(var(--spacing) * 0)}@media (min-width:40rem){.ltr\\:sm\\:justify-start:where(:dir(ltr),[dir=ltr],[dir=ltr] *){justify-content:flex-start}.ltr\\:sm\\:text-left:where(:dir(ltr),[dir=ltr],[dir=ltr] *){text-align:left}}.rtl\\:rotate-180:where(:dir(rtl),[dir=rtl],[dir=rtl] *){rotate:180deg}.rtl\\:border-e-0:where(:dir(rtl),[dir=rtl],[dir=rtl] *){border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}.rtl\\:border-t-0:where(:dir(rtl),[dir=rtl],[dir=rtl] *){border-top-style:var(--tw-border-style);border-top-width:0}.rtl\\:bg-gray-50:where(:dir(rtl),[dir=rtl],[dir=rtl] *){background-color:var(--color-gray-50)}.rtl\\:bg-white:where(:dir(rtl),[dir=rtl],[dir=rtl] *){background-color:var(--color-white)}.rtl\\:text-right:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}@media (min-width:40rem){.rtl\\:sm\\:justify-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *){justify-content:flex-end}.rtl\\:sm\\:text-right:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}}:where(.dark\\:divide-gray-600:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-gray-600)}:where(.dark\\:divide-gray-700:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-gray-700)}:where(.dark\\:divide-gray-800:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-gray-800)}:where(.dark\\:divide-gray-900:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-gray-900)}.dark\\:border-amber-400:where(.dark,.dark *){border-color:var(--color-amber-400)}.dark\\:border-blue-400:where(.dark,.dark *){border-color:var(--color-blue-400)}.dark\\:border-blue-600:where(.dark,.dark *){border-color:var(--color-blue-600)}.dark\\:border-gray-600:where(.dark,.dark *){border-color:var(--color-gray-600)}.dark\\:border-gray-700:where(.dark,.dark *){border-color:var(--color-gray-700)}.dark\\:border-gray-800:where(.dark,.dark *){border-color:var(--color-gray-800)}.dark\\:border-green-400:where(.dark,.dark *){border-color:var(--color-green-400)}.dark\\:border-red-400:where(.dark,.dark *){border-color:var(--color-red-400)}.dark\\:border-white:where(.dark,.dark *){border-color:var(--color-white)}.dark\\:border-white\\/10:where(.dark,.dark *){border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.dark\\:border-white\\/10:where(.dark,.dark *){border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.dark\\:bg-amber-700:where(.dark,.dark *){background-color:var(--color-amber-700)}.dark\\:bg-amber-800:where(.dark,.dark *){background-color:var(--color-amber-800)}.dark\\:bg-blue-500\\/20:where(.dark,.dark *){background-color:#3080ff33}@supports (color:color-mix(in lab, red, red)){.dark\\:bg-blue-500\\/20:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-blue-500) 20%, transparent)}}.dark\\:bg-blue-700:where(.dark,.dark *){background-color:var(--color-blue-700)}.dark\\:bg-blue-700\\/25:where(.dark,.dark *){background-color:#1447e640}@supports (color:color-mix(in lab, red, red)){.dark\\:bg-blue-700\\/25:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-blue-700) 25%, transparent)}}.dark\\:bg-blue-800:where(.dark,.dark *){background-color:var(--color-blue-800)}.dark\\:bg-emerald-700:where(.dark,.dark *){background-color:var(--color-emerald-700)}.dark\\:bg-gray-400:where(.dark,.dark *){background-color:var(--color-gray-400)}.dark\\:bg-gray-600:where(.dark,.dark *){background-color:var(--color-gray-600)}.dark\\:bg-gray-700:where(.dark,.dark *){background-color:var(--color-gray-700)}.dark\\:bg-gray-800:where(.dark,.dark *){background-color:var(--color-gray-800)}.dark\\:bg-gray-900:where(.dark,.dark *){background-color:var(--color-gray-900)}.dark\\:bg-green-700:where(.dark,.dark *){background-color:var(--color-green-700)}.dark\\:bg-green-800:where(.dark,.dark *){background-color:var(--color-green-800)}.dark\\:bg-indigo-300:where(.dark,.dark *){background-color:var(--color-indigo-300)}.dark\\:bg-purple-600:where(.dark,.dark *){background-color:var(--color-purple-600)}.dark\\:bg-purple-700:where(.dark,.dark *){background-color:var(--color-purple-700)}.dark\\:bg-purple-800:where(.dark,.dark *){background-color:var(--color-purple-800)}.dark\\:bg-red-700:where(.dark,.dark *){background-color:var(--color-red-700)}.dark\\:bg-red-800:where(.dark,.dark *){background-color:var(--color-red-800)}.dark\\:bg-white:where(.dark,.dark *){background-color:var(--color-white)}.dark\\:bg-white\\/10:where(.dark,.dark *){background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.dark\\:bg-white\\/10:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.dark\\:to-gray-600:where(.dark,.dark *){--tw-gradient-to:var(--color-gray-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.dark\\:text-amber-100:where(.dark,.dark *){color:var(--color-amber-100)}.dark\\:text-amber-200:where(.dark,.dark *){color:var(--color-amber-200)}.dark\\:text-blue-50:where(.dark,.dark *){color:var(--color-blue-50)}.dark\\:text-blue-100:where(.dark,.dark *){color:var(--color-blue-100)}.dark\\:text-blue-200:where(.dark,.dark *){color:var(--color-blue-200)}.dark\\:text-blue-400:where(.dark,.dark *){color:var(--color-blue-400)}.dark\\:text-emerald-100:where(.dark,.dark *){color:var(--color-emerald-100)}.dark\\:text-gray-200:where(.dark,.dark *){color:var(--color-gray-200)}.dark\\:text-gray-300:where(.dark,.dark *){color:var(--color-gray-300)}.dark\\:text-gray-400:where(.dark,.dark *){color:var(--color-gray-400)}.dark\\:text-gray-500:where(.dark,.dark *){color:var(--color-gray-500)}.dark\\:text-gray-900:where(.dark,.dark *){color:var(--color-gray-900)}.dark\\:text-green-50:where(.dark,.dark *){color:var(--color-green-50)}.dark\\:text-green-100:where(.dark,.dark *){color:var(--color-green-100)}.dark\\:text-green-200:where(.dark,.dark *){color:var(--color-green-200)}.dark\\:text-indigo-300:where(.dark,.dark *){color:var(--color-indigo-300)}.dark\\:text-indigo-500:where(.dark,.dark *){color:var(--color-indigo-500)}.dark\\:text-purple-100:where(.dark,.dark *){color:var(--color-purple-100)}.dark\\:text-red-50:where(.dark,.dark *){color:var(--color-red-50)}.dark\\:text-red-100:where(.dark,.dark *){color:var(--color-red-100)}.dark\\:text-red-200:where(.dark,.dark *){color:var(--color-red-200)}.dark\\:text-red-500:where(.dark,.dark *){color:var(--color-red-500)}.dark\\:text-red-600:where(.dark,.dark *){color:var(--color-red-600)}.dark\\:text-teal-300:where(.dark,.dark *){color:var(--color-teal-300)}.dark\\:text-teal-500:where(.dark,.dark *){color:var(--color-teal-500)}.dark\\:text-teal-600:where(.dark,.dark *){color:var(--color-teal-600)}.dark\\:text-white:where(.dark,.dark *){color:var(--color-white)}.dark\\:text-white\\/75:where(.dark,.dark *){color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.dark\\:text-white\\/75:where(.dark,.dark *){color:color-mix(in oklab, var(--color-white) 75%, transparent)}}.dark\\:shadow-gray-700\\/25:where(.dark,.dark *){--tw-shadow-color:#36415340}@supports (color:color-mix(in lab, red, red)){.dark\\:shadow-gray-700\\/25:where(.dark,.dark *){--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-gray-700) 25%, transparent) var(--tw-shadow-alpha), transparent)}}.dark\\:shadow-gray-800\\/25:where(.dark,.dark *){--tw-shadow-color:#1e293940}@supports (color:color-mix(in lab, red, red)){.dark\\:shadow-gray-800\\/25:where(.dark,.dark *){--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-gray-800) 25%, transparent) var(--tw-shadow-alpha), transparent)}}.dark\\:ring-gray-900:where(.dark,.dark *){--tw-ring-color:var(--color-gray-900)}.dark\\:ring-offset-gray-900:where(.dark,.dark *){--tw-ring-offset-color:var(--color-gray-900)}:is(.dark\\:\\*\\:text-white:where(.dark,.dark *)>*){color:var(--color-white)}@media (hover:hover){.dark\\:group-hover\\:bg-gray-700:where(.dark,.dark *):is(:where(.group):hover *){background-color:var(--color-gray-700)}.dark\\:group-hover\\:bg-gray-900:where(.dark,.dark *):is(:where(.group):hover *){background-color:var(--color-gray-900)}.dark\\:group-hover\\:text-gray-100:where(.dark,.dark *):is(:where(.group):hover *){color:var(--color-gray-100)}.dark\\:group-hover\\:text-gray-300:where(.dark,.dark *):is(:where(.group):hover *){color:var(--color-gray-300)}.dark\\:group-hover\\:text-white\\/75:where(.dark,.dark *):is(:where(.group):hover *){color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.dark\\:group-hover\\:text-white\\/75:where(.dark,.dark *):is(:where(.group):hover *){color:color-mix(in oklab, var(--color-white) 75%, transparent)}}}.dark\\:peer-checked\\:bg-gray-900:where(.dark,.dark *):is(:where(.peer):checked~*){background-color:var(--color-gray-900)}.dark\\:before\\:bg-gray-700:where(.dark,.dark *):before,.dark\\:after\\:bg-gray-700:where(.dark,.dark *):after{content:var(--tw-content);background-color:var(--color-gray-700)}:is(.dark\\:\\*\\:first\\:bg-gray-900:where(.dark,.dark *)>*):first-child{background-color:var(--color-gray-900)}:is(.dark\\:\\*\\:even\\:bg-gray-800:where(.dark,.dark *)>*):nth-child(2n){background-color:var(--color-gray-800)}.dark\\:checked\\:bg-blue-600:where(.dark,.dark *):checked{background-color:var(--color-blue-600)}@media (hover:hover){.dark\\:hover\\:border-gray-700:where(.dark,.dark *):hover{border-color:var(--color-gray-700)}.dark\\:hover\\:bg-gray-600:where(.dark,.dark *):hover{background-color:var(--color-gray-600)}.dark\\:hover\\:bg-gray-700:where(.dark,.dark *):hover{background-color:var(--color-gray-700)}.dark\\:hover\\:bg-gray-800:where(.dark,.dark *):hover{background-color:var(--color-gray-800)}.dark\\:hover\\:bg-gray-800\\/50:where(.dark,.dark *):hover{background-color:#1e293980}@supports (color:color-mix(in lab, red, red)){.dark\\:hover\\:bg-gray-800\\/50:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--color-gray-800) 50%, transparent)}}.dark\\:hover\\:bg-indigo-700:where(.dark,.dark *):hover{background-color:var(--color-indigo-700)}.dark\\:hover\\:bg-purple-900:where(.dark,.dark *):hover{background-color:var(--color-purple-900)}.dark\\:hover\\:bg-red-600\\/10:where(.dark,.dark *):hover{background-color:#e400141a}@supports (color:color-mix(in lab, red, red)){.dark\\:hover\\:bg-red-600\\/10:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--color-red-600) 10%, transparent)}}.dark\\:hover\\:bg-red-700\\/20:where(.dark,.dark *):hover{background-color:#bf000f33}@supports (color:color-mix(in lab, red, red)){.dark\\:hover\\:bg-red-700\\/20:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--color-red-700) 20%, transparent)}}.dark\\:hover\\:bg-teal-500:where(.dark,.dark *):hover{background-color:var(--color-teal-500)}.dark\\:hover\\:text-blue-500:where(.dark,.dark *):hover{color:var(--color-blue-500)}.dark\\:hover\\:text-gray-200:where(.dark,.dark *):hover{color:var(--color-gray-200)}.dark\\:hover\\:text-gray-300:where(.dark,.dark *):hover{color:var(--color-gray-300)}.dark\\:hover\\:text-teal-500\\/75:where(.dark,.dark *):hover{color:#00baa7bf}@supports (color:color-mix(in lab, red, red)){.dark\\:hover\\:text-teal-500\\/75:where(.dark,.dark *):hover{color:color-mix(in oklab, var(--color-teal-500) 75%, transparent)}}.dark\\:hover\\:text-white:where(.dark,.dark *):hover{color:var(--color-white)}.dark\\:hover\\:text-white\\/75:where(.dark,.dark *):hover{color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.dark\\:hover\\:text-white\\/75:where(.dark,.dark *):hover{color:color-mix(in oklab, var(--color-white) 75%, transparent)}}}.dark\\:focus\\:ring-offset-gray-900:where(.dark,.dark *):focus{--tw-ring-offset-color:var(--color-gray-900)}.dark\\:has-checked\\:bg-blue-600:where(.dark,.dark *):has(:checked){background-color:var(--color-blue-600)}.dark\\:has-checked\\:bg-green-600:where(.dark,.dark *):has(:checked){background-color:var(--color-green-600)}.dark\\:ltr\\:bg-gray-800:where(.dark,.dark *):where(:dir(ltr),[dir=ltr],[dir=ltr] *){background-color:var(--color-gray-800)}.dark\\:ltr\\:bg-gray-900:where(.dark,.dark *):where(:dir(ltr),[dir=ltr],[dir=ltr] *){background-color:var(--color-gray-900)}.dark\\:rtl\\:bg-gray-800:where(.dark,.dark *):where(:dir(rtl),[dir=rtl],[dir=rtl] *){background-color:var(--color-gray-800)}.dark\\:rtl\\:bg-gray-900:where(.dark,.dark *):where(:dir(rtl),[dir=rtl],[dir=rtl] *){background-color:var(--color-gray-900)}.\\[\\&_summary\\:\\:-webkit-details-marker\\]\\:hidden summary::-webkit-details-marker{display:none}.\\[\\&\\:\\:-webkit-calendar-picker-indicator\\]\\:opacity-0::-webkit-calendar-picker-indicator{opacity:0}.\\[\\&\\:\\:-webkit-details-marker\\]\\:hidden::-webkit-details-marker{display:none}.\\[\\&\\:\\:-webkit-inner-spin-button\\]\\:m-0::-webkit-inner-spin-button{margin:calc(var(--spacing) * 0)}.\\[\\&\\:\\:-webkit-inner-spin-button\\]\\:appearance-none::-webkit-inner-spin-button{appearance:none}.\\[\\&\\:\\:-webkit-outer-spin-button\\]\\:m-0::-webkit-outer-spin-button{margin:calc(var(--spacing) * 0)}.\\[\\&\\:\\:-webkit-outer-spin-button\\]\\:appearance-none::-webkit-outer-spin-button{appearance:none}.\\[\\&\\:\\:-webkit-slider-thumb\\]\\:size-7::-webkit-slider-thumb{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.\\[\\&\\:\\:-webkit-slider-thumb\\]\\:cursor-pointer::-webkit-slider-thumb{cursor:pointer}.\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none::-webkit-slider-thumb{appearance:none}.\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full::-webkit-slider-thumb{border-radius:3.40282e38px}.\\[\\&\\:\\:-webkit-slider-thumb\\]\\:border-\\[6px\\]::-webkit-slider-thumb{border-style:var(--tw-border-style);border-width:6px}.\\[\\&\\:\\:-webkit-slider-thumb\\]\\:border-gray-500::-webkit-slider-thumb{border-color:var(--color-gray-500)}.\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-gray-200::-webkit-slider-thumb{background-color:var(--color-gray-200)}@media (hover:hover){.hover\\:\\[\\&\\~label\\]\\:text-yellow-500:hover~label{color:var(--color-yellow-500)}}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-divide-x-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-divide-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-gradient-position{syntax:\"*\";inherits:false}@property --tw-gradient-from{syntax:\"<color>\";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:\"<color>\";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:\"<color>\";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:\"*\";inherits:false}@property --tw-gradient-via-stops{syntax:\"*\";inherits:false}@property --tw-gradient-from-position{syntax:\"<length-percentage>\";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:\"<length-percentage>\";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:\"<length-percentage>\";inherits:false;initial-value:100%}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-tracking{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:\"*\";inherits:false}@property --tw-brightness{syntax:\"*\";inherits:false}@property --tw-contrast{syntax:\"*\";inherits:false}@property --tw-grayscale{syntax:\"*\";inherits:false}@property --tw-hue-rotate{syntax:\"*\";inherits:false}@property --tw-invert{syntax:\"*\";inherits:false}@property --tw-opacity{syntax:\"*\";inherits:false}@property --tw-saturate{syntax:\"*\";inherits:false}@property --tw-sepia{syntax:\"*\";inherits:false}@property --tw-drop-shadow{syntax:\"*\";inherits:false}@property --tw-drop-shadow-color{syntax:\"*\";inherits:false}@property --tw-drop-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:\"*\";inherits:false}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-scale-x{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-y{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-z{syntax:\"*\";inherits:false;initial-value:1}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}"
  },
  {
    "path": "public/component.js",
    "content": "document.addEventListener('DOMContentLoaded', () => {\n  document.querySelectorAll('a, input[type=\"file\"]').forEach((iframeLink) => {\n    iframeLink.addEventListener('click', (e) => e.preventDefault())\n    iframeLink.addEventListener('keydown', (e) => e.key !== 'Tab' && e.preventDefault())\n  })\n\n  document.querySelectorAll('form').forEach((iframeForm) => {\n    iframeForm.addEventListener('submit', (e) => e.preventDefault())\n  })\n})\n"
  },
  {
    "path": "public/examples/application/accordions/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"space-y-2\">\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800\"\n        >\n          <span>What are the basic features?</span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-4\">\n          <p class=\"text-gray-700 dark:text-gray-200\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800\"\n        >\n          <span>How do I get started?</span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-4\">\n          <p class=\"text-gray-700 dark:text-gray-200\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800\"\n        >\n          <span>What support options are available?</span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-4\">\n          <p class=\"text-gray-700 dark:text-gray-200\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/accordions/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"space-y-2\">\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50\"\n        >\n          <span>What are the basic features?</span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-4\">\n          <p class=\"text-gray-700\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50\"\n        >\n          <span>How do I get started?</span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-4\">\n          <p class=\"text-gray-700\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50\"\n        >\n          <span>What support options are available?</span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-4\">\n          <p class=\"text-gray-700\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/accordions/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"space-y-2\">\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800\"\n        >\n          <span class=\"flex items-center gap-2\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-5\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"\n              />\n            </svg>\n\n            Getting Started\n          </span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-4\">\n          <p class=\"text-gray-700 dark:text-gray-200\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800\"\n        >\n          <span class=\"flex items-center gap-2\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-5\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z\"\n              />\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"\n              />\n            </svg>\n\n            Configuration\n          </span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-4\">\n          <p class=\"text-gray-700 dark:text-gray-200\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800\"\n        >\n          <span class=\"flex items-center gap-2\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-5\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z\"\n              />\n            </svg>\n\n            Troubleshooting\n          </span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-4\">\n          <p class=\"text-gray-700 dark:text-gray-200\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/accordions/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"space-y-2\">\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50\"\n        >\n          <span class=\"flex items-center gap-2\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-5\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"\n              />\n            </svg>\n\n            Getting Started\n          </span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-4\">\n          <p class=\"text-gray-700\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50\"\n        >\n          <span class=\"flex items-center gap-2\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-5\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z\"\n              />\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"\n              />\n            </svg>\n\n            Configuration\n          </span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-4\">\n          <p class=\"text-gray-700\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50\"\n        >\n          <span class=\"flex items-center gap-2\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-5\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z\"\n              />\n            </svg>\n\n            Troubleshooting\n          </span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-4\">\n          <p class=\"text-gray-700\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/accordions/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"-mx-4 -my-2 space-y-0 divide-y divide-gray-200 dark:divide-gray-700\">\n      <details class=\"group px-4 py-3 [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 font-medium text-gray-900 hover:text-gray-700 dark:text-white dark:hover:text-gray-200\"\n        >\n          <span>Account Settings</span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"py-4\">\n          <p class=\"text-gray-700 dark:text-gray-200\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group px-4 py-3 [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 font-medium text-gray-900 hover:text-gray-700 dark:text-white dark:hover:text-gray-200\"\n        >\n          <span>Privacy & Permissions</span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"py-4\">\n          <p class=\"text-gray-700 dark:text-gray-200\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group px-4 py-3 [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 font-medium text-gray-900 hover:text-gray-700 dark:text-white dark:hover:text-gray-200\"\n        >\n          <span>Notifications & Alerts</span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"py-4\">\n          <p class=\"text-gray-700 dark:text-gray-200\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/accordions/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"-mx-4 -my-2 space-y-0 divide-y divide-gray-200\">\n      <details class=\"group px-4 py-3 [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 font-medium text-gray-900 hover:text-gray-700\"\n        >\n          <span>Account Settings</span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"py-4\">\n          <p class=\"text-gray-700\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group px-4 py-3 [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 font-medium text-gray-900 hover:text-gray-700\"\n        >\n          <span>Privacy & Permissions</span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"py-4\">\n          <p class=\"text-gray-700\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group px-4 py-3 [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 font-medium text-gray-900 hover:text-gray-700\"\n        >\n          <span>Notifications & Alerts</span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"py-4\">\n          <p class=\"text-gray-700\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/accordions/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"space-y-2\">\n      <details class=\"group space-y-2 [&_summary::-webkit-details-marker]:hidden\" open>\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800\"\n        >\n          <span>Team Settings</span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"space-y-2 pl-4\">\n          <details class=\"group/members [&_summary::-webkit-details-marker]:hidden\">\n            <summary\n              class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n            >\n              <span>Members</span>\n\n              <svg\n                class=\"size-4 shrink-0 transition-transform duration-300 group-open/members:-rotate-180\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M19 9l-7 7-7-7\"\n                />\n              </svg>\n            </summary>\n\n            <div class=\"p-4\">\n              <p class=\"text-gray-700 dark:text-gray-200\">\n                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae\n                hic dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut\n                minus iste odio consectetur molestias iusto cupiditate ullam laborum veniam quos\n                officia. Quos, temporibus perspiciatis!\n              </p>\n            </div>\n          </details>\n\n          <details class=\"group/roles [&_summary::-webkit-details-marker]:hidden\">\n            <summary\n              class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n            >\n              <span>Roles & Permissions</span>\n\n              <svg\n                class=\"size-4 shrink-0 transition-transform duration-300 group-open/roles:-rotate-180\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M19 9l-7 7-7-7\"\n                />\n              </svg>\n            </summary>\n\n            <div class=\"p-4\">\n              <p class=\"text-gray-700 dark:text-gray-200\">\n                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae\n                hic dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut\n                minus iste odio consectetur molestias iusto cupiditate ullam laborum veniam quos\n                officia. Quos, temporibus perspiciatis!\n              </p>\n            </div>\n          </details>\n        </div>\n      </details>\n\n      <details class=\"group space-y-2 [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800\"\n        >\n          <span>Integration Settings</span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"space-y-2 pl-4\">\n          <details class=\"group/keys [&_summary::-webkit-details-marker]:hidden\">\n            <summary\n              class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n            >\n              <span>API Keys</span>\n\n              <svg\n                class=\"size-4 shrink-0 transition-transform duration-300 group-open/keys:-rotate-180\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M19 9l-7 7-7-7\"\n                />\n              </svg>\n            </summary>\n\n            <div class=\"p-4\">\n              <p class=\"text-gray-700 dark:text-gray-200\">\n                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae\n                hic dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut\n                minus iste odio consectetur molestias iusto cupiditate ullam laborum veniam quos\n                officia. Quos, temporibus perspiciatis!\n              </p>\n            </div>\n          </details>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/accordions/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"space-y-2\">\n      <details class=\"group space-y-2 [&_summary::-webkit-details-marker]:hidden\" open>\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50\"\n        >\n          <span>Team Settings</span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"space-y-2 pl-4\">\n          <details class=\"group/members [&_summary::-webkit-details-marker]:hidden\">\n            <summary\n              class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100\"\n            >\n              <span>Members</span>\n\n              <svg\n                class=\"size-4 shrink-0 transition-transform duration-300 group-open/members:-rotate-180\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M19 9l-7 7-7-7\"\n                />\n              </svg>\n            </summary>\n\n            <div class=\"p-4\">\n              <p class=\"text-gray-700\">\n                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae\n                hic dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut\n                minus iste odio consectetur molestias iusto cupiditate ullam laborum veniam quos\n                officia. Quos, temporibus perspiciatis!\n              </p>\n            </div>\n          </details>\n\n          <details class=\"group/roles [&_summary::-webkit-details-marker]:hidden\">\n            <summary\n              class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100\"\n            >\n              <span>Roles & Permissions</span>\n\n              <svg\n                class=\"size-4 shrink-0 transition-transform duration-300 group-open/roles:-rotate-180\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M19 9l-7 7-7-7\"\n                />\n              </svg>\n            </summary>\n\n            <div class=\"p-4\">\n              <p class=\"text-gray-700\">\n                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae\n                hic dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut\n                minus iste odio consectetur molestias iusto cupiditate ullam laborum veniam quos\n                officia. Quos, temporibus perspiciatis!\n              </p>\n            </div>\n          </details>\n        </div>\n      </details>\n\n      <details class=\"group space-y-2 [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50\"\n        >\n          <span>Integration Settings</span>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"space-y-2 pl-4\">\n          <details class=\"group/keys [&_summary::-webkit-details-marker]:hidden\">\n            <summary\n              class=\"flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100\"\n            >\n              <span>API Keys</span>\n\n              <svg\n                class=\"size-4 shrink-0 transition-transform duration-300 group-open/keys:-rotate-180\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M19 9l-7 7-7-7\"\n                />\n              </svg>\n            </summary>\n\n            <div class=\"p-4\">\n              <p class=\"text-gray-700\">\n                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae\n                hic dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut\n                minus iste odio consectetur molestias iusto cupiditate ullam laborum veniam quos\n                officia. Quos, temporibus perspiciatis!\n              </p>\n            </div>\n          </details>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/accordions/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"space-y-1\">\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800\"\n        >\n          <span>Storage & Limits</span>\n\n          <svg\n            class=\"size-4 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-3\">\n          <p class=\"text-gray-700 dark:text-gray-200\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800\"\n        >\n          <span>Active Sessions</span>\n\n          <svg\n            class=\"size-4 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-3\">\n          <p class=\"text-gray-700 dark:text-gray-200\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800\"\n        >\n          <span>Billing History</span>\n\n          <svg\n            class=\"size-4 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-3\">\n          <p class=\"text-gray-700 dark:text-gray-200\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/accordions/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"space-y-1\">\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100\"\n        >\n          <span>Storage & Limits</span>\n\n          <svg\n            class=\"size-4 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-3\">\n          <p class=\"text-gray-700\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100\"\n        >\n          <span>Active Sessions</span>\n\n          <svg\n            class=\"size-4 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-3\">\n          <p class=\"text-gray-700\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 rounded px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100\"\n        >\n          <span>Billing History</span>\n\n          <svg\n            class=\"size-4 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-3\">\n          <p class=\"text-gray-700\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/badges/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <span\n      class=\"rounded-full bg-purple-100 px-2.5 py-0.5 text-sm whitespace-nowrap text-purple-700 dark:bg-purple-700 dark:text-purple-100\"\n    >\n      Live\n    </span>\n\n    <span\n      class=\"rounded-full border border-purple-500 px-2.5 py-0.5 text-sm whitespace-nowrap text-purple-700 dark:text-purple-100\"\n    >\n      Live\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/badges/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <span\n      class=\"rounded-full bg-purple-100 px-2.5 py-0.5 text-sm whitespace-nowrap text-purple-700\"\n    >\n      Live\n    </span>\n\n    <span\n      class=\"rounded-full border border-purple-500 px-2.5 py-0.5 text-sm whitespace-nowrap text-purple-700\"\n    >\n      Live\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/badges/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <span\n      class=\"inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-0.5 text-purple-700 dark:bg-purple-700 dark:text-purple-100\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"-ms-1 me-1.5 size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n        />\n      </svg>\n\n      <p class=\"text-sm whitespace-nowrap\">Euro</p>\n    </span>\n\n    <span\n      class=\"inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-0.5 text-purple-700 dark:text-purple-100\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"-ms-1 me-1.5 size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n        />\n      </svg>\n\n      <p class=\"text-sm whitespace-nowrap\">Euro</p>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/badges/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <span\n      class=\"inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-0.5 text-purple-700\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"-ms-1 me-1.5 size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n        />\n      </svg>\n\n      <p class=\"text-sm whitespace-nowrap\">Euro</p>\n    </span>\n\n    <span\n      class=\"inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-0.5 text-purple-700\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"-ms-1 me-1.5 size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n        />\n      </svg>\n\n      <p class=\"text-sm whitespace-nowrap\">Euro</p>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/badges/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <span\n      class=\"inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-0.5 text-purple-700 dark:bg-purple-700 dark:text-purple-100\"\n    >\n      <p class=\"text-sm whitespace-nowrap\">Euro</p>\n\n      <button\n        class=\"ms-1.5 -me-1 inline-block rounded-full bg-purple-200 p-0.5 text-purple-700 transition hover:bg-purple-300 dark:bg-purple-800 dark:text-purple-100 dark:hover:bg-purple-900\"\n      >\n        <span class=\"sr-only\">Remove badge</span>\n\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-3\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n        </svg>\n      </button>\n    </span>\n\n    <span\n      class=\"inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-0.5 text-purple-700 dark:text-purple-100\"\n    >\n      <p class=\"text-sm whitespace-nowrap\">Euro</p>\n\n      <button\n        class=\"ms-1.5 -me-1 inline-block rounded-full bg-purple-200 p-0.5 text-purple-700 transition hover:bg-purple-300 dark:bg-purple-800 dark:text-purple-100 dark:hover:bg-purple-900\"\n      >\n        <span class=\"sr-only\">Remove badge</span>\n\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-3\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n        </svg>\n      </button>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/badges/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <span\n      class=\"inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-0.5 text-purple-700\"\n    >\n      <p class=\"text-sm whitespace-nowrap\">Euro</p>\n\n      <button\n        class=\"ms-1.5 -me-1 inline-block rounded-full bg-purple-200 p-0.5 text-purple-700 transition hover:bg-purple-300\"\n      >\n        <span class=\"sr-only\">Remove badge</span>\n\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-3\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n        </svg>\n      </button>\n    </span>\n\n    <span\n      class=\"inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-0.5 text-purple-700\"\n    >\n      <p class=\"text-sm whitespace-nowrap\">Euro</p>\n\n      <button\n        class=\"ms-1.5 -me-1 inline-block rounded-full bg-purple-200 p-0.5 text-purple-700 transition hover:bg-purple-300\"\n      >\n        <span class=\"sr-only\">Remove badge</span>\n\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-3\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n        </svg>\n      </button>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/badges/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <span\n      class=\"inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-1 text-purple-700 dark:bg-purple-700 dark:text-purple-100\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n        />\n      </svg>\n    </span>\n\n    <span\n      class=\"inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-1 text-purple-700 dark:text-purple-100\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n        />\n      </svg>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/badges/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <span\n      class=\"inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-1 text-purple-700\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n        />\n      </svg>\n    </span>\n\n    <span\n      class=\"inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-1 text-purple-700\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n        />\n      </svg>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/badges/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <span\n      class=\"inline-flex items-center justify-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-emerald-700 dark:bg-emerald-700 dark:text-emerald-100\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"-ms-1 me-1.5 size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n        />\n      </svg>\n\n      <p class=\"text-sm whitespace-nowrap\">Paid</p>\n    </span>\n\n    <span\n      class=\"inline-flex items-center justify-center rounded-full border border-emerald-500 px-2.5 py-0.5 text-emerald-700 dark:text-emerald-100\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"-ms-1 me-1.5 size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n        />\n      </svg>\n\n      <p class=\"text-sm whitespace-nowrap\">Paid</p>\n    </span>\n\n    <span\n      class=\"inline-flex items-center justify-center rounded-full bg-amber-100 px-2.5 py-0.5 text-amber-700 dark:bg-amber-700 dark:text-amber-100\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"-ms-1 me-1.5 size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M8.25 9.75h4.875a2.625 2.625 0 010 5.25H12M8.25 9.75L10.5 7.5M8.25 9.75L10.5 12m9-7.243V21.75l-3.75-1.5-3.75 1.5-3.75-1.5-3.75 1.5V4.757c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0c1.1.128 1.907 1.077 1.907 2.185z\"\n        />\n      </svg>\n\n      <p class=\"text-sm whitespace-nowrap\">Refunded</p>\n    </span>\n\n    <span\n      class=\"inline-flex items-center justify-center rounded-full border border-amber-500 px-2.5 py-0.5 text-amber-700 dark:text-amber-100\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"-ms-1 me-1.5 size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M8.25 9.75h4.875a2.625 2.625 0 010 5.25H12M8.25 9.75L10.5 7.5M8.25 9.75L10.5 12m9-7.243V21.75l-3.75-1.5-3.75 1.5-3.75-1.5-3.75 1.5V4.757c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0c1.1.128 1.907 1.077 1.907 2.185z\"\n        />\n      </svg>\n\n      <p class=\"text-sm whitespace-nowrap\">Refunded</p>\n    </span>\n\n    <span\n      class=\"inline-flex items-center justify-center rounded-full bg-red-100 px-2.5 py-0.5 text-red-700 dark:bg-red-700 dark:text-red-100\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"-ms-1 me-1.5 size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\"\n        />\n      </svg>\n\n      <p class=\"text-sm whitespace-nowrap\">Failed</p>\n    </span>\n\n    <span\n      class=\"inline-flex items-center justify-center rounded-full border border-red-500 px-2.5 py-0.5 text-red-700 dark:text-red-100\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"-ms-1 me-1.5 size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\"\n        />\n      </svg>\n\n      <p class=\"text-sm whitespace-nowrap\">Failed</p>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/badges/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <span\n      class=\"inline-flex items-center justify-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-emerald-700\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"-ms-1 me-1.5 size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n        />\n      </svg>\n\n      <p class=\"text-sm whitespace-nowrap\">Paid</p>\n    </span>\n\n    <span\n      class=\"inline-flex items-center justify-center rounded-full border border-emerald-500 px-2.5 py-0.5 text-emerald-700\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"-ms-1 me-1.5 size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n        />\n      </svg>\n\n      <p class=\"text-sm whitespace-nowrap\">Paid</p>\n    </span>\n\n    <span\n      class=\"inline-flex items-center justify-center rounded-full bg-amber-100 px-2.5 py-0.5 text-amber-700\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"-ms-1 me-1.5 size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M8.25 9.75h4.875a2.625 2.625 0 010 5.25H12M8.25 9.75L10.5 7.5M8.25 9.75L10.5 12m9-7.243V21.75l-3.75-1.5-3.75 1.5-3.75-1.5-3.75 1.5V4.757c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0c1.1.128 1.907 1.077 1.907 2.185z\"\n        />\n      </svg>\n\n      <p class=\"text-sm whitespace-nowrap\">Refunded</p>\n    </span>\n\n    <span\n      class=\"inline-flex items-center justify-center rounded-full border border-amber-500 px-2.5 py-0.5 text-amber-700\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"-ms-1 me-1.5 size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M8.25 9.75h4.875a2.625 2.625 0 010 5.25H12M8.25 9.75L10.5 7.5M8.25 9.75L10.5 12m9-7.243V21.75l-3.75-1.5-3.75 1.5-3.75-1.5-3.75 1.5V4.757c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0c1.1.128 1.907 1.077 1.907 2.185z\"\n        />\n      </svg>\n\n      <p class=\"text-sm whitespace-nowrap\">Refunded</p>\n    </span>\n\n    <span\n      class=\"inline-flex items-center justify-center rounded-full bg-red-100 px-2.5 py-0.5 text-red-700\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"-ms-1 me-1.5 size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\"\n        />\n      </svg>\n\n      <p class=\"text-sm whitespace-nowrap\">Failed</p>\n    </span>\n\n    <span\n      class=\"inline-flex items-center justify-center rounded-full border border-red-500 px-2.5 py-0.5 text-red-700\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"-ms-1 me-1.5 size-4\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\"\n        />\n      </svg>\n\n      <p class=\"text-sm whitespace-nowrap\">Failed</p>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/breadcrumbs/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <nav aria-label=\"Breadcrumb\">\n      <ol class=\"flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200\">\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900 dark:hover:text-white\">\n            Home\n          </a>\n        </li>\n\n        <li class=\"rtl:rotate-180\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900 dark:hover:text-white\">\n            Category\n          </a>\n        </li>\n\n        <li class=\"rtl:rotate-180\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900 dark:hover:text-white\">\n            Product\n          </a>\n        </li>\n      </ol>\n    </nav>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/breadcrumbs/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <nav aria-label=\"Breadcrumb\">\n      <ol class=\"flex items-center gap-1 text-sm text-gray-700\">\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900\"> Home </a>\n        </li>\n\n        <li class=\"rtl:rotate-180\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900\"> Category </a>\n        </li>\n\n        <li class=\"rtl:rotate-180\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900\"> Product </a>\n        </li>\n      </ol>\n    </nav>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/breadcrumbs/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <nav aria-label=\"Breadcrumb\">\n      <ol class=\"flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200\">\n        <li>\n          <a\n            href=\"#\"\n            class=\"block transition-colors hover:text-gray-900 dark:hover:text-white\"\n            aria-label=\"Home\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-4\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"\n              />\n            </svg>\n          </a>\n        </li>\n\n        <li class=\"rtl:rotate-180\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900 dark:hover:text-white\">\n            Category\n          </a>\n        </li>\n\n        <li class=\"rtl:rotate-180\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900 dark:hover:text-white\">\n            Product\n          </a>\n        </li>\n      </ol>\n    </nav>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/breadcrumbs/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <nav aria-label=\"Breadcrumb\">\n      <ol class=\"flex items-center gap-1 text-sm text-gray-700\">\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900\" aria-label=\"Home\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-4\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"\n              />\n            </svg>\n          </a>\n        </li>\n\n        <li class=\"rtl:rotate-180\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900\"> Category </a>\n        </li>\n\n        <li class=\"rtl:rotate-180\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900\"> Product </a>\n        </li>\n      </ol>\n    </nav>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/breadcrumbs/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <nav aria-label=\"Breadcrumb\">\n      <ol class=\"flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200\">\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900 dark:hover:text-white\">\n            Home\n          </a>\n        </li>\n\n        <li class=\"rtl:rotate-180\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m9 20.247 6-16.5\" />\n          </svg>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900 dark:hover:text-white\">\n            Category\n          </a>\n        </li>\n\n        <li class=\"rtl:rotate-180\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m9 20.247 6-16.5\" />\n          </svg>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900 dark:hover:text-white\">\n            Product\n          </a>\n        </li>\n      </ol>\n    </nav>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/breadcrumbs/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <nav aria-label=\"Breadcrumb\">\n      <ol class=\"flex items-center gap-1 text-sm text-gray-700\">\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900\"> Home </a>\n        </li>\n\n        <li class=\"rtl:rotate-180\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m9 20.247 6-16.5\" />\n          </svg>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900\"> Category </a>\n        </li>\n\n        <li class=\"rtl:rotate-180\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m9 20.247 6-16.5\" />\n          </svg>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900\"> Product </a>\n        </li>\n      </ol>\n    </nav>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/breadcrumbs/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <nav aria-label=\"Breadcrumb\">\n      <ol class=\"flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200\">\n        <li>\n          <a\n            href=\"#\"\n            class=\"block transition-colors hover:text-gray-900 dark:hover:text-white\"\n            aria-label=\"Home\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-4\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"\n              />\n            </svg>\n          </a>\n        </li>\n\n        <li class=\"rtl:rotate-180\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m9 20.247 6-16.5\" />\n          </svg>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900 dark:hover:text-white\">\n            Category\n          </a>\n        </li>\n\n        <li class=\"rtl:rotate-180\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m9 20.247 6-16.5\" />\n          </svg>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900 dark:hover:text-white\">\n            Product\n          </a>\n        </li>\n      </ol>\n    </nav>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/breadcrumbs/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <nav aria-label=\"Breadcrumb\">\n      <ol class=\"flex items-center gap-1 text-sm text-gray-700\">\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900\" aria-label=\"Home\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-4\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"\n              />\n            </svg>\n          </a>\n        </li>\n\n        <li class=\"rtl:rotate-180\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m9 20.247 6-16.5\" />\n          </svg>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900\"> Category </a>\n        </li>\n\n        <li class=\"rtl:rotate-180\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m9 20.247 6-16.5\" />\n          </svg>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"block transition-colors hover:text-gray-900\"> Product </a>\n        </li>\n      </ol>\n    </nav>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/breadcrumbs/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <nav aria-label=\"Breadcrumb\">\n      <ol\n        class=\"flex overflow-hidden rounded border border-gray-300 bg-white text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200\"\n      >\n        <li>\n          <a\n            href=\"#\"\n            class=\"block h-10 bg-gray-100 px-4 leading-10 transition-colors hover:text-gray-900 dark:bg-gray-700 dark:hover:text-white\"\n          >\n            Home\n          </a>\n        </li>\n\n        <li class=\"relative flex items-center\">\n          <span\n            class=\"absolute inset-y-0 -start-px h-10 w-4 bg-gray-100 [clip-path:_polygon(0_0,_0%_100%,_100%_50%)] rtl:rotate-180 dark:bg-gray-700\"\n          >\n          </span>\n\n          <a\n            href=\"#\"\n            class=\"block h-10 pr-4 pl-6 leading-10 transition-colors hover:text-gray-900 dark:hover:text-white\"\n          >\n            Category\n          </a>\n        </li>\n      </ol>\n    </nav>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/breadcrumbs/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <nav aria-label=\"Breadcrumb\">\n      <ol\n        class=\"flex overflow-hidden rounded border border-gray-300 bg-white text-sm text-gray-700\"\n      >\n        <li>\n          <a\n            href=\"#\"\n            class=\"block h-10 bg-gray-100 px-4 leading-10 transition-colors hover:text-gray-900\"\n          >\n            Home\n          </a>\n        </li>\n\n        <li class=\"relative flex items-center\">\n          <span\n            class=\"absolute inset-y-0 -start-px h-10 w-4 bg-gray-100 [clip-path:_polygon(0_0,_0%_100%,_100%_50%)] rtl:rotate-180\"\n          >\n          </span>\n\n          <a href=\"#\" class=\"block h-10 pr-4 pl-6 leading-10 transition-colors hover:text-gray-900\">\n            Category\n          </a>\n        </li>\n      </ol>\n    </nav>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/button-groups/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div class=\"inline-flex\">\n      <button\n        class=\"rounded-s-sm border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900\"\n      >\n        View\n      </button>\n\n      <button\n        class=\"-ms-px border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900\"\n      >\n        Edit\n      </button>\n\n      <button\n        class=\"-ms-px rounded-e-sm border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900\"\n      >\n        Delete\n      </button>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/button-groups/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div class=\"inline-flex\">\n      <button\n        class=\"rounded-s-sm border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50\"\n      >\n        View\n      </button>\n\n      <button\n        class=\"-ms-px border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50\"\n      >\n        Edit\n      </button>\n\n      <button\n        class=\"-ms-px rounded-e-sm border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50\"\n      >\n        Delete\n      </button>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/button-groups/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div class=\"inline-flex\">\n      <button\n        class=\"rounded-s-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"\n          />\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"\n          />\n        </svg>\n      </button>\n\n      <button\n        class=\"-ms-px border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125\"\n          />\n        </svg>\n      </button>\n\n      <button\n        class=\"-ms-px rounded-e-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"\n          />\n        </svg>\n      </button>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/button-groups/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div class=\"inline-flex\">\n      <button\n        class=\"rounded-s-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"\n          />\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"\n          />\n        </svg>\n      </button>\n\n      <button\n        class=\"-ms-px border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125\"\n          />\n        </svg>\n      </button>\n\n      <button\n        class=\"-ms-px rounded-e-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"\n          />\n        </svg>\n      </button>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/button-groups/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div class=\"inline-flex\">\n      <button\n        class=\"rounded-s-sm border border-gray-200 px-4 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900\"\n      >\n        Edit\n      </button>\n\n      <button\n        class=\"-ms-px rounded-e-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"\n          />\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"\n          />\n        </svg>\n      </button>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/button-groups/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div class=\"inline-flex\">\n      <button\n        class=\"rounded-s-sm border border-gray-200 px-4 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50\"\n      >\n        Edit\n      </button>\n\n      <button\n        class=\"-ms-px rounded-e-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"\n          />\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"\n          />\n        </svg>\n      </button>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/button-groups/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div class=\"inline-flex gap-2\">\n      <button\n        class=\"rounded-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z\"\n          />\n        </svg>\n      </button>\n\n      <button\n        class=\"rounded-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z\"\n          />\n        </svg>\n      </button>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/button-groups/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div class=\"inline-flex gap-2\">\n      <button\n        class=\"rounded-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z\"\n          />\n        </svg>\n      </button>\n\n      <button\n        class=\"rounded-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z\"\n          />\n        </svg>\n      </button>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/button-groups/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div class=\"inline-flex\">\n      <button\n        class=\"rounded-s-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z\"\n          />\n        </svg>\n      </button>\n\n      <button\n        class=\"-ms-px rounded-e-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z\"\n          />\n        </svg>\n      </button>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/button-groups/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div class=\"inline-flex\">\n      <button\n        class=\"rounded-s-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z\"\n          />\n        </svg>\n      </button>\n\n      <button\n        class=\"-ms-px rounded-e-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z\"\n          />\n        </svg>\n      </button>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/checkboxes/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <fieldset>\n      <legend class=\"sr-only\">Checkboxes</legend>\n\n      <div class=\"flex flex-col items-start gap-3\">\n        <label for=\"Option1\" class=\"inline-flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            class=\"size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n            id=\"Option1\"\n          />\n\n          <span class=\"font-medium text-gray-700 dark:text-gray-200\"> Option 1 </span>\n        </label>\n\n        <label for=\"Option2\" class=\"inline-flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            class=\"size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n            id=\"Option2\"\n          />\n\n          <span class=\"font-medium text-gray-700 dark:text-gray-200\"> Option 2 </span>\n        </label>\n\n        <label for=\"Option3\" class=\"inline-flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            class=\"size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n            id=\"Option3\"\n          />\n\n          <span class=\"font-medium text-gray-700 dark:text-gray-200\"> Option 3 </span>\n        </label>\n      </div>\n    </fieldset>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/checkboxes/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <fieldset>\n      <legend class=\"sr-only\">Checkboxes</legend>\n\n      <div class=\"flex flex-col items-start gap-3\">\n        <label for=\"Option1\" class=\"inline-flex items-center gap-3\">\n          <input type=\"checkbox\" class=\"size-5 rounded border-gray-300 shadow-sm\" id=\"Option1\" />\n\n          <span class=\"font-medium text-gray-700\"> Option 1 </span>\n        </label>\n\n        <label for=\"Option2\" class=\"inline-flex items-center gap-3\">\n          <input type=\"checkbox\" class=\"size-5 rounded border-gray-300 shadow-sm\" id=\"Option2\" />\n\n          <span class=\"font-medium text-gray-700\"> Option 2 </span>\n        </label>\n\n        <label for=\"Option3\" class=\"inline-flex items-center gap-3\">\n          <input type=\"checkbox\" class=\"size-5 rounded border-gray-300 shadow-sm\" id=\"Option3\" />\n\n          <span class=\"font-medium text-gray-700\"> Option 3 </span>\n        </label>\n      </div>\n    </fieldset>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/checkboxes/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <fieldset>\n      <legend class=\"sr-only\">Checkboxes</legend>\n\n      <div class=\"flex flex-col items-start gap-3\">\n        <label for=\"Option1\" class=\"inline-flex items-start gap-3\">\n          <input\n            type=\"checkbox\"\n            class=\"my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n            id=\"Option1\"\n          />\n\n          <div>\n            <span class=\"font-medium text-gray-700 dark:text-gray-200\"> Option 1 </span>\n\n            <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">\n              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n            </p>\n          </div>\n        </label>\n\n        <label for=\"Option2\" class=\"inline-flex items-start gap-3\">\n          <input\n            type=\"checkbox\"\n            class=\"my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n            id=\"Option2\"\n          />\n\n          <div>\n            <span class=\"font-medium text-gray-700 dark:text-gray-200\"> Option 2 </span>\n\n            <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">\n              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n            </p>\n          </div>\n        </label>\n\n        <label for=\"Option3\" class=\"inline-flex items-start gap-3\">\n          <input\n            type=\"checkbox\"\n            class=\"my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n            id=\"Option3\"\n          />\n\n          <div>\n            <span class=\"font-medium text-gray-700 dark:text-gray-200\"> Option 3 </span>\n\n            <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">\n              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n            </p>\n          </div>\n        </label>\n      </div>\n    </fieldset>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/checkboxes/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <fieldset>\n      <legend class=\"sr-only\">Checkboxes</legend>\n\n      <div class=\"flex flex-col items-start gap-3\">\n        <label for=\"Option1\" class=\"inline-flex items-start gap-3\">\n          <input\n            type=\"checkbox\"\n            class=\"my-0.5 size-5 rounded border-gray-300 shadow-sm\"\n            id=\"Option1\"\n          />\n\n          <div>\n            <span class=\"font-medium text-gray-700\"> Option 1 </span>\n\n            <p class=\"mt-0.5 text-sm text-gray-700\">\n              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n            </p>\n          </div>\n        </label>\n\n        <label for=\"Option2\" class=\"inline-flex items-start gap-3\">\n          <input\n            type=\"checkbox\"\n            class=\"my-0.5 size-5 rounded border-gray-300 shadow-sm\"\n            id=\"Option2\"\n          />\n\n          <div>\n            <span class=\"font-medium text-gray-700\"> Option 2 </span>\n\n            <p class=\"mt-0.5 text-sm text-gray-700\">\n              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n            </p>\n          </div>\n        </label>\n\n        <label for=\"Option3\" class=\"inline-flex items-start gap-3\">\n          <input\n            type=\"checkbox\"\n            class=\"my-0.5 size-5 rounded border-gray-300 shadow-sm\"\n            id=\"Option3\"\n          />\n\n          <div>\n            <span class=\"font-medium text-gray-700\"> Option 3 </span>\n\n            <p class=\"mt-0.5 text-sm text-gray-700\">\n              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n            </p>\n          </div>\n        </label>\n      </div>\n    </fieldset>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/checkboxes/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <fieldset>\n      <legend class=\"sr-only\">Checkboxes</legend>\n\n      <div class=\"flow-root\">\n        <div class=\"-my-3 flex flex-col items-start divide-y divide-gray-200 dark:divide-gray-700\">\n          <label for=\"Option1\" class=\"inline-flex items-start gap-3 py-3\">\n            <input\n              type=\"checkbox\"\n              class=\"my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n              id=\"Option1\"\n            />\n\n            <div>\n              <span class=\"font-medium text-gray-700 dark:text-gray-200\"> Option 1 </span>\n\n              <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">\n                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n              </p>\n            </div>\n          </label>\n\n          <label for=\"Option2\" class=\"inline-flex items-start gap-3 py-3\">\n            <input\n              type=\"checkbox\"\n              class=\"my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n              id=\"Option2\"\n            />\n\n            <div>\n              <span class=\"font-medium text-gray-700 dark:text-gray-200\"> Option 2 </span>\n\n              <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">\n                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n              </p>\n            </div>\n          </label>\n\n          <label for=\"Option3\" class=\"inline-flex items-start gap-3 py-3\">\n            <input\n              type=\"checkbox\"\n              class=\"my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n              id=\"Option3\"\n            />\n\n            <div>\n              <span class=\"font-medium text-gray-700 dark:text-gray-200\"> Option 3 </span>\n\n              <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">\n                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n              </p>\n            </div>\n          </label>\n        </div>\n      </div>\n    </fieldset>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/checkboxes/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <fieldset>\n      <legend class=\"sr-only\">Checkboxes</legend>\n\n      <div class=\"flow-root\">\n        <div class=\"-my-3 flex flex-col items-start divide-y divide-gray-200\">\n          <label for=\"Option1\" class=\"inline-flex items-start gap-3 py-3\">\n            <input\n              type=\"checkbox\"\n              class=\"my-0.5 size-5 rounded border-gray-300 shadow-sm\"\n              id=\"Option1\"\n            />\n\n            <div>\n              <span class=\"font-medium text-gray-700\"> Option 1 </span>\n\n              <p class=\"mt-0.5 text-sm text-gray-700\">\n                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n              </p>\n            </div>\n          </label>\n\n          <label for=\"Option2\" class=\"inline-flex items-start gap-3 py-3\">\n            <input\n              type=\"checkbox\"\n              class=\"my-0.5 size-5 rounded border-gray-300 shadow-sm\"\n              id=\"Option2\"\n            />\n\n            <div>\n              <span class=\"font-medium text-gray-700\"> Option 2 </span>\n\n              <p class=\"mt-0.5 text-sm text-gray-700\">\n                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n              </p>\n            </div>\n          </label>\n\n          <label for=\"Option3\" class=\"inline-flex items-start gap-3 py-3\">\n            <input\n              type=\"checkbox\"\n              class=\"my-0.5 size-5 rounded border-gray-300 shadow-sm\"\n              id=\"Option3\"\n            />\n\n            <div>\n              <span class=\"font-medium text-gray-700\"> Option 3 </span>\n\n              <p class=\"mt-0.5 text-sm text-gray-700\">\n                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n              </p>\n            </div>\n          </label>\n        </div>\n      </div>\n    </fieldset>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/details-list/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"flow-root\">\n      <dl class=\"-my-3 divide-y divide-gray-200 text-sm dark:divide-gray-700\">\n        <div class=\"grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Title</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">Mr</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Name</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">John Frusciante</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Occupation</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">Guitarist</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Salary</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">$1,000,000+</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Bio</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo\n            doloremque impedit nesciunt dolorem facere, dolor quasi veritatis quia fugit aperiam\n            aspernatur neque molestiae labore aliquam soluta architecto?\n          </dd>\n        </div>\n      </dl>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/details-list/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"flow-root\">\n      <dl class=\"-my-3 divide-y divide-gray-200 text-sm\">\n        <div class=\"grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Title</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">Mr</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Name</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">John Frusciante</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Occupation</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">Guitarist</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Salary</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">$1,000,000+</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Bio</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo\n            doloremque impedit nesciunt dolorem facere, dolor quasi veritatis quia fugit aperiam\n            aspernatur neque molestiae labore aliquam soluta architecto?\n          </dd>\n        </div>\n      </dl>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/details-list/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"flow-root\">\n      <dl\n        class=\"-my-3 divide-y divide-gray-200 text-sm *:even:bg-gray-50 dark:divide-gray-700 dark:*:even:bg-gray-800\"\n      >\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Title</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">Mr</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Name</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">John Frusciante</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Occupation</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">Guitarist</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Salary</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">$1,000,000+</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Bio</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo\n            doloremque impedit nesciunt dolorem facere, dolor quasi veritatis quia fugit aperiam\n            aspernatur neque molestiae labore aliquam soluta architecto?\n          </dd>\n        </div>\n      </dl>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/details-list/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"flow-root\">\n      <dl class=\"-my-3 divide-y divide-gray-200 text-sm *:even:bg-gray-50\">\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Title</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">Mr</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Name</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">John Frusciante</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Occupation</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">Guitarist</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Salary</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">$1,000,000+</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Bio</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo\n            doloremque impedit nesciunt dolorem facere, dolor quasi veritatis quia fugit aperiam\n            aspernatur neque molestiae labore aliquam soluta architecto?\n          </dd>\n        </div>\n      </dl>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/details-list/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"flow-root\">\n      <dl\n        class=\"-my-3 divide-y divide-gray-200 rounded border border-gray-200 text-sm dark:divide-gray-700 dark:border-gray-800\"\n      >\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Title</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">Mr</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Name</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">John Frusciante</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Occupation</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">Guitarist</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Salary</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">$1,000,000+</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Bio</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo\n            doloremque impedit nesciunt dolorem facere, dolor quasi veritatis quia fugit aperiam\n            aspernatur neque molestiae labore aliquam soluta architecto?\n          </dd>\n        </div>\n      </dl>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/details-list/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"flow-root\">\n      <dl class=\"-my-3 divide-y divide-gray-200 rounded border border-gray-200 text-sm\">\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Title</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">Mr</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Name</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">John Frusciante</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Occupation</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">Guitarist</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Salary</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">$1,000,000+</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Bio</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo\n            doloremque impedit nesciunt dolorem facere, dolor quasi veritatis quia fugit aperiam\n            aspernatur neque molestiae labore aliquam soluta architecto?\n          </dd>\n        </div>\n      </dl>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/details-list/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"flow-root\">\n      <dl\n        class=\"-my-3 divide-y divide-gray-200 rounded border border-gray-200 text-sm *:even:bg-gray-50 dark:divide-gray-700 dark:border-gray-800 dark:*:even:bg-gray-800\"\n      >\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Title</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">Mr</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Name</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">John Frusciante</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Occupation</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">Guitarist</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Salary</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">$1,000,000+</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900 dark:text-white\">Bio</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2 dark:text-gray-200\">\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo\n            doloremque impedit nesciunt dolorem facere, dolor quasi veritatis quia fugit aperiam\n            aspernatur neque molestiae labore aliquam soluta architecto?\n          </dd>\n        </div>\n      </dl>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/details-list/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"flow-root\">\n      <dl\n        class=\"-my-3 divide-y divide-gray-200 rounded border border-gray-200 text-sm *:even:bg-gray-50\"\n      >\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Title</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">Mr</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Name</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">John Frusciante</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Occupation</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">Guitarist</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Salary</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">$1,000,000+</dd>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4\">\n          <dt class=\"font-medium text-gray-900\">Bio</dt>\n\n          <dd class=\"text-gray-700 sm:col-span-2\">\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo\n            doloremque impedit nesciunt dolorem facere, dolor quasi veritatis quia fugit aperiam\n            aspernatur neque molestiae labore aliquam soluta architecto?\n          </dd>\n        </div>\n      </dl>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dividers/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <span class=\"flex items-center\">\n      <span class=\"h-px flex-1 bg-gray-300 dark:bg-gray-600\"></span>\n\n      <span class=\"shrink-0 px-4 text-gray-900 dark:text-white\"> Title goes here </span>\n\n      <span class=\"h-px flex-1 bg-gray-300 dark:bg-gray-600\"></span>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dividers/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <span class=\"flex items-center\">\n      <span class=\"h-px flex-1 bg-gray-300\"></span>\n\n      <span class=\"shrink-0 px-4 text-gray-900\">Title goes here</span>\n\n      <span class=\"h-px flex-1 bg-gray-300\"></span>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dividers/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <span class=\"flex items-center\">\n      <span class=\"h-px flex-1 bg-linear-to-r from-transparent to-gray-300 dark:to-gray-600\"></span>\n\n      <span class=\"shrink-0 px-4 text-gray-900 dark:text-white\">Title goes here</span>\n\n      <span class=\"h-px flex-1 bg-linear-to-l from-transparent to-gray-300 dark:to-gray-600\"></span>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dividers/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <span class=\"flex items-center\">\n      <span class=\"h-px flex-1 bg-linear-to-r from-transparent to-gray-300\"></span>\n\n      <span class=\"shrink-0 px-4 text-gray-900\">Title goes here</span>\n\n      <span class=\"h-px flex-1 bg-linear-to-l from-transparent to-gray-300\"></span>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dividers/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <span class=\"flex items-center\">\n      <span class=\"shrink-0 pe-4 text-gray-900 dark:text-white\"> Title goes here </span>\n\n      <span class=\"h-px flex-1 bg-gray-300 dark:bg-gray-600\"></span>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dividers/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <span class=\"flex items-center\">\n      <span class=\"shrink-0 pe-4 text-gray-900\">Title goes here</span>\n\n      <span class=\"h-px flex-1 bg-gray-300\"></span>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dividers/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <span class=\"flex items-center\">\n      <span class=\"shrink-0 pe-4 text-gray-900 dark:text-white\"> Title goes here </span>\n\n      <span class=\"h-px flex-1 bg-linear-to-l from-transparent to-gray-300 dark:to-gray-600\"></span>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dividers/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <span class=\"flex items-center\">\n      <span class=\"shrink-0 pe-4 text-gray-900\">Title goes here</span>\n\n      <span class=\"h-px flex-1 bg-linear-to-l from-transparent to-gray-300\"></span>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dividers/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <span class=\"flex items-center\">\n      <span class=\"h-px flex-1 bg-gray-300 dark:bg-gray-600\"></span>\n\n      <span class=\"shrink-0 ps-4 text-gray-900 dark:text-white\"> Title goes here </span>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dividers/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <span class=\"flex items-center\">\n      <span class=\"h-px flex-1 bg-gray-300\"></span>\n\n      <span class=\"shrink-0 ps-4 text-gray-900\">Title goes here</span>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dividers/6-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <span class=\"flex items-center\">\n      <span class=\"h-px flex-1 bg-linear-to-r from-transparent to-gray-300 dark:to-gray-600\"></span>\n\n      <span class=\"shrink-0 ps-4 text-gray-900 dark:text-white\"> Title goes here </span>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dividers/6.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <span class=\"flex items-center\">\n      <span class=\"h-px flex-1 bg-linear-to-r from-transparent to-gray-300\"></span>\n\n      <span class=\"shrink-0 ps-4 text-gray-900\">Title goes here</span>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dropdown/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-sm justify-center p-6\">\n    <div class=\"relative inline-flex\">\n      <span\n        class=\"inline-flex divide-x divide-gray-300 overflow-hidden rounded border border-gray-300 bg-white shadow-sm dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-800\"\n      >\n        <button\n          type=\"button\"\n          class=\"px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white\"\n        >\n          Product\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white\"\n          aria-label=\"Menu\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\" />\n          </svg>\n        </button>\n      </span>\n\n      <div\n        role=\"menu\"\n        class=\"absolute end-0 top-12 z-auto w-56 overflow-hidden rounded border border-gray-300 bg-white shadow-sm dark:border-gray-600 dark:bg-gray-800\"\n      >\n        <a\n          href=\"#\"\n          class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white\"\n          role=\"menuitem\"\n        >\n          Storefront\n        </a>\n\n        <a\n          href=\"#\"\n          class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white\"\n          role=\"menuitem\"\n        >\n          Warehouse\n        </a>\n\n        <a\n          href=\"#\"\n          class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white\"\n          role=\"menuitem\"\n        >\n          Stock\n        </a>\n\n        <button\n          type=\"button\"\n          class=\"block w-full px-3 py-2 text-sm font-medium text-red-700 transition-colors hover:bg-red-50 ltr:text-left rtl:text-right dark:text-red-600 dark:hover:bg-red-700/20\"\n        >\n          Delete\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dropdown/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-sm justify-center p-6\">\n    <div class=\"relative inline-flex\">\n      <span\n        class=\"inline-flex divide-x divide-gray-300 overflow-hidden rounded border border-gray-300 bg-white shadow-sm\"\n      >\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative\"\n        >\n          Product\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative\"\n          aria-label=\"Menu\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\" />\n          </svg>\n        </button>\n      </span>\n\n      <div\n        role=\"menu\"\n        class=\"absolute end-0 top-12 z-auto w-56 overflow-hidden rounded border border-gray-300 bg-white shadow-sm\"\n      >\n        <a\n          href=\"#\"\n          class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900\"\n          role=\"menuitem\"\n        >\n          Storefront\n        </a>\n\n        <a\n          href=\"#\"\n          class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900\"\n          role=\"menuitem\"\n        >\n          Warehouse\n        </a>\n\n        <a\n          href=\"#\"\n          class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900\"\n          role=\"menuitem\"\n        >\n          Stock\n        </a>\n\n        <button\n          type=\"button\"\n          class=\"block w-full px-3 py-2 text-sm font-medium text-red-700 transition-colors hover:bg-red-50 ltr:text-left rtl:text-right\"\n        >\n          Delete\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dropdown/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-sm justify-center p-6\">\n    <div class=\"relative inline-flex\">\n      <span\n        class=\"inline-flex divide-x divide-gray-300 overflow-hidden rounded border border-gray-300 bg-white shadow-sm dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-800\"\n      >\n        <button\n          type=\"button\"\n          class=\"px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white\"\n        >\n          Product\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white\"\n          aria-label=\"Menu\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\" />\n          </svg>\n        </button>\n      </span>\n\n      <div\n        role=\"menu\"\n        class=\"absolute end-0 top-12 z-auto w-56 divide-y divide-gray-200 overflow-hidden rounded border border-gray-300 bg-white shadow-sm dark:divide-gray-700 dark:border-gray-600 dark:bg-gray-800\"\n      >\n        <div>\n          <a\n            href=\"#\"\n            class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white\"\n            role=\"menuitem\"\n          >\n            Storefront\n          </a>\n\n          <a\n            href=\"#\"\n            class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white\"\n            role=\"menuitem\"\n          >\n            Warehouse\n          </a>\n\n          <a\n            href=\"#\"\n            class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white\"\n            role=\"menuitem\"\n          >\n            Stock\n          </a>\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"block w-full px-3 py-2 text-sm font-medium text-red-700 transition-colors hover:bg-red-50 ltr:text-left rtl:text-right dark:text-red-600 dark:hover:bg-red-700/20\"\n        >\n          Delete\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dropdown/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-sm justify-center p-6\">\n    <div class=\"relative inline-flex\">\n      <span\n        class=\"inline-flex divide-x divide-gray-300 overflow-hidden rounded border border-gray-300 bg-white shadow-sm\"\n      >\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative\"\n        >\n          Product\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative\"\n          aria-label=\"Menu\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\" />\n          </svg>\n        </button>\n      </span>\n\n      <div\n        role=\"menu\"\n        class=\"absolute end-0 top-12 z-auto w-56 divide-y divide-gray-200 overflow-hidden rounded border border-gray-300 bg-white shadow-sm\"\n      >\n        <div>\n          <a\n            href=\"#\"\n            class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900\"\n            role=\"menuitem\"\n          >\n            Storefront\n          </a>\n\n          <a\n            href=\"#\"\n            class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900\"\n            role=\"menuitem\"\n          >\n            Warehouse\n          </a>\n\n          <a\n            href=\"#\"\n            class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900\"\n            role=\"menuitem\"\n          >\n            Stock\n          </a>\n        </div>\n        <button\n          type=\"button\"\n          class=\"block w-full px-3 py-2 text-sm font-medium text-red-700 transition-colors hover:bg-red-50 ltr:text-left rtl:text-right\"\n        >\n          Delete\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dropdown/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-sm justify-center p-6\">\n    <div class=\"relative inline-flex\">\n      <span\n        class=\"inline-flex divide-x divide-gray-300 overflow-hidden rounded border border-gray-300 bg-white shadow-sm dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-800\"\n      >\n        <button\n          type=\"button\"\n          class=\"px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white\"\n        >\n          Product\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white\"\n          aria-label=\"Menu\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\" />\n          </svg>\n        </button>\n      </span>\n\n      <div\n        role=\"menu\"\n        class=\"absolute end-0 top-12 z-auto w-56 divide-y divide-gray-200 overflow-hidden rounded border border-gray-300 bg-white shadow-sm dark:divide-gray-700 dark:border-gray-600 dark:bg-gray-800\"\n      >\n        <div>\n          <p class=\"block px-3 py-2 text-sm text-gray-500 dark:text-gray-400\">General</p>\n\n          <a\n            href=\"#\"\n            class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white\"\n            role=\"menuitem\"\n          >\n            Storefront\n          </a>\n\n          <a\n            href=\"#\"\n            class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white\"\n            role=\"menuitem\"\n          >\n            Warehouse\n          </a>\n\n          <a\n            href=\"#\"\n            class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white\"\n            role=\"menuitem\"\n          >\n            Stock\n          </a>\n        </div>\n\n        <div>\n          <p class=\"block px-3 py-2 text-sm text-gray-500 dark:text-gray-400\">Actions</p>\n\n          <button\n            type=\"button\"\n            class=\"block w-full px-3 py-2 text-sm font-medium text-red-700 transition-colors hover:bg-red-50 ltr:text-left rtl:text-right dark:text-red-600 dark:hover:bg-red-700/20\"\n          >\n            Delete\n          </button>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/dropdown/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-sm justify-center p-6\">\n    <div class=\"relative inline-flex\">\n      <span\n        class=\"inline-flex divide-x divide-gray-300 overflow-hidden rounded border border-gray-300 bg-white shadow-sm\"\n      >\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative\"\n        >\n          Product\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative\"\n          aria-label=\"Menu\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\" />\n          </svg>\n        </button>\n      </span>\n\n      <div\n        role=\"menu\"\n        class=\"absolute end-0 top-12 z-auto w-56 divide-y divide-gray-200 overflow-hidden rounded border border-gray-300 bg-white shadow-sm\"\n      >\n        <div>\n          <p class=\"block px-3 py-2 text-sm text-gray-500\">General</p>\n\n          <a\n            href=\"#\"\n            class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900\"\n            role=\"menuitem\"\n          >\n            Storefront\n          </a>\n\n          <a\n            href=\"#\"\n            class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900\"\n            role=\"menuitem\"\n          >\n            Warehouse\n          </a>\n\n          <a\n            href=\"#\"\n            class=\"block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900\"\n            role=\"menuitem\"\n          >\n            Stock\n          </a>\n        </div>\n\n        <div>\n          <p class=\"block px-3 py-2 text-sm text-gray-500\">Actions</p>\n\n          <button\n            type=\"button\"\n            class=\"block w-full px-3 py-2 text-sm font-medium text-red-700 transition-colors hover:bg-red-50 ltr:text-left rtl:text-right\"\n          >\n            Delete\n          </button>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/empty-states/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400 dark:text-gray-500\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900 dark:text-white\">No items found</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700 dark:text-gray-200\">\n        Get started by creating your first item. It only takes a few seconds.\n      </p>\n\n      <button\n        type=\"button\"\n        class=\"mt-6 block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700\"\n      >\n        Create Item\n      </button>\n\n      <p class=\"mt-6 text-sm text-gray-700 dark:text-gray-200\">\n        <a href=\"#\" class=\"underline hover:text-gray-900 dark:hover:text-white\">Learn how</a> or\n        <a href=\"#\" class=\"underline hover:text-gray-900 dark:hover:text-white\">view examples</a>\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/empty-states/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900\">No items found</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700\">\n        Get started by creating your first item. It only takes a few seconds.\n      </p>\n\n      <button\n        type=\"button\"\n        class=\"mt-6 block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700\"\n      >\n        Create Item\n      </button>\n\n      <p class=\"mt-6 text-sm text-gray-700\">\n        <a href=\"#\" class=\"underline hover:text-gray-900\">Learn how</a> or\n        <a href=\"#\" class=\"underline hover:text-gray-900\">view examples</a>\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/empty-states/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400 dark:text-gray-500\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900 dark:text-white\">No data to display</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700 dark:text-gray-200\">\n        Get started by creating your first item. It only takes a few seconds.\n      </p>\n\n      <div class=\"mt-6 space-y-3\">\n        <button\n          class=\"block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700\"\n        >\n          Import Data\n        </button>\n\n        <button\n          class=\"block w-full rounded-lg border border-gray-300 px-6 py-3 text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:text-white dark:hover:bg-gray-800/50\"\n        >\n          Create New\n        </button>\n      </div>\n\n      <p class=\"mt-6 text-sm text-gray-700 dark:text-gray-200\">Supported formats: CSV, JSON</p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/empty-states/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900\">No data to display</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700\">\n        Get started by creating your first item. It only takes a few seconds.\n      </p>\n\n      <div class=\"mt-6 space-y-3\">\n        <button\n          class=\"block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700\"\n        >\n          Import Data\n        </button>\n\n        <button\n          class=\"block w-full rounded-lg border border-gray-300 px-6 py-3 text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50\"\n        >\n          Create New\n        </button>\n      </div>\n\n      <p class=\"mt-6 text-sm text-gray-700\">Supported formats: CSV, JSON</p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/empty-states/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400 dark:text-gray-500\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900 dark:text-white\">Upload your files</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700 dark:text-gray-200\">\n        Drag and drop files here or click to browse your computer.\n      </p>\n\n      <label\n        for=\"files\"\n        class=\"mt-6 block rounded-lg border-2 border-dashed border-gray-300 p-6 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-800/50\"\n      >\n        <span class=\"text-sm font-semibold text-indigo-600 dark:text-indigo-500\">\n          Choose files\n        </span>\n\n        <input type=\"file\" id=\"files\" class=\"sr-only\" />\n      </label>\n\n      <p class=\"mt-6 text-sm text-gray-700 dark:text-gray-200\">\n        Maximum file size: 10MB. Supported formats: PDF, DOCX, XLSX\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/empty-states/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900\">Upload your files</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700\">\n        Drag and drop files here or click to browse your computer.\n      </p>\n\n      <label\n        for=\"files\"\n        class=\"mt-6 block rounded-lg border-2 border-dashed border-gray-300 p-6 transition-colors hover:bg-gray-50\"\n      >\n        <span class=\"text-sm font-semibold text-indigo-600\"> Choose files </span>\n\n        <input type=\"file\" id=\"files\" class=\"sr-only\" />\n      </label>\n\n      <p class=\"mt-6 text-sm text-gray-700\">\n        Maximum file size: 10MB. Supported formats: PDF, DOCX, XLSX\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/empty-states/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400 dark:text-gray-500\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900 dark:text-white\">Get started in seconds</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700 dark:text-gray-200\">\n        Complete these quick steps to set up your workspace.\n      </p>\n\n      <ol class=\"mt-6 space-y-2 text-left\">\n        <li class=\"flex items-center gap-2\">\n          <span\n            class=\"grid size-6 shrink-0 place-content-center rounded-full bg-indigo-600 text-sm font-medium text-white\"\n          >\n            1\n          </span>\n\n          <span class=\"text-sm text-gray-700 dark:text-gray-200\">Create your first project</span>\n        </li>\n\n        <li class=\"flex items-center gap-2\">\n          <span\n            class=\"grid size-6 shrink-0 place-content-center rounded-full bg-indigo-600 text-sm font-medium text-white\"\n          >\n            2\n          </span>\n\n          <span class=\"text-sm text-gray-700 dark:text-gray-200\">Invite team members</span>\n        </li>\n\n        <li class=\"flex items-center gap-2\">\n          <span\n            class=\"grid size-6 shrink-0 place-content-center rounded-full bg-indigo-600 text-sm font-medium text-white\"\n          >\n            3\n          </span>\n\n          <span class=\"text-sm text-gray-700 dark:text-gray-200\">Start collaborating</span>\n        </li>\n      </ol>\n\n      <button\n        class=\"mt-6 block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700\"\n      >\n        Create Project\n      </button>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/empty-states/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900\">Get started in seconds</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700\">\n        Complete these quick steps to set up your workspace.\n      </p>\n\n      <ol class=\"mt-6 space-y-2 text-left\">\n        <li class=\"flex items-center gap-2\">\n          <span\n            class=\"grid size-6 shrink-0 place-content-center rounded-full bg-indigo-600 text-sm font-medium text-white\"\n          >\n            1\n          </span>\n\n          <span class=\"text-sm text-gray-700\">Create your first project</span>\n        </li>\n\n        <li class=\"flex items-center gap-2\">\n          <span\n            class=\"grid size-6 shrink-0 place-content-center rounded-full bg-indigo-600 text-sm font-medium text-white\"\n          >\n            2\n          </span>\n\n          <span class=\"text-sm text-gray-700\">Invite team members</span>\n        </li>\n\n        <li class=\"flex items-center gap-2\">\n          <span\n            class=\"grid size-6 shrink-0 place-content-center rounded-full bg-indigo-600 text-sm font-medium text-white\"\n          >\n            3\n          </span>\n\n          <span class=\"text-sm text-gray-700\">Start collaborating</span>\n        </li>\n      </ol>\n\n      <button\n        class=\"mt-6 block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700\"\n      >\n        Create Project\n      </button>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/empty-states/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400 dark:text-gray-500\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900 dark:text-white\">No results found</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700 dark:text-gray-200\">\n        Try adjusting your search or filters to find what you're looking for.\n      </p>\n\n      <div class=\"mt-6 space-y-2\">\n        <input\n          type=\"text\"\n          placeholder=\"Search again...\"\n          class=\"w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n        />\n\n        <button\n          class=\"block w-full rounded-lg border border-gray-300 px-6 py-3 text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:text-white dark:hover:bg-gray-800\"\n        >\n          Clear filters\n        </button>\n      </div>\n\n      <p class=\"mt-6 text-sm text-gray-700 dark:text-gray-200\">\n        <a href=\"#\" class=\"underline transition-colors hover:text-gray-900 dark:hover:text-white\"\n          >Contact support</a\n        >\n        if you need help\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/empty-states/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900\">No results found</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700\">\n        Try adjusting your search or filters to find what you're looking for.\n      </p>\n\n      <div class=\"mt-6 space-y-2\">\n        <input\n          type=\"text\"\n          placeholder=\"Search again...\"\n          class=\"w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n        />\n\n        <button\n          class=\"block w-full rounded-lg border border-gray-300 px-6 py-3 text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50\"\n        >\n          Clear filters\n        </button>\n      </div>\n\n      <p class=\"mt-6 text-sm text-gray-700\">\n        <a href=\"#\" class=\"underline transition-colors hover:text-gray-900\">Contact support</a> if\n        you need help\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/file-uploaders/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <label\n      for=\"File\"\n      class=\"block rounded border border-gray-300 bg-white p-4 text-gray-900 shadow-sm sm:p-6 dark:border-gray-700 dark:bg-gray-900 dark:text-white\"\n    >\n      <div class=\"flex items-center justify-center gap-4\">\n        <span class=\"font-medium dark:text-white\"> Upload your file(s) </span>\n\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-6\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M7.5 7.5h-.75A2.25 2.25 0 0 0 4.5 9.75v7.5a2.25 2.25 0 0 0 2.25 2.25h7.5a2.25 2.25 0 0 0 2.25-2.25v-7.5a2.25 2.25 0 0 0-2.25-2.25h-.75m0-3-3-3m0 0-3 3m3-3v11.25m6-2.25h.75a2.25 2.25 0 0 1 2.25 2.25v7.5a2.25 2.25 0 0 1-2.25 2.25h-7.5a2.25 2.25 0 0 1-2.25-2.25v-.75\"\n          />\n        </svg>\n      </div>\n\n      <input multiple type=\"file\" id=\"File\" class=\"sr-only\" />\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/file-uploaders/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <label\n      for=\"File\"\n      class=\"block rounded border border-gray-300 p-4 text-gray-900 shadow-sm sm:p-6\"\n    >\n      <div class=\"flex items-center justify-center gap-4\">\n        <span class=\"font-medium\"> Upload your file(s) </span>\n\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-6\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M7.5 7.5h-.75A2.25 2.25 0 0 0 4.5 9.75v7.5a2.25 2.25 0 0 0 2.25 2.25h7.5a2.25 2.25 0 0 0 2.25-2.25v-7.5a2.25 2.25 0 0 0-2.25-2.25h-.75m0-3-3-3m0 0-3 3m3-3v11.25m6-2.25h.75a2.25 2.25 0 0 1 2.25 2.25v7.5a2.25 2.25 0 0 1-2.25 2.25h-7.5a2.25 2.25 0 0 1-2.25-2.25v-.75\"\n          />\n        </svg>\n      </div>\n\n      <input multiple type=\"file\" id=\"File\" class=\"sr-only\" />\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/file-uploaders/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <label\n      for=\"File\"\n      class=\"flex flex-col items-center rounded border border-gray-300 bg-white p-4 text-gray-900 shadow-sm sm:p-6 dark:border-gray-700 dark:bg-gray-900 dark:text-white\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"size-6\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M7.5 7.5h-.75A2.25 2.25 0 0 0 4.5 9.75v7.5a2.25 2.25 0 0 0 2.25 2.25h7.5a2.25 2.25 0 0 0 2.25-2.25v-7.5a2.25 2.25 0 0 0-2.25-2.25h-.75m0-3-3-3m0 0-3 3m3-3v11.25m6-2.25h.75a2.25 2.25 0 0 1 2.25 2.25v7.5a2.25 2.25 0 0 1-2.25 2.25h-7.5a2.25 2.25 0 0 1-2.25-2.25v-.75\"\n        />\n      </svg>\n\n      <span class=\"mt-4 font-medium dark:text-white\"> Upload your file(s) </span>\n\n      <span\n        class=\"mt-2 inline-block rounded border border-gray-200 bg-gray-50 px-3 py-1.5 text-center text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n      >\n        Browse files\n      </span>\n\n      <input multiple type=\"file\" id=\"File\" class=\"sr-only\" />\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/file-uploaders/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <label\n      for=\"File\"\n      class=\"flex flex-col items-center rounded border border-gray-300 p-4 text-gray-900 shadow-sm sm:p-6\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"size-6\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M7.5 7.5h-.75A2.25 2.25 0 0 0 4.5 9.75v7.5a2.25 2.25 0 0 0 2.25 2.25h7.5a2.25 2.25 0 0 0 2.25-2.25v-7.5a2.25 2.25 0 0 0-2.25-2.25h-.75m0-3-3-3m0 0-3 3m3-3v11.25m6-2.25h.75a2.25 2.25 0 0 1 2.25 2.25v7.5a2.25 2.25 0 0 1-2.25 2.25h-7.5a2.25 2.25 0 0 1-2.25-2.25v-.75\"\n        />\n      </svg>\n\n      <span class=\"mt-4 font-medium\"> Upload your file(s) </span>\n\n      <span\n        class=\"mt-2 inline-block rounded border border-gray-200 bg-gray-50 px-3 py-1.5 text-center text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-100\"\n      >\n        Browse files\n      </span>\n\n      <input multiple type=\"file\" id=\"File\" class=\"sr-only\" />\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/filters/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div class=\"flex gap-4 sm:gap-6\">\n      <details class=\"group relative\">\n        <summary\n          class=\"flex items-center gap-2 border-b border-gray-300 pb-1 text-gray-700 transition-colors hover:border-gray-400 hover:text-gray-900 dark:border-gray-600 dark:text-gray-200 dark:hover:border-gray-700 dark:hover:text-white [&::-webkit-details-marker]:hidden\"\n        >\n          <span class=\"text-sm font-medium\"> Availability </span>\n\n          <span class=\"transition-transform group-open:-rotate-180\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-4\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"\n              />\n            </svg>\n          </span>\n        </summary>\n\n        <div\n          class=\"z-auto w-64 divide-y divide-gray-300 rounded border border-gray-300 bg-white shadow-sm group-open:absolute group-open:start-0 group-open:top-8 dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-900\"\n        >\n          <div class=\"flex items-center justify-between px-3 py-2\">\n            <span class=\"text-sm text-gray-700 dark:text-gray-200\"> 0 Selected </span>\n\n            <button\n              type=\"button\"\n              class=\"text-sm text-gray-700 underline transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white\"\n            >\n              Reset\n            </button>\n          </div>\n\n          <fieldset class=\"p-3\">\n            <legend class=\"sr-only\">Checkboxes</legend>\n\n            <div class=\"flex flex-col items-start gap-3\">\n              <label for=\"Option1\" class=\"inline-flex items-center gap-3\">\n                <input\n                  type=\"checkbox\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n                  id=\"Option1\"\n                />\n\n                <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\"> Option 1 </span>\n              </label>\n\n              <label for=\"Option2\" class=\"inline-flex items-center gap-3\">\n                <input\n                  type=\"checkbox\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n                  id=\"Option2\"\n                />\n\n                <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\"> Option 2 </span>\n              </label>\n\n              <label for=\"Option3\" class=\"inline-flex items-center gap-3\">\n                <input\n                  type=\"checkbox\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n                  id=\"Option3\"\n                />\n\n                <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\"> Option 3 </span>\n              </label>\n            </div>\n          </fieldset>\n        </div>\n      </details>\n\n      <details class=\"group relative\">\n        <summary\n          class=\"flex items-center gap-2 border-b border-gray-300 pb-1 text-gray-700 transition-colors hover:border-gray-400 hover:text-gray-900 dark:border-gray-600 dark:text-gray-200 dark:hover:border-gray-700 dark:hover:text-white [&::-webkit-details-marker]:hidden\"\n        >\n          <span class=\"text-sm font-medium\"> Price </span>\n\n          <span class=\"transition-transform group-open:-rotate-180\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-4\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"\n              />\n            </svg>\n          </span>\n        </summary>\n\n        <div\n          class=\"z-auto w-64 divide-y divide-gray-300 rounded border border-gray-300 bg-white shadow-sm group-open:absolute group-open:start-0 group-open:top-8 dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-900\"\n        >\n          <div class=\"flex items-center justify-between px-3 py-2\">\n            <span class=\"text-sm text-gray-700 dark:text-gray-200\"> Max price is $600 </span>\n\n            <button\n              type=\"button\"\n              class=\"text-sm text-gray-700 underline transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white\"\n            >\n              Reset\n            </button>\n          </div>\n\n          <div class=\"flex items-center gap-3 p-3\">\n            <label for=\"MinPrice\">\n              <span class=\"text-sm text-gray-700 dark:text-gray-200\"> Min </span>\n\n              <input\n                type=\"number\"\n                id=\"MinPrice\"\n                value=\"0\"\n                class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n              />\n            </label>\n\n            <label for=\"MaxPrice\">\n              <span class=\"text-sm text-gray-700 dark:text-gray-200\"> Max </span>\n\n              <input\n                type=\"number\"\n                id=\"MaxPrice\"\n                value=\"600\"\n                class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n              />\n            </label>\n          </div>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/filters/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div class=\"flex gap-4 sm:gap-6\">\n      <details class=\"group relative\">\n        <summary\n          class=\"flex items-center gap-2 border-b border-gray-300 pb-1 text-gray-700 transition-colors hover:border-gray-400 hover:text-gray-900 [&::-webkit-details-marker]:hidden\"\n        >\n          <span class=\"text-sm font-medium\"> Availability </span>\n\n          <span class=\"transition-transform group-open:-rotate-180\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-4\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"\n              />\n            </svg>\n          </span>\n        </summary>\n\n        <div\n          class=\"z-auto w-64 divide-y divide-gray-300 rounded border border-gray-300 bg-white shadow-sm group-open:absolute group-open:start-0 group-open:top-8\"\n        >\n          <div class=\"flex items-center justify-between px-3 py-2\">\n            <span class=\"text-sm text-gray-700\"> 0 Selected </span>\n\n            <button\n              type=\"button\"\n              class=\"text-sm text-gray-700 underline transition-colors hover:text-gray-900\"\n            >\n              Reset\n            </button>\n          </div>\n\n          <fieldset class=\"p-3\">\n            <legend class=\"sr-only\">Checkboxes</legend>\n\n            <div class=\"flex flex-col items-start gap-3\">\n              <label for=\"Option1\" class=\"inline-flex items-center gap-3\">\n                <input\n                  type=\"checkbox\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm\"\n                  id=\"Option1\"\n                />\n\n                <span class=\"text-sm font-medium text-gray-700\"> Option 1 </span>\n              </label>\n\n              <label for=\"Option2\" class=\"inline-flex items-center gap-3\">\n                <input\n                  type=\"checkbox\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm\"\n                  id=\"Option2\"\n                />\n\n                <span class=\"text-sm font-medium text-gray-700\"> Option 2 </span>\n              </label>\n\n              <label for=\"Option3\" class=\"inline-flex items-center gap-3\">\n                <input\n                  type=\"checkbox\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm\"\n                  id=\"Option3\"\n                />\n\n                <span class=\"text-sm font-medium text-gray-700\"> Option 3 </span>\n              </label>\n            </div>\n          </fieldset>\n        </div>\n      </details>\n\n      <details class=\"group relative\">\n        <summary\n          class=\"flex items-center gap-2 border-b border-gray-300 pb-1 text-gray-700 transition-colors hover:border-gray-400 hover:text-gray-900 [&::-webkit-details-marker]:hidden\"\n        >\n          <span class=\"text-sm font-medium\"> Price </span>\n\n          <span class=\"transition-transform group-open:-rotate-180\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-4\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"\n              />\n            </svg>\n          </span>\n        </summary>\n\n        <div\n          class=\"z-auto w-64 divide-y divide-gray-300 rounded border border-gray-300 bg-white shadow-sm group-open:absolute group-open:start-0 group-open:top-8\"\n        >\n          <div class=\"flex items-center justify-between px-3 py-2\">\n            <span class=\"text-sm text-gray-700\"> Max price is $600 </span>\n\n            <button\n              type=\"button\"\n              class=\"text-sm text-gray-700 underline transition-colors hover:text-gray-900\"\n            >\n              Reset\n            </button>\n          </div>\n\n          <div class=\"flex items-center gap-3 p-3\">\n            <label for=\"MinPrice\">\n              <span class=\"text-sm text-gray-700\"> Min </span>\n\n              <input\n                type=\"number\"\n                id=\"MinPrice\"\n                value=\"0\"\n                class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm\"\n              />\n            </label>\n\n            <label for=\"MaxPrice\">\n              <span class=\"text-sm text-gray-700\"> Max </span>\n\n              <input\n                type=\"number\"\n                id=\"MaxPrice\"\n                value=\"600\"\n                class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm\"\n              />\n            </label>\n          </div>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/filters/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div class=\"space-y-4\">\n      <details\n        class=\"group relative overflow-hidden rounded border border-gray-300 shadow-sm dark:border-gray-600\"\n      >\n        <summary\n          class=\"flex items-center justify-between gap-2 p-3 text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white [&::-webkit-details-marker]:hidden\"\n        >\n          <span class=\"text-sm font-medium\"> Availability </span>\n\n          <span class=\"transition-transform group-open:-rotate-180\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-4\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"\n              />\n            </svg>\n          </span>\n        </summary>\n\n        <div\n          class=\"divide-y divide-gray-300 border-t border-gray-300 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-900\"\n        >\n          <div class=\"flex items-center justify-between px-3 py-2\">\n            <span class=\"text-sm text-gray-700 dark:text-gray-200\"> 0 Selected </span>\n\n            <button\n              type=\"button\"\n              class=\"text-sm text-gray-700 underline transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white\"\n            >\n              Reset\n            </button>\n          </div>\n\n          <fieldset class=\"p-3\">\n            <legend class=\"sr-only\">Checkboxes</legend>\n\n            <div class=\"flex flex-col items-start gap-3\">\n              <label for=\"Option1\" class=\"inline-flex items-center gap-3\">\n                <input\n                  type=\"checkbox\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n                  id=\"Option1\"\n                />\n\n                <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\"> Option 1 </span>\n              </label>\n\n              <label for=\"Option2\" class=\"inline-flex items-center gap-3\">\n                <input\n                  type=\"checkbox\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n                  id=\"Option2\"\n                />\n\n                <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\"> Option 2 </span>\n              </label>\n\n              <label for=\"Option3\" class=\"inline-flex items-center gap-3\">\n                <input\n                  type=\"checkbox\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n                  id=\"Option3\"\n                />\n\n                <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\"> Option 3 </span>\n              </label>\n            </div>\n          </fieldset>\n        </div>\n      </details>\n\n      <details\n        class=\"group relative overflow-hidden rounded border border-gray-300 shadow-sm dark:border-gray-600\"\n      >\n        <summary\n          class=\"flex items-center justify-between gap-2 p-3 text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white [&::-webkit-details-marker]:hidden\"\n        >\n          <span class=\"text-sm font-medium\"> Price </span>\n\n          <span class=\"transition-transform group-open:-rotate-180\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-4\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"\n              />\n            </svg>\n          </span>\n        </summary>\n\n        <div\n          class=\"divide-y divide-gray-300 border-t border-gray-300 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-900\"\n        >\n          <div class=\"flex items-center justify-between px-3 py-2\">\n            <span class=\"text-sm text-gray-700 dark:text-gray-200\"> Max price is $600 </span>\n\n            <button\n              type=\"button\"\n              class=\"text-sm text-gray-700 underline transition-colors hover:text-gray-900 dark:text-gray-200\"\n            >\n              Reset\n            </button>\n          </div>\n\n          <div class=\"flex items-center gap-3 p-3\">\n            <label for=\"MinPrice\">\n              <span class=\"text-sm text-gray-700 dark:text-gray-200\"> Min </span>\n\n              <input\n                type=\"number\"\n                id=\"MinPrice\"\n                value=\"0\"\n                class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n              />\n            </label>\n\n            <label for=\"MaxPrice\">\n              <span class=\"text-sm text-gray-700 dark:text-gray-200\"> Max </span>\n\n              <input\n                type=\"number\"\n                id=\"MaxPrice\"\n                value=\"600\"\n                class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n              />\n            </label>\n          </div>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/filters/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div class=\"space-y-4\">\n      <details class=\"group relative overflow-hidden rounded border border-gray-300 shadow-sm\">\n        <summary\n          class=\"flex items-center justify-between gap-2 p-3 text-gray-700 transition-colors hover:text-gray-900 [&::-webkit-details-marker]:hidden\"\n        >\n          <span class=\"text-sm font-medium\"> Availability </span>\n\n          <span class=\"transition-transform group-open:-rotate-180\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-4\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"\n              />\n            </svg>\n          </span>\n        </summary>\n\n        <div class=\"divide-y divide-gray-300 border-t border-gray-300 bg-white\">\n          <div class=\"flex items-center justify-between px-3 py-2\">\n            <span class=\"text-sm text-gray-700\"> 0 Selected </span>\n\n            <button\n              type=\"button\"\n              class=\"text-sm text-gray-700 underline transition-colors hover:text-gray-900\"\n            >\n              Reset\n            </button>\n          </div>\n\n          <fieldset class=\"p-3\">\n            <legend class=\"sr-only\">Checkboxes</legend>\n\n            <div class=\"flex flex-col items-start gap-3\">\n              <label for=\"Option1\" class=\"inline-flex items-center gap-3\">\n                <input\n                  type=\"checkbox\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm\"\n                  id=\"Option1\"\n                />\n\n                <span class=\"text-sm font-medium text-gray-700\"> Option 1 </span>\n              </label>\n\n              <label for=\"Option2\" class=\"inline-flex items-center gap-3\">\n                <input\n                  type=\"checkbox\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm\"\n                  id=\"Option2\"\n                />\n\n                <span class=\"text-sm font-medium text-gray-700\"> Option 2 </span>\n              </label>\n\n              <label for=\"Option3\" class=\"inline-flex items-center gap-3\">\n                <input\n                  type=\"checkbox\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm\"\n                  id=\"Option3\"\n                />\n\n                <span class=\"text-sm font-medium text-gray-700\"> Option 3 </span>\n              </label>\n            </div>\n          </fieldset>\n        </div>\n      </details>\n\n      <details class=\"group relative overflow-hidden rounded border border-gray-300 shadow-sm\">\n        <summary\n          class=\"flex items-center justify-between gap-2 p-3 text-gray-700 transition-colors hover:text-gray-900 [&::-webkit-details-marker]:hidden\"\n        >\n          <span class=\"text-sm font-medium\"> Price </span>\n\n          <span class=\"transition-transform group-open:-rotate-180\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-4\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"\n              />\n            </svg>\n          </span>\n        </summary>\n\n        <div class=\"divide-y divide-gray-300 border-t border-gray-300 bg-white\">\n          <div class=\"flex items-center justify-between px-3 py-2\">\n            <span class=\"text-sm text-gray-700\"> Max price is $600 </span>\n\n            <button\n              type=\"button\"\n              class=\"text-sm text-gray-700 underline transition-colors hover:text-gray-900\"\n            >\n              Reset\n            </button>\n          </div>\n\n          <div class=\"flex items-center gap-3 p-3\">\n            <label for=\"MinPrice\">\n              <span class=\"text-sm text-gray-700\"> Min </span>\n\n              <input\n                type=\"number\"\n                id=\"MinPrice\"\n                value=\"0\"\n                class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm\"\n              />\n            </label>\n\n            <label for=\"MaxPrice\">\n              <span class=\"text-sm text-gray-700\"> Max </span>\n\n              <input\n                type=\"number\"\n                id=\"MaxPrice\"\n                value=\"600\"\n                class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm\"\n              />\n            </label>\n          </div>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/grids/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <div class=\"grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-8\">\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/grids/10.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <div class=\"grid grid-cols-1 gap-4 lg:grid-cols-[1fr_120px] lg:gap-8\">\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/grids/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <div class=\"grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8\">\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n      <div class=\"h-32 rounded bg-gray-300 lg:col-span-2\"></div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/grids/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <div class=\"grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8\">\n      <div class=\"h-32 rounded bg-gray-300 lg:col-span-2\"></div>\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/grids/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <div class=\"grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8\">\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/grids/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <div class=\"grid grid-cols-1 gap-4 lg:grid-cols-4 lg:gap-8\">\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/grids/6.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <div class=\"grid grid-cols-1 gap-4 lg:grid-cols-4 lg:gap-8\">\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n      <div class=\"h-32 rounded bg-gray-300 lg:col-span-2\"></div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/grids/7.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <div class=\"grid grid-cols-1 gap-4 lg:grid-cols-4 lg:gap-8\">\n      <div class=\"h-32 rounded bg-gray-300 lg:col-span-2\"></div>\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/grids/8.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <div class=\"grid grid-cols-1 gap-4 lg:grid-cols-4 lg:gap-8\">\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n      <div class=\"h-32 rounded bg-gray-300 lg:col-span-2\"></div>\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/grids/9.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <div class=\"grid grid-cols-1 gap-4 lg:grid-cols-[120px_1fr] lg:gap-8\">\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n      <div class=\"h-32 rounded bg-gray-300\"></div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/inputs/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <label for=\"Email\">\n      <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\"> Email </span>\n\n      <input\n        type=\"email\"\n        id=\"Email\"\n        class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n      />\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/inputs/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <label for=\"Email\">\n      <span class=\"text-sm font-medium text-gray-700\"> Email </span>\n\n      <input\n        type=\"email\"\n        id=\"Email\"\n        class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm\"\n      />\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/inputs/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <label for=\"Email\">\n      <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\"> Email </span>\n\n      <div class=\"relative\">\n        <input\n          type=\"email\"\n          id=\"Email\"\n          class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n        />\n\n        <span\n          class=\"absolute inset-y-0 right-0 grid w-8 place-content-center text-gray-700 dark:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25\"\n            />\n          </svg>\n        </span>\n      </div>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/inputs/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <label for=\"Email\">\n      <span class=\"text-sm font-medium text-gray-700\"> Email </span>\n\n      <div class=\"relative\">\n        <input\n          type=\"email\"\n          id=\"Email\"\n          class=\"mt-0.5 w-full rounded border-gray-300 pe-8 shadow-sm sm:text-sm\"\n        />\n\n        <span class=\"absolute inset-y-0 right-0 grid w-8 place-content-center text-gray-700\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25\"\n            />\n          </svg>\n        </span>\n      </div>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/inputs/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <label for=\"Search\">\n      <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\"> Search </span>\n\n      <div class=\"relative\">\n        <input\n          type=\"text\"\n          id=\"Search\"\n          class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n        />\n\n        <span class=\"absolute inset-y-0 right-2 grid w-8 place-content-center\">\n          <button\n            type=\"button\"\n            aria-label=\"Submit\"\n            class=\"rounded-full p-1.5 text-gray-700 transition-colors hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-4\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\"\n              />\n            </svg>\n          </button>\n        </span>\n      </div>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/inputs/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <label for=\"Search\">\n      <span class=\"text-sm font-medium text-gray-700\"> Search </span>\n\n      <div class=\"relative\">\n        <input\n          type=\"text\"\n          id=\"Search\"\n          class=\"mt-0.5 w-full rounded border-gray-300 pe-10 shadow-sm sm:text-sm\"\n        />\n\n        <span class=\"absolute inset-y-0 right-2 grid w-8 place-content-center\">\n          <button\n            type=\"button\"\n            aria-label=\"Submit\"\n            class=\"rounded-full p-1.5 text-gray-700 transition-colors hover:bg-gray-100\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-4\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\"\n              />\n            </svg>\n          </button>\n        </span>\n      </div>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/inputs/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <label for=\"Email\" class=\"relative\">\n      <input\n        type=\"email\"\n        id=\"Email\"\n        placeholder=\"\"\n        class=\"peer mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n      />\n\n      <span\n        class=\"absolute inset-y-0 start-3 -translate-y-5 bg-white px-0.5 text-sm font-medium text-gray-700 transition-transform peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-5 dark:bg-gray-900 dark:text-white\"\n      >\n        Email\n      </span>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/inputs/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <label for=\"Email\" class=\"relative\">\n      <input\n        type=\"email\"\n        id=\"Email\"\n        placeholder=\"\"\n        class=\"peer mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm\"\n      />\n\n      <span\n        class=\"absolute inset-y-0 start-3 -translate-y-5 bg-white px-0.5 text-sm font-medium text-gray-700 transition-transform peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-5\"\n      >\n        Email\n      </span>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/loaders/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <svg\n      class=\"mx-auto size-8 animate-spin text-indigo-600 dark:text-indigo-300\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle\n        class=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        stroke-width=\"4\"\n      ></circle>\n\n      <path\n        class=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      ></path>\n    </svg>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/loaders/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <svg\n      class=\"mx-auto size-8 animate-spin text-indigo-600\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle\n        class=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        stroke-width=\"4\"\n      ></circle>\n\n      <path\n        class=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      ></path>\n    </svg>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/loaders/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"text-center\">\n      <svg\n        class=\"mx-auto size-8 animate-spin text-indigo-600 dark:text-indigo-300\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle\n          class=\"opacity-25\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"4\"\n        ></circle>\n\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        ></path>\n      </svg>\n\n      <p class=\"mt-4 font-medium text-gray-700 dark:text-gray-200\">Loading...</p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/loaders/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"text-center\">\n      <svg\n        class=\"mx-auto size-8 animate-spin text-indigo-600\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle\n          class=\"opacity-25\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"4\"\n        ></circle>\n\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        ></path>\n      </svg>\n\n      <p class=\"mt-4 font-medium text-gray-700\">Loading...</p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/loaders/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"inline-flex items-center gap-3\">\n      <svg\n        class=\"size-6 animate-spin text-indigo-600 dark:text-indigo-300\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle\n          class=\"opacity-25\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"4\"\n        ></circle>\n\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        ></path>\n      </svg>\n\n      <p class=\"font-medium text-gray-700 dark:text-gray-200\">Loading...</p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/loaders/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"inline-flex items-center gap-3\">\n      <svg\n        class=\"size-6 animate-spin text-indigo-600\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle\n          class=\"opacity-25\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"4\"\n        ></circle>\n\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        ></path>\n      </svg>\n\n      <p class=\"font-medium text-gray-700\">Loading...</p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/loaders/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"w-full max-w-sm\">\n      <div class=\"h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700\">\n        <div class=\"h-full w-[80%] animate-pulse bg-indigo-600 dark:bg-indigo-300\"></div>\n      </div>\n\n      <p class=\"mt-4 text-center font-medium text-gray-700 dark:text-gray-200\">Loading...</p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/loaders/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"w-full max-w-sm\">\n      <div class=\"h-2 overflow-hidden rounded-full bg-gray-200\">\n        <div class=\"h-full w-[80%] animate-pulse bg-indigo-600\"></div>\n      </div>\n\n      <p class=\"mt-4 text-center font-medium text-gray-700\">Loading...</p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/loaders/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"flex gap-2\">\n      <span class=\"size-3 animate-pulse rounded-full bg-indigo-600 dark:bg-indigo-300\"></span>\n      <span\n        class=\"size-3 animate-pulse rounded-full bg-indigo-600 [animation-delay:0.2s] dark:bg-indigo-300\"\n      ></span>\n      <span\n        class=\"size-3 animate-pulse rounded-full bg-indigo-600 [animation-delay:0.4s] dark:bg-indigo-300\"\n      ></span>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/loaders/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"flex gap-2\">\n      <span class=\"size-3 animate-pulse rounded-full bg-indigo-600\"></span>\n      <span class=\"size-3 animate-pulse rounded-full bg-indigo-600 [animation-delay:0.2s]\"></span>\n      <span class=\"size-3 animate-pulse rounded-full bg-indigo-600 [animation-delay:0.4s]\"></span>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/loaders/6-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"flex gap-2\">\n      <span class=\"size-3 animate-ping rounded-full bg-indigo-600 dark:bg-indigo-300\"></span>\n      <span\n        class=\"size-3 animate-ping rounded-full bg-indigo-600 [animation-delay:0.2s] dark:bg-indigo-300\"\n      ></span>\n      <span\n        class=\"size-3 animate-ping rounded-full bg-indigo-600 [animation-delay:0.4s] dark:bg-indigo-300\"\n      ></span>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/loaders/6.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"flex gap-2\">\n      <span class=\"size-3 animate-ping rounded-full bg-indigo-600\"></span>\n      <span class=\"size-3 animate-ping rounded-full bg-indigo-600 [animation-delay:0.2s]\"></span>\n      <span class=\"size-3 animate-ping rounded-full bg-indigo-600 [animation-delay:0.4s]\"></span>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/loaders/7-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"flex gap-2\">\n      <span class=\"size-3 animate-bounce rounded-full bg-indigo-600 dark:bg-indigo-300\"></span>\n      <span\n        class=\"size-3 animate-bounce rounded-full bg-indigo-600 [animation-delay:0.2s] dark:bg-indigo-300\"\n      ></span>\n      <span\n        class=\"size-3 animate-bounce rounded-full bg-indigo-600 [animation-delay:0.4s] dark:bg-indigo-300\"\n      ></span>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/loaders/7.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"flex gap-2\">\n      <span class=\"size-3 animate-bounce rounded-full bg-indigo-600\"></span>\n      <span class=\"size-3 animate-bounce rounded-full bg-indigo-600 [animation-delay:0.2s]\"></span>\n      <span class=\"size-3 animate-bounce rounded-full bg-indigo-600 [animation-delay:0.4s]\"></span>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/media/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div class=\"flex items-start gap-4\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n        class=\"size-20 rounded object-cover\"\n      />\n\n      <div>\n        <h3 class=\"font-medium text-gray-900 sm:text-lg\">Title goes here</h3>\n\n        <p class=\"mt-0.5 text-gray-700\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio\n          nesciunt quas non animi.\n        </p>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/media/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div class=\"flex items-center gap-4\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n        class=\"size-20 rounded object-cover\"\n      />\n\n      <div>\n        <h3 class=\"font-medium text-gray-900 sm:text-lg\">Title goes here</h3>\n\n        <p class=\"mt-0.5 text-gray-700\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio\n          nesciunt quas non animi.\n        </p>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/media/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div class=\"flex items-end gap-4\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n        class=\"size-20 rounded object-cover\"\n      />\n\n      <div>\n        <h3 class=\"font-medium text-gray-900 sm:text-lg\">Title goes here</h3>\n\n        <p class=\"mt-0.5 text-gray-700\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio\n          nesciunt quas non animi.\n        </p>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/media/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div class=\"flex items-stretch gap-4\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n        class=\"w-20 rounded object-cover\"\n      />\n\n      <div>\n        <h3 class=\"font-medium text-gray-900 sm:text-lg\">Title goes here</h3>\n\n        <p class=\"mt-0.5 text-gray-700\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio\n          nesciunt quas non animi.\n        </p>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/media/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div class=\"flex flex-row-reverse items-start gap-4\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n        class=\"size-20 rounded object-cover\"\n      />\n\n      <div>\n        <h3 class=\"font-medium text-gray-900 sm:text-lg\">Title goes here</h3>\n\n        <p class=\"mt-0.5 text-gray-700\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio\n          nesciunt quas non animi.\n        </p>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/media/6.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div class=\"flex flex-row-reverse items-center gap-4\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n        class=\"size-20 rounded object-cover\"\n      />\n\n      <div>\n        <h3 class=\"font-medium text-gray-900 sm:text-lg\">Title goes here</h3>\n\n        <p class=\"mt-0.5 text-gray-700\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio\n          nesciunt quas non animi.\n        </p>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/media/7.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div class=\"flex flex-row-reverse items-end gap-4\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n        class=\"size-20 rounded object-cover\"\n      />\n\n      <div>\n        <h3 class=\"font-medium text-gray-900 sm:text-lg\">Title goes here</h3>\n\n        <p class=\"mt-0.5 text-gray-700\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio\n          nesciunt quas non animi.\n        </p>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/media/8.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div class=\"flex flex-row-reverse items-stretch gap-4\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n        class=\"w-20 rounded object-cover\"\n      />\n\n      <div>\n        <h3 class=\"font-medium text-gray-900 sm:text-lg\">Title goes here</h3>\n\n        <p class=\"mt-0.5 text-gray-700\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio\n          nesciunt quas non animi.\n        </p>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/modals/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"fixed inset-0 z-50 grid place-content-center bg-black/50 p-4\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modalTitle\"\n    >\n      <div class=\"w-full max-w-md rounded-lg bg-white p-6 shadow-lg dark:bg-gray-900\">\n        <h2 id=\"modalTitle\" class=\"text-xl font-bold text-gray-900 sm:text-2xl dark:text-white\">\n          Modal Title\n        </h2>\n\n        <div class=\"mt-4\">\n          <p class=\"text-pretty text-gray-700 dark:text-gray-200\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu\n            consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/modals/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"fixed inset-0 z-50 grid place-content-center bg-black/50 p-4\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modalTitle\"\n    >\n      <div class=\"w-full max-w-md rounded-lg bg-white p-6 shadow-lg\">\n        <h2 id=\"modalTitle\" class=\"text-xl font-bold text-gray-900 sm:text-2xl\">Modal Title</h2>\n\n        <div class=\"mt-4\">\n          <p class=\"text-pretty text-gray-700\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu\n            consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/modals/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"fixed inset-0 z-50 grid place-content-center bg-black/50 p-4\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modalTitle\"\n    >\n      <div class=\"w-full max-w-md rounded-lg bg-white p-6 shadow-lg dark:bg-gray-900\">\n        <div class=\"flex items-start justify-between\">\n          <h2 id=\"modalTitle\" class=\"text-xl font-bold text-gray-900 sm:text-2xl dark:text-white\">\n            Modal Title\n          </h2>\n\n          <button\n            type=\"button\"\n            class=\"-me-4 -mt-4 rounded-full p-2 text-gray-400 transition-colors hover:bg-gray-50 hover:text-gray-600 focus:outline-none dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300\"\n            aria-label=\"Close\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-5\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M6 18L18 6M6 6l12 12\"\n              />\n            </svg>\n          </button>\n        </div>\n\n        <div class=\"mt-4\">\n          <p class=\"text-pretty text-gray-700 dark:text-gray-200\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu\n            consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/modals/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"fixed inset-0 z-50 grid place-content-center bg-black/50 p-4\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modalTitle\"\n    >\n      <div class=\"w-full max-w-md rounded-lg bg-white p-6 shadow-lg\">\n        <div class=\"flex items-start justify-between\">\n          <h2 id=\"modalTitle\" class=\"text-xl font-bold text-gray-900 sm:text-2xl\">Modal Title</h2>\n\n          <button\n            type=\"button\"\n            class=\"-me-4 -mt-4 rounded-full p-2 text-gray-400 transition-colors hover:bg-gray-50 hover:text-gray-600 focus:outline-none\"\n            aria-label=\"Close\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-5\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M6 18L18 6M6 6l12 12\"\n              />\n            </svg>\n          </button>\n        </div>\n\n        <div class=\"mt-4\">\n          <p class=\"text-pretty text-gray-700\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu\n            consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/modals/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"fixed inset-0 z-50 grid place-content-center bg-black/50 p-4\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modalTitle\"\n    >\n      <div class=\"w-full max-w-md rounded-lg bg-white p-6 shadow-lg dark:bg-gray-900\">\n        <h2 id=\"modalTitle\" class=\"text-xl font-bold text-gray-900 sm:text-2xl dark:text-white\">\n          Modal Title\n        </h2>\n\n        <div class=\"mt-4\">\n          <p class=\"text-pretty text-gray-700 dark:text-gray-200\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu\n            consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          </p>\n        </div>\n\n        <footer class=\"mt-6 flex justify-end gap-2\">\n          <button\n            type=\"button\"\n            class=\"rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n          >\n            Cancel\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700\"\n          >\n            Done\n          </button>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/modals/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"fixed inset-0 z-50 grid place-content-center bg-black/50 p-4\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modalTitle\"\n    >\n      <div class=\"w-full max-w-md rounded-lg bg-white p-6 shadow-lg\">\n        <h2 id=\"modalTitle\" class=\"text-xl font-bold text-gray-900 sm:text-2xl\">Modal Title</h2>\n\n        <div class=\"mt-4\">\n          <p class=\"text-pretty text-gray-700\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu\n            consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          </p>\n        </div>\n\n        <footer class=\"mt-6 flex justify-end gap-2\">\n          <button\n            type=\"button\"\n            class=\"rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200\"\n          >\n            Cancel\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700\"\n          >\n            Done\n          </button>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/modals/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"fixed inset-0 z-50 grid place-content-center bg-black/50 p-4\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modalTitle\"\n    >\n      <div class=\"w-full max-w-md rounded-lg bg-white p-6 shadow-lg dark:bg-gray-900\">\n        <div class=\"flex items-start justify-between\">\n          <h2 id=\"modalTitle\" class=\"text-xl font-bold text-gray-900 sm:text-2xl dark:text-white\">\n            Modal Title\n          </h2>\n\n          <button\n            type=\"button\"\n            class=\"-me-4 -mt-4 rounded-full p-2 text-gray-400 transition-colors hover:bg-gray-50 hover:text-gray-600 focus:outline-none dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300\"\n            aria-label=\"Close\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-5\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M6 18L18 6M6 6l12 12\"\n              />\n            </svg>\n          </button>\n        </div>\n\n        <div class=\"mt-4\">\n          <p class=\"text-pretty text-gray-700 dark:text-gray-200\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu\n            consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          </p>\n        </div>\n\n        <footer class=\"mt-6 flex justify-end gap-2\">\n          <button\n            type=\"button\"\n            class=\"rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n          >\n            Cancel\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700\"\n          >\n            Done\n          </button>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/modals/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"fixed inset-0 z-50 grid place-content-center bg-black/50 p-4\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modalTitle\"\n    >\n      <div class=\"w-full max-w-md rounded-lg bg-white p-6 shadow-lg\">\n        <div class=\"flex items-start justify-between\">\n          <h2 id=\"modalTitle\" class=\"text-xl font-bold text-gray-900 sm:text-2xl\">Modal Title</h2>\n\n          <button\n            type=\"button\"\n            class=\"-me-4 -mt-4 rounded-full p-2 text-gray-400 transition-colors hover:bg-gray-50 hover:text-gray-600 focus:outline-none\"\n            aria-label=\"Close\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-5\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M6 18L18 6M6 6l12 12\"\n              />\n            </svg>\n          </button>\n        </div>\n\n        <div class=\"mt-4\">\n          <p class=\"text-pretty text-gray-700\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu\n            consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          </p>\n        </div>\n\n        <footer class=\"mt-6 flex justify-end gap-2\">\n          <button\n            type=\"button\"\n            class=\"rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200\"\n          >\n            Cancel\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700\"\n          >\n            Done\n          </button>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/modals/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"fixed inset-0 z-50 grid place-content-center bg-black/50 p-4\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modalTitle\"\n    >\n      <div class=\"w-full max-w-md rounded-lg bg-white p-6 shadow-lg dark:bg-gray-900\">\n        <h2 id=\"modalTitle\" class=\"text-xl font-bold text-gray-900 sm:text-2xl dark:text-white\">\n          Modal Title\n        </h2>\n\n        <div class=\"mt-4\">\n          <p class=\"text-pretty text-gray-700 dark:text-gray-200\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu\n            consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          </p>\n\n          <label for=\"Confirm\" class=\"mt-4 block\">\n            <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\">\n              Please type \"Confirm\" to complete action\n            </span>\n\n            <input\n              type=\"text\"\n              id=\"Confirm\"\n              class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n            />\n          </label>\n        </div>\n\n        <footer class=\"mt-6 flex justify-end gap-2\">\n          <button\n            type=\"button\"\n            class=\"rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n          >\n            Cancel\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700\"\n          >\n            Done\n          </button>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/modals/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"fixed inset-0 z-50 grid place-content-center bg-black/50 p-4\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modalTitle\"\n    >\n      <div class=\"w-full max-w-md rounded-lg bg-white p-6 shadow-lg\">\n        <h2 id=\"modalTitle\" class=\"text-xl font-bold text-gray-900 sm:text-2xl\">Modal Title</h2>\n\n        <div class=\"mt-4\">\n          <p class=\"text-pretty text-gray-700\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu\n            consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          </p>\n\n          <label for=\"Confirm\" class=\"mt-4 block\">\n            <span class=\"text-sm font-medium text-gray-700\">\n              Please type \"Confirm\" to complete action\n            </span>\n\n            <input\n              type=\"text\"\n              id=\"Confirm\"\n              class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm\"\n            />\n          </label>\n        </div>\n\n        <footer class=\"mt-6 flex justify-end gap-2\">\n          <button\n            type=\"button\"\n            class=\"rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200\"\n          >\n            Cancel\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700\"\n          >\n            Done\n          </button>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/modals/6-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"fixed inset-0 z-50 grid place-content-center bg-black/50 p-4\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modalTitle\"\n    >\n      <div class=\"w-full max-w-md rounded-lg bg-white p-6 shadow-lg dark:bg-gray-900\">\n        <div class=\"flex items-start justify-between\">\n          <h2 id=\"modalTitle\" class=\"text-xl font-bold text-gray-900 sm:text-2xl dark:text-white\">\n            Modal Title\n          </h2>\n\n          <button\n            type=\"button\"\n            class=\"-me-4 -mt-4 rounded-full p-2 text-gray-400 transition-colors hover:bg-gray-50 hover:text-gray-600 focus:outline-none dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300\"\n            aria-label=\"Close\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-5\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M6 18L18 6M6 6l12 12\"\n              />\n            </svg>\n          </button>\n        </div>\n\n        <div class=\"mt-4\">\n          <p class=\"text-pretty text-gray-700 dark:text-gray-200\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu\n            consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          </p>\n\n          <label for=\"Confirm\" class=\"mt-4 block\">\n            <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\">\n              Please type \"Confirm\" to complete action\n            </span>\n\n            <input\n              type=\"text\"\n              id=\"Confirm\"\n              class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n            />\n          </label>\n        </div>\n\n        <footer class=\"mt-6 flex justify-end gap-2\">\n          <button\n            type=\"button\"\n            class=\"rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n          >\n            Cancel\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700\"\n          >\n            Done\n          </button>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/modals/6.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"fixed inset-0 z-50 grid place-content-center bg-black/50 p-4\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"modalTitle\"\n    >\n      <div class=\"w-full max-w-md rounded-lg bg-white p-6 shadow-lg\">\n        <div class=\"flex items-start justify-between\">\n          <h2 id=\"modalTitle\" class=\"text-xl font-bold text-gray-900 sm:text-2xl\">Modal Title</h2>\n\n          <button\n            type=\"button\"\n            class=\"-me-4 -mt-4 rounded-full p-2 text-gray-400 transition-colors hover:bg-gray-50 hover:text-gray-600 focus:outline-none\"\n            aria-label=\"Close\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-5\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M6 18L18 6M6 6l12 12\"\n              />\n            </svg>\n          </button>\n        </div>\n\n        <div class=\"mt-4\">\n          <p class=\"text-pretty text-gray-700\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu\n            consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          </p>\n\n          <label for=\"Confirm\" class=\"mt-4 block\">\n            <span class=\"text-sm font-medium text-gray-700\">\n              Please type \"Confirm\" to complete action\n            </span>\n\n            <input\n              type=\"text\"\n              id=\"Confirm\"\n              class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm\"\n            />\n          </label>\n        </div>\n\n        <footer class=\"mt-6 flex justify-end gap-2\">\n          <button\n            type=\"button\"\n            class=\"rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200\"\n          >\n            Cancel\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700\"\n          >\n            Done\n          </button>\n        </footer>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/pagination/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <ul class=\"flex justify-center gap-1 text-gray-900 dark:text-white\">\n      <li>\n        <a\n          href=\"#\"\n          class=\"grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180 dark:border-gray-700 dark:hover:bg-gray-800\"\n          aria-label=\"Previous page\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block size-8 rounded border border-gray-200 text-center text-sm/8 font-medium transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800\"\n        >\n          1\n        </a>\n      </li>\n\n      <li\n        class=\"block size-8 rounded border border-indigo-600 bg-indigo-600 text-center text-sm/8 font-medium text-white\"\n      >\n        2\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block size-8 rounded border border-gray-200 text-center text-sm/8 font-medium transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800\"\n        >\n          3\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block size-8 rounded border border-gray-200 text-center text-sm/8 font-medium transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800\"\n        >\n          4\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180 dark:border-gray-700 dark:hover:bg-gray-800\"\n          aria-label=\"Next page\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </a>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/pagination/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <ul class=\"flex justify-center gap-1 text-gray-900\">\n      <li>\n        <a\n          href=\"#\"\n          class=\"grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180\"\n          aria-label=\"Previous page\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block size-8 rounded border border-gray-200 text-center text-sm/8 font-medium transition-colors hover:bg-gray-50\"\n        >\n          1\n        </a>\n      </li>\n\n      <li\n        class=\"block size-8 rounded border border-indigo-600 bg-indigo-600 text-center text-sm/8 font-medium text-white\"\n      >\n        2\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block size-8 rounded border border-gray-200 text-center text-sm/8 font-medium transition-colors hover:bg-gray-50\"\n        >\n          3\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block size-8 rounded border border-gray-200 text-center text-sm/8 font-medium transition-colors hover:bg-gray-50\"\n        >\n          4\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180\"\n          aria-label=\"Next page\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </a>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/pagination/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <ul class=\"flex justify-center gap-1 text-gray-900 dark:text-white\">\n      <li>\n        <a\n          href=\"#\"\n          class=\"grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180 dark:border-gray-700 dark:hover:bg-gray-800\"\n          aria-label=\"Previous page\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </a>\n      </li>\n\n      <li>\n        <label for=\"Page\">\n          <span class=\"sr-only\"> Page </span>\n\n          <input\n            type=\"number\"\n            id=\"Page\"\n            value=\"2\"\n            class=\"h-8 w-16 rounded border-gray-300 sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          />\n        </label>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180 dark:border-gray-700 dark:hover:bg-gray-800\"\n          aria-label=\"Next page\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </a>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/pagination/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <ul class=\"flex justify-center gap-1 text-gray-900\">\n      <li>\n        <a\n          href=\"#\"\n          class=\"grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180\"\n          aria-label=\"Previous page\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </a>\n      </li>\n\n      <li>\n        <label for=\"Page\">\n          <span class=\"sr-only\"> Page </span>\n\n          <input\n            type=\"number\"\n            id=\"Page\"\n            value=\"2\"\n            class=\"h-8 w-16 rounded border-gray-300 sm:text-sm\"\n          />\n        </label>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180\"\n          aria-label=\"Next page\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </a>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/pagination/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <ul class=\"flex justify-center gap-3 text-gray-900 dark:text-white\">\n      <li>\n        <a\n          href=\"#\"\n          class=\"grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180 dark:border-gray-700 dark:hover:bg-gray-800\"\n          aria-label=\"Previous page\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </a>\n      </li>\n\n      <li class=\"text-sm/8 font-medium tracking-widest\">2/12</li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180 dark:border-gray-700 dark:hover:bg-gray-800\"\n          aria-label=\"Next page\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </a>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/pagination/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <ul class=\"flex justify-center gap-3 text-gray-900\">\n      <li>\n        <a\n          href=\"#\"\n          class=\"grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180\"\n          aria-label=\"Previous page\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </a>\n      </li>\n\n      <li class=\"text-sm/8 font-medium tracking-widest\">2/12</li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180\"\n          aria-label=\"Next page\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </a>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/progress-bars/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div role=\"progressbar\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n      <p class=\"text-sm font-medium text-gray-900\">25%</p>\n\n      <div class=\"mt-2 h-2 w-full rounded-full bg-gray-200\">\n        <div class=\"h-full rounded-full bg-blue-600\" style=\"width: 25%\"></div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/progress-bars/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md space-y-6 p-6\">\n    <div role=\"progressbar\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n      <div class=\"flex justify-between gap-4\">\n        <span class=\"text-sm font-medium text-gray-900\">Updating</span>\n\n        <span class=\"text-sm font-medium text-gray-900\">25%</span>\n      </div>\n\n      <div class=\"mt-2 h-2 w-full rounded-full bg-gray-200\">\n        <div class=\"h-full rounded-full bg-blue-600\" style=\"width: 25%\"></div>\n      </div>\n    </div>\n\n    <div role=\"progressbar\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n      <div class=\"flex justify-between gap-4\">\n        <span class=\"text-sm font-medium text-gray-900\">Downloading</span>\n\n        <span class=\"text-sm font-medium text-gray-900\">100%</span>\n      </div>\n\n      <div class=\"mt-2 h-2 w-full rounded-full bg-gray-200\">\n        <div class=\"h-full rounded-full bg-green-600\" style=\"width: 100%\"></div>\n      </div>\n    </div>\n\n    <div role=\"progressbar\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n      <div class=\"flex justify-between gap-4\">\n        <span class=\"text-sm font-medium text-gray-900\">Loading</span>\n\n        <span class=\"text-sm font-medium text-gray-900\">50%</span>\n      </div>\n\n      <div class=\"mt-2 h-2 w-full rounded-full bg-gray-200\">\n        <div class=\"h-full rounded-full bg-gray-600\" style=\"width: 50%\"></div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/progress-bars/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md space-y-6 p-6\">\n    <div role=\"progressbar\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n      <p class=\"text-xs font-medium tracking-wide text-gray-700 uppercase\">Download</p>\n\n      <div class=\"mt-2 h-1 w-full bg-gray-200\">\n        <div class=\"h-full bg-blue-600\" style=\"width: 25%\"></div>\n      </div>\n\n      <p class=\"mt-2 text-xs text-gray-700\">1.2 of 3.8 MB</p>\n    </div>\n\n    <div role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n      <p class=\"text-xs font-medium tracking-wide text-gray-700 uppercase\">File Conversion</p>\n\n      <div class=\"mt-2 h-1 w-full bg-gray-200\">\n        <div class=\"h-full bg-blue-600\" style=\"width: 75%\"></div>\n      </div>\n\n      <p class=\"mt-2 text-xs text-gray-700\">3/4 files done</p>\n    </div>\n\n    <div role=\"progressbar\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n      <p class=\"text-xs font-medium tracking-wide text-gray-700 uppercase\">File Sync</p>\n\n      <div class=\"mt-2 h-1 w-full bg-gray-200\">\n        <div class=\"h-full bg-green-600\" style=\"width: 100%\"></div>\n      </div>\n\n      <p class=\"mt-2 text-xs text-gray-700\">Completed</p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/progress-bars/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-3xl flex-wrap gap-8 p-6\">\n    <div class=\"text-center\">\n      <div\n        class=\"relative mx-auto size-32\"\n        role=\"progressbar\"\n        aria-valuenow=\"25\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n      >\n        <svg class=\"size-full\" viewBox=\"0 0 100 100\">\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"45\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"8\"\n            class=\"text-gray-200\"\n          />\n\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"45\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"8\"\n            stroke-dasharray=\"70.7 282.7\"\n            stroke-linecap=\"round\"\n            class=\"origin-center text-blue-600\"\n            style=\"transform: rotate(-90deg)\"\n          />\n        </svg>\n\n        <div class=\"absolute inset-0 grid place-content-center\">\n          <span class=\"text-xl font-semibold text-gray-900\">25%</span>\n        </div>\n      </div>\n\n      <p class=\"mt-2 text-sm text-gray-700\">Loading</p>\n    </div>\n\n    <div class=\"text-center\">\n      <div\n        class=\"relative mx-auto size-32\"\n        role=\"progressbar\"\n        aria-valuenow=\"75\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n      >\n        <svg class=\"size-full\" viewBox=\"0 0 100 100\">\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"45\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"8\"\n            class=\"text-gray-200\"\n          />\n\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"45\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"8\"\n            stroke-dasharray=\"212.1 282.7\"\n            stroke-linecap=\"round\"\n            class=\"origin-center text-green-600\"\n            style=\"transform: rotate(-90deg)\"\n          />\n        </svg>\n\n        <div class=\"absolute inset-0 grid place-content-center\">\n          <span class=\"text-xl font-semibold text-gray-900\">75%</span>\n        </div>\n      </div>\n\n      <p class=\"mt-2 text-sm text-gray-700\">Nearly done</p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/quantity-inputs/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div>\n      <label for=\"Quantity\" class=\"sr-only\"> Quantity </label>\n\n      <div class=\"flex items-center gap-1\">\n        <button\n          type=\"button\"\n          class=\"size-10 leading-10 text-gray-600 transition hover:opacity-75 dark:text-gray-300\"\n        >\n          &minus;\n        </button>\n\n        <input\n          type=\"number\"\n          id=\"Quantity\"\n          value=\"1\"\n          class=\"h-10 w-24 rounded-sm border-gray-200 sm:text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-white\"\n        />\n\n        <button\n          type=\"button\"\n          class=\"size-10 leading-10 text-gray-600 transition hover:opacity-75 dark:text-gray-300\"\n        >\n          &plus;\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/quantity-inputs/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div>\n      <label for=\"Quantity\" class=\"sr-only\"> Quantity </label>\n\n      <div class=\"flex items-center gap-1\">\n        <button type=\"button\" class=\"size-10 leading-10 text-gray-600 transition hover:opacity-75\">\n          &minus;\n        </button>\n\n        <input\n          type=\"number\"\n          id=\"Quantity\"\n          value=\"1\"\n          class=\"h-10 w-24 rounded-sm border-gray-200 sm:text-sm\"\n        />\n\n        <button type=\"button\" class=\"size-10 leading-10 text-gray-600 transition hover:opacity-75\">\n          &plus;\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/quantity-inputs/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div>\n      <label for=\"Quantity\" class=\"sr-only\"> Quantity </label>\n\n      <div class=\"flex items-center gap-1\">\n        <button\n          type=\"button\"\n          class=\"size-10 leading-10 text-gray-600 transition hover:opacity-75 dark:text-gray-300\"\n        >\n          &minus;\n        </button>\n\n        <input\n          type=\"number\"\n          id=\"Quantity\"\n          value=\"1\"\n          class=\"h-10 w-24 rounded-sm border-gray-200 [-moz-appearance:textfield] sm:text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-white [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n        />\n\n        <button\n          type=\"button\"\n          class=\"size-10 leading-10 text-gray-600 transition hover:opacity-75 dark:text-gray-300\"\n        >\n          &plus;\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/quantity-inputs/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div>\n      <label for=\"Quantity\" class=\"sr-only\"> Quantity </label>\n\n      <div class=\"flex items-center gap-1\">\n        <button type=\"button\" class=\"size-10 leading-10 text-gray-600 transition hover:opacity-75\">\n          &minus;\n        </button>\n\n        <input\n          type=\"number\"\n          id=\"Quantity\"\n          value=\"1\"\n          class=\"h-10 w-24 rounded-sm border-gray-200 [-moz-appearance:textfield] sm:text-sm [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n        />\n\n        <button type=\"button\" class=\"size-10 leading-10 text-gray-600 transition hover:opacity-75\">\n          &plus;\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/quantity-inputs/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div>\n      <label for=\"Quantity\" class=\"sr-only\"> Quantity </label>\n\n      <div class=\"flex items-center gap-1\">\n        <button\n          type=\"button\"\n          class=\"size-10 leading-10 text-gray-600 transition hover:opacity-75 dark:text-gray-300\"\n        >\n          &minus;\n        </button>\n\n        <input\n          type=\"number\"\n          id=\"Quantity\"\n          value=\"1\"\n          class=\"h-10 w-16 rounded-sm border-gray-200 text-center [-moz-appearance:textfield] sm:text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-white [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n        />\n\n        <button\n          type=\"button\"\n          class=\"size-10 leading-10 text-gray-600 transition hover:opacity-75 dark:text-gray-300\"\n        >\n          &plus;\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/quantity-inputs/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div>\n      <label for=\"Quantity\" class=\"sr-only\"> Quantity </label>\n\n      <div class=\"flex items-center gap-1\">\n        <button type=\"button\" class=\"size-10 leading-10 text-gray-600 transition hover:opacity-75\">\n          &minus;\n        </button>\n\n        <input\n          type=\"number\"\n          id=\"Quantity\"\n          value=\"1\"\n          class=\"h-10 w-16 rounded-sm border-gray-200 text-center [-moz-appearance:textfield] sm:text-sm [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n        />\n\n        <button type=\"button\" class=\"size-10 leading-10 text-gray-600 transition hover:opacity-75\">\n          &plus;\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/quantity-inputs/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div>\n      <label for=\"Quantity\" class=\"sr-only\"> Quantity </label>\n\n      <div class=\"flex items-center rounded-sm border border-gray-200 dark:border-gray-800\">\n        <button\n          type=\"button\"\n          class=\"size-10 leading-10 text-gray-600 transition hover:opacity-75 dark:text-gray-300\"\n        >\n          &minus;\n        </button>\n\n        <input\n          type=\"number\"\n          id=\"Quantity\"\n          value=\"1\"\n          class=\"h-10 w-16 border-transparent text-center [-moz-appearance:textfield] sm:text-sm dark:bg-gray-900 dark:text-white [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n        />\n\n        <button\n          type=\"button\"\n          class=\"size-10 leading-10 text-gray-600 transition hover:opacity-75 dark:text-gray-300\"\n        >\n          &plus;\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/quantity-inputs/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <div>\n      <label for=\"Quantity\" class=\"sr-only\"> Quantity </label>\n\n      <div class=\"flex items-center rounded-sm border border-gray-200\">\n        <button type=\"button\" class=\"size-10 leading-10 text-gray-600 transition hover:opacity-75\">\n          &minus;\n        </button>\n\n        <input\n          type=\"number\"\n          id=\"Quantity\"\n          value=\"1\"\n          class=\"h-10 w-16 border-transparent text-center [-moz-appearance:textfield] sm:text-sm [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n        />\n\n        <button type=\"button\" class=\"size-10 leading-10 text-gray-600 transition hover:opacity-75\">\n          &plus;\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/radio-groups/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <fieldset class=\"space-y-3\">\n      <legend class=\"sr-only\">Delivery</legend>\n\n      <div>\n        <label\n          for=\"DeliveryStandard\"\n          class=\"flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800\"\n        >\n          <p class=\"text-gray-700 dark:text-gray-200\">Standard</p>\n\n          <p class=\"text-gray-900 dark:text-white\">Free</p>\n\n          <input\n            type=\"radio\"\n            name=\"DeliveryOption\"\n            value=\"DeliveryStandard\"\n            id=\"DeliveryStandard\"\n            class=\"sr-only\"\n            checked\n          />\n        </label>\n      </div>\n\n      <div>\n        <label\n          for=\"DeliveryPriority\"\n          class=\"flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800\"\n        >\n          <p class=\"text-gray-700 dark:text-gray-200\">Next Day</p>\n\n          <p class=\"text-gray-900 dark:text-white\">£9.99</p>\n\n          <input\n            type=\"radio\"\n            name=\"DeliveryOption\"\n            value=\"DeliveryPriority\"\n            id=\"DeliveryPriority\"\n            class=\"sr-only\"\n          />\n        </label>\n      </div>\n    </fieldset>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/radio-groups/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <fieldset class=\"space-y-3\">\n      <legend class=\"sr-only\">Delivery</legend>\n\n      <div>\n        <label\n          for=\"DeliveryStandard\"\n          class=\"flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600\"\n        >\n          <p class=\"text-gray-700\">Standard</p>\n\n          <p class=\"text-gray-900\">Free</p>\n\n          <input\n            type=\"radio\"\n            name=\"DeliveryOption\"\n            value=\"DeliveryStandard\"\n            id=\"DeliveryStandard\"\n            class=\"sr-only\"\n            checked\n          />\n        </label>\n      </div>\n\n      <div>\n        <label\n          for=\"DeliveryPriority\"\n          class=\"flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600\"\n        >\n          <p class=\"text-gray-700\">Next Day</p>\n\n          <p class=\"text-gray-900\">£9.99</p>\n\n          <input\n            type=\"radio\"\n            name=\"DeliveryOption\"\n            value=\"DeliveryPriority\"\n            id=\"DeliveryPriority\"\n            class=\"sr-only\"\n          />\n        </label>\n      </div>\n    </fieldset>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/radio-groups/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <fieldset class=\"space-y-3\">\n      <legend class=\"sr-only\">Delivery</legend>\n\n      <div>\n        <label\n          for=\"DeliveryStandard\"\n          class=\"flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800\"\n        >\n          <div>\n            <p class=\"text-gray-700 dark:text-gray-200\">Standard</p>\n\n            <p class=\"text-gray-900 dark:text-white\">Free</p>\n          </div>\n\n          <input\n            type=\"radio\"\n            name=\"DeliveryOption\"\n            value=\"DeliveryStandard\"\n            id=\"DeliveryStandard\"\n            class=\"size-5 border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n            checked\n          />\n        </label>\n      </div>\n\n      <div>\n        <label\n          for=\"DeliveryPriority\"\n          class=\"flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800\"\n        >\n          <div>\n            <p class=\"text-gray-700 dark:text-gray-200\">Next Day</p>\n\n            <p class=\"text-gray-900 dark:text-white\">£9.99</p>\n          </div>\n\n          <input\n            type=\"radio\"\n            name=\"DeliveryOption\"\n            value=\"DeliveryPriority\"\n            id=\"DeliveryPriority\"\n            class=\"size-5 border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600\"\n          />\n        </label>\n      </div>\n    </fieldset>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/radio-groups/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <fieldset class=\"space-y-3\">\n      <legend class=\"sr-only\">Delivery</legend>\n\n      <div>\n        <label\n          for=\"DeliveryStandard\"\n          class=\"flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600\"\n        >\n          <div>\n            <p class=\"text-gray-700\">Standard</p>\n\n            <p class=\"text-gray-900\">Free</p>\n          </div>\n\n          <input\n            type=\"radio\"\n            name=\"DeliveryOption\"\n            value=\"DeliveryStandard\"\n            id=\"DeliveryStandard\"\n            class=\"size-5 border-gray-300\"\n            checked\n          />\n        </label>\n      </div>\n\n      <div>\n        <label\n          for=\"DeliveryPriority\"\n          class=\"flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600\"\n        >\n          <div>\n            <p class=\"text-gray-700\">Next Day</p>\n\n            <p class=\"text-gray-900\">£9.99</p>\n          </div>\n\n          <input\n            type=\"radio\"\n            name=\"DeliveryOption\"\n            value=\"DeliveryPriority\"\n            id=\"DeliveryPriority\"\n            class=\"size-5 border-gray-300\"\n          />\n        </label>\n      </div>\n    </fieldset>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/radio-groups/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <fieldset class=\"flex flex-wrap gap-3\">\n      <legend class=\"sr-only\">Color</legend>\n\n      <label\n        for=\"ColorBlack\"\n        class=\"block size-8 rounded-full bg-black shadow-sm has-checked:ring-2 has-checked:ring-black has-checked:ring-offset-2\"\n      >\n        <input\n          type=\"radio\"\n          name=\"ColorOption\"\n          value=\"ColorBlack\"\n          id=\"ColorBlack\"\n          class=\"sr-only\"\n          checked\n        />\n\n        <span class=\"sr-only\">Black</span>\n      </label>\n\n      <label\n        for=\"ColorRed\"\n        class=\"block size-8 rounded-full bg-red-500 shadow-sm has-checked:ring-2 has-checked:ring-red-500 has-checked:ring-offset-2\"\n      >\n        <input type=\"radio\" name=\"ColorOption\" value=\"ColorRed\" id=\"ColorRed\" class=\"sr-only\" />\n\n        <span class=\"sr-only\">Red</span>\n      </label>\n\n      <label\n        for=\"ColorBlue\"\n        class=\"block size-8 rounded-full bg-blue-500 shadow-sm has-checked:ring-2 has-checked:ring-blue-500 has-checked:ring-offset-2\"\n      >\n        <input type=\"radio\" name=\"ColorOption\" value=\"ColorBlue\" id=\"ColorBlue\" class=\"sr-only\" />\n\n        <span class=\"sr-only\">Blue</span>\n      </label>\n\n      <label\n        for=\"ColorGold\"\n        class=\"block size-8 rounded-full bg-amber-500 shadow-sm has-checked:ring-2 has-checked:ring-amber-500 has-checked:ring-offset-2\"\n      >\n        <input type=\"radio\" name=\"ColorOption\" value=\"ColorGold\" id=\"ColorGold\" class=\"sr-only\" />\n\n        <span class=\"sr-only\">Gold</span>\n      </label>\n    </fieldset>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/range-inputs/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <label for=\"maxVolume\">\n      <span class=\"block text-sm font-medium text-gray-900\">Max Volume</span>\n\n      <input\n        type=\"range\"\n        name=\"maxVolume\"\n        id=\"maxVolume\"\n        min=\"0\"\n        max=\"100\"\n        value=\"20\"\n        class=\"mt-3 h-3.5 w-full appearance-none rounded-full bg-gray-300 [&::-webkit-slider-thumb]:size-7 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[6px] [&::-webkit-slider-thumb]:border-gray-500 [&::-webkit-slider-thumb]:bg-gray-200\"\n      />\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/range-inputs/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <label for=\"maxVolume\">\n      <span class=\"block text-sm font-medium text-gray-900\">Max Volume</span>\n\n      <div class=\"mt-3 flex items-center gap-3\">\n        <input\n          type=\"range\"\n          name=\"maxVolume\"\n          id=\"maxVolume\"\n          min=\"0\"\n          max=\"100\"\n          value=\"20\"\n          class=\"h-3.5 w-full appearance-none rounded-full bg-gray-300 [&::-webkit-slider-thumb]:size-7 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[6px] [&::-webkit-slider-thumb]:border-gray-500 [&::-webkit-slider-thumb]:bg-gray-200\"\n        />\n\n        <span class=\"text-sm/none font-medium text-gray-700\">20%</span>\n      </div>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/range-inputs/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <label for=\"maxVolume\">\n      <span class=\"block text-sm font-medium text-gray-900\">Max Volume</span>\n\n      <input\n        type=\"range\"\n        name=\"maxVolume\"\n        id=\"maxVolume\"\n        min=\"0\"\n        max=\"100\"\n        value=\"20\"\n        class=\"mt-3 h-3.5 w-full appearance-none rounded-full bg-gray-300 [&::-webkit-slider-thumb]:size-7 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[6px] [&::-webkit-slider-thumb]:border-gray-500 [&::-webkit-slider-thumb]:bg-gray-200\"\n      />\n\n      <div class=\"mt-1 flex items-center justify-between\">\n        <span class=\"text-xs font-medium text-gray-700\">0%</span>\n        <span class=\"text-xs font-medium text-gray-700\">100%</span>\n      </div>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/range-inputs/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <label for=\"maxVolume\">\n      <span class=\"block text-sm font-medium text-gray-900\">Max Volume</span>\n\n      <input\n        type=\"range\"\n        name=\"maxVolume\"\n        id=\"maxVolume\"\n        min=\"0\"\n        max=\"100\"\n        value=\"20\"\n        list=\"volumeTicks\"\n        class=\"mt-1 w-full\"\n      />\n\n      <datalist id=\"volumeTicks\">\n        <option value=\"0\"></option>\n        <option value=\"25\"></option>\n        <option value=\"50\"></option>\n        <option value=\"75\"></option>\n        <option value=\"100\"></option>\n      </datalist>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/range-inputs/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <label for=\"maxVolume\">\n      <span class=\"block text-sm font-medium text-gray-900\">Max Volume</span>\n\n      <input\n        type=\"range\"\n        name=\"maxVolume\"\n        id=\"maxVolume\"\n        min=\"0\"\n        max=\"100\"\n        value=\"20\"\n        list=\"volumeTicks\"\n        class=\"mt-1 w-full\"\n      />\n\n      <datalist\n        id=\"volumeTicks\"\n        class=\"flex w-full flex-col justify-between [writing-mode:vertical-lr]\"\n      >\n        <option value=\"0\" label=\"0\"></option>\n        <option value=\"25\" label=\"25\"></option>\n        <option value=\"50\" label=\"50\"></option>\n        <option value=\"75\" label=\"75\"></option>\n        <option value=\"100\" label=\"100\"></option>\n      </datalist>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/selects/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-xs p-6\">\n    <label for=\"Headline\">\n      <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\"> Headliner </span>\n\n      <select\n        name=\"Headline\"\n        id=\"Headline\"\n        class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n      >\n        <option value=\"\">Please select</option>\n        <option value=\"JM\">John Mayer</option>\n        <option value=\"SRV\">Stevie Ray Vaughn</option>\n        <option value=\"JH\">Jimi Hendrix</option>\n        <option value=\"BBK\">B.B King</option>\n        <option value=\"AK\">Albert King</option>\n        <option value=\"BG\">Buddy Guy</option>\n        <option value=\"EC\">Eric Clapton</option>\n      </select>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/selects/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-xs p-6\">\n    <label for=\"Headline\">\n      <span class=\"text-sm font-medium text-gray-700\"> Headliner </span>\n\n      <select\n        name=\"Headline\"\n        id=\"Headline\"\n        class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm\"\n      >\n        <option value=\"\">Please select</option>\n        <option value=\"JM\">John Mayer</option>\n        <option value=\"SRV\">Stevie Ray Vaughn</option>\n        <option value=\"JH\">Jimi Hendrix</option>\n        <option value=\"BBK\">B.B King</option>\n        <option value=\"AK\">Albert King</option>\n        <option value=\"BG\">Buddy Guy</option>\n        <option value=\"EC\">Eric Clapton</option>\n      </select>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/selects/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-xs p-6\">\n    <label for=\"Headline\">\n      <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\"> Headliner </span>\n\n      <select\n        name=\"Headline\"\n        id=\"Headline\"\n        class=\"mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n      >\n        <option value=\"\">Please select</option>\n\n        <optgroup label=\"A\">\n          <option value=\"AK\">Albert King</option>\n        </optgroup>\n\n        <optgroup label=\"B\">\n          <option value=\"BBK\">B.B King</option>\n          <option value=\"BG\">Buddy Guy</option>\n        </optgroup>\n\n        <optgroup label=\"E\">\n          <option value=\"EC\">Eric Clapton</option>\n        </optgroup>\n\n        <optgroup label=\"J\">\n          <option value=\"JM\">John Mayer</option>\n          <option value=\"JH\">Jimi Hendrix</option>\n        </optgroup>\n\n        <optgroup label=\"S\">\n          <option value=\"SRV\">Stevie Ray Vaughn</option>\n        </optgroup>\n      </select>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/selects/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-xs p-6\">\n    <label for=\"Headline\">\n      <span class=\"text-sm font-medium text-gray-700\"> Headliner </span>\n\n      <select\n        name=\"Headline\"\n        id=\"Headline\"\n        class=\"mt-0.5 w-full rounded-lg border-gray-300 sm:text-sm\"\n      >\n        <option value=\"\">Please select</option>\n\n        <optgroup label=\"A\">\n          <option value=\"AK\">Albert King</option>\n        </optgroup>\n\n        <optgroup label=\"B\">\n          <option value=\"BBK\">B.B King</option>\n          <option value=\"BG\">Buddy Guy</option>\n        </optgroup>\n\n        <optgroup label=\"E\">\n          <option value=\"EC\">Eric Clapton</option>\n        </optgroup>\n\n        <optgroup label=\"J\">\n          <option value=\"JM\">John Mayer</option>\n          <option value=\"JH\">Jimi Hendrix</option>\n        </optgroup>\n\n        <optgroup label=\"S\">\n          <option value=\"SRV\">Stevie Ray Vaughn</option>\n        </optgroup>\n      </select>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/selects/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-xs p-6\">\n    <label for=\"Headline\">\n      <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\"> Headliner </span>\n\n      <div class=\"relative\">\n        <input\n          type=\"text\"\n          id=\"Headline\"\n          list=\"HeadlineList\"\n          placeholder=\"Please select\"\n          class=\"mt-0.5 w-full rounded border-gray-300 pe-8 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white [&::-webkit-calendar-picker-indicator]:opacity-0\"\n        />\n\n        <span\n          class=\"absolute inset-y-0 right-0 grid w-8 place-content-center text-gray-700 dark:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\" />\n          </svg>\n        </span>\n      </div>\n\n      <datalist name=\"Headline\" id=\"HeadlineList\">\n        <option value=\"JM\">John Mayer</option>\n        <option value=\"SRV\">Stevie Ray Vaughn</option>\n        <option value=\"JH\">Jimi Hendrix</option>\n        <option value=\"BBK\">B.B King</option>\n        <option value=\"AK\">Albert King</option>\n        <option value=\"BG\">Buddy Guy</option>\n        <option value=\"EC\">Eric Clapton</option>\n      </datalist>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/selects/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-xs p-6\">\n    <label for=\"Headline\">\n      <span class=\"text-sm font-medium text-gray-700\"> Headliner </span>\n\n      <div class=\"relative\">\n        <input\n          type=\"text\"\n          id=\"Headline\"\n          list=\"HeadlineList\"\n          placeholder=\"Please select\"\n          class=\"mt-0.5 w-full rounded border-gray-300 pe-8 shadow-sm sm:text-sm [&::-webkit-calendar-picker-indicator]:opacity-0\"\n        />\n\n        <span class=\"absolute inset-y-0 right-0 grid w-8 place-content-center text-gray-700\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\" />\n          </svg>\n        </span>\n      </div>\n\n      <datalist name=\"Headline\" id=\"HeadlineList\">\n        <option value=\"JM\">John Mayer</option>\n        <option value=\"SRV\">Stevie Ray Vaughn</option>\n        <option value=\"JH\">Jimi Hendrix</option>\n        <option value=\"BBK\">B.B King</option>\n        <option value=\"AK\">Albert King</option>\n        <option value=\"BG\">Buddy Guy</option>\n        <option value=\"EC\">Eric Clapton</option>\n      </datalist>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/side-menu/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"max-w-xs\">\n    <div class=\"flex h-screen flex-col justify-between border-e border-gray-100 bg-white\">\n      <div class=\"px-4 py-6\">\n        <span\n          class=\"grid h-10 w-32 place-content-center rounded-lg bg-gray-100 text-xs text-gray-600\"\n        >\n          Logo\n        </span>\n\n        <ul class=\"mt-6 space-y-1\">\n          <li>\n            <a\n              href=\"#\"\n              class=\"block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700\"\n            >\n              General\n            </a>\n          </li>\n\n          <li>\n            <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n              <summary\n                class=\"flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                <span class=\"text-sm font-medium\"> Teams </span>\n\n                <span class=\"shrink-0 transition duration-300 group-open:-rotate-180\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"size-5\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </span>\n              </summary>\n\n              <ul class=\"mt-2 space-y-1 px-4\">\n                <li>\n                  <a\n                    href=\"#\"\n                    class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n                  >\n                    Banned Users\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    href=\"#\"\n                    class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n                  >\n                    Calendar\n                  </a>\n                </li>\n              </ul>\n            </details>\n          </li>\n\n          <li>\n            <a\n              href=\"#\"\n              class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n            >\n              Billing\n            </a>\n          </li>\n\n          <li>\n            <a\n              href=\"#\"\n              class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n            >\n              Invoices\n            </a>\n          </li>\n\n          <li>\n            <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n              <summary\n                class=\"flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                <span class=\"text-sm font-medium\"> Account </span>\n\n                <span class=\"shrink-0 transition duration-300 group-open:-rotate-180\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"size-5\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </span>\n              </summary>\n\n              <ul class=\"mt-2 space-y-1 px-4\">\n                <li>\n                  <a\n                    href=\"#\"\n                    class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n                  >\n                    Details\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    href=\"#\"\n                    class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n                  >\n                    Security\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    href=\"#\"\n                    class=\"w-full rounded-lg px-4 py-2 [text-align:_inherit] text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n                  >\n                    Logout\n                  </a>\n                </li>\n              </ul>\n            </details>\n          </li>\n        </ul>\n      </div>\n\n      <div class=\"sticky inset-x-0 bottom-0 border-t border-gray-100\">\n        <a href=\"#\" class=\"flex items-center gap-2 bg-white p-4 hover:bg-gray-50\">\n          <img\n            alt=\"\"\n            src=\"https://images.unsplash.com/photo-1600486913747-55e5470d6f40?auto=format&fit=crop&q=80&w=1160\"\n            class=\"size-10 rounded-full object-cover\"\n          />\n\n          <div>\n            <p class=\"text-xs\">\n              <strong class=\"block font-medium\">Eric Frusciante</strong>\n\n              <span> eric@frusciante.com </span>\n            </p>\n          </div>\n        </a>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/side-menu/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"max-w-xs\">\n    <div class=\"flex h-screen w-16 flex-col justify-between border-e border-gray-100 bg-white\">\n      <div>\n        <div class=\"inline-flex size-16 items-center justify-center\">\n          <span\n            class=\"grid size-10 place-content-center rounded-lg bg-gray-100 text-xs text-gray-600\"\n          >\n            L\n          </span>\n        </div>\n\n        <div class=\"border-t border-gray-100\">\n          <div class=\"px-2\">\n            <div class=\"py-4\">\n              <a\n                href=\"#\"\n                class=\"t group relative flex justify-center rounded-sm bg-blue-50 px-2 py-1.5 text-blue-700\"\n              >\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"size-5 opacity-75\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"\n                  />\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\n                  />\n                </svg>\n\n                <span\n                  class=\"invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded-sm bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible\"\n                >\n                  General\n                </span>\n              </a>\n            </div>\n\n            <ul class=\"space-y-1 border-t border-gray-100 pt-4\">\n              <li>\n                <a\n                  href=\"#\"\n                  class=\"group relative flex justify-center rounded-sm px-2 py-1.5 text-gray-500 hover:bg-gray-50 hover:text-gray-700\"\n                >\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"size-5 opacity-75\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                  >\n                    <path\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"\n                    />\n                  </svg>\n\n                  <span\n                    class=\"invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded-sm bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible\"\n                  >\n                    Teams\n                  </span>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  class=\"group relative flex justify-center rounded-sm px-2 py-1.5 text-gray-500 hover:bg-gray-50 hover:text-gray-700\"\n                >\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"size-5 opacity-75\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                  >\n                    <path\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n                    />\n                  </svg>\n\n                  <span\n                    class=\"invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded-sm bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible\"\n                  >\n                    Billing\n                  </span>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  class=\"group relative flex justify-center rounded-sm px-2 py-1.5 text-gray-500 hover:bg-gray-50 hover:text-gray-700\"\n                >\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"size-5 opacity-75\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                  >\n                    <path\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      d=\"M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z\"\n                    />\n                  </svg>\n\n                  <span\n                    class=\"invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded-sm bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible\"\n                  >\n                    Invoices\n                  </span>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  class=\"group relative flex justify-center rounded-sm px-2 py-1.5 text-gray-500 hover:bg-gray-50 hover:text-gray-700\"\n                >\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"size-5 opacity-75\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                  >\n                    <path\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\n                    />\n                  </svg>\n\n                  <span\n                    class=\"invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded-sm bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible\"\n                  >\n                    Account\n                  </span>\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"sticky inset-x-0 bottom-0 border-t border-gray-100 bg-white p-2\">\n        <a\n          href=\"#\"\n          class=\"group relative flex w-full justify-center rounded-lg px-2 py-1.5 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1\"\n            />\n          </svg>\n\n          <span\n            class=\"invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded-sm bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible\"\n          >\n            Logout\n          </span>\n        </a>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/side-menu/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"max-w-xs\">\n    <div class=\"flex\">\n      <div class=\"flex h-screen w-16 flex-col justify-between border-e border-gray-100 bg-white\">\n        <div>\n          <div class=\"inline-flex size-16 items-center justify-center\">\n            <span\n              class=\"grid size-10 place-content-center rounded-lg bg-gray-100 text-xs text-gray-600\"\n            >\n              L\n            </span>\n          </div>\n\n          <div class=\"border-t border-gray-100\">\n            <div class=\"px-2\">\n              <div class=\"py-4\">\n                <a\n                  href=\"#\"\n                  class=\"t group relative flex justify-center rounded-sm bg-blue-50 px-2 py-1.5 text-blue-700\"\n                >\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"size-5 opacity-75\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                  >\n                    <path\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"\n                    />\n                    <path\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\n                    />\n                  </svg>\n\n                  <span\n                    class=\"invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded-sm bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible\"\n                  >\n                    General\n                  </span>\n                </a>\n              </div>\n\n              <ul class=\"space-y-1 border-t border-gray-100 pt-4\">\n                <li>\n                  <a\n                    href=\"#\"\n                    class=\"group relative flex justify-center rounded-sm px-2 py-1.5 text-gray-500 hover:bg-gray-50 hover:text-gray-700\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"size-5 opacity-75\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"\n                      />\n                    </svg>\n\n                    <span\n                      class=\"invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded-sm bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible\"\n                    >\n                      Teams\n                    </span>\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    href=\"#\"\n                    class=\"group relative flex justify-center rounded-sm px-2 py-1.5 text-gray-500 hover:bg-gray-50 hover:text-gray-700\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"size-5 opacity-75\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n                      />\n                    </svg>\n\n                    <span\n                      class=\"invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded-sm bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible\"\n                    >\n                      Billing\n                    </span>\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    href=\"#\"\n                    class=\"group relative flex justify-center rounded-sm px-2 py-1.5 text-gray-500 hover:bg-gray-50 hover:text-gray-700\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"size-5 opacity-75\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z\"\n                      />\n                    </svg>\n\n                    <span\n                      class=\"invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded-sm bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible\"\n                    >\n                      Invoices\n                    </span>\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    href=\"#\"\n                    class=\"group relative flex justify-center rounded-sm px-2 py-1.5 text-gray-500 hover:bg-gray-50 hover:text-gray-700\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"size-5 opacity-75\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\n                      />\n                    </svg>\n\n                    <span\n                      class=\"invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded-sm bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible\"\n                    >\n                      Account\n                    </span>\n                  </a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"sticky inset-x-0 bottom-0 border-t border-gray-100 bg-white p-2\">\n          <a\n            href=\"#\"\n            class=\"group relative flex w-full justify-center rounded-lg px-2 py-1.5 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-5 opacity-75\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1\"\n              />\n            </svg>\n\n            <span\n              class=\"invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded-sm bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible\"\n            >\n              Logout\n            </span>\n          </a>\n        </div>\n      </div>\n\n      <div class=\"flex h-screen flex-1 flex-col justify-between border-e border-gray-100 bg-white\">\n        <div class=\"px-4 py-6\">\n          <ul class=\"mt-14 space-y-1\">\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700\"\n              >\n                General\n              </a>\n            </li>\n\n            <li>\n              <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n                <summary\n                  class=\"flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n                >\n                  <span class=\"text-sm font-medium\"> Teams </span>\n\n                  <span class=\"shrink-0 transition duration-300 group-open:-rotate-180\">\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"size-5\"\n                      viewBox=\"0 0 20 20\"\n                      fill=\"currentColor\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                        clip-rule=\"evenodd\"\n                      />\n                    </svg>\n                  </span>\n                </summary>\n\n                <ul class=\"mt-2 space-y-1 px-4\">\n                  <li>\n                    <a\n                      href=\"#\"\n                      class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n                    >\n                      Banned Users\n                    </a>\n                  </li>\n\n                  <li>\n                    <a\n                      href=\"#\"\n                      class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n                    >\n                      Calendar\n                    </a>\n                  </li>\n                </ul>\n              </details>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Billing\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Invoices\n              </a>\n            </li>\n\n            <li>\n              <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n                <summary\n                  class=\"flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n                >\n                  <span class=\"text-sm font-medium\"> Account </span>\n\n                  <span class=\"shrink-0 transition duration-300 group-open:-rotate-180\">\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"size-5\"\n                      viewBox=\"0 0 20 20\"\n                      fill=\"currentColor\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                        clip-rule=\"evenodd\"\n                      />\n                    </svg>\n                  </span>\n                </summary>\n\n                <ul class=\"mt-2 space-y-1 px-4\">\n                  <li>\n                    <a\n                      href=\"#\"\n                      class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n                    >\n                      Details\n                    </a>\n                  </li>\n\n                  <li>\n                    <a\n                      href=\"#\"\n                      class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n                    >\n                      Security\n                    </a>\n                  </li>\n\n                  <li>\n                    <a\n                      href=\"#\"\n                      class=\"w-full rounded-lg px-4 py-2 [text-align:_inherit] text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n                    >\n                      Logout\n                    </a>\n                  </li>\n                </ul>\n              </details>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/skip-links/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <a\n      href=\"#mainContent\"\n      class=\"absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full rounded-sm bg-blue-700 px-12 py-3 text-sm font-semibold text-white transition-transform hover:bg-blue-600 focus:translate-y-4 active:bg-blue-600\"\n    >\n      Skip to main content\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/skip-links/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <nav\n      class=\"absolute top-0 left-1/2 w-full max-w-sm -translate-x-1/2 -translate-y-full rounded-sm bg-gray-100 p-4 transition-transform focus-within:translate-y-4\"\n      aria-label=\"Skip to\"\n    >\n      <p class=\"text-xs font-semibold tracking-wide text-gray-700 uppercase\">Skip to:</p>\n\n      <div class=\"mt-1 flex flex-wrap gap-2\">\n        <a\n          href=\"#mainNavigation\"\n          class=\"text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600\"\n        >\n          Navigation\n        </a>\n\n        <a\n          href=\"#mainContent\"\n          class=\"text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600\"\n        >\n          Content\n        </a>\n\n        <a\n          href=\"#mainFooter\"\n          class=\"text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600\"\n        >\n          Footer\n        </a>\n      </div>\n    </nav>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/skip-links/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <nav\n      class=\"absolute inset-x-0 top-0 flex -translate-y-full items-center gap-3 rounded-sm bg-gray-100 p-4 transition-transform focus-within:translate-y-0\"\n      aria-label=\"Skip to\"\n    >\n      <p class=\"text-xs font-semibold tracking-wide text-gray-700 uppercase\">Skip to:</p>\n\n      <div class=\"flex flex-wrap gap-2\">\n        <a\n          href=\"#mainNavigation\"\n          class=\"text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600\"\n        >\n          Navigation\n        </a>\n\n        <a\n          href=\"#mainContent\"\n          class=\"text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600\"\n        >\n          Content\n        </a>\n\n        <a\n          href=\"#mainFooter\"\n          class=\"text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600\"\n        >\n          Footer\n        </a>\n      </div>\n    </nav>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/stats/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-lg flex-col gap-4 p-6\">\n    <article\n      class=\"flex flex-col gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900\"\n    >\n      <div\n        class=\"inline-flex gap-2 self-end rounded-sm bg-green-100 p-1 text-green-600 dark:bg-green-700 dark:text-green-50\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\n          />\n        </svg>\n\n        <span class=\"text-xs font-medium\"> 67.81% </span>\n      </div>\n\n      <div>\n        <strong class=\"block text-sm font-medium text-gray-500 dark:text-gray-400\"> Profit </strong>\n\n        <p>\n          <span class=\"text-2xl font-medium text-gray-900 dark:text-white\"> $404.32 </span>\n\n          <span class=\"text-xs text-gray-500 dark:text-gray-400\"> from $240.94 </span>\n        </p>\n      </div>\n    </article>\n\n    <article\n      class=\"flex flex-col gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900\"\n    >\n      <div\n        class=\"inline-flex gap-2 self-end rounded-sm bg-red-100 p-1 text-red-600 dark:bg-red-700 dark:text-red-50\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 17h8m0 0V9m0 8l-8-8-4 4-6-6\"\n          />\n        </svg>\n\n        <span class=\"text-xs font-medium\"> 67.81% </span>\n      </div>\n\n      <div>\n        <strong class=\"block text-sm font-medium text-gray-500 dark:text-gray-400\"> Profit </strong>\n\n        <p>\n          <span class=\"text-2xl font-medium text-gray-900 dark:text-white\"> $240.94 </span>\n\n          <span class=\"text-xs text-gray-500 dark:text-gray-400\"> from $404.32 </span>\n        </p>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/stats/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-lg flex-col gap-4 p-6\">\n    <article class=\"flex flex-col gap-4 rounded-lg border border-gray-100 bg-white p-6\">\n      <div class=\"inline-flex gap-2 self-end rounded-sm bg-green-100 p-1 text-green-600\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\n          />\n        </svg>\n\n        <span class=\"text-xs font-medium\"> 67.81% </span>\n      </div>\n\n      <div>\n        <strong class=\"block text-sm font-medium text-gray-500\"> Profit </strong>\n\n        <p>\n          <span class=\"text-2xl font-medium text-gray-900\"> $404.32 </span>\n\n          <span class=\"text-xs text-gray-500\"> from $240.94 </span>\n        </p>\n      </div>\n    </article>\n\n    <article class=\"flex flex-col gap-4 rounded-lg border border-gray-100 bg-white p-6\">\n      <div class=\"inline-flex gap-2 self-end rounded-sm bg-red-100 p-1 text-red-600\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 17h8m0 0V9m0 8l-8-8-4 4-6-6\"\n          />\n        </svg>\n\n        <span class=\"text-xs font-medium\"> 67.81% </span>\n      </div>\n\n      <div>\n        <strong class=\"block text-sm font-medium text-gray-500\"> Profit </strong>\n\n        <p>\n          <span class=\"text-2xl font-medium text-gray-900\"> $240.94 </span>\n\n          <span class=\"text-xs text-gray-500\"> from $404.32 </span>\n        </p>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/stats/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-lg flex-col gap-4 p-6\">\n    <article\n      class=\"flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900\"\n    >\n      <div class=\"flex items-center gap-4\">\n        <span\n          class=\"hidden rounded-full bg-gray-100 p-2 text-gray-600 sm:block dark:bg-gray-800 dark:text-gray-300\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-6\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z\"\n            />\n          </svg>\n        </span>\n\n        <div>\n          <p class=\"text-sm text-gray-500 dark:text-gray-400\">Profit</p>\n\n          <p class=\"text-2xl font-medium text-gray-900 dark:text-white\">$240.94</p>\n        </div>\n      </div>\n\n      <div\n        class=\"inline-flex gap-2 rounded-sm bg-green-100 p-1 text-green-600 dark:bg-green-700 dark:text-green-50\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\n          />\n        </svg>\n\n        <span class=\"text-xs font-medium\"> 67.81% </span>\n      </div>\n    </article>\n\n    <article\n      class=\"flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900\"\n    >\n      <div class=\"flex items-center gap-4\">\n        <span\n          class=\"hidden rounded-full bg-gray-100 p-2 text-gray-600 sm:block dark:bg-gray-800 dark:text-gray-300\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-6\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z\"\n            />\n          </svg>\n        </span>\n\n        <div>\n          <p class=\"text-sm text-gray-500 dark:text-gray-400\">Profit</p>\n\n          <p class=\"text-2xl font-medium text-gray-900 dark:text-white\">$240.94</p>\n        </div>\n      </div>\n\n      <div\n        class=\"inline-flex gap-2 rounded-sm bg-red-100 p-1 text-red-600 dark:bg-red-700 dark:text-red-50\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 17h8m0 0V9m0 8l-8-8-4 4-6-6\"\n          />\n        </svg>\n\n        <span class=\"text-xs font-medium\"> 67.81% </span>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/stats/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-lg flex-col gap-4 p-6\">\n    <article class=\"flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6\">\n      <div class=\"flex items-center gap-4\">\n        <span class=\"hidden rounded-full bg-gray-100 p-2 text-gray-600 sm:block\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-6\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z\"\n            />\n          </svg>\n        </span>\n\n        <div>\n          <p class=\"text-sm text-gray-500\">Profit</p>\n\n          <p class=\"text-2xl font-medium text-gray-900\">$240.94</p>\n        </div>\n      </div>\n\n      <div class=\"inline-flex gap-2 rounded-sm bg-green-100 p-1 text-green-600\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\n          />\n        </svg>\n\n        <span class=\"text-xs font-medium\"> 67.81% </span>\n      </div>\n    </article>\n\n    <article class=\"flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6\">\n      <div class=\"flex items-center gap-4\">\n        <span class=\"hidden rounded-full bg-gray-100 p-2 text-gray-600 sm:block\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-6\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z\"\n            />\n          </svg>\n        </span>\n\n        <div>\n          <p class=\"text-sm text-gray-500\">Profit</p>\n\n          <p class=\"text-2xl font-medium text-gray-900\">$240.94</p>\n        </div>\n      </div>\n\n      <div class=\"inline-flex gap-2 rounded-sm bg-red-100 p-1 text-red-600\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 17h8m0 0V9m0 8l-8-8-4 4-6-6\"\n          />\n        </svg>\n\n        <span class=\"text-xs font-medium\"> 67.81% </span>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/stats/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-lg flex-col gap-4 p-6\">\n    <article\n      class=\"flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900\"\n    >\n      <div>\n        <p class=\"text-sm text-gray-500 dark:text-gray-400\">Profit</p>\n\n        <p class=\"text-2xl font-medium text-gray-900 dark:text-white\">$240.94</p>\n      </div>\n\n      <div\n        class=\"inline-flex gap-2 rounded-sm bg-green-100 p-1 text-green-600 dark:bg-green-700 dark:text-green-50\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\n          />\n        </svg>\n\n        <span class=\"text-xs font-medium\"> 67.81% </span>\n      </div>\n    </article>\n\n    <article\n      class=\"flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900\"\n    >\n      <div>\n        <p class=\"text-sm text-gray-500 dark:text-gray-400\">Profit</p>\n\n        <p class=\"text-2xl font-medium text-gray-900 dark:text-white\">$240.94</p>\n      </div>\n\n      <div\n        class=\"inline-flex gap-2 rounded-sm bg-red-100 p-1 text-red-600 dark:bg-red-700 dark:text-red-50\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 17h8m0 0V9m0 8l-8-8-4 4-6-6\"\n          />\n        </svg>\n\n        <span class=\"text-xs font-medium\"> 67.81% </span>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/stats/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-lg flex-col gap-4 p-6\">\n    <article class=\"flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6\">\n      <div>\n        <p class=\"text-sm text-gray-500\">Profit</p>\n\n        <p class=\"text-2xl font-medium text-gray-900\">$240.94</p>\n      </div>\n\n      <div class=\"inline-flex gap-2 rounded-sm bg-green-100 p-1 text-green-600\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\n          />\n        </svg>\n\n        <span class=\"text-xs font-medium\"> 67.81% </span>\n      </div>\n    </article>\n\n    <article class=\"flex items-end justify-between rounded-lg border border-gray-100 bg-white p-6\">\n      <div>\n        <p class=\"text-sm text-gray-500\">Profit</p>\n\n        <p class=\"text-2xl font-medium text-gray-900\">$240.94</p>\n      </div>\n\n      <div class=\"inline-flex gap-2 rounded-sm bg-red-100 p-1 text-red-600\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 17h8m0 0V9m0 8l-8-8-4 4-6-6\"\n          />\n        </svg>\n\n        <span class=\"text-xs font-medium\"> 67.81% </span>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/stats/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-lg flex-col gap-4 p-6\">\n    <article\n      class=\"flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900\"\n    >\n      <span\n        class=\"rounded-full bg-blue-100 p-3 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-8\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z\"\n          />\n        </svg>\n      </span>\n\n      <div>\n        <p class=\"text-2xl font-medium text-gray-900 dark:text-white\">$240.94</p>\n\n        <p class=\"text-sm text-gray-500 dark:text-gray-400\">Total Sales</p>\n      </div>\n    </article>\n\n    <article\n      class=\"flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 sm:justify-between dark:border-gray-800 dark:bg-gray-900\"\n    >\n      <span\n        class=\"rounded-full bg-blue-100 p-3 text-blue-600 sm:order-last dark:bg-blue-500/20 dark:text-blue-400\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-8\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z\"\n          />\n        </svg>\n      </span>\n\n      <div>\n        <p class=\"text-2xl font-medium text-gray-900 dark:text-white\">$240.94</p>\n\n        <p class=\"text-sm text-gray-500 dark:text-gray-400\">Total Sales</p>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/stats/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-lg flex-col gap-4 p-6\">\n    <article class=\"flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6\">\n      <span class=\"rounded-full bg-blue-100 p-3 text-blue-600\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-8\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z\"\n          />\n        </svg>\n      </span>\n\n      <div>\n        <p class=\"text-2xl font-medium text-gray-900\">$240.94</p>\n\n        <p class=\"text-sm text-gray-500\">Total Sales</p>\n      </div>\n    </article>\n\n    <article\n      class=\"flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 sm:justify-between\"\n    >\n      <span class=\"rounded-full bg-blue-100 p-3 text-blue-600 sm:order-last\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-8\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z\"\n          />\n        </svg>\n      </span>\n\n      <div>\n        <p class=\"text-2xl font-medium text-gray-900\">$240.94</p>\n\n        <p class=\"text-sm text-gray-500\">Total Sales</p>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/stats/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-lg flex-col gap-4 p-6\">\n    <article\n      class=\"rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900\"\n    >\n      <div>\n        <p class=\"text-sm text-gray-500 dark:text-gray-400\">Profit</p>\n\n        <p class=\"text-2xl font-medium text-gray-900 dark:text-white\">$240.94</p>\n      </div>\n\n      <div class=\"mt-1 flex gap-1 text-green-600\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\n          />\n        </svg>\n\n        <p class=\"flex gap-2 text-xs\">\n          <span class=\"font-medium\"> 67.81% </span>\n\n          <span class=\"text-gray-500 dark:text-gray-400\"> Since last week </span>\n        </p>\n      </div>\n    </article>\n\n    <article\n      class=\"rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900\"\n    >\n      <div>\n        <p class=\"text-sm text-gray-500 dark:text-gray-400\">Profit</p>\n\n        <p class=\"text-2xl font-medium text-gray-900 dark:text-white\">$240.94</p>\n      </div>\n\n      <div class=\"mt-1 flex gap-1 text-red-600\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 17h8m0 0V9m0 8l-8-8-4 4-6-6\"\n          />\n        </svg>\n\n        <p class=\"flex gap-2 text-xs\">\n          <span class=\"font-medium\"> 67.81% </span>\n          <span class=\"text-gray-500 dark:text-gray-400\"> Since last week </span>\n        </p>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/stats/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-lg flex-col gap-4 p-6\">\n    <article class=\"rounded-lg border border-gray-100 bg-white p-6\">\n      <div>\n        <p class=\"text-sm text-gray-500\">Profit</p>\n\n        <p class=\"text-2xl font-medium text-gray-900\">$240.94</p>\n      </div>\n\n      <div class=\"mt-1 flex gap-1 text-green-600\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\n          />\n        </svg>\n\n        <p class=\"flex gap-2 text-xs\">\n          <span class=\"font-medium\"> 67.81% </span>\n\n          <span class=\"text-gray-500\"> Since last week </span>\n        </p>\n      </div>\n    </article>\n\n    <article class=\"rounded-lg border border-gray-100 bg-white p-6\">\n      <div>\n        <p class=\"text-sm text-gray-500\">Profit</p>\n\n        <p class=\"text-2xl font-medium text-gray-900\">$240.94</p>\n      </div>\n\n      <div class=\"mt-1 flex gap-1 text-red-600\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 17h8m0 0V9m0 8l-8-8-4 4-6-6\"\n          />\n        </svg>\n\n        <p class=\"flex gap-2 text-xs\">\n          <span class=\"font-medium\"> 67.81% </span>\n          <span class=\"text-gray-500\"> Since last week </span>\n        </p>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/stats/6-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-lg flex-col gap-4 p-6\">\n    <article\n      class=\"rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900\"\n    >\n      <div class=\"flex items-center justify-between\">\n        <div>\n          <p class=\"text-sm text-gray-500 dark:text-gray-400\">Profit</p>\n\n          <p class=\"text-2xl font-medium text-gray-900 dark:text-white\">$240.94</p>\n        </div>\n\n        <span\n          class=\"rounded-full bg-blue-100 p-3 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-8\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z\"\n            />\n          </svg>\n        </span>\n      </div>\n\n      <div class=\"mt-1 flex gap-1 text-green-600\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\n          />\n        </svg>\n\n        <p class=\"flex gap-2 text-xs\">\n          <span class=\"font-medium\"> 67.81% </span>\n\n          <span class=\"text-gray-500 dark:text-gray-400\"> Since last week </span>\n        </p>\n      </div>\n    </article>\n\n    <article\n      class=\"rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900\"\n    >\n      <div class=\"flex items-center justify-between\">\n        <div>\n          <p class=\"text-sm text-gray-500 dark:text-gray-400\">Profit</p>\n\n          <p class=\"text-2xl font-medium text-gray-900 dark:text-white\">$240.94</p>\n        </div>\n\n        <span\n          class=\"rounded-full bg-blue-100 p-3 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-8\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z\"\n            />\n          </svg>\n        </span>\n      </div>\n\n      <div class=\"mt-1 flex gap-1 text-red-600\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 17h8m0 0V9m0 8l-8-8-4 4-6-6\"\n          />\n        </svg>\n\n        <p class=\"flex gap-2 text-xs\">\n          <span class=\"font-medium\"> 67.81% </span>\n\n          <span class=\"text-gray-500 dark:text-gray-400\"> Since last week </span>\n        </p>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/stats/6.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto flex max-w-lg flex-col gap-4 p-6\">\n    <article class=\"rounded-lg border border-gray-100 bg-white p-6\">\n      <div class=\"flex items-center justify-between\">\n        <div>\n          <p class=\"text-sm text-gray-500\">Profit</p>\n\n          <p class=\"text-2xl font-medium text-gray-900\">$240.94</p>\n        </div>\n\n        <span class=\"rounded-full bg-blue-100 p-3 text-blue-600\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-8\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z\"\n            />\n          </svg>\n        </span>\n      </div>\n\n      <div class=\"mt-1 flex gap-1 text-green-600\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\n          />\n        </svg>\n\n        <p class=\"flex gap-2 text-xs\">\n          <span class=\"font-medium\"> 67.81% </span>\n\n          <span class=\"text-gray-500\"> Since last week </span>\n        </p>\n      </div>\n    </article>\n\n    <article class=\"rounded-lg border border-gray-100 bg-white p-6\">\n      <div class=\"flex items-center justify-between\">\n        <div>\n          <p class=\"text-sm text-gray-500\">Profit</p>\n\n          <p class=\"text-2xl font-medium text-gray-900\">$240.94</p>\n        </div>\n\n        <span class=\"rounded-full bg-blue-100 p-3 text-blue-600\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-8\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z\"\n            />\n          </svg>\n        </span>\n      </div>\n\n      <div class=\"mt-1 flex gap-1 text-red-600\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M13 17h8m0 0V9m0 8l-8-8-4 4-6-6\"\n          />\n        </svg>\n\n        <p class=\"flex gap-2 text-xs\">\n          <span class=\"font-medium\"> 67.81% </span>\n\n          <span class=\"text-gray-500\"> Since last week </span>\n        </p>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/steps/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div>\n      <h2 class=\"sr-only\">Steps</h2>\n\n      <div>\n        <div class=\"overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700\">\n          <div class=\"h-2 w-1/2 rounded-full bg-blue-500\"></div>\n        </div>\n\n        <ol class=\"mt-4 grid grid-cols-3 text-sm font-medium text-gray-600 dark:text-gray-300\">\n          <li class=\"flex items-center justify-start text-blue-500 sm:gap-1.5\">\n            <span class=\"hidden sm:inline\"> Details </span>\n\n            <svg\n              class=\"size-6 sm:size-5\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2\"\n              />\n            </svg>\n          </li>\n\n          <li class=\"flex items-center justify-center text-blue-500 sm:gap-1.5\">\n            <span class=\"hidden sm:inline\"> Address </span>\n\n            <svg\n              class=\"size-6 sm:size-5\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n              />\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n              />\n            </svg>\n          </li>\n\n          <li class=\"flex items-center justify-end sm:gap-1.5\">\n            <span class=\"hidden sm:inline\"> Payment </span>\n\n            <svg\n              class=\"size-6 sm:size-5\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n              />\n            </svg>\n          </li>\n        </ol>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/steps/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div>\n      <h2 class=\"sr-only\">Steps</h2>\n\n      <div>\n        <div class=\"overflow-hidden rounded-full bg-gray-200\">\n          <div class=\"h-2 w-1/2 rounded-full bg-blue-500\"></div>\n        </div>\n\n        <ol class=\"mt-4 grid grid-cols-3 text-sm font-medium text-gray-600\">\n          <li class=\"flex items-center justify-start text-blue-500 sm:gap-1.5\">\n            <span class=\"hidden sm:inline\"> Details </span>\n\n            <svg\n              class=\"size-6 sm:size-5\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2\"\n              />\n            </svg>\n          </li>\n\n          <li class=\"flex items-center justify-center text-blue-500 sm:gap-1.5\">\n            <span class=\"hidden sm:inline\"> Address </span>\n\n            <svg\n              class=\"size-6 sm:size-5\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n              />\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n              />\n            </svg>\n          </li>\n\n          <li class=\"flex items-center justify-end sm:gap-1.5\">\n            <span class=\"hidden sm:inline\"> Payment </span>\n\n            <svg\n              class=\"size-6 sm:size-5\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n              />\n            </svg>\n          </li>\n        </ol>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/steps/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div>\n      <h2 class=\"sr-only\">Steps</h2>\n\n      <div>\n        <p class=\"text-xs font-medium text-gray-600 dark:text-gray-300\">2/3 - Address</p>\n\n        <div class=\"mt-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700\">\n          <div class=\"h-2 w-2/3 rounded-full bg-blue-500\"></div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/steps/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div>\n      <h2 class=\"sr-only\">Steps</h2>\n\n      <div>\n        <p class=\"text-xs font-medium text-gray-600\">2/3 - Address</p>\n\n        <div class=\"mt-2 overflow-hidden rounded-full bg-gray-200\">\n          <div class=\"h-2 w-2/3 rounded-full bg-blue-500\"></div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/steps/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div>\n      <h2 class=\"sr-only\">Steps</h2>\n\n      <div\n        class=\"after:mt-4 after:block after:h-1 after:w-full after:rounded-lg after:bg-gray-200 dark:after:bg-gray-700\"\n      >\n        <ol class=\"grid grid-cols-3 text-sm font-medium text-gray-600 dark:text-gray-300\">\n          <li class=\"relative flex justify-start text-blue-500\">\n            <span\n              class=\"absolute start-0 -bottom-7 rounded-full bg-blue-500 text-white dark:text-gray-900\"\n            >\n              <svg\n                class=\"size-5\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </span>\n\n            <span class=\"hidden sm:block\"> Details </span>\n\n            <svg\n              class=\"size-6 sm:hidden\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2\"\n              />\n            </svg>\n          </li>\n\n          <li class=\"relative flex justify-center text-blue-500\">\n            <span\n              class=\"absolute -bottom-7 left-1/2 -translate-x-1/2 rounded-full bg-blue-500 text-white dark:text-gray-900\"\n            >\n              <svg\n                class=\"size-5\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </span>\n\n            <span class=\"hidden sm:block\"> Address </span>\n\n            <svg\n              class=\"mx-auto size-6 sm:hidden\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n              />\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n              />\n            </svg>\n          </li>\n\n          <li class=\"relative flex justify-end\">\n            <span\n              class=\"absolute end-0 -bottom-7 rounded-full bg-gray-500 text-white dark:bg-gray-400 dark:text-gray-900\"\n            >\n              <svg\n                class=\"size-5\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </span>\n\n            <span class=\"hidden sm:block\"> Payment </span>\n\n            <svg\n              class=\"size-6 sm:hidden\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n              />\n            </svg>\n          </li>\n        </ol>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/steps/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div>\n      <h2 class=\"sr-only\">Steps</h2>\n\n      <div class=\"after:mt-4 after:block after:h-1 after:w-full after:rounded-lg after:bg-gray-200\">\n        <ol class=\"grid grid-cols-3 text-sm font-medium text-gray-600\">\n          <li class=\"relative flex justify-start text-blue-500\">\n            <span class=\"absolute start-0 -bottom-7 rounded-full bg-blue-500 text-white\">\n              <svg\n                class=\"size-5\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </span>\n\n            <span class=\"hidden sm:block\"> Details </span>\n\n            <svg\n              class=\"size-6 sm:hidden\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2\"\n              />\n            </svg>\n          </li>\n\n          <li class=\"relative flex justify-center text-blue-500\">\n            <span\n              class=\"absolute -bottom-7 left-1/2 -translate-x-1/2 rounded-full bg-blue-500 text-white\"\n            >\n              <svg\n                class=\"size-5\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </span>\n\n            <span class=\"hidden sm:block\"> Address </span>\n\n            <svg\n              class=\"mx-auto size-6 sm:hidden\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n              />\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n              />\n            </svg>\n          </li>\n\n          <li class=\"relative flex justify-end\">\n            <span class=\"absolute end-0 -bottom-7 rounded-full bg-gray-500 text-white\">\n              <svg\n                class=\"size-5\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </span>\n\n            <span class=\"hidden sm:block\"> Payment </span>\n\n            <svg\n              class=\"size-6 sm:hidden\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n              />\n            </svg>\n          </li>\n        </ol>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/steps/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div>\n      <h2 class=\"sr-only\">Steps</h2>\n\n      <div>\n        <ol\n          class=\"grid grid-cols-1 divide-x divide-gray-100 overflow-hidden rounded-lg border border-gray-100 text-sm text-gray-600 sm:grid-cols-3 dark:divide-gray-700 dark:border-gray-700 dark:text-gray-300\"\n        >\n          <li class=\"flex items-center justify-center gap-2 p-4\">\n            <svg\n              class=\"size-7 shrink-0\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2\"\n              />\n            </svg>\n\n            <p class=\"leading-none\">\n              <strong class=\"block font-medium text-gray-900 dark:text-white\"> Details </strong>\n\n              <small class=\"mt-1\"> Some info about you. </small>\n            </p>\n          </li>\n\n          <li\n            class=\"relative flex items-center justify-center gap-2 bg-gray-50 p-4 dark:bg-gray-800\"\n          >\n            <span\n              class=\"absolute top-1/2 -left-2 hidden size-4 -translate-y-1/2 rotate-45 border border-gray-100 sm:block ltr:border-s-0 ltr:border-b-0 ltr:bg-white rtl:border-e-0 rtl:border-t-0 rtl:bg-gray-50 dark:border-gray-700 dark:ltr:bg-gray-900 dark:rtl:bg-gray-800\"\n            >\n            </span>\n\n            <span\n              class=\"absolute top-1/2 -right-2 hidden size-4 -translate-y-1/2 rotate-45 border border-gray-100 sm:block ltr:border-s-0 ltr:border-b-0 ltr:bg-gray-50 rtl:border-e-0 rtl:border-t-0 rtl:bg-white dark:border-gray-700 dark:ltr:bg-gray-800 dark:rtl:bg-gray-900\"\n            >\n            </span>\n\n            <svg\n              class=\"size-7 shrink-0\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n              />\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n              />\n            </svg>\n\n            <p class=\"leading-none\">\n              <strong class=\"block font-medium text-gray-900 dark:text-white\"> Address </strong>\n\n              <small class=\"mt-1\"> Where we sending it? </small>\n            </p>\n          </li>\n\n          <li class=\"flex items-center justify-center gap-2 p-4\">\n            <svg\n              class=\"size-7 shrink-0\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n              />\n            </svg>\n\n            <p class=\"leading-none\">\n              <strong class=\"block font-medium text-gray-900 dark:text-white\"> Payment </strong>\n\n              <small class=\"mt-1\"> Show us the money. </small>\n            </p>\n          </li>\n        </ol>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/steps/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div>\n      <h2 class=\"sr-only\">Steps</h2>\n\n      <div>\n        <ol\n          class=\"grid grid-cols-1 divide-x divide-gray-100 overflow-hidden rounded-lg border border-gray-100 text-sm text-gray-600 sm:grid-cols-3\"\n        >\n          <li class=\"flex items-center justify-center gap-2 p-4\">\n            <svg\n              class=\"size-7 shrink-0\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2\"\n              />\n            </svg>\n\n            <p class=\"leading-none\">\n              <strong class=\"block font-medium text-gray-900\"> Details </strong>\n\n              <small class=\"mt-1\"> Some info about you. </small>\n            </p>\n          </li>\n\n          <li class=\"relative flex items-center justify-center gap-2 bg-gray-50 p-4\">\n            <span\n              class=\"absolute top-1/2 -left-2 hidden size-4 -translate-y-1/2 rotate-45 border border-gray-100 sm:block ltr:border-s-0 ltr:border-b-0 ltr:bg-white rtl:border-e-0 rtl:border-t-0 rtl:bg-gray-50\"\n            >\n            </span>\n\n            <span\n              class=\"absolute top-1/2 -right-2 hidden size-4 -translate-y-1/2 rotate-45 border border-gray-100 sm:block ltr:border-s-0 ltr:border-b-0 ltr:bg-gray-50 rtl:border-e-0 rtl:border-t-0 rtl:bg-white\"\n            >\n            </span>\n\n            <svg\n              class=\"size-7 shrink-0\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n              />\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n              />\n            </svg>\n\n            <p class=\"leading-none\">\n              <strong class=\"block font-medium text-gray-900\"> Address </strong>\n\n              <small class=\"mt-1\"> Where we sending it? </small>\n            </p>\n          </li>\n\n          <li class=\"flex items-center justify-center gap-2 p-4\">\n            <svg\n              class=\"size-7 shrink-0\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n              />\n            </svg>\n\n            <p class=\"leading-none\">\n              <strong class=\"block font-medium text-gray-900\"> Payment </strong>\n\n              <small class=\"mt-1\"> Show us the money. </small>\n            </p>\n          </li>\n        </ol>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/steps/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div>\n      <h2 class=\"sr-only\">Steps</h2>\n\n      <div\n        class=\"relative after:absolute after:inset-x-0 after:top-1/2 after:block after:h-0.5 after:-translate-y-1/2 after:rounded-lg after:bg-gray-200 dark:after:bg-gray-700\"\n      >\n        <ol\n          class=\"relative z-10 flex justify-between text-sm font-medium text-gray-600 dark:text-gray-300\"\n        >\n          <li class=\"flex items-center gap-2 bg-white p-2 dark:bg-gray-900\">\n            <span\n              class=\"size-6 rounded-full bg-gray-100 text-center text-[10px]/6 font-bold dark:bg-gray-800\"\n            >\n              1\n            </span>\n\n            <span class=\"hidden sm:block\"> Details </span>\n          </li>\n\n          <li class=\"flex items-center gap-2 bg-white p-2 dark:bg-gray-900\">\n            <span\n              class=\"size-6 rounded-full bg-blue-500 text-center text-[10px]/6 font-bold text-white\"\n            >\n              2\n            </span>\n\n            <span class=\"hidden sm:block\"> Address </span>\n          </li>\n\n          <li class=\"flex items-center gap-2 bg-white p-2 dark:bg-gray-900\">\n            <span\n              class=\"size-6 rounded-full bg-gray-100 text-center text-[10px]/6 font-bold dark:bg-gray-800\"\n            >\n              3\n            </span>\n\n            <span class=\"hidden sm:block\"> Payment </span>\n          </li>\n        </ol>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/steps/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div>\n      <h2 class=\"sr-only\">Steps</h2>\n\n      <div\n        class=\"relative after:absolute after:inset-x-0 after:top-1/2 after:block after:h-0.5 after:-translate-y-1/2 after:rounded-lg after:bg-gray-200\"\n      >\n        <ol class=\"relative z-10 flex justify-between text-sm font-medium text-gray-600\">\n          <li class=\"flex items-center gap-2 bg-white p-2\">\n            <span class=\"size-6 rounded-full bg-gray-100 text-center text-[10px]/6 font-bold\">\n              1\n            </span>\n\n            <span class=\"hidden sm:block\"> Details </span>\n          </li>\n\n          <li class=\"flex items-center gap-2 bg-white p-2\">\n            <span\n              class=\"size-6 rounded-full bg-blue-500 text-center text-[10px]/6 font-bold text-white\"\n            >\n              2\n            </span>\n\n            <span class=\"hidden sm:block\"> Address </span>\n          </li>\n\n          <li class=\"flex items-center gap-2 bg-white p-2\">\n            <span class=\"size-6 rounded-full bg-gray-100 text-center text-[10px]/6 font-bold\">\n              3\n            </span>\n\n            <span class=\"hidden sm:block\"> Payment </span>\n          </li>\n        </ol>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tables/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"overflow-x-auto\">\n      <table class=\"min-w-full divide-y-2 divide-gray-200 dark:divide-gray-700\">\n        <thead class=\"ltr:text-left rtl:text-right\">\n          <tr class=\"*:font-medium *:text-gray-900 dark:*:text-white\">\n            <th class=\"px-3 py-2 whitespace-nowrap\">Name</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">DoB</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Role</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Salary</th>\n          </tr>\n        </thead>\n\n        <tbody class=\"divide-y divide-gray-200 dark:divide-gray-700\">\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nandor the Relentless</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">04/06/1262</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Warrior</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Laszlo Cravensworth</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">19/10/1678</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Gentleman</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nadja</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">15/03/1593</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Seductress</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Colin Robinson</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">01/09/1971</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Energy Vampire</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$53,000</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Guillermo de la Cruz</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">18/11/1991</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Familiar/Vampire Hunter</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tables/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"overflow-x-auto\">\n      <table class=\"min-w-full divide-y-2 divide-gray-200\">\n        <thead class=\"ltr:text-left rtl:text-right\">\n          <tr class=\"*:font-medium *:text-gray-900\">\n            <th class=\"px-3 py-2 whitespace-nowrap\">Name</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">DoB</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Role</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Salary</th>\n          </tr>\n        </thead>\n\n        <tbody class=\"divide-y divide-gray-200\">\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nandor the Relentless</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">04/06/1262</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Warrior</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Laszlo Cravensworth</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">19/10/1678</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Gentleman</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nadja</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">15/03/1593</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Seductress</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Colin Robinson</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">01/09/1971</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Energy Vampire</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$53,000</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Guillermo de la Cruz</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">18/11/1991</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Familiar/Vampire Hunter</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tables/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"overflow-x-auto rounded border border-gray-300 shadow-sm dark:border-gray-600\">\n      <table class=\"min-w-full divide-y-2 divide-gray-200 dark:divide-gray-700\">\n        <thead class=\"ltr:text-left rtl:text-right\">\n          <tr class=\"*:font-medium *:text-gray-900 dark:*:text-white\">\n            <th class=\"px-3 py-2 whitespace-nowrap\">Name</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">DoB</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Role</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Salary</th>\n          </tr>\n        </thead>\n\n        <tbody class=\"divide-y divide-gray-200 dark:divide-gray-700\">\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nandor the Relentless</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">04/06/1262</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Warrior</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Laszlo Cravensworth</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">19/10/1678</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Gentleman</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nadja</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">15/03/1593</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Seductress</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Colin Robinson</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">01/09/1971</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Energy Vampire</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$53,000</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Guillermo de la Cruz</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">18/11/1991</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Familiar/Vampire Hunter</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tables/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"overflow-x-auto rounded border border-gray-300 shadow-sm\">\n      <table class=\"min-w-full divide-y-2 divide-gray-200\">\n        <thead class=\"ltr:text-left rtl:text-right\">\n          <tr class=\"*:font-medium *:text-gray-900\">\n            <th class=\"px-3 py-2 whitespace-nowrap\">Name</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">DoB</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Role</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Salary</th>\n          </tr>\n        </thead>\n\n        <tbody class=\"divide-y divide-gray-200\">\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nandor the Relentless</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">04/06/1262</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Warrior</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Laszlo Cravensworth</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">19/10/1678</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Gentleman</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nadja</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">15/03/1593</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Seductress</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Colin Robinson</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">01/09/1971</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Energy Vampire</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$53,000</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Guillermo de la Cruz</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">18/11/1991</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Familiar/Vampire Hunter</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tables/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"overflow-x-auto\">\n      <table class=\"min-w-full divide-y-2 divide-gray-200 dark:divide-gray-700\">\n        <thead class=\"ltr:text-left rtl:text-right\">\n          <tr class=\"*:font-medium *:text-gray-900 dark:*:text-white\">\n            <th class=\"px-3 py-2 whitespace-nowrap\">Name</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">DoB</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Role</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Salary</th>\n          </tr>\n        </thead>\n\n        <tbody\n          class=\"divide-y divide-gray-200 *:even:bg-gray-50 dark:divide-gray-700 dark:*:even:bg-gray-800\"\n        >\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nandor the Relentless</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">04/06/1262</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Warrior</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Laszlo Cravensworth</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">19/10/1678</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Gentleman</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nadja</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">15/03/1593</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Seductress</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Colin Robinson</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">01/09/1971</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Energy Vampire</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$53,000</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Guillermo de la Cruz</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">18/11/1991</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Familiar/Vampire Hunter</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tables/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"overflow-x-auto\">\n      <table class=\"min-w-full divide-y-2 divide-gray-200\">\n        <thead class=\"ltr:text-left rtl:text-right\">\n          <tr class=\"*:font-medium *:text-gray-900\">\n            <th class=\"px-3 py-2 whitespace-nowrap\">Name</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">DoB</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Role</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Salary</th>\n          </tr>\n        </thead>\n\n        <tbody class=\"divide-y divide-gray-200 *:even:bg-gray-50\">\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nandor the Relentless</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">04/06/1262</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Warrior</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Laszlo Cravensworth</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">19/10/1678</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Gentleman</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nadja</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">15/03/1593</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Seductress</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Colin Robinson</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">01/09/1971</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Energy Vampire</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$53,000</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Guillermo de la Cruz</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">18/11/1991</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Familiar/Vampire Hunter</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tables/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"max-h-46 overflow-x-auto\">\n      <table class=\"min-w-full divide-y-2 divide-gray-200 dark:divide-gray-700\">\n        <thead class=\"sticky top-0 bg-white ltr:text-left rtl:text-right dark:bg-gray-900\">\n          <tr class=\"*:font-medium *:text-gray-900 dark:*:text-white\">\n            <th class=\"px-3 py-2 whitespace-nowrap\">Name</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">DoB</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Role</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Salary</th>\n          </tr>\n        </thead>\n\n        <tbody class=\"divide-y divide-gray-200 dark:divide-gray-700\">\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nandor the Relentless</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">04/06/1262</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Warrior</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Laszlo Cravensworth</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">19/10/1678</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Gentleman</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nadja</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">15/03/1593</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Seductress</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Colin Robinson</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">01/09/1971</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Energy Vampire</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$53,000</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium dark:*:text-white\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Guillermo de la Cruz</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">18/11/1991</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Familiar/Vampire Hunter</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tables/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"max-h-46 overflow-x-auto\">\n      <table class=\"min-w-full divide-y-2 divide-gray-200\">\n        <thead class=\"sticky top-0 bg-white ltr:text-left rtl:text-right\">\n          <tr class=\"*:font-medium *:text-gray-900\">\n            <th class=\"px-3 py-2 whitespace-nowrap\">Name</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">DoB</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Role</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Salary</th>\n          </tr>\n        </thead>\n\n        <tbody class=\"divide-y divide-gray-200\">\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nandor the Relentless</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">04/06/1262</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Warrior</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Laszlo Cravensworth</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">19/10/1678</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Gentleman</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nadja</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">15/03/1593</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Seductress</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Colin Robinson</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">01/09/1971</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Energy Vampire</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$53,000</td>\n          </tr>\n\n          <tr class=\"*:text-gray-900 *:first:font-medium\">\n            <td class=\"px-3 py-2 whitespace-nowrap\">Guillermo de la Cruz</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">18/11/1991</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Familiar/Vampire Hunter</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tables/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"overflow-x-auto\">\n      <table class=\"min-w-full divide-y-2 divide-gray-200 dark:divide-gray-700\">\n        <thead class=\"ltr:text-left rtl:text-right\">\n          <tr\n            class=\"*:font-medium *:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white dark:*:text-white dark:*:first:bg-gray-900\"\n          >\n            <th class=\"px-3 py-2 whitespace-nowrap\">Name</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">DoB</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Role</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Salary</th>\n          </tr>\n        </thead>\n\n        <tbody class=\"divide-y divide-gray-200 dark:divide-gray-700\">\n          <tr\n            class=\"*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium dark:*:text-white dark:*:first:bg-gray-900\"\n          >\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nandor the Relentless</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">04/06/1262</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Warrior</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr\n            class=\"*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium dark:*:text-white dark:*:first:bg-gray-900\"\n          >\n            <td class=\"px-3 py-2 whitespace-nowrap\">Laszlo Cravensworth</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">19/10/1678</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Gentleman</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr\n            class=\"*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium dark:*:text-white dark:*:first:bg-gray-900\"\n          >\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nadja</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">15/03/1593</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Seductress</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr\n            class=\"*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium dark:*:text-white dark:*:first:bg-gray-900\"\n          >\n            <td class=\"px-3 py-2 whitespace-nowrap\">Colin Robinson</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">01/09/1971</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Energy Vampire</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$53,000</td>\n          </tr>\n\n          <tr\n            class=\"*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium dark:*:text-white dark:*:first:bg-gray-900\"\n          >\n            <td class=\"px-3 py-2 whitespace-nowrap\">Guillermo de la Cruz</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">18/11/1991</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Familiar/Vampire Hunter</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tables/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"overflow-x-auto\">\n      <table class=\"min-w-full divide-y-2 divide-gray-200\">\n        <thead class=\"ltr:text-left rtl:text-right\">\n          <tr class=\"*:font-medium *:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white\">\n            <th class=\"px-3 py-2 whitespace-nowrap\">Name</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">DoB</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Role</th>\n            <th class=\"px-3 py-2 whitespace-nowrap\">Salary</th>\n          </tr>\n        </thead>\n\n        <tbody class=\"divide-y divide-gray-200\">\n          <tr\n            class=\"*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium\"\n          >\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nandor the Relentless</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">04/06/1262</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Warrior</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr\n            class=\"*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium\"\n          >\n            <td class=\"px-3 py-2 whitespace-nowrap\">Laszlo Cravensworth</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">19/10/1678</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Gentleman</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr\n            class=\"*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium\"\n          >\n            <td class=\"px-3 py-2 whitespace-nowrap\">Nadja</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">15/03/1593</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Vampire Seductress</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n\n          <tr\n            class=\"*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium\"\n          >\n            <td class=\"px-3 py-2 whitespace-nowrap\">Colin Robinson</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">01/09/1971</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Energy Vampire</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$53,000</td>\n          </tr>\n\n          <tr\n            class=\"*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium\"\n          >\n            <td class=\"px-3 py-2 whitespace-nowrap\">Guillermo de la Cruz</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">18/11/1991</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">Familiar/Vampire Hunter</td>\n            <td class=\"px-3 py-2 whitespace-nowrap\">$0</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tabs/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"-mb-px border-b border-gray-200 dark:border-gray-700\">\n      <div role=\"tablist\" class=\"flex gap-1\">\n        <button\n          role=\"tab\"\n          aria-selected=\"true\"\n          class=\"border-b-2 border-blue-600 px-4 py-2 text-sm font-medium text-blue-600 transition-colors hover:text-blue-700 dark:hover:text-blue-500\"\n        >\n          Profile\n        </button>\n\n        <button\n          role=\"tab\"\n          aria-selected=\"false\"\n          class=\"border-b-2 border-transparent px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200\"\n        >\n          Account\n        </button>\n\n        <button\n          role=\"tab\"\n          aria-selected=\"false\"\n          class=\"border-b-2 border-transparent px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200\"\n        >\n          Notifications\n        </button>\n      </div>\n    </div>\n\n    <div role=\"tabpanel\" class=\"mt-4\">\n      <p class=\"text-gray-700 dark:text-gray-200\">\n        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic dicta\n        quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste odio\n        consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos, temporibus\n        perspiciatis!\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tabs/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"-mb-px border-b border-gray-200\">\n      <div role=\"tablist\" class=\"flex gap-1\">\n        <button\n          role=\"tab\"\n          aria-selected=\"true\"\n          class=\"border-b-2 border-blue-600 px-4 py-2 text-sm font-medium text-blue-600 transition-colors hover:text-blue-700\"\n        >\n          Profile\n        </button>\n\n        <button\n          role=\"tab\"\n          aria-selected=\"false\"\n          class=\"border-b-2 border-transparent px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-700\"\n        >\n          Account\n        </button>\n\n        <button\n          role=\"tab\"\n          aria-selected=\"false\"\n          class=\"border-b-2 border-transparent px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-700\"\n        >\n          Notifications\n        </button>\n      </div>\n    </div>\n\n    <div role=\"tabpanel\" class=\"mt-4\">\n      <p class=\"text-gray-700\">\n        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic dicta\n        quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste odio\n        consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos, temporibus\n        perspiciatis!\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tabs/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"border-b border-gray-200 dark:border-gray-700\">\n      <div role=\"tablist\" class=\"-mb-px flex gap-4\">\n        <button\n          role=\"tab\"\n          aria-selected=\"true\"\n          class=\"flex items-center gap-2 border-b-2 border-blue-600 px-4 py-2 text-sm font-medium text-blue-600 transition-colors hover:text-blue-700 dark:hover:text-blue-500\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 1114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z\"\n            />\n          </svg>\n\n          Profile\n        </button>\n\n        <button\n          role=\"tab\"\n          aria-selected=\"false\"\n          class=\"flex items-center gap-2 border-b-2 border-transparent px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.041.147.083.22.127.324.196.72.257 1.076.124l1.217-.456a1.125 1.125 0 011.37.49l.772 1.341a1.125 1.125 0 01-.12 1.386l-.949.823c-.254.243-.373.645-.206 1.008.084.258.116.52.116.785 0 .26-.032.52-.116.785-.167.363-.048.765.206 1.008l.949.823a1.125 1.125 0 01.12 1.386l-.772 1.341a1.125 1.125 0 01-1.37.49l-1.217-.456c-.356-.133-.75-.072-1.076.124a6.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-.772-1.341a1.125 1.125 0 01.12-1.386l.949-.823c.253-.243.373-.645.206-1.008a6.591 6.591 0 01-.116-.785c0-.26.032-.52.116-.785.167-.363.048-.765-.206-1.008l-.949-.823a1.125 1.125 0 01-.12-1.386l.772-1.341a1.125 1.125 0 011.37-.49l1.217.456c.356.133.751.072 1.076-.124.072-.044.145-.087.22-.128.332-.183.582-.495.644-.869l.213-1.281z\"\n            />\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\n            />\n          </svg>\n\n          Settings\n        </button>\n\n        <button\n          role=\"tab\"\n          aria-selected=\"false\"\n          class=\"flex items-center gap-2 border-b-2 border-transparent px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\"\n            />\n          </svg>\n\n          Alerts\n        </button>\n      </div>\n    </div>\n\n    <div role=\"tabpanel\" class=\"mt-4\">\n      <p class=\"text-gray-700 dark:text-gray-200\">\n        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic dicta\n        quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste odio\n        consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos, temporibus\n        perspiciatis!\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tabs/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"border-b border-gray-200\">\n      <div role=\"tablist\" class=\"-mb-px flex gap-4\">\n        <button\n          role=\"tab\"\n          aria-selected=\"true\"\n          class=\"flex items-center gap-2 border-b-2 border-blue-600 px-4 py-2 text-sm font-medium text-blue-600 transition-colors hover:text-blue-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 1114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z\"\n            />\n          </svg>\n\n          Profile\n        </button>\n\n        <button\n          role=\"tab\"\n          aria-selected=\"false\"\n          class=\"flex items-center gap-2 border-b-2 border-transparent px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.041.147.083.22.127.324.196.72.257 1.076.124l1.217-.456a1.125 1.125 0 011.37.49l.772 1.341a1.125 1.125 0 01-.12 1.386l-.949.823c-.254.243-.373.645-.206 1.008.084.258.116.52.116.785 0 .26-.032.52-.116.785-.167.363-.048.765.206 1.008l.949.823a1.125 1.125 0 01.12 1.386l-.772 1.341a1.125 1.125 0 01-1.37.49l-1.217-.456c-.356-.133-.75-.072-1.076.124a6.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-.772-1.341a1.125 1.125 0 01.12-1.386l.949-.823c.253-.243.373-.645.206-1.008a6.591 6.591 0 01-.116-.785c0-.26.032-.52.116-.785.167-.363.048-.765-.206-1.008l-.949-.823a1.125 1.125 0 01-.12-1.386l.772-1.341a1.125 1.125 0 011.37-.49l1.217.456c.356.133.751.072 1.076-.124.072-.044.145-.087.22-.128.332-.183.582-.495.644-.869l.213-1.281z\"\n            />\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\n            />\n          </svg>\n\n          Settings\n        </button>\n\n        <button\n          role=\"tab\"\n          aria-selected=\"false\"\n          class=\"flex items-center gap-2 border-b-2 border-transparent px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\"\n            />\n          </svg>\n\n          Alerts\n        </button>\n      </div>\n    </div>\n\n    <div role=\"tabpanel\" class=\"mt-4\">\n      <p class=\"text-gray-700\">\n        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic dicta\n        quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste odio\n        consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos, temporibus\n        perspiciatis!\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tabs/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"flex gap-4\">\n      <div class=\"border-r border-gray-200 dark:border-gray-700\">\n        <div role=\"tablist\" class=\"-me-px flex flex-col gap-1\">\n          <button\n            role=\"tab\"\n            aria-selected=\"true\"\n            class=\"border-r-2 border-blue-600 px-4 py-2 text-left text-sm font-medium text-blue-600 transition-colors hover:text-blue-700 dark:hover:text-blue-500\"\n          >\n            General\n          </button>\n\n          <button\n            role=\"tab\"\n            aria-selected=\"false\"\n            class=\"border-r-2 border-transparent px-4 py-2 text-left text-sm font-medium text-gray-600 transition-colors hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200\"\n          >\n            Privacy\n          </button>\n\n          <button\n            role=\"tab\"\n            aria-selected=\"false\"\n            class=\"border-r-2 border-transparent px-4 py-2 text-left text-sm font-medium text-gray-600 transition-colors hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200\"\n          >\n            Security\n          </button>\n        </div>\n      </div>\n\n      <div role=\"tabpanel\" class=\"flex-1\">\n        <p class=\"text-gray-700 dark:text-gray-200\">\n          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n          dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n          odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n          temporibus perspiciatis!\n        </p>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tabs/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"flex gap-4\">\n      <div class=\"border-r border-gray-200\">\n        <div role=\"tablist\" class=\"-me-px flex flex-col gap-1\">\n          <button\n            role=\"tab\"\n            aria-selected=\"true\"\n            class=\"border-r-2 border-blue-600 px-4 py-2 text-left text-sm font-medium text-blue-600 transition-colors hover:text-blue-700\"\n          >\n            General\n          </button>\n\n          <button\n            role=\"tab\"\n            aria-selected=\"false\"\n            class=\"border-r-2 border-transparent px-4 py-2 text-left text-sm font-medium text-gray-600 transition-colors hover:text-gray-700\"\n          >\n            Privacy\n          </button>\n\n          <button\n            role=\"tab\"\n            aria-selected=\"false\"\n            class=\"border-r-2 border-transparent px-4 py-2 text-left text-sm font-medium text-gray-600 transition-colors hover:text-gray-700\"\n          >\n            Security\n          </button>\n        </div>\n      </div>\n\n      <div role=\"tabpanel\" class=\"flex-1\">\n        <p class=\"text-gray-700\">\n          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n          dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n          odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n          temporibus perspiciatis!\n        </p>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tabs/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div role=\"tablist\" class=\"flex gap-2\">\n      <button\n        role=\"tab\"\n        aria-selected=\"true\"\n        class=\"border-b-2 border-blue-600 px-4 py-2 text-sm font-medium text-blue-600 transition-colors hover:text-blue-700 dark:hover:text-blue-500\"\n      >\n        Overview\n      </button>\n\n      <button\n        role=\"tab\"\n        aria-selected=\"false\"\n        class=\"border-b-2 border-transparent px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200\"\n      >\n        Analytics\n      </button>\n\n      <button\n        role=\"tab\"\n        aria-selected=\"false\"\n        class=\"border-b-2 border-transparent px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200\"\n      >\n        Reports\n      </button>\n    </div>\n\n    <div role=\"tabpanel\" class=\"mt-4\">\n      <p class=\"text-gray-700 dark:text-gray-200\">\n        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic dicta\n        quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste odio\n        consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos, temporibus\n        perspiciatis!\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tabs/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div role=\"tablist\" class=\"flex gap-2\">\n      <button\n        role=\"tab\"\n        aria-selected=\"true\"\n        class=\"border-b-2 border-blue-600 px-4 py-2 text-sm font-medium text-blue-600 transition-colors hover:text-blue-700\"\n      >\n        Overview\n      </button>\n\n      <button\n        role=\"tab\"\n        aria-selected=\"false\"\n        class=\"border-b-2 border-transparent px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-700\"\n      >\n        Analytics\n      </button>\n\n      <button\n        role=\"tab\"\n        aria-selected=\"false\"\n        class=\"border-b-2 border-transparent px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-700\"\n      >\n        Reports\n      </button>\n    </div>\n\n    <div role=\"tabpanel\" class=\"mt-4\">\n      <p class=\"text-gray-700\">\n        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic dicta\n        quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste odio\n        consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos, temporibus\n        perspiciatis!\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tabs/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div role=\"tablist\" class=\"flex gap-2\">\n      <button\n        role=\"tab\"\n        aria-selected=\"true\"\n        class=\"rounded-full bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700\"\n      >\n        Featured\n      </button>\n\n      <button\n        role=\"tab\"\n        aria-selected=\"false\"\n        class=\"rounded-full bg-gray-200 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600\"\n      >\n        Popular\n      </button>\n\n      <button\n        role=\"tab\"\n        aria-selected=\"false\"\n        class=\"rounded-full bg-gray-200 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600\"\n      >\n        Trending\n      </button>\n    </div>\n\n    <div role=\"tabpanel\" class=\"mt-4\">\n      <p class=\"text-gray-700 dark:text-gray-200\">\n        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic dicta\n        quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste odio\n        consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos, temporibus\n        perspiciatis!\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/tabs/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div role=\"tablist\" class=\"flex gap-2\">\n      <button\n        role=\"tab\"\n        aria-selected=\"true\"\n        class=\"rounded-full bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700\"\n      >\n        Featured\n      </button>\n\n      <button\n        role=\"tab\"\n        aria-selected=\"false\"\n        class=\"rounded-full bg-gray-200 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-300\"\n      >\n        Popular\n      </button>\n\n      <button\n        role=\"tab\"\n        aria-selected=\"false\"\n        class=\"rounded-full bg-gray-200 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-300\"\n      >\n        Trending\n      </button>\n    </div>\n\n    <div role=\"tabpanel\" class=\"mt-4\">\n      <p class=\"text-gray-700\">\n        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic dicta\n        quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste odio\n        consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos, temporibus\n        perspiciatis!\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/textareas/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <label for=\"Notes\">\n      <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\"> Notes </span>\n\n      <textarea\n        id=\"Notes\"\n        class=\"mt-0.5 w-full resize-none rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n        rows=\"4\"\n      ></textarea>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/textareas/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <label for=\"Notes\">\n      <span class=\"text-sm font-medium text-gray-700\"> Notes </span>\n\n      <textarea\n        id=\"Notes\"\n        class=\"mt-0.5 w-full resize-none rounded border-gray-300 shadow-sm sm:text-sm\"\n        rows=\"4\"\n      ></textarea>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/textareas/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <div>\n      <label for=\"Notes\">\n        <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\"> Notes </span>\n\n        <div\n          class=\"relative mt-0.5 overflow-hidden rounded border border-gray-300 shadow-sm focus-within:ring focus-within:ring-blue-600 dark:border-gray-600\"\n        >\n          <textarea\n            id=\"Notes\"\n            class=\"w-full resize-none border-none focus:ring-0 sm:text-sm dark:bg-gray-900 dark:text-white\"\n            rows=\"4\"\n          ></textarea>\n\n          <div class=\"flex items-center justify-end gap-2 p-1.5\">\n            <button\n              type=\"button\"\n              class=\"rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white\"\n            >\n              Clear\n            </button>\n\n            <button\n              type=\"button\"\n              class=\"rounded border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900 shadow-sm transition-colors hover:bg-gray-100 dark:border-gray-600 dark:text-white dark:hover:bg-gray-700\"\n            >\n              Save\n            </button>\n          </div>\n        </div>\n      </label>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/textareas/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <div>\n      <label for=\"Notes\">\n        <span class=\"text-sm font-medium text-gray-700\"> Notes </span>\n\n        <div\n          class=\"relative mt-0.5 overflow-hidden rounded border border-gray-300 shadow-sm focus-within:ring focus-within:ring-blue-600\"\n        >\n          <textarea\n            id=\"Notes\"\n            class=\"w-full resize-none border-none focus:ring-0 sm:text-sm\"\n            rows=\"4\"\n          ></textarea>\n\n          <div class=\"flex items-center justify-end gap-2 p-1.5\">\n            <button\n              type=\"button\"\n              class=\"rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900\"\n            >\n              Clear\n            </button>\n\n            <button\n              type=\"button\"\n              class=\"rounded border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900 shadow-sm transition-colors hover:bg-gray-100\"\n            >\n              Save\n            </button>\n          </div>\n        </div>\n      </label>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/textareas/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <div>\n      <label for=\"Notes\">\n        <span class=\"text-sm font-medium text-gray-700 dark:text-gray-200\"> Notes </span>\n\n        <textarea\n          id=\"Notes\"\n          class=\"mt-0.5 w-full resize-none rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          rows=\"4\"\n        ></textarea>\n      </label>\n\n      <div class=\"mt-1.5 flex items-center justify-end gap-2\">\n        <button\n          type=\"button\"\n          class=\"rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white\"\n        >\n          Clear\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"rounded border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900 shadow-sm transition-colors hover:bg-gray-100 dark:border-gray-600 dark:text-white dark:hover:bg-gray-700\"\n        >\n          Save\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/textareas/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <div>\n      <label for=\"Notes\">\n        <span class=\"text-sm font-medium text-gray-700\"> Notes </span>\n\n        <textarea\n          id=\"Notes\"\n          class=\"mt-0.5 w-full resize-none rounded border-gray-300 shadow-sm sm:text-sm\"\n          rows=\"4\"\n        ></textarea>\n      </label>\n\n      <div class=\"mt-1.5 flex items-center justify-end gap-2\">\n        <button\n          type=\"button\"\n          class=\"rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900\"\n        >\n          Clear\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"rounded border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900 shadow-sm transition-colors hover:bg-gray-100\"\n        >\n          Save\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/timelines/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-xl p-6\">\n    <ol\n      class=\"relative space-y-8 before:absolute before:-ms-px before:h-full before:w-0.5 before:rounded-full before:bg-gray-200 dark:before:bg-gray-700\"\n    >\n      <li class=\"relative -ms-1.5 flex items-start gap-4\">\n        <span class=\"size-3 shrink-0 rounded-full bg-blue-600\"></span>\n\n        <div class=\"-mt-2\">\n          <time class=\"text-xs/none font-medium text-gray-700 dark:text-gray-200\">12/02/2025</time>\n\n          <h3 class=\"text-lg font-bold text-gray-900 dark:text-white\">Kickoff</h3>\n\n          <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n            adipisci tenetur sunt quae exercitationem sed pariatur porro!\n          </p>\n        </div>\n      </li>\n\n      <li class=\"relative -ms-1.5 flex items-start gap-4\">\n        <span class=\"size-3 shrink-0 rounded-full bg-blue-600\"></span>\n\n        <div class=\"-mt-2\">\n          <time class=\"text-xs/none font-medium text-gray-700 dark:text-gray-200\">15/03/2025</time>\n\n          <h3 class=\"text-lg font-bold text-gray-900 dark:text-white\">First Milestone</h3>\n\n          <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n            adipisci tenetur sunt quae exercitationem sed pariatur porro!\n          </p>\n        </div>\n      </li>\n\n      <li class=\"relative -ms-1.5 flex items-start gap-4\">\n        <span class=\"size-3 shrink-0 rounded-full bg-blue-600\"></span>\n\n        <div class=\"-mt-2\">\n          <time class=\"text-xs/none font-medium text-gray-700 dark:text-gray-200\">24/04/2025</time>\n\n          <h3 class=\"text-lg font-bold text-gray-900 dark:text-white\">Launch</h3>\n\n          <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n            adipisci tenetur sunt quae exercitationem sed pariatur porro!\n          </p>\n        </div>\n      </li>\n    </ol>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/timelines/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-xl p-6\">\n    <ol\n      class=\"relative space-y-8 before:absolute before:-ms-px before:h-full before:w-0.5 before:rounded-full before:bg-gray-200\"\n    >\n      <li class=\"relative -ms-1.5 flex items-start gap-4\">\n        <span class=\"size-3 shrink-0 rounded-full bg-blue-600\"></span>\n\n        <div class=\"-mt-2\">\n          <time class=\"text-xs/none font-medium text-gray-700\">12/02/2025</time>\n\n          <h3 class=\"text-lg font-bold text-gray-900\">Kickoff</h3>\n\n          <p class=\"mt-0.5 text-sm text-gray-700\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n            adipisci tenetur sunt quae exercitationem sed pariatur porro!\n          </p>\n        </div>\n      </li>\n\n      <li class=\"relative -ms-1.5 flex items-start gap-4\">\n        <span class=\"size-3 shrink-0 rounded-full bg-blue-600\"></span>\n\n        <div class=\"-mt-2\">\n          <time class=\"text-xs/none font-medium text-gray-700\">15/03/2025</time>\n\n          <h3 class=\"text-lg font-bold text-gray-900\">First Milestone</h3>\n\n          <p class=\"mt-0.5 text-sm text-gray-700\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n            adipisci tenetur sunt quae exercitationem sed pariatur porro!\n          </p>\n        </div>\n      </li>\n\n      <li class=\"relative -ms-1.5 flex items-start gap-4\">\n        <span class=\"size-3 shrink-0 rounded-full bg-blue-600\"></span>\n\n        <div class=\"-mt-2\">\n          <time class=\"text-xs/none font-medium text-gray-700\">24/04/2025</time>\n\n          <h3 class=\"text-lg font-bold text-gray-900\">Launch</h3>\n\n          <p class=\"mt-0.5 text-sm text-gray-700\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n            adipisci tenetur sunt quae exercitationem sed pariatur porro!\n          </p>\n        </div>\n      </li>\n    </ol>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/timelines/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-xl p-6\">\n    <ol\n      class=\"relative space-y-8 before:absolute before:top-0 before:left-1/2 before:h-full before:w-0.5 before:-translate-x-1/2 before:rounded-full before:bg-gray-200 dark:before:bg-gray-700\"\n    >\n      <li class=\"group relative grid grid-cols-2 odd:-me-3 even:-ms-3\">\n        <div\n          class=\"relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last\"\n        >\n          <span class=\"size-3 shrink-0 rounded-full bg-blue-600\"></span>\n\n          <div class=\"-mt-2\">\n            <time class=\"text-xs/none font-medium text-gray-700 dark:text-gray-200\"\n              >12/02/2025</time\n            >\n\n            <h3 class=\"text-lg font-bold text-gray-900 dark:text-white\">Kickoff</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n              adipisci tenetur sunt quae exercitationem sed pariatur porro!\n            </p>\n          </div>\n        </div>\n\n        <div aria-hidden=\"true\"></div>\n      </li>\n\n      <li class=\"group relative grid grid-cols-2 odd:-me-3 even:-ms-3\">\n        <div\n          class=\"relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last\"\n        >\n          <span class=\"size-3 shrink-0 rounded-full bg-blue-600\"></span>\n\n          <div class=\"-mt-2\">\n            <time class=\"text-xs/none font-medium text-gray-700 dark:text-gray-200\">5/03/2025</time>\n\n            <h3 class=\"text-lg font-bold text-gray-900 dark:text-white\">First Milestone</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n              adipisci tenetur sunt quae exercitationem sed pariatur porro!\n            </p>\n          </div>\n        </div>\n\n        <div aria-hidden=\"true\"></div>\n      </li>\n\n      <li class=\"group relative grid grid-cols-2 odd:-me-3 even:-ms-3\">\n        <div\n          class=\"relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last\"\n        >\n          <span class=\"size-3 shrink-0 rounded-full bg-blue-600\"></span>\n\n          <div class=\"-mt-2\">\n            <time class=\"text-xs/none font-medium text-gray-700 dark:text-gray-200\"\n              >24/04/2025</time\n            >\n\n            <h3 class=\"text-lg font-bold text-gray-900 dark:text-white\">Launch</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n              adipisci tenetur sunt quae exercitationem sed pariatur porro!\n            </p>\n          </div>\n        </div>\n\n        <div aria-hidden=\"true\"></div>\n      </li>\n    </ol>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/timelines/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-xl p-6\">\n    <ol\n      class=\"relative space-y-8 before:absolute before:top-0 before:left-1/2 before:h-full before:w-0.5 before:-translate-x-1/2 before:rounded-full before:bg-gray-200\"\n    >\n      <li class=\"group relative grid grid-cols-2 odd:-me-3 even:-ms-3\">\n        <div\n          class=\"relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last\"\n        >\n          <span class=\"size-3 shrink-0 rounded-full bg-blue-600\"></span>\n\n          <div class=\"-mt-2\">\n            <time class=\"text-xs/none font-medium text-gray-700\">12/02/2025</time>\n\n            <h3 class=\"text-lg font-bold text-gray-900\">Kickoff</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n              adipisci tenetur sunt quae exercitationem sed pariatur porro!\n            </p>\n          </div>\n        </div>\n\n        <div aria-hidden=\"true\"></div>\n      </li>\n\n      <li class=\"group relative grid grid-cols-2 odd:-me-3 even:-ms-3\">\n        <div\n          class=\"relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last\"\n        >\n          <span class=\"size-3 shrink-0 rounded-full bg-blue-600\"></span>\n\n          <div class=\"-mt-2\">\n            <time class=\"text-xs/none font-medium text-gray-700\">5/03/2025</time>\n\n            <h3 class=\"text-lg font-bold text-gray-900\">First Milestone</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n              adipisci tenetur sunt quae exercitationem sed pariatur porro!\n            </p>\n          </div>\n        </div>\n\n        <div aria-hidden=\"true\"></div>\n      </li>\n\n      <li class=\"group relative grid grid-cols-2 odd:-me-3 even:-ms-3\">\n        <div\n          class=\"relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last\"\n        >\n          <span class=\"size-3 shrink-0 rounded-full bg-blue-600\"></span>\n\n          <div class=\"-mt-2\">\n            <time class=\"text-xs/none font-medium text-gray-700\">24/04/2025</time>\n\n            <h3 class=\"text-lg font-bold text-gray-900\">Launch</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n              adipisci tenetur sunt quae exercitationem sed pariatur porro!\n            </p>\n          </div>\n        </div>\n\n        <div aria-hidden=\"true\"></div>\n      </li>\n    </ol>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/timelines/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-5xl p-6\">\n    <ol\n      class=\"relative flex gap-8 before:absolute before:-mt-px before:h-0.5 before:w-full before:rounded-full before:bg-gray-200 dark:before:bg-gray-700\"\n    >\n      <li class=\"relative -mt-1.5\">\n        <span class=\"block size-3 rounded-full bg-blue-600\"></span>\n\n        <div class=\"mt-4\">\n          <time class=\"text-xs/none font-medium text-gray-700 dark:text-gray-200\">12/02/2025</time>\n\n          <h3 class=\"text-lg font-bold text-gray-900 dark:text-white\">Kickoff</h3>\n\n          <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n            adipisci tenetur sunt quae exercitationem sed pariatur porro!\n          </p>\n        </div>\n      </li>\n\n      <li class=\"relative -mt-1.5\">\n        <span class=\"block size-3 rounded-full bg-blue-600\"></span>\n\n        <div class=\"mt-4\">\n          <time class=\"text-xs/none font-medium text-gray-700 dark:text-gray-200\">15/03/2025</time>\n\n          <h3 class=\"text-lg font-bold text-gray-900 dark:text-white\">First Milestone</h3>\n\n          <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n            adipisci tenetur sunt quae exercitationem sed pariatur porro!\n          </p>\n        </div>\n      </li>\n\n      <li class=\"relative -mt-1.5\">\n        <span class=\"block size-3 rounded-full bg-blue-600\"></span>\n\n        <div class=\"mt-4\">\n          <time class=\"text-xs/none font-medium text-gray-700 dark:text-gray-200\">24/04/2025</time>\n\n          <h3 class=\"text-lg font-bold text-gray-900 dark:text-white\">Launch</h3>\n\n          <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n            adipisci tenetur sunt quae exercitationem sed pariatur porro!\n          </p>\n        </div>\n      </li>\n    </ol>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/timelines/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-5xl p-6\">\n    <ol\n      class=\"relative flex gap-8 before:absolute before:-mt-px before:h-0.5 before:w-full before:rounded-full before:bg-gray-200\"\n    >\n      <li class=\"relative -mt-1.5\">\n        <span class=\"block size-3 rounded-full bg-blue-600\"></span>\n\n        <div class=\"mt-4\">\n          <time class=\"text-xs/none font-medium text-gray-700\">12/02/2025</time>\n\n          <h3 class=\"text-lg font-bold text-gray-900\">Kickoff</h3>\n\n          <p class=\"mt-0.5 text-sm text-gray-700\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n            adipisci tenetur sunt quae exercitationem sed pariatur porro!\n          </p>\n        </div>\n      </li>\n\n      <li class=\"relative -mt-1.5\">\n        <span class=\"block size-3 rounded-full bg-blue-600\"></span>\n\n        <div class=\"mt-4\">\n          <time class=\"text-xs/none font-medium text-gray-700\">15/03/2025</time>\n\n          <h3 class=\"text-lg font-bold text-gray-900\">First Milestone</h3>\n\n          <p class=\"mt-0.5 text-sm text-gray-700\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n            adipisci tenetur sunt quae exercitationem sed pariatur porro!\n          </p>\n        </div>\n      </li>\n\n      <li class=\"relative -mt-1.5\">\n        <span class=\"block size-3 rounded-full bg-blue-600\"></span>\n\n        <div class=\"mt-4\">\n          <time class=\"text-xs/none font-medium text-gray-700\">24/04/2025</time>\n\n          <h3 class=\"text-lg font-bold text-gray-900\">Launch</h3>\n\n          <p class=\"mt-0.5 text-sm text-gray-700\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum\n            adipisci tenetur sunt quae exercitationem sed pariatur porro!\n          </p>\n        </div>\n      </li>\n    </ol>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toasts/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"ml-auto max-w-md p-6\">\n    <div\n      role=\"alert\"\n      class=\"rounded-md border border-green-500 bg-green-50 p-4 shadow-sm dark:border-green-400 dark:bg-green-800\"\n    >\n      <div class=\"flex items-start gap-4\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"-mt-0.5 size-6 text-green-700 dark:text-green-200\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n          />\n        </svg>\n\n        <div class=\"flex-1\">\n          <strong class=\"block leading-tight font-medium text-green-800 dark:text-green-100\">\n            Success\n          </strong>\n\n          <p class=\"mt-0.5 text-sm text-green-700 dark:text-green-200\">\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toasts/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"ml-auto max-w-md p-6\">\n    <div role=\"alert\" class=\"rounded-md border border-green-500 bg-green-50 p-4 shadow-sm\">\n      <div class=\"flex items-start gap-4\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"-mt-0.5 size-6 text-green-700\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n          />\n        </svg>\n\n        <div class=\"flex-1\">\n          <strong class=\"block leading-tight font-medium text-green-800\"> Success </strong>\n\n          <p class=\"mt-0.5 text-sm text-green-700\">\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toasts/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"ml-auto max-w-md p-6\">\n    <div\n      role=\"alert\"\n      class=\"rounded-md border border-red-500 bg-red-50 p-4 shadow-sm dark:border-red-400 dark:bg-red-800\"\n    >\n      <div class=\"flex items-start gap-4\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"-mt-0.5 size-6 text-red-700 dark:text-red-200\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z\"\n          />\n        </svg>\n\n        <div class=\"flex-1\">\n          <strong class=\"block leading-tight font-medium text-red-800 dark:text-red-100\">\n            Error\n          </strong>\n\n          <p class=\"mt-0.5 text-sm text-red-700 dark:text-red-200\">\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toasts/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"ml-auto max-w-md p-6\">\n    <div role=\"alert\" class=\"rounded-md border border-red-500 bg-red-50 p-4 shadow-sm\">\n      <div class=\"flex items-start gap-4\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"-mt-0.5 size-6 text-red-700\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z\"\n          />\n        </svg>\n\n        <div class=\"flex-1\">\n          <strong class=\"block leading-tight font-medium text-red-800\"> Error </strong>\n\n          <p class=\"mt-0.5 text-sm text-red-700\">\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toasts/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"ml-auto max-w-md p-6\">\n    <div\n      role=\"alert\"\n      class=\"rounded-md border border-amber-500 bg-amber-50 p-4 shadow-sm dark:border-amber-400 dark:bg-amber-800\"\n    >\n      <div class=\"flex items-start gap-4\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"-mt-0.5 size-6 text-amber-700 dark:text-amber-200\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z\"\n          />\n        </svg>\n\n        <div class=\"flex-1\">\n          <strong class=\"block leading-tight font-medium text-amber-800 dark:text-amber-100\">\n            Warning\n          </strong>\n\n          <p class=\"mt-0.5 text-sm text-amber-700 dark:text-amber-200\">\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toasts/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"ml-auto max-w-md p-6\">\n    <div role=\"alert\" class=\"rounded-md border border-amber-500 bg-amber-50 p-4 shadow-sm\">\n      <div class=\"flex items-start gap-4\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"-mt-0.5 size-6 text-amber-700\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z\"\n          />\n        </svg>\n\n        <div class=\"flex-1\">\n          <strong class=\"block leading-tight font-medium text-amber-800\"> Warning </strong>\n\n          <p class=\"mt-0.5 text-sm text-amber-700\">\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toasts/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"ml-auto max-w-md p-6\">\n    <div\n      role=\"alert\"\n      class=\"rounded-md border border-blue-500 bg-blue-50 p-4 shadow-sm dark:border-blue-400 dark:bg-blue-800\"\n    >\n      <div class=\"flex items-start gap-4\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"-mt-0.5 size-6 text-blue-700 dark:text-blue-200\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z\"\n          />\n        </svg>\n\n        <div class=\"flex-1\">\n          <strong class=\"block leading-tight font-medium text-blue-800 dark:text-blue-100\">\n            Info\n          </strong>\n\n          <p class=\"mt-0.5 text-sm text-blue-700 dark:text-blue-200\">\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toasts/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"ml-auto max-w-md p-6\">\n    <div role=\"alert\" class=\"rounded-md border border-blue-500 bg-blue-50 p-4 shadow-sm\">\n      <div class=\"flex items-start gap-4\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"-mt-0.5 size-6 text-blue-700\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z\"\n          />\n        </svg>\n\n        <div class=\"flex-1\">\n          <strong class=\"block leading-tight font-medium text-blue-800\"> Info </strong>\n\n          <p class=\"mt-0.5 text-sm text-blue-700\">\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toasts/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"ml-auto max-w-md p-6\">\n    <div\n      role=\"alert\"\n      class=\"rounded-md border border-blue-500 bg-blue-50 p-4 shadow-sm dark:border-blue-400 dark:bg-blue-800\"\n    >\n      <div class=\"flex items-start gap-4\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"-mt-0.5 size-6 text-blue-700 dark:text-blue-200\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z\"\n          />\n        </svg>\n\n        <div class=\"flex-1\">\n          <strong class=\"block leading-tight font-medium text-blue-800 dark:text-blue-100\">\n            Info\n          </strong>\n\n          <p class=\"mt-0.5 text-sm text-blue-700 dark:text-blue-200\">\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.\n          </p>\n\n          <button\n            class=\"mt-2 inline-block rounded-sm border border-blue-600 bg-blue-600 px-4 py-2 text-sm/none font-medium text-white hover:bg-transparent hover:text-blue-600 dark:border-white dark:bg-white dark:text-gray-900 dark:hover:text-white\"\n            type=\"button\"\n          >\n            Accept\n          </button>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toasts/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"ml-auto max-w-md p-6\">\n    <div role=\"alert\" class=\"rounded-md border border-blue-500 bg-blue-50 p-4 shadow-sm\">\n      <div class=\"flex items-start gap-4\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"-mt-0.5 size-6 text-blue-700\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z\"\n          />\n        </svg>\n\n        <div class=\"flex-1\">\n          <strong class=\"block leading-tight font-medium text-blue-800\"> Info </strong>\n\n          <p class=\"mt-0.5 text-sm text-blue-700\">\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.\n          </p>\n\n          <button\n            class=\"mt-2 inline-block rounded-sm border border-blue-600 bg-blue-600 px-4 py-2 text-sm/none font-medium text-white hover:bg-transparent hover:text-blue-600\"\n            type=\"button\"\n          >\n            Accept\n          </button>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toasts/6-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"ml-auto max-w-md p-6\">\n    <div\n      role=\"alert\"\n      class=\"border-s-4 border-blue-700 bg-blue-50 p-4 dark:border-blue-600 dark:bg-blue-800\"\n    >\n      <div class=\"flex items-center gap-2 text-blue-700 dark:text-blue-200\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-6\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z\"\n          />\n        </svg>\n\n        <strong class=\"block leading-tight font-medium text-blue-800 dark:text-blue-100\">\n          Info\n        </strong>\n      </div>\n\n      <p class=\"mt-1 text-sm text-blue-700 dark:text-blue-200\">\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toasts/6.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"ml-auto max-w-md p-6\">\n    <div role=\"alert\" class=\"border-s-4 border-blue-700 bg-blue-50 p-4\">\n      <div class=\"flex items-center gap-2 text-blue-700\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-6\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z\"\n          />\n        </svg>\n\n        <strong class=\"block leading-tight font-medium text-blue-800\"> Info </strong>\n      </div>\n\n      <p class=\"mt-1 text-sm text-blue-700\">\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toggles/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <label\n      for=\"AcceptConditions\"\n      class=\"relative block h-8 w-14 rounded-full bg-gray-300 transition-colors [-webkit-tap-highlight-color:transparent] has-checked:bg-green-500 dark:bg-gray-600 dark:has-checked:bg-green-600\"\n    >\n      <input type=\"checkbox\" id=\"AcceptConditions\" class=\"peer sr-only\" />\n\n      <span\n        class=\"absolute inset-y-0 start-0 m-1 size-6 rounded-full bg-white transition-[inset-inline-start] peer-checked:start-6 dark:bg-gray-900\"\n      ></span>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toggles/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <label\n      for=\"AcceptConditions\"\n      class=\"relative block h-8 w-14 rounded-full bg-gray-300 transition-colors [-webkit-tap-highlight-color:transparent] has-checked:bg-green-500\"\n    >\n      <input type=\"checkbox\" id=\"AcceptConditions\" class=\"peer sr-only\" />\n\n      <span\n        class=\"absolute inset-y-0 start-0 m-1 size-6 rounded-full bg-white transition-[inset-inline-start] peer-checked:start-6\"\n      ></span>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toggles/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <label\n      for=\"AcceptConditions\"\n      class=\"relative block h-8 w-14 rounded-full bg-gray-300 transition-colors [-webkit-tap-highlight-color:transparent] has-checked:bg-green-500 dark:bg-gray-600 dark:has-checked:bg-green-600\"\n    >\n      <input type=\"checkbox\" id=\"AcceptConditions\" class=\"peer sr-only\" />\n\n      <span\n        class=\"absolute inset-y-0 start-0 m-1 grid size-6 place-content-center rounded-full bg-white text-gray-700 transition-[inset-inline-start] peer-checked:start-6 peer-checked:*:first:hidden *:last:hidden peer-checked:*:last:block dark:bg-gray-900 dark:text-gray-200\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-4\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n        </svg>\n\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-4\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m4.5 12.75 6 6 9-13.5\" />\n        </svg>\n      </span>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toggles/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <label\n      for=\"AcceptConditions\"\n      class=\"group relative block h-8 w-14 rounded-full bg-gray-300 transition-colors [-webkit-tap-highlight-color:transparent] has-checked:bg-green-500\"\n    >\n      <input type=\"checkbox\" id=\"AcceptConditions\" class=\"peer sr-only\" />\n\n      <span\n        class=\"absolute inset-y-0 start-0 m-1 grid size-6 place-content-center rounded-full bg-white text-gray-700 transition-[inset-inline-start] peer-checked:start-6 peer-checked:*:first:hidden *:last:hidden peer-checked:*:last:block\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-4\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n        </svg>\n\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-4\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m4.5 12.75 6 6 9-13.5\" />\n        </svg>\n      </span>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toggles/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <label\n      for=\"AcceptConditions\"\n      class=\"relative block h-8 w-12 [-webkit-tap-highlight-color:transparent]\"\n    >\n      <input type=\"checkbox\" id=\"AcceptConditions\" class=\"peer sr-only\" />\n\n      <span class=\"absolute inset-0 m-auto h-2 rounded-full bg-gray-300 dark:bg-gray-600\"></span>\n\n      <span\n        class=\"absolute inset-y-0 start-0 m-auto size-6 rounded-full bg-gray-500 transition-[inset-inline-start] peer-checked:start-6 peer-checked:*:scale-0 dark:bg-gray-400\"\n      >\n        <span\n          class=\"absolute inset-0 m-auto size-4 rounded-full bg-gray-200 transition-transform dark:bg-gray-700\"\n        >\n        </span>\n      </span>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toggles/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <label\n      for=\"AcceptConditions\"\n      class=\"relative block h-8 w-12 [-webkit-tap-highlight-color:transparent]\"\n    >\n      <input type=\"checkbox\" id=\"AcceptConditions\" class=\"peer sr-only\" />\n\n      <span class=\"absolute inset-0 m-auto h-2 rounded-full bg-gray-300\"></span>\n\n      <span\n        class=\"absolute inset-y-0 start-0 m-auto size-6 rounded-full bg-gray-500 transition-[inset-inline-start] peer-checked:start-6 peer-checked:*:scale-0\"\n      >\n        <span class=\"absolute inset-0 m-auto size-4 rounded-full bg-gray-200 transition-transform\">\n        </span>\n      </span>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toggles/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <label\n      for=\"AcceptConditions\"\n      class=\"relative block h-8 w-14 rounded-full bg-gray-300 transition-colors [-webkit-tap-highlight-color:transparent] has-checked:bg-blue-500 dark:bg-gray-600 dark:has-checked:bg-blue-600\"\n    >\n      <input type=\"checkbox\" id=\"AcceptConditions\" class=\"peer sr-only\" />\n\n      <span\n        class=\"absolute inset-y-0 start-0 m-1 size-6 rounded-full bg-gray-300 ring-[6px] ring-white transition-all ring-inset peer-checked:start-8 peer-checked:w-2 peer-checked:bg-white peer-checked:ring-transparent dark:bg-gray-600 dark:ring-gray-900 dark:peer-checked:bg-gray-900\"\n      >\n      </span>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/toggles/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <label\n      for=\"AcceptConditions\"\n      class=\"relative block h-8 w-14 rounded-full bg-gray-300 transition-colors [-webkit-tap-highlight-color:transparent] has-checked:bg-blue-500\"\n    >\n      <input type=\"checkbox\" id=\"AcceptConditions\" class=\"peer sr-only\" />\n\n      <span\n        class=\"absolute inset-y-0 start-0 m-1 size-6 rounded-full bg-gray-300 ring-[6px] ring-white transition-all ring-inset peer-checked:start-8 peer-checked:w-2 peer-checked:bg-white peer-checked:ring-transparent\"\n      >\n      </span>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/vertical-menu/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <ul class=\"space-y-1\">\n      <li>\n        <a\n          href=\"#\"\n          class=\"block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n        >\n          General\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          Teams\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          Billing\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          Invoices\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          Invoices\n        </a>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/vertical-menu/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <ul class=\"space-y-1\">\n      <li>\n        <a\n          href=\"#\"\n          class=\"block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700\"\n        >\n          General\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          Teams\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          Billing\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          Invoices\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          Account\n        </a>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/vertical-menu/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <ul class=\"space-y-1\">\n      <li>\n        <a\n          href=\"#\"\n          class=\"group flex items-center justify-between rounded-lg bg-gray-100 px-4 py-2 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n        >\n          <span class=\"text-sm font-medium\"> General </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <span class=\"text-sm font-medium\"> Teams </span>\n\n          <span\n            class=\"shrink-0 rounded-full bg-gray-100 px-3 py-0.5 text-xs text-gray-600 group-hover:bg-gray-200 group-hover:text-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:group-hover:bg-gray-700 dark:group-hover:text-gray-300\"\n          >\n            5\n          </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <span class=\"text-sm font-medium\"> Billing </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <span class=\"text-sm font-medium\"> Invoices </span>\n\n          <span\n            class=\"shrink-0 rounded-full bg-gray-100 px-3 py-0.5 text-xs text-gray-600 group-hover:bg-gray-200 group-hover:text-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:group-hover:bg-gray-700 dark:group-hover:text-gray-300\"\n          >\n            3\n          </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <span class=\"text-sm font-medium\"> Account </span>\n        </a>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/vertical-menu/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <ul class=\"space-y-1\">\n      <li>\n        <a\n          href=\"#\"\n          class=\"group flex items-center justify-between rounded-lg bg-gray-100 px-4 py-2 text-gray-700\"\n        >\n          <span class=\"text-sm font-medium\"> General </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          <span class=\"text-sm font-medium\"> Teams </span>\n\n          <span\n            class=\"shrink-0 rounded-full bg-gray-100 px-3 py-0.5 text-xs text-gray-600 group-hover:bg-gray-200 group-hover:text-gray-700\"\n          >\n            5\n          </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          <span class=\"text-sm font-medium\"> Billing </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          <span class=\"text-sm font-medium\"> Invoices </span>\n\n          <span\n            class=\"shrink-0 rounded-full bg-gray-100 px-3 py-0.5 text-xs text-gray-600 group-hover:bg-gray-200 group-hover:text-gray-700\"\n          >\n            3\n          </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          <span class=\"text-sm font-medium\"> Account </span>\n        </a>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/vertical-menu/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <ul class=\"space-y-1\">\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg bg-gray-100 px-4 py-2 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"\n            />\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> General </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Teams </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Billing </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Invoices </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Account </span>\n        </a>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/vertical-menu/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <ul class=\"space-y-1\">\n      <li>\n        <a href=\"#\" class=\"flex items-center gap-2 rounded-lg bg-gray-100 px-4 py-2 text-gray-700\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"\n            />\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> General </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Teams </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Billing </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Invoices </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Account </span>\n        </a>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/vertical-menu/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <ul class=\"space-y-1\">\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg bg-gray-100 px-4 py-2 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"\n            />\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\n            />\n          </svg>\n          <span class=\"text-sm font-medium\"> General </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <div class=\"flex items-center gap-2\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-5 opacity-75\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"\n              />\n            </svg>\n\n            <span class=\"text-sm font-medium\"> Teams </span>\n          </div>\n\n          <span\n            class=\"shrink-0 rounded-full bg-gray-100 px-3 py-0.5 text-xs text-gray-600 group-hover:bg-gray-200 group-hover:text-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:group-hover:bg-gray-900 dark:group-hover:text-gray-100\"\n          >\n            5\n          </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Billing </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <div class=\"flex items-center gap-2\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-5 opacity-75\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z\"\n              />\n            </svg>\n            <span class=\"text-sm font-medium\"> Invoices </span>\n          </div>\n          <span\n            class=\"shrink-0 rounded-full bg-gray-100 px-3 py-0.5 text-xs text-gray-600 group-hover:bg-gray-200 group-hover:text-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:group-hover:bg-gray-900 dark:group-hover:text-gray-100\"\n          >\n            3\n          </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\n            />\n          </svg>\n          <span class=\"text-sm font-medium\"> Account </span>\n        </a>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/vertical-menu/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <ul class=\"space-y-1\">\n      <li>\n        <a href=\"#\" class=\"flex items-center gap-2 rounded-lg bg-gray-100 px-4 py-2 text-gray-700\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"\n            />\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> General </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          <div class=\"flex items-center gap-2\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-5 opacity-75\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"\n              />\n            </svg>\n\n            <span class=\"text-sm font-medium\"> Teams </span>\n          </div>\n\n          <span\n            class=\"shrink-0 rounded-full bg-gray-100 px-3 py-0.5 text-xs text-gray-600 group-hover:bg-gray-200 group-hover:text-gray-700\"\n          >\n            5\n          </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Billing </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          <div class=\"flex items-center gap-2\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-5 opacity-75\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z\"\n              />\n            </svg>\n\n            <span class=\"text-sm font-medium\"> Invoices </span>\n          </div>\n\n          <span\n            class=\"shrink-0 rounded-full bg-gray-100 px-3 py-0.5 text-xs text-gray-600 group-hover:bg-gray-200 group-hover:text-gray-700\"\n          >\n            3\n          </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Account </span>\n        </a>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/vertical-menu/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <ul>\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 border-s-[3px] border-blue-500 bg-blue-50 px-4 py-3 text-blue-700 dark:bg-blue-500/20 dark:text-blue-50\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"\n            />\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> General </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 border-s-[3px] border-transparent px-4 py-3 text-gray-500 hover:border-gray-100 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Teams </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 border-s-[3px] border-transparent px-4 py-3 text-gray-500 hover:border-gray-100 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Billing </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 border-s-[3px] border-transparent px-4 py-3 text-gray-500 hover:border-gray-100 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Invoices </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 border-s-[3px] border-transparent px-4 py-3 text-gray-500 hover:border-gray-100 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Account </span>\n        </a>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/vertical-menu/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <ul>\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 border-s-[3px] border-blue-500 bg-blue-50 px-4 py-3 text-blue-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"\n            />\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> General </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 border-s-[3px] border-transparent px-4 py-3 text-gray-500 hover:border-gray-100 hover:bg-gray-50 hover:text-gray-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Teams </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 border-s-[3px] border-transparent px-4 py-3 text-gray-500 hover:border-gray-100 hover:bg-gray-50 hover:text-gray-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Billing </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 border-s-[3px] border-transparent px-4 py-3 text-gray-500 hover:border-gray-100 hover:bg-gray-50 hover:text-gray-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Invoices </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 border-s-[3px] border-transparent px-4 py-3 text-gray-500 hover:border-gray-100 hover:bg-gray-50 hover:text-gray-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Account </span>\n        </a>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/vertical-menu/6-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <ul class=\"space-y-1\">\n      <li>\n        <a\n          href=\"#\"\n          class=\"block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n        >\n          General\n        </a>\n      </li>\n\n      <li>\n        <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n          <summary\n            class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n          >\n            <span class=\"text-sm font-medium\"> Teams </span>\n\n            <span class=\"shrink-0 transition duration-300 group-open:-rotate-180\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-5\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </span>\n          </summary>\n\n          <ul class=\"mt-2 space-y-1 px-4\">\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n              >\n                Banned Users\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n              >\n                Calendar\n              </a>\n            </li>\n          </ul>\n        </details>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          Billing\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          Invoices\n        </a>\n      </li>\n\n      <li>\n        <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n          <summary\n            class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n          >\n            <span class=\"text-sm font-medium\"> Account </span>\n\n            <span class=\"shrink-0 transition duration-300 group-open:-rotate-180\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-5\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </span>\n          </summary>\n\n          <ul class=\"mt-2 space-y-1 px-4\">\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n              >\n                Details\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n              >\n                Security\n              </a>\n            </li>\n\n            <li>\n              <form action=\"#\">\n                <button\n                  type=\"submit\"\n                  class=\"w-full rounded-lg px-4 py-2 [text-align:_inherit] text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n                >\n                  Logout\n                </button>\n              </form>\n            </li>\n          </ul>\n        </details>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/vertical-menu/6.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <ul class=\"space-y-1\">\n      <li>\n        <a\n          href=\"#\"\n          class=\"block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700\"\n        >\n          General\n        </a>\n      </li>\n\n      <li>\n        <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n          <summary\n            class=\"flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n          >\n            <span class=\"text-sm font-medium\"> Teams </span>\n\n            <span class=\"shrink-0 transition duration-300 group-open:-rotate-180\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-5\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </span>\n          </summary>\n\n          <ul class=\"mt-2 space-y-1 px-4\">\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Banned Users\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Calendar\n              </a>\n            </li>\n          </ul>\n        </details>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          Billing\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          Invoices\n        </a>\n      </li>\n\n      <li>\n        <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n          <summary\n            class=\"flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n          >\n            <span class=\"text-sm font-medium\"> Account </span>\n\n            <span class=\"shrink-0 transition duration-300 group-open:-rotate-180\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-5\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </span>\n          </summary>\n\n          <ul class=\"mt-2 space-y-1 px-4\">\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Details\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Security\n              </a>\n            </li>\n\n            <li>\n              <form action=\"#\">\n                <button\n                  type=\"submit\"\n                  class=\"w-full rounded-lg px-4 py-2 [text-align:_inherit] text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n                >\n                  Logout\n                </button>\n              </form>\n            </li>\n          </ul>\n        </details>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/vertical-menu/7-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <ul class=\"space-y-1\">\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg bg-gray-100 px-4 py-2 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"\n            />\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> General </span>\n        </a>\n      </li>\n\n      <li>\n        <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n          <summary\n            class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n          >\n            <div class=\"flex items-center gap-2\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-5 opacity-75\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"\n                />\n              </svg>\n\n              <span class=\"text-sm font-medium\"> Teams </span>\n            </div>\n\n            <span class=\"shrink-0 transition duration-300 group-open:-rotate-180\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-5\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </span>\n          </summary>\n\n          <ul class=\"mt-2 space-y-1 px-4\">\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n              >\n                Banned Users\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n              >\n                Calendar\n              </a>\n            </li>\n          </ul>\n        </details>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Billing </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Invoices </span>\n        </a>\n      </li>\n\n      <li>\n        <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n          <summary\n            class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n          >\n            <div class=\"flex items-center gap-2\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-5 opacity-75\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\n                />\n              </svg>\n\n              <span class=\"text-sm font-medium\"> Account </span>\n            </div>\n\n            <span class=\"shrink-0 transition duration-300 group-open:-rotate-180\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-5\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </span>\n          </summary>\n\n          <ul class=\"mt-2 space-y-1 px-4\">\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n              >\n                Details\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n              >\n                Security\n              </a>\n            </li>\n\n            <li>\n              <form action=\"#\">\n                <button\n                  type=\"submit\"\n                  class=\"w-full rounded-lg px-4 py-2 [text-align:_inherit] text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n                >\n                  Logout\n                </button>\n              </form>\n            </li>\n          </ul>\n        </details>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/vertical-menu/7.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <ul class=\"space-y-1\">\n      <li>\n        <a href=\"#\" class=\"flex items-center gap-2 rounded-lg bg-gray-100 px-4 py-2 text-gray-700\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"\n            />\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> General </span>\n        </a>\n      </li>\n\n      <li>\n        <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n          <summary\n            class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n          >\n            <div class=\"flex items-center gap-2\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-5 opacity-75\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"\n                />\n              </svg>\n\n              <span class=\"text-sm font-medium\"> Teams </span>\n            </div>\n\n            <span class=\"shrink-0 transition duration-300 group-open:-rotate-180\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-5\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </span>\n          </summary>\n\n          <ul class=\"mt-2 space-y-1 px-4\">\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Banned Users\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Calendar\n              </a>\n            </li>\n          </ul>\n        </details>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Billing </span>\n        </a>\n      </li>\n\n      <li>\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-5 opacity-75\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z\"\n            />\n          </svg>\n\n          <span class=\"text-sm font-medium\"> Invoices </span>\n        </a>\n      </li>\n\n      <li>\n        <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n          <summary\n            class=\"group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n          >\n            <div class=\"flex items-center gap-2\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-5 opacity-75\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\n                />\n              </svg>\n\n              <span class=\"text-sm font-medium\"> Account </span>\n            </div>\n\n            <span class=\"shrink-0 transition duration-300 group-open:-rotate-180\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-5\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </span>\n          </summary>\n\n          <ul class=\"mt-2 space-y-1 px-4\">\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Details\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Security\n              </a>\n            </li>\n\n            <li>\n              <form action=\"#\">\n                <button\n                  type=\"submit\"\n                  class=\"w-full rounded-lg px-4 py-2 [text-align:_inherit] text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n                >\n                  Logout\n                </button>\n              </form>\n            </li>\n          </ul>\n        </details>\n      </li>\n    </ul>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/vertical-menu/8-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <div class=\"flow-root\">\n      <ul class=\"-my-2 divide-y divide-gray-100 dark:divide-gray-800\">\n        <li class=\"py-2\">\n          <ul class=\"space-y-1\">\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n              >\n                Profile\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n              >\n                Team\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n              >\n                Projects\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n              >\n                Meetings\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n              >\n                Calendar\n              </a>\n            </li>\n          </ul>\n        </li>\n\n        <li class=\"py-2\">\n          <ul class=\"space-y-1\">\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n              >\n                Update\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n              >\n                Help\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n              >\n                Settings\n              </a>\n            </li>\n          </ul>\n        </li>\n\n        <li class=\"py-2\">\n          <form action=\"#\">\n            <button\n              type=\"submit\"\n              class=\"block w-full rounded-lg px-4 py-2 [text-align:_inherit] text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200\"\n            >\n              Logout\n            </button>\n          </form>\n        </li>\n      </ul>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/application/vertical-menu/8.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <div class=\"flow-root\">\n      <ul class=\"-my-2 divide-y divide-gray-100\">\n        <li class=\"py-2\">\n          <ul class=\"space-y-1\">\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700\"\n              >\n                Profile\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Team\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Projects\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Meetings\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Calendar\n              </a>\n            </li>\n          </ul>\n        </li>\n\n        <li class=\"py-2\">\n          <ul class=\"space-y-1\">\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Update\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Help\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                class=\"block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n              >\n                Settings\n              </a>\n            </li>\n          </ul>\n        </li>\n\n        <li class=\"py-2\">\n          <form action=\"#\">\n            <button\n              type=\"submit\"\n              class=\"block w-full rounded-lg px-4 py-2 [text-align:_inherit] text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n            >\n              Logout\n            </button>\n          </form>\n        </li>\n      </ul>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/announcements/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"border-b border-gray-200 bg-gray-100 px-4 py-2 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white\"\n    >\n      <p class=\"text-center font-medium\">\n        Lorem, ipsum dolor\n        <a href=\"#\" class=\"inline-block underline\"> sit amet consectetur </a>\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/announcements/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"border-b border-gray-200 bg-gray-100 px-4 py-2 text-gray-900\">\n      <p class=\"text-center font-medium\">\n        Lorem, ipsum dolor\n        <a href=\"#\" class=\"inline-block underline\"> sit amet consectetur </a>\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/announcements/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"flex items-center justify-between border-b border-gray-200 bg-gray-100 px-4 py-2 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white\"\n    >\n      <span> </span>\n\n      <p class=\"text-center font-medium\">\n        Lorem, ipsum dolor\n        <a href=\"#\" class=\"inline-block underline\"> sit amet consectetur </a>\n      </p>\n\n      <button\n        type=\"button\"\n        aria-label=\"Dismiss\"\n        class=\"rounded border border-gray-300 bg-white p-1.5 shadow-sm transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n        </svg>\n      </button>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/announcements/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"flex items-center justify-between border-b border-gray-200 bg-gray-100 px-4 py-2 text-gray-900\"\n    >\n      <span> </span>\n\n      <p class=\"text-center font-medium\">\n        Lorem, ipsum dolor\n        <a href=\"#\" class=\"inline-block underline\"> sit amet consectetur </a>\n      </p>\n\n      <button\n        type=\"button\"\n        aria-label=\"Dismiss\"\n        class=\"rounded border border-gray-300 bg-white p-1.5 shadow-sm transition-colors hover:bg-gray-50\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n        </svg>\n      </button>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/announcements/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"fixed inset-x-0 bottom-0 z-auto border-t border-gray-200 bg-gray-100 px-4 py-2 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white\"\n    >\n      <p class=\"text-center font-medium\">\n        Lorem, ipsum dolor\n        <a href=\"#\" class=\"inline-block underline\"> sit amet consectetur </a>\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/announcements/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"fixed inset-x-0 bottom-0 z-auto border-t border-gray-200 bg-gray-100 px-4 py-2 text-gray-900\"\n    >\n      <p class=\"text-center font-medium\">\n        Lorem, ipsum dolor\n        <a href=\"#\" class=\"inline-block underline\"> sit amet consectetur </a>\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/announcements/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"fixed inset-x-0 bottom-0 z-auto flex items-center justify-between border-t border-gray-200 bg-gray-100 px-4 py-2 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white\"\n    >\n      <span> </span>\n\n      <p class=\"text-center font-medium\">\n        Lorem, ipsum dolor\n        <a href=\"#\" class=\"inline-block underline\"> sit amet consectetur </a>\n      </p>\n\n      <button\n        type=\"button\"\n        aria-label=\"Dismiss\"\n        class=\"rounded border border-gray-300 bg-white p-1.5 shadow-sm transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n        </svg>\n      </button>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/announcements/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div\n      class=\"fixed inset-x-0 bottom-0 z-auto flex items-center justify-between border-t border-gray-200 bg-gray-100 px-4 py-2 text-gray-900\"\n    >\n      <span> </span>\n\n      <p class=\"text-center font-medium\">\n        Lorem, ipsum dolor\n        <a href=\"#\" class=\"inline-block underline\"> sit amet consectetur </a>\n      </p>\n\n      <button\n        type=\"button\"\n        aria-label=\"Dismiss\"\n        class=\"rounded border border-gray-300 bg-white p-1.5 shadow-sm transition-colors hover:bg-gray-50\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n        </svg>\n      </button>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/announcements/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"fixed inset-x-0 bottom-0 z-auto p-4\">\n      <div\n        class=\"rounded border border-gray-200 bg-gray-100 px-4 py-2 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white\"\n      >\n        <p class=\"text-center font-medium\">\n          Lorem, ipsum dolor\n          <a href=\"#\" class=\"inline-block underline\"> sit amet consectetur </a>\n        </p>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/announcements/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"fixed inset-x-0 bottom-0 z-auto p-4\">\n      <div class=\"rounded border border-gray-200 bg-gray-100 px-4 py-2 text-gray-900\">\n        <p class=\"text-center font-medium\">\n          Lorem, ipsum dolor\n          <a href=\"#\" class=\"inline-block underline\"> sit amet consectetur </a>\n        </p>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/announcements/6-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"fixed inset-x-0 bottom-0 z-auto p-4\">\n      <div\n        class=\"flex items-center justify-between rounded border border-gray-200 bg-gray-100 px-4 py-2 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white\"\n      >\n        <span> </span>\n\n        <p class=\"text-center font-medium\">\n          Lorem, ipsum dolor\n          <a href=\"#\" class=\"inline-block underline\"> sit amet consectetur </a>\n        </p>\n\n        <button\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          class=\"rounded border border-gray-300 bg-white p-1.5 shadow-sm transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-5\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/announcements/6.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"fixed inset-x-0 bottom-0 z-auto p-4\">\n      <div\n        class=\"flex items-center justify-between rounded border border-gray-200 bg-gray-100 px-4 py-2 text-gray-900\"\n      >\n        <span> </span>\n\n        <p class=\"text-center font-medium\">\n          Lorem, ipsum dolor\n          <a href=\"#\" class=\"inline-block underline\"> sit amet consectetur </a>\n        </p>\n\n        <button\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          class=\"rounded border border-gray-300 bg-white p-1.5 shadow-sm transition-colors hover:bg-gray-50\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            class=\"size-5\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/banners/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section class=\"bg-white lg:grid lg:h-screen lg:place-content-center dark:bg-gray-900\">\n      <div class=\"mx-auto w-screen max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8 lg:py-32\">\n        <div class=\"mx-auto max-w-prose text-center\">\n          <h1 class=\"text-4xl font-bold text-gray-900 sm:text-5xl dark:text-white\">\n            Understand user flow and\n            <strong class=\"text-indigo-600\"> increase </strong>\n            conversions\n          </h1>\n\n          <p class=\"mt-4 text-base text-pretty text-gray-700 sm:text-lg/relaxed dark:text-gray-200\">\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, nisi. Natus, provident\n            accusamus impedit minima harum corporis iusto.\n          </p>\n\n          <div class=\"mt-4 flex justify-center gap-4 sm:mt-6\">\n            <a\n              class=\"inline-block rounded border border-indigo-600 bg-indigo-600 px-5 py-3 font-medium text-white shadow-sm transition-colors hover:bg-indigo-700\"\n              href=\"#\"\n            >\n              Get Started\n            </a>\n\n            <a\n              class=\"inline-block rounded border border-gray-200 px-5 py-3 font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white\"\n              href=\"#\"\n            >\n              Learn More\n            </a>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/banners/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section class=\"bg-white lg:grid lg:h-screen lg:place-content-center\">\n      <div class=\"mx-auto w-screen max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8 lg:py-32\">\n        <div class=\"mx-auto max-w-prose text-center\">\n          <h1 class=\"text-4xl font-bold text-gray-900 sm:text-5xl\">\n            Understand user flow and\n            <strong class=\"text-indigo-600\"> increase </strong>\n            conversions\n          </h1>\n\n          <p class=\"mt-4 text-base text-pretty text-gray-700 sm:text-lg/relaxed\">\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, nisi. Natus, provident\n            accusamus impedit minima harum corporis iusto.\n          </p>\n\n          <div class=\"mt-4 flex justify-center gap-4 sm:mt-6\">\n            <a\n              class=\"inline-block rounded border border-indigo-600 bg-indigo-600 px-5 py-3 font-medium text-white shadow-sm transition-colors hover:bg-indigo-700\"\n              href=\"#\"\n            >\n              Get Started\n            </a>\n\n            <a\n              class=\"inline-block rounded border border-gray-200 px-5 py-3 font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900\"\n              href=\"#\"\n            >\n              Learn More\n            </a>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/banners/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section class=\"bg-white lg:grid lg:h-screen lg:place-content-center dark:bg-gray-900\">\n      <div class=\"mx-auto w-screen max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8 lg:py-32\">\n        <div class=\"max-w-prose\">\n          <h1 class=\"text-4xl font-bold text-gray-900 sm:text-5xl dark:text-white\">\n            Understand user flow and\n            <strong class=\"text-indigo-600\"> increase </strong>\n            conversions\n          </h1>\n\n          <p class=\"mt-4 text-base text-pretty text-gray-700 sm:text-lg/relaxed dark:text-gray-200\">\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, nisi. Natus, provident\n            accusamus impedit minima harum corporis iusto.\n          </p>\n\n          <div class=\"mt-4 flex gap-4 sm:mt-6\">\n            <a\n              class=\"inline-block rounded border border-indigo-600 bg-indigo-600 px-5 py-3 font-medium text-white shadow-sm transition-colors hover:bg-indigo-700\"\n              href=\"#\"\n            >\n              Get Started\n            </a>\n\n            <a\n              class=\"inline-block rounded border border-gray-200 px-5 py-3 font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white\"\n              href=\"#\"\n            >\n              Learn More\n            </a>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/banners/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section class=\"bg-white lg:grid lg:h-screen lg:place-content-center\">\n      <div class=\"mx-auto w-screen max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8 lg:py-32\">\n        <div class=\"max-w-prose text-left\">\n          <h1 class=\"text-4xl font-bold text-gray-900 sm:text-5xl\">\n            Understand user flow and\n            <strong class=\"text-indigo-600\"> increase </strong>\n            conversions\n          </h1>\n\n          <p class=\"mt-4 text-base text-pretty text-gray-700 sm:text-lg/relaxed\">\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, nisi. Natus, provident\n            accusamus impedit minima harum corporis iusto.\n          </p>\n\n          <div class=\"mt-4 flex gap-4 sm:mt-6\">\n            <a\n              class=\"inline-block rounded border border-indigo-600 bg-indigo-600 px-5 py-3 font-medium text-white shadow-sm transition-colors hover:bg-indigo-700\"\n              href=\"#\"\n            >\n              Get Started\n            </a>\n\n            <a\n              class=\"inline-block rounded border border-gray-200 px-5 py-3 font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900\"\n              href=\"#\"\n            >\n              Learn More\n            </a>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/banners/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section class=\"bg-white lg:grid lg:h-screen lg:place-content-center dark:bg-gray-900\">\n      <div\n        class=\"mx-auto w-screen max-w-7xl px-4 py-16 sm:px-6 sm:py-24 md:grid md:grid-cols-2 md:items-center md:gap-4 lg:px-8 lg:py-32\"\n      >\n        <div class=\"max-w-prose text-left\">\n          <h1 class=\"text-4xl font-bold text-gray-900 sm:text-5xl dark:text-white\">\n            Understand user flow and\n            <strong class=\"text-indigo-600\"> increase </strong>\n            conversions\n          </h1>\n\n          <p class=\"mt-4 text-base text-pretty text-gray-700 sm:text-lg/relaxed dark:text-gray-200\">\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, nisi. Natus, provident\n            accusamus impedit minima harum corporis iusto.\n          </p>\n\n          <div class=\"mt-4 flex gap-4 sm:mt-6\">\n            <a\n              class=\"inline-block rounded border border-indigo-600 bg-indigo-600 px-5 py-3 font-medium text-white shadow-sm transition-colors hover:bg-indigo-700\"\n              href=\"#\"\n            >\n              Get Started\n            </a>\n\n            <a\n              class=\"inline-block rounded border border-gray-200 px-5 py-3 font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white\"\n              href=\"#\"\n            >\n              Learn More\n            </a>\n          </div>\n        </div>\n\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 1024 768\"\n          class=\"mx-auto hidden max-w-md text-gray-900 md:block dark:text-white\"\n        >\n          <g fill=\"none\" fill-rule=\"evenodd\">\n            <g fill=\"#FF5678\">\n              <path\n                d=\"M555.886 337.572c-1.134-1.652-3.154-2.481-4.757-3.572.718 1.646.78 2.144.052 3.714-.562 1.211-.936 2.501-1.477 3.724-.371.837-.964 1.683-1.2 2.541-.277 1.006-.133 2.027-.504 3.021 4.379-1.183 8.27-3.952 12-6.523-.695-.1-2.532-.07-3.118-.578-.48-.415-.578-1.717-.996-2.327M661.291 322.8c1.91 1.52 1.91 1.52 1.976 4.105-1.607-.978-2.14-2.177-1.976-4.106m-92.56 6.786c-.882.072-1.096-2.48-1.291-3.227l.87-.122c.398.428 1.967 3.221.422 3.349m132.775 26.117c1.25-6.927 2.775-13.812 4.804-20.555a160.721 160.721 0 0 1 3.312-9.807c1.044-2.799 3.03-5.836 3.377-8.771-3.16 2.855-5.734 6.43-8.459 9.699-2.604 3.128-5.337 6.196-7.796 9.439-1.001 1.32-1.905 2.837-1.969 4.533-.068 1.86 1 2.997 1.764 4.563.802 1.64 1.342 3.657 1.737 5.429.434 1.937-.248 2.883-.912 4.638-1.422-.7-2.647-1.09-3.685-2.358-1.103-1.347-2.035-2.86-3.077-4.256-2.271-3.04-4.567-6.062-6.826-9.112-4.53-6.12-8.498-12.295-11.896-19.104-3.44-6.893-6.522-13.972-9.876-20.91-.707-1.46-.997-3.061-2.88-3.058-1.393.002-2.575.867-3.884 1.208a4.424 4.424 0 0 1-.99.172c.01.333-.044.655-.164.965-.344.418-.468.25-.947.225-.555-.03-.955-.378-1.56-.337-.841.057-1.658.612-2.449.863v-1.92c-2.511 1.289-8.591 5.604-9.913.713-.115.89.125 2.495-.75 3.066-.578.378-1.31-.016-1.937.064-.782.101-1.48.665-2.206.935-.049-1.316-1.054-1.168-2.03-1.345-1.262-.23-2.367-.93-3.669-.706-1.294.224-2.232.804-3.534.107-.874-.47-1.689-1.126-2.57-1.621-.894-.503-1.052-.852-1.436-1.744-.424-.989-.347-.765-1.356-.485-2.16.6-3-2.004-3.38-3.77-.928-4.318.136-9.034 2.984-12.403 3.664-4.335 7.545-8.587 12.334-11.719 4.426-2.893 9.13-6.472 14.295-7.874-4.124-9.23-10.002-17.827-15.24-26.466-1.5.344-2.4 1.158-4.002.903-1.264-.2-1.207-.103-1.675 1.212-.419 1.175-.648 1.344-1.77 1.704-1.164.374-.238-.352-1.105.565-.387.407-.598.851-1.079 1.187-1.76 1.233-4.063.523-5.974 1.292-1.32.531-.67 1.207-1.346 2.12-.716.967-1.93.463-2.922.307-2.067-.325-2.69.372-3.126 2.317-.324 1.441-.539 2.19-2.086 2.493-.876.172-2.239-.527-2.8.038-.216.216-.125.823-.225 1.102-.18.507-.498.922-.86 1.317-.735.8-1.739 1.46-2.738 1.878-.95.398-1.952.175-2.853.523-1.42.545-1.075 2.054-1.027 3.25-.805-.194-.992-.17-1.473-.776-.22-.278-.1-.744-.533-.862-.374-.101-2.39 1.14-2.676 1.495-.836 1.036.011 2.5-.204 3.707-.211 1.2-1.188 2.105-1.96 2.989-.251-.73-.504-1.458-.756-2.187-.376.488-.9.836-1.061 1.448-.085.317.174.744.03 1.066-.407.904-.813.332-1.572.363-.667.027-2.462.537-2.146 1.581.215.703 1.603.54 1.437 1.496-.2 1.162-1.707.401-2.318.644-.8.315-.483.997-.756 1.69-.48 1.217-1.448 1.326-2.452 1.922-.992.59-1.377 1.305-1.832 2.317-.567 1.264-.508.923-1.73.812-.752-.069-1.146.084-1.444.779-.244.566.172 1.264-.04 1.785-.263.643-1.624 1.372-2.095 2.025-1.277 1.775-1.827 3.966-2.87 5.87a20.488 20.488 0 0 1-1.571 2.428c-.775 1.032-1.257.836-2.302 1.39-1.693.897-1.199 3.267-1.385 4.832-.097.808-.297 1.553-.873 2.163-.344.364-1.563.78-1.322 1.506.29.879 1.265-.06 1.08 1.31-.146 1.091-1.39 1.987-1.666 3.08-.191.752.06 1.468-.135 2.227-.213.827-.861 1.455-1.172 2.234-.314.783.18 1.77-.089 2.365-.313.692-1.46.514-1.768 1.413-.337.982.451 2.527.593 3.53.09.642.43 1.34-.113 1.869-.462.45-1.556.368-1.084 1.483.218.516 1.038.408 1.127 1.187.069.6-.624 1.51-.998 1.915-1 1.08-2.892 1.98-1.53 3.355.235.237.524.125.745.447.26.374.295 1.045.442 1.473.354 1.027.86 1.993 1.489 2.88 2.396 3.376 6.363 4.966 9.002 8.031 3.22-3.204 6.514-6.33 9.545-9.714 2.57-2.871 5.058-5.843 8-8.354 1.52-1.296 3.258-2.342 4.521-3.913 1.207-1.5 1.651-3.387 2.57-5.054 1.804-3.271 4.403-6.019 6.337-9.209 3.791 2.471 2.207 8.78 1.115 12.319-.667 2.164-1.611 4.237-2.72 6.212-.938 1.672-2.258 3.333-2.708 5.23-.368 1.539.17 2.833 1.061 4.085 1.278 1.793 2.773 3.472 4.12 5.22l9.828 12.762c1.187-1.713 3.145-.592 4.721-.262 2.31.483 4.695.31 7.033.532 2.452.231 4.933.639 7.363 1.033 2.176.352.73 1.36 1.783 2.561 2.225-4.012 6.48-1.475 9.955-1.121 2.18.223 4.495.106 6.634.379 2.16.275 4.293 1.012 6.529 1.227 4.215.404 8.026 1.858 12.163 2.613 2.186.4 4.39.681 6.574 1.083.775.142 2.143.214 2.577 1.012.513.948-.53 2.948-.813 3.801-.423 1.274-.72 3.226-1.576 4.287-.663.82-.833.32-1.687.285-.988-.042-.586.17-1.269.934-.842.945-2.025.951-3.197 1.057-.534.048-1.601-.049-2.015.323-.583.522-.079.557-.124 1.357-.077 1.4-2.011 2.44-3.14 2.99-.725.352-1.503.64-2.32.582-.514-.037-1.125-.532-1.641-.326-.732.29-.676 1.672-1.1 2.256-.783 1.081-1.836.279-2.865.826-1.232.654-1.931 2.208-3.102 2.978-2.32 1.526-4.99 1.694-6.145-1.168-.463.958-1.553 2.444-1.144 3.409.363.855 1.51 1.487 2.283 1.907 2.265 1.23 4.485 2.457 6.657 3.858 4.991 3.22 9.79 6.746 15.127 9.4 5.253 2.612 10.774 5.427 16.572 6.57 5.954 1.17 12.04.43 17.572-2.036-.825-1.648-.951-2.71-1.002-4.59a394.968 394.968 0 0 1-.108-5.333c-.043-3.55-.024-7.1.1-10.647a148.045 148.045 0 0 1 2.29-21.15M764.413 350.616c-.536-1.91-1.145-3.9-1.265-5.884-.087-1.432.444-3.56-.41-4.807-.36-.53-1.01-.715-1.22-1.352-.168-.512.09-1.537.021-2.1-.177-1.465-.758-2.832-1.295-4.195-1.217-3.092-1.252-6.337-2.27-9.47-.555-1.717-1.6-3.183-2.21-4.872-.558-1.537-.84-3.16-1.016-4.78-.188-1.727-.185-3.44-.6-5.137-.388-1.584-.87-3.134-1.22-4.728-.834-3.793-1.801-7.507-3.13-11.163-.502-1.381-.867-3.697-2.092-4.625-.89-.674-2.06-.5-3.095-.43-1.177.08-2.143.135-2.926 1.117-1 1.255-1.638 2.62-2.796 3.798-1.18 1.2-2.654 2.235-3.716 3.537-.834 1.023-.356 1.371.54 2.244-1.16.15-2.114-.17-2.958.709-.86.893-1.512 2.376-2.058 3.473-1.23 2.471-1.37 4.694-1.736 7.37l-.98-1.526c-.414 1.126-1.015 2.296-2.208 2.759-1.461.569-1.417.384-1.421 2.022-.008 2.354-1.959 3.835-3.192 5.616-.692 1-1.36 2.138-1.813 3.262-.582 1.438-.213 2.382-.074 3.854.21 2.202-1.914 3.888-3.192 5.45-.4.486-.624.725-.848 1.32-.165.441.064.72-.268 1.19-.6.852-1.856.624-2.338 1.67-.453.978.175 1.964.273 2.932.158 1.546-.774 2.972-1.281 4.382-.553 1.532-.978 3.116-1.182 4.732a17.337 17.337 0 0 0-.131 2.81c.016.434.35 1.524.065 1.918-.368.51-1.174-.074-1.51.492-.691 1.162 1.887 1.533 2.39 1.713-.597.378-1.384.642-1.87 1.176-.642.707-.245 1.127-.51 1.92-.29.864-1.33 1.099-1.654 1.863-.333.784.316.952.654 1.603.826 1.587.084 3.964-.243 5.593-.131.654-.07 2.355-.48 2.861-.26.323-.845.204-1.073.488-.48.594.025.833.22 1.516.249.863.207 1.78-.024 2.643-.219.816-.75 1.569-.899 2.4-.162.911.29 1.22.602 2.067.693 1.886.206 4.219-.03 6.14-.276 2.236.508 4.348-.076 6.418L704 389.8c.198.986.395 1.971.591 2.957l.292 1.457c-.122.631.09.881.635.75 1.07.308 2.719-1.376 3.602-1.874 2.65-1.496 5.51-2.57 8.261-3.864 2.86-1.343 5.252-3.157 7.871-4.87 2.698-1.763 5.544-3.274 8.174-5.14 11.377-8.074 23.711-14.884 35.574-22.229-3.323.376-3.927-4.027-4.587-6.37M778.485 258.764c1.78.518 1.372 2.026.696 3.336-.684-.647-1.892-1.406-2.213-2.33-.397-1.148.493-1.304 1.517-1.006m49.769 44.611c-.095.458-.199 2.327-.55 2.617-.319.262-1.958-.107-2.392-.13-1.375-.072-2.425.207-3.727.528-2.238.554-2.642-.838-2.652-2.922-1.72 3.396-4.586 5.096-8.247 5.75-1.636.294-3.39.644-5.049.715-1.238.053-2.633-.056-3.858-.269-.777-.135-1.484-.613-2.217-.75-1.604-.3-.16.856-1.318 1.163-.297.078-1.42-.407-1.86-.433-.71-.043-1.423.075-2.132.038-1.608-.083-2.133-.978-3.407-1.668-.668-.362-1.124-.31-1.84-.209-.786.11-.189.372-1.107.21-.296-.053-.832-.385-1.074-.494-1.74-.781-3.1-1.476-4.44-2.83-.982-.99-2.22-1.657-3.2-2.64-.352-.353-.544-.786-.856-1.153-.405-.474-.433-.355-.94-.708-.58-.403-1.03-.63-1.383-1.268-.604-1.088-.58-2.592-.675-3.8-.322-4.115.416-7.781 2.371-11.41 2.122-3.94 3.883-8.106 6.368-11.841 2.248-3.379 5.068-6.55 7.836-9.516.782-.838 1.634-1.815 2.582-2.47.617-.423 1.42-.613 2.002-1.077 1.382-1.105.71-3.131.71-4.667.436.772 1.12 1.927 2.165 1.673.687-.167.71-.94 1.207-1.243.383-.233.834-.116 1.259-.16-1.672-8.202-3.824-16.479-6.516-24.411-7.357 7.22-14.72 14.491-21.863 21.926-3.685 3.836-7.088 7.929-10.756 11.78-3.856 4.047-7.796 8.012-11.695 12.017 1.06 1.025 2.274 1.72 2.997 3.042.666 1.214 1.43 2.134 2.345 3.174 2.07 2.349 3.059 5.847 4.338 8.675.253.556.321.723.254 1.226-.04.307-.357.578-.363.952-.008.474.217.79.5 1.15.263.337 1.04.72 1.105 1.16.077.525-.462.876-.641 1.367-.791 2.161 1.806 3.69 2.683 5.386.483.93.706 1.872.086 2.803-.507.761-1.626 1.056-1.032 2.215.37.726 1.405.328 1.252 1.337-.083.54-1.127 1.047-.15 1.64.79.48 1.73-.377 1.361 1.107-.164.663-1.052 1.33-.799 2.073.248.722 1.54.84 2.055 1.405.647.714.94 1.907 1.068 2.835.438 3.164 1.166 6.035 1.892 9.143.486 2.082-.766 2.119-2.616 2.133 1.247 1.748 2.474 3.502 3.805 5.188 1.303 1.65 1.64 4.21 2.25 6.206.734 2.399 1.45 4.805 2.163 7.207.325 1.096.55 2.166.115 3.267-.5 1.268-.492 1.273-.261 2.586 5.77-3.308 11.216-6.987 16.69-10.767 2.624-1.812 5.253-3.619 7.848-5.473 2.043-1.46 4.056-3.043 5.37-5.221 3.05-5.058 7.537-9.024 11.616-13.29 2.074-2.17 4.006-4.865 6.541-6.513 2.452-1.595 5.054-3.006 7.528-4.591l-2.746-3.77\"\n              />\n              <path\n                d=\"M645.674 371.323c2.35-1.12 4.518-2.626 6.804-3.872 1.982-1.082 3.785-1.604 5.489-3.102.713-.628 1.382-.864 2.219-1.278 1.062-.526 1.87-1.459 2.814-2.157-2.408-.937-4.769-2.387-7.43-2.419-1.18-.013-2.268.407-3.45.188-1.2-.222-2.136-.838-3.092-1.547-1.732-1.285-2.5-1.095-4.378-.032-.448.254-1.06.821-1.606.805-.883-.027-.75-.57-1.132-1.176-.348-.55.095-.613-.542-.63-.385-.01-.558.52-.986.603-.813.158-2.347-.636-3.16-.784-1.369-.247-2.42.049-3.774.134-1.405.09-2.773-.236-4.09-.685-1.202-.409-2.357-.985-3.572-1.352-1.582-.477-1.903.142-3.366.48-2.225.51-4.384-2.693-6.422-1 2.989 4.354 7.08 8.029 10.858 11.73 2.033 1.988 4.09 3.936 6.321 5.706 1.005.8 2.032 1.573 3.055 2.35.464.355.93.707 1.393 1.065.83.641.754.833 1.542.464 1.06-.496 1.88-1.546 3.042-2.05 1.147-.497 2.332-.903 3.463-1.441M647.158 275.908c.085 1.959 1.301 3.564-.416 5.222-.05-.972-.101-1.946-.153-2.918-.053-1.013-.563-2.114.569-2.304m-1.915-8.537c-.29.851-.66 1.466-1.471 1.9-1.16.62-2.767-.384-3.575.498-.812.888-.717 2.974-1.777 3.7-.34.232-.715.07-1.118.373-.347.26-.361.878-.714 1.15-.579.446-1.072-.01-1.618.25-.613.292-.713.99-.876 1.601-.16.6-.156 1.375-.596 1.844-.537.571-1.779.976-2.433 1.382-2.356 1.465-4.71 2.932-7.065 4.399.701.71 2.25 1.518 2.43 2.565.122.714-.373.793.22 1.355.269.256 1.22.528 1.544.69 1.334.67 2.688 1.26 4.15 1.577 1.737.378 3.477.2 5.208.614 1.818.434 3.609.77 5.486.727 1.603-.036 3.116-.482 4.703-.62 2.975-.256 6.833.012 9.259-2.085-.241-2.154-.48-3.791-1.28-5.842a438.06 438.06 0 0 0-2.246-5.633c-1.539-3.78-3.105-7.426-5.06-10.998-.4 2.503-1.355-.793-2.298-.818-.694-.018-.7.87-.873 1.37M810 294.557c1.31.325 2.362.49 3.589 1.055.908.417 1.254.638 2.045-.075.43-.386.51-.962 1.062-1.25.545-.286 1.287-.193 1.87-.222 1.478-.079 2.956-.11 4.434-.165-1.7-1.632-3.399-3.266-5.099-4.9-.264.453-.972 2.123-1.492 2.23-.156.032-.642-.49-.904-.51-.28-.023-.481.104-.726.212-.628.279-.909.924-1.61 1.096-.689.17-1.47-.15-2.167-.166-.191.658-.682 1.846-1.002 2.695M807.92 273.36c.296-1.223-.34-2.485-.146-3.728l-.422-.632c-.328.733-.538 1.455-.984 2.135-.37.567-.952 1.043-1.203 1.69-.456 1.171.117 2.136.69 3.175.768-.858 1.782-1.47 2.065-2.64M797.813 276c-1.032.024-.639.505-.779 1.275-.089.486-.328.919-.593 1.328-.53.822-1.803 1.65-1.076 2.762.618.945.652-.235 1.167.23.54.484-3.026 4.123-3.56 4.322-.29.107-.607-.222-.881.01-.247.21.088 2.305.077 2.732-.027 1.121-.101 2.328.81 3.13 1.06.93 2.805.965 4.06 1.494.86.362 1.664.88 2.57 1.124.955.256 1.778-.276 2.6-.153.62.092 1.828 1.097 2.454 1.396.84.402 1.003.464 1.822.152.451-.172 1.332-.505 1.638-.896.461-.593.108-.584.17-1.391.11-1.472 1.65-1.301 2.708-1.717-2.093-.627-3.25-2.875-4.28-4.71-.454-.81-1.377-1.777-1.623-2.683-.306-1.136.54-1.869 1.05-2.817-.694.282-3.414 1.532-2.104.055.407-.459 2.932-1.208 1.904-2.404-.62-.719-1.423.75-2.139.607-.83-.166-1.814-1.556-2.507-2.015-.836-.554-2.47-1.853-3.488-1.83M546.76 318.047c.05-3.504.62-6.99 1.636-10.34 2.088-6.883 6.514-12.915 7.938-20.014.685-3.417.464-6.882 1.122-10.305.692-3.608.664-7.303.794-10.963.13-3.605.261-7.213.215-10.822-.015-1.295-.38-3.094-.051-4.346.275-1.05.695-.657 1.586-1.036-.62-.38-1.89-.57-2.025-1.363-.09-.544.44-1.14.413-1.74-.02-.492-.258-.988-.4-1.448-.782-2.525-1.893-6.411-.454-8.837-.866-.146-1.216-.415-2.017-.049-.866.395-1.726 1.272-2.476 1.868-1.491 1.184-2.974 2.385-4.313 3.743-2.522 2.56-4.593 5.508-6.79 8.34-2.19 2.821-4.456 5.615-6.708 8.386-1.752 2.154-4.53 5.433-6.97 2.532-.732.974-1.198 1.954-2.396 2.426-1.463.577-2.089 1.175-3.144 2.413-.212.25-.845 1.312-1.119 1.412-.555.202-.237-.175-.672-.456-.684-.44-1.009-.74-1.253.479-.11.54.18 1.05-.083 1.587-.245.499-1.008.995-1.47 1.267-1.074.631-2.294.57-3.445.957-1.9.637-3.113 3.52-5.199 2.14-.757-.503-1.357-1.285-2.346-.752-.736.398-.862 1.381-1.923.992-.557-.203-1.012-.933-1.658-1.17-.456-.166-.945-.233-1.424-.29-1.061-.128-2.139-.083-3.167-.413-2.238-.718-3.776-2.703-5.3-4.376-1.137-1.249-.786-2.03-.47-3.617.27-1.35.55-2.697.882-4.032.658-2.65 1.508-5.267 2.782-7.69 1.48-2.82 3.642-5.184 5.617-7.656 4.111-5.14 7.99-10.56 12.45-15.403.838-.91 2.273-1.897 2.12-3.283-.168-1.522-1.895-.782-2.955-.518-2.844.708-5.46 2.084-8.172 3.15-1.5.59-3.509 1.74-5.116.984-1.516-.713-3.917-2.626-3.069-4.378.65-1.345 1.355-2.32 1.7-3.84.309-1.356.498-2.741.782-4.104.67-3.235 1.529-6.428 2.492-9.588 1.837-6.03 4.08-11.926 6.102-17.894-8.295.747-15.854 3.16-23.65 5.947.37.76 1.062 1.847.783 2.736-.343 1.094-1.82.727-2.185 1.48-.433.889.88 1.4.49 2.54-.327.958-1.266 2.065-1.81 2.926 2.55 1.645 1.559-1.773 3.349-2.006.496 2.72-.648 4-1.707 6.288-.942 2.039 1.223 1.844 1.668 3.369-1.246.207-2.1-.366-2.644 1.104-.233.625.117 2.913-.629 2.977-.55.047-.376-.955-.82-1.049-.553-.116-1.97 1.879-2.317 2.252 1.509 0 2.333.16 3.762.733a96.384 96.384 0 0 1-2.823 2.66c.88.364 2.377.446 2.829 1.427.418.912-.217 2.56-.306 3.506.376-.566.925-1.904 1.508-2.268.767-.48.988-.005.94 1.045-.088 1.93-2.606 1.806-2.958 3.345-.35 1.522 1.83.463 1.886 1.975.032.862-.974 1.6-.476 2.512-1.115-.625-1.252-.994-1.857-2.213-.425 1.543-1.345 3.986-.84 5.588.413 1.308 1.276.985.287 2.252-.367.47-.874.838-.887 1.478-.029 1.477 2.083 2.622.443 3.937-.637.51-1.325.567-1.649 1.454-.28.767.007 1.79-.221 2.625-.452 1.658-1.655 2.89-2.858 4.048-1.074 1.036-2.054 2.236-3.229 3.136-.637.49-.872.776-1.304 1.413-.183.272.042.527-.205.78-.29.293-1.026.263-1.415.338-1.282.25-2.84.767-3.267 2.193-1.564-1.184-3.157.255-4.673.724-.756.233-1.448.29-2.162-.107-1.14-.635-1.086-.729-2.451-.53-3.804.548-6.94-3.415-9.059-6.08-1.54-1.941-2.39-4.355-2.791-6.779-.474-2.846-.966-5.672-1.227-8.55-.546-6.032-.34-11.97-.124-18.013-7.03 3.707-13.616 8.536-19.913 13.364-6.278 4.814-11.65 10.838-17.294 16.39 1.435.092 2.82.6 4.26.63.709.014 1.405-.071 2.056-.367.358-.164.685-.373.982-.63.26-.523.624-.613 1.09-.272 1.414-.116 2.72-.409 4.138-.613 1.794-.259 3.702.282 5.464.587 3.295.57 6.79.191 9.973 1.214 2.784.896 5.685 2.177 8.366 3.336 2.58 1.117 4.846 3.558 7.032 5.304 1.26 1.005 2.65 1.435 3.978 2.258 1.284.796 2.259 2.53 3.166 3.704 2.191 2.834 4.637 5.452 6.831 8.271.98 1.26 1.866 2.627 2.422 4.132.286.768.31 1.63.585 2.38.245.67.709 1.057 1.116 1.626 1.345-3.62 2.647-7.254 4.038-10.855.535-1.384 2.926-8.03 4.796-5.48 1.61 2.193.698 6.697.195 9.145-.673 3.28-1.42 6.548-2.154 9.816-1.458 6.484-2.794 13.028-4.648 19.41-.12.414-.36.914-.39 1.343-.053.743-.31.321.199.84.26.264.879.185 1.125.501.45.577.296 2.585.263 3.287-.062 1.333-.807 1.918-1.156 3.105-.303 1.037.214 2.103.224 3.149.025 2.59-1.32 5.409-1.788 7.975-.298 1.627.64 4.205-1.645 4.517.568.958-.104 1.366-.604 2.072-.62.878-.66 1.763-1.053 2.775-.347.892-.884 1.506-.98 2.392-.086.805.272 1.576-.005 2.393-.325.964-.94 1.075-1.752 1.495-.785.406-.555-.068-.828.723-.12.348.04 1.15-.035 1.553-.355 1.897-1.866 3.166-3.127 4.494-.471.498-1.083 1.653-1.661 1.96-.846.448-2.113-.331-2.889.084-.712.38-1.457 3.42-1.72 4.159-.556 1.57-1.084 3.154-1.614 4.733-1.944 5.787-3.856 11.585-5.778 17.379.919-.023 2.453-1.035 3.343-.62 1.02.474.363 1.874.746 2.636.274.546 1.87.463 2.62.504 1.247.068 1.815-.291 2.937-.617 1.94-.563 4.377-.366 6.396-.585 4.47-.486 9.069-.622 13.464-1.603 4.209-.938 8.242-2.498 12.373-3.711-1.928-1.014-2.287-3.514-2.84-5.416-.305-1.053-.419-1.886-1.011-2.841-.686-1.107-1.279-2.23-1.713-3.464-1.686-4.79-1.763-10.729-1.193-15.722 1.166-10.203 4.8-19.756 10.402-28.318 2.68-4.094 5.777-7.87 9.206-11.354 3.5-3.557 7.094-7.45 11.202-10.315 1.86-1.3 4.033-1.756 5.66-3.303 1.25-1.186 3.25-1.449 4.782-2.287 2.138-1.171 3.956-2.092 6.361-2.585 1.771-.364 3.76-1.267 5.605-1.037 1.262.157.79.747 1.532 1.328.98.768.625-.315 1.35-.586.613-.23.999.355 1.51.54.232.084 1.27.069 1.216.036.562.34.468 1.542.788 2.11.345.613.855 1.028 1.07 1.723.288.929.092 1.633-.3 2.423-.43.872-1.08 1.3-.04 2.147-2.597 1.709-.993 5.142-2.948 7.212-.664.703-2.158 1.685-2.136 2.778.025 1.178 2.14 1.644 1.052 2.82-.991 1.07-3.127.564-4.274 1.516-1.155.96-.771 2.612-.875 3.933-.08 1.011-1.064 2.231-.655 3.207.268.64.734.545.754 1.244.018.566-.452 1.319-.606 1.866l-1.299-.567c-.206.762-.56 1.5-.655 2.29-.113.926.265 1.373.459 2.199.194.829-.253 2.268-.335 3.258-.095 1.135-.207 2.325-1.013 3.205-.478.522-1.134.603-1.649 1.007-.48.376-.626.881-.954 1.38.745-.22 1.49-.44 2.237-.658-.302 1.424-.838 2.001-1.788 3.12l-.469-2.466c-.27.863-.76 1.55-.712 2.48.04.795.397 1.558.4 2.378.007 1.598-1.172 2.645-.689 4.182.583 1.858.704 2.834.127 4.737-.505 1.667-1.212 3.327-1.336 5.083-.138 1.981.755 3.687.57 5.7-.085.933-.474 1.591.564 1.694.927.093 1.933-.673 2.734-1.055 3.956-1.884 7.898-3.798 11.844-5.703-.735-1.024-.555-1.056-.095-2.316l1.034-2.849c.73-2.018 1.465-4.034 2.22-6.044 1.402-3.74 3.28-7.437 3.963-11.398.618-3.576.299-7.141.351-10.741M305.303 605.62l-3.917-2.47 2.283-1.743c.825-.629 1.197-1.215 1.684.022.512 1.3-.1 2.843-.05 4.192m-1.66-9.49c1.838 2.149-1.596 2.77-2.92 3.04.214-1.034.979-5.31 2.92-3.04m40.276-7.558c-.595-1.826-1.561-6.872-4.318-6.56-.66.076-1.255.734-2.037.79-.668.047-1.324-.131-1.985-.187-1.449-.122-3.007-.04-4.393.422-1.613.538-2.803 1.303-4.558 1.416-1.253.082-2.57-.023-3.793.332-2.096.606-1.954 2.465-1.66 4.31-.355-.403-.758-.71-1.015-1.183-.29-.534-.291-1.134-.743-1.6-.894-.927-1.923-.488-3.028-.408-1.25.09-2.853-.746-4.053-.277-.533.208-.848.805-1.403 1.053-.493.22-1.036.259-1.563.321-1.18.138-2.388.531-3.456.51-1.515-.032-2.794-.13-4.297.277-1.402.378-2.742.954-4.142 1.338-1.555.426-3.162.468-4.74.777-3.147.619-6.247 2.031-9.464 2.213-1.685.095-3.312.093-4.99.359-.518.081-1.686.055-2.108.345-.47.323-.792 1.665-1.059 2.216-2.884 5.954-4.976 12.29-7.278 18.484-2.393 6.442-4.774 12.89-7.181 19.327-1.132 3.026-2.577 6.045-3.515 9.132-.867 2.856 2.504 4.866 4.296 6.663 4.388 4.398 8.825 8.745 13.808 12.478 5.017 3.76 10.69 6.289 16.4 8.809 5.86 2.586 12.015 4.063 18.345 4.956 3.252.459 6.524.772 9.797 1.035 3.28.265 6.062-.189 9.297-.604-.32-.747-1.362-2.056-1.24-2.886.036-.233.514-.621.627-.895.154-.374.139-.77.148-1.164.045-1.883-.692-3.709 1.722-4.38l.241 3.084c1.167-1.755.43-3.639-.277-5.407l-2.46 2.052c.169-.5 1.542-3.668 1.161-3.967-.378-.296-1.061.495-1.468.113-.33-.311.038-1.047-.066-1.444-.167-.639-.86-1.13-.853-1.83.011-.931 1.206-1.651 1.77-2.251.828-.879 1.166-1.508 1.162-2.71-.005-1.66.773-1.568 1.984-2.676 1.959-1.79 2.08-4.255 1.07-6.613l2.6-.2c-.803-2.022-1.63-4.04-2.417-6.068-.779-2.005.284-3.057.81-4.927 1.188 1.178 2.378 2.355 3.568 3.533.337-3.807 1.346-7.647.869-11.485-.148-1.19-.37-1.119.176-2.008.393-.638.948-1.135 1.293-1.829.677-1.364.88-2.888 1.017-4.385.127-1.391.066-2.92.46-4.27.298-1.018 1.274-1.59 1.509-2.72.407-1.961-2.722-5.383-.902-6.836.928-.74 2.082-.032 2.752-1.242.575-1.038.798-2.47 1.134-3.595.537-1.792.79-3.185.142-4.987-.57-1.586-1.173-3.147-1.696-4.75M372.653 496.758c-.458-1.047-1.173-1.235-2.256-1.444-4.66-.896-9.361-.901-14.064-1.333-1.336-.122-2.667-.311-3.971-.636-1.092-.274-2.123-.882-3.195-1.138-2.136-.51-4.255.904-6.39.801-1.093-.053-2.016-.704-3.057-.977-.853-.224-1.629-.049-2.499.007-1.685.108-3.386.022-5.062-.152a38.422 38.422 0 0 1-6.129-1.124c-1.326-.361-3.335-.747-4.317-1.762-2.238 3.433-4.12 7.027-5.74 10.783-1.578 3.653-3.674 7.108-5.598 10.59-3.918 7.099-6.724 14.72-9.375 22.353 1.461-.67 2.52-1.355 3.618.162 1.035 1.433 2.263.964 3.938 1.235 2.688.434 2.979 3.409 3.568 5.631.868-1.082 1.738-2.164 2.608-3.245.697.776 1.818 1.18 2.387 2.073.364.572.159 1.102.375 1.647.2.507.712.712 1.097 1.07 2.662-3.402 5.161 3 5.482 5.19l1-2.545c.473.513 1.118.951 1.488 1.55.231.373.22 1.04.466 1.35.367.462.608.258 1.135.386.849.205.685.157 1.176.811 1.482 1.976 3.69 3.497 4.94 5.624 1.568 2.673 3.706 5.428 4.649 8.383.54 1.693.776 3.281 1.658 4.856.463.83 1.265 1.54 1.683 2.349.521 1.007-.397 1.422-.293 2.323.102.907 1.608 1.79 2.356 2.071 1.176.443 2.57.304 3.81.34 1.597.046 3.49-.012 5.04-.472 1.351-.402 1.247-1.096 1.617-2.286.439-1.412 1.208-2.765 1.82-4.108.91-2 1.351-3.332-1.374-3.931 1.565-.262 4.121-.722 3.623-2.819-.239-1.006-1.146-1.683-1.007-2.794.14-1.132 1.015-1.514 1.851-2.102 1.58-1.113 2.718-3.191 3.291-4.991.319-1.001.406-1.781.07-2.785-.531-1.583-.81-2.877-.943-4.566l2.163.23c-.158-.64-.182-1.147-.473-1.735-.097-.19-.597-.34-.568-.61.049-.47.684-.46.96-.788.717-.844.925-2.818 1.222-3.842.282-.973.431-2.154.961-3.027.986-1.627 2.204.668 1.958-1.641-.124-1.17-.215-2.904-1.673-3.074-1.735-.202-2.235.482-2.072-1.599.113-1.472-.283-4.632 1.296-5.422.752-.377 1.991-.332 2.83-.402 1.005-.085 1.795.447 2.72.416 1.55-.053 1.46-2.263 1.639-3.386.786-4.996 1.182-10.08.695-15.126-.192-1.992-.316-4.498-1.134-6.369\"\n              />\n              <path\n                d=\"M413.045 299.57c-.102-3.646-.102-3.646 1.921-5.028.536 2.32-.795 3.485-1.92 5.028m36.757 9.305c.436-.869 2.236-.615 2.998-.604-.356.735-1.593 2.525-1.97 3.89-.418-.79-1.455-2.439-1.028-3.286m-4.725 25.824c.79-.626.606-.595.983-1.351.292-.586.223-.893.849-1.283 1.268-.786 1.464-.782 1.79-2.46.284-1.462.167-3.547.808-4.9.46-.97 1.978-1.06 2.005-2.277.05-2.366-4.228-3.572-3.412-5.959.244-.71 1.015-.931 1.342-1.542.2-.373.063-.86.13-1.259.146-.89.392-1.085 1.214-1.319-.09.408-.096.77.045 1.042.54 1.045 2.691-.207 3.18-.928 1.011-1.489.077-3.96-.255-5.512-.452-2.11-.384-3.716-.216-5.832l2.752 3.02c.5-1.523.587-2.343 1.984-3.295 1.296-.883 1.799-1.468 2.63-2.778.316-.498.53-1.05 1.156-1.226.613-.17 1.622.49 2.136.235.32-.16.664-1.81.772-2.105.344-.935.687-1.872 1.029-2.807-1.962-4.954-3.565-10.207-6.497-14.713-2.686-4.128-6.575-7.465-10.505-10.396-1.96-1.463-3.944-2.952-6.004-4.277-2.067-1.332-4.3-1.812-6.505-2.806-2.21-.996-4.751-2.028-7.205-2.152-1.248-.063-2.451.229-3.701.064-1.383-.182-2.711-.65-4.084-.883-.003 7.18-2.617 14.464-5.062 21.144-1.112 3.04-2.707 5.845-3.875 8.862-1.177 3.035-2.333 6.063-3.612 9.058-2.635 6.17-5.04 12.607-8.437 18.41-.3.515-.643.882-.463 1.338.052.13.483.392.595.507.344.353.623.768.86 1.198.557 1.014.815 2.155 1.225 3.228.944 2.455 2.627 4.864 3.928 7.163 1.488 2.627 3.479 4.923 5.67 7 1.031.979 2.556 1.879 3.175 3.175.485 1.016.505 2.21.849 3.272l.36-2.548c.9 1.912 3.222 2.09 4.901 3.042 2.126 1.206 3.975 2.694 6.243 3.669 2.285.983 4.666 1.774 7.129 2.177 1.226.199 2.508.348 3.752.294 1.273-.056 2.187-.672 3.339-1.125-3.617-3.117-2.3-8.524-.237-12.118l1.904 4.19c.418-.994 1.849-1.931 1.212-3.098-.385-.706-.885-.524-.996-1.34-.086-.622.331-1.472.635-2.001.273.74.384 1.417.484 2.202M434.538 357.951c-.813-1.794-4.16-2.21-5.84-2.554-2.776-.57-5.435-2.21-7.93-3.516-2.39-1.251-4.411-2.419-6.346-4.283-.903-.869-1.652-1.055-2.766-1.554-1.07-.479-1.799-1.229-2.572-2.087-1.617-1.793-3.728-3.152-4.955-5.258-1.243-2.139-2.966-3.505-4.493-5.43-1.786-2.254-3.055-4.861-4.609-7.269-2.786 3.001-3.54 7.684-5.23 11.326-2.105 4.538-4.118 9.12-6.095 13.716-3.544 8.245-6.988 16.541-10.074 24.97-.113.31-.72 1.34-.616 1.673.103.325.888.681 1.136.946.652.692 1.062 1.54 1.586 2.331a31.203 31.203 0 0 0 3.242 4.059c2.674 2.854 5.788 5.528 9.193 7.465 1.48.843 3.588 2.512 5.282 2.367 2.179-.186 3.835-.333 6.025.161 2.135.481 3.996.9 6.196.841.858-.023 1.75-.137 2.57.2.588.243 1.006.914 1.67.944.833.037 1.333-.748 2.102-1.033.672-.248 1.392-.285 2.1-.25 1.036.05 3.452.985 4.28.184.897-.863.555-3.358 2.233-3.685 1.245-.244 3.767 2.034 4.785 2.672-.44-1.324-1.952-3.913-1.13-5.302.355-.603.85-.71 1.561-.566.828.168.898.76 1.556 1.129 3.57 2.005 3.253-7.531 3.134-8.991L427.81 381c0 .836.264 2.711-.298 3.052-.463.281-2.149 0-2.734 0 1.241 1.18 1.822 2.19-.05 3.198-1.276.687-2.856-.077-2.99-1.646-.143-1.643 2.422-1.894 1.95-3.517-.63-2.178-2.549 1.51-2.898 2.153-.512-1.89-.191-3.62 1.076-5.114 1.5-1.772 3.21-1.878 5.339-1.318.203-.895.662-1.512.908-2.328.294-.975-.154-.742-.583-1.588-.7-1.379.7-1.857.964-3.042.157-.707-.132-1.326-.477-1.917-.383-.658-1.127-1.112-.026-1.471.817-.267 1.782.516 2.553-.189.835-.764.528-2.36.982-3.31.682-1.437 1.442-.55 2.55-.147.833.303 1.083.274 1.183-.645.05-.46-.012-.918-.364-1.243-.575-.53-1.37-.152-2.019-.33-.881-.24-.924-.796-1.26-1.592 1.535-.136 1.558.353 2.95.941 1.106.468 2.32.399 3.434-.01-.773-.278-1.715-.348-2.406-.828-.878-.61-.678-1.324-1.056-2.158M530.243 305.993c1.519-2.807 2.893-5.681 4.26-8.564.83-1.751 2.622-4.172.494-5.615-1.435-.973-4.058-2.34-5.871-1.605-1.539.624-2.384 4.264-4.502 1.877-.386 1.101-1.7.921-2.487 1.517-.585.443-.532.892-.886 1.46-.367.589-.984.992-1.439 1.506a11.923 11.923 0 0 0-1.372-2.132c-.483.812-.37 1.306-.637 2.125-.153.473-.288.8-.782.983-1.133.424-2.246-.964-2.819-1.729.34 1.194.516 2.583-.3 3.624-.633.808-1.663.965-2.258 1.81-.667.945-.71 1.663-1.907 2.052-.23.075-1.033.28-1.28.275-.264-.005-.393-.46-.504-.457-.365.01-.986.46-1.32.615.745.938.453 1.33-.351 1.941-.975.741-.921.818-1.4 1.954-.228.54-.496 1.03-1.03 1.328-.536.3-1.25.044-1.696.355-.902.63-.8 2.26-1.512 3.057-.958 1.072-2.169 1.814-3.053 3.014-.894 1.21-1.608 2.54-2.292 3.875-1.326 2.59-3.099 5.005-3.278 7.95-.074 1.213.027 2.827-.53 3.951-.565 1.138-1.785 1.598-2.256 2.92-.398 1.12-.646 2.516-.787 3.693-.17 1.422.718 2.498.1 3.876-.59 1.313-.708 2.257-.822 3.708-.107 1.345-1.167 2.259-.516 3.408.633 1.115 1.283 1.933 1.462 3.277.194 1.457-.04 1.987-1.304 2.602.765 1.299 1.602 2.304 2.024 3.772.405 1.406.933 2.629 1.826 3.803 1.768 2.323 4.002 3.548 3.962 6.781l24.07-8.053c-3.095-.582-1.513-6.007-1.312-8.034.37-3.713.77-7.444 1.306-11.138.462-3.178 1.364-6.26 1.857-9.436.256-1.646.5-3.3.931-4.912.375-1.404 1.166-2.72 1.482-4.097.717-3.125 1.16-6.03 2.46-9.018 1.246-2.86 2.787-5.578 4.27-8.32M296.544 582.616c.63-.44 1.224-.355 1.96-.434 1.896-.206 3.537-.625 5.39-1.169 2.216-.65 4.575-1.026 6.851-1.42 2.181-.378 4.393-.288 6.524-.927 2.131-.64 3.839-1.24 6.08-1.327 2.454-.096 3.895-1.239 5.902.81 1.799-2.51 4.399-2.494 7.264-2.89 1.028-.143 2.224-.004 2.453-1.231.214-1.143-.695-2.656-1.191-3.583-2.635-4.922-4.86-10.126-8.367-14.514-3.435-4.302-7.885-9.069-12.74-11.756-2.631-1.456-5.669-2.258-8.457-3.354-3.024-1.188-5.983-2.537-8.967-3.821-1.552 1.662-1.68 3.672-2.456 5.779-.725 1.964-1.968 3.694-2.629 5.684-1.322 3.989-2.451 7.938-4.104 11.82-3.493 8.204-6.883 16.378-10.057 24.717 4.996-.776 9.864-1.264 14.91-1.579.988-.062.922-.306 1.634-.805M561 276.25c1.432.153 3.125.522 4.032 1.75 3.88-5.62 8.543-10.64 13.393-15.43 4.711-4.655 9.496-9.256 14.66-13.413 10.447-8.406 21.982-15.154 33.915-21.203-3.782-4.357-7.503-8.777-11.312-13.107-3.556-4.04-7.745-7.448-11.899-10.847-.334 3.372-.92 6.823-.89 10.214.03 3.417.498 6.818.544 10.234.04 2.776-.05 5.735-.764 8.43-.55 2.086-1.795 5.136-4.074 5.802-3.108.907-8.378-.632-10.703-2.816-2.003-1.882-3.062-4.687-4.653-6.888-1.09-1.505-2.233-2.148-4.067-1.55-2.745.895-5.389 2.524-7.966 3.814-2.914 1.459-5.818 2.938-8.734 4.395.2.143 1.387.752 1.437 1.022.016.084-.664 1.491-.685 1.767-.08 1.093.449 2.14.778 3.151.35 1.077.63 2.198.584 3.34-.049 1.214-.717 2.046-.957 3.158-.253 1.172.612 1.586 1.058 2.608.458 1.046.477 2.176.279 3.285-.162.903-.712 1.837-.705 2.749.005.49.423 1.037.275 1.542-.146.502-.741.786-1.086 1.12 1.573 1.034 1.866.883 1.243 2.571-.449 1.215-.288 2.414-.09 3.66.107.677.806 2.48.334 3.164-.431.627-1.85.137-2.503.114.24 1.263.582 1.131 1.175 2.178.387.682.349 1.567.309 2.327-.106 1.969-1.315 2.187-2.928 2.86M329.565 484.61c2.111.62 4.144 1.081 6.346 1.228 1.905.128 3.873.182 5.645.991.65.297 1.358 1.103 2.065 1.09.846-.013.582-.59 1.174-.965.566-.357.986.043 1.54.194.827.225 1.656.216 2.513.245 2.369.078 4.738.127 7.107.186 2.134.053 4.2.403 6.323.415 2.24.013 4.48 0 6.722 0-1.764-3.39-3.246-6.945-6-9.662-1.396-1.375-2.566-2.914-3.889-4.356-1.312-1.431-2.925-2.452-4.38-3.715-1.53-1.329-2.774-2.714-4.558-3.733-.736-.42-1.568-.975-2.373-1.223-.665-.205-1.322-.117-1.936-.48-.72-.426-1.366-1.307-2.063-1.812-.731-.528-1.506-.989-2.294-1.426-1.573-.874-3.211-1.627-4.737-2.587A309.874 309.874 0 0 0 324 485.541c1.711-1.362 3.528-1.528 5.565-.93M452.325 218.852c.439.52.93 1.04 1.223 1.66.337.714.14 1.403.345 2.085.253.84 1.225 1.216.634 2.272-.4.72-1.361.889-1.638 1.73-.497 1.511 1.23 2.9 1.914 4.09.408.708.69 1.46.53 2.28-.099.502-.536.874-.652 1.318-.198.778-.001-.012.09.78.094.819.428 1.68.49 2.542.065.896-.25 1.859-.083 2.727.363 1.904 1.741 4.54 2.846 6.14.957 1.388 1.747 1.88 3.32 1.259 8.4-3.317 10.096-12.415 11.797-20.187 1.009-4.607 1.578-9.05 1.631-13.76.055-4.93.436-9.863.073-14.788-1.39.399-3.129.541-4.092 1.737-.514.639-.526 1.441-1.017 2.021-.677.797-2.082 1.474-2.956 2.129l-13.206 9.877-1.843 1.38c-.633.472-.806.396-.704 1.083.08.54.957 1.224 1.298 1.625M511.299 246.308c-.79 1.031-2.29 1.265-3.252 2.215-.932.922-1.468 2.091-1.914 3.295-.594 1.597-1.232 2.75-1.273 4.48-.038 1.608-.548 3.083-.791 4.653-.163 1.063-.107 1.39.968 1.702 1.494.433 3.305.395 4.836.238 7.337-.75 13.125-6.433 17.578-11.749 5.105-6.092 9.161-12.918 13.549-19.507-2.102-1.186-4.378-2.072-6.384-3.423-1.887-1.272-3.573-2.87-5.43-4.212-.253.773-.253 1.656-.571 2.404-.362.852-.868.993-1.64 1.477-1.394.873-2.523 2.069-3.416 3.427-.82 1.249-1.225 2.842-2.214 3.946-.925 1.036-2.265 1.448-3.315 2.274-1.544 1.216-2.818 3.39-4.063 4.91-1.015 1.239-1.72 2.634-2.668 3.87M374.46 313.167c.284.771.875 1.852.444 2.67-.787 1.494-1.567-.71-2.341-1.067.182 1.283.322 2.56.654 3.813.222.844.52 1.702.361 2.59-.168.948-.946 1.48-.956 2.443-.009.896.462 1.815.598 2.699-1.474-.174-1.794-.365-2.688.748.366.113 1.275.191 1.565.43.426.347.205.18.301.828.13.863-.033 2.294-.063 3.222-.033 1.073-.647.877-1.112 1.613-.323.512-.241 1.502-.16 2.07.115.784.765 1.646.67 2.433-.115.953-1.016 1.009-1.464 1.72-.586.936-.07 1.622.193 2.584.358 1.316.304 2.693.477 4.037 6.436-12.966 11.477-26.59 18.686-39.153.176-.305.35-.612.523-.92a55.67 55.67 0 0 1-.638-.378c-.096-.63-.07-1.412-.126-2.113-.124-1.517-.542-2.988-.735-4.494-.215-1.684.16-3.3-.004-4.969-.055-.577-.19-1.148-.203-1.73-.02-.88.459-1.524.529-2.3.069-.795-.396-1.852-.4-2.706-.002-.67.07-1.338.166-2 .256-1.773.787-3.493 1.055-5.265.55-3.639.586-7.338 1.208-10.972-.97 1.431-2.067 2.772-3.03 4.21-.96 1.433-1.579 3.011-2.449 4.488-.736 1.25-1.63 2.392-2.581 3.481-.793.909-.782.85-.464 1.977.135.484.323 1.05.245 1.563-.337 2.206-3.633 1.46-3.155 3.862.243 1.213 1.155 2.329.66 3.626-.443 1.163-1.776 1.756-2.282 2.911-.556 1.273.189 2.149.237 3.384.042 1.077-.44 1.915-1.175 2.65-1.01 1.01-.964 1.672-1.223 3.103a11.194 11.194 0 0 1-1.331 3.593c-.64 1.1-1.43 1.432-1.094 2.67.245.895.779 1.772 1.102 2.649M359.134 333.02c1.104 4.23 2.804 8.305 5.138 11.98.396-2.146 1.024-4.21 1.133-6.404.107-2.171.18-4.323.418-6.486.447-4.048 1.2-8.052 2.027-12.034 1.735-8.358 3.382-16.727 5.15-25.076a2039.87 2039.87 0 0 0-7.841 12.52c-1.264 2.041-2.527 4.083-3.786 6.126-1.03 1.67-2.91 3.761-3.198 5.745-.328 2.246-.109 4.884-.033 7.156.074 2.211.435 4.34.992 6.473M396.008 282.95c.045.574.447 1.207.559 1.795.133.698.125 1.417.143 2.125.042 1.71.114 3.42.172 5.13 3.455-4.756 5.305-10.413 8.419-15.374 1.347-2.148 2.835-4.225 3.825-6.569 1.086-2.574 2.089-5.137 3.342-7.641.685-1.368 1.39-2.726 2.067-4.097.324-.657.668-.965.319-1.606-.148-.27-.626-.63-.915-.69-.896-.19-1.417.867-2.128 1.226-.97.49-2.19.324-3.207.667-2.344.789-4.59 2.25-6.885 3.208-.73.305-1.257.425-1.2 1.301.052.778.854.62.028 1.297-.447.366-1.033.196-1.547.145 0 1.68.345 2.698-.475 4.196-.655 1.2-.386 2.116-.464 3.384-.09 1.452-.652 2.955-1.197 4.292-.51 1.255-1.27 2.236-.529 3.544.409.721 1.287 1.249.775 2.073-.458.739-1.194.462-1.102 1.595M386.058 505.442c-2.49-1.477-.133-2.978 0-4.36v4.36Zm-3.806-8.436c-.377.018-1.658.154-1.89.544-.102.173.1 1.779.1 2.022-.007 1.228-.132 2.455-.064 3.683.068 1.257.7 2.416.752 3.623.05 1.134-.668 1.741-1.005 2.752-.446 1.332.148 4.998 1.631 5.37.035-.315.1-2.745.318-2.848.71-.336 1.055 1.5 1.257 2.002 1.966-1.945 2.548-4.614 3.47-7.224 1.062-3.003 2.12-6.006 3.179-9.01-1.301-.129-2.608-.208-3.905-.379-1.258-.166-2.565-.597-3.843-.535ZM347.82 582.211c-1.103.466-.787 1.797-.751 2.969.046 1.6.582 2.901 1.99 3.82.52-1.384 2.385-4.416 1.843-5.862-.437-1.167-2.062-1.358-3.082-.927\"\n              />\n              <path\n                d=\"M561 249c.727-.663 1.853-1.095 1.988-2.175.133-1.068-.874-2.846-1.192-3.825l-.796 6M399.614 454.552c-1.89-.008.154-3.94.457-4.842.596 1.019 2.022 4.853-.457 4.842m15.75-49.73c.745-.445 2.152-.963 2.558-1.805.47-.975-.495-.966-1.342-1.025-1-.07-2.315-.135-3.293.055-1.003.196-1.432.426-2.371-.167-.533-.335-1.038-1.168-1.65-1.29-.636-.126-1.37.546-1.92.801-1.92.887-3.957.313-5.993.41-.769.037-1.407.22-2.12-.111-.912-.424-1.12-.988-2.241-.913-1.817.123-3.208.677-5.07.181-1.155-.307-2.744-1.526-3.987-1.15-1.154.349-1.757 2.164-2.67 2.933-.306-1.583-.473-3.332-1.686-4.52-1.359-1.33-3.56-1.807-5.134-2.9-3.554-2.466-6.128-6.015-8.837-9.321-1.72 2.596-2.943 4.975-4.092 7.89-1.097 2.782-2.163 5.575-3.26 8.357-2.21 5.6-4.567 11.146-6.988 16.66-4.915 11.194-10.433 22.082-15.268 33.319 3.307.08 6.537 1.706 9.386 3.265.745.408.777.569 1.256 1.213.231.31.546 1.07.966 1.174.246.06 1.031-.376 1.42-.32.582.085.99.463 1.43.812a167.954 167.954 0 0 1 8.204 6.871c1.213 1.087 2.036 2.114 2.86 3.515.906 1.545 1.887 2.527 3.269 3.654 2.23 1.818 3.519 5.01 5.078 7.443.895 1.398 1.768 2.817 2.453 4.332.62 1.37.836 3.016 1.963 4.09 2.383 2.265 6.111.964 8.999 1.339 1.136.147 1.41.468 2.432.01.012-.403.165-.547.46-.432.337.086.644.239.92.457.752.409 1.468.902 2.197 1.351l1.276-3.145c-.478-.01-2.205.2-2.474-.521-.226-.605.722-.774 1.079-1.148.396-.416.628-1.769 1.4-1.741.632.023.597.577.588 1.118 1.362.029 1.35-1.158 1.581-2.169.157-.68.377-1.351.554-2.028.117-.456.882-2.325.689-2.717-.486-.977-3.607-.917-1.617-2.107.634-.38 2.122-.26 2.614-.796.391-.43.426-2.19.542-2.779-.928.065-2.044.626-2.613-.2-.822-1.194.378-3.017.985-4.014.784.617 1.274 1.292 2.168.578.96-.765 1.834-2.194 2.191-3.296-1.036-.031-.851.175-1.378-.633-.3-.462-.386-1.263-.535-1.78-.304-1.063-.92-1.873.362-2.157.802-.177 1.002.008 1.235.77.307 1.004.196 2.725.316 3.798 1.255-1.583 2.542-3.287 2.07-5.434-.799.795-.88.58-1.844-.038-.962-.617-1.909-1.257-2.862-1.89 1.206-1.093 3.119-.034 4.307-.932.808-.61.395-2.483.45-3.325.068-1.06.528-2.131.465-3.192-.066-1.147-1.381-1.65-.684-2.702.49-.737 1.625-.626 1.837-1.73.214-1.107-.906-1.774-1.74-2.257 1.234-.401 3.604-.828 2.49-2.48-.527-.78-1.165-.848-1.154-1.956.01-.801.538-1.667.88-2.364.461 1.058 1.142 3.541 2.578 3.457 1.197-.07 2.26-1.145 1.915-2.228-1.061-3.338-4.08-3.581-7.017-4.209.549-2.023 1.997-1.906 3.46-.879.867.607 1.409 1.119 2.512.493 1.15-.652.594-.895.087-1.832-1.035-1.906.398-2.999 1.8-4.11.808-.64 1.2-1.44 1.89-2.135.707-.71 1.851-.867 2.743-1.284-1.068-.522-2.036-1.067-3.225-.66-.79.272-1.368.802-2.27.344-2.019-1.022.603-1.283.872-2.127.152-.48-.366-1.454-.17-2.135.2-.696.633-1.287 1.019-1.887.82-1.275 1.717-2.563 1.228-4.153.988 1.137 1.32 1.387 1.399 2.986.07 1.42.079 2.846.364 4.244.061-2.061 1.953-3.435 2.271-5.418.098-.618-.404-2.133.185-2.463.46-.258 1.401.4 1.888.403-.339-1.883-.395-3.866-1.032-5.685-.623-1.782-2.244-2.466-3.604-3.633\"\n              />\n            </g>\n            <g fill=\"currentColor\">\n              <path\n                d=\"M933.692 204.51c-2.507.524-4.924 1.334-7.45 1.815-2.994.568-5.992 1.09-9.01 1.528-2.025.294-3.858.756-5.189 2.449-2.477 3.153-4.97 8.59-1.559 11.936 1.604 1.572 4.416 1.077 6.477 1.731 2.296.73 4.435 1.539 6.842 1.853 11.221 1.457 22.382 4.17 33.36 6.87 5.01 1.232 10.008 2.936 14.797 4.858 2.452.984 4.848 2.13 7.04 3.613 1.875 1.267 4.014 2.516 5.524 4.218-6.004 1.02-12.745 1.139-18.75.12-3.011-.512-6.042-.369-9.08-.599-3.044-.23-6.088-.446-9.129-.714-2.95-.26-5.881-.587-8.811-1.026-1.085-.162-2.183-.323-3.281-.18-.638.082-1.041.276-1.624.144-.488-.111-1.012-.494-1.502-.658-2.248-.75-4.647-.606-6.978-.74-1.747-.1-3.611-.625-5.36-.238-3.074.678-4.476 4.996-5.18 7.643-.442 1.668-.09 3.741.45 5.39.62 1.89 1.758 1.855 3.282 2.713 2.178 1.227 4.089 2.568 6.438 3.525 1.967.803 3.98 1.5 5.927 2.354 4.287 1.877 8.935 3.506 12.973 5.875 2.19 1.286 4.262 2.57 6.558 3.684a44.463 44.463 0 0 1 5.949 3.457c3.852 2.672 7.204 5.994 10.062 9.703-1.326 0-2.409.172-3.678-.278-1.559-.55-3.016-1.359-4.595-1.857-3.008-.95-5.957-1.845-8.931-2.928-2.971-1.083-6.015-2.156-9.049-3.052-1.555-.46-3.126-.664-4.703-1.001-1.391-.299-2.626-.923-3.94-1.45-6.31-2.534-13.063-3.753-19.59-5.582-6.357-1.78-12.64-3.63-19.13-4.883-3.02-.584-6.047-1.135-9.097-1.554-2.985-.41-5.585.003-8.47.768-3.036.806-5.79 1.552-8.689 2.828-2.072.912-5.143 1.71-6.759 3.284-.966.942-1.597 1.874-2.827 2.562-.935.523-1.95.888-2.954 1.252-2.276.825-4.431 1.91-6.693 2.764-1.424.538-2.9.962-4.424 1.06-1.457.093-1.967.446-3.274 1.084-2.044.994-4.285 1.461-6.44 2.14-2.146.677-4.588 2.466-6.912 1.651-2.258-.793-3.704-3.701-5.05-5.506-3.548-4.745-6.597-9.445-8.57-15.058-2.092-5.953-4.088-11.939-6.113-17.915-1.052-3.108-2.11-6.213-3.183-9.314-.597-1.72-1.833-3.572-.485-5.161 1.564-1.844 2.12-4.748 3.737-6.812 1.607-2.051 3.419-3.937 5.122-5.907.995-1.15 1.966-2.324 2.852-3.561.726-1.014 1.264-2.257 2.07-3.198.732-.855 1.809-1.358 2.612-2.148.873-.859 1.65-1.877 2.451-2.805 2.102-2.436 4.101-5.018 6.343-7.326 1.85-1.906 3.964-3.602 5.865-5.48 4.117-4.064 8.49-7.858 12.757-11.76 4.155-3.8 8.405-7.478 12.449-11.368 3.8-3.657 8.36-6.613 12.62-9.67 4.666-3.35 9.14-6.884 14.165-9.708 4.807-2.703 9.646-3.517 15.012-4.318-.53 1.042-.908 2.145-1.61 3.087-1.039 1.39-2.398 2.63-3.573 3.907a1007.678 1007.678 0 0 1-7.206 7.758c-4.703 5.009-9.629 9.815-14.193 14.952-3.637 4.093-6.464 8.27-7.966 13.589-.792 2.804-1.186 5.812.515 8.389 1.302 1.97 3.442 1.817 5.6 1.624 5.56-.498 11.076-2.39 16.58-3.373 6.118-1.093 12.374-1.361 18.55-2.02 3.1-.33 6.161-1.183 9.261-1.417 1.398-.105 2.778.18 4.175.064 1.39-.116 2.783-.455 4.152-.709 2.879-.534 5.494-.838 8.408-.45 2.897.386 5.666.084 8.564-.154 6.12-.505 12.393.156 18.48.816 5.827.632 11.606 1.334 17.297 2.724-5.96 1.516-11.909 3.07-17.903 4.453-6.119 1.41-12.437 2.36-18.444 4.18-2.614.792-5.3.906-7.962 1.463ZM461.873 330.8c.653-2.372 1.314-4.92 2.144-7.287.191-.547.486-.972.795-1.377-.563.938-.96 1.87-1.34 3.128-.555 1.839-1.066 3.69-1.599 5.535Zm-1.306 2.425Zm-.477 1.174Zm1.654-3.147Zm364.847-22.126c-2.377 1.514-4.69 2.471-6.637 4.57-4.39 4.728-9.118 9.203-13.342 14.076-1.698 1.956-2.555 4.38-4.452 6.202-2.156 2.069-4.786 3.68-7.225 5.385-5.418 3.787-10.782 7.88-16.499 11.202-1.282.745-2.58 1.517-3.902 2.184-.87.438-1.966.674-2.728 1.294-.726.59-1.019 1.467-1.81 2.041-.582.424-1.282.77-1.892 1.157a857.973 857.973 0 0 1-15.14 9.362c-4.963 3-9.927 6.04-14.786 9.207-2.582 1.685-5.021 3.577-7.615 5.238-2.113 1.353-4.32 2.556-6.392 3.972-2.197 1.502-4.248 3.04-6.653 4.217-2.326 1.138-4.745 2.08-7.06 3.24-1.365.682-2.6 1.512-3.9 2.297-.85.512-1.563.438-2.488.754-2.696.923-5.113 2.521-7.863 3.373-11.426 3.54-22.474-1.51-32.433-6.881-5.02-2.708-9.59-6.174-14.399-9.225-2.102-1.333-4.726-2.302-6.65-3.869-.967-.788-1.34-1.618-2.472-2.24-1.025-.56-1.959-1.124-2.883-1.844-4.559-3.548-8.818-7.191-12.887-11.3-2.221-2.244-4.442-4.495-6.608-6.79-1.697-1.8-3.02-3.985-4.586-5.915-3.77-4.639-7.426-9.346-11.06-14.09-1.764-2.303-3.509-4.622-5.278-6.922-1.18-1.534-2.959-3.049-3.364-5.035-.374-1.826.698-3.574 1.58-5.08 1.327-2.269 2.594-4.523 3.484-7.007 1.339-3.736 3.382-10.893-.706-13.573-1.503 2.497-3.404 4.718-5.025 7.134-1.63 2.434-2.333 5.51-4.29 7.678-2.057 2.276-4.796 3.927-6.953 6.146-2.15 2.212-4.117 4.594-6.2 6.87-2.18 2.381-4.495 4.633-6.79 6.903-2.158 2.135-4.622 3.85-7.052 5.665-2.543 1.9-5.163 3.591-7.897 5.202-1.18.696-2.396 1.554-3.69 2.02-1.379.494-2.589.792-3.915 1.478-5.397 2.793-10.84 5.473-16.319 8.097-1.47.705-3.02 1.684-4.6 2.076-.607.15-.954.013-1.622.227-.703.223-1.403.62-2.078.917-2.812 1.242-5.683 2.199-8.596 3.175-6.06 2.03-12.215 3.884-18.209 6.1-5.61 2.077-11.068 4.322-16.85 5.93-5.697 1.585-11.714 1.85-17.579 2.424-1.576.155-3.426-.007-4.94.433-1.36.395-2.112.685-3.593.566-2.62-.21-5.067.288-7.666.687 3.957-7.789 6.012-16.66 8.877-24.91.757-2.182 1.677-4.218 2.307-6.437.561-1.984 1.378-3.888 2.362-5.698 1.2-2.208 1.568-4.763 2.37-7.132-.624 1.862-.962 3.844-1.554 5.71.822-1.568 1.706-3.105 2.49-4.694.82-1.66.81-2.648.82-4.434 2.126.245 2.206-1.941 2.534-3.5.498-2.37 1.024-4.735 1.534-7.102.258-.546.17-1.444.306-2.039.162-.704.432-1.379.672-2.057 1.855-5.256 3.894-10.423 5.24-15.843 1.486-5.976 2.786-12.007 4.122-18.018.71-3.191 1.65-6.443 1.96-9.702.148-1.562.944-6.6-1.268-7.302-1.709-.543-3.54 4.666-3.986 5.813-1.084 2.787-2.108 5.596-3.14 8.403-.923 2.51-1.638 5.045-2.667 7.518-1.04 2.5-1.405 5.104-2.327 7.64-.541 1.49-1.412 2.587-2.008 4.012-.434 1.041-.594 2.171-.95 3.238-.74 2.21-1.885 4.372-2.718 6.572-1.066 2.81-2.379 5.517-3.548 8.285-1.07 2.532-1.68 5.2-2.684 7.738-.966 2.438-2.464 4.615-3.425 7.075-1.056 2.703-2.016 5.442-3.06 8.15-2.154 5.587-4.336 11.131-6.025 16.88-.422 1.439-1.142 2.852-1.493 4.133-.319 1.162-.887 2.082-1.344 3.238-.818 2.073-1.16 4.405-1.575 6.589l.124-.707c-.862.036-1.786.224-2.386-.547-.685-.877-.494-2.579-.622-3.632-1.014.133-.618.59-.507 1.507l.169 1.417.426 3.544c.323-.19 1.003-1.292 1.28-1.323.423-.047.884 1.102 1.08 1.67a4.61 4.61 0 0 1-.268.63c-.268.525-.524.89-.729 1.46-.38 1.063-.668 2.145-1.209 3.147a7.96 7.96 0 0 1-.925 1.386c-.27.316-1.15.84-1.298 1.173-.369.833.194 2.912.141 3.882-.067 1.261-.269 2.611-.82 3.763-.232.483-.653.776-.87 1.193-.306.588-.32.892-.391 1.654-.25 2.715-1.29 5.259-2.23 7.791-1.053 2.844-1.876 5.765-2.834 8.64-.905 2.722-2.064 5.339-3.021 8.04-1.116 3.143-2.11 6.33-3.154 9.496-.781 2.371-1.977 4.478-2.815 6.81-.86 2.387-2.07 4.533-2.488 7.014-.463 2.747-1.91 5.496-2.953 8.067-.872 2.148-2.677 4.431-3.036 6.719-.168 1.074.098 2.077-.256 3.144-.307.926-.894 1.716-1.285 2.602-.537 1.22-.137 2.348-.507 3.594-.321 1.085-1.054 1.847-1.646 2.773-1.043 1.634-.69 3.53-1.762 5.234-1.512 2.405-2.047 5.1-2.858 7.832-.4 1.341-.694 2.723-1.052 4.075-.142.539-.213 1.61-.499 2.107-.357.625-.968.38-1.278.74-.267.312-.326 1.32-.444 1.72-.374 1.27-.91 2.502-1.425 3.722-1.11 2.621-2.384 5.172-3.344 7.853-1.004 2.804-2.012 5.608-3.018 8.412-.478 1.335-.943 2.673-1.46 3.992-.506 1.296-1.037 1.692-1.886 2.683-.836.974-1.182 2.34-1.965 3.373-.736.969-1.232 1.68-1.554 2.886-.606 2.269-1.053 4.548-2 6.716-2.394 5.481-5.378 10.695-7.78 16.183-2.518 5.751-4.908 11.562-7.088 17.45-2.047 5.526-3.355 11.256-5.448 16.763-2.072 5.451-3.852 10.985-5.894 16.452-2.12 5.678-4.25 11.346-6.148 17.101-.685 2.076-1.145 4.14-1.589 6.23.138-.94.271-1.863.43-2.729-2.021 3.381-3.878 7.058-2.991 11.11.552-.78.971-1.663 1.307-2.6-.128.483-.27.955-.467 1.374-.566 1.203-1.098 2.12-1.483 3.453-.851 2.95-1.715 5.899-2.552 8.853-.404 1.423-.781 2.86-1.255 4.263-.421 1.247-1.336 2.329-1.722 3.546-.433 1.362-.285 3.03-.619 4.448-.292 1.247-.72 2.464-1.36 3.577-.497.865-1.208 1.62-1.602 2.544-.48 1.126-.19 2.243-.32 3.428-.165 1.474-.693 2.878-.894 4.345-.194 1.413.465 2.29.716 3.64.263 1.411-.27 2.343-.69 3.632-.359 1.096-.566 2.264-.824 3.386-.111.48-.19 1.985-.53 2.305-.249.233-1.678.27-2.037.333-1.346.236-2.69.496-4.063.496-2.88 0-5.832-.419-8.693-.726-5.792-.621-11.617-1.537-17.17-3.333-5.267-1.704-10.576-4.194-15.463-6.793-4.927-2.62-9.298-6.208-13.416-9.945-2.235-2.029-4.363-4.173-6.492-6.312-1.024-1.028-2.046-2.057-3.083-3.072-.826-.811-1.897-1.584-1.98-2.837-.094-1.412.926-3.03 1.423-4.304.444-1.139.881-2.28 1.313-3.423 1.056-2.793 2.093-5.593 3.132-8.391 2.153-5.796 4.292-11.596 6.447-17.391 2.17-5.83 4.396-11.533 7.017-17.172 2.509-5.4 4.792-10.844 6.877-16.422 1.969-5.267 4.312-10.344 6.545-15.5 1.198-2.77 2.332-5.57 3.25-8.445.768-2.408 1.338-4.68 2.507-6.94.752-1.455 1.365-2.878 1.822-4.454.395-1.363.617-2.53 1.5-3.635 1.863-2.329 2.902-4.959 3.86-7.764 1.867-5.463 4.03-10.986 6.644-16.138 2.647-5.222 5.578-10.232 7.99-15.572 2.428-5.37 5.731-10.2 8.003-15.656 4.686-11.254 11.147-21.616 15.897-32.84 4.678-11.056 10.25-21.678 15.028-32.69a491.488 491.488 0 0 0 7.18-17.389c1.085-2.79 2.16-5.584 3.283-8.358 1.014-2.504 2.768-4.424 3.49-7.01.739-2.647 1.921-4.685 3.175-7.07 1.294-2.459 1.963-5.428 2.985-8.02a665.997 665.997 0 0 1 6.963-16.893c2.458-5.76 5.082-11.44 7.634-17.157.964-2.162 1.504-4.486 2.497-6.633.494-1.068 1.496-1.974 1.938-2.996.206-.474.157-1.134.327-1.642.23-.68.656-1.362.972-2.007 2.56-5.24 5.395-10.28 7.73-15.63 2.386-5.47 4.826-10.934 6.924-16.522 2.073-5.522 4.695-10.729 6.478-16.369.849-2.689 1.696-5.39 2.346-8.135.567-2.393 1.634-5.923 1.093-8.381-.333-1.513-2.091-4.595-3.873-3.2-1.639 1.284-2.625 3.827-3.52 5.634-1.346 2.717-2.774 5.4-3.927 8.208-.92 2.242-1.749 4.404-3.023 6.476-3.07 4.996-5.513 10.227-8.278 15.395-.625 1.17-1.361 2.138-2.212 3.142-.825.974-.591 1.44-.929 2.674-.604 2.21-2.44 3.99-3.371 6.079-1.239 2.78-2.312 5.398-3.862 8.037a79.51 79.51 0 0 0-3.667 6.962c-2.521 5.462-4.944 10.971-7.387 16.47-1.296 2.915-2.554 5.853-3.976 8.71-.625 1.254-1.236 2.527-1.914 3.754-.44.798-1.238 1.449-1.61 2.26-.423.92.042 1.696-.32 2.593-.417 1.041-.872 1.465-1.78.856-2.029-1.356-2.433-4.261-3.521-6.333-2.57-4.896-5.018-9.498-5.978-15.037-.531-3.07-.32-6.197-.3-9.295.02-2.75 1.652-4.617 3.088-6.89 3.371-5.345 6.748-10.685 10.178-15.99 1.51-2.334 2.825-4.788 4.37-7.094 1.493-2.228 3.484-3.874 5.123-5.942.914-1.152 1.583-2.416 2.56-3.526.82-.936 1.605-1.907 2.276-2.957 1.279-1.999 2.152-4.162 3.556-6.1 3.313-4.577 6.684-9.128 10.174-13.571 1.86-2.37 4.052-3.838 6.354-5.726 2.254-1.849 4.271-3.958 6.349-6 4.001-3.934 7.774-8.042 12.224-11.46a214.241 214.241 0 0 1 14.085-9.959c2.376-1.537 5.326-2.696 7.236-4.776.788-.858 1.605-1.66 2.615-2.258.97-.574 2.1-.727 3.042-1.252 2.671-1.487 5.128-3.927 7.557-5.789 2.42-1.851 4.838-3.704 7.257-5.555 1.017-.78 2.935-1.7 3.677-2.704.417-.563.367-1.349.839-1.942 1.068-1.341 3.18-1.467 4.678-2.044 2.878-1.107 5.813-1.703 8.833-2.287 2.662-.515 5.203-1.657 7.759-2.552 5.593-1.96 11.39-3.138 17.288-3.67-2.652 7.822-5.663 15.53-7.691 23.55-.821 3.25-.96 7.043-2.33 10.105-.492 1.103-1.81 2.153-1.151 3.398.488.927 1.86 1.93 2.736 2.499 1.817 1.182 4.06-.129 5.845-.843 3.01-1.203 5.927-2.75 9.153-3.304 3.35-.573 6.164-3.746 9.642-3.694 1.454.022 2.634.717 3.723 1.62 1.121.932 2.39 1.68 3.477 2.662 2.388 2.156 5.167 4.007 8.188 5.202 1.048.414 1.942.2 2.912 1.003.724.599 1.299 1.461 2.268 1.683-4.593 4.905-9.047 9.764-12.935 15.268-1.905 2.696-3.324 5.331-4.366 8.469-.493 1.483-.948 2.616-.002 4.05.523.794 1.358 1.447 2.336 1.296 2.363-.364 4.462-3.555 5.773-5.303 1.52-2.03 3.191-3.91 4.775-5.889 3.29-4.11 6.21-8.424 10.307-11.805 1.22-1.006 2.454-2.148 3.806-2.975 1.078-.66 1.839-.156 3.033-.366 2.99-.526 5.675-2.09 8.347-3.442a633.822 633.822 0 0 1 8.705-4.347c1.526-.744 3.773-2.316 5.565-1.564 2.004.84 3.137 3.977 4.236 5.655 1.055 1.613 2.006 3.015 3.737 3.932 2.84 1.507 8.359 3.336 10.847.437 3.523-4.105 3.165-10.828 2.861-15.862-.187-3.086-.565-6.196-.328-9.288.208-2.72.528-5.433.796-8.15 5.007 4.107 9.738 8.275 13.887 13.265 2.207 2.656 4.495 5.241 6.774 7.836 1.14 1.3 2.167 2.436 2.946 3.966.671 1.318 1.627 2.458 2.624 3.539 2.086 2.258 3.51 5.256 5.1 7.89a476.77 476.77 0 0 1 4.549 7.68c2.913 5.038 5.642 9.996 7.87 15.375 1.158 2.796 2.732 5.335 3.916 8.118 1.171 2.76 2.33 5.528 3.458 8.308.651 1.604 1.433 3.223 1.94 4.877.352 1.15.041 2.605.463 3.673.405 1.024 1.376 1.922 1.805 3.025.434 1.116.69 2.293 1.133 3.406 2.171 5.45 5.148 10.647 7.58 15.99 2.522 5.544 5.04 11.097 8.058 16.396 3.062 5.376 6.922 10.307 10.615 15.258 1.934 2.592 3.935 5.145 5.789 7.793.668.953 1.263 2.047 2.155 2.817.843.728 1.908 1.013 2.888 1.499.541-1.44 1.278-2.384 1.046-3.98-.196-1.359-.702-2.691-1.123-3.989-.813-2.51-2.945-4.754-2.41-7.536.499-2.595 2.622-4.651 4.23-6.611 2.125-2.59 4.26-5.173 6.398-7.753 7.183-8.662 14.811-16.962 22.25-25.424 3.787-4.307 7.5-8.686 11.416-12.877 1.755-1.88 3.793-3.408 5.664-5.16 1.534-1.435 2.544-3.247 3.99-4.742 1.073-1.106 2.347-1.913 3.438-3.031l2.66-2.725a875.565 875.565 0 0 0 5.833-6.01c3.868-4.03 7.481-8.281 11.291-12.363 7.357-7.882 15.14-15.45 22.82-23.011 2.218 6.551 4.052 13.38 5.641 20.11.391 1.657.553 3.38 1.14 4.974.578 1.566 1.334 3.073 1.942 4.63 1.35 3.46 2.383 7.15 4.064 10.448 3.191 6.26 5.997 13.522 10.594 18.911 2.288 2.68 5.421 4.977 8.087 7.281l8.613 7.45c-2.584 1.945-5.147 3.897-7.876 5.637Zm-237.763 41.592c-.237-.554-.464-.851-.733-1.05.2.119.376.306.605.749.493.95.796 2.047 1.148 3.056-.318-.927-.635-1.854-1.02-2.755Zm-69.39 49.636c1.984 2.22 4.085 4.338 6.093 6.536 1.852 2.027 3.338 4.25 5.001 6.426a264.29 264.29 0 0 0 11.223 13.7c3.745 4.28 7.789 8.315 11.364 12.742 3.574 4.427 6.273 9.175 8.95 14.166 1.241 2.313 2.654 4.535 4.33 6.557.784.944 1.837 1.771 2.33 2.907.547 1.258.714 2.778 1.026 4.108 2.785 11.894 5.636 23.778 8.32 35.695 1.302 5.776 2.173 11.63 3.431 17.414 1.274 5.855 3.183 11.542 4.387 17.417 2.44 11.898 4.108 23.954 6.728 35.813 2.553 11.547 6.984 22.523 9.391 34.12.339 1.628.827 3.114.45 4.76-.314 1.37-.555 2.572-.579 3.992-.042 2.443-.277 4.366-1.693 6.45-2.79 4.11-6.687 7.686-11.2 9.738-2.421 1.1-4.724 2.58-7.339 3.2-1.258.296-2.48.1-3.727.285-1.266.19-2.31 1.069-3.474 1.546-4.656 1.914-10.6 1.34-15.543 1.344-5.447.005-10.916-.36-15.945-2.64a27.004 27.004 0 0 1-1.218-.59c-.679-.104-.799-.41-.359-.915.002-.551.315-1.18.34-1.763.051-1.24-.319-2.431-.63-3.615-.737-2.81-1.43-5.632-2.074-8.466-2.665-11.75-3.928-23.681-5.567-35.601-.844-6.148-2.074-12.24-3.133-18.354-1.015-5.869-1.625-11.761-2.393-17.664-.765-5.88-1.582-11.756-2.375-17.632-.432-3.218-1.365-6.378-1.775-9.581-.31-2.427.332-4.718-.218-7.151-1.293-5.727-1.346-11.665-2.805-17.355-1.504-5.863-3.678-11.625-5.702-17.325-1.047-2.952-2.09-5.906-3.138-8.858-.618-1.746-1.326-3.62-3.121-4.456-.996-.463-1.981-.411-2.876-1.102-1.098-.848-2.042-2.003-3.02-2.986-2.104-2.118-4.193-4.25-6.305-6.36-8.217-8.212-16.18-16.821-25.25-24.095-4.215-3.38-8.124-7.193-12.793-9.946-5.004-2.95-9.938-6.014-14.944-8.96a55.41 55.41 0 0 0-7.661-3.76c-2.35-.94-.915-3.187-.237-5.007 1.049-2.814 1.958-5.67 2.835-8.543.663-2.17 1.025-4.98 3.246-6.157 1.453-.77 2.088.127 3.481.562.99.308 2.03.356 3.057.311 2.326-.102 5.005-1.145 7.297-.782 1.535.243 2.298.303 3.85.021 1.382-.25 2.838-.255 4.239-.359 2.587-.193 5.248-.225 7.803-.674 5.594-.984 11.26-2.273 16.625-4.152 5.744-2.012 11.218-4.806 16.722-7.378.37 2.534.733 5.11 1.67 7.51.747 1.92 1.984 4.489 3.817 5.507 4.014 2.23 6.114 6.07 9.089 9.4Zm83.955 241.454c1.743-.948 2.075.383 3.11 1.812 2.826 3.906 5.672 7.798 8.526 11.685 2.777 3.784 5.564 7.564 8.344 11.347 2.607 3.545 5.487 6.928 7.881 10.623 2.46 3.791 4.41 7.954 6.298 12.05 1.604 3.487 3.935 7.117 2.25 11.001-1.564 3.606-6.016 5.129-9.255 6.844-4.092 2.167-7.32 3.7-11.95 2.051-8.811-3.137-17.442-7.213-25.79-11.41-7.65-3.848-13.438-9.533-19.78-15.117-3.33-2.932-6.78-5.63-9.895-8.806-3.238-3.304-6.323-6.757-9.584-10.038-5.073-5.11-10.393-9.627-9.517-17.537 4.84 1.621 9.601 3.657 14.63 4.63 5.298 1.024 10.702 1.65 16.103 1.37 2.328-.122 4.457-.757 6.727-1.208 2.216-.44 4.474.019 6.556-1.07 1.842-.963 2.984-2.106 5.091-2.608 2.144-.51 3.953-1.212 5.775-2.475 1.494-1.036 2.88-2.273 4.48-3.144ZM450.63 431.929c.05.01.097.028.142.056a.754.754 0 0 0-.142-.056Zm-5.641-3.187c.052.033.105.071.16.11-.053-.039-.107-.074-.16-.11ZM341.233 708.115a440.206 440.206 0 0 1 6.696 12.35 238.179 238.179 0 0 1 3.124 6.248c.939 1.934 1.78 3.432 1.892 5.564-4.525-.505-9.12-3.186-12.963-5.555-4.041-2.49-7.465-5.574-10.894-8.826-3.346-3.17-6.76-6.307-10.343-9.21-1.653-1.34-3.38-2.49-5.207-3.574-.558-.33-1.123-.67-1.577-1.143-.556-.58-.757-1.592-1.432-2.03-1.379-.893-3.534.44-4.769 1.044-1.635.8-3.209 1.757-4.58 2.962-1.57 1.382-2.623 3.153-3.975 4.728-1.269 1.477-2.552 2.888-3.693 4.47-2.585 3.58-5.395 7.388-8.688 10.35-1.502 1.35-3.395 2.423-4.683 3.946a30.908 30.908 0 0 1-4.01 3.963c-3.267 2.688-6.1 5.376-8.904 8.546-3.09 3.495-6.605 6.626-9.942 9.88-.512-2.06.403-3.784 1.312-5.561 1.058-2.074 1.807-4.314 2.69-6.466a152.331 152.331 0 0 1 6.448-13.744c2.214-4.164 4.48-8.296 6.626-12.497 1.78-3.485 4.534-7.786 3.684-11.858-.332-1.588-1.196-3.985-2.911-4.516-1.71-.53-3.428.971-4.806 1.787-4.038 2.388-8.22 4.269-12.545 6.073-4.313 1.8-8.663 3.55-12.814 5.705-4.027 2.089-7.827 4.588-11.855 6.669-1.992 1.028-4.101 1.79-6.07 2.865-1.898 1.037-3.734 2.18-5.622 3.232-3.73 2.08-7.616 3.535-11.857 4.145 3.025-3.898 7.005-6.757 10.86-9.76 4.497-3.499 8.966-7.024 13.609-10.33 4.173-2.97 8.418-5.83 12.502-8.925 1.91-1.447 3.795-2.926 5.62-4.477 1.534-1.304 3.183-2.608 3.553-4.708.333-1.89-.53-4.07-2.133-5.164-1.6-1.091-3.635-.843-5.43-.587-5.047.718-9.967 2.26-14.852 3.68-1.124.326-2.275.86-3.4 1.123-1.135.264-2.473.153-3.635.212-2.18.11-4.356.225-6.523.502-2.264.29-4.575.207-6.825.568-2.048.327-3.472 1.436-5.566 1.386-9.298-.225-17.928 4.944-27.127 4.944a2228.587 2228.587 0 0 1 16.498-9.583c2.527-1.454 5.157-2.748 7.6-4.346 2.702-1.767 5.184-3.774 7.975-5.426 9.985-5.91 21.095-10.229 30.203-17.51 2.209-1.766 4.316-3.663 6.448-5.52.482-.42 1.117-1.202 1.691-1.473.914-.428.62-.548 1.423.274.883.904 1.495 2.009 2.227 3.035 2.9 4.066 6.461 7.634 10.482 10.593 4.674 3.438 10.06 5.525 15.297 7.94 5.28 2.433 10.49 5.026 16.021 6.857 5.577 1.847 11.482 2.794 17.305 3.481 6.164.73 11.913.316 18.03-.446.356 4.601.822 8.498 2.991 12.666 2.047 3.933 4.648 7.58 6.824 11.447Zm23.178-350.5c.45.099 1.024.136 1.454.294-.373-.094-.848-.097-1.125-.175-.115-.032-.22-.078-.329-.119Zm1.65 2.656c.177-.438.44-.928.485-1.378-.027.445-.267.94-.484 1.378Zm-52.668 77.857c-6.861 4.082-13.01 9.214-19.655 13.618-3.318 2.198-6.778 4.175-10.326 5.977-1.711.87-3.436 1.733-5.22 2.447-1.548.618-3.036 1.615-4.62 2.084-1.723.51-3.489.202-5.233-.004-1.514-.178-2.986-.082-4.232-1.084-2.25-1.807-3.708-5.42-5.045-7.879-1.912-3.516-4.148-7.183-5.517-10.942-1.276-3.51-2.959-6.72-3.625-10.397 1.179-1.956 1.075-3.992.086-5.987-.455-.918-1.042-1.763-1.58-2.631-.609-.982-.582-1.21-1.676-1.228l3.152 9.79c-1.037-3.21-2.439-6.496-3.152-9.79-.624-2.874-.863-5.661-1.889-8.463-.524-1.424-1.35-2.763-1.76-4.22-.337-1.199-.329-2.466-.489-3.694-.446-3.425-1.326-6.817-1.867-10.235-1.03-6.523-1.691-13.118-2.94-19.604-1.285-6.672-2.94-13.303-4.396-19.941-.555-2.534-1.549-4.705.925-6.433 2.368-1.652 5.002-3.03 7.503-4.468 2.374-1.366 4.735-2.746 7.262-3.808 2.145-.902 4.208-1.762 6.159-3.04 1.214-.795 2.457-.79 3.83-1.233 1.414-.457 2.81-.987 4.21-1.482 2.574-.91 5.143-1.828 7.714-2.745 1.406-.501 4.294-2.343 5.611-.947.683.721.762 2.23.955 3.131.316 1.484.616 2.972.908 4.461 1.128 5.77 2.21 11.56 3.105 17.372.879 5.702 1.379 11.459 2.265 17.158.217 1.396.923 3.12.783 4.525-.102 1.035-.821 1.582-1.53 2.256a67.505 67.505 0 0 0-5.092 5.398c-1.77 2.097-3.462 4.266-5.375 6.238-1.864 1.922-3.484 3.65-4.828 5.994-1.128 1.968-2.636 3.814-2.113 6.17.409 1.83.942 3.652 3.116 2.899 2.515-.87 4.689-3.337 6.653-5.05 1.93-1.682 3.836-3.39 5.803-5.028 2.173-1.812 4.602-3.34 6.703-5.226 1.825-1.638 3.387-3.543 5.119-5.274 4.153-4.156 8.622-7.881 13.04-11.739 2.037-1.779 3.66-3.954 5.506-5.918 1.82-1.934 3.797-3.714 5.708-5.556 4.146-3.995 8.459-8.019 12.321-12.29 1.85-2.046 3.835-3.957 5.699-5.99.769-.839 1.339-1.944 2.07-2.743.707-.773 1.795-1.27 2.587-1.993 3.464-3.16 5.394-7.56 8.81-10.782.909 1.988 1.551 4.017 2.218 6.1.615 1.92 1.078 4.162 2.157 5.88.503.798 1.357 1.378 1.792 2.21.416.799.306 1.747.6 2.591.563 1.61 1.724 3.306 2.59 4.778.967 1.644 2.336 3.14 3.63 4.53.334.36.67.68 1.039.956-.151-.084-.3-.169-.457-.248 1.03 1.753 1.961 2.56 3.637 3.712l-.14.291c-.866 1.874-1.84 3.61-2.521 5.57-1.177 3.387-2.905 6.555-4.017 9.967-.598 1.835-.83 3.731-1.701 5.47-.766 1.53-1.762 2.932-2.511 4.472-1.75 3.603-2.891 7.555-4.27 11.31-1.425 3.879-3.07 7.629-4.831 11.364a232.483 232.483 0 0 0-4.928 11.264c-.697 1.71-1.248 3.62-2.349 5.126-1.19 1.63-2.906 2.052-4.714 2.698-7.162 2.56-14.14 6.403-20.667 10.285ZM227.57 328.122c-4.055-3.431-9.715-2.464-14.695-2.485-5.785-.025-11.543 1.113-17.308 1.5-5.762.388-11.552.664-17.329.544-5.152-.108-10.286-.591-15.335-1.641-2.5-.52-4.944-.773-7.482-.993-1.59-.136-3.06-.619-3.86-2.108-1.054-1.966-.78-4.955-.855-7.12-.074-2.122-.38-4.816.465-6.815.832-1.972 2.683-2.94 4.573-3.664 2.32-.89 4.643-1.772 6.963-2.66 9.4-3.601 19.07-7.722 29.196-8.587 2.812-.24 5.635-.265 8.454-.35 2.421-.072 4.66-.66 7.053-.91 4.995-.521 9.88-.635 14.808-1.68 1.354-.288 2.206.433 3.582.653 1.074.172 2.165.14 3.243.062 2.228-.16 4.356-.434 6.593-.243 2.63.223 5.276.361 7.884.768 2.343.365 4.612.998 6.975 1.266 2.553.29 5.136.4 7.65.964 1.27.283 3.206.557 3.954 1.779.99 1.615.247 4.717.15 6.501-.136 2.513-.29 5.03-.264 7.548.027 2.734.436 5.378.964 8.055.38 1.928 1.195 4.191.76 6.18-.24 1.094-1.039 1.611-2.173 1.435-.785-.122-1.43-.89-2.155-.983-1.409-.181-.04.871-.847 1.775-.647.725-1.719.522-2.58.761-.926.258-1.782.711-2.657 1.097-1.983.873-4.041 1.475-5.994 2.438-4.342 2.14-8.468 4.68-12.6 7.191-.691-2.058-1.185-5.176-2.576-6.877-1.197-1.463-3.13-2.192-4.557-3.4Zm284.537-130.14c.931-2.626 2.157-5.192 2.933-7.867.277-.956.277-2.314 1.256-2.852.813-.448 2.286-.165 3.14-.159 1.58.013 3.16-.005 4.739-.012.79-.003 1.932-.182 2.398.645.48.855-.29 2.423-.306 3.375-.024 1.444.318 2.857.684 4.243 1.563 5.907 3.184 11.743 4.98 17.594-1.79-.805-3.182-2.722-5.226-2.939-1.29-.137-2.282.635-3.471.831-1.017.168-2.03.227-3.041.463-4.544 1.057-8.675 3.413-13.29 4.241.214-1.69.282-3.233.801-4.869.452-1.421.953-2.83 1.439-4.241.971-2.823 1.968-5.638 2.964-8.453Zm14.994-39.632c2.183-.966 4.366-3.768 2.322-6.081-1.102-1.247-3.893-.593-5.334-.296-2.022.417-9.786 5.481-10.741 2.038-.628-2.26.496-5.666 1.523-7.651.65-1.258 1.524-2.486 2.57-3.45 1.12-1.036 1.583-.72 2.962-.567 2.276.254 4.391-.45 5.887 1.77.291.43.35 1.017.96 1.107.47.069.75-.514 1.224-.515.767-.002.853.53 1.152 1.125.783 1.555 1.934 4.611 4.265 3.338 2.356-1.285 2.497-5.45 2.5-7.694.005-3.482.24-6.96.43-10.435.148-2.751.39-5.261 2.395-7.335 1.892-1.955 3.358-4.675 5.657-6.173 2.595-1.692 5.972-1.502 8.946-1.73 3.437-.264 6.964-.642 10.403-.289 3.52.361 6.868.527 10.41.367 3.461-.156 6.917-.371 10.382-.46 3.29-.082 6.728.194 9.985-.16 1.324-.143 3.09-.625 3.965.687.995 1.49.912 4.19 1.191 5.907-3.58-.66-9.423-2.312-10.797 2.748-.416 1.53.872 2.897 2 3.787 1.65 1.3 3.958 1.264 5.96 1.544 1.117.157 2.92.128 3.574 1.25.63 1.077.3 3.087.374 4.271.305 4.924 1.008 9.812 1.52 14.716.489 4.687.858 9.497.15 14.182-.362 2.402-1.346 4.66-1.52 7.08-.109 1.499.125 3.199-1.243 4.19-1.588 1.149-4.321 1.155-6.185 1.565-2.46.542-4.894 1.194-7.314 1.893-3.835 1.109-8.514 1.662-9.897 5.951-1.476 4.578-2.564 9.297-3.991 13.898-.726 2.334-1.738 4.449-2.764 6.662-.397.854-1.02 1.846-.938 2.828.086 1.036.81 2.046 1.21 2.97.875-.456 1.792-.71 2.538-1.382.781-.7 1.405-1.688 2.033-2.527 1.305-1.743 2.233-3.239 4.104-4.372.071.922.29 1.713-.152 2.494-.312.555-1.034 1.12-1.445 1.635-1.151 1.445-2.26 2.928-3.509 4.29-2.486 2.714-5.494 4.95-8.08 7.583-2.593 2.64-5.046 5.738-8.208 7.715-3.047 1.905-6.304 3.48-9.474 5.167 2.786-6.33.858-12.702-2.457-18.394-1.543-2.65-3.42-5.081-5.157-7.602-1.375-1.995-4.032-4.672-3.968-7.236.035-1.364.965-2.541 1.636-3.668.744-1.249 1.32-2.58 1.93-3.9 1.237-2.672 2.85-5.498 3.284-8.44.38-2.575-.202-6.143-1.943-8.205-.7-.827-1.726-.747-2.635-1.309-.893-.553-1.569-1.38-2.302-2.116-.832-.835-1.852-1.412-2.681-2.237-.88-.877-1.498-1.99-2.135-3.047-1.51-2.503-3.057-4.985-4.572-7.487Zm9.576-55.636c2.62.046 4.01 1.524 5.23 3.632-.817 1.283-3.006 5.153-4.812 3.61-.334-.286-.49-.903-.896-1.235-.382-.313-.861-.477-1.304-.674-1-.442-2.133-.87-2.773-1.831-1.508-2.262 2.972-3.527 4.555-3.502Zm51.18 98.181c.47-.127 1.921.825 2.383 1.029.85.377 1.908.746 2.66 1.314.753.569 1.03 1.418 1.546 2.18.156 5.698.515 11.439.472 17.154l-.474-17.159c-.334 1.57-.914 3.012-.912 4.634 0 1.643.25 3.335.404 4.967.29 3.109.637 6.213.955 9.319a84.633 84.633 0 0 1-.277 5.36c-2.273-3.162-4.503-6.363-6.782-9.52-2.038-2.82-4.7-2.984-7.917-3.242l6.312-12.744c.241-.487 1.21-3.178 1.63-3.292Zm371.464 9.659c3.394-.939 6.86-2.243 10.358-2.705 3.31-.436 6.251-1.875 9.447-2.812 2.816-.824 5.666-1.53 8.44-2.494 2.108-.731 4.384-1.454 6.044-3.014 1.719-1.617 2.647-4.13 2.328-6.48-.374-2.745-2.4-3.08-4.71-3.867-11.765-4.006-23.672-6.393-35.951-7.976-6.32-.816-12.711-1.83-19.097-1.7-3.309.07-6.58.252-9.888.04-2.994-.191-6.043.93-8.988.346-3.01-.596-5.822.207-8.856.619-3.224.438-6.483.566-9.733.716-2.953.136-6.09.016-8.962.79-2.809.754-4.984 1.296-7.852.361 2.998-3.316 5.985-6.642 8.994-9.948 6.177-6.785 12.59-14.077 16.327-22.56 1.602-3.637 2.38-8.878-.292-12.263-2.376-3.01-7.566-2.39-10.876-1.896-4.256.633-8.32 2.15-11.982 4.393-3.53 2.162-7.431 3.928-10.643 6.536-3.156 2.562-6.791 4.257-9.982 6.77-3.29 2.593-6.604 5.103-9.932 7.638-7.19 5.476-13.162 12.434-19.968 18.353-3.617 3.146-6.984 6.534-10.218 10.068-1.533 1.675-3.122 3.326-4.432 5.186-1.096 1.556-2.049 3.213-3.204 4.73-1.386 1.814-3.126 3.327-4.586 5.085-1.34 1.618-2.573 3.322-3.762 5.053-1.251 1.822-2.453 3.676-3.695 5.503-.652.96-1.275 2.596-2.585 2.428-1.85-.237-2.874-1.826-4.886-.73-.68.368-1.104.997-1.67 1.496-.795.699-1.707.997-2.632 1.46-1.888.947-3.484 2.353-5.175 3.593-1.793 1.314-3.633 2.398-5.294 3.898-6.978 6.305-13.418 13.06-20.128 19.628-1.622 1.587-3.322 3.094-4.899 4.728-1.254 1.301-2.236 2.846-3.497 4.126-.728.74-1.605 1.038-2.374 1.681-.717.602-1.317 1.55-1.929 2.252-1.473 1.692-2.93 3.398-4.444 5.055-2.965 3.25-6.241 6.078-9.092 9.45-2.911 3.445-6.192 6.595-9.168 9.997-6.262 7.161-12.143 14.474-17.9 22.043-2.856 3.755-6.069 7.243-8.793 11.094-2.589 3.659-4.778 7.58-6.732 11.61-.552 1.137-1.26 4.525-3.29 3.327-.727-.429-1.214-1.692-1.664-2.393-.608-.951-1.213-1.903-1.816-2.856-2.625-4.154-5.434-8.308-7.509-12.771-3.993-8.592-7.966-17.113-11.251-26.008-1.661-4.5-3.557-8.888-5.448-13.295-1.873-4.368-3.293-8.897-5.12-13.28-3.636-8.719-8.414-16.967-13.168-25.112-4.356-7.464-9.025-15.164-15.084-21.384-3.204-3.288-5.723-7.059-9.11-10.21-1.715-1.597-3.487-3.133-5.2-4.733-1.239-1.155-2.293-2.87-3.824-3.647-1.083-.549-2.24-.43-3.41-.382-.908.036-1.915-.23-2.79-.151-.788.073-1.106.758-1.868.91-.778.158-1.292-.203-1.904-.625-3.868-2.669-9.155-3.823-13.57-5.423 2.794-1.73 6.22-1.793 9.34-2.522 2.638-.618 5.102-1.706 7.27-3.34 4.779-3.605 5.575-9.303 6.44-14.879.995-6.407 1.766-13.237.913-19.69a1117.625 1117.625 0 0 0-2.665-18.993c-.46-3.07-1.047-6.066-1.962-9.036-.744-2.42-1.703-4.917-1.617-7.484.042-1.268.085-3.226 1.045-4.144.707-.673 1.747-1.033 2.5-1.696 1.762-1.551 3.179-3.444 4.263-5.522.886-1.696 2.316-4.183 1.47-6.145-.92-2.128-3.845-2.52-5.808-3.028-5.812-1.51-11.681-1.266-17.585-2.097-2.836-.399-5.802-1.226-8.65-1.191-2.806.033-5.608.079-8.417.045-6.12-.073-12.261-.251-18.36.379a103.81 103.81 0 0 1-4.834.388c-1.31.076-2.25.742-3.454.95-.733.126-1.77-.27-2.506-.328a14.315 14.315 0 0 0-3.73.178c-2.594.486-4.607 2.139-7.177 2.656-2.002.403-3.534 1.494-4.557 3.268-2.597 4.495-2.738 10.696-2.965 15.73-.267 5.963.177 11.95-.136 17.904-.076 1.44-.23 2.022-1.754 1.872-2.137-.211-4.01-.783-6.17-.213-4.117 1.087-6.697 4.833-8.303 8.536-1.686 3.882-2.589 8.263-2.303 12.501.25 3.728 1.624 8.55 5.733 9.628 2.205.58 4.417-.34 6.499-.994 1.957-.616 3.741-2.38 4.804.094 2.152 5.013 4.32 9.548 7.761 13.865-3.228-.22-6.45-.532-9.68-.694-2.123-.107-5.131-.7-7.163.127-1.194.487-1.246 1.326-2.099 2.07-.94.82-2.762.47-3.926.434-3.484-.107-6.681-.741-10.207-.375-2.596.269-4.94 1.555-7.518 2.044-3.136.593-6.252 1.837-9.211 3.014-2.784 1.11-5.516 2.297-8.38 3.192-2.922.913-5.843 1.852-8.63 3.132-4.96 2.28-9.171 5.964-13.61 9.093-1.167.823-2.44 1.53-3.53 2.458-.892.76-1.482 1.764-2.343 2.55-1.378 1.26-2.987 1.197-4.48 1.864-1.528.683-3.003 2.052-4.39 2.999-1.253.857-2.508 1.713-3.763 2.57-2.384 1.625-4.741 3.559-7.317 4.859-4.784 2.416-8.538 6.244-12.426 9.885-4.196 3.93-8.825 7.354-12.866 11.442-4.03 4.079-7.713 8.407-10.955 13.136-3.38 4.928-6.232 10.152-9.435 15.188-1.465 2.303-3.32 4.174-5.028 6.282a36.68 36.68 0 0 0-2.396 3.304c-.652 1.016-1.112 2.312-2.084 3.056-1.946 1.486-3.888 2.363-5.457 4.35-1.756 2.227-3.27 4.688-4.759 7.098-2.983 4.84-5.783 9.844-8.44 14.87-.786 1.488-.777 2.577-.91 4.2-.1 1.259-.514 2.46-.747 3.696-.381 2.013-.146 4.128-.667 6.126-.34 1.31-1.182 1.482-2.245 2.22-1 .693-1.903 1.512-2.78 2.352-1.785 1.713-3.52 3.403-5.47 4.934-1.982 1.555-4.035 3.057-5.759 4.908-1.79 1.925-3.365 3.772-5.424 5.444-4.375 3.55-8.504 7.48-12.801 11.141-4.462 3.802-8.53 7.974-12.635 12.15-4.243 4.316-8.733 8.363-13.164 12.483-.348-4.89-.635-9.784-1.042-14.67-.44-5.274-1.627-10.416-2.677-15.596-.938-4.625-1.562-9.575-3.132-14.035-1.077-3.056-3.183-5.567-6.44-6.32-1.63-.377-4.099.395-4.888-1.422-.785-1.806-.86-4.554-1.177-6.494-1.398-8.565 1.38-18.125-2.198-26.32-1.553-3.556-4.44-5.44-7.875-6.964-4.498-1.995-9.467-1.499-14.237-2.488-2.177-.452-3.948-1.642-6.208-1.743-2.281-.102-4.566-.027-6.846.06-2.381.09-4.672-.388-7.037-.38-2.06.006-3.68 1.375-5.701 1.054-2.267-.358-4.116-.916-6.406-.258-2.028.582-3.962.756-6.069.814-2.595.074-5.191-.171-7.785-.046-2.384.114-4.658.838-7.02 1.128-4.995.612-9.809 1.181-14.683 2.524-4.828 1.33-9.413 3.247-14.1 4.985-7.513 2.786-16.134 4.92-18.203 13.775-1.146 4.91-1.375 10.199-.758 15.196.498 4.043 1.415 8.52 3.794 11.921 2.542 3.639 6.759 4.741 10.797 5.995 4.628 1.434 9.363 1.654 14.1 2.513 4.914.889 9.827 1.6 14.837 1.465 4.969-.134 9.829-1.427 14.783-1.848 5.094-.432 10.17-1.03 15.26-1.474 3.424-.3 9.968-1.27 11.684 2.616.542 1.229 1.32 2.697.327 3.796-1.183 1.308-2.228 2.648-3.295 4.103-1.448 1.973-2.53 3.863-2.96 6.297-.424 2.387-.49 4.822-.524 7.24-.138 9.976 2.43 20.088 4.865 29.744 2.532 10.047 5.352 20.04 8.882 29.784 3.363 9.285 5.862 18.95 9.851 27.994 2.003 4.54 4.62 8.568 7.376 12.672 2.318 3.451 4.438 7.627 7.852 10.131 2.863 2.102 6.526 3.135 10.067 2.852 4.245-.338 8.278-2.914 11.995-4.795 8.951-4.532 17.221-10.657 25.251-16.654 3.855-2.878 7.35-6.18 11.454-8.72 4.008-2.484 8.052-4.71 12.567-6.017-3.764 7.933-7.185 15.992-11.186 23.814-3.948 7.721-7.215 15.72-10.768 23.62-1.461 3.249-3.614 6.06-5.053 9.296-1.648 3.71-3.302 7.419-4.944 11.131-3.004 6.782-6.202 13.528-8.918 20.424-.617 1.565-.34 3.457-1.14 4.832-.806 1.387-1.687 2.599-2.3 4.105-1.317 3.241-2.362 6.507-3.862 9.682-3.322 7.029-5.432 14.59-8.612 21.692-3.188 7.12-6.064 14.315-8.906 21.58-1.393 3.561-2.96 7.056-4.26 10.653-1.2 3.318-2.327 6.714-4.285 9.682-4.297 6.516-7.628 13.552-10.863 20.659-1.526 3.352-2.872 6.682-3.102 10.411-.208 3.357 1.872 6.076 3.551 8.778-3.057 1.548-5.873 3.548-8.939 5.108-3.29 1.675-6.724 2.989-10.146 4.36-3.46 1.386-6.913 2.791-10.36 4.213-3.038 1.253-5.847 2.793-8.793 4.227-2.787 1.357-5.328 3.147-7.965 4.762-2.852 1.747-5.747 3.426-8.6 5.173-5.592 3.425-11.035 6.859-16.905 9.804-3.06 1.535-6.137 3.038-9.2 4.568-2.517 1.258-5.282 2.364-7.12 4.59-2.718 3.29-2.481 8.584.099 11.933 1.704 2.21 5.888 2.004 8.431 2.076 1.734.049 3.497-.046 5.2-.395 1.408-.287 2.603-1.037 3.976-1.387 1.555-.395 3.294-.31 4.891-.524a69.451 69.451 0 0 0 4.658-.805c3.347-.683 6.665-1.507 10.007-2.217 3.256-.691 6.52-1.362 9.713-2.311 1.325-.394 2.724-1.15 4.088-1.12 1.482.03 2.778.133 4.27-.133 1.524-.272 3.019-.699 4.554-.904 1.427-.19 2.868.039 4.28-.2 1.592-.27 3.07-.973 4.612-1.427 1.508-.446 2.897-.307 4.448-.307-3.822 2.956-7.819 5.678-11.713 8.537-3.934 2.886-7.605 6.075-11.387 9.149-3.062 2.485-6.89 4.876-8.775 8.452-1.516 2.879-1.798 6.446-1.188 9.614.766 3.974 3.707 4.478 7.282 4.726 4.62.32 8.182-1.637 12.215-3.624 7.898-3.891 15.53-8.385 22.994-13.045 3.693-2.306 7.774-4.044 11.697-5.92 2.075-.992 4.153-1.978 6.232-2.961 1.7-.805 3.924-2.408 5.8-2.224-5.163 10.696-10.567 21.277-15.116 32.259-1.907 4.604-3.425 9.364-3.8 14.36-.263 3.505-.08 10.446 4.298 11.606 1.954.518 3.714-.778 5.028-2.07 1.873-1.843 3.598-3.86 5.388-5.785a174.275 174.275 0 0 1 10.98-10.79c3.872-3.49 7.742-6.898 11.218-10.792 3.313-3.711 7.453-6.523 10.608-10.38 3.24-3.963 6.146-8.186 9.409-12.13 2.147-2.596 3.872-6.661 7.556-7.238.549 3.064 3.191 5.788 5.039 8.292 4.078 5.53 9.003 10.06 14.097 14.63 4.607 4.135 9.559 7.601 15.37 9.841 3.825 1.475 11.824 4.892 14.827.251 1.428-2.206.674-6.512.14-8.927-.741-3.354-2.368-6.496-3.837-9.58-2.987-6.275-6.297-12.298-9.657-18.373-1.687-3.053-3.342-6.126-5.162-9.101-1.58-2.58-3.775-5.068-4.552-8.047-.322-1.225-.52-2.888-.124-4.125.42-1.315.97-1.073 2.148-1.241 2.585-.369 1.806-5.141 1.467-7.002-.301-1.657-.922-3.257-1.517-4.827-.504-1.331-1.626-3.145-1.563-4.586.058-1.364 1.381-2.753 1.917-3.977.623-1.423 1.031-2.911 1.472-4.398 2.019-6.817 4.664-13.401 6.344-20.321 1.672-6.887 3.448-13.624 5.9-20.285 2.542-6.907 5.315-13.745 7.628-20.735 2.245-6.781 4.455-13.547 6.921-20.255 4.948-13.454 10.22-26.809 16.053-39.906 5.755-12.924 12.293-25.503 17.267-38.762 2.393-6.377 4.756-12.71 7.01-19.137a374.847 374.847 0 0 1 7.541-19.708c2.76-6.654 5.036-13.523 7.396-20.326 2.322-6.696 4.309-13.619 7.173-20.1.737.802 1.415 1.378 1.944 2.325.528.943.976 1.827 1.706 2.644 1.312 1.465 2.98 2.49 4.57 3.616.996.704 1.821 1.545 2.96 1.7l.09.012c-.205.012-.41.022-.64.069 1.45 1.006 2.9 2.01 4.353 3.02a13.09 13.09 0 0 0-.383-.817c.471.82.962 1.594 1.98 1.769a2.36 2.36 0 0 1-.245.029c.688.509 3.131 2.941 2.916.318.094.425-.065.746.113 1.172.189.449.627.86.956 1.22.69.75 1.494 1.387 2.318 1.98 1.935 1.39 4.021 2.557 5.9 4.028.543.425 2.387 2.565 3.023 2.564l3.557 3.101c-.453-1.589-.909-3.176-1.364-4.764l.99 3.455c.383 1.339.962 1.824 1.968 2.723 1.765 1.578 3.515 3.177 5.347 4.68 3.342 2.738 7.178 4.862 10.757 7.273 1.947 1.31 3.856 2.656 5.709 4.094 1.52 1.18 3.378 1.597 4.89 2.741 1.901 1.443 3.588 3.322 5.238 5.039 1.48 1.538 3.226 3.089 4.248 4.984 1.157 2.149 1.176 4.95 1.536 7.329.365 2.4.726 4.801 1.076 7.204.721 4.93 1.403 9.866 1.995 14.813.582 4.864 1.296 9.724 1.719 14.604.428 4.938.32 9.882.876 14.816 1.112 9.896 2.373 19.984 4.492 29.72 2.136 9.81 3.504 19.76 5.358 29.632.954 5.077 1.963 10.144 2.958 15.213.489 2.493 1.016 4.98 1.51 7.471.407 2.06.195 4.13.557 6.207.192 1.112.463 2.225.463 3.36.001 1.104-.691 2.07-.73 3.058-.055 1.392 1.22 3.588 1.992 4.697 1.166 1.674 2.78 3.188 4.133 4.724 1.363 1.547 1.911 2.102 1.427 4.192-2.078 8.963 3.246 16.472 8.93 22.809 6.258 6.976 12.517 13.7 19.696 19.739 3.76 3.164 7.3 6.579 10.899 9.922 3.45 3.205 7.172 5.707 11.204 8.151 4.086 2.478 8.417 4.284 12.652 6.461 4.176 2.147 8.234 4.184 12.675 5.748 4.223 1.487 8.5 2.753 12.553 4.643 3.2 1.491 7.26 1.427 10.491.048 2.175-.93 4.042-2.623 5.984-3.947a86.777 86.777 0 0 1 5.571-3.524c3.146-1.813 6.222-3.924 7.565-7.464 1.59-4.192.215-9.226-.694-13.436-.93-4.304-2.85-8.314-5.15-12.044-2.398-3.884-5.38-7.245-8.132-10.865-2.847-3.744-5.383-7.685-8.36-11.34-2.949-3.616-6.038-7.064-9.357-10.34-3.312-3.267-6.205-6.91-9.26-10.412-.736-.843-1.861-1.749-2-2.944-.12-1.041.596-1.793.94-2.71.666-1.778.469-3.732.503-5.59.017-.905.002-1.835.453-2.655.42-.765 1.2-1.07 1.498-1.892.265-.732.168-1.658.315-2.423.187-.97.64-1.677.95-2.598.773-2.303-.186-4.988-.62-7.272-.41-2.157-.797-4.318-1.195-6.476-.86-4.667-1.502-9.345-2.968-13.874-2.98-9.193-5.894-18.338-6.092-28.1-.1-4.889-1.463-9.573-2.593-14.3a2041.085 2041.085 0 0 0-3.652-15.026c-2.369-9.584-5.21-19.028-7.637-28.595-2.419-9.532-4.62-19.127-7.498-28.533-2.908-9.507-6.95-18.432-11.274-27.366-2.08-4.295-4.356-8.003-7.416-11.672-3.173-3.803-6.427-7.54-9.687-11.27-6.575-7.527-13.156-15.048-19.827-22.489-3.322-3.704-6.686-7.237-10.562-10.372-3.453-2.795-8.183-5.148-9.272-9.715-.307-1.29-.514-2.602-.853-3.883-.195-.74-.802-1.858-.707-2.664.19-1.6 3.15-2.211 4.347-2.753 4.143-1.875 8.334-3.732 12.398-5.774 2.245-1.128 4.24-2.503 6.33-3.877 1.758-1.158 3.763-1.507 5.746-2.122 4.404-1.366 8.469-3.313 12.533-5.465 4.195-2.22 8.425-4.44 12.491-6.887 4.129-2.485 7.332-5.54 10.832-8.785 1.565-1.45 2.678-.72 3.787.877 1.35 1.941 2.772 3.833 4.167 5.742.65.889 1.209 1.938 2.13 2.47.037.023.065.035.1.053-.16-.054-.33-.112-.522-.189.338 2.402 2.146 4.043 3.74 5.697-.15-.41-.292-.823-.434-1.236.399 1.144.95 1.92 1.686 2.895 1.464 1.94 3.111 3.648 4.842 5.351.895.88 1.8 1.752 2.705 2.625.36.348.724.697 1.084 1.048.583.564.912.745 1.523 1.02 1.238.559 1.526 1.535 2.594 2.306 1.605 1.16 3.603 1.926 5.265 3.07 1.356.933 2.536 2.83 4.105 3.177.568.125.99.034 1.447.483.602.59-.024.578.924.79.478.108.971-.166 1.453-.013.508.162.957.603 1.385.915.98.715 1.961 1.43 2.94 2.148a350.21 350.21 0 0 1 5.25 3.92c3.458 2.64 6.634 5.628 10.102 8.25 1.794 1.356 3.724 2.347 5.64 3.498 1.596.96 2.941 2.256 4.437 3.353 1.786 1.31 3.871 1.949 5.724 3.133 1.82 1.162 3.57 2.362 5.461 3.41 4.132 2.287 8.33 4.42 12.709 6.19 4.427 1.791 8.956 3.236 13.762 3.462 4.878.231 9.494-1.046 13.992-2.826a124.85 124.85 0 0 0 13.047-6.033c4.103-2.198 7.923-4.842 11.946-7.171a176.198 176.198 0 0 0 11.717-7.432c3.657-2.517 7.134-5.329 11.082-7.385 3.984-2.075 7.517-4.777 11.268-7.227 3.855-2.518 7.684-5.054 11.51-7.62 7.978-5.347 15.964-10.785 23.542-16.694 3.638-2.838 7.227-5.754 10.414-9.095 3.401-3.568 7.458-6.606 11.194-9.815l10.754-10.438a.174.174 0 0 0 .018-.018l-10.772 10.456c1.706-.32 2.815-1.428 4.185-2.49a231.124 231.124 0 0 0 4.289-3.406c2.063-1.68 4.45-3.407 4.21-6.383a48.817 48.817 0 0 1 2.786-2.434c1.57-1.252 3.442-2.016 5.11-3.125 3.425-2.276 6.365-5.174 9.582-7.719 1.416-1.118 2.687-1.965 2.908-3.884.24-2.083-.042-4.34-.056-6.439-.011-1.622-.476-3.886.144-5.421.623-1.539 2.693-2.199 4.033-2.933 3.784-2.076 7.511-4.252 11.298-6.323 3.727-2.038 6.967-3.396 11.23-3.76 1.855-.16 3.636-.439 5.471-.724 1.897-.296 3.664.264 5.522.604 4.213.773 8.477 1.234 12.689 2.017 4.241.788 8.436 1.837 12.625 2.87 4.193 1.033 8.378 2.133 12.635 2.88 2.178.381 4.43.632 6.541 1.312 1.597.513 3.132 1.237 4.774 1.6 3.975.876 8.015.98 11.9 2.308 3.879 1.325 7.836 1.993 11.88 2.601 2.117.32 4.227.66 6.322 1.113 1.264.274 2.388.435 3.67.121 2.656-.65 4.811-2.788 5.66-5.362 2.343-7.1-2.19-14.721-6.804-19.757-4.95-5.401-11.203-9.182-17.144-13.36 2.367-.26 4.72.089 7.086.132 2.027.037 4.011-.053 6.043.058 4.497.246 8.98-1.056 13.483-1.152 6.095-.13 13.616-1.373 15.208-8.32 1.481-6.465-5.377-12.292-10.27-15.226-3.144-1.885-6.327-3.61-9.406-5.605-3.29-2.131-7.355-3.385-10.989-4.819-3.698-1.46-7.422-2.887-11.27-3.904-3.697-.978-7.442-1.502-10.987-2.95 3.225-1.407 6.714-1.717 10.168-2.362 3.44-.643 6.821-1.494 10.192-2.426Z\"\n              />\n              <path\n                d=\"M980.03 463.71c-.36 1.524-1.245 2.273-2.754 2.636-2.489.598-5.218.69-7.757 1-4.64.565-9.438.8-13.99 1.9-4.26 1.028-8.52 2.566-12.367 4.678 1.258-6.015 2.684-11.858 2.156-18.053-.388-4.549-.496-11.402-5.093-14.032-1.064-.61-2.75-.38-3.932-.443-1.538-.082-3.078-.154-4.617-.24-3.044-.167-6.072-.487-9.106-.784a370.604 370.604 0 0 1-17.87-2.185c-.984-.144-2.75-.036-3.408-.889-.486-.627-.254-1.618-.217-2.323a41.527 41.527 0 0 0-.276-7.283c-.662-5.296-2.124-10.507-3.759-15.575-.828-2.562-1.713-5.104-2.547-7.664-.402-1.237-1.337-2.925 0-3.81.834-.554 2.292-.55 3.262-.792 1.155-.287 2.28-.664 3.41-1.035 2.666-.877 5.329-1.766 7.993-2.653 10.122-3.372 20.335-6.52 30.428-9.96 1.412-.48 2.815-.984 4.227-1.465.612-.207 1.674-.742 2.333-.454.77.34.621 1.187 1.174 1.692.483.44 1.577.473 2.199.831 1.579.911 2.568 2.5 3.807 3.782 1.594 1.65 3.376 3.099 4.95 4.779 6.351 6.781 11.051 14.945 15.03 23.294 1.071 2.249 1.768 4.575 2.438 6.968.633 2.264 1.442 4.477 1.802 6.808.838 5.443.869 11.044 1.541 16.522.562 4.59 2.027 10.15.943 14.75m-40.35-12.295c-.013 3.626-.204 7.275-.998 10.824-.818 3.658-2.296 7.161-3.614 10.66-1.244 3.301-2.25 6.705-3.694 9.926-1.423 3.178-3.247 6.075-4.389 9.375-2.342 6.765-6.354 12.7-9.194 19.233-2.9 6.677-6.132 13.053-9.737 19.383-1.714 3.011-3.305 6.342-5.473 9.054a40.49 40.49 0 0 1-3.55 3.88c-1.085 1.04-1.606.246-2.918.482-1.913.343-2.9 2.825-4.137 4.102-2.346 2.418-4.743 4.807-7.312 6.987-2.632 2.231-5.54 4.097-8.24 6.245-2.576 2.051-5.15 3.904-8.095 5.4-5.816 2.954-12.503 6.578-19.213 6.268-3.088-.143-4.742-2.153-6.035-4.836-1.37-2.84-.908-6.245-.678-9.292.275-3.655 1.159-6.879 3.108-9.98 1.92-3.056.027-4.953-1.888-7.5-4.272-5.687-9.965-10.115-15.157-14.92-2.68-2.482-5.338-4.99-7.993-7.499a4762.987 4762.987 0 0 1-4.399-4.163c-1.074-1.018-2.11-1.705-2.497-3.135 2.922-1.575 5.967-2.917 8.66-4.886 5.496-4.02 10.539-8.926 15.72-13.348 2.488-2.125 4.455-4.758 6.454-7.327 1.93-2.48 4.14-4.821 5.806-7.496 3.581-5.754 7.666-11.452 10.505-17.622 1.416-3.075 2.147-6.212 2.888-9.496.446-1.978.96-3.94 1.46-5.904.323-1.266.416-3.448 1.227-4.494 1.493-1.927 6.185 1.185 7.904 1.732 3.235 1.03 6.606 1.518 9.952 2.036 7.097 1.097 14.244 2.035 21.296 3.396 3.694.713 7.397 1.503 11.146 1.876 3.634.362 7.288.174 10.93.147.78-.007 1.732.132 2.256-.584.298-.41.098-.919.578-1.302.625-.499 1.442-.23 2.16-.154 1.458.155 2.92.244 4.376.425.629.078 1.88-.028 2.417.303.566.35.371 1.402.368 2.204m-102.149 97.338c-1.698 3.424-2.68 8.213-2.73 12.006-.028 2.036.24 4.067.658 6.056.363 1.736 1.356 3.733 1.044 5.48-4.308-1.991-8.54-4.134-12.934-5.932-3.796-1.553-6.648-4.257-9.772-6.826-3.355-2.757-6.391-5.831-9.614-8.735-3.46-3.118-7.067-6.065-10.585-9.113-6.263-5.427-11.522-11.526-16.663-18.01-4.52-5.7-11-12.971-10.697-20.683.143-3.58.405-7.65 2.16-10.853 1.458-2.661 4.096-5.645 6.562-7.425 2.371-1.71 4.699 2.589 6.032 4.1 2.871 3.251 5.799 6.45 8.711 9.664 5.54 6.113 10.796 12.532 16.787 18.215 6.04 5.726 12.213 11.327 18.716 16.519 3.255 2.598 6.842 5.02 9.797 7.964 1.085 1.08 3.19 2.271 3.915 3.62.776 1.454-.78 2.73-1.387 3.953m148.21-84.417c-.912-.118-.869.005-.946-.89-.12-1.387.349-3.025.49-4.415.672-6.614.35-13.545-.226-20.16-1.133-12.994-3.81-25.769-10.604-37.04-3.136-5.203-6.682-10.11-11.127-14.28-2.05-1.921-4.05-3.99-6.316-5.659-1.137-.838-2.792-1.261-3.828-2.119-.559-.464-.807-1.409-1.279-2.001-1.885-2.363-4.014-2.973-7.021-2.718-3.12.265-6.39 1.243-9.4 2.078-6.403 1.776-12.545 4.796-18.747 7.179-6.231 2.393-12.392 4.943-18.536 7.547-2.672 1.13-5.896 2.02-8.267 3.727-1.433 1.032-1.854 2.313-1.7 4.03.544 6.062 2.794 12.083 4.506 17.883 1.838 6.228 3.336 12.573 3.805 19.065-6.348-.465-12.657-.948-18.976-1.746-3.16-.4-6.338-.727-9.492-1.16-1.631-.225-2.392-.834-3.703-1.681-1.152-.743-1.745-.114-2.236 1.016-2.556 5.872-3.562 12.278-6.33 18.107-1.242 2.618-2.794 5.062-4.085 7.654-1.406 2.818-3.1 5.591-4.862 8.198-.818 1.21-1.867 2.19-2.774 3.324-.84 1.051-1.443 2.26-2.215 3.36-1.613 2.299-3.567 4.324-5.545 6.306a192.418 192.418 0 0 0-5.806 6.079c-1.865 2.038-4.091 3.692-6.062 5.616-1.855 1.81-3.47 3.781-5.373 5.555-1.833 1.71-2.691 4.083-4.663 5.62-1.063.83-2.243 1.495-3.3 2.33-.875.69-1.788 1.897-3.029 1.666-1.377-.258-2.485-2.11-3.346-3.065a421.271 421.271 0 0 0-3.354-3.671c-4.419-4.784-8.95-9.473-13.407-14.225-2.178-2.324-4.574-4.432-6.697-6.808-1.547-1.732-4.079-2.965-6.245-1.78-2.186 1.195-4.81 2.25-6.58 4.044-1.918 1.944-3.447 4.471-5.009 6.702-1.626 2.323-2.272 5.067-2.698 7.829-.452 2.943-.924 5.859-.7 8.846.425 5.655 1.476 11.966 4.746 16.728 1.558 2.27 3.693 3.974 5.602 5.926 2.068 2.117 3.545 4.665 5.25 7.067 3.42 4.82 7.622 9.135 11.907 13.19 2.044 1.933 4.358 3.563 6.412 5.503 2.193 2.073 4.414 3.942 6.889 5.665 2.531 1.762 4.622 4.057 6.909 6.105 2.356 2.11 4.767 4.077 7.36 5.885 4.974 3.47 10.032 5.729 15.816 7.473 6.37 1.922 12.536 4.437 18.87 6.446 3.036.962 6.04-.369 8.932-1.343 2.948-.993 5.84-2.17 8.555-3.7 5.506-3.104 10.794-6.705 16.21-9.975 5.633-3.4 10.338-7.298 14.641-12.273 4.101-4.744 8.442-9.454 12.177-14.491 7.582-10.231 12.167-22.334 17.794-33.663 2.992-6.022 6.023-11.95 8.511-18.209 1.224-3.078 2.32-6.212 3.569-9.279.529-1.3.966-1.805 2.384-2.026 1.638-.256 3.312-.369 4.957-.565 6.508-.776 12.86-1.928 19.31-3.042 5.986-1.032 12.008-2.1 17.36-5.141 1.125-.64 2.475-1.392 3.088-2.588.279-.546.965-3.314.577-3.757-.227-.26-1.753-.228-2.142-.28M719.239 53.315c2.079-1.094 4.2-2.103 6.312-3.13 4.475-2.175 8.882-4.499 13.408-6.57 2.049-.936 4.189-1.533 6.293-2.32 2.235-.834 4.371-1.937 6.516-2.974 4.509-2.181 9.118-4.061 13.8-5.833 1.434-.543 2.87-1.077 4.309-1.609 1.104-.407 2.447-1.19 3.595-1.325 1.821-.213 3.189 1.644 4.43 2.76 6.696 6.028 11.424 14.963 14.3 23.413 1.57 4.61 2.283 9.371 3.12 14.152.858 4.9 1.77 9.696 1.803 14.678.034 5.065.554 10.059.33 15.136-.083 1.894.258 5.3-.783 6.95-1.058 1.672-3.706 2.14-5.41 2.757-9.317 3.378-18.625 7.015-28.078 9.988a3423.61 3423.61 0 0 0-29.459 9.415c.4-2.79.867-5.578 1.18-8.378.295-2.637.075-5.366.052-8.016-.05-5.823-.24-11.614-1.41-17.337-2.124-10.392-5.557-20.623-11.312-29.594-1.35-2.101-2.957-4.018-4.56-5.926-.573-.683-2.493-2.299-2.425-3.35.091-1.377 2.995-2.363 3.989-2.887m111.806-1.129c2.15.098 3.542.593 3.691 2.895.191 2.934.15 5.906.255 8.847.202 5.625.404 11.251.256 16.88-.26 9.861-1.309 19.708-4.329 29.132-1.46 4.555-3.206 9.033-5.093 13.427-1.83 4.264-4.418 8.098-6.708 12.114-1.128 1.975-2.393 3.58-3.948 5.239-.736.787-1.074 1.206-2.115 1.34-1.056.136-2.385-.137-3.445-.213-4.989-.359-9.975-.854-14.972-1.095-4.953-.238-9.928-.03-14.875-.26-2.324-.108-4.514-.863-6.8-1.231-2.3-.371-4.627-.534-6.942-.795-1.193-.135-1.164.147-1.345-.938-.097-.578.07-1.325.1-1.917.06-1.14.119-2.28.188-3.42.062-1.018-.144-2.806.268-3.77.368-.857 1.156-1.006 1.977-1.23 4.607-1.265 9.058-2.83 13.49-4.617 4.521-1.822 9.097-3.543 13.567-5.491 1.927-.84 4.1-1.608 5.56-3.191 1.197-1.299 1.885-2.968 2.414-4.629 2.912-9.136 1.998-19.665 1.145-29.077-.877-9.674-2.26-19.602-5.803-28.697 11.148 0 22.326.185 33.464.697M706.614 60.55c3.096 1.16 5.047 3.865 6.85 6.471 2.246 3.25 4.365 6.536 6.124 10.082 3.694 7.451 6.133 15.662 7.524 23.85 1.331 7.816 1.99 16.533.46 24.374-.41 2.097-1.48 3.78-2.077 5.766-.402 1.335-.122 3.276.24 4.603.52 1.903 2.314 1.254 3.81.946 2.182-.45 4.365-.895 6.545-1.355 8.218-1.734 16.356-4.751 24.723-5.361-.713 2.225-1.111 4.244-2.55 6.151-1.345 1.784-3.137 3.33-3.911 5.48-.645 1.79-.77 4.297-.113 6.115.69 1.908 2.376 1.935 4.145 2.15 4.974.603 9.869 1.422 14.884 1.696 1.078.058 2.154.18 3.218-.025.857-.165 1.458-.42 2.324-.26 1.147.21 2.158.763 3.362.886 1.133.116 2.275.08 3.41.037 4.2-.157 8.307.28 12.51-.129 1.226-.12 3.527-.814 4.672-.114 1.21.74.262 2.233.864 3.26.794 1.35 3.52.658 4.838.585 1.882-.103 3.55-.436 5.237-1.304 3.41-1.755 6.492-4.091 9-7.005 2.624-3.049 4.527-6.61 6.404-10.146 1.958-3.686 3.92-7.287 5.4-11.203 1.513-4 2.996-8.128 3.853-12.325.856-4.191 1.398-8.448 2.206-12.651.843-4.384.99-8.853 1.214-13.3.23-4.612.332-9.144.043-13.756-.283-4.531-.783-8.975-1.314-13.478-.136-1.15-.066-2.342-.249-3.482-.124-.766-.523-1.493-.567-2.27-.088-1.546 1.33-2.54 1.293-4.156-.086-3.755-4.08-5.153-7.047-6.051-3.858-1.168-8.162-1.872-12.196-1.582-8.68.624-17.552.705-25.784 3.874-4.266-7.312-8.24-15.243-15.221-20.37-.787-.58-1.641-.975-2.151-1.83-.436-.733-.628-1.469-1.21-2.13-1.433-1.624-3.199-1.826-5.204-1.4-4.364.923-8.533 1.935-12.67 3.588-1.837.733-3.786 1.078-5.63 1.795-1.774.688-3.47 1.552-5.175 2.392-3.73 1.84-7.588 3.403-11.315 5.258-7.486 3.726-14.886 7.632-21.777 12.391-3.328 2.3-7.144 4.677-9.966 7.596-1.242 1.285-1.805 2.907-1.598 4.68.215 1.846 1.16 1.127 2.572 1.657M216.13 74.834c.366-4.76.218-9.532.563-14.289.33-4.52 1.242-9.122 2.13-13.565.903-4.518 2.544-8.529 4.389-12.723 1.018-2.314 2.002-4.643 2.989-6.97.602-1.428 1.043-2.907 2.713-3.287 2.165-.494 4.779-.094 7.006-.173 2.25-.08 4.499-.216 6.742-.415 4.876-.433 9.72-1.146 14.588-1.651 4.662-.483 9.272-.766 13.875-1.727 2.37-.494 4.718-1.073 7.067-1.65 1.76-.431 4.2-1.535 5.971-1.116-2.19 4.988-2.872 10.312-2.926 15.71-.02 2.127-.272 2.997-2.487 2.867-2.764-.164-5.539-.442-8.288-.758-5.188-.599-10.335-1.549-15.478-2.44-2.438-.422-4.78-1.023-7.17-1.552-1.699-.374-2.413.299-2.98 1.85-.41 1.122-.542 1.627-1.595 2.26-.86.518-1.707 1.008-2.499 1.633-1.41 1.11-2.624 2.446-3.662 3.91-2.304 3.242-3.781 7.053-5.134 10.769-3.4 9.352-5.112 19.523-5.428 29.455-.16 5.05-.993 10-1.048 15.067-.026 2.234.544 5.108-1.321 6.73-1.824 1.59-4.167 2.73-6.202 4.032-1.784-5.11-2.244-10.53-2.298-15.908-.056-5.36.074-10.714.484-16.059m75.485-27.046c2.228.593 4.467 1.118 6.714 1.639-3.821 9.158-3.687 19.289-3.976 29.05-.128 4.367-.011 8.744.418 13.09.442 4.447 1.441 8.69 2.34 13.05.195.952.665 2.513.038 3.386-.695.967-2.971 1.49-3.958 1.935-3.917 1.766-7.773 3.682-11.77 5.267-4.052 1.607-8.261 2.571-12.223 4.438-3.878 1.827-7.807 3.502-11.845 4.946-3.967 1.42-8.084 2.461-11.913 4.247-3.632 1.693-6.63 4.02-9.716 6.53-1.876-5.827-2.607-11.755-2.946-17.862-.325-5.845-.804-11.93-.207-17.762.271-2.66.272-5.136.219-7.8-.048-2.385.503-4.723.693-7.096.418-5.228.401-10.45 1.109-15.657 1.34-9.85 4-20.276 9.366-28.72.342-.538.676-1.406 1.148-1.804.795-.668.513-.543 1.559-.004.976.5 1.938 1.033 2.945 1.471 2.115.92 4.378 1.325 6.584 1.952 2.444.695 4.661 1.759 7.198 2.152 2.457.381 4.954.427 7.41.814 1.358.214 2.604.663 3.926 1 1.076.275 2.13.202 3.262.32 2.188.232 4.318.845 6.512 1.043 2.467.223 4.664-.276 7.113.375m-80.85 42.522c.757 6.029 2.37 11.935 4.72 17.538.756 1.802 1.608 4.324 3.768 4.822 1.992.459 4.406-1.005 6.283-1.519 1.472 8.75 2.116 17.841 6.02 25.951.493 1.024 1.143 2.932 2.157 3.603 1.036.685 2.295.016 3.328-.377 4.338-1.644 8.819-2.696 13.308-3.834 2.19-.555 4.42-1.048 6.557-1.79 1.774-.617 3.45-1.358 5.31-1.694 3.885-.703 7.495-1.974 11.209-3.285 7.795-2.754 15.632-5.247 22.826-9.382 3.433-1.973 7.034-3.906 10.204-6.29 2.6-1.953 5.509-4.882 4.235-8.43-.385-1.073-1.44-2.849-2.655-3.176-1.14-.31-2.164.723-3.207.96-1.577.361-1.223-.911-1.37-2.153-.115-.979-.236-1.957-.355-2.936-.248-2.055-.493-4.11-.677-6.173-.759-8.54-.402-17.076-.41-25.631-.003-4.283.988-8.038 1.988-12.164.53-2.19 1.024-4.388 1.49-6.59.258-1.225.559-2.57.204-3.809-.795-2.778-4.752-3.546-7.095-4.337-2.014-.68-4.059-1.272-6.144-1.688-1.143-.228-4.196-.05-4.935-1.01-.732-.95.078-4.033.152-5.164.137-2.082.28-4.162.555-6.232.442-3.339.394-6.435-2.27-8.877 1.661-1.324 2.84-4.133.425-5.353-2.779-1.405-6.497-1.608-9.432-.872-3.21.806-6.733.816-10.02 1.169-3.499.373-6.987.828-10.478 1.268-6.005.76-12.122.927-18.054 2.146-2.97.61-5.944 1.073-8.938 1.546-3.101.49-4.97.905-6.827 3.522-3.518 4.963-6.766 10.05-8.742 15.844-1.87 5.489-2.743 11.256-3.263 17.015-.56 6.206-.685 12.395-.615 18.623.07 6.263-.033 12.529.749 18.759M84.613 335.594c.356-.603 1.435-.751 2.003-.979.897-.359 1.746-.808 2.58-1.29 4.18-2.412 8.258-4.876 12.12-7.781.947-.712 3.274-3.327 4.645-2.914.672.204 1.038 1.319 1.33 1.863.509.958 1.038 1.9 1.614 2.82 2.274 3.63 5.108 6.889 8.273 9.773 5.95 5.42 12.728 8.921 20.89 9.34-5.27 7.163-10.308 14.645-16.294 21.242-3.02 3.33-6.333 6.34-9.47 9.553-.535.548-.823.877-1.528 1.192-.683.304-1.333.403-1.897.964-.981.977-1.05 2.431-.83 3.721-5.57.214-11.6-2.28-16.655-4.325-2.966-1.201-5.893-2.538-8.68-4.117-1.893-1.072-4.01-2.27-5.399-3.991 5.108-2.718 10.272-5.302 15.167-8.397 3.342-2.112 9.248-4.579 8.77-9.455-.074-.758-.372-1.69-1.044-2.128-.994-.648-1.22.117-2.124.313-1.468.317-3.201-1.622-4.321-2.456-3.029-2.258-5.987-4.751-7.784-8.138-.537-1.014-2.058-3.634-1.366-4.81m-31.11 43.178c.829-2.7-3.04-4.779-4.749-6.078-2.562-1.95-4.344-4.108-6.068-6.832-6.724-10.627-9.106-23.571-8.555-35.997.153-3.449.544-6.891.624-10.342.041-1.791-.075-3.46.317-5.229.371-1.672.815-3.326 1.225-4.99.82-3.316 1.24-6.714 2.218-9.992.909-3.037 2.147-5.966 3.598-8.783.966-1.88 1.867-4.516 4.393-4.156 3.156.452 6.241 2.077 9.315 2.925 3.404.939 6.846 1.723 10.282 2.531 3.324.78 6.574 1.89 9.92 2.564 1.75.353 3.479.497 5.26.466.777-.013 2.173-.088 2.25.975.083 1.163-1.702 2.426-2.435 3.138-1.035 1.006-1.795 1.953-2.36 3.289-1.349 3.18-2.57 6.5-3.07 9.93-.486 3.337-.402 6.846-.44 10.214-.074 6.792.889 13.297 3.326 19.66 2.208 5.756 5.667 9.726 10.402 13.57-4.947 2.464-9.895 4.93-14.843 7.389-4.458 2.215-8.964 4.127-12.775 7.4-1.569 1.348-3.425 2.904-4.545 4.661-1.4 2.196.57 3.69 2.658 2.81 2.298-.965 4.555-2.07 6.805-3.142 1.463-.698 3.906-2.568 5.614-2.521 1.45.04 2.001 1.895 2.647 2.923 1.034 1.644 2.323 3.109 3.744 4.43 2.986 2.778 6.487 5.101 10.17 6.85 4.062 1.932 8.449 3.251 12.882 4.007 2.419.412 4.877.63 7.329.537 1.84-.069 4.446-.074 6.107-.972 1.43-.774.68-2.351 2.095-3.16 1.49-.85 3.067-1.485 4.507-2.44 3.401-2.258 5.42-5.168 7.416-8.649 4.583-7.993 10.157-15.298 13.586-23.914.802-2.018 1.26-4.398 2.573-6.16.873-1.17 2.823-1.867 3.035-3.403.206-1.502-.398-4.823-1.89-5.517-1.726-.802-4.233-.814-6.106-1.25-8.136-1.9-15.727-4.792-22.212-10.176a50.55 50.55 0 0 1-4.59-4.34c-1.069-1.14-2.189-2.338-1.97-4.019.194-1.494 1.392-3.675-1.053-4.094-1.64-.281-3.895.583-5.232 1.427-4.006 2.53-7.728 5.572-11.553 8.365-3.488 2.547-7.061 4.972-10.606 7.44.414-5.863.223-12.217 1.618-17.94.682-2.795 1.872-5.431 3.401-7.862 1.572-2.495 2.825-5.108 4.199-7.71.764.444 2.014 1.436 2.713.254.435-.734.13-2.666-.034-3.51-1.217-6.258-10.72-6.885-15.62-7.953-7.048-1.535-14.087-3.392-21.22-4.482-3.295-.504-6.562-.604-9.877-.806-1.701-.104-3.684-.482-4.713 1.239-.276.462-.316 1.12-.617 1.488-.276.338-1.08.667-1.459.972-1.098.883-2.046 1.923-2.876 3.058-1.7 2.323-2.865 4.996-3.99 7.629-2.715 6.35-4.257 13.09-5.104 19.925-.868 7.006-1.472 14.25-1.01 21.307.849 12.99 4.379 26.205 12.561 36.587 1.876 2.38 3.92 4.329 6.624 5.747 1.308.686 5.42 3.115 6.159.712M146.724 531.62c-2.536 3.26-5.068 6.488-7.334 9.949-2.28 3.483-4.453 7.034-6.684 10.549-2.151 3.39-4.554 6.682-6.284 10.318-.998 2.097-1.095 4.857-3.836 4.759-3.622-.129-7.053-1.163-10.245-2.857-6.396-3.395-11.72-8.164-15.714-14.213-4.145-6.275-7.362-13.376-9.692-20.515-1.289-3.948-2.322-7.973-3.255-12.018-.475-2.052-.982-4.062-.986-6.18-.003-.932.055-1.863.103-2.793.045-.88.535-2.415-.477-2.475.303-2.53.592-5.058.902-7.585.225-1.827.21-3.875 1.811-5.083 1.532-1.158 3.935-1.197 5.74-1.605a89.516 89.516 0 0 0 6.487-1.728c4.39-1.346 8.593-3.13 12.831-4.886 2.115-.876 4.232-1.769 6.23-2.9 1.649-.935 2.832-2.292 3.95-.16 7.616 14.514 13.18 30.781 25.648 42.043 1.009.91 2.659 2.004 2.807 3.496.143 1.453-1.197 2.847-2.002 3.883m10.026-10.259c-1.758-1.205-3.939-1.406-5.722-2.519-2.044-1.276-3.397-4.153-4.793-6.07-3.332-4.572-6.67-9.173-9.68-13.969-2.73-4.354-5.203-8.867-7.827-13.286-1.344-2.263-2.732-4.469-4.316-6.573-.674-.895-2.384-4.058-3.825-3.94-.744.06-.714.784-1.247 1.017-.275.12-.494-.012-.762.025-.965.129-2.013-.36-3.007-.263-2.456.239-5.115 1.27-7.479 1.983-4.934 1.489-9.64 3.583-14.491 5.303-4.81 1.706-10.18 2.844-14.576 5.498-1.736 1.048-3.696 2.725-1.991 4.777.646.778 1.533.757 2.205 1.36.568.51.315.79.184 1.638l-.227 1.454c-.787 5.094-1.43 10.197-.72 15.341a109.71 109.71 0 0 0 3.263 15.413c4.598 15.911 12.823 34.795 28.985 41.847 3.778 1.647 7.536 2.037 11.522 2.78 1.253.234 2.315.802 3.429 1.378.533.275 1.192.72 1.833.64 1.463-.18 2.666-2.452 3.349-3.527 2.58-4.06 5.508-7.87 8.187-11.863 1.386-2.068 2.699-4.186 3.834-6.402.658-1.282 1.129-3.407 2.937-3.359l1.462 1.952c.196.261.49.551.633.843.36.735.331.19.182 1.06-.192 1.11-1.221 2.367-1.87 3.243-3.804 5.14-7.774 10.156-11.761 15.153-3.917 4.912-7.918 9.788-12.508 14.092-.929.87-1.946 1.933-3.304 1.991-1.254.054-2.628-.603-3.873-.82-2.706-.473-5.485-.581-8.123-1.4-1.372-.424-2.52-1.218-3.94-1.314-1.195-.083-2.01-.281-3.057-.915-2.37-1.431-5.006-2.217-7.403-3.57-4.943-2.788-10.05-6.93-13.674-11.302-1.878-2.266-3.418-4.79-5.261-7.084-1.79-2.23-3.559-4.447-5.125-6.847-3.088-4.732-5.546-9.86-7.414-15.193-.971-2.77-1.455-4.58.96-6.606 2.277-1.91 4.409-3.908 6.306-6.206.922-1.12 5.132-5.228 1.98-5.911-1.707-.371-4.433 2.51-5.716 3.553-2.09 1.701-4.138 3.35-6.555 4.567-2.736 1.378-2.787 3.128-2.747 5.99.082 5.902 2.28 11.653 4.557 17.04a79.189 79.189 0 0 0 8.821 15.66c6.752 9.307 14.303 18.749 24.799 23.954 5.189 2.575 10.794 3.933 16.528 4.575 3.386.38 6.799.512 10.203.428 1.437-.036 3.315.159 4.693-.278 1.118-.355 1.301-1.184 1.705-2.198.959-2.402 3.465-3.706 5.16-5.63 1.81-2.057 3.707-3.994 5.568-6.001 4.032-4.348 6.701-9.465 9.94-14.375 1.793-2.716 3.732-5.374 5.296-8.233 1.265-2.317 2.838-5.362 3.28-7.975.35-2.085-1.328-5.115-3.635-5.23-1.203-.06-2.167.886-3.352 1.008-.356.038-1.57-.206-1.995-.032 1.938-4.708 4.811-9.14 6.99-13.722a152.287 152.287 0 0 0 3.473-7.848c.822-2.016 1.8-3.67-.288-5.102M187.759 148.671c3.808 8.793 9.93 15.802 16.182 22.939 3.308 3.777 6.685 7.207 10.696 10.246 3.734 2.828 7.513 5.589 11.283 8.367-3.783 4.86-8.033 9.306-12.248 13.8-3.894 4.15-7.775 8.394-10.341 13.521-.266-2.454-1.859-3.97-4.006-4.972-2.68-1.248-5.144-2.606-7.472-4.447-4.94-3.906-9.537-8.561-13.744-13.233-8.557-9.503-14.01-21.455-19.956-32.632 9.868-4.529 19.738-9.058 29.606-13.589m-31.628 22.182c1.445 4.062 3.54 7.973 5.456 11.832 1.888 3.803 3.845 7.583 6.05 11.215 4.192 6.903 9.315 13.336 15.849 18.178 3.198 2.37 6.627 4.732 10.185 6.538 1.682.852 3.527 1.5 5.441 1.392 1.172-.067 2.794-1.105 3.703-.18.93.95.622 2.847 2.577 1.927 1.604-.757 3.015-2.367 4.195-3.63 3.004-3.21 6.02-6.441 8.905-9.76 2.795-3.217 5.09-6.882 7.45-10.42 1.303-1.953 2.592-3.915 3.884-5.876.924-1.403 2.24-2.807 2.171-4.584-.132-3.467-4.384-5.818-6.8-7.746-2.961-2.364-5.711-4.792-8.233-7.62-2.683-3.01-6.062-5.53-8.965-8.356-3.153-3.066-6-6.401-8.825-9.762-2.243-2.669-4.466-5.404-6.366-8.325-1.485-2.284-3.16-4.036-6.129-3.613-2.323.538-4.653.92-6.892 1.774-2.251.858-4.418 1.942-6.606 2.95-3.965 1.825-7.613 4.134-11.465 6.163-.873.46-1.738.935-2.53 1.526-.437.325-.88.953-1.345 1.186-.344.172-.58.133-.975.244-1.561.438-2.15 1.309-2.93 2.679-1.254 2.203-1.219 3.387-.071 5.644 1.049 2.063 1.491 4.448 2.266 6.624M312.492 280.115c.975 1.566 2.572.795 3.484-.32 2.771-3.383 5.364-7.043 7.852-10.644 2.524-3.654 4.838-7.355 7.699-10.766a426.158 426.158 0 0 1 8.819-10.152c11.156-12.48 22.605-24.665 34.907-36.003 3.007-2.771 6.1-5.478 8.988-8.376 1.27-1.275 2.817-2.69 2.757-4.65-.042-1.399-.954-3.123-2.174-3.837-2.653-1.55-6.214 2.227-8.185 3.638-1.508 1.079-3.125 1.644-4.708 2.53-1.385.777-2.77 1.964-3.957 3.023-2.668 2.382-5.542 4.406-8.247 6.725-2.746 2.355-5.173 5.058-7.87 7.468-2.884 2.577-5.978 4.794-8.546 7.73-2.532 2.895-4.67 6.055-7.312 8.873-5.625 5.997-10.225 12.774-15.022 19.442-2.31 3.21-4.055 6.726-5.616 10.358a248.486 248.486 0 0 0-2.284 5.451c-.698 1.732-.756 3.5-1.077 5.317.404.08.102 3.569.492 4.193M935.423 575.729c2.113-2.54 3.5-6.201 5.035-9.131 1.645-3.137 3.17-6.04 3.866-9.533.335-1.681.536-3.4.92-5.069.361-1.578.878-2.97.73-4.619-.155-1.72-.956-6.906-3.57-6.333-1.52.333-1.215 1.959-1.224 3.147-.011 1.362-.17 2.718-.57 4.022-.948 3.084-3.202 5.802-4.63 8.695-1.384 2.804-3.023 5.357-5.092 7.706a55.473 55.473 0 0 1-6.553 6.303c-2.052 1.67-4.527 2.933-6.021 5.198-.893 1.357-1.042 1.763-2.684 2.137-1.325.302-2.57.786-3.684 1.577-1.263.896-2.16 1.968-3.639 2.557-1.286.513-2.648.819-3.946 1.299-3.002 1.108-5.623 2.978-8.69 4.026-1.588.543-3.2 1.007-4.806 1.488-1.285.384-2.804.648-3.867 1.516-1.785 1.46-2.785 5.183-1.224 7.122 1.68 2.087 5.623.782 7.81.515.028.142.054.285.084.427 3.682-.74 7.52-1.177 11.1-2.333 1.89-.612 3.59-1.485 5.319-2.45 1.464-.817 2.964-1.106 4.53-1.628 1.4-.465 2.518-1.173 3.393-2.381 1.118-1.55 1.592-1.088 3.318-1.466 2.772-.609 5.162-3.756 7.069-5.658 2.324-2.318 4.929-4.612 7.026-7.134M405.68 128.495c.647-1.024 2.903-1.951 3.94-2.618a94.792 94.792 0 0 0 4.177-2.824c2.475-1.787 4.204-.613 6.4 1.099 4.058 3.16 5.687 7.405 5.383 12.427.01 1.467.405 3.922-.725 5.13-1.08 1.158-3.323 1.044-4.75 1.332-1.868.379-4.689 2.742-6.623 2.05-1.696-.606-1.096-3.632-1.231-4.967-.256-2.493-1.086-4.906-2.618-6.92-.788-1.035-1.732-1.915-2.77-2.702-.793-.603-1.826-.99-1.183-2.007m-7.438 7.545c1.598.278 3.246 1.019 4.74 1.625.991.402 2.29.779 3.09 1.492 1.33 1.184.79 3.051 1.1 4.6.18.906.645 1.686.31 2.627-.39 1.1-1.542 1.288-2.126 2.18-.854 1.307.248 3.154.986 4.269 1.28 1.935 3.027.947 5.001.657 2.378-.35 4.821-.446 7.111-1.23 1.866-.636 3.414-2.113 4.837-.149.53.734.64 1.381 1.685 1.106.869-.229 1.752-1.408 2.349-2.012 3.717-3.764 4.603-8.906 4.664-13.98.178-5.633-1.869-10.926-4.77-15.687-.61-1-1.223-2.156-2.134-2.933-.887-.757-2.042-1.055-2.844-1.939-1.197-1.318-.92-3.987-2.829-4.568-2.01-.614-4.901 1.824-6.423 2.868-2.144 1.469-4.24 3-6.303 4.575-4.42 3.373-9.357 6.603-13.353 10.46-1.355 1.309-1.908 3.62-.549 5.183 1.36 1.563 3.687.547 5.458.856M635.397 539.654c-.858-4.98-2.303-9.845-4.057-14.588-1.136-3.072-3.728-8.358-7.868-8.053-4.558.334-1.503 6.283-1.06 8.648 1.731 9.255 2.732 18.722 4.1 28.039.678 4.616.883 9.374 1.974 13.919a37.027 37.027 0 0 0 2.223 6.459c.594 1.328 1.306 3.055 2.793 3.654 4.515 1.817 3.387-6.123 3.337-8.08-.123-4.792-.235-9.583-.353-14.376l.37-.01c-.686-5.194-.567-10.429-1.46-15.612M98.497 626.81c-2.471.807-4.307 1.428-6.996 1.173-1.885-.18-3.75-.563-5.628-.8-4.843-.607-9.46-1.944-13.905-3.94-4.041-1.812-7.825-3.997-11.161-6.907-1.76-1.534-3.35-3.22-4.914-4.947-1.12-1.238-2.154-2.17-3.893-2.389.451 2.502.979 4.474 2.174 6.748a39.528 39.528 0 0 0 3.289 5.23 38.095 38.095 0 0 0 9.108 8.69c3.435 2.337 7.299 4.323 11.35 5.347 2.26.572 4.575.913 6.864 1.352 2.162.414 4.264.832 6.471.53 2.065-.284 4.242-.356 6.253-.938 1.588-.46 3.102-1.47 4.457-2.392 2.64-1.798-.237-7.81-3.469-6.756M179.143 63.844c1.228 1.646 3.865 1.655 3.69-.757-.158-2.211-.845-4.39-1.56-6.474-.727-2.127-.577-4.438-.62-6.659-.098-5.303.075-10.44 1.072-15.66.956-5.025 1.574-10.11 2.694-15.104 1.098-4.901 3.088-9.535 4.313-14.395.38-1.5.684-4.43-1.513-4.773-1.827-.285-2.904 2.276-3.612 3.486-2.355 4.024-4.894 7.745-6.291 12.23-1.26 4.039-2.211 8.34-2.653 12.547-.462 4.41-.393 8.866-.663 13.289.441 5.14.207 10.828 1.858 15.754.745 2.218 1.875 4.626 3.285 6.516M868.655 84.046c-.723 1.735-1.075 3.584.166 5.214 2.253 2.957 5.842-3.777 6.387-5.657 1.184-4.075 2.668-8.18 3.33-12.389.677-4.292.355-8.907.462-13.258-.359-5.164-1.046-10.314-2.278-15.337-1.09-4.455-2.249-9.047-5.877-12.05-1.51-1.248-2.545-.304-2.758 1.478-.231 1.955.28 3.922 1.17 5.635 2.087 4.017 2.091 8.714 2.558 13.205.929 8.931 1.45 17.835-.889 26.597-.6 2.247-1.379 4.423-2.27 6.562M102.582 183.827c.518 2.027 1.103 4.04 1.85 5.996 1.445 3.779 3.313 7.41 5.62 10.735 3.808 5.488 8.833 10.7 14.287 14.56 1.798 1.273 6.163 4.83 8.5 3.643 3.196-1.624-1.081-5.768-2.38-6.981-2.677-2.505-5.34-5.03-8.048-7.503-2.716-2.481-4.737-5.66-6.88-8.632-2.157-2.994-4.266-6.025-6.22-9.157-1.012-1.62-1.893-3.32-2.898-4.94-.869-1.403-2.157-2.365-3.276-3.548-.932.444-.823.366-1.063 1.211-.103.363-.07 1.1-.064 1.434.018 1.097.302 2.125.572 3.182M332.034 215.273c5.07-4.592 10.634-8.472 15.421-13.364 1.205-1.231 2.137-1.95 1.093-3.633-.697-1.123-1.496-1.692-2.673-.923-2.812 1.84-5.491 4.1-8.201 6.106-5.557 4.113-11.319 8.146-16.335 12.916-2.27 2.16-4.37 4.51-6.132 7.101-1.85 2.719-3.248 5.477-1.18 8.524 6.027-5.545 11.94-11.232 18.007-16.727M949.599 593.032c-.908-.223-2.417.78-3.092 1.225-2.689 1.771-5.472 3.408-8.191 5.135a367.184 367.184 0 0 0-7.442 4.88c-2.053 1.373-3.399 3.062-2.677 5.657.33 1.184.876 2.57 2.25 1.892 1.009-.498 1.879-.982 2.988-1.374 2.79-.988 5.605-1.964 8.211-3.39 4.517-2.467 8.748-6.288 9.354-11.67-.336-.762-.432-2.117-1.401-2.355M652.715 538.733c-.918-1.002-2.044-1.014-2.53.197-.5 1.247.15 3.386.328 4.623.29 2.027.61 4.049.956 6.067.202 1.178.35 4.84 1.897 5.316 2.372.732 2.43-5.04 2.634-6.214-.5-1.705-.974-3.416-1.478-5.119-.442-1.494-.711-3.672-1.807-4.87M253.205 439.187c-.568-.27-1.006-.153-1.126-.829-.1-.561.781-1.146.915-1.627.483-1.734-1.335.09-1.994.637.624 1.546 1.247 3.09 1.876 4.632.708-.28 1.417-.565 2.124-.85-.677-.917-.762-1.471-1.795-1.963M585.023 159.861c1.182.39 2.913-.14 4.118-.363 1.162-.216 2.471-.539 3.58-.971 2.736-1.068 2.503-4.305 1.872-6.82-.852-3.39-2.748-6.635-4.25-9.763a123.613 123.613 0 0 1-2.244-4.918c-.536-1.255-1.243-3.014-2.868-3.026-2.506-.02-1.283 5.883-.885 7.287 1.002 3.539 2.863 6.8 4.417 10.103-1.436.098-2.913.287-4.346.238-1.488-.05-1.894-.004-2.258 1.658-.524 2.405.199 5.699 2.864 6.575M562.443 130.937c2.699-.167 5.388-.45 8.073-.752 1.976-.223 5.424-.262 6.828-1.825.963-1.072.797-3.354-.05-4.465-1-1.312-3.336-.795-4.821-.795-4.01.067-7.899.6-11.485 2.368-1.316.65-4.28 1.83-3.965 3.599.395 2.222 3.768 1.971 5.42 1.87M573.684 162.065c-2.253.565-1.82 4.425-1.125 6.048 1.041 2.43 3.665 3.02 6.075 2.864 1.16-.116 2.826.3 3.694-.67.857-.958.846-2.88.24-3.954-.804-1.42-2.886-2.224-4.295-2.884-1.226-.574-3.176-1.758-4.589-1.404M573.984 141.998c.176-2.21-1.089-7.179-4.039-6.993-1.402.088-2.596 2.095-2.853 3.328-.269 1.3.104 2.614.445 3.858.559 2.052 1.398 5.219 4.127 4.765 2.263-.378 2.325-3.084 2.32-4.958M595.26 144.225c.596.58 1.467 1.012 2.304.631 1.234-.56 1.022-2.04 1.022-3.095l.414-.134c-.7-1.941-1.159-6.006-3.591-6.556-2.387-.54-2.562 2.112-2.336 3.766.239 1.765.843 4.08 2.186 5.388M520.235 144c-1.185.119-3.416.669-3.223 2.156.28 2.167 3.678 2.554 5.404 2.764 2.043.25 4.877.043 2.933-2.519-1.184-1.56-3.164-2.25-5.114-2.401M420.274 403 419 405.49l3.999.51c.057-1.057-2.016-2.368-2.725-3\"\n              />\n            </g>\n          </g>\n        </svg>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/banners/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section class=\"bg-white lg:grid lg:h-screen lg:place-content-center\">\n      <div\n        class=\"mx-auto w-screen max-w-7xl px-4 py-16 sm:px-6 sm:py-24 md:grid md:grid-cols-2 md:items-center md:gap-4 lg:px-8 lg:py-32\"\n      >\n        <div class=\"max-w-prose text-left\">\n          <h1 class=\"text-4xl font-bold text-gray-900 sm:text-5xl\">\n            Understand user flow and\n            <strong class=\"text-indigo-600\"> increase </strong>\n            conversions\n          </h1>\n\n          <p class=\"mt-4 text-base text-pretty text-gray-700 sm:text-lg/relaxed\">\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, nisi. Natus, provident\n            accusamus impedit minima harum corporis iusto.\n          </p>\n\n          <div class=\"mt-4 flex gap-4 sm:mt-6\">\n            <a\n              class=\"inline-block rounded border border-indigo-600 bg-indigo-600 px-5 py-3 font-medium text-white shadow-sm transition-colors hover:bg-indigo-700\"\n              href=\"#\"\n            >\n              Get Started\n            </a>\n\n            <a\n              class=\"inline-block rounded border border-gray-200 px-5 py-3 font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900\"\n              href=\"#\"\n            >\n              Learn More\n            </a>\n          </div>\n        </div>\n\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 1024 768\"\n          class=\"mx-auto hidden max-w-md text-gray-900 md:block\"\n        >\n          <g fill=\"none\" fill-rule=\"evenodd\">\n            <g fill=\"#FF5678\">\n              <path\n                d=\"M555.886 337.572c-1.134-1.652-3.154-2.481-4.757-3.572.718 1.646.78 2.144.052 3.714-.562 1.211-.936 2.501-1.477 3.724-.371.837-.964 1.683-1.2 2.541-.277 1.006-.133 2.027-.504 3.021 4.379-1.183 8.27-3.952 12-6.523-.695-.1-2.532-.07-3.118-.578-.48-.415-.578-1.717-.996-2.327M661.291 322.8c1.91 1.52 1.91 1.52 1.976 4.105-1.607-.978-2.14-2.177-1.976-4.106m-92.56 6.786c-.882.072-1.096-2.48-1.291-3.227l.87-.122c.398.428 1.967 3.221.422 3.349m132.775 26.117c1.25-6.927 2.775-13.812 4.804-20.555a160.721 160.721 0 0 1 3.312-9.807c1.044-2.799 3.03-5.836 3.377-8.771-3.16 2.855-5.734 6.43-8.459 9.699-2.604 3.128-5.337 6.196-7.796 9.439-1.001 1.32-1.905 2.837-1.969 4.533-.068 1.86 1 2.997 1.764 4.563.802 1.64 1.342 3.657 1.737 5.429.434 1.937-.248 2.883-.912 4.638-1.422-.7-2.647-1.09-3.685-2.358-1.103-1.347-2.035-2.86-3.077-4.256-2.271-3.04-4.567-6.062-6.826-9.112-4.53-6.12-8.498-12.295-11.896-19.104-3.44-6.893-6.522-13.972-9.876-20.91-.707-1.46-.997-3.061-2.88-3.058-1.393.002-2.575.867-3.884 1.208a4.424 4.424 0 0 1-.99.172c.01.333-.044.655-.164.965-.344.418-.468.25-.947.225-.555-.03-.955-.378-1.56-.337-.841.057-1.658.612-2.449.863v-1.92c-2.511 1.289-8.591 5.604-9.913.713-.115.89.125 2.495-.75 3.066-.578.378-1.31-.016-1.937.064-.782.101-1.48.665-2.206.935-.049-1.316-1.054-1.168-2.03-1.345-1.262-.23-2.367-.93-3.669-.706-1.294.224-2.232.804-3.534.107-.874-.47-1.689-1.126-2.57-1.621-.894-.503-1.052-.852-1.436-1.744-.424-.989-.347-.765-1.356-.485-2.16.6-3-2.004-3.38-3.77-.928-4.318.136-9.034 2.984-12.403 3.664-4.335 7.545-8.587 12.334-11.719 4.426-2.893 9.13-6.472 14.295-7.874-4.124-9.23-10.002-17.827-15.24-26.466-1.5.344-2.4 1.158-4.002.903-1.264-.2-1.207-.103-1.675 1.212-.419 1.175-.648 1.344-1.77 1.704-1.164.374-.238-.352-1.105.565-.387.407-.598.851-1.079 1.187-1.76 1.233-4.063.523-5.974 1.292-1.32.531-.67 1.207-1.346 2.12-.716.967-1.93.463-2.922.307-2.067-.325-2.69.372-3.126 2.317-.324 1.441-.539 2.19-2.086 2.493-.876.172-2.239-.527-2.8.038-.216.216-.125.823-.225 1.102-.18.507-.498.922-.86 1.317-.735.8-1.739 1.46-2.738 1.878-.95.398-1.952.175-2.853.523-1.42.545-1.075 2.054-1.027 3.25-.805-.194-.992-.17-1.473-.776-.22-.278-.1-.744-.533-.862-.374-.101-2.39 1.14-2.676 1.495-.836 1.036.011 2.5-.204 3.707-.211 1.2-1.188 2.105-1.96 2.989-.251-.73-.504-1.458-.756-2.187-.376.488-.9.836-1.061 1.448-.085.317.174.744.03 1.066-.407.904-.813.332-1.572.363-.667.027-2.462.537-2.146 1.581.215.703 1.603.54 1.437 1.496-.2 1.162-1.707.401-2.318.644-.8.315-.483.997-.756 1.69-.48 1.217-1.448 1.326-2.452 1.922-.992.59-1.377 1.305-1.832 2.317-.567 1.264-.508.923-1.73.812-.752-.069-1.146.084-1.444.779-.244.566.172 1.264-.04 1.785-.263.643-1.624 1.372-2.095 2.025-1.277 1.775-1.827 3.966-2.87 5.87a20.488 20.488 0 0 1-1.571 2.428c-.775 1.032-1.257.836-2.302 1.39-1.693.897-1.199 3.267-1.385 4.832-.097.808-.297 1.553-.873 2.163-.344.364-1.563.78-1.322 1.506.29.879 1.265-.06 1.08 1.31-.146 1.091-1.39 1.987-1.666 3.08-.191.752.06 1.468-.135 2.227-.213.827-.861 1.455-1.172 2.234-.314.783.18 1.77-.089 2.365-.313.692-1.46.514-1.768 1.413-.337.982.451 2.527.593 3.53.09.642.43 1.34-.113 1.869-.462.45-1.556.368-1.084 1.483.218.516 1.038.408 1.127 1.187.069.6-.624 1.51-.998 1.915-1 1.08-2.892 1.98-1.53 3.355.235.237.524.125.745.447.26.374.295 1.045.442 1.473.354 1.027.86 1.993 1.489 2.88 2.396 3.376 6.363 4.966 9.002 8.031 3.22-3.204 6.514-6.33 9.545-9.714 2.57-2.871 5.058-5.843 8-8.354 1.52-1.296 3.258-2.342 4.521-3.913 1.207-1.5 1.651-3.387 2.57-5.054 1.804-3.271 4.403-6.019 6.337-9.209 3.791 2.471 2.207 8.78 1.115 12.319-.667 2.164-1.611 4.237-2.72 6.212-.938 1.672-2.258 3.333-2.708 5.23-.368 1.539.17 2.833 1.061 4.085 1.278 1.793 2.773 3.472 4.12 5.22l9.828 12.762c1.187-1.713 3.145-.592 4.721-.262 2.31.483 4.695.31 7.033.532 2.452.231 4.933.639 7.363 1.033 2.176.352.73 1.36 1.783 2.561 2.225-4.012 6.48-1.475 9.955-1.121 2.18.223 4.495.106 6.634.379 2.16.275 4.293 1.012 6.529 1.227 4.215.404 8.026 1.858 12.163 2.613 2.186.4 4.39.681 6.574 1.083.775.142 2.143.214 2.577 1.012.513.948-.53 2.948-.813 3.801-.423 1.274-.72 3.226-1.576 4.287-.663.82-.833.32-1.687.285-.988-.042-.586.17-1.269.934-.842.945-2.025.951-3.197 1.057-.534.048-1.601-.049-2.015.323-.583.522-.079.557-.124 1.357-.077 1.4-2.011 2.44-3.14 2.99-.725.352-1.503.64-2.32.582-.514-.037-1.125-.532-1.641-.326-.732.29-.676 1.672-1.1 2.256-.783 1.081-1.836.279-2.865.826-1.232.654-1.931 2.208-3.102 2.978-2.32 1.526-4.99 1.694-6.145-1.168-.463.958-1.553 2.444-1.144 3.409.363.855 1.51 1.487 2.283 1.907 2.265 1.23 4.485 2.457 6.657 3.858 4.991 3.22 9.79 6.746 15.127 9.4 5.253 2.612 10.774 5.427 16.572 6.57 5.954 1.17 12.04.43 17.572-2.036-.825-1.648-.951-2.71-1.002-4.59a394.968 394.968 0 0 1-.108-5.333c-.043-3.55-.024-7.1.1-10.647a148.045 148.045 0 0 1 2.29-21.15M764.413 350.616c-.536-1.91-1.145-3.9-1.265-5.884-.087-1.432.444-3.56-.41-4.807-.36-.53-1.01-.715-1.22-1.352-.168-.512.09-1.537.021-2.1-.177-1.465-.758-2.832-1.295-4.195-1.217-3.092-1.252-6.337-2.27-9.47-.555-1.717-1.6-3.183-2.21-4.872-.558-1.537-.84-3.16-1.016-4.78-.188-1.727-.185-3.44-.6-5.137-.388-1.584-.87-3.134-1.22-4.728-.834-3.793-1.801-7.507-3.13-11.163-.502-1.381-.867-3.697-2.092-4.625-.89-.674-2.06-.5-3.095-.43-1.177.08-2.143.135-2.926 1.117-1 1.255-1.638 2.62-2.796 3.798-1.18 1.2-2.654 2.235-3.716 3.537-.834 1.023-.356 1.371.54 2.244-1.16.15-2.114-.17-2.958.709-.86.893-1.512 2.376-2.058 3.473-1.23 2.471-1.37 4.694-1.736 7.37l-.98-1.526c-.414 1.126-1.015 2.296-2.208 2.759-1.461.569-1.417.384-1.421 2.022-.008 2.354-1.959 3.835-3.192 5.616-.692 1-1.36 2.138-1.813 3.262-.582 1.438-.213 2.382-.074 3.854.21 2.202-1.914 3.888-3.192 5.45-.4.486-.624.725-.848 1.32-.165.441.064.72-.268 1.19-.6.852-1.856.624-2.338 1.67-.453.978.175 1.964.273 2.932.158 1.546-.774 2.972-1.281 4.382-.553 1.532-.978 3.116-1.182 4.732a17.337 17.337 0 0 0-.131 2.81c.016.434.35 1.524.065 1.918-.368.51-1.174-.074-1.51.492-.691 1.162 1.887 1.533 2.39 1.713-.597.378-1.384.642-1.87 1.176-.642.707-.245 1.127-.51 1.92-.29.864-1.33 1.099-1.654 1.863-.333.784.316.952.654 1.603.826 1.587.084 3.964-.243 5.593-.131.654-.07 2.355-.48 2.861-.26.323-.845.204-1.073.488-.48.594.025.833.22 1.516.249.863.207 1.78-.024 2.643-.219.816-.75 1.569-.899 2.4-.162.911.29 1.22.602 2.067.693 1.886.206 4.219-.03 6.14-.276 2.236.508 4.348-.076 6.418L704 389.8c.198.986.395 1.971.591 2.957l.292 1.457c-.122.631.09.881.635.75 1.07.308 2.719-1.376 3.602-1.874 2.65-1.496 5.51-2.57 8.261-3.864 2.86-1.343 5.252-3.157 7.871-4.87 2.698-1.763 5.544-3.274 8.174-5.14 11.377-8.074 23.711-14.884 35.574-22.229-3.323.376-3.927-4.027-4.587-6.37M778.485 258.764c1.78.518 1.372 2.026.696 3.336-.684-.647-1.892-1.406-2.213-2.33-.397-1.148.493-1.304 1.517-1.006m49.769 44.611c-.095.458-.199 2.327-.55 2.617-.319.262-1.958-.107-2.392-.13-1.375-.072-2.425.207-3.727.528-2.238.554-2.642-.838-2.652-2.922-1.72 3.396-4.586 5.096-8.247 5.75-1.636.294-3.39.644-5.049.715-1.238.053-2.633-.056-3.858-.269-.777-.135-1.484-.613-2.217-.75-1.604-.3-.16.856-1.318 1.163-.297.078-1.42-.407-1.86-.433-.71-.043-1.423.075-2.132.038-1.608-.083-2.133-.978-3.407-1.668-.668-.362-1.124-.31-1.84-.209-.786.11-.189.372-1.107.21-.296-.053-.832-.385-1.074-.494-1.74-.781-3.1-1.476-4.44-2.83-.982-.99-2.22-1.657-3.2-2.64-.352-.353-.544-.786-.856-1.153-.405-.474-.433-.355-.94-.708-.58-.403-1.03-.63-1.383-1.268-.604-1.088-.58-2.592-.675-3.8-.322-4.115.416-7.781 2.371-11.41 2.122-3.94 3.883-8.106 6.368-11.841 2.248-3.379 5.068-6.55 7.836-9.516.782-.838 1.634-1.815 2.582-2.47.617-.423 1.42-.613 2.002-1.077 1.382-1.105.71-3.131.71-4.667.436.772 1.12 1.927 2.165 1.673.687-.167.71-.94 1.207-1.243.383-.233.834-.116 1.259-.16-1.672-8.202-3.824-16.479-6.516-24.411-7.357 7.22-14.72 14.491-21.863 21.926-3.685 3.836-7.088 7.929-10.756 11.78-3.856 4.047-7.796 8.012-11.695 12.017 1.06 1.025 2.274 1.72 2.997 3.042.666 1.214 1.43 2.134 2.345 3.174 2.07 2.349 3.059 5.847 4.338 8.675.253.556.321.723.254 1.226-.04.307-.357.578-.363.952-.008.474.217.79.5 1.15.263.337 1.04.72 1.105 1.16.077.525-.462.876-.641 1.367-.791 2.161 1.806 3.69 2.683 5.386.483.93.706 1.872.086 2.803-.507.761-1.626 1.056-1.032 2.215.37.726 1.405.328 1.252 1.337-.083.54-1.127 1.047-.15 1.64.79.48 1.73-.377 1.361 1.107-.164.663-1.052 1.33-.799 2.073.248.722 1.54.84 2.055 1.405.647.714.94 1.907 1.068 2.835.438 3.164 1.166 6.035 1.892 9.143.486 2.082-.766 2.119-2.616 2.133 1.247 1.748 2.474 3.502 3.805 5.188 1.303 1.65 1.64 4.21 2.25 6.206.734 2.399 1.45 4.805 2.163 7.207.325 1.096.55 2.166.115 3.267-.5 1.268-.492 1.273-.261 2.586 5.77-3.308 11.216-6.987 16.69-10.767 2.624-1.812 5.253-3.619 7.848-5.473 2.043-1.46 4.056-3.043 5.37-5.221 3.05-5.058 7.537-9.024 11.616-13.29 2.074-2.17 4.006-4.865 6.541-6.513 2.452-1.595 5.054-3.006 7.528-4.591l-2.746-3.77\"\n              />\n              <path\n                d=\"M645.674 371.323c2.35-1.12 4.518-2.626 6.804-3.872 1.982-1.082 3.785-1.604 5.489-3.102.713-.628 1.382-.864 2.219-1.278 1.062-.526 1.87-1.459 2.814-2.157-2.408-.937-4.769-2.387-7.43-2.419-1.18-.013-2.268.407-3.45.188-1.2-.222-2.136-.838-3.092-1.547-1.732-1.285-2.5-1.095-4.378-.032-.448.254-1.06.821-1.606.805-.883-.027-.75-.57-1.132-1.176-.348-.55.095-.613-.542-.63-.385-.01-.558.52-.986.603-.813.158-2.347-.636-3.16-.784-1.369-.247-2.42.049-3.774.134-1.405.09-2.773-.236-4.09-.685-1.202-.409-2.357-.985-3.572-1.352-1.582-.477-1.903.142-3.366.48-2.225.51-4.384-2.693-6.422-1 2.989 4.354 7.08 8.029 10.858 11.73 2.033 1.988 4.09 3.936 6.321 5.706 1.005.8 2.032 1.573 3.055 2.35.464.355.93.707 1.393 1.065.83.641.754.833 1.542.464 1.06-.496 1.88-1.546 3.042-2.05 1.147-.497 2.332-.903 3.463-1.441M647.158 275.908c.085 1.959 1.301 3.564-.416 5.222-.05-.972-.101-1.946-.153-2.918-.053-1.013-.563-2.114.569-2.304m-1.915-8.537c-.29.851-.66 1.466-1.471 1.9-1.16.62-2.767-.384-3.575.498-.812.888-.717 2.974-1.777 3.7-.34.232-.715.07-1.118.373-.347.26-.361.878-.714 1.15-.579.446-1.072-.01-1.618.25-.613.292-.713.99-.876 1.601-.16.6-.156 1.375-.596 1.844-.537.571-1.779.976-2.433 1.382-2.356 1.465-4.71 2.932-7.065 4.399.701.71 2.25 1.518 2.43 2.565.122.714-.373.793.22 1.355.269.256 1.22.528 1.544.69 1.334.67 2.688 1.26 4.15 1.577 1.737.378 3.477.2 5.208.614 1.818.434 3.609.77 5.486.727 1.603-.036 3.116-.482 4.703-.62 2.975-.256 6.833.012 9.259-2.085-.241-2.154-.48-3.791-1.28-5.842a438.06 438.06 0 0 0-2.246-5.633c-1.539-3.78-3.105-7.426-5.06-10.998-.4 2.503-1.355-.793-2.298-.818-.694-.018-.7.87-.873 1.37M810 294.557c1.31.325 2.362.49 3.589 1.055.908.417 1.254.638 2.045-.075.43-.386.51-.962 1.062-1.25.545-.286 1.287-.193 1.87-.222 1.478-.079 2.956-.11 4.434-.165-1.7-1.632-3.399-3.266-5.099-4.9-.264.453-.972 2.123-1.492 2.23-.156.032-.642-.49-.904-.51-.28-.023-.481.104-.726.212-.628.279-.909.924-1.61 1.096-.689.17-1.47-.15-2.167-.166-.191.658-.682 1.846-1.002 2.695M807.92 273.36c.296-1.223-.34-2.485-.146-3.728l-.422-.632c-.328.733-.538 1.455-.984 2.135-.37.567-.952 1.043-1.203 1.69-.456 1.171.117 2.136.69 3.175.768-.858 1.782-1.47 2.065-2.64M797.813 276c-1.032.024-.639.505-.779 1.275-.089.486-.328.919-.593 1.328-.53.822-1.803 1.65-1.076 2.762.618.945.652-.235 1.167.23.54.484-3.026 4.123-3.56 4.322-.29.107-.607-.222-.881.01-.247.21.088 2.305.077 2.732-.027 1.121-.101 2.328.81 3.13 1.06.93 2.805.965 4.06 1.494.86.362 1.664.88 2.57 1.124.955.256 1.778-.276 2.6-.153.62.092 1.828 1.097 2.454 1.396.84.402 1.003.464 1.822.152.451-.172 1.332-.505 1.638-.896.461-.593.108-.584.17-1.391.11-1.472 1.65-1.301 2.708-1.717-2.093-.627-3.25-2.875-4.28-4.71-.454-.81-1.377-1.777-1.623-2.683-.306-1.136.54-1.869 1.05-2.817-.694.282-3.414 1.532-2.104.055.407-.459 2.932-1.208 1.904-2.404-.62-.719-1.423.75-2.139.607-.83-.166-1.814-1.556-2.507-2.015-.836-.554-2.47-1.853-3.488-1.83M546.76 318.047c.05-3.504.62-6.99 1.636-10.34 2.088-6.883 6.514-12.915 7.938-20.014.685-3.417.464-6.882 1.122-10.305.692-3.608.664-7.303.794-10.963.13-3.605.261-7.213.215-10.822-.015-1.295-.38-3.094-.051-4.346.275-1.05.695-.657 1.586-1.036-.62-.38-1.89-.57-2.025-1.363-.09-.544.44-1.14.413-1.74-.02-.492-.258-.988-.4-1.448-.782-2.525-1.893-6.411-.454-8.837-.866-.146-1.216-.415-2.017-.049-.866.395-1.726 1.272-2.476 1.868-1.491 1.184-2.974 2.385-4.313 3.743-2.522 2.56-4.593 5.508-6.79 8.34-2.19 2.821-4.456 5.615-6.708 8.386-1.752 2.154-4.53 5.433-6.97 2.532-.732.974-1.198 1.954-2.396 2.426-1.463.577-2.089 1.175-3.144 2.413-.212.25-.845 1.312-1.119 1.412-.555.202-.237-.175-.672-.456-.684-.44-1.009-.74-1.253.479-.11.54.18 1.05-.083 1.587-.245.499-1.008.995-1.47 1.267-1.074.631-2.294.57-3.445.957-1.9.637-3.113 3.52-5.199 2.14-.757-.503-1.357-1.285-2.346-.752-.736.398-.862 1.381-1.923.992-.557-.203-1.012-.933-1.658-1.17-.456-.166-.945-.233-1.424-.29-1.061-.128-2.139-.083-3.167-.413-2.238-.718-3.776-2.703-5.3-4.376-1.137-1.249-.786-2.03-.47-3.617.27-1.35.55-2.697.882-4.032.658-2.65 1.508-5.267 2.782-7.69 1.48-2.82 3.642-5.184 5.617-7.656 4.111-5.14 7.99-10.56 12.45-15.403.838-.91 2.273-1.897 2.12-3.283-.168-1.522-1.895-.782-2.955-.518-2.844.708-5.46 2.084-8.172 3.15-1.5.59-3.509 1.74-5.116.984-1.516-.713-3.917-2.626-3.069-4.378.65-1.345 1.355-2.32 1.7-3.84.309-1.356.498-2.741.782-4.104.67-3.235 1.529-6.428 2.492-9.588 1.837-6.03 4.08-11.926 6.102-17.894-8.295.747-15.854 3.16-23.65 5.947.37.76 1.062 1.847.783 2.736-.343 1.094-1.82.727-2.185 1.48-.433.889.88 1.4.49 2.54-.327.958-1.266 2.065-1.81 2.926 2.55 1.645 1.559-1.773 3.349-2.006.496 2.72-.648 4-1.707 6.288-.942 2.039 1.223 1.844 1.668 3.369-1.246.207-2.1-.366-2.644 1.104-.233.625.117 2.913-.629 2.977-.55.047-.376-.955-.82-1.049-.553-.116-1.97 1.879-2.317 2.252 1.509 0 2.333.16 3.762.733a96.384 96.384 0 0 1-2.823 2.66c.88.364 2.377.446 2.829 1.427.418.912-.217 2.56-.306 3.506.376-.566.925-1.904 1.508-2.268.767-.48.988-.005.94 1.045-.088 1.93-2.606 1.806-2.958 3.345-.35 1.522 1.83.463 1.886 1.975.032.862-.974 1.6-.476 2.512-1.115-.625-1.252-.994-1.857-2.213-.425 1.543-1.345 3.986-.84 5.588.413 1.308 1.276.985.287 2.252-.367.47-.874.838-.887 1.478-.029 1.477 2.083 2.622.443 3.937-.637.51-1.325.567-1.649 1.454-.28.767.007 1.79-.221 2.625-.452 1.658-1.655 2.89-2.858 4.048-1.074 1.036-2.054 2.236-3.229 3.136-.637.49-.872.776-1.304 1.413-.183.272.042.527-.205.78-.29.293-1.026.263-1.415.338-1.282.25-2.84.767-3.267 2.193-1.564-1.184-3.157.255-4.673.724-.756.233-1.448.29-2.162-.107-1.14-.635-1.086-.729-2.451-.53-3.804.548-6.94-3.415-9.059-6.08-1.54-1.941-2.39-4.355-2.791-6.779-.474-2.846-.966-5.672-1.227-8.55-.546-6.032-.34-11.97-.124-18.013-7.03 3.707-13.616 8.536-19.913 13.364-6.278 4.814-11.65 10.838-17.294 16.39 1.435.092 2.82.6 4.26.63.709.014 1.405-.071 2.056-.367.358-.164.685-.373.982-.63.26-.523.624-.613 1.09-.272 1.414-.116 2.72-.409 4.138-.613 1.794-.259 3.702.282 5.464.587 3.295.57 6.79.191 9.973 1.214 2.784.896 5.685 2.177 8.366 3.336 2.58 1.117 4.846 3.558 7.032 5.304 1.26 1.005 2.65 1.435 3.978 2.258 1.284.796 2.259 2.53 3.166 3.704 2.191 2.834 4.637 5.452 6.831 8.271.98 1.26 1.866 2.627 2.422 4.132.286.768.31 1.63.585 2.38.245.67.709 1.057 1.116 1.626 1.345-3.62 2.647-7.254 4.038-10.855.535-1.384 2.926-8.03 4.796-5.48 1.61 2.193.698 6.697.195 9.145-.673 3.28-1.42 6.548-2.154 9.816-1.458 6.484-2.794 13.028-4.648 19.41-.12.414-.36.914-.39 1.343-.053.743-.31.321.199.84.26.264.879.185 1.125.501.45.577.296 2.585.263 3.287-.062 1.333-.807 1.918-1.156 3.105-.303 1.037.214 2.103.224 3.149.025 2.59-1.32 5.409-1.788 7.975-.298 1.627.64 4.205-1.645 4.517.568.958-.104 1.366-.604 2.072-.62.878-.66 1.763-1.053 2.775-.347.892-.884 1.506-.98 2.392-.086.805.272 1.576-.005 2.393-.325.964-.94 1.075-1.752 1.495-.785.406-.555-.068-.828.723-.12.348.04 1.15-.035 1.553-.355 1.897-1.866 3.166-3.127 4.494-.471.498-1.083 1.653-1.661 1.96-.846.448-2.113-.331-2.889.084-.712.38-1.457 3.42-1.72 4.159-.556 1.57-1.084 3.154-1.614 4.733-1.944 5.787-3.856 11.585-5.778 17.379.919-.023 2.453-1.035 3.343-.62 1.02.474.363 1.874.746 2.636.274.546 1.87.463 2.62.504 1.247.068 1.815-.291 2.937-.617 1.94-.563 4.377-.366 6.396-.585 4.47-.486 9.069-.622 13.464-1.603 4.209-.938 8.242-2.498 12.373-3.711-1.928-1.014-2.287-3.514-2.84-5.416-.305-1.053-.419-1.886-1.011-2.841-.686-1.107-1.279-2.23-1.713-3.464-1.686-4.79-1.763-10.729-1.193-15.722 1.166-10.203 4.8-19.756 10.402-28.318 2.68-4.094 5.777-7.87 9.206-11.354 3.5-3.557 7.094-7.45 11.202-10.315 1.86-1.3 4.033-1.756 5.66-3.303 1.25-1.186 3.25-1.449 4.782-2.287 2.138-1.171 3.956-2.092 6.361-2.585 1.771-.364 3.76-1.267 5.605-1.037 1.262.157.79.747 1.532 1.328.98.768.625-.315 1.35-.586.613-.23.999.355 1.51.54.232.084 1.27.069 1.216.036.562.34.468 1.542.788 2.11.345.613.855 1.028 1.07 1.723.288.929.092 1.633-.3 2.423-.43.872-1.08 1.3-.04 2.147-2.597 1.709-.993 5.142-2.948 7.212-.664.703-2.158 1.685-2.136 2.778.025 1.178 2.14 1.644 1.052 2.82-.991 1.07-3.127.564-4.274 1.516-1.155.96-.771 2.612-.875 3.933-.08 1.011-1.064 2.231-.655 3.207.268.64.734.545.754 1.244.018.566-.452 1.319-.606 1.866l-1.299-.567c-.206.762-.56 1.5-.655 2.29-.113.926.265 1.373.459 2.199.194.829-.253 2.268-.335 3.258-.095 1.135-.207 2.325-1.013 3.205-.478.522-1.134.603-1.649 1.007-.48.376-.626.881-.954 1.38.745-.22 1.49-.44 2.237-.658-.302 1.424-.838 2.001-1.788 3.12l-.469-2.466c-.27.863-.76 1.55-.712 2.48.04.795.397 1.558.4 2.378.007 1.598-1.172 2.645-.689 4.182.583 1.858.704 2.834.127 4.737-.505 1.667-1.212 3.327-1.336 5.083-.138 1.981.755 3.687.57 5.7-.085.933-.474 1.591.564 1.694.927.093 1.933-.673 2.734-1.055 3.956-1.884 7.898-3.798 11.844-5.703-.735-1.024-.555-1.056-.095-2.316l1.034-2.849c.73-2.018 1.465-4.034 2.22-6.044 1.402-3.74 3.28-7.437 3.963-11.398.618-3.576.299-7.141.351-10.741M305.303 605.62l-3.917-2.47 2.283-1.743c.825-.629 1.197-1.215 1.684.022.512 1.3-.1 2.843-.05 4.192m-1.66-9.49c1.838 2.149-1.596 2.77-2.92 3.04.214-1.034.979-5.31 2.92-3.04m40.276-7.558c-.595-1.826-1.561-6.872-4.318-6.56-.66.076-1.255.734-2.037.79-.668.047-1.324-.131-1.985-.187-1.449-.122-3.007-.04-4.393.422-1.613.538-2.803 1.303-4.558 1.416-1.253.082-2.57-.023-3.793.332-2.096.606-1.954 2.465-1.66 4.31-.355-.403-.758-.71-1.015-1.183-.29-.534-.291-1.134-.743-1.6-.894-.927-1.923-.488-3.028-.408-1.25.09-2.853-.746-4.053-.277-.533.208-.848.805-1.403 1.053-.493.22-1.036.259-1.563.321-1.18.138-2.388.531-3.456.51-1.515-.032-2.794-.13-4.297.277-1.402.378-2.742.954-4.142 1.338-1.555.426-3.162.468-4.74.777-3.147.619-6.247 2.031-9.464 2.213-1.685.095-3.312.093-4.99.359-.518.081-1.686.055-2.108.345-.47.323-.792 1.665-1.059 2.216-2.884 5.954-4.976 12.29-7.278 18.484-2.393 6.442-4.774 12.89-7.181 19.327-1.132 3.026-2.577 6.045-3.515 9.132-.867 2.856 2.504 4.866 4.296 6.663 4.388 4.398 8.825 8.745 13.808 12.478 5.017 3.76 10.69 6.289 16.4 8.809 5.86 2.586 12.015 4.063 18.345 4.956 3.252.459 6.524.772 9.797 1.035 3.28.265 6.062-.189 9.297-.604-.32-.747-1.362-2.056-1.24-2.886.036-.233.514-.621.627-.895.154-.374.139-.77.148-1.164.045-1.883-.692-3.709 1.722-4.38l.241 3.084c1.167-1.755.43-3.639-.277-5.407l-2.46 2.052c.169-.5 1.542-3.668 1.161-3.967-.378-.296-1.061.495-1.468.113-.33-.311.038-1.047-.066-1.444-.167-.639-.86-1.13-.853-1.83.011-.931 1.206-1.651 1.77-2.251.828-.879 1.166-1.508 1.162-2.71-.005-1.66.773-1.568 1.984-2.676 1.959-1.79 2.08-4.255 1.07-6.613l2.6-.2c-.803-2.022-1.63-4.04-2.417-6.068-.779-2.005.284-3.057.81-4.927 1.188 1.178 2.378 2.355 3.568 3.533.337-3.807 1.346-7.647.869-11.485-.148-1.19-.37-1.119.176-2.008.393-.638.948-1.135 1.293-1.829.677-1.364.88-2.888 1.017-4.385.127-1.391.066-2.92.46-4.27.298-1.018 1.274-1.59 1.509-2.72.407-1.961-2.722-5.383-.902-6.836.928-.74 2.082-.032 2.752-1.242.575-1.038.798-2.47 1.134-3.595.537-1.792.79-3.185.142-4.987-.57-1.586-1.173-3.147-1.696-4.75M372.653 496.758c-.458-1.047-1.173-1.235-2.256-1.444-4.66-.896-9.361-.901-14.064-1.333-1.336-.122-2.667-.311-3.971-.636-1.092-.274-2.123-.882-3.195-1.138-2.136-.51-4.255.904-6.39.801-1.093-.053-2.016-.704-3.057-.977-.853-.224-1.629-.049-2.499.007-1.685.108-3.386.022-5.062-.152a38.422 38.422 0 0 1-6.129-1.124c-1.326-.361-3.335-.747-4.317-1.762-2.238 3.433-4.12 7.027-5.74 10.783-1.578 3.653-3.674 7.108-5.598 10.59-3.918 7.099-6.724 14.72-9.375 22.353 1.461-.67 2.52-1.355 3.618.162 1.035 1.433 2.263.964 3.938 1.235 2.688.434 2.979 3.409 3.568 5.631.868-1.082 1.738-2.164 2.608-3.245.697.776 1.818 1.18 2.387 2.073.364.572.159 1.102.375 1.647.2.507.712.712 1.097 1.07 2.662-3.402 5.161 3 5.482 5.19l1-2.545c.473.513 1.118.951 1.488 1.55.231.373.22 1.04.466 1.35.367.462.608.258 1.135.386.849.205.685.157 1.176.811 1.482 1.976 3.69 3.497 4.94 5.624 1.568 2.673 3.706 5.428 4.649 8.383.54 1.693.776 3.281 1.658 4.856.463.83 1.265 1.54 1.683 2.349.521 1.007-.397 1.422-.293 2.323.102.907 1.608 1.79 2.356 2.071 1.176.443 2.57.304 3.81.34 1.597.046 3.49-.012 5.04-.472 1.351-.402 1.247-1.096 1.617-2.286.439-1.412 1.208-2.765 1.82-4.108.91-2 1.351-3.332-1.374-3.931 1.565-.262 4.121-.722 3.623-2.819-.239-1.006-1.146-1.683-1.007-2.794.14-1.132 1.015-1.514 1.851-2.102 1.58-1.113 2.718-3.191 3.291-4.991.319-1.001.406-1.781.07-2.785-.531-1.583-.81-2.877-.943-4.566l2.163.23c-.158-.64-.182-1.147-.473-1.735-.097-.19-.597-.34-.568-.61.049-.47.684-.46.96-.788.717-.844.925-2.818 1.222-3.842.282-.973.431-2.154.961-3.027.986-1.627 2.204.668 1.958-1.641-.124-1.17-.215-2.904-1.673-3.074-1.735-.202-2.235.482-2.072-1.599.113-1.472-.283-4.632 1.296-5.422.752-.377 1.991-.332 2.83-.402 1.005-.085 1.795.447 2.72.416 1.55-.053 1.46-2.263 1.639-3.386.786-4.996 1.182-10.08.695-15.126-.192-1.992-.316-4.498-1.134-6.369\"\n              />\n              <path\n                d=\"M413.045 299.57c-.102-3.646-.102-3.646 1.921-5.028.536 2.32-.795 3.485-1.92 5.028m36.757 9.305c.436-.869 2.236-.615 2.998-.604-.356.735-1.593 2.525-1.97 3.89-.418-.79-1.455-2.439-1.028-3.286m-4.725 25.824c.79-.626.606-.595.983-1.351.292-.586.223-.893.849-1.283 1.268-.786 1.464-.782 1.79-2.46.284-1.462.167-3.547.808-4.9.46-.97 1.978-1.06 2.005-2.277.05-2.366-4.228-3.572-3.412-5.959.244-.71 1.015-.931 1.342-1.542.2-.373.063-.86.13-1.259.146-.89.392-1.085 1.214-1.319-.09.408-.096.77.045 1.042.54 1.045 2.691-.207 3.18-.928 1.011-1.489.077-3.96-.255-5.512-.452-2.11-.384-3.716-.216-5.832l2.752 3.02c.5-1.523.587-2.343 1.984-3.295 1.296-.883 1.799-1.468 2.63-2.778.316-.498.53-1.05 1.156-1.226.613-.17 1.622.49 2.136.235.32-.16.664-1.81.772-2.105.344-.935.687-1.872 1.029-2.807-1.962-4.954-3.565-10.207-6.497-14.713-2.686-4.128-6.575-7.465-10.505-10.396-1.96-1.463-3.944-2.952-6.004-4.277-2.067-1.332-4.3-1.812-6.505-2.806-2.21-.996-4.751-2.028-7.205-2.152-1.248-.063-2.451.229-3.701.064-1.383-.182-2.711-.65-4.084-.883-.003 7.18-2.617 14.464-5.062 21.144-1.112 3.04-2.707 5.845-3.875 8.862-1.177 3.035-2.333 6.063-3.612 9.058-2.635 6.17-5.04 12.607-8.437 18.41-.3.515-.643.882-.463 1.338.052.13.483.392.595.507.344.353.623.768.86 1.198.557 1.014.815 2.155 1.225 3.228.944 2.455 2.627 4.864 3.928 7.163 1.488 2.627 3.479 4.923 5.67 7 1.031.979 2.556 1.879 3.175 3.175.485 1.016.505 2.21.849 3.272l.36-2.548c.9 1.912 3.222 2.09 4.901 3.042 2.126 1.206 3.975 2.694 6.243 3.669 2.285.983 4.666 1.774 7.129 2.177 1.226.199 2.508.348 3.752.294 1.273-.056 2.187-.672 3.339-1.125-3.617-3.117-2.3-8.524-.237-12.118l1.904 4.19c.418-.994 1.849-1.931 1.212-3.098-.385-.706-.885-.524-.996-1.34-.086-.622.331-1.472.635-2.001.273.74.384 1.417.484 2.202M434.538 357.951c-.813-1.794-4.16-2.21-5.84-2.554-2.776-.57-5.435-2.21-7.93-3.516-2.39-1.251-4.411-2.419-6.346-4.283-.903-.869-1.652-1.055-2.766-1.554-1.07-.479-1.799-1.229-2.572-2.087-1.617-1.793-3.728-3.152-4.955-5.258-1.243-2.139-2.966-3.505-4.493-5.43-1.786-2.254-3.055-4.861-4.609-7.269-2.786 3.001-3.54 7.684-5.23 11.326-2.105 4.538-4.118 9.12-6.095 13.716-3.544 8.245-6.988 16.541-10.074 24.97-.113.31-.72 1.34-.616 1.673.103.325.888.681 1.136.946.652.692 1.062 1.54 1.586 2.331a31.203 31.203 0 0 0 3.242 4.059c2.674 2.854 5.788 5.528 9.193 7.465 1.48.843 3.588 2.512 5.282 2.367 2.179-.186 3.835-.333 6.025.161 2.135.481 3.996.9 6.196.841.858-.023 1.75-.137 2.57.2.588.243 1.006.914 1.67.944.833.037 1.333-.748 2.102-1.033.672-.248 1.392-.285 2.1-.25 1.036.05 3.452.985 4.28.184.897-.863.555-3.358 2.233-3.685 1.245-.244 3.767 2.034 4.785 2.672-.44-1.324-1.952-3.913-1.13-5.302.355-.603.85-.71 1.561-.566.828.168.898.76 1.556 1.129 3.57 2.005 3.253-7.531 3.134-8.991L427.81 381c0 .836.264 2.711-.298 3.052-.463.281-2.149 0-2.734 0 1.241 1.18 1.822 2.19-.05 3.198-1.276.687-2.856-.077-2.99-1.646-.143-1.643 2.422-1.894 1.95-3.517-.63-2.178-2.549 1.51-2.898 2.153-.512-1.89-.191-3.62 1.076-5.114 1.5-1.772 3.21-1.878 5.339-1.318.203-.895.662-1.512.908-2.328.294-.975-.154-.742-.583-1.588-.7-1.379.7-1.857.964-3.042.157-.707-.132-1.326-.477-1.917-.383-.658-1.127-1.112-.026-1.471.817-.267 1.782.516 2.553-.189.835-.764.528-2.36.982-3.31.682-1.437 1.442-.55 2.55-.147.833.303 1.083.274 1.183-.645.05-.46-.012-.918-.364-1.243-.575-.53-1.37-.152-2.019-.33-.881-.24-.924-.796-1.26-1.592 1.535-.136 1.558.353 2.95.941 1.106.468 2.32.399 3.434-.01-.773-.278-1.715-.348-2.406-.828-.878-.61-.678-1.324-1.056-2.158M530.243 305.993c1.519-2.807 2.893-5.681 4.26-8.564.83-1.751 2.622-4.172.494-5.615-1.435-.973-4.058-2.34-5.871-1.605-1.539.624-2.384 4.264-4.502 1.877-.386 1.101-1.7.921-2.487 1.517-.585.443-.532.892-.886 1.46-.367.589-.984.992-1.439 1.506a11.923 11.923 0 0 0-1.372-2.132c-.483.812-.37 1.306-.637 2.125-.153.473-.288.8-.782.983-1.133.424-2.246-.964-2.819-1.729.34 1.194.516 2.583-.3 3.624-.633.808-1.663.965-2.258 1.81-.667.945-.71 1.663-1.907 2.052-.23.075-1.033.28-1.28.275-.264-.005-.393-.46-.504-.457-.365.01-.986.46-1.32.615.745.938.453 1.33-.351 1.941-.975.741-.921.818-1.4 1.954-.228.54-.496 1.03-1.03 1.328-.536.3-1.25.044-1.696.355-.902.63-.8 2.26-1.512 3.057-.958 1.072-2.169 1.814-3.053 3.014-.894 1.21-1.608 2.54-2.292 3.875-1.326 2.59-3.099 5.005-3.278 7.95-.074 1.213.027 2.827-.53 3.951-.565 1.138-1.785 1.598-2.256 2.92-.398 1.12-.646 2.516-.787 3.693-.17 1.422.718 2.498.1 3.876-.59 1.313-.708 2.257-.822 3.708-.107 1.345-1.167 2.259-.516 3.408.633 1.115 1.283 1.933 1.462 3.277.194 1.457-.04 1.987-1.304 2.602.765 1.299 1.602 2.304 2.024 3.772.405 1.406.933 2.629 1.826 3.803 1.768 2.323 4.002 3.548 3.962 6.781l24.07-8.053c-3.095-.582-1.513-6.007-1.312-8.034.37-3.713.77-7.444 1.306-11.138.462-3.178 1.364-6.26 1.857-9.436.256-1.646.5-3.3.931-4.912.375-1.404 1.166-2.72 1.482-4.097.717-3.125 1.16-6.03 2.46-9.018 1.246-2.86 2.787-5.578 4.27-8.32M296.544 582.616c.63-.44 1.224-.355 1.96-.434 1.896-.206 3.537-.625 5.39-1.169 2.216-.65 4.575-1.026 6.851-1.42 2.181-.378 4.393-.288 6.524-.927 2.131-.64 3.839-1.24 6.08-1.327 2.454-.096 3.895-1.239 5.902.81 1.799-2.51 4.399-2.494 7.264-2.89 1.028-.143 2.224-.004 2.453-1.231.214-1.143-.695-2.656-1.191-3.583-2.635-4.922-4.86-10.126-8.367-14.514-3.435-4.302-7.885-9.069-12.74-11.756-2.631-1.456-5.669-2.258-8.457-3.354-3.024-1.188-5.983-2.537-8.967-3.821-1.552 1.662-1.68 3.672-2.456 5.779-.725 1.964-1.968 3.694-2.629 5.684-1.322 3.989-2.451 7.938-4.104 11.82-3.493 8.204-6.883 16.378-10.057 24.717 4.996-.776 9.864-1.264 14.91-1.579.988-.062.922-.306 1.634-.805M561 276.25c1.432.153 3.125.522 4.032 1.75 3.88-5.62 8.543-10.64 13.393-15.43 4.711-4.655 9.496-9.256 14.66-13.413 10.447-8.406 21.982-15.154 33.915-21.203-3.782-4.357-7.503-8.777-11.312-13.107-3.556-4.04-7.745-7.448-11.899-10.847-.334 3.372-.92 6.823-.89 10.214.03 3.417.498 6.818.544 10.234.04 2.776-.05 5.735-.764 8.43-.55 2.086-1.795 5.136-4.074 5.802-3.108.907-8.378-.632-10.703-2.816-2.003-1.882-3.062-4.687-4.653-6.888-1.09-1.505-2.233-2.148-4.067-1.55-2.745.895-5.389 2.524-7.966 3.814-2.914 1.459-5.818 2.938-8.734 4.395.2.143 1.387.752 1.437 1.022.016.084-.664 1.491-.685 1.767-.08 1.093.449 2.14.778 3.151.35 1.077.63 2.198.584 3.34-.049 1.214-.717 2.046-.957 3.158-.253 1.172.612 1.586 1.058 2.608.458 1.046.477 2.176.279 3.285-.162.903-.712 1.837-.705 2.749.005.49.423 1.037.275 1.542-.146.502-.741.786-1.086 1.12 1.573 1.034 1.866.883 1.243 2.571-.449 1.215-.288 2.414-.09 3.66.107.677.806 2.48.334 3.164-.431.627-1.85.137-2.503.114.24 1.263.582 1.131 1.175 2.178.387.682.349 1.567.309 2.327-.106 1.969-1.315 2.187-2.928 2.86M329.565 484.61c2.111.62 4.144 1.081 6.346 1.228 1.905.128 3.873.182 5.645.991.65.297 1.358 1.103 2.065 1.09.846-.013.582-.59 1.174-.965.566-.357.986.043 1.54.194.827.225 1.656.216 2.513.245 2.369.078 4.738.127 7.107.186 2.134.053 4.2.403 6.323.415 2.24.013 4.48 0 6.722 0-1.764-3.39-3.246-6.945-6-9.662-1.396-1.375-2.566-2.914-3.889-4.356-1.312-1.431-2.925-2.452-4.38-3.715-1.53-1.329-2.774-2.714-4.558-3.733-.736-.42-1.568-.975-2.373-1.223-.665-.205-1.322-.117-1.936-.48-.72-.426-1.366-1.307-2.063-1.812-.731-.528-1.506-.989-2.294-1.426-1.573-.874-3.211-1.627-4.737-2.587A309.874 309.874 0 0 0 324 485.541c1.711-1.362 3.528-1.528 5.565-.93M452.325 218.852c.439.52.93 1.04 1.223 1.66.337.714.14 1.403.345 2.085.253.84 1.225 1.216.634 2.272-.4.72-1.361.889-1.638 1.73-.497 1.511 1.23 2.9 1.914 4.09.408.708.69 1.46.53 2.28-.099.502-.536.874-.652 1.318-.198.778-.001-.012.09.78.094.819.428 1.68.49 2.542.065.896-.25 1.859-.083 2.727.363 1.904 1.741 4.54 2.846 6.14.957 1.388 1.747 1.88 3.32 1.259 8.4-3.317 10.096-12.415 11.797-20.187 1.009-4.607 1.578-9.05 1.631-13.76.055-4.93.436-9.863.073-14.788-1.39.399-3.129.541-4.092 1.737-.514.639-.526 1.441-1.017 2.021-.677.797-2.082 1.474-2.956 2.129l-13.206 9.877-1.843 1.38c-.633.472-.806.396-.704 1.083.08.54.957 1.224 1.298 1.625M511.299 246.308c-.79 1.031-2.29 1.265-3.252 2.215-.932.922-1.468 2.091-1.914 3.295-.594 1.597-1.232 2.75-1.273 4.48-.038 1.608-.548 3.083-.791 4.653-.163 1.063-.107 1.39.968 1.702 1.494.433 3.305.395 4.836.238 7.337-.75 13.125-6.433 17.578-11.749 5.105-6.092 9.161-12.918 13.549-19.507-2.102-1.186-4.378-2.072-6.384-3.423-1.887-1.272-3.573-2.87-5.43-4.212-.253.773-.253 1.656-.571 2.404-.362.852-.868.993-1.64 1.477-1.394.873-2.523 2.069-3.416 3.427-.82 1.249-1.225 2.842-2.214 3.946-.925 1.036-2.265 1.448-3.315 2.274-1.544 1.216-2.818 3.39-4.063 4.91-1.015 1.239-1.72 2.634-2.668 3.87M374.46 313.167c.284.771.875 1.852.444 2.67-.787 1.494-1.567-.71-2.341-1.067.182 1.283.322 2.56.654 3.813.222.844.52 1.702.361 2.59-.168.948-.946 1.48-.956 2.443-.009.896.462 1.815.598 2.699-1.474-.174-1.794-.365-2.688.748.366.113 1.275.191 1.565.43.426.347.205.18.301.828.13.863-.033 2.294-.063 3.222-.033 1.073-.647.877-1.112 1.613-.323.512-.241 1.502-.16 2.07.115.784.765 1.646.67 2.433-.115.953-1.016 1.009-1.464 1.72-.586.936-.07 1.622.193 2.584.358 1.316.304 2.693.477 4.037 6.436-12.966 11.477-26.59 18.686-39.153.176-.305.35-.612.523-.92a55.67 55.67 0 0 1-.638-.378c-.096-.63-.07-1.412-.126-2.113-.124-1.517-.542-2.988-.735-4.494-.215-1.684.16-3.3-.004-4.969-.055-.577-.19-1.148-.203-1.73-.02-.88.459-1.524.529-2.3.069-.795-.396-1.852-.4-2.706-.002-.67.07-1.338.166-2 .256-1.773.787-3.493 1.055-5.265.55-3.639.586-7.338 1.208-10.972-.97 1.431-2.067 2.772-3.03 4.21-.96 1.433-1.579 3.011-2.449 4.488-.736 1.25-1.63 2.392-2.581 3.481-.793.909-.782.85-.464 1.977.135.484.323 1.05.245 1.563-.337 2.206-3.633 1.46-3.155 3.862.243 1.213 1.155 2.329.66 3.626-.443 1.163-1.776 1.756-2.282 2.911-.556 1.273.189 2.149.237 3.384.042 1.077-.44 1.915-1.175 2.65-1.01 1.01-.964 1.672-1.223 3.103a11.194 11.194 0 0 1-1.331 3.593c-.64 1.1-1.43 1.432-1.094 2.67.245.895.779 1.772 1.102 2.649M359.134 333.02c1.104 4.23 2.804 8.305 5.138 11.98.396-2.146 1.024-4.21 1.133-6.404.107-2.171.18-4.323.418-6.486.447-4.048 1.2-8.052 2.027-12.034 1.735-8.358 3.382-16.727 5.15-25.076a2039.87 2039.87 0 0 0-7.841 12.52c-1.264 2.041-2.527 4.083-3.786 6.126-1.03 1.67-2.91 3.761-3.198 5.745-.328 2.246-.109 4.884-.033 7.156.074 2.211.435 4.34.992 6.473M396.008 282.95c.045.574.447 1.207.559 1.795.133.698.125 1.417.143 2.125.042 1.71.114 3.42.172 5.13 3.455-4.756 5.305-10.413 8.419-15.374 1.347-2.148 2.835-4.225 3.825-6.569 1.086-2.574 2.089-5.137 3.342-7.641.685-1.368 1.39-2.726 2.067-4.097.324-.657.668-.965.319-1.606-.148-.27-.626-.63-.915-.69-.896-.19-1.417.867-2.128 1.226-.97.49-2.19.324-3.207.667-2.344.789-4.59 2.25-6.885 3.208-.73.305-1.257.425-1.2 1.301.052.778.854.62.028 1.297-.447.366-1.033.196-1.547.145 0 1.68.345 2.698-.475 4.196-.655 1.2-.386 2.116-.464 3.384-.09 1.452-.652 2.955-1.197 4.292-.51 1.255-1.27 2.236-.529 3.544.409.721 1.287 1.249.775 2.073-.458.739-1.194.462-1.102 1.595M386.058 505.442c-2.49-1.477-.133-2.978 0-4.36v4.36Zm-3.806-8.436c-.377.018-1.658.154-1.89.544-.102.173.1 1.779.1 2.022-.007 1.228-.132 2.455-.064 3.683.068 1.257.7 2.416.752 3.623.05 1.134-.668 1.741-1.005 2.752-.446 1.332.148 4.998 1.631 5.37.035-.315.1-2.745.318-2.848.71-.336 1.055 1.5 1.257 2.002 1.966-1.945 2.548-4.614 3.47-7.224 1.062-3.003 2.12-6.006 3.179-9.01-1.301-.129-2.608-.208-3.905-.379-1.258-.166-2.565-.597-3.843-.535ZM347.82 582.211c-1.103.466-.787 1.797-.751 2.969.046 1.6.582 2.901 1.99 3.82.52-1.384 2.385-4.416 1.843-5.862-.437-1.167-2.062-1.358-3.082-.927\"\n              />\n              <path\n                d=\"M561 249c.727-.663 1.853-1.095 1.988-2.175.133-1.068-.874-2.846-1.192-3.825l-.796 6M399.614 454.552c-1.89-.008.154-3.94.457-4.842.596 1.019 2.022 4.853-.457 4.842m15.75-49.73c.745-.445 2.152-.963 2.558-1.805.47-.975-.495-.966-1.342-1.025-1-.07-2.315-.135-3.293.055-1.003.196-1.432.426-2.371-.167-.533-.335-1.038-1.168-1.65-1.29-.636-.126-1.37.546-1.92.801-1.92.887-3.957.313-5.993.41-.769.037-1.407.22-2.12-.111-.912-.424-1.12-.988-2.241-.913-1.817.123-3.208.677-5.07.181-1.155-.307-2.744-1.526-3.987-1.15-1.154.349-1.757 2.164-2.67 2.933-.306-1.583-.473-3.332-1.686-4.52-1.359-1.33-3.56-1.807-5.134-2.9-3.554-2.466-6.128-6.015-8.837-9.321-1.72 2.596-2.943 4.975-4.092 7.89-1.097 2.782-2.163 5.575-3.26 8.357-2.21 5.6-4.567 11.146-6.988 16.66-4.915 11.194-10.433 22.082-15.268 33.319 3.307.08 6.537 1.706 9.386 3.265.745.408.777.569 1.256 1.213.231.31.546 1.07.966 1.174.246.06 1.031-.376 1.42-.32.582.085.99.463 1.43.812a167.954 167.954 0 0 1 8.204 6.871c1.213 1.087 2.036 2.114 2.86 3.515.906 1.545 1.887 2.527 3.269 3.654 2.23 1.818 3.519 5.01 5.078 7.443.895 1.398 1.768 2.817 2.453 4.332.62 1.37.836 3.016 1.963 4.09 2.383 2.265 6.111.964 8.999 1.339 1.136.147 1.41.468 2.432.01.012-.403.165-.547.46-.432.337.086.644.239.92.457.752.409 1.468.902 2.197 1.351l1.276-3.145c-.478-.01-2.205.2-2.474-.521-.226-.605.722-.774 1.079-1.148.396-.416.628-1.769 1.4-1.741.632.023.597.577.588 1.118 1.362.029 1.35-1.158 1.581-2.169.157-.68.377-1.351.554-2.028.117-.456.882-2.325.689-2.717-.486-.977-3.607-.917-1.617-2.107.634-.38 2.122-.26 2.614-.796.391-.43.426-2.19.542-2.779-.928.065-2.044.626-2.613-.2-.822-1.194.378-3.017.985-4.014.784.617 1.274 1.292 2.168.578.96-.765 1.834-2.194 2.191-3.296-1.036-.031-.851.175-1.378-.633-.3-.462-.386-1.263-.535-1.78-.304-1.063-.92-1.873.362-2.157.802-.177 1.002.008 1.235.77.307 1.004.196 2.725.316 3.798 1.255-1.583 2.542-3.287 2.07-5.434-.799.795-.88.58-1.844-.038-.962-.617-1.909-1.257-2.862-1.89 1.206-1.093 3.119-.034 4.307-.932.808-.61.395-2.483.45-3.325.068-1.06.528-2.131.465-3.192-.066-1.147-1.381-1.65-.684-2.702.49-.737 1.625-.626 1.837-1.73.214-1.107-.906-1.774-1.74-2.257 1.234-.401 3.604-.828 2.49-2.48-.527-.78-1.165-.848-1.154-1.956.01-.801.538-1.667.88-2.364.461 1.058 1.142 3.541 2.578 3.457 1.197-.07 2.26-1.145 1.915-2.228-1.061-3.338-4.08-3.581-7.017-4.209.549-2.023 1.997-1.906 3.46-.879.867.607 1.409 1.119 2.512.493 1.15-.652.594-.895.087-1.832-1.035-1.906.398-2.999 1.8-4.11.808-.64 1.2-1.44 1.89-2.135.707-.71 1.851-.867 2.743-1.284-1.068-.522-2.036-1.067-3.225-.66-.79.272-1.368.802-2.27.344-2.019-1.022.603-1.283.872-2.127.152-.48-.366-1.454-.17-2.135.2-.696.633-1.287 1.019-1.887.82-1.275 1.717-2.563 1.228-4.153.988 1.137 1.32 1.387 1.399 2.986.07 1.42.079 2.846.364 4.244.061-2.061 1.953-3.435 2.271-5.418.098-.618-.404-2.133.185-2.463.46-.258 1.401.4 1.888.403-.339-1.883-.395-3.866-1.032-5.685-.623-1.782-2.244-2.466-3.604-3.633\"\n              />\n            </g>\n            <g fill=\"currentColor\">\n              <path\n                d=\"M933.692 204.51c-2.507.524-4.924 1.334-7.45 1.815-2.994.568-5.992 1.09-9.01 1.528-2.025.294-3.858.756-5.189 2.449-2.477 3.153-4.97 8.59-1.559 11.936 1.604 1.572 4.416 1.077 6.477 1.731 2.296.73 4.435 1.539 6.842 1.853 11.221 1.457 22.382 4.17 33.36 6.87 5.01 1.232 10.008 2.936 14.797 4.858 2.452.984 4.848 2.13 7.04 3.613 1.875 1.267 4.014 2.516 5.524 4.218-6.004 1.02-12.745 1.139-18.75.12-3.011-.512-6.042-.369-9.08-.599-3.044-.23-6.088-.446-9.129-.714-2.95-.26-5.881-.587-8.811-1.026-1.085-.162-2.183-.323-3.281-.18-.638.082-1.041.276-1.624.144-.488-.111-1.012-.494-1.502-.658-2.248-.75-4.647-.606-6.978-.74-1.747-.1-3.611-.625-5.36-.238-3.074.678-4.476 4.996-5.18 7.643-.442 1.668-.09 3.741.45 5.39.62 1.89 1.758 1.855 3.282 2.713 2.178 1.227 4.089 2.568 6.438 3.525 1.967.803 3.98 1.5 5.927 2.354 4.287 1.877 8.935 3.506 12.973 5.875 2.19 1.286 4.262 2.57 6.558 3.684a44.463 44.463 0 0 1 5.949 3.457c3.852 2.672 7.204 5.994 10.062 9.703-1.326 0-2.409.172-3.678-.278-1.559-.55-3.016-1.359-4.595-1.857-3.008-.95-5.957-1.845-8.931-2.928-2.971-1.083-6.015-2.156-9.049-3.052-1.555-.46-3.126-.664-4.703-1.001-1.391-.299-2.626-.923-3.94-1.45-6.31-2.534-13.063-3.753-19.59-5.582-6.357-1.78-12.64-3.63-19.13-4.883-3.02-.584-6.047-1.135-9.097-1.554-2.985-.41-5.585.003-8.47.768-3.036.806-5.79 1.552-8.689 2.828-2.072.912-5.143 1.71-6.759 3.284-.966.942-1.597 1.874-2.827 2.562-.935.523-1.95.888-2.954 1.252-2.276.825-4.431 1.91-6.693 2.764-1.424.538-2.9.962-4.424 1.06-1.457.093-1.967.446-3.274 1.084-2.044.994-4.285 1.461-6.44 2.14-2.146.677-4.588 2.466-6.912 1.651-2.258-.793-3.704-3.701-5.05-5.506-3.548-4.745-6.597-9.445-8.57-15.058-2.092-5.953-4.088-11.939-6.113-17.915-1.052-3.108-2.11-6.213-3.183-9.314-.597-1.72-1.833-3.572-.485-5.161 1.564-1.844 2.12-4.748 3.737-6.812 1.607-2.051 3.419-3.937 5.122-5.907.995-1.15 1.966-2.324 2.852-3.561.726-1.014 1.264-2.257 2.07-3.198.732-.855 1.809-1.358 2.612-2.148.873-.859 1.65-1.877 2.451-2.805 2.102-2.436 4.101-5.018 6.343-7.326 1.85-1.906 3.964-3.602 5.865-5.48 4.117-4.064 8.49-7.858 12.757-11.76 4.155-3.8 8.405-7.478 12.449-11.368 3.8-3.657 8.36-6.613 12.62-9.67 4.666-3.35 9.14-6.884 14.165-9.708 4.807-2.703 9.646-3.517 15.012-4.318-.53 1.042-.908 2.145-1.61 3.087-1.039 1.39-2.398 2.63-3.573 3.907a1007.678 1007.678 0 0 1-7.206 7.758c-4.703 5.009-9.629 9.815-14.193 14.952-3.637 4.093-6.464 8.27-7.966 13.589-.792 2.804-1.186 5.812.515 8.389 1.302 1.97 3.442 1.817 5.6 1.624 5.56-.498 11.076-2.39 16.58-3.373 6.118-1.093 12.374-1.361 18.55-2.02 3.1-.33 6.161-1.183 9.261-1.417 1.398-.105 2.778.18 4.175.064 1.39-.116 2.783-.455 4.152-.709 2.879-.534 5.494-.838 8.408-.45 2.897.386 5.666.084 8.564-.154 6.12-.505 12.393.156 18.48.816 5.827.632 11.606 1.334 17.297 2.724-5.96 1.516-11.909 3.07-17.903 4.453-6.119 1.41-12.437 2.36-18.444 4.18-2.614.792-5.3.906-7.962 1.463ZM461.873 330.8c.653-2.372 1.314-4.92 2.144-7.287.191-.547.486-.972.795-1.377-.563.938-.96 1.87-1.34 3.128-.555 1.839-1.066 3.69-1.599 5.535Zm-1.306 2.425Zm-.477 1.174Zm1.654-3.147Zm364.847-22.126c-2.377 1.514-4.69 2.471-6.637 4.57-4.39 4.728-9.118 9.203-13.342 14.076-1.698 1.956-2.555 4.38-4.452 6.202-2.156 2.069-4.786 3.68-7.225 5.385-5.418 3.787-10.782 7.88-16.499 11.202-1.282.745-2.58 1.517-3.902 2.184-.87.438-1.966.674-2.728 1.294-.726.59-1.019 1.467-1.81 2.041-.582.424-1.282.77-1.892 1.157a857.973 857.973 0 0 1-15.14 9.362c-4.963 3-9.927 6.04-14.786 9.207-2.582 1.685-5.021 3.577-7.615 5.238-2.113 1.353-4.32 2.556-6.392 3.972-2.197 1.502-4.248 3.04-6.653 4.217-2.326 1.138-4.745 2.08-7.06 3.24-1.365.682-2.6 1.512-3.9 2.297-.85.512-1.563.438-2.488.754-2.696.923-5.113 2.521-7.863 3.373-11.426 3.54-22.474-1.51-32.433-6.881-5.02-2.708-9.59-6.174-14.399-9.225-2.102-1.333-4.726-2.302-6.65-3.869-.967-.788-1.34-1.618-2.472-2.24-1.025-.56-1.959-1.124-2.883-1.844-4.559-3.548-8.818-7.191-12.887-11.3-2.221-2.244-4.442-4.495-6.608-6.79-1.697-1.8-3.02-3.985-4.586-5.915-3.77-4.639-7.426-9.346-11.06-14.09-1.764-2.303-3.509-4.622-5.278-6.922-1.18-1.534-2.959-3.049-3.364-5.035-.374-1.826.698-3.574 1.58-5.08 1.327-2.269 2.594-4.523 3.484-7.007 1.339-3.736 3.382-10.893-.706-13.573-1.503 2.497-3.404 4.718-5.025 7.134-1.63 2.434-2.333 5.51-4.29 7.678-2.057 2.276-4.796 3.927-6.953 6.146-2.15 2.212-4.117 4.594-6.2 6.87-2.18 2.381-4.495 4.633-6.79 6.903-2.158 2.135-4.622 3.85-7.052 5.665-2.543 1.9-5.163 3.591-7.897 5.202-1.18.696-2.396 1.554-3.69 2.02-1.379.494-2.589.792-3.915 1.478-5.397 2.793-10.84 5.473-16.319 8.097-1.47.705-3.02 1.684-4.6 2.076-.607.15-.954.013-1.622.227-.703.223-1.403.62-2.078.917-2.812 1.242-5.683 2.199-8.596 3.175-6.06 2.03-12.215 3.884-18.209 6.1-5.61 2.077-11.068 4.322-16.85 5.93-5.697 1.585-11.714 1.85-17.579 2.424-1.576.155-3.426-.007-4.94.433-1.36.395-2.112.685-3.593.566-2.62-.21-5.067.288-7.666.687 3.957-7.789 6.012-16.66 8.877-24.91.757-2.182 1.677-4.218 2.307-6.437.561-1.984 1.378-3.888 2.362-5.698 1.2-2.208 1.568-4.763 2.37-7.132-.624 1.862-.962 3.844-1.554 5.71.822-1.568 1.706-3.105 2.49-4.694.82-1.66.81-2.648.82-4.434 2.126.245 2.206-1.941 2.534-3.5.498-2.37 1.024-4.735 1.534-7.102.258-.546.17-1.444.306-2.039.162-.704.432-1.379.672-2.057 1.855-5.256 3.894-10.423 5.24-15.843 1.486-5.976 2.786-12.007 4.122-18.018.71-3.191 1.65-6.443 1.96-9.702.148-1.562.944-6.6-1.268-7.302-1.709-.543-3.54 4.666-3.986 5.813-1.084 2.787-2.108 5.596-3.14 8.403-.923 2.51-1.638 5.045-2.667 7.518-1.04 2.5-1.405 5.104-2.327 7.64-.541 1.49-1.412 2.587-2.008 4.012-.434 1.041-.594 2.171-.95 3.238-.74 2.21-1.885 4.372-2.718 6.572-1.066 2.81-2.379 5.517-3.548 8.285-1.07 2.532-1.68 5.2-2.684 7.738-.966 2.438-2.464 4.615-3.425 7.075-1.056 2.703-2.016 5.442-3.06 8.15-2.154 5.587-4.336 11.131-6.025 16.88-.422 1.439-1.142 2.852-1.493 4.133-.319 1.162-.887 2.082-1.344 3.238-.818 2.073-1.16 4.405-1.575 6.589l.124-.707c-.862.036-1.786.224-2.386-.547-.685-.877-.494-2.579-.622-3.632-1.014.133-.618.59-.507 1.507l.169 1.417.426 3.544c.323-.19 1.003-1.292 1.28-1.323.423-.047.884 1.102 1.08 1.67a4.61 4.61 0 0 1-.268.63c-.268.525-.524.89-.729 1.46-.38 1.063-.668 2.145-1.209 3.147a7.96 7.96 0 0 1-.925 1.386c-.27.316-1.15.84-1.298 1.173-.369.833.194 2.912.141 3.882-.067 1.261-.269 2.611-.82 3.763-.232.483-.653.776-.87 1.193-.306.588-.32.892-.391 1.654-.25 2.715-1.29 5.259-2.23 7.791-1.053 2.844-1.876 5.765-2.834 8.64-.905 2.722-2.064 5.339-3.021 8.04-1.116 3.143-2.11 6.33-3.154 9.496-.781 2.371-1.977 4.478-2.815 6.81-.86 2.387-2.07 4.533-2.488 7.014-.463 2.747-1.91 5.496-2.953 8.067-.872 2.148-2.677 4.431-3.036 6.719-.168 1.074.098 2.077-.256 3.144-.307.926-.894 1.716-1.285 2.602-.537 1.22-.137 2.348-.507 3.594-.321 1.085-1.054 1.847-1.646 2.773-1.043 1.634-.69 3.53-1.762 5.234-1.512 2.405-2.047 5.1-2.858 7.832-.4 1.341-.694 2.723-1.052 4.075-.142.539-.213 1.61-.499 2.107-.357.625-.968.38-1.278.74-.267.312-.326 1.32-.444 1.72-.374 1.27-.91 2.502-1.425 3.722-1.11 2.621-2.384 5.172-3.344 7.853-1.004 2.804-2.012 5.608-3.018 8.412-.478 1.335-.943 2.673-1.46 3.992-.506 1.296-1.037 1.692-1.886 2.683-.836.974-1.182 2.34-1.965 3.373-.736.969-1.232 1.68-1.554 2.886-.606 2.269-1.053 4.548-2 6.716-2.394 5.481-5.378 10.695-7.78 16.183-2.518 5.751-4.908 11.562-7.088 17.45-2.047 5.526-3.355 11.256-5.448 16.763-2.072 5.451-3.852 10.985-5.894 16.452-2.12 5.678-4.25 11.346-6.148 17.101-.685 2.076-1.145 4.14-1.589 6.23.138-.94.271-1.863.43-2.729-2.021 3.381-3.878 7.058-2.991 11.11.552-.78.971-1.663 1.307-2.6-.128.483-.27.955-.467 1.374-.566 1.203-1.098 2.12-1.483 3.453-.851 2.95-1.715 5.899-2.552 8.853-.404 1.423-.781 2.86-1.255 4.263-.421 1.247-1.336 2.329-1.722 3.546-.433 1.362-.285 3.03-.619 4.448-.292 1.247-.72 2.464-1.36 3.577-.497.865-1.208 1.62-1.602 2.544-.48 1.126-.19 2.243-.32 3.428-.165 1.474-.693 2.878-.894 4.345-.194 1.413.465 2.29.716 3.64.263 1.411-.27 2.343-.69 3.632-.359 1.096-.566 2.264-.824 3.386-.111.48-.19 1.985-.53 2.305-.249.233-1.678.27-2.037.333-1.346.236-2.69.496-4.063.496-2.88 0-5.832-.419-8.693-.726-5.792-.621-11.617-1.537-17.17-3.333-5.267-1.704-10.576-4.194-15.463-6.793-4.927-2.62-9.298-6.208-13.416-9.945-2.235-2.029-4.363-4.173-6.492-6.312-1.024-1.028-2.046-2.057-3.083-3.072-.826-.811-1.897-1.584-1.98-2.837-.094-1.412.926-3.03 1.423-4.304.444-1.139.881-2.28 1.313-3.423 1.056-2.793 2.093-5.593 3.132-8.391 2.153-5.796 4.292-11.596 6.447-17.391 2.17-5.83 4.396-11.533 7.017-17.172 2.509-5.4 4.792-10.844 6.877-16.422 1.969-5.267 4.312-10.344 6.545-15.5 1.198-2.77 2.332-5.57 3.25-8.445.768-2.408 1.338-4.68 2.507-6.94.752-1.455 1.365-2.878 1.822-4.454.395-1.363.617-2.53 1.5-3.635 1.863-2.329 2.902-4.959 3.86-7.764 1.867-5.463 4.03-10.986 6.644-16.138 2.647-5.222 5.578-10.232 7.99-15.572 2.428-5.37 5.731-10.2 8.003-15.656 4.686-11.254 11.147-21.616 15.897-32.84 4.678-11.056 10.25-21.678 15.028-32.69a491.488 491.488 0 0 0 7.18-17.389c1.085-2.79 2.16-5.584 3.283-8.358 1.014-2.504 2.768-4.424 3.49-7.01.739-2.647 1.921-4.685 3.175-7.07 1.294-2.459 1.963-5.428 2.985-8.02a665.997 665.997 0 0 1 6.963-16.893c2.458-5.76 5.082-11.44 7.634-17.157.964-2.162 1.504-4.486 2.497-6.633.494-1.068 1.496-1.974 1.938-2.996.206-.474.157-1.134.327-1.642.23-.68.656-1.362.972-2.007 2.56-5.24 5.395-10.28 7.73-15.63 2.386-5.47 4.826-10.934 6.924-16.522 2.073-5.522 4.695-10.729 6.478-16.369.849-2.689 1.696-5.39 2.346-8.135.567-2.393 1.634-5.923 1.093-8.381-.333-1.513-2.091-4.595-3.873-3.2-1.639 1.284-2.625 3.827-3.52 5.634-1.346 2.717-2.774 5.4-3.927 8.208-.92 2.242-1.749 4.404-3.023 6.476-3.07 4.996-5.513 10.227-8.278 15.395-.625 1.17-1.361 2.138-2.212 3.142-.825.974-.591 1.44-.929 2.674-.604 2.21-2.44 3.99-3.371 6.079-1.239 2.78-2.312 5.398-3.862 8.037a79.51 79.51 0 0 0-3.667 6.962c-2.521 5.462-4.944 10.971-7.387 16.47-1.296 2.915-2.554 5.853-3.976 8.71-.625 1.254-1.236 2.527-1.914 3.754-.44.798-1.238 1.449-1.61 2.26-.423.92.042 1.696-.32 2.593-.417 1.041-.872 1.465-1.78.856-2.029-1.356-2.433-4.261-3.521-6.333-2.57-4.896-5.018-9.498-5.978-15.037-.531-3.07-.32-6.197-.3-9.295.02-2.75 1.652-4.617 3.088-6.89 3.371-5.345 6.748-10.685 10.178-15.99 1.51-2.334 2.825-4.788 4.37-7.094 1.493-2.228 3.484-3.874 5.123-5.942.914-1.152 1.583-2.416 2.56-3.526.82-.936 1.605-1.907 2.276-2.957 1.279-1.999 2.152-4.162 3.556-6.1 3.313-4.577 6.684-9.128 10.174-13.571 1.86-2.37 4.052-3.838 6.354-5.726 2.254-1.849 4.271-3.958 6.349-6 4.001-3.934 7.774-8.042 12.224-11.46a214.241 214.241 0 0 1 14.085-9.959c2.376-1.537 5.326-2.696 7.236-4.776.788-.858 1.605-1.66 2.615-2.258.97-.574 2.1-.727 3.042-1.252 2.671-1.487 5.128-3.927 7.557-5.789 2.42-1.851 4.838-3.704 7.257-5.555 1.017-.78 2.935-1.7 3.677-2.704.417-.563.367-1.349.839-1.942 1.068-1.341 3.18-1.467 4.678-2.044 2.878-1.107 5.813-1.703 8.833-2.287 2.662-.515 5.203-1.657 7.759-2.552 5.593-1.96 11.39-3.138 17.288-3.67-2.652 7.822-5.663 15.53-7.691 23.55-.821 3.25-.96 7.043-2.33 10.105-.492 1.103-1.81 2.153-1.151 3.398.488.927 1.86 1.93 2.736 2.499 1.817 1.182 4.06-.129 5.845-.843 3.01-1.203 5.927-2.75 9.153-3.304 3.35-.573 6.164-3.746 9.642-3.694 1.454.022 2.634.717 3.723 1.62 1.121.932 2.39 1.68 3.477 2.662 2.388 2.156 5.167 4.007 8.188 5.202 1.048.414 1.942.2 2.912 1.003.724.599 1.299 1.461 2.268 1.683-4.593 4.905-9.047 9.764-12.935 15.268-1.905 2.696-3.324 5.331-4.366 8.469-.493 1.483-.948 2.616-.002 4.05.523.794 1.358 1.447 2.336 1.296 2.363-.364 4.462-3.555 5.773-5.303 1.52-2.03 3.191-3.91 4.775-5.889 3.29-4.11 6.21-8.424 10.307-11.805 1.22-1.006 2.454-2.148 3.806-2.975 1.078-.66 1.839-.156 3.033-.366 2.99-.526 5.675-2.09 8.347-3.442a633.822 633.822 0 0 1 8.705-4.347c1.526-.744 3.773-2.316 5.565-1.564 2.004.84 3.137 3.977 4.236 5.655 1.055 1.613 2.006 3.015 3.737 3.932 2.84 1.507 8.359 3.336 10.847.437 3.523-4.105 3.165-10.828 2.861-15.862-.187-3.086-.565-6.196-.328-9.288.208-2.72.528-5.433.796-8.15 5.007 4.107 9.738 8.275 13.887 13.265 2.207 2.656 4.495 5.241 6.774 7.836 1.14 1.3 2.167 2.436 2.946 3.966.671 1.318 1.627 2.458 2.624 3.539 2.086 2.258 3.51 5.256 5.1 7.89a476.77 476.77 0 0 1 4.549 7.68c2.913 5.038 5.642 9.996 7.87 15.375 1.158 2.796 2.732 5.335 3.916 8.118 1.171 2.76 2.33 5.528 3.458 8.308.651 1.604 1.433 3.223 1.94 4.877.352 1.15.041 2.605.463 3.673.405 1.024 1.376 1.922 1.805 3.025.434 1.116.69 2.293 1.133 3.406 2.171 5.45 5.148 10.647 7.58 15.99 2.522 5.544 5.04 11.097 8.058 16.396 3.062 5.376 6.922 10.307 10.615 15.258 1.934 2.592 3.935 5.145 5.789 7.793.668.953 1.263 2.047 2.155 2.817.843.728 1.908 1.013 2.888 1.499.541-1.44 1.278-2.384 1.046-3.98-.196-1.359-.702-2.691-1.123-3.989-.813-2.51-2.945-4.754-2.41-7.536.499-2.595 2.622-4.651 4.23-6.611 2.125-2.59 4.26-5.173 6.398-7.753 7.183-8.662 14.811-16.962 22.25-25.424 3.787-4.307 7.5-8.686 11.416-12.877 1.755-1.88 3.793-3.408 5.664-5.16 1.534-1.435 2.544-3.247 3.99-4.742 1.073-1.106 2.347-1.913 3.438-3.031l2.66-2.725a875.565 875.565 0 0 0 5.833-6.01c3.868-4.03 7.481-8.281 11.291-12.363 7.357-7.882 15.14-15.45 22.82-23.011 2.218 6.551 4.052 13.38 5.641 20.11.391 1.657.553 3.38 1.14 4.974.578 1.566 1.334 3.073 1.942 4.63 1.35 3.46 2.383 7.15 4.064 10.448 3.191 6.26 5.997 13.522 10.594 18.911 2.288 2.68 5.421 4.977 8.087 7.281l8.613 7.45c-2.584 1.945-5.147 3.897-7.876 5.637Zm-237.763 41.592c-.237-.554-.464-.851-.733-1.05.2.119.376.306.605.749.493.95.796 2.047 1.148 3.056-.318-.927-.635-1.854-1.02-2.755Zm-69.39 49.636c1.984 2.22 4.085 4.338 6.093 6.536 1.852 2.027 3.338 4.25 5.001 6.426a264.29 264.29 0 0 0 11.223 13.7c3.745 4.28 7.789 8.315 11.364 12.742 3.574 4.427 6.273 9.175 8.95 14.166 1.241 2.313 2.654 4.535 4.33 6.557.784.944 1.837 1.771 2.33 2.907.547 1.258.714 2.778 1.026 4.108 2.785 11.894 5.636 23.778 8.32 35.695 1.302 5.776 2.173 11.63 3.431 17.414 1.274 5.855 3.183 11.542 4.387 17.417 2.44 11.898 4.108 23.954 6.728 35.813 2.553 11.547 6.984 22.523 9.391 34.12.339 1.628.827 3.114.45 4.76-.314 1.37-.555 2.572-.579 3.992-.042 2.443-.277 4.366-1.693 6.45-2.79 4.11-6.687 7.686-11.2 9.738-2.421 1.1-4.724 2.58-7.339 3.2-1.258.296-2.48.1-3.727.285-1.266.19-2.31 1.069-3.474 1.546-4.656 1.914-10.6 1.34-15.543 1.344-5.447.005-10.916-.36-15.945-2.64a27.004 27.004 0 0 1-1.218-.59c-.679-.104-.799-.41-.359-.915.002-.551.315-1.18.34-1.763.051-1.24-.319-2.431-.63-3.615-.737-2.81-1.43-5.632-2.074-8.466-2.665-11.75-3.928-23.681-5.567-35.601-.844-6.148-2.074-12.24-3.133-18.354-1.015-5.869-1.625-11.761-2.393-17.664-.765-5.88-1.582-11.756-2.375-17.632-.432-3.218-1.365-6.378-1.775-9.581-.31-2.427.332-4.718-.218-7.151-1.293-5.727-1.346-11.665-2.805-17.355-1.504-5.863-3.678-11.625-5.702-17.325-1.047-2.952-2.09-5.906-3.138-8.858-.618-1.746-1.326-3.62-3.121-4.456-.996-.463-1.981-.411-2.876-1.102-1.098-.848-2.042-2.003-3.02-2.986-2.104-2.118-4.193-4.25-6.305-6.36-8.217-8.212-16.18-16.821-25.25-24.095-4.215-3.38-8.124-7.193-12.793-9.946-5.004-2.95-9.938-6.014-14.944-8.96a55.41 55.41 0 0 0-7.661-3.76c-2.35-.94-.915-3.187-.237-5.007 1.049-2.814 1.958-5.67 2.835-8.543.663-2.17 1.025-4.98 3.246-6.157 1.453-.77 2.088.127 3.481.562.99.308 2.03.356 3.057.311 2.326-.102 5.005-1.145 7.297-.782 1.535.243 2.298.303 3.85.021 1.382-.25 2.838-.255 4.239-.359 2.587-.193 5.248-.225 7.803-.674 5.594-.984 11.26-2.273 16.625-4.152 5.744-2.012 11.218-4.806 16.722-7.378.37 2.534.733 5.11 1.67 7.51.747 1.92 1.984 4.489 3.817 5.507 4.014 2.23 6.114 6.07 9.089 9.4Zm83.955 241.454c1.743-.948 2.075.383 3.11 1.812 2.826 3.906 5.672 7.798 8.526 11.685 2.777 3.784 5.564 7.564 8.344 11.347 2.607 3.545 5.487 6.928 7.881 10.623 2.46 3.791 4.41 7.954 6.298 12.05 1.604 3.487 3.935 7.117 2.25 11.001-1.564 3.606-6.016 5.129-9.255 6.844-4.092 2.167-7.32 3.7-11.95 2.051-8.811-3.137-17.442-7.213-25.79-11.41-7.65-3.848-13.438-9.533-19.78-15.117-3.33-2.932-6.78-5.63-9.895-8.806-3.238-3.304-6.323-6.757-9.584-10.038-5.073-5.11-10.393-9.627-9.517-17.537 4.84 1.621 9.601 3.657 14.63 4.63 5.298 1.024 10.702 1.65 16.103 1.37 2.328-.122 4.457-.757 6.727-1.208 2.216-.44 4.474.019 6.556-1.07 1.842-.963 2.984-2.106 5.091-2.608 2.144-.51 3.953-1.212 5.775-2.475 1.494-1.036 2.88-2.273 4.48-3.144ZM450.63 431.929c.05.01.097.028.142.056a.754.754 0 0 0-.142-.056Zm-5.641-3.187c.052.033.105.071.16.11-.053-.039-.107-.074-.16-.11ZM341.233 708.115a440.206 440.206 0 0 1 6.696 12.35 238.179 238.179 0 0 1 3.124 6.248c.939 1.934 1.78 3.432 1.892 5.564-4.525-.505-9.12-3.186-12.963-5.555-4.041-2.49-7.465-5.574-10.894-8.826-3.346-3.17-6.76-6.307-10.343-9.21-1.653-1.34-3.38-2.49-5.207-3.574-.558-.33-1.123-.67-1.577-1.143-.556-.58-.757-1.592-1.432-2.03-1.379-.893-3.534.44-4.769 1.044-1.635.8-3.209 1.757-4.58 2.962-1.57 1.382-2.623 3.153-3.975 4.728-1.269 1.477-2.552 2.888-3.693 4.47-2.585 3.58-5.395 7.388-8.688 10.35-1.502 1.35-3.395 2.423-4.683 3.946a30.908 30.908 0 0 1-4.01 3.963c-3.267 2.688-6.1 5.376-8.904 8.546-3.09 3.495-6.605 6.626-9.942 9.88-.512-2.06.403-3.784 1.312-5.561 1.058-2.074 1.807-4.314 2.69-6.466a152.331 152.331 0 0 1 6.448-13.744c2.214-4.164 4.48-8.296 6.626-12.497 1.78-3.485 4.534-7.786 3.684-11.858-.332-1.588-1.196-3.985-2.911-4.516-1.71-.53-3.428.971-4.806 1.787-4.038 2.388-8.22 4.269-12.545 6.073-4.313 1.8-8.663 3.55-12.814 5.705-4.027 2.089-7.827 4.588-11.855 6.669-1.992 1.028-4.101 1.79-6.07 2.865-1.898 1.037-3.734 2.18-5.622 3.232-3.73 2.08-7.616 3.535-11.857 4.145 3.025-3.898 7.005-6.757 10.86-9.76 4.497-3.499 8.966-7.024 13.609-10.33 4.173-2.97 8.418-5.83 12.502-8.925 1.91-1.447 3.795-2.926 5.62-4.477 1.534-1.304 3.183-2.608 3.553-4.708.333-1.89-.53-4.07-2.133-5.164-1.6-1.091-3.635-.843-5.43-.587-5.047.718-9.967 2.26-14.852 3.68-1.124.326-2.275.86-3.4 1.123-1.135.264-2.473.153-3.635.212-2.18.11-4.356.225-6.523.502-2.264.29-4.575.207-6.825.568-2.048.327-3.472 1.436-5.566 1.386-9.298-.225-17.928 4.944-27.127 4.944a2228.587 2228.587 0 0 1 16.498-9.583c2.527-1.454 5.157-2.748 7.6-4.346 2.702-1.767 5.184-3.774 7.975-5.426 9.985-5.91 21.095-10.229 30.203-17.51 2.209-1.766 4.316-3.663 6.448-5.52.482-.42 1.117-1.202 1.691-1.473.914-.428.62-.548 1.423.274.883.904 1.495 2.009 2.227 3.035 2.9 4.066 6.461 7.634 10.482 10.593 4.674 3.438 10.06 5.525 15.297 7.94 5.28 2.433 10.49 5.026 16.021 6.857 5.577 1.847 11.482 2.794 17.305 3.481 6.164.73 11.913.316 18.03-.446.356 4.601.822 8.498 2.991 12.666 2.047 3.933 4.648 7.58 6.824 11.447Zm23.178-350.5c.45.099 1.024.136 1.454.294-.373-.094-.848-.097-1.125-.175-.115-.032-.22-.078-.329-.119Zm1.65 2.656c.177-.438.44-.928.485-1.378-.027.445-.267.94-.484 1.378Zm-52.668 77.857c-6.861 4.082-13.01 9.214-19.655 13.618-3.318 2.198-6.778 4.175-10.326 5.977-1.711.87-3.436 1.733-5.22 2.447-1.548.618-3.036 1.615-4.62 2.084-1.723.51-3.489.202-5.233-.004-1.514-.178-2.986-.082-4.232-1.084-2.25-1.807-3.708-5.42-5.045-7.879-1.912-3.516-4.148-7.183-5.517-10.942-1.276-3.51-2.959-6.72-3.625-10.397 1.179-1.956 1.075-3.992.086-5.987-.455-.918-1.042-1.763-1.58-2.631-.609-.982-.582-1.21-1.676-1.228l3.152 9.79c-1.037-3.21-2.439-6.496-3.152-9.79-.624-2.874-.863-5.661-1.889-8.463-.524-1.424-1.35-2.763-1.76-4.22-.337-1.199-.329-2.466-.489-3.694-.446-3.425-1.326-6.817-1.867-10.235-1.03-6.523-1.691-13.118-2.94-19.604-1.285-6.672-2.94-13.303-4.396-19.941-.555-2.534-1.549-4.705.925-6.433 2.368-1.652 5.002-3.03 7.503-4.468 2.374-1.366 4.735-2.746 7.262-3.808 2.145-.902 4.208-1.762 6.159-3.04 1.214-.795 2.457-.79 3.83-1.233 1.414-.457 2.81-.987 4.21-1.482 2.574-.91 5.143-1.828 7.714-2.745 1.406-.501 4.294-2.343 5.611-.947.683.721.762 2.23.955 3.131.316 1.484.616 2.972.908 4.461 1.128 5.77 2.21 11.56 3.105 17.372.879 5.702 1.379 11.459 2.265 17.158.217 1.396.923 3.12.783 4.525-.102 1.035-.821 1.582-1.53 2.256a67.505 67.505 0 0 0-5.092 5.398c-1.77 2.097-3.462 4.266-5.375 6.238-1.864 1.922-3.484 3.65-4.828 5.994-1.128 1.968-2.636 3.814-2.113 6.17.409 1.83.942 3.652 3.116 2.899 2.515-.87 4.689-3.337 6.653-5.05 1.93-1.682 3.836-3.39 5.803-5.028 2.173-1.812 4.602-3.34 6.703-5.226 1.825-1.638 3.387-3.543 5.119-5.274 4.153-4.156 8.622-7.881 13.04-11.739 2.037-1.779 3.66-3.954 5.506-5.918 1.82-1.934 3.797-3.714 5.708-5.556 4.146-3.995 8.459-8.019 12.321-12.29 1.85-2.046 3.835-3.957 5.699-5.99.769-.839 1.339-1.944 2.07-2.743.707-.773 1.795-1.27 2.587-1.993 3.464-3.16 5.394-7.56 8.81-10.782.909 1.988 1.551 4.017 2.218 6.1.615 1.92 1.078 4.162 2.157 5.88.503.798 1.357 1.378 1.792 2.21.416.799.306 1.747.6 2.591.563 1.61 1.724 3.306 2.59 4.778.967 1.644 2.336 3.14 3.63 4.53.334.36.67.68 1.039.956-.151-.084-.3-.169-.457-.248 1.03 1.753 1.961 2.56 3.637 3.712l-.14.291c-.866 1.874-1.84 3.61-2.521 5.57-1.177 3.387-2.905 6.555-4.017 9.967-.598 1.835-.83 3.731-1.701 5.47-.766 1.53-1.762 2.932-2.511 4.472-1.75 3.603-2.891 7.555-4.27 11.31-1.425 3.879-3.07 7.629-4.831 11.364a232.483 232.483 0 0 0-4.928 11.264c-.697 1.71-1.248 3.62-2.349 5.126-1.19 1.63-2.906 2.052-4.714 2.698-7.162 2.56-14.14 6.403-20.667 10.285ZM227.57 328.122c-4.055-3.431-9.715-2.464-14.695-2.485-5.785-.025-11.543 1.113-17.308 1.5-5.762.388-11.552.664-17.329.544-5.152-.108-10.286-.591-15.335-1.641-2.5-.52-4.944-.773-7.482-.993-1.59-.136-3.06-.619-3.86-2.108-1.054-1.966-.78-4.955-.855-7.12-.074-2.122-.38-4.816.465-6.815.832-1.972 2.683-2.94 4.573-3.664 2.32-.89 4.643-1.772 6.963-2.66 9.4-3.601 19.07-7.722 29.196-8.587 2.812-.24 5.635-.265 8.454-.35 2.421-.072 4.66-.66 7.053-.91 4.995-.521 9.88-.635 14.808-1.68 1.354-.288 2.206.433 3.582.653 1.074.172 2.165.14 3.243.062 2.228-.16 4.356-.434 6.593-.243 2.63.223 5.276.361 7.884.768 2.343.365 4.612.998 6.975 1.266 2.553.29 5.136.4 7.65.964 1.27.283 3.206.557 3.954 1.779.99 1.615.247 4.717.15 6.501-.136 2.513-.29 5.03-.264 7.548.027 2.734.436 5.378.964 8.055.38 1.928 1.195 4.191.76 6.18-.24 1.094-1.039 1.611-2.173 1.435-.785-.122-1.43-.89-2.155-.983-1.409-.181-.04.871-.847 1.775-.647.725-1.719.522-2.58.761-.926.258-1.782.711-2.657 1.097-1.983.873-4.041 1.475-5.994 2.438-4.342 2.14-8.468 4.68-12.6 7.191-.691-2.058-1.185-5.176-2.576-6.877-1.197-1.463-3.13-2.192-4.557-3.4Zm284.537-130.14c.931-2.626 2.157-5.192 2.933-7.867.277-.956.277-2.314 1.256-2.852.813-.448 2.286-.165 3.14-.159 1.58.013 3.16-.005 4.739-.012.79-.003 1.932-.182 2.398.645.48.855-.29 2.423-.306 3.375-.024 1.444.318 2.857.684 4.243 1.563 5.907 3.184 11.743 4.98 17.594-1.79-.805-3.182-2.722-5.226-2.939-1.29-.137-2.282.635-3.471.831-1.017.168-2.03.227-3.041.463-4.544 1.057-8.675 3.413-13.29 4.241.214-1.69.282-3.233.801-4.869.452-1.421.953-2.83 1.439-4.241.971-2.823 1.968-5.638 2.964-8.453Zm14.994-39.632c2.183-.966 4.366-3.768 2.322-6.081-1.102-1.247-3.893-.593-5.334-.296-2.022.417-9.786 5.481-10.741 2.038-.628-2.26.496-5.666 1.523-7.651.65-1.258 1.524-2.486 2.57-3.45 1.12-1.036 1.583-.72 2.962-.567 2.276.254 4.391-.45 5.887 1.77.291.43.35 1.017.96 1.107.47.069.75-.514 1.224-.515.767-.002.853.53 1.152 1.125.783 1.555 1.934 4.611 4.265 3.338 2.356-1.285 2.497-5.45 2.5-7.694.005-3.482.24-6.96.43-10.435.148-2.751.39-5.261 2.395-7.335 1.892-1.955 3.358-4.675 5.657-6.173 2.595-1.692 5.972-1.502 8.946-1.73 3.437-.264 6.964-.642 10.403-.289 3.52.361 6.868.527 10.41.367 3.461-.156 6.917-.371 10.382-.46 3.29-.082 6.728.194 9.985-.16 1.324-.143 3.09-.625 3.965.687.995 1.49.912 4.19 1.191 5.907-3.58-.66-9.423-2.312-10.797 2.748-.416 1.53.872 2.897 2 3.787 1.65 1.3 3.958 1.264 5.96 1.544 1.117.157 2.92.128 3.574 1.25.63 1.077.3 3.087.374 4.271.305 4.924 1.008 9.812 1.52 14.716.489 4.687.858 9.497.15 14.182-.362 2.402-1.346 4.66-1.52 7.08-.109 1.499.125 3.199-1.243 4.19-1.588 1.149-4.321 1.155-6.185 1.565-2.46.542-4.894 1.194-7.314 1.893-3.835 1.109-8.514 1.662-9.897 5.951-1.476 4.578-2.564 9.297-3.991 13.898-.726 2.334-1.738 4.449-2.764 6.662-.397.854-1.02 1.846-.938 2.828.086 1.036.81 2.046 1.21 2.97.875-.456 1.792-.71 2.538-1.382.781-.7 1.405-1.688 2.033-2.527 1.305-1.743 2.233-3.239 4.104-4.372.071.922.29 1.713-.152 2.494-.312.555-1.034 1.12-1.445 1.635-1.151 1.445-2.26 2.928-3.509 4.29-2.486 2.714-5.494 4.95-8.08 7.583-2.593 2.64-5.046 5.738-8.208 7.715-3.047 1.905-6.304 3.48-9.474 5.167 2.786-6.33.858-12.702-2.457-18.394-1.543-2.65-3.42-5.081-5.157-7.602-1.375-1.995-4.032-4.672-3.968-7.236.035-1.364.965-2.541 1.636-3.668.744-1.249 1.32-2.58 1.93-3.9 1.237-2.672 2.85-5.498 3.284-8.44.38-2.575-.202-6.143-1.943-8.205-.7-.827-1.726-.747-2.635-1.309-.893-.553-1.569-1.38-2.302-2.116-.832-.835-1.852-1.412-2.681-2.237-.88-.877-1.498-1.99-2.135-3.047-1.51-2.503-3.057-4.985-4.572-7.487Zm9.576-55.636c2.62.046 4.01 1.524 5.23 3.632-.817 1.283-3.006 5.153-4.812 3.61-.334-.286-.49-.903-.896-1.235-.382-.313-.861-.477-1.304-.674-1-.442-2.133-.87-2.773-1.831-1.508-2.262 2.972-3.527 4.555-3.502Zm51.18 98.181c.47-.127 1.921.825 2.383 1.029.85.377 1.908.746 2.66 1.314.753.569 1.03 1.418 1.546 2.18.156 5.698.515 11.439.472 17.154l-.474-17.159c-.334 1.57-.914 3.012-.912 4.634 0 1.643.25 3.335.404 4.967.29 3.109.637 6.213.955 9.319a84.633 84.633 0 0 1-.277 5.36c-2.273-3.162-4.503-6.363-6.782-9.52-2.038-2.82-4.7-2.984-7.917-3.242l6.312-12.744c.241-.487 1.21-3.178 1.63-3.292Zm371.464 9.659c3.394-.939 6.86-2.243 10.358-2.705 3.31-.436 6.251-1.875 9.447-2.812 2.816-.824 5.666-1.53 8.44-2.494 2.108-.731 4.384-1.454 6.044-3.014 1.719-1.617 2.647-4.13 2.328-6.48-.374-2.745-2.4-3.08-4.71-3.867-11.765-4.006-23.672-6.393-35.951-7.976-6.32-.816-12.711-1.83-19.097-1.7-3.309.07-6.58.252-9.888.04-2.994-.191-6.043.93-8.988.346-3.01-.596-5.822.207-8.856.619-3.224.438-6.483.566-9.733.716-2.953.136-6.09.016-8.962.79-2.809.754-4.984 1.296-7.852.361 2.998-3.316 5.985-6.642 8.994-9.948 6.177-6.785 12.59-14.077 16.327-22.56 1.602-3.637 2.38-8.878-.292-12.263-2.376-3.01-7.566-2.39-10.876-1.896-4.256.633-8.32 2.15-11.982 4.393-3.53 2.162-7.431 3.928-10.643 6.536-3.156 2.562-6.791 4.257-9.982 6.77-3.29 2.593-6.604 5.103-9.932 7.638-7.19 5.476-13.162 12.434-19.968 18.353-3.617 3.146-6.984 6.534-10.218 10.068-1.533 1.675-3.122 3.326-4.432 5.186-1.096 1.556-2.049 3.213-3.204 4.73-1.386 1.814-3.126 3.327-4.586 5.085-1.34 1.618-2.573 3.322-3.762 5.053-1.251 1.822-2.453 3.676-3.695 5.503-.652.96-1.275 2.596-2.585 2.428-1.85-.237-2.874-1.826-4.886-.73-.68.368-1.104.997-1.67 1.496-.795.699-1.707.997-2.632 1.46-1.888.947-3.484 2.353-5.175 3.593-1.793 1.314-3.633 2.398-5.294 3.898-6.978 6.305-13.418 13.06-20.128 19.628-1.622 1.587-3.322 3.094-4.899 4.728-1.254 1.301-2.236 2.846-3.497 4.126-.728.74-1.605 1.038-2.374 1.681-.717.602-1.317 1.55-1.929 2.252-1.473 1.692-2.93 3.398-4.444 5.055-2.965 3.25-6.241 6.078-9.092 9.45-2.911 3.445-6.192 6.595-9.168 9.997-6.262 7.161-12.143 14.474-17.9 22.043-2.856 3.755-6.069 7.243-8.793 11.094-2.589 3.659-4.778 7.58-6.732 11.61-.552 1.137-1.26 4.525-3.29 3.327-.727-.429-1.214-1.692-1.664-2.393-.608-.951-1.213-1.903-1.816-2.856-2.625-4.154-5.434-8.308-7.509-12.771-3.993-8.592-7.966-17.113-11.251-26.008-1.661-4.5-3.557-8.888-5.448-13.295-1.873-4.368-3.293-8.897-5.12-13.28-3.636-8.719-8.414-16.967-13.168-25.112-4.356-7.464-9.025-15.164-15.084-21.384-3.204-3.288-5.723-7.059-9.11-10.21-1.715-1.597-3.487-3.133-5.2-4.733-1.239-1.155-2.293-2.87-3.824-3.647-1.083-.549-2.24-.43-3.41-.382-.908.036-1.915-.23-2.79-.151-.788.073-1.106.758-1.868.91-.778.158-1.292-.203-1.904-.625-3.868-2.669-9.155-3.823-13.57-5.423 2.794-1.73 6.22-1.793 9.34-2.522 2.638-.618 5.102-1.706 7.27-3.34 4.779-3.605 5.575-9.303 6.44-14.879.995-6.407 1.766-13.237.913-19.69a1117.625 1117.625 0 0 0-2.665-18.993c-.46-3.07-1.047-6.066-1.962-9.036-.744-2.42-1.703-4.917-1.617-7.484.042-1.268.085-3.226 1.045-4.144.707-.673 1.747-1.033 2.5-1.696 1.762-1.551 3.179-3.444 4.263-5.522.886-1.696 2.316-4.183 1.47-6.145-.92-2.128-3.845-2.52-5.808-3.028-5.812-1.51-11.681-1.266-17.585-2.097-2.836-.399-5.802-1.226-8.65-1.191-2.806.033-5.608.079-8.417.045-6.12-.073-12.261-.251-18.36.379a103.81 103.81 0 0 1-4.834.388c-1.31.076-2.25.742-3.454.95-.733.126-1.77-.27-2.506-.328a14.315 14.315 0 0 0-3.73.178c-2.594.486-4.607 2.139-7.177 2.656-2.002.403-3.534 1.494-4.557 3.268-2.597 4.495-2.738 10.696-2.965 15.73-.267 5.963.177 11.95-.136 17.904-.076 1.44-.23 2.022-1.754 1.872-2.137-.211-4.01-.783-6.17-.213-4.117 1.087-6.697 4.833-8.303 8.536-1.686 3.882-2.589 8.263-2.303 12.501.25 3.728 1.624 8.55 5.733 9.628 2.205.58 4.417-.34 6.499-.994 1.957-.616 3.741-2.38 4.804.094 2.152 5.013 4.32 9.548 7.761 13.865-3.228-.22-6.45-.532-9.68-.694-2.123-.107-5.131-.7-7.163.127-1.194.487-1.246 1.326-2.099 2.07-.94.82-2.762.47-3.926.434-3.484-.107-6.681-.741-10.207-.375-2.596.269-4.94 1.555-7.518 2.044-3.136.593-6.252 1.837-9.211 3.014-2.784 1.11-5.516 2.297-8.38 3.192-2.922.913-5.843 1.852-8.63 3.132-4.96 2.28-9.171 5.964-13.61 9.093-1.167.823-2.44 1.53-3.53 2.458-.892.76-1.482 1.764-2.343 2.55-1.378 1.26-2.987 1.197-4.48 1.864-1.528.683-3.003 2.052-4.39 2.999-1.253.857-2.508 1.713-3.763 2.57-2.384 1.625-4.741 3.559-7.317 4.859-4.784 2.416-8.538 6.244-12.426 9.885-4.196 3.93-8.825 7.354-12.866 11.442-4.03 4.079-7.713 8.407-10.955 13.136-3.38 4.928-6.232 10.152-9.435 15.188-1.465 2.303-3.32 4.174-5.028 6.282a36.68 36.68 0 0 0-2.396 3.304c-.652 1.016-1.112 2.312-2.084 3.056-1.946 1.486-3.888 2.363-5.457 4.35-1.756 2.227-3.27 4.688-4.759 7.098-2.983 4.84-5.783 9.844-8.44 14.87-.786 1.488-.777 2.577-.91 4.2-.1 1.259-.514 2.46-.747 3.696-.381 2.013-.146 4.128-.667 6.126-.34 1.31-1.182 1.482-2.245 2.22-1 .693-1.903 1.512-2.78 2.352-1.785 1.713-3.52 3.403-5.47 4.934-1.982 1.555-4.035 3.057-5.759 4.908-1.79 1.925-3.365 3.772-5.424 5.444-4.375 3.55-8.504 7.48-12.801 11.141-4.462 3.802-8.53 7.974-12.635 12.15-4.243 4.316-8.733 8.363-13.164 12.483-.348-4.89-.635-9.784-1.042-14.67-.44-5.274-1.627-10.416-2.677-15.596-.938-4.625-1.562-9.575-3.132-14.035-1.077-3.056-3.183-5.567-6.44-6.32-1.63-.377-4.099.395-4.888-1.422-.785-1.806-.86-4.554-1.177-6.494-1.398-8.565 1.38-18.125-2.198-26.32-1.553-3.556-4.44-5.44-7.875-6.964-4.498-1.995-9.467-1.499-14.237-2.488-2.177-.452-3.948-1.642-6.208-1.743-2.281-.102-4.566-.027-6.846.06-2.381.09-4.672-.388-7.037-.38-2.06.006-3.68 1.375-5.701 1.054-2.267-.358-4.116-.916-6.406-.258-2.028.582-3.962.756-6.069.814-2.595.074-5.191-.171-7.785-.046-2.384.114-4.658.838-7.02 1.128-4.995.612-9.809 1.181-14.683 2.524-4.828 1.33-9.413 3.247-14.1 4.985-7.513 2.786-16.134 4.92-18.203 13.775-1.146 4.91-1.375 10.199-.758 15.196.498 4.043 1.415 8.52 3.794 11.921 2.542 3.639 6.759 4.741 10.797 5.995 4.628 1.434 9.363 1.654 14.1 2.513 4.914.889 9.827 1.6 14.837 1.465 4.969-.134 9.829-1.427 14.783-1.848 5.094-.432 10.17-1.03 15.26-1.474 3.424-.3 9.968-1.27 11.684 2.616.542 1.229 1.32 2.697.327 3.796-1.183 1.308-2.228 2.648-3.295 4.103-1.448 1.973-2.53 3.863-2.96 6.297-.424 2.387-.49 4.822-.524 7.24-.138 9.976 2.43 20.088 4.865 29.744 2.532 10.047 5.352 20.04 8.882 29.784 3.363 9.285 5.862 18.95 9.851 27.994 2.003 4.54 4.62 8.568 7.376 12.672 2.318 3.451 4.438 7.627 7.852 10.131 2.863 2.102 6.526 3.135 10.067 2.852 4.245-.338 8.278-2.914 11.995-4.795 8.951-4.532 17.221-10.657 25.251-16.654 3.855-2.878 7.35-6.18 11.454-8.72 4.008-2.484 8.052-4.71 12.567-6.017-3.764 7.933-7.185 15.992-11.186 23.814-3.948 7.721-7.215 15.72-10.768 23.62-1.461 3.249-3.614 6.06-5.053 9.296-1.648 3.71-3.302 7.419-4.944 11.131-3.004 6.782-6.202 13.528-8.918 20.424-.617 1.565-.34 3.457-1.14 4.832-.806 1.387-1.687 2.599-2.3 4.105-1.317 3.241-2.362 6.507-3.862 9.682-3.322 7.029-5.432 14.59-8.612 21.692-3.188 7.12-6.064 14.315-8.906 21.58-1.393 3.561-2.96 7.056-4.26 10.653-1.2 3.318-2.327 6.714-4.285 9.682-4.297 6.516-7.628 13.552-10.863 20.659-1.526 3.352-2.872 6.682-3.102 10.411-.208 3.357 1.872 6.076 3.551 8.778-3.057 1.548-5.873 3.548-8.939 5.108-3.29 1.675-6.724 2.989-10.146 4.36-3.46 1.386-6.913 2.791-10.36 4.213-3.038 1.253-5.847 2.793-8.793 4.227-2.787 1.357-5.328 3.147-7.965 4.762-2.852 1.747-5.747 3.426-8.6 5.173-5.592 3.425-11.035 6.859-16.905 9.804-3.06 1.535-6.137 3.038-9.2 4.568-2.517 1.258-5.282 2.364-7.12 4.59-2.718 3.29-2.481 8.584.099 11.933 1.704 2.21 5.888 2.004 8.431 2.076 1.734.049 3.497-.046 5.2-.395 1.408-.287 2.603-1.037 3.976-1.387 1.555-.395 3.294-.31 4.891-.524a69.451 69.451 0 0 0 4.658-.805c3.347-.683 6.665-1.507 10.007-2.217 3.256-.691 6.52-1.362 9.713-2.311 1.325-.394 2.724-1.15 4.088-1.12 1.482.03 2.778.133 4.27-.133 1.524-.272 3.019-.699 4.554-.904 1.427-.19 2.868.039 4.28-.2 1.592-.27 3.07-.973 4.612-1.427 1.508-.446 2.897-.307 4.448-.307-3.822 2.956-7.819 5.678-11.713 8.537-3.934 2.886-7.605 6.075-11.387 9.149-3.062 2.485-6.89 4.876-8.775 8.452-1.516 2.879-1.798 6.446-1.188 9.614.766 3.974 3.707 4.478 7.282 4.726 4.62.32 8.182-1.637 12.215-3.624 7.898-3.891 15.53-8.385 22.994-13.045 3.693-2.306 7.774-4.044 11.697-5.92 2.075-.992 4.153-1.978 6.232-2.961 1.7-.805 3.924-2.408 5.8-2.224-5.163 10.696-10.567 21.277-15.116 32.259-1.907 4.604-3.425 9.364-3.8 14.36-.263 3.505-.08 10.446 4.298 11.606 1.954.518 3.714-.778 5.028-2.07 1.873-1.843 3.598-3.86 5.388-5.785a174.275 174.275 0 0 1 10.98-10.79c3.872-3.49 7.742-6.898 11.218-10.792 3.313-3.711 7.453-6.523 10.608-10.38 3.24-3.963 6.146-8.186 9.409-12.13 2.147-2.596 3.872-6.661 7.556-7.238.549 3.064 3.191 5.788 5.039 8.292 4.078 5.53 9.003 10.06 14.097 14.63 4.607 4.135 9.559 7.601 15.37 9.841 3.825 1.475 11.824 4.892 14.827.251 1.428-2.206.674-6.512.14-8.927-.741-3.354-2.368-6.496-3.837-9.58-2.987-6.275-6.297-12.298-9.657-18.373-1.687-3.053-3.342-6.126-5.162-9.101-1.58-2.58-3.775-5.068-4.552-8.047-.322-1.225-.52-2.888-.124-4.125.42-1.315.97-1.073 2.148-1.241 2.585-.369 1.806-5.141 1.467-7.002-.301-1.657-.922-3.257-1.517-4.827-.504-1.331-1.626-3.145-1.563-4.586.058-1.364 1.381-2.753 1.917-3.977.623-1.423 1.031-2.911 1.472-4.398 2.019-6.817 4.664-13.401 6.344-20.321 1.672-6.887 3.448-13.624 5.9-20.285 2.542-6.907 5.315-13.745 7.628-20.735 2.245-6.781 4.455-13.547 6.921-20.255 4.948-13.454 10.22-26.809 16.053-39.906 5.755-12.924 12.293-25.503 17.267-38.762 2.393-6.377 4.756-12.71 7.01-19.137a374.847 374.847 0 0 1 7.541-19.708c2.76-6.654 5.036-13.523 7.396-20.326 2.322-6.696 4.309-13.619 7.173-20.1.737.802 1.415 1.378 1.944 2.325.528.943.976 1.827 1.706 2.644 1.312 1.465 2.98 2.49 4.57 3.616.996.704 1.821 1.545 2.96 1.7l.09.012c-.205.012-.41.022-.64.069 1.45 1.006 2.9 2.01 4.353 3.02a13.09 13.09 0 0 0-.383-.817c.471.82.962 1.594 1.98 1.769a2.36 2.36 0 0 1-.245.029c.688.509 3.131 2.941 2.916.318.094.425-.065.746.113 1.172.189.449.627.86.956 1.22.69.75 1.494 1.387 2.318 1.98 1.935 1.39 4.021 2.557 5.9 4.028.543.425 2.387 2.565 3.023 2.564l3.557 3.101c-.453-1.589-.909-3.176-1.364-4.764l.99 3.455c.383 1.339.962 1.824 1.968 2.723 1.765 1.578 3.515 3.177 5.347 4.68 3.342 2.738 7.178 4.862 10.757 7.273 1.947 1.31 3.856 2.656 5.709 4.094 1.52 1.18 3.378 1.597 4.89 2.741 1.901 1.443 3.588 3.322 5.238 5.039 1.48 1.538 3.226 3.089 4.248 4.984 1.157 2.149 1.176 4.95 1.536 7.329.365 2.4.726 4.801 1.076 7.204.721 4.93 1.403 9.866 1.995 14.813.582 4.864 1.296 9.724 1.719 14.604.428 4.938.32 9.882.876 14.816 1.112 9.896 2.373 19.984 4.492 29.72 2.136 9.81 3.504 19.76 5.358 29.632.954 5.077 1.963 10.144 2.958 15.213.489 2.493 1.016 4.98 1.51 7.471.407 2.06.195 4.13.557 6.207.192 1.112.463 2.225.463 3.36.001 1.104-.691 2.07-.73 3.058-.055 1.392 1.22 3.588 1.992 4.697 1.166 1.674 2.78 3.188 4.133 4.724 1.363 1.547 1.911 2.102 1.427 4.192-2.078 8.963 3.246 16.472 8.93 22.809 6.258 6.976 12.517 13.7 19.696 19.739 3.76 3.164 7.3 6.579 10.899 9.922 3.45 3.205 7.172 5.707 11.204 8.151 4.086 2.478 8.417 4.284 12.652 6.461 4.176 2.147 8.234 4.184 12.675 5.748 4.223 1.487 8.5 2.753 12.553 4.643 3.2 1.491 7.26 1.427 10.491.048 2.175-.93 4.042-2.623 5.984-3.947a86.777 86.777 0 0 1 5.571-3.524c3.146-1.813 6.222-3.924 7.565-7.464 1.59-4.192.215-9.226-.694-13.436-.93-4.304-2.85-8.314-5.15-12.044-2.398-3.884-5.38-7.245-8.132-10.865-2.847-3.744-5.383-7.685-8.36-11.34-2.949-3.616-6.038-7.064-9.357-10.34-3.312-3.267-6.205-6.91-9.26-10.412-.736-.843-1.861-1.749-2-2.944-.12-1.041.596-1.793.94-2.71.666-1.778.469-3.732.503-5.59.017-.905.002-1.835.453-2.655.42-.765 1.2-1.07 1.498-1.892.265-.732.168-1.658.315-2.423.187-.97.64-1.677.95-2.598.773-2.303-.186-4.988-.62-7.272-.41-2.157-.797-4.318-1.195-6.476-.86-4.667-1.502-9.345-2.968-13.874-2.98-9.193-5.894-18.338-6.092-28.1-.1-4.889-1.463-9.573-2.593-14.3a2041.085 2041.085 0 0 0-3.652-15.026c-2.369-9.584-5.21-19.028-7.637-28.595-2.419-9.532-4.62-19.127-7.498-28.533-2.908-9.507-6.95-18.432-11.274-27.366-2.08-4.295-4.356-8.003-7.416-11.672-3.173-3.803-6.427-7.54-9.687-11.27-6.575-7.527-13.156-15.048-19.827-22.489-3.322-3.704-6.686-7.237-10.562-10.372-3.453-2.795-8.183-5.148-9.272-9.715-.307-1.29-.514-2.602-.853-3.883-.195-.74-.802-1.858-.707-2.664.19-1.6 3.15-2.211 4.347-2.753 4.143-1.875 8.334-3.732 12.398-5.774 2.245-1.128 4.24-2.503 6.33-3.877 1.758-1.158 3.763-1.507 5.746-2.122 4.404-1.366 8.469-3.313 12.533-5.465 4.195-2.22 8.425-4.44 12.491-6.887 4.129-2.485 7.332-5.54 10.832-8.785 1.565-1.45 2.678-.72 3.787.877 1.35 1.941 2.772 3.833 4.167 5.742.65.889 1.209 1.938 2.13 2.47.037.023.065.035.1.053-.16-.054-.33-.112-.522-.189.338 2.402 2.146 4.043 3.74 5.697-.15-.41-.292-.823-.434-1.236.399 1.144.95 1.92 1.686 2.895 1.464 1.94 3.111 3.648 4.842 5.351.895.88 1.8 1.752 2.705 2.625.36.348.724.697 1.084 1.048.583.564.912.745 1.523 1.02 1.238.559 1.526 1.535 2.594 2.306 1.605 1.16 3.603 1.926 5.265 3.07 1.356.933 2.536 2.83 4.105 3.177.568.125.99.034 1.447.483.602.59-.024.578.924.79.478.108.971-.166 1.453-.013.508.162.957.603 1.385.915.98.715 1.961 1.43 2.94 2.148a350.21 350.21 0 0 1 5.25 3.92c3.458 2.64 6.634 5.628 10.102 8.25 1.794 1.356 3.724 2.347 5.64 3.498 1.596.96 2.941 2.256 4.437 3.353 1.786 1.31 3.871 1.949 5.724 3.133 1.82 1.162 3.57 2.362 5.461 3.41 4.132 2.287 8.33 4.42 12.709 6.19 4.427 1.791 8.956 3.236 13.762 3.462 4.878.231 9.494-1.046 13.992-2.826a124.85 124.85 0 0 0 13.047-6.033c4.103-2.198 7.923-4.842 11.946-7.171a176.198 176.198 0 0 0 11.717-7.432c3.657-2.517 7.134-5.329 11.082-7.385 3.984-2.075 7.517-4.777 11.268-7.227 3.855-2.518 7.684-5.054 11.51-7.62 7.978-5.347 15.964-10.785 23.542-16.694 3.638-2.838 7.227-5.754 10.414-9.095 3.401-3.568 7.458-6.606 11.194-9.815l10.754-10.438a.174.174 0 0 0 .018-.018l-10.772 10.456c1.706-.32 2.815-1.428 4.185-2.49a231.124 231.124 0 0 0 4.289-3.406c2.063-1.68 4.45-3.407 4.21-6.383a48.817 48.817 0 0 1 2.786-2.434c1.57-1.252 3.442-2.016 5.11-3.125 3.425-2.276 6.365-5.174 9.582-7.719 1.416-1.118 2.687-1.965 2.908-3.884.24-2.083-.042-4.34-.056-6.439-.011-1.622-.476-3.886.144-5.421.623-1.539 2.693-2.199 4.033-2.933 3.784-2.076 7.511-4.252 11.298-6.323 3.727-2.038 6.967-3.396 11.23-3.76 1.855-.16 3.636-.439 5.471-.724 1.897-.296 3.664.264 5.522.604 4.213.773 8.477 1.234 12.689 2.017 4.241.788 8.436 1.837 12.625 2.87 4.193 1.033 8.378 2.133 12.635 2.88 2.178.381 4.43.632 6.541 1.312 1.597.513 3.132 1.237 4.774 1.6 3.975.876 8.015.98 11.9 2.308 3.879 1.325 7.836 1.993 11.88 2.601 2.117.32 4.227.66 6.322 1.113 1.264.274 2.388.435 3.67.121 2.656-.65 4.811-2.788 5.66-5.362 2.343-7.1-2.19-14.721-6.804-19.757-4.95-5.401-11.203-9.182-17.144-13.36 2.367-.26 4.72.089 7.086.132 2.027.037 4.011-.053 6.043.058 4.497.246 8.98-1.056 13.483-1.152 6.095-.13 13.616-1.373 15.208-8.32 1.481-6.465-5.377-12.292-10.27-15.226-3.144-1.885-6.327-3.61-9.406-5.605-3.29-2.131-7.355-3.385-10.989-4.819-3.698-1.46-7.422-2.887-11.27-3.904-3.697-.978-7.442-1.502-10.987-2.95 3.225-1.407 6.714-1.717 10.168-2.362 3.44-.643 6.821-1.494 10.192-2.426Z\"\n              />\n              <path\n                d=\"M980.03 463.71c-.36 1.524-1.245 2.273-2.754 2.636-2.489.598-5.218.69-7.757 1-4.64.565-9.438.8-13.99 1.9-4.26 1.028-8.52 2.566-12.367 4.678 1.258-6.015 2.684-11.858 2.156-18.053-.388-4.549-.496-11.402-5.093-14.032-1.064-.61-2.75-.38-3.932-.443-1.538-.082-3.078-.154-4.617-.24-3.044-.167-6.072-.487-9.106-.784a370.604 370.604 0 0 1-17.87-2.185c-.984-.144-2.75-.036-3.408-.889-.486-.627-.254-1.618-.217-2.323a41.527 41.527 0 0 0-.276-7.283c-.662-5.296-2.124-10.507-3.759-15.575-.828-2.562-1.713-5.104-2.547-7.664-.402-1.237-1.337-2.925 0-3.81.834-.554 2.292-.55 3.262-.792 1.155-.287 2.28-.664 3.41-1.035 2.666-.877 5.329-1.766 7.993-2.653 10.122-3.372 20.335-6.52 30.428-9.96 1.412-.48 2.815-.984 4.227-1.465.612-.207 1.674-.742 2.333-.454.77.34.621 1.187 1.174 1.692.483.44 1.577.473 2.199.831 1.579.911 2.568 2.5 3.807 3.782 1.594 1.65 3.376 3.099 4.95 4.779 6.351 6.781 11.051 14.945 15.03 23.294 1.071 2.249 1.768 4.575 2.438 6.968.633 2.264 1.442 4.477 1.802 6.808.838 5.443.869 11.044 1.541 16.522.562 4.59 2.027 10.15.943 14.75m-40.35-12.295c-.013 3.626-.204 7.275-.998 10.824-.818 3.658-2.296 7.161-3.614 10.66-1.244 3.301-2.25 6.705-3.694 9.926-1.423 3.178-3.247 6.075-4.389 9.375-2.342 6.765-6.354 12.7-9.194 19.233-2.9 6.677-6.132 13.053-9.737 19.383-1.714 3.011-3.305 6.342-5.473 9.054a40.49 40.49 0 0 1-3.55 3.88c-1.085 1.04-1.606.246-2.918.482-1.913.343-2.9 2.825-4.137 4.102-2.346 2.418-4.743 4.807-7.312 6.987-2.632 2.231-5.54 4.097-8.24 6.245-2.576 2.051-5.15 3.904-8.095 5.4-5.816 2.954-12.503 6.578-19.213 6.268-3.088-.143-4.742-2.153-6.035-4.836-1.37-2.84-.908-6.245-.678-9.292.275-3.655 1.159-6.879 3.108-9.98 1.92-3.056.027-4.953-1.888-7.5-4.272-5.687-9.965-10.115-15.157-14.92-2.68-2.482-5.338-4.99-7.993-7.499a4762.987 4762.987 0 0 1-4.399-4.163c-1.074-1.018-2.11-1.705-2.497-3.135 2.922-1.575 5.967-2.917 8.66-4.886 5.496-4.02 10.539-8.926 15.72-13.348 2.488-2.125 4.455-4.758 6.454-7.327 1.93-2.48 4.14-4.821 5.806-7.496 3.581-5.754 7.666-11.452 10.505-17.622 1.416-3.075 2.147-6.212 2.888-9.496.446-1.978.96-3.94 1.46-5.904.323-1.266.416-3.448 1.227-4.494 1.493-1.927 6.185 1.185 7.904 1.732 3.235 1.03 6.606 1.518 9.952 2.036 7.097 1.097 14.244 2.035 21.296 3.396 3.694.713 7.397 1.503 11.146 1.876 3.634.362 7.288.174 10.93.147.78-.007 1.732.132 2.256-.584.298-.41.098-.919.578-1.302.625-.499 1.442-.23 2.16-.154 1.458.155 2.92.244 4.376.425.629.078 1.88-.028 2.417.303.566.35.371 1.402.368 2.204m-102.149 97.338c-1.698 3.424-2.68 8.213-2.73 12.006-.028 2.036.24 4.067.658 6.056.363 1.736 1.356 3.733 1.044 5.48-4.308-1.991-8.54-4.134-12.934-5.932-3.796-1.553-6.648-4.257-9.772-6.826-3.355-2.757-6.391-5.831-9.614-8.735-3.46-3.118-7.067-6.065-10.585-9.113-6.263-5.427-11.522-11.526-16.663-18.01-4.52-5.7-11-12.971-10.697-20.683.143-3.58.405-7.65 2.16-10.853 1.458-2.661 4.096-5.645 6.562-7.425 2.371-1.71 4.699 2.589 6.032 4.1 2.871 3.251 5.799 6.45 8.711 9.664 5.54 6.113 10.796 12.532 16.787 18.215 6.04 5.726 12.213 11.327 18.716 16.519 3.255 2.598 6.842 5.02 9.797 7.964 1.085 1.08 3.19 2.271 3.915 3.62.776 1.454-.78 2.73-1.387 3.953m148.21-84.417c-.912-.118-.869.005-.946-.89-.12-1.387.349-3.025.49-4.415.672-6.614.35-13.545-.226-20.16-1.133-12.994-3.81-25.769-10.604-37.04-3.136-5.203-6.682-10.11-11.127-14.28-2.05-1.921-4.05-3.99-6.316-5.659-1.137-.838-2.792-1.261-3.828-2.119-.559-.464-.807-1.409-1.279-2.001-1.885-2.363-4.014-2.973-7.021-2.718-3.12.265-6.39 1.243-9.4 2.078-6.403 1.776-12.545 4.796-18.747 7.179-6.231 2.393-12.392 4.943-18.536 7.547-2.672 1.13-5.896 2.02-8.267 3.727-1.433 1.032-1.854 2.313-1.7 4.03.544 6.062 2.794 12.083 4.506 17.883 1.838 6.228 3.336 12.573 3.805 19.065-6.348-.465-12.657-.948-18.976-1.746-3.16-.4-6.338-.727-9.492-1.16-1.631-.225-2.392-.834-3.703-1.681-1.152-.743-1.745-.114-2.236 1.016-2.556 5.872-3.562 12.278-6.33 18.107-1.242 2.618-2.794 5.062-4.085 7.654-1.406 2.818-3.1 5.591-4.862 8.198-.818 1.21-1.867 2.19-2.774 3.324-.84 1.051-1.443 2.26-2.215 3.36-1.613 2.299-3.567 4.324-5.545 6.306a192.418 192.418 0 0 0-5.806 6.079c-1.865 2.038-4.091 3.692-6.062 5.616-1.855 1.81-3.47 3.781-5.373 5.555-1.833 1.71-2.691 4.083-4.663 5.62-1.063.83-2.243 1.495-3.3 2.33-.875.69-1.788 1.897-3.029 1.666-1.377-.258-2.485-2.11-3.346-3.065a421.271 421.271 0 0 0-3.354-3.671c-4.419-4.784-8.95-9.473-13.407-14.225-2.178-2.324-4.574-4.432-6.697-6.808-1.547-1.732-4.079-2.965-6.245-1.78-2.186 1.195-4.81 2.25-6.58 4.044-1.918 1.944-3.447 4.471-5.009 6.702-1.626 2.323-2.272 5.067-2.698 7.829-.452 2.943-.924 5.859-.7 8.846.425 5.655 1.476 11.966 4.746 16.728 1.558 2.27 3.693 3.974 5.602 5.926 2.068 2.117 3.545 4.665 5.25 7.067 3.42 4.82 7.622 9.135 11.907 13.19 2.044 1.933 4.358 3.563 6.412 5.503 2.193 2.073 4.414 3.942 6.889 5.665 2.531 1.762 4.622 4.057 6.909 6.105 2.356 2.11 4.767 4.077 7.36 5.885 4.974 3.47 10.032 5.729 15.816 7.473 6.37 1.922 12.536 4.437 18.87 6.446 3.036.962 6.04-.369 8.932-1.343 2.948-.993 5.84-2.17 8.555-3.7 5.506-3.104 10.794-6.705 16.21-9.975 5.633-3.4 10.338-7.298 14.641-12.273 4.101-4.744 8.442-9.454 12.177-14.491 7.582-10.231 12.167-22.334 17.794-33.663 2.992-6.022 6.023-11.95 8.511-18.209 1.224-3.078 2.32-6.212 3.569-9.279.529-1.3.966-1.805 2.384-2.026 1.638-.256 3.312-.369 4.957-.565 6.508-.776 12.86-1.928 19.31-3.042 5.986-1.032 12.008-2.1 17.36-5.141 1.125-.64 2.475-1.392 3.088-2.588.279-.546.965-3.314.577-3.757-.227-.26-1.753-.228-2.142-.28M719.239 53.315c2.079-1.094 4.2-2.103 6.312-3.13 4.475-2.175 8.882-4.499 13.408-6.57 2.049-.936 4.189-1.533 6.293-2.32 2.235-.834 4.371-1.937 6.516-2.974 4.509-2.181 9.118-4.061 13.8-5.833 1.434-.543 2.87-1.077 4.309-1.609 1.104-.407 2.447-1.19 3.595-1.325 1.821-.213 3.189 1.644 4.43 2.76 6.696 6.028 11.424 14.963 14.3 23.413 1.57 4.61 2.283 9.371 3.12 14.152.858 4.9 1.77 9.696 1.803 14.678.034 5.065.554 10.059.33 15.136-.083 1.894.258 5.3-.783 6.95-1.058 1.672-3.706 2.14-5.41 2.757-9.317 3.378-18.625 7.015-28.078 9.988a3423.61 3423.61 0 0 0-29.459 9.415c.4-2.79.867-5.578 1.18-8.378.295-2.637.075-5.366.052-8.016-.05-5.823-.24-11.614-1.41-17.337-2.124-10.392-5.557-20.623-11.312-29.594-1.35-2.101-2.957-4.018-4.56-5.926-.573-.683-2.493-2.299-2.425-3.35.091-1.377 2.995-2.363 3.989-2.887m111.806-1.129c2.15.098 3.542.593 3.691 2.895.191 2.934.15 5.906.255 8.847.202 5.625.404 11.251.256 16.88-.26 9.861-1.309 19.708-4.329 29.132-1.46 4.555-3.206 9.033-5.093 13.427-1.83 4.264-4.418 8.098-6.708 12.114-1.128 1.975-2.393 3.58-3.948 5.239-.736.787-1.074 1.206-2.115 1.34-1.056.136-2.385-.137-3.445-.213-4.989-.359-9.975-.854-14.972-1.095-4.953-.238-9.928-.03-14.875-.26-2.324-.108-4.514-.863-6.8-1.231-2.3-.371-4.627-.534-6.942-.795-1.193-.135-1.164.147-1.345-.938-.097-.578.07-1.325.1-1.917.06-1.14.119-2.28.188-3.42.062-1.018-.144-2.806.268-3.77.368-.857 1.156-1.006 1.977-1.23 4.607-1.265 9.058-2.83 13.49-4.617 4.521-1.822 9.097-3.543 13.567-5.491 1.927-.84 4.1-1.608 5.56-3.191 1.197-1.299 1.885-2.968 2.414-4.629 2.912-9.136 1.998-19.665 1.145-29.077-.877-9.674-2.26-19.602-5.803-28.697 11.148 0 22.326.185 33.464.697M706.614 60.55c3.096 1.16 5.047 3.865 6.85 6.471 2.246 3.25 4.365 6.536 6.124 10.082 3.694 7.451 6.133 15.662 7.524 23.85 1.331 7.816 1.99 16.533.46 24.374-.41 2.097-1.48 3.78-2.077 5.766-.402 1.335-.122 3.276.24 4.603.52 1.903 2.314 1.254 3.81.946 2.182-.45 4.365-.895 6.545-1.355 8.218-1.734 16.356-4.751 24.723-5.361-.713 2.225-1.111 4.244-2.55 6.151-1.345 1.784-3.137 3.33-3.911 5.48-.645 1.79-.77 4.297-.113 6.115.69 1.908 2.376 1.935 4.145 2.15 4.974.603 9.869 1.422 14.884 1.696 1.078.058 2.154.18 3.218-.025.857-.165 1.458-.42 2.324-.26 1.147.21 2.158.763 3.362.886 1.133.116 2.275.08 3.41.037 4.2-.157 8.307.28 12.51-.129 1.226-.12 3.527-.814 4.672-.114 1.21.74.262 2.233.864 3.26.794 1.35 3.52.658 4.838.585 1.882-.103 3.55-.436 5.237-1.304 3.41-1.755 6.492-4.091 9-7.005 2.624-3.049 4.527-6.61 6.404-10.146 1.958-3.686 3.92-7.287 5.4-11.203 1.513-4 2.996-8.128 3.853-12.325.856-4.191 1.398-8.448 2.206-12.651.843-4.384.99-8.853 1.214-13.3.23-4.612.332-9.144.043-13.756-.283-4.531-.783-8.975-1.314-13.478-.136-1.15-.066-2.342-.249-3.482-.124-.766-.523-1.493-.567-2.27-.088-1.546 1.33-2.54 1.293-4.156-.086-3.755-4.08-5.153-7.047-6.051-3.858-1.168-8.162-1.872-12.196-1.582-8.68.624-17.552.705-25.784 3.874-4.266-7.312-8.24-15.243-15.221-20.37-.787-.58-1.641-.975-2.151-1.83-.436-.733-.628-1.469-1.21-2.13-1.433-1.624-3.199-1.826-5.204-1.4-4.364.923-8.533 1.935-12.67 3.588-1.837.733-3.786 1.078-5.63 1.795-1.774.688-3.47 1.552-5.175 2.392-3.73 1.84-7.588 3.403-11.315 5.258-7.486 3.726-14.886 7.632-21.777 12.391-3.328 2.3-7.144 4.677-9.966 7.596-1.242 1.285-1.805 2.907-1.598 4.68.215 1.846 1.16 1.127 2.572 1.657M216.13 74.834c.366-4.76.218-9.532.563-14.289.33-4.52 1.242-9.122 2.13-13.565.903-4.518 2.544-8.529 4.389-12.723 1.018-2.314 2.002-4.643 2.989-6.97.602-1.428 1.043-2.907 2.713-3.287 2.165-.494 4.779-.094 7.006-.173 2.25-.08 4.499-.216 6.742-.415 4.876-.433 9.72-1.146 14.588-1.651 4.662-.483 9.272-.766 13.875-1.727 2.37-.494 4.718-1.073 7.067-1.65 1.76-.431 4.2-1.535 5.971-1.116-2.19 4.988-2.872 10.312-2.926 15.71-.02 2.127-.272 2.997-2.487 2.867-2.764-.164-5.539-.442-8.288-.758-5.188-.599-10.335-1.549-15.478-2.44-2.438-.422-4.78-1.023-7.17-1.552-1.699-.374-2.413.299-2.98 1.85-.41 1.122-.542 1.627-1.595 2.26-.86.518-1.707 1.008-2.499 1.633-1.41 1.11-2.624 2.446-3.662 3.91-2.304 3.242-3.781 7.053-5.134 10.769-3.4 9.352-5.112 19.523-5.428 29.455-.16 5.05-.993 10-1.048 15.067-.026 2.234.544 5.108-1.321 6.73-1.824 1.59-4.167 2.73-6.202 4.032-1.784-5.11-2.244-10.53-2.298-15.908-.056-5.36.074-10.714.484-16.059m75.485-27.046c2.228.593 4.467 1.118 6.714 1.639-3.821 9.158-3.687 19.289-3.976 29.05-.128 4.367-.011 8.744.418 13.09.442 4.447 1.441 8.69 2.34 13.05.195.952.665 2.513.038 3.386-.695.967-2.971 1.49-3.958 1.935-3.917 1.766-7.773 3.682-11.77 5.267-4.052 1.607-8.261 2.571-12.223 4.438-3.878 1.827-7.807 3.502-11.845 4.946-3.967 1.42-8.084 2.461-11.913 4.247-3.632 1.693-6.63 4.02-9.716 6.53-1.876-5.827-2.607-11.755-2.946-17.862-.325-5.845-.804-11.93-.207-17.762.271-2.66.272-5.136.219-7.8-.048-2.385.503-4.723.693-7.096.418-5.228.401-10.45 1.109-15.657 1.34-9.85 4-20.276 9.366-28.72.342-.538.676-1.406 1.148-1.804.795-.668.513-.543 1.559-.004.976.5 1.938 1.033 2.945 1.471 2.115.92 4.378 1.325 6.584 1.952 2.444.695 4.661 1.759 7.198 2.152 2.457.381 4.954.427 7.41.814 1.358.214 2.604.663 3.926 1 1.076.275 2.13.202 3.262.32 2.188.232 4.318.845 6.512 1.043 2.467.223 4.664-.276 7.113.375m-80.85 42.522c.757 6.029 2.37 11.935 4.72 17.538.756 1.802 1.608 4.324 3.768 4.822 1.992.459 4.406-1.005 6.283-1.519 1.472 8.75 2.116 17.841 6.02 25.951.493 1.024 1.143 2.932 2.157 3.603 1.036.685 2.295.016 3.328-.377 4.338-1.644 8.819-2.696 13.308-3.834 2.19-.555 4.42-1.048 6.557-1.79 1.774-.617 3.45-1.358 5.31-1.694 3.885-.703 7.495-1.974 11.209-3.285 7.795-2.754 15.632-5.247 22.826-9.382 3.433-1.973 7.034-3.906 10.204-6.29 2.6-1.953 5.509-4.882 4.235-8.43-.385-1.073-1.44-2.849-2.655-3.176-1.14-.31-2.164.723-3.207.96-1.577.361-1.223-.911-1.37-2.153-.115-.979-.236-1.957-.355-2.936-.248-2.055-.493-4.11-.677-6.173-.759-8.54-.402-17.076-.41-25.631-.003-4.283.988-8.038 1.988-12.164.53-2.19 1.024-4.388 1.49-6.59.258-1.225.559-2.57.204-3.809-.795-2.778-4.752-3.546-7.095-4.337-2.014-.68-4.059-1.272-6.144-1.688-1.143-.228-4.196-.05-4.935-1.01-.732-.95.078-4.033.152-5.164.137-2.082.28-4.162.555-6.232.442-3.339.394-6.435-2.27-8.877 1.661-1.324 2.84-4.133.425-5.353-2.779-1.405-6.497-1.608-9.432-.872-3.21.806-6.733.816-10.02 1.169-3.499.373-6.987.828-10.478 1.268-6.005.76-12.122.927-18.054 2.146-2.97.61-5.944 1.073-8.938 1.546-3.101.49-4.97.905-6.827 3.522-3.518 4.963-6.766 10.05-8.742 15.844-1.87 5.489-2.743 11.256-3.263 17.015-.56 6.206-.685 12.395-.615 18.623.07 6.263-.033 12.529.749 18.759M84.613 335.594c.356-.603 1.435-.751 2.003-.979.897-.359 1.746-.808 2.58-1.29 4.18-2.412 8.258-4.876 12.12-7.781.947-.712 3.274-3.327 4.645-2.914.672.204 1.038 1.319 1.33 1.863.509.958 1.038 1.9 1.614 2.82 2.274 3.63 5.108 6.889 8.273 9.773 5.95 5.42 12.728 8.921 20.89 9.34-5.27 7.163-10.308 14.645-16.294 21.242-3.02 3.33-6.333 6.34-9.47 9.553-.535.548-.823.877-1.528 1.192-.683.304-1.333.403-1.897.964-.981.977-1.05 2.431-.83 3.721-5.57.214-11.6-2.28-16.655-4.325-2.966-1.201-5.893-2.538-8.68-4.117-1.893-1.072-4.01-2.27-5.399-3.991 5.108-2.718 10.272-5.302 15.167-8.397 3.342-2.112 9.248-4.579 8.77-9.455-.074-.758-.372-1.69-1.044-2.128-.994-.648-1.22.117-2.124.313-1.468.317-3.201-1.622-4.321-2.456-3.029-2.258-5.987-4.751-7.784-8.138-.537-1.014-2.058-3.634-1.366-4.81m-31.11 43.178c.829-2.7-3.04-4.779-4.749-6.078-2.562-1.95-4.344-4.108-6.068-6.832-6.724-10.627-9.106-23.571-8.555-35.997.153-3.449.544-6.891.624-10.342.041-1.791-.075-3.46.317-5.229.371-1.672.815-3.326 1.225-4.99.82-3.316 1.24-6.714 2.218-9.992.909-3.037 2.147-5.966 3.598-8.783.966-1.88 1.867-4.516 4.393-4.156 3.156.452 6.241 2.077 9.315 2.925 3.404.939 6.846 1.723 10.282 2.531 3.324.78 6.574 1.89 9.92 2.564 1.75.353 3.479.497 5.26.466.777-.013 2.173-.088 2.25.975.083 1.163-1.702 2.426-2.435 3.138-1.035 1.006-1.795 1.953-2.36 3.289-1.349 3.18-2.57 6.5-3.07 9.93-.486 3.337-.402 6.846-.44 10.214-.074 6.792.889 13.297 3.326 19.66 2.208 5.756 5.667 9.726 10.402 13.57-4.947 2.464-9.895 4.93-14.843 7.389-4.458 2.215-8.964 4.127-12.775 7.4-1.569 1.348-3.425 2.904-4.545 4.661-1.4 2.196.57 3.69 2.658 2.81 2.298-.965 4.555-2.07 6.805-3.142 1.463-.698 3.906-2.568 5.614-2.521 1.45.04 2.001 1.895 2.647 2.923 1.034 1.644 2.323 3.109 3.744 4.43 2.986 2.778 6.487 5.101 10.17 6.85 4.062 1.932 8.449 3.251 12.882 4.007 2.419.412 4.877.63 7.329.537 1.84-.069 4.446-.074 6.107-.972 1.43-.774.68-2.351 2.095-3.16 1.49-.85 3.067-1.485 4.507-2.44 3.401-2.258 5.42-5.168 7.416-8.649 4.583-7.993 10.157-15.298 13.586-23.914.802-2.018 1.26-4.398 2.573-6.16.873-1.17 2.823-1.867 3.035-3.403.206-1.502-.398-4.823-1.89-5.517-1.726-.802-4.233-.814-6.106-1.25-8.136-1.9-15.727-4.792-22.212-10.176a50.55 50.55 0 0 1-4.59-4.34c-1.069-1.14-2.189-2.338-1.97-4.019.194-1.494 1.392-3.675-1.053-4.094-1.64-.281-3.895.583-5.232 1.427-4.006 2.53-7.728 5.572-11.553 8.365-3.488 2.547-7.061 4.972-10.606 7.44.414-5.863.223-12.217 1.618-17.94.682-2.795 1.872-5.431 3.401-7.862 1.572-2.495 2.825-5.108 4.199-7.71.764.444 2.014 1.436 2.713.254.435-.734.13-2.666-.034-3.51-1.217-6.258-10.72-6.885-15.62-7.953-7.048-1.535-14.087-3.392-21.22-4.482-3.295-.504-6.562-.604-9.877-.806-1.701-.104-3.684-.482-4.713 1.239-.276.462-.316 1.12-.617 1.488-.276.338-1.08.667-1.459.972-1.098.883-2.046 1.923-2.876 3.058-1.7 2.323-2.865 4.996-3.99 7.629-2.715 6.35-4.257 13.09-5.104 19.925-.868 7.006-1.472 14.25-1.01 21.307.849 12.99 4.379 26.205 12.561 36.587 1.876 2.38 3.92 4.329 6.624 5.747 1.308.686 5.42 3.115 6.159.712M146.724 531.62c-2.536 3.26-5.068 6.488-7.334 9.949-2.28 3.483-4.453 7.034-6.684 10.549-2.151 3.39-4.554 6.682-6.284 10.318-.998 2.097-1.095 4.857-3.836 4.759-3.622-.129-7.053-1.163-10.245-2.857-6.396-3.395-11.72-8.164-15.714-14.213-4.145-6.275-7.362-13.376-9.692-20.515-1.289-3.948-2.322-7.973-3.255-12.018-.475-2.052-.982-4.062-.986-6.18-.003-.932.055-1.863.103-2.793.045-.88.535-2.415-.477-2.475.303-2.53.592-5.058.902-7.585.225-1.827.21-3.875 1.811-5.083 1.532-1.158 3.935-1.197 5.74-1.605a89.516 89.516 0 0 0 6.487-1.728c4.39-1.346 8.593-3.13 12.831-4.886 2.115-.876 4.232-1.769 6.23-2.9 1.649-.935 2.832-2.292 3.95-.16 7.616 14.514 13.18 30.781 25.648 42.043 1.009.91 2.659 2.004 2.807 3.496.143 1.453-1.197 2.847-2.002 3.883m10.026-10.259c-1.758-1.205-3.939-1.406-5.722-2.519-2.044-1.276-3.397-4.153-4.793-6.07-3.332-4.572-6.67-9.173-9.68-13.969-2.73-4.354-5.203-8.867-7.827-13.286-1.344-2.263-2.732-4.469-4.316-6.573-.674-.895-2.384-4.058-3.825-3.94-.744.06-.714.784-1.247 1.017-.275.12-.494-.012-.762.025-.965.129-2.013-.36-3.007-.263-2.456.239-5.115 1.27-7.479 1.983-4.934 1.489-9.64 3.583-14.491 5.303-4.81 1.706-10.18 2.844-14.576 5.498-1.736 1.048-3.696 2.725-1.991 4.777.646.778 1.533.757 2.205 1.36.568.51.315.79.184 1.638l-.227 1.454c-.787 5.094-1.43 10.197-.72 15.341a109.71 109.71 0 0 0 3.263 15.413c4.598 15.911 12.823 34.795 28.985 41.847 3.778 1.647 7.536 2.037 11.522 2.78 1.253.234 2.315.802 3.429 1.378.533.275 1.192.72 1.833.64 1.463-.18 2.666-2.452 3.349-3.527 2.58-4.06 5.508-7.87 8.187-11.863 1.386-2.068 2.699-4.186 3.834-6.402.658-1.282 1.129-3.407 2.937-3.359l1.462 1.952c.196.261.49.551.633.843.36.735.331.19.182 1.06-.192 1.11-1.221 2.367-1.87 3.243-3.804 5.14-7.774 10.156-11.761 15.153-3.917 4.912-7.918 9.788-12.508 14.092-.929.87-1.946 1.933-3.304 1.991-1.254.054-2.628-.603-3.873-.82-2.706-.473-5.485-.581-8.123-1.4-1.372-.424-2.52-1.218-3.94-1.314-1.195-.083-2.01-.281-3.057-.915-2.37-1.431-5.006-2.217-7.403-3.57-4.943-2.788-10.05-6.93-13.674-11.302-1.878-2.266-3.418-4.79-5.261-7.084-1.79-2.23-3.559-4.447-5.125-6.847-3.088-4.732-5.546-9.86-7.414-15.193-.971-2.77-1.455-4.58.96-6.606 2.277-1.91 4.409-3.908 6.306-6.206.922-1.12 5.132-5.228 1.98-5.911-1.707-.371-4.433 2.51-5.716 3.553-2.09 1.701-4.138 3.35-6.555 4.567-2.736 1.378-2.787 3.128-2.747 5.99.082 5.902 2.28 11.653 4.557 17.04a79.189 79.189 0 0 0 8.821 15.66c6.752 9.307 14.303 18.749 24.799 23.954 5.189 2.575 10.794 3.933 16.528 4.575 3.386.38 6.799.512 10.203.428 1.437-.036 3.315.159 4.693-.278 1.118-.355 1.301-1.184 1.705-2.198.959-2.402 3.465-3.706 5.16-5.63 1.81-2.057 3.707-3.994 5.568-6.001 4.032-4.348 6.701-9.465 9.94-14.375 1.793-2.716 3.732-5.374 5.296-8.233 1.265-2.317 2.838-5.362 3.28-7.975.35-2.085-1.328-5.115-3.635-5.23-1.203-.06-2.167.886-3.352 1.008-.356.038-1.57-.206-1.995-.032 1.938-4.708 4.811-9.14 6.99-13.722a152.287 152.287 0 0 0 3.473-7.848c.822-2.016 1.8-3.67-.288-5.102M187.759 148.671c3.808 8.793 9.93 15.802 16.182 22.939 3.308 3.777 6.685 7.207 10.696 10.246 3.734 2.828 7.513 5.589 11.283 8.367-3.783 4.86-8.033 9.306-12.248 13.8-3.894 4.15-7.775 8.394-10.341 13.521-.266-2.454-1.859-3.97-4.006-4.972-2.68-1.248-5.144-2.606-7.472-4.447-4.94-3.906-9.537-8.561-13.744-13.233-8.557-9.503-14.01-21.455-19.956-32.632 9.868-4.529 19.738-9.058 29.606-13.589m-31.628 22.182c1.445 4.062 3.54 7.973 5.456 11.832 1.888 3.803 3.845 7.583 6.05 11.215 4.192 6.903 9.315 13.336 15.849 18.178 3.198 2.37 6.627 4.732 10.185 6.538 1.682.852 3.527 1.5 5.441 1.392 1.172-.067 2.794-1.105 3.703-.18.93.95.622 2.847 2.577 1.927 1.604-.757 3.015-2.367 4.195-3.63 3.004-3.21 6.02-6.441 8.905-9.76 2.795-3.217 5.09-6.882 7.45-10.42 1.303-1.953 2.592-3.915 3.884-5.876.924-1.403 2.24-2.807 2.171-4.584-.132-3.467-4.384-5.818-6.8-7.746-2.961-2.364-5.711-4.792-8.233-7.62-2.683-3.01-6.062-5.53-8.965-8.356-3.153-3.066-6-6.401-8.825-9.762-2.243-2.669-4.466-5.404-6.366-8.325-1.485-2.284-3.16-4.036-6.129-3.613-2.323.538-4.653.92-6.892 1.774-2.251.858-4.418 1.942-6.606 2.95-3.965 1.825-7.613 4.134-11.465 6.163-.873.46-1.738.935-2.53 1.526-.437.325-.88.953-1.345 1.186-.344.172-.58.133-.975.244-1.561.438-2.15 1.309-2.93 2.679-1.254 2.203-1.219 3.387-.071 5.644 1.049 2.063 1.491 4.448 2.266 6.624M312.492 280.115c.975 1.566 2.572.795 3.484-.32 2.771-3.383 5.364-7.043 7.852-10.644 2.524-3.654 4.838-7.355 7.699-10.766a426.158 426.158 0 0 1 8.819-10.152c11.156-12.48 22.605-24.665 34.907-36.003 3.007-2.771 6.1-5.478 8.988-8.376 1.27-1.275 2.817-2.69 2.757-4.65-.042-1.399-.954-3.123-2.174-3.837-2.653-1.55-6.214 2.227-8.185 3.638-1.508 1.079-3.125 1.644-4.708 2.53-1.385.777-2.77 1.964-3.957 3.023-2.668 2.382-5.542 4.406-8.247 6.725-2.746 2.355-5.173 5.058-7.87 7.468-2.884 2.577-5.978 4.794-8.546 7.73-2.532 2.895-4.67 6.055-7.312 8.873-5.625 5.997-10.225 12.774-15.022 19.442-2.31 3.21-4.055 6.726-5.616 10.358a248.486 248.486 0 0 0-2.284 5.451c-.698 1.732-.756 3.5-1.077 5.317.404.08.102 3.569.492 4.193M935.423 575.729c2.113-2.54 3.5-6.201 5.035-9.131 1.645-3.137 3.17-6.04 3.866-9.533.335-1.681.536-3.4.92-5.069.361-1.578.878-2.97.73-4.619-.155-1.72-.956-6.906-3.57-6.333-1.52.333-1.215 1.959-1.224 3.147-.011 1.362-.17 2.718-.57 4.022-.948 3.084-3.202 5.802-4.63 8.695-1.384 2.804-3.023 5.357-5.092 7.706a55.473 55.473 0 0 1-6.553 6.303c-2.052 1.67-4.527 2.933-6.021 5.198-.893 1.357-1.042 1.763-2.684 2.137-1.325.302-2.57.786-3.684 1.577-1.263.896-2.16 1.968-3.639 2.557-1.286.513-2.648.819-3.946 1.299-3.002 1.108-5.623 2.978-8.69 4.026-1.588.543-3.2 1.007-4.806 1.488-1.285.384-2.804.648-3.867 1.516-1.785 1.46-2.785 5.183-1.224 7.122 1.68 2.087 5.623.782 7.81.515.028.142.054.285.084.427 3.682-.74 7.52-1.177 11.1-2.333 1.89-.612 3.59-1.485 5.319-2.45 1.464-.817 2.964-1.106 4.53-1.628 1.4-.465 2.518-1.173 3.393-2.381 1.118-1.55 1.592-1.088 3.318-1.466 2.772-.609 5.162-3.756 7.069-5.658 2.324-2.318 4.929-4.612 7.026-7.134M405.68 128.495c.647-1.024 2.903-1.951 3.94-2.618a94.792 94.792 0 0 0 4.177-2.824c2.475-1.787 4.204-.613 6.4 1.099 4.058 3.16 5.687 7.405 5.383 12.427.01 1.467.405 3.922-.725 5.13-1.08 1.158-3.323 1.044-4.75 1.332-1.868.379-4.689 2.742-6.623 2.05-1.696-.606-1.096-3.632-1.231-4.967-.256-2.493-1.086-4.906-2.618-6.92-.788-1.035-1.732-1.915-2.77-2.702-.793-.603-1.826-.99-1.183-2.007m-7.438 7.545c1.598.278 3.246 1.019 4.74 1.625.991.402 2.29.779 3.09 1.492 1.33 1.184.79 3.051 1.1 4.6.18.906.645 1.686.31 2.627-.39 1.1-1.542 1.288-2.126 2.18-.854 1.307.248 3.154.986 4.269 1.28 1.935 3.027.947 5.001.657 2.378-.35 4.821-.446 7.111-1.23 1.866-.636 3.414-2.113 4.837-.149.53.734.64 1.381 1.685 1.106.869-.229 1.752-1.408 2.349-2.012 3.717-3.764 4.603-8.906 4.664-13.98.178-5.633-1.869-10.926-4.77-15.687-.61-1-1.223-2.156-2.134-2.933-.887-.757-2.042-1.055-2.844-1.939-1.197-1.318-.92-3.987-2.829-4.568-2.01-.614-4.901 1.824-6.423 2.868-2.144 1.469-4.24 3-6.303 4.575-4.42 3.373-9.357 6.603-13.353 10.46-1.355 1.309-1.908 3.62-.549 5.183 1.36 1.563 3.687.547 5.458.856M635.397 539.654c-.858-4.98-2.303-9.845-4.057-14.588-1.136-3.072-3.728-8.358-7.868-8.053-4.558.334-1.503 6.283-1.06 8.648 1.731 9.255 2.732 18.722 4.1 28.039.678 4.616.883 9.374 1.974 13.919a37.027 37.027 0 0 0 2.223 6.459c.594 1.328 1.306 3.055 2.793 3.654 4.515 1.817 3.387-6.123 3.337-8.08-.123-4.792-.235-9.583-.353-14.376l.37-.01c-.686-5.194-.567-10.429-1.46-15.612M98.497 626.81c-2.471.807-4.307 1.428-6.996 1.173-1.885-.18-3.75-.563-5.628-.8-4.843-.607-9.46-1.944-13.905-3.94-4.041-1.812-7.825-3.997-11.161-6.907-1.76-1.534-3.35-3.22-4.914-4.947-1.12-1.238-2.154-2.17-3.893-2.389.451 2.502.979 4.474 2.174 6.748a39.528 39.528 0 0 0 3.289 5.23 38.095 38.095 0 0 0 9.108 8.69c3.435 2.337 7.299 4.323 11.35 5.347 2.26.572 4.575.913 6.864 1.352 2.162.414 4.264.832 6.471.53 2.065-.284 4.242-.356 6.253-.938 1.588-.46 3.102-1.47 4.457-2.392 2.64-1.798-.237-7.81-3.469-6.756M179.143 63.844c1.228 1.646 3.865 1.655 3.69-.757-.158-2.211-.845-4.39-1.56-6.474-.727-2.127-.577-4.438-.62-6.659-.098-5.303.075-10.44 1.072-15.66.956-5.025 1.574-10.11 2.694-15.104 1.098-4.901 3.088-9.535 4.313-14.395.38-1.5.684-4.43-1.513-4.773-1.827-.285-2.904 2.276-3.612 3.486-2.355 4.024-4.894 7.745-6.291 12.23-1.26 4.039-2.211 8.34-2.653 12.547-.462 4.41-.393 8.866-.663 13.289.441 5.14.207 10.828 1.858 15.754.745 2.218 1.875 4.626 3.285 6.516M868.655 84.046c-.723 1.735-1.075 3.584.166 5.214 2.253 2.957 5.842-3.777 6.387-5.657 1.184-4.075 2.668-8.18 3.33-12.389.677-4.292.355-8.907.462-13.258-.359-5.164-1.046-10.314-2.278-15.337-1.09-4.455-2.249-9.047-5.877-12.05-1.51-1.248-2.545-.304-2.758 1.478-.231 1.955.28 3.922 1.17 5.635 2.087 4.017 2.091 8.714 2.558 13.205.929 8.931 1.45 17.835-.889 26.597-.6 2.247-1.379 4.423-2.27 6.562M102.582 183.827c.518 2.027 1.103 4.04 1.85 5.996 1.445 3.779 3.313 7.41 5.62 10.735 3.808 5.488 8.833 10.7 14.287 14.56 1.798 1.273 6.163 4.83 8.5 3.643 3.196-1.624-1.081-5.768-2.38-6.981-2.677-2.505-5.34-5.03-8.048-7.503-2.716-2.481-4.737-5.66-6.88-8.632-2.157-2.994-4.266-6.025-6.22-9.157-1.012-1.62-1.893-3.32-2.898-4.94-.869-1.403-2.157-2.365-3.276-3.548-.932.444-.823.366-1.063 1.211-.103.363-.07 1.1-.064 1.434.018 1.097.302 2.125.572 3.182M332.034 215.273c5.07-4.592 10.634-8.472 15.421-13.364 1.205-1.231 2.137-1.95 1.093-3.633-.697-1.123-1.496-1.692-2.673-.923-2.812 1.84-5.491 4.1-8.201 6.106-5.557 4.113-11.319 8.146-16.335 12.916-2.27 2.16-4.37 4.51-6.132 7.101-1.85 2.719-3.248 5.477-1.18 8.524 6.027-5.545 11.94-11.232 18.007-16.727M949.599 593.032c-.908-.223-2.417.78-3.092 1.225-2.689 1.771-5.472 3.408-8.191 5.135a367.184 367.184 0 0 0-7.442 4.88c-2.053 1.373-3.399 3.062-2.677 5.657.33 1.184.876 2.57 2.25 1.892 1.009-.498 1.879-.982 2.988-1.374 2.79-.988 5.605-1.964 8.211-3.39 4.517-2.467 8.748-6.288 9.354-11.67-.336-.762-.432-2.117-1.401-2.355M652.715 538.733c-.918-1.002-2.044-1.014-2.53.197-.5 1.247.15 3.386.328 4.623.29 2.027.61 4.049.956 6.067.202 1.178.35 4.84 1.897 5.316 2.372.732 2.43-5.04 2.634-6.214-.5-1.705-.974-3.416-1.478-5.119-.442-1.494-.711-3.672-1.807-4.87M253.205 439.187c-.568-.27-1.006-.153-1.126-.829-.1-.561.781-1.146.915-1.627.483-1.734-1.335.09-1.994.637.624 1.546 1.247 3.09 1.876 4.632.708-.28 1.417-.565 2.124-.85-.677-.917-.762-1.471-1.795-1.963M585.023 159.861c1.182.39 2.913-.14 4.118-.363 1.162-.216 2.471-.539 3.58-.971 2.736-1.068 2.503-4.305 1.872-6.82-.852-3.39-2.748-6.635-4.25-9.763a123.613 123.613 0 0 1-2.244-4.918c-.536-1.255-1.243-3.014-2.868-3.026-2.506-.02-1.283 5.883-.885 7.287 1.002 3.539 2.863 6.8 4.417 10.103-1.436.098-2.913.287-4.346.238-1.488-.05-1.894-.004-2.258 1.658-.524 2.405.199 5.699 2.864 6.575M562.443 130.937c2.699-.167 5.388-.45 8.073-.752 1.976-.223 5.424-.262 6.828-1.825.963-1.072.797-3.354-.05-4.465-1-1.312-3.336-.795-4.821-.795-4.01.067-7.899.6-11.485 2.368-1.316.65-4.28 1.83-3.965 3.599.395 2.222 3.768 1.971 5.42 1.87M573.684 162.065c-2.253.565-1.82 4.425-1.125 6.048 1.041 2.43 3.665 3.02 6.075 2.864 1.16-.116 2.826.3 3.694-.67.857-.958.846-2.88.24-3.954-.804-1.42-2.886-2.224-4.295-2.884-1.226-.574-3.176-1.758-4.589-1.404M573.984 141.998c.176-2.21-1.089-7.179-4.039-6.993-1.402.088-2.596 2.095-2.853 3.328-.269 1.3.104 2.614.445 3.858.559 2.052 1.398 5.219 4.127 4.765 2.263-.378 2.325-3.084 2.32-4.958M595.26 144.225c.596.58 1.467 1.012 2.304.631 1.234-.56 1.022-2.04 1.022-3.095l.414-.134c-.7-1.941-1.159-6.006-3.591-6.556-2.387-.54-2.562 2.112-2.336 3.766.239 1.765.843 4.08 2.186 5.388M520.235 144c-1.185.119-3.416.669-3.223 2.156.28 2.167 3.678 2.554 5.404 2.764 2.043.25 4.877.043 2.933-2.519-1.184-1.56-3.164-2.25-5.114-2.401M420.274 403 419 405.49l3.999.51c.057-1.057-2.016-2.368-2.725-3\"\n              />\n            </g>\n          </g>\n        </svg>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/blog-cards/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <article\n      class=\"overflow-hidden rounded-lg shadow-sm transition hover:shadow-lg dark:shadow-gray-700/25\"\n    >\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&q=80&w=1160\"\n        class=\"h-56 w-full object-cover\"\n      />\n\n      <div class=\"bg-white p-4 sm:p-6 dark:bg-gray-900\">\n        <time datetime=\"2022-10-10\" class=\"block text-xs text-gray-500 dark:text-gray-400\">\n          10th Oct 2022\n        </time>\n\n        <a href=\"#\">\n          <h3 class=\"mt-0.5 text-lg text-gray-900 dark:text-white\">\n            How to position your furniture for positivity\n          </h3>\n        </a>\n\n        <p class=\"mt-2 line-clamp-3 text-sm/relaxed text-gray-500 dark:text-gray-400\">\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus\n          pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis\n          quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius\n          atque dignissimos. Molestias explicabo corporis voluptatem?\n        </p>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/blog-cards/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <article class=\"overflow-hidden rounded-lg shadow-sm transition hover:shadow-lg\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&q=80&w=1160\"\n        class=\"h-56 w-full object-cover\"\n      />\n\n      <div class=\"bg-white p-4 sm:p-6\">\n        <time datetime=\"2022-10-10\" class=\"block text-xs text-gray-500\"> 10th Oct 2022 </time>\n\n        <a href=\"#\">\n          <h3 class=\"mt-0.5 text-lg text-gray-900\">\n            How to position your furniture for positivity\n          </h3>\n        </a>\n\n        <p class=\"mt-2 line-clamp-3 text-sm/relaxed text-gray-500\">\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus\n          pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis\n          quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius\n          atque dignissimos. Molestias explicabo corporis voluptatem?\n        </p>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/blog-cards/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <article class=\"group\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1631451095765-2c91616fc9e6?auto=format&fit=crop&q=80&w=1160\"\n        class=\"h-56 w-full rounded-xl object-cover shadow-xl transition group-hover:grayscale-50 dark:shadow-gray-700/25\"\n      />\n\n      <div class=\"p-4\">\n        <a href=\"#\">\n          <h3 class=\"text-lg font-medium text-gray-900 dark:text-white\">\n            Finding the Journey to Mordor\n          </h3>\n        </a>\n\n        <p class=\"mt-2 line-clamp-3 text-sm/relaxed text-gray-500 dark:text-gray-400\">\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus\n          pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis\n          quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius\n          atque dignissimos. Molestias explicabo corporis voluptatem?\n        </p>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/blog-cards/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <article class=\"group\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1631451095765-2c91616fc9e6?auto=format&fit=crop&q=80&w=1160\"\n        class=\"h-56 w-full rounded-xl object-cover shadow-xl transition group-hover:grayscale-50\"\n      />\n\n      <div class=\"p-4\">\n        <a href=\"#\">\n          <h3 class=\"text-lg font-medium text-gray-900\">Finding the Journey to Mordor</h3>\n        </a>\n\n        <p class=\"mt-2 line-clamp-3 text-sm/relaxed text-gray-500\">\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus\n          pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis\n          quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius\n          atque dignissimos. Molestias explicabo corporis voluptatem?\n        </p>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/blog-cards/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <article\n      class=\"overflow-hidden rounded-lg border border-gray-100 bg-white shadow-xs dark:border-gray-800 dark:bg-gray-900 dark:shadow-gray-700/25\"\n    >\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&q=80&w=1160\"\n        class=\"h-56 w-full object-cover\"\n      />\n\n      <div class=\"p-4 sm:p-6\">\n        <a href=\"#\">\n          <h3 class=\"text-lg font-medium text-gray-900 dark:text-white\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit.\n          </h3>\n        </a>\n\n        <p class=\"mt-2 line-clamp-3 text-sm/relaxed text-gray-500 dark:text-gray-400\">\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus\n          pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis\n          quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius\n          atque dignissimos. Molestias explicabo corporis voluptatem?\n        </p>\n\n        <a\n          href=\"#\"\n          class=\"group mt-4 inline-flex items-center gap-1 text-sm font-medium text-blue-600\"\n        >\n          Find out more\n\n          <span aria-hidden=\"true\" class=\"block transition-all group-hover:ms-0.5 rtl:rotate-180\">\n            &rarr;\n          </span>\n        </a>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/blog-cards/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <article class=\"overflow-hidden rounded-lg border border-gray-100 bg-white shadow-xs\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&q=80&w=1160\"\n        class=\"h-56 w-full object-cover\"\n      />\n\n      <div class=\"p-4 sm:p-6\">\n        <a href=\"#\">\n          <h3 class=\"text-lg font-medium text-gray-900\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit.\n          </h3>\n        </a>\n\n        <p class=\"mt-2 line-clamp-3 text-sm/relaxed text-gray-500\">\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus\n          pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis\n          quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius\n          atque dignissimos. Molestias explicabo corporis voluptatem?\n        </p>\n\n        <a\n          href=\"#\"\n          class=\"group mt-4 inline-flex items-center gap-1 text-sm font-medium text-blue-600\"\n        >\n          Find out more\n\n          <span aria-hidden=\"true\" class=\"block transition-all group-hover:ms-0.5 rtl:rotate-180\">\n            &rarr;\n          </span>\n        </a>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/blog-cards/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <article\n      class=\"rounded-[10px] border border-gray-200 bg-white px-4 pt-12 pb-4 dark:border-gray-700 dark:bg-gray-900\"\n    >\n      <time datetime=\"2022-10-10\" class=\"block text-xs text-gray-500 dark:text-gray-400\">\n        10th Oct 2022\n      </time>\n\n      <a href=\"#\">\n        <h3 class=\"mt-0.5 text-lg font-medium text-gray-900 dark:text-white\">\n          How to center an element using JavaScript and jQuery\n        </h3>\n      </a>\n\n      <div class=\"mt-4 flex flex-wrap gap-1\">\n        <span\n          class=\"rounded-full bg-purple-100 px-2.5 py-0.5 text-xs whitespace-nowrap text-purple-600 dark:bg-purple-600 dark:text-purple-100\"\n        >\n          Snippet\n        </span>\n\n        <span\n          class=\"rounded-full bg-purple-100 px-2.5 py-0.5 text-xs whitespace-nowrap text-purple-600 dark:bg-purple-600 dark:text-purple-100\"\n        >\n          JavaScript\n        </span>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/blog-cards/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <article class=\"rounded-[10px] border border-gray-200 bg-white px-4 pt-12 pb-4\">\n      <time datetime=\"2022-10-10\" class=\"block text-xs text-gray-500\"> 10th Oct 2022 </time>\n\n      <a href=\"#\">\n        <h3 class=\"mt-0.5 text-lg font-medium text-gray-900\">\n          How to center an element using JavaScript and jQuery\n        </h3>\n      </a>\n\n      <div class=\"mt-4 flex flex-wrap gap-1\">\n        <span\n          class=\"rounded-full bg-purple-100 px-2.5 py-0.5 text-xs whitespace-nowrap text-purple-600\"\n        >\n          Snippet\n        </span>\n\n        <span\n          class=\"rounded-full bg-purple-100 px-2.5 py-0.5 text-xs whitespace-nowrap text-purple-600\"\n        >\n          JavaScript\n        </span>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/blog-cards/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <article\n      class=\"rounded-lg border border-gray-100 bg-white p-4 shadow-xs transition hover:shadow-lg sm:p-6 dark:border-gray-800 dark:bg-gray-900 dark:shadow-gray-700/25\"\n    >\n      <span class=\"inline-block rounded-sm bg-blue-600 p-2 text-white dark:bg-blue-700\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-6\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path d=\"M12 14l9-5-9-5-9 5 9 5z\" />\n          <path\n            d=\"M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z\"\n          />\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222\"\n          />\n        </svg>\n      </span>\n\n      <a href=\"#\">\n        <h3 class=\"mt-0.5 text-lg font-medium text-gray-900 dark:text-white\">\n          Lorem ipsum dolor sit, amet consectetur adipisicing elit.\n        </h3>\n      </a>\n\n      <p class=\"mt-2 line-clamp-3 text-sm/relaxed text-gray-500 dark:text-gray-400\">\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus\n        pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis\n        quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius\n        atque dignissimos. Molestias explicabo corporis voluptatem?\n      </p>\n\n      <a\n        href=\"#\"\n        class=\"group mt-4 inline-flex items-center gap-1 text-sm font-medium text-blue-600\"\n      >\n        Find out more\n\n        <span aria-hidden=\"true\" class=\"block transition-all group-hover:ms-0.5 rtl:rotate-180\">\n          &rarr;\n        </span>\n      </a>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/blog-cards/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <article\n      class=\"rounded-lg border border-gray-100 bg-white p-4 shadow-xs transition hover:shadow-lg sm:p-6\"\n    >\n      <span class=\"inline-block rounded-sm bg-blue-600 p-2 text-white\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"size-6\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path d=\"M12 14l9-5-9-5-9 5 9 5z\" />\n          <path\n            d=\"M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z\"\n          />\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222\"\n          />\n        </svg>\n      </span>\n\n      <a href=\"#\">\n        <h3 class=\"mt-0.5 text-lg font-medium text-gray-900\">\n          Lorem ipsum dolor sit, amet consectetur adipisicing elit.\n        </h3>\n      </a>\n\n      <p class=\"mt-2 line-clamp-3 text-sm/relaxed text-gray-500\">\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus\n        pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis\n        quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius\n        atque dignissimos. Molestias explicabo corporis voluptatem?\n      </p>\n\n      <a\n        href=\"#\"\n        class=\"group mt-4 inline-flex items-center gap-1 text-sm font-medium text-blue-600\"\n      >\n        Find out more\n\n        <span aria-hidden=\"true\" class=\"block transition-all group-hover:ms-0.5 rtl:rotate-180\">\n          &rarr;\n        </span>\n      </a>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/blog-cards/6-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <article\n      class=\"flex bg-white transition hover:shadow-xl dark:bg-gray-900 dark:shadow-gray-800/25\"\n    >\n      <div class=\"rotate-180 p-2 [writing-mode:vertical-lr]\">\n        <time\n          datetime=\"2022-10-10\"\n          class=\"flex items-center justify-between gap-4 text-xs font-bold text-gray-900 uppercase dark:text-white\"\n        >\n          <span>2022</span>\n          <span class=\"w-px flex-1 bg-gray-900/10 dark:bg-white/10\"></span>\n          <span>Oct 10</span>\n        </time>\n      </div>\n\n      <div class=\"hidden sm:block sm:basis-56\">\n        <img\n          alt=\"\"\n          src=\"https://images.unsplash.com/photo-1609557927087-f9cf8e88de18?auto=format&fit=crop&q=80&w=1160\"\n          class=\"aspect-square h-full w-full object-cover\"\n        />\n      </div>\n\n      <div class=\"flex flex-1 flex-col justify-between\">\n        <div\n          class=\"border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6 dark:border-white/10\"\n        >\n          <a href=\"#\">\n            <h3 class=\"font-bold text-gray-900 uppercase dark:text-white\">\n              Finding the right guitar for your style - 5 tips\n            </h3>\n          </a>\n\n          <p class=\"mt-2 line-clamp-3 text-sm/relaxed text-gray-700 dark:text-gray-200\">\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus\n            pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis\n            quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius\n            atque dignissimos. Molestias explicabo corporis voluptatem?\n          </p>\n        </div>\n\n        <div class=\"sm:flex sm:items-end sm:justify-end\">\n          <a\n            href=\"#\"\n            class=\"block bg-yellow-400 px-5 py-3 text-center text-xs font-bold text-gray-900 uppercase transition hover:bg-yellow-500\"\n          >\n            Read Blog\n          </a>\n        </div>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/blog-cards/6.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <article class=\"flex bg-white transition hover:shadow-xl\">\n      <div class=\"rotate-180 p-2 [writing-mode:vertical-lr]\">\n        <time\n          datetime=\"2022-10-10\"\n          class=\"flex items-center justify-between gap-4 text-xs font-bold text-gray-900 uppercase\"\n        >\n          <span>2022</span>\n          <span class=\"w-px flex-1 bg-gray-900/10\"></span>\n          <span>Oct 10</span>\n        </time>\n      </div>\n\n      <div class=\"hidden sm:block sm:basis-56\">\n        <img\n          alt=\"\"\n          src=\"https://images.unsplash.com/photo-1609557927087-f9cf8e88de18?auto=format&fit=crop&q=80&w=1160\"\n          class=\"aspect-square h-full w-full object-cover\"\n        />\n      </div>\n\n      <div class=\"flex flex-1 flex-col justify-between\">\n        <div class=\"border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6\">\n          <a href=\"#\">\n            <h3 class=\"font-bold text-gray-900 uppercase\">\n              Finding the right guitar for your style - 5 tips\n            </h3>\n          </a>\n\n          <p class=\"mt-2 line-clamp-3 text-sm/relaxed text-gray-700\">\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus\n            pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis\n            quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius\n            atque dignissimos. Molestias explicabo corporis voluptatem?\n          </p>\n        </div>\n\n        <div class=\"sm:flex sm:items-end sm:justify-end\">\n          <a\n            href=\"#\"\n            class=\"block bg-yellow-300 px-5 py-3 text-center text-xs font-bold text-gray-900 uppercase transition hover:bg-yellow-400\"\n          >\n            Read Blog\n          </a>\n        </div>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/blog-cards/7.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <article class=\"relative overflow-hidden rounded-lg shadow-sm transition hover:shadow-lg\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1661956602116-aa6865609028?auto=format&fit=crop&q=80&w=1160\"\n        class=\"absolute inset-0 h-full w-full object-cover\"\n      />\n\n      <div class=\"relative bg-linear-to-t from-gray-900/50 to-gray-900/25 pt-32 sm:pt-48 lg:pt-64\">\n        <div class=\"p-4 sm:p-6\">\n          <time datetime=\"2022-10-10\" class=\"block text-xs text-white/90\"> 10th Oct 2022 </time>\n\n          <a href=\"#\">\n            <h3 class=\"mt-0.5 text-lg text-white\">How to position your furniture for positivity</h3>\n          </a>\n\n          <p class=\"mt-2 line-clamp-3 text-sm/relaxed text-white/95\">\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus\n            pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis\n            quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius\n            atque dignissimos. Molestias explicabo corporis voluptatem?\n          </p>\n        </div>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/buttons/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <a\n      class=\"inline-block rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600\"\n      href=\"#\"\n    >\n      Download\n    </a>\n\n    <a\n      class=\"inline-block rounded-sm border border-indigo-600 px-12 py-3 text-sm font-medium text-indigo-600 hover:bg-indigo-600 hover:text-white\"\n      href=\"#\"\n    >\n      Download\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/buttons/10.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <a\n      class=\"group relative inline-block overflow-hidden border border-indigo-600 px-8 py-3\"\n      href=\"#\"\n    >\n      <span\n        class=\"absolute inset-y-0 left-0 w-0.5 bg-indigo-600 transition-all group-hover:w-full\"\n      ></span>\n\n      <span\n        class=\"relative text-sm font-medium text-indigo-600 transition-colors group-hover:text-white\"\n      >\n        Download\n      </span>\n    </a>\n\n    <a\n      class=\"group relative inline-block overflow-hidden border border-indigo-600 px-8 py-3\"\n      href=\"#\"\n    >\n      <span\n        class=\"absolute inset-y-0 right-0 w-0.5 bg-indigo-600 transition-all group-hover:w-full\"\n      ></span>\n\n      <span\n        class=\"relative text-sm font-medium text-indigo-600 transition-colors group-hover:text-white\"\n      >\n        Download\n      </span>\n    </a>\n\n    <a\n      class=\"group relative inline-block overflow-hidden border border-indigo-600 px-8 py-3\"\n      href=\"#\"\n    >\n      <span\n        class=\"absolute inset-x-0 bottom-0 h-0.5 bg-indigo-600 transition-all group-hover:h-full\"\n      ></span>\n\n      <span\n        class=\"relative text-sm font-medium text-indigo-600 transition-colors group-hover:text-white\"\n      >\n        Download\n      </span>\n    </a>\n\n    <a\n      class=\"group relative inline-block overflow-hidden border border-indigo-600 px-8 py-3\"\n      href=\"#\"\n    >\n      <span\n        class=\"absolute inset-x-0 top-0 h-0.5 bg-indigo-600 transition-all group-hover:h-full\"\n      ></span>\n\n      <span\n        class=\"relative text-sm font-medium text-indigo-600 transition-colors group-hover:text-white\"\n      >\n        Download\n      </span>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/buttons/11.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <a\n      class=\"group flex items-center justify-between gap-4 rounded-lg border border-indigo-600 bg-indigo-600 px-5 py-3 transition-colors hover:bg-transparent\"\n      href=\"#\"\n    >\n      <span class=\"font-medium text-white transition-colors group-hover:text-indigo-600\">\n        Find out more\n      </span>\n\n      <span class=\"shrink-0 rounded-full border border-current bg-white p-2 text-indigo-600\">\n        <svg\n          class=\"size-5 rtl:rotate-180\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M17 8l4 4m0 0l-4 4m4-4H3\"\n          />\n        </svg>\n      </span>\n    </a>\n\n    <a\n      class=\"group flex items-center justify-between gap-4 rounded-lg border border-current px-5 py-3 text-indigo-600 transition-colors hover:bg-indigo-600\"\n      href=\"#\"\n    >\n      <span class=\"font-medium transition-colors group-hover:text-white\"> Find out more </span>\n\n      <span class=\"shrink-0 rounded-full border border-indigo-600 bg-white p-2\">\n        <svg\n          class=\"size-5 rtl:rotate-180\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M17 8l4 4m0 0l-4 4m4-4H3\"\n          />\n        </svg>\n      </span>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/buttons/12.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <a class=\"group relative inline-block text-sm font-medium text-white\" href=\"#\">\n      <span class=\"absolute inset-0 border border-red-600\"></span>\n      <span\n        class=\"block border border-red-600 bg-red-600 px-12 py-3 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1\"\n      >\n        Download\n      </span>\n    </a>\n\n    <a class=\"group relative inline-block text-sm font-medium text-red-600\" href=\"#\">\n      <span class=\"absolute inset-0 border border-current\"></span>\n      <span\n        class=\"block border border-current bg-white px-12 py-3 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1\"\n      >\n        Download\n      </span>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/buttons/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <a\n      class=\"inline-flex items-center gap-2 rounded-sm border border-indigo-600 bg-indigo-600 px-8 py-3 text-white hover:bg-transparent hover:text-indigo-600\"\n      href=\"#\"\n    >\n      <span class=\"text-sm font-medium\"> Download </span>\n\n      <svg\n        class=\"size-5 rtl:rotate-180\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M17 8l4 4m0 0l-4 4m4-4H3\"\n        />\n      </svg>\n    </a>\n\n    <a\n      class=\"inline-flex items-center gap-2 rounded-sm border border-indigo-600 px-8 py-3 text-indigo-600 hover:bg-indigo-600 hover:text-white\"\n      href=\"#\"\n    >\n      <span class=\"text-sm font-medium\"> Download </span>\n\n      <svg\n        class=\"size-5 rtl:rotate-180\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M17 8l4 4m0 0l-4 4m4-4H3\"\n        />\n      </svg>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/buttons/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <a\n      class=\"group inline-block rounded-sm bg-linear-to-r from-pink-500 via-red-500 to-yellow-500 p-0.5 hover:text-white\"\n      href=\"#\"\n    >\n      <span\n        class=\"block rounded-xs bg-white px-8 py-3 text-sm font-medium group-hover:bg-transparent\"\n      >\n        Download\n      </span>\n    </a>\n\n    <a\n      class=\"group inline-block rounded-full bg-linear-to-r from-pink-500 via-red-500 to-yellow-500 p-0.5 hover:text-white\"\n      href=\"#\"\n    >\n      <span\n        class=\"block rounded-full bg-white px-8 py-3 text-sm font-medium group-hover:bg-transparent\"\n      >\n        Download\n      </span>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/buttons/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <a\n      class=\"inline-block rounded-full border border-indigo-600 bg-indigo-600 p-3 text-white hover:bg-transparent hover:text-indigo-600\"\n      href=\"#\"\n    >\n      <span class=\"sr-only\"> Download </span>\n\n      <svg\n        class=\"size-5 rtl:rotate-180\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M14 5l7 7m0 0l-7 7m7-7H3\"\n        />\n      </svg>\n    </a>\n\n    <a\n      class=\"inline-block rounded-full border border-indigo-600 p-3 text-indigo-600 hover:bg-indigo-600 hover:text-white\"\n      href=\"#\"\n    >\n      <span class=\"sr-only\"> Download </span>\n\n      <svg\n        class=\"size-5 rtl:rotate-180\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M14 5l7 7m0 0l-7 7m7-7H3\"\n        />\n      </svg>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/buttons/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <a class=\"group relative inline-block text-sm font-medium text-indigo-600\" href=\"#\">\n      <span\n        class=\"absolute inset-0 translate-x-0.5 translate-y-0.5 bg-indigo-600 transition-transform group-hover:translate-x-0 group-hover:translate-y-0\"\n      ></span>\n\n      <span class=\"relative block border border-current bg-white px-8 py-3\"> Download </span>\n    </a>\n\n    <a class=\"group relative inline-block text-sm font-medium text-indigo-600\" href=\"#\">\n      <span\n        class=\"absolute inset-0 translate-x-0 translate-y-0 bg-indigo-600 transition-transform group-hover:translate-x-0.5 group-hover:translate-y-0.5\"\n      ></span>\n\n      <span class=\"relative block border border-current bg-white px-8 py-3\"> Download </span>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/buttons/6.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <a\n      class=\"group relative inline-flex items-center overflow-hidden rounded-sm bg-indigo-600 px-8 py-3 text-white\"\n      href=\"#\"\n    >\n      <span class=\"absolute -start-full transition-all group-hover:start-4\">\n        <svg\n          class=\"size-5 rtl:rotate-180\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M17 8l4 4m0 0l-4 4m4-4H3\"\n          />\n        </svg>\n      </span>\n\n      <span class=\"text-sm font-medium transition-all group-hover:ms-4\"> Download </span>\n    </a>\n\n    <a\n      class=\"group relative inline-flex items-center overflow-hidden rounded-sm border border-current px-8 py-3 text-indigo-600\"\n      href=\"#\"\n    >\n      <span class=\"absolute -start-full transition-all group-hover:start-4\">\n        <svg\n          class=\"size-5 rtl:rotate-180\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M17 8l4 4m0 0l-4 4m4-4H3\"\n          />\n        </svg>\n      </span>\n\n      <span class=\"text-sm font-medium transition-all group-hover:ms-4\"> Download </span>\n    </a>\n\n    <a\n      class=\"group relative inline-flex items-center overflow-hidden rounded-sm bg-indigo-600 px-8 py-3 text-white\"\n      href=\"#\"\n    >\n      <span class=\"absolute -end-full transition-all group-hover:end-4\">\n        <svg\n          class=\"size-5 rtl:rotate-180\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M17 8l4 4m0 0l-4 4m4-4H3\"\n          />\n        </svg>\n      </span>\n\n      <span class=\"text-sm font-medium transition-all group-hover:me-4\"> Download </span>\n    </a>\n\n    <a\n      class=\"group relative inline-flex items-center overflow-hidden rounded-sm border border-current px-8 py-3 text-indigo-600\"\n      href=\"#\"\n    >\n      <span class=\"absolute -end-full transition-all group-hover:end-4\">\n        <svg\n          class=\"size-5 rtl:rotate-180\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M17 8l4 4m0 0l-4 4m4-4H3\"\n          />\n        </svg>\n      </span>\n\n      <span class=\"text-sm font-medium transition-all group-hover:me-4\"> Download </span>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/buttons/7.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <a\n      class=\"inline-block rounded-sm bg-indigo-600 px-8 py-3 text-sm font-medium text-white transition hover:scale-110 hover:shadow-xl\"\n      href=\"#\"\n    >\n      Download\n    </a>\n\n    <a\n      class=\"inline-block rounded-sm border border-current px-8 py-3 text-sm font-medium text-indigo-600 transition hover:scale-110 hover:shadow-xl\"\n      href=\"#\"\n    >\n      Download\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/buttons/8.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <a\n      class=\"inline-block rounded-sm bg-indigo-600 px-8 py-3 text-sm font-medium text-white transition hover:scale-110 hover:rotate-2\"\n      href=\"#\"\n    >\n      Download\n    </a>\n\n    <a\n      class=\"inline-block rounded-sm border border-current px-8 py-3 text-sm font-medium text-indigo-600 transition hover:scale-110 hover:rotate-2\"\n      href=\"#\"\n    >\n      Download\n    </a>\n\n    <a\n      class=\"inline-block rounded-sm bg-indigo-600 px-8 py-3 text-sm font-medium text-white transition hover:scale-110 hover:-rotate-2\"\n      href=\"#\"\n    >\n      Download\n    </a>\n\n    <a\n      class=\"inline-block rounded-sm border border-current px-8 py-3 text-sm font-medium text-indigo-600 transition hover:scale-110 hover:-rotate-2\"\n      href=\"#\"\n    >\n      Download\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/buttons/9.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <a class=\"group relative inline-block\" href=\"#\">\n      <span\n        class=\"absolute inset-0 translate-x-1.5 translate-y-1.5 bg-yellow-300 transition-transform group-hover:translate-x-0 group-hover:translate-y-0\"\n      ></span>\n\n      <span\n        class=\"relative inline-block border-2 border-current px-8 py-3 text-sm font-bold tracking-widest text-black uppercase\"\n      >\n        Download\n      </span>\n    </a>\n\n    <a class=\"group relative inline-block\" href=\"#\">\n      <span\n        class=\"absolute inset-0 translate-x-0 translate-y-0 bg-yellow-300 transition-transform group-hover:translate-x-1.5 group-hover:translate-y-1.5\"\n      ></span>\n\n      <span\n        class=\"relative inline-block border-2 border-current px-8 py-3 text-sm font-bold tracking-widest uppercase\"\n      >\n        Download\n      </span>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/cards/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <a href=\"#\" class=\"block rounded-md border border-gray-300 p-4 shadow-sm sm:p-6\">\n      <div class=\"sm:flex sm:justify-between sm:gap-4 lg:gap-6\">\n        <div class=\"sm:order-last sm:shrink-0\">\n          <img\n            alt=\"\"\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            class=\"size-16 rounded-full object-cover sm:size-18\"\n          />\n        </div>\n\n        <div class=\"mt-4 sm:mt-0\">\n          <h3 class=\"text-lg font-medium text-pretty text-gray-900\">\n            How I built my first website with Nuxt, Tailwind CSS and Vercel\n          </h3>\n\n          <p class=\"mt-1 text-sm text-gray-700\">By John Doe</p>\n\n          <p class=\"mt-4 line-clamp-2 text-sm text-pretty text-gray-700\">\n            Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum provident a,\n            ipsa maiores deleniti consectetur nobis et eaque.\n          </p>\n        </div>\n      </div>\n\n      <dl class=\"mt-6 flex gap-4 lg:gap-6\">\n        <div class=\"flex items-center gap-2\">\n          <dt class=\"text-gray-700\">\n            <span class=\"sr-only\"> Published on </span>\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-5\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5\"\n              />\n            </svg>\n          </dt>\n\n          <dd class=\"text-xs text-gray-700\">31/06/2025</dd>\n        </div>\n\n        <div class=\"flex items-center gap-2\">\n          <dt class=\"text-gray-700\">\n            <span class=\"sr-only\"> Reading time </span>\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-5\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25\"\n              />\n            </svg>\n          </dt>\n\n          <dd class=\"text-xs text-gray-700\">12 minutes</dd>\n        </div>\n      </dl>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/cards/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <a href=\"#\" class=\"block\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1605721911519-3dfeb3be25e7?auto=format&fit=crop&q=80&w=1160\"\n        class=\"h-64 w-full object-cover sm:h-80 lg:h-96\"\n      />\n\n      <h3 class=\"mt-4 text-lg font-bold text-gray-900 sm:text-xl\">Lorem, ipsum dolor.</h3>\n\n      <p class=\"mt-2 max-w-sm text-gray-700\">\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni reiciendis sequi ipsam\n        incidunt.\n      </p>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/cards/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <a href=\"#\" class=\"group relative block bg-black\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1603871165848-0aa92c869fa1?auto=format&fit=crop&q=80&w=1160\"\n        class=\"absolute inset-0 h-full w-full object-cover opacity-75 transition-opacity group-hover:opacity-50\"\n      />\n\n      <div class=\"relative p-4 sm:p-6 lg:p-8\">\n        <p class=\"text-sm font-medium tracking-widest text-pink-500 uppercase\">Developer</p>\n\n        <p class=\"text-xl font-bold text-white sm:text-2xl\">Tony Wayne</p>\n\n        <div class=\"mt-32 sm:mt-48 lg:mt-64\">\n          <div\n            class=\"translate-y-8 transform opacity-0 transition-all group-hover:translate-y-0 group-hover:opacity-100\"\n          >\n            <p class=\"text-sm text-white\">\n              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis perferendis hic\n              asperiores quibusdam quidem voluptates doloremque reiciendis nostrum harum.\n              Repudiandae?\n            </p>\n          </div>\n        </div>\n      </div>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/cards/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <a href=\"#\" class=\"group relative block h-64 sm:h-80 lg:h-96\">\n      <span class=\"absolute inset-0 border-2 border-dashed border-black\"></span>\n\n      <div\n        class=\"relative flex h-full transform items-end border-2 border-black bg-white transition-transform group-hover:-translate-x-2 group-hover:-translate-y-2\"\n      >\n        <div\n          class=\"px-4 pb-4 transition-opacity group-hover:absolute group-hover:opacity-0 sm:px-6 sm:pb-4 lg:px-8 lg:pb-8\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-10 sm:size-12\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n            />\n          </svg>\n\n          <h2 class=\"mt-4 text-xl font-medium sm:text-2xl\">Go around the world</h2>\n        </div>\n\n        <div\n          class=\"absolute p-4 opacity-0 transition-opacity group-hover:relative group-hover:opacity-100 sm:p-6 lg:p-8\"\n        >\n          <h3 class=\"mt-4 text-xl font-medium sm:text-2xl\">Go around the world</h3>\n\n          <p class=\"mt-4 text-sm sm:text-base\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, praesentium\n            voluptatem omnis atque culpa repellendus.\n          </p>\n\n          <p class=\"mt-8 font-bold\">Read more</p>\n        </div>\n      </div>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/cards/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <a href=\"#\" class=\"block rounded-lg p-4 shadow-xs shadow-indigo-100\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1613545325278-f24b0cae1224?auto=format&fit=crop&q=80&w=1160\"\n        class=\"h-56 w-full rounded-md object-cover\"\n      />\n\n      <div class=\"mt-2\">\n        <dl>\n          <div>\n            <dt class=\"sr-only\">Price</dt>\n\n            <dd class=\"text-sm text-gray-500\">$240,000</dd>\n          </div>\n\n          <div>\n            <dt class=\"sr-only\">Address</dt>\n\n            <dd class=\"font-medium\">123 Wallaby Avenue, Park Road</dd>\n          </div>\n        </dl>\n\n        <div class=\"mt-6 flex items-center gap-8 text-xs\">\n          <div class=\"sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2\">\n            <svg\n              class=\"size-4 text-indigo-700\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z\"\n              />\n            </svg>\n\n            <div class=\"mt-1.5 sm:mt-0\">\n              <p class=\"text-gray-500\">Parking</p>\n\n              <p class=\"font-medium\">2 spaces</p>\n            </div>\n          </div>\n\n          <div class=\"sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2\">\n            <svg\n              class=\"size-4 text-indigo-700\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z\"\n              />\n            </svg>\n\n            <div class=\"mt-1.5 sm:mt-0\">\n              <p class=\"text-gray-500\">Bathroom</p>\n\n              <p class=\"font-medium\">2 rooms</p>\n            </div>\n          </div>\n\n          <div class=\"sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2\">\n            <svg\n              class=\"size-4 text-indigo-700\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"\n              />\n            </svg>\n\n            <div class=\"mt-1.5 sm:mt-0\">\n              <p class=\"text-gray-500\">Bedroom</p>\n\n              <p class=\"font-medium\">4 rooms</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/cards/6.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <article class=\"rounded-xl border border-gray-700 bg-gray-800 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <img\n          alt=\"\"\n          src=\"https://images.unsplash.com/photo-1614644147724-2d4785d69962?auto=format&fit=crop&q=80&w=1160\"\n          class=\"size-16 rounded-full object-cover\"\n        />\n\n        <div>\n          <h3 class=\"text-lg font-medium text-white\">Claire Mac</h3>\n\n          <div class=\"flow-root\">\n            <ul class=\"-m-1 flex flex-wrap\">\n              <li class=\"p-1 leading-none\">\n                <a href=\"#\" class=\"text-xs font-medium text-gray-300\"> Twitter </a>\n              </li>\n\n              <li class=\"p-1 leading-none\">\n                <a href=\"#\" class=\"text-xs font-medium text-gray-300\"> GitHub </a>\n              </li>\n\n              <li class=\"p-1 leading-none\">\n                <a href=\"#\" class=\"text-xs font-medium text-gray-300\">Website</a>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n\n      <ul class=\"mt-4 space-y-2\">\n        <li>\n          <a\n            href=\"#\"\n            class=\"block h-full rounded-lg border border-gray-700 p-4 hover:border-pink-600\"\n          >\n            <strong class=\"font-medium text-white\">Project A</strong>\n\n            <p class=\"mt-1 text-xs font-medium text-gray-300\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime consequuntur deleniti,\n              unde ab ut in!\n            </p>\n          </a>\n        </li>\n\n        <li>\n          <a\n            href=\"#\"\n            class=\"block h-full rounded-lg border border-gray-700 p-4 hover:border-pink-600\"\n          >\n            <strong class=\"font-medium text-white\">Project B</strong>\n\n            <p class=\"mt-1 text-xs font-medium text-gray-300\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente cumque saepe sit.\n            </p>\n          </a>\n        </li>\n      </ul>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/cards/7.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <a href=\"#\" class=\"block\">\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1588515724527-074a7a56616c?auto=format&fit=crop&q=80&w=1160\"\n        class=\"h-56 w-full rounded-se-3xl rounded-es-3xl object-cover sm:h-64 lg:h-72\"\n      />\n\n      <div class=\"mt-4 sm:flex sm:items-center sm:justify-center sm:gap-4\">\n        <strong class=\"font-medium\">Company Name</strong>\n\n        <span class=\"hidden sm:block sm:h-px sm:w-8 sm:bg-yellow-500\"></span>\n\n        <p class=\"mt-0.5 opacity-50 sm:mt-0\">Branding / Signage</p>\n      </div>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/cards/8.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <article class=\"rounded-xl bg-white p-4 ring-3 ring-indigo-50 sm:p-6 lg:p-8\">\n      <div class=\"flex items-start sm:gap-8\">\n        <div\n          class=\"hidden sm:grid sm:size-20 sm:shrink-0 sm:place-content-center sm:rounded-full sm:border-2 sm:border-indigo-500\"\n          aria-hidden=\"true\"\n        >\n          <div class=\"flex items-center gap-1\">\n            <span class=\"h-8 w-0.5 rounded-full bg-indigo-500\"></span>\n            <span class=\"h-6 w-0.5 rounded-full bg-indigo-500\"></span>\n            <span class=\"h-4 w-0.5 rounded-full bg-indigo-500\"></span>\n            <span class=\"h-6 w-0.5 rounded-full bg-indigo-500\"></span>\n            <span class=\"h-8 w-0.5 rounded-full bg-indigo-500\"></span>\n          </div>\n        </div>\n\n        <div>\n          <strong\n            class=\"rounded-sm border border-indigo-500 bg-indigo-500 px-3 py-1.5 text-[10px] font-medium text-white\"\n          >\n            Episode #101\n          </strong>\n\n          <h3 class=\"mt-4 text-lg font-medium sm:text-xl\">\n            <a href=\"#\" class=\"hover:underline\"> Some Interesting Podcast Title </a>\n          </h3>\n\n          <p class=\"mt-1 text-sm text-gray-700\">\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam nulla amet voluptatum\n            sit rerum, atque, quo culpa ut necessitatibus eius suscipit eum accusamus, aperiam\n            voluptas exercitationem facere aliquid fuga. Sint.\n          </p>\n\n          <div class=\"mt-4 sm:flex sm:items-center sm:gap-2\">\n            <div class=\"flex items-center gap-1 text-gray-500\">\n              <svg\n                class=\"size-4\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n                ></path>\n              </svg>\n\n              <p class=\"text-xs font-medium\">48:32 minutes</p>\n            </div>\n\n            <span class=\"hidden sm:block\" aria-hidden=\"true\">&middot;</span>\n\n            <p class=\"mt-2 text-xs font-medium text-gray-500 sm:mt-0\">\n              Featuring-3\n              <a href=\"#\" class=\"underline hover:text-gray-700\">Barry</a>,\n              <a href=\"#\" class=\"underline hover:text-gray-700\">Sandra</a> and\n              <a href=\"#\" class=\"underline hover:text-gray-700\">August</a>\n            </p>\n          </div>\n        </div>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/cards/9.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <article class=\"rounded-xl border-2 border-gray-100 bg-white\">\n      <div class=\"flex items-start gap-4 p-4 sm:p-6 lg:p-8\">\n        <a href=\"#\" class=\"block shrink-0\">\n          <img\n            alt=\"\"\n            src=\"https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?auto=format&fit=crop&q=80&w=1160\"\n            class=\"size-14 rounded-lg object-cover\"\n          />\n        </a>\n\n        <div>\n          <h3 class=\"font-medium sm:text-lg\">\n            <a href=\"#\" class=\"hover:underline\"> Question about Rendering </a>\n          </h3>\n\n          <p class=\"line-clamp-2 text-sm text-gray-700\">\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, accusantium\n            temporibus iure delectus ut totam natus nesciunt ex? Ducimus, enim.\n          </p>\n\n          <div class=\"mt-2 sm:flex sm:items-center sm:gap-2\">\n            <div class=\"flex items-center gap-1 text-gray-500\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-4\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  d=\"M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z\"\n                />\n              </svg>\n\n              <p class=\"text-xs\">14 comments</p>\n            </div>\n\n            <span class=\"hidden sm:block\" aria-hidden=\"true\">&middot;</span>\n\n            <p class=\"hidden sm:block sm:text-xs sm:text-gray-500\">\n              Posted by\n              <a href=\"#\" class=\"font-medium underline hover:text-gray-700\"> John </a>\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"flex justify-end\">\n        <strong\n          class=\"-me-0.5 -mb-0.5 inline-flex items-center gap-1 rounded-ss-xl rounded-ee-xl bg-green-600 px-3 py-1.5 text-white\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"size-4\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z\"\n            />\n          </svg>\n\n          <span class=\"text-[10px] font-medium sm:text-xs\">Solved!</span>\n        </strong>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/carts/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-end p-6\">\n    <div\n      class=\"relative w-screen max-w-sm border border-gray-600 bg-gray-100 px-4 py-8 sm:px-6 lg:px-8\"\n      aria-modal=\"true\"\n      role=\"dialog\"\n      tabindex=\"-1\"\n    >\n      <button class=\"absolute end-4 top-4 text-gray-600 transition hover:scale-110\">\n        <span class=\"sr-only\">Close cart</span>\n\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n        </svg>\n      </button>\n\n      <div class=\"mt-4 space-y-6\">\n        <ul class=\"space-y-4\">\n          <li class=\"flex items-center gap-4\">\n            <img\n              src=\"https://images.unsplash.com/photo-1618354691373-d851c5c3a990?auto=format&fit=crop&q=80&w=1160\"\n              alt=\"\"\n              class=\"size-16 rounded-sm object-cover\"\n            />\n\n            <div>\n              <h3 class=\"text-sm text-gray-900\">Basic Tee 6-Pack</h3>\n\n              <dl class=\"mt-0.5 space-y-px text-[10px] text-gray-600\">\n                <div>\n                  <dt class=\"inline\">Size:</dt>\n                  <dd class=\"inline\">XXS</dd>\n                </div>\n\n                <div>\n                  <dt class=\"inline\">Color:</dt>\n                  <dd class=\"inline\">White</dd>\n                </div>\n              </dl>\n            </div>\n          </li>\n\n          <li class=\"flex items-center gap-4\">\n            <img\n              src=\"https://images.unsplash.com/photo-1618354691373-d851c5c3a990?auto=format&fit=crop&q=80&w=1160\"\n              alt=\"\"\n              class=\"size-16 rounded-sm object-cover\"\n            />\n\n            <div>\n              <h3 class=\"text-sm text-gray-900\">Basic Tee 6-Pack</h3>\n\n              <dl class=\"mt-0.5 space-y-px text-[10px] text-gray-600\">\n                <div>\n                  <dt class=\"inline\">Size:</dt>\n                  <dd class=\"inline\">XXS</dd>\n                </div>\n\n                <div>\n                  <dt class=\"inline\">Color:</dt>\n                  <dd class=\"inline\">White</dd>\n                </div>\n              </dl>\n            </div>\n          </li>\n\n          <li class=\"flex items-center gap-4\">\n            <img\n              src=\"https://images.unsplash.com/photo-1618354691373-d851c5c3a990?auto=format&fit=crop&q=80&w=1160\"\n              alt=\"\"\n              class=\"size-16 rounded-sm object-cover\"\n            />\n\n            <div>\n              <h3 class=\"text-sm text-gray-900\">Basic Tee 6-Pack</h3>\n\n              <dl class=\"mt-0.5 space-y-px text-[10px] text-gray-600\">\n                <div>\n                  <dt class=\"inline\">Size:</dt>\n                  <dd class=\"inline\">XXS</dd>\n                </div>\n\n                <div>\n                  <dt class=\"inline\">Color:</dt>\n                  <dd class=\"inline\">White</dd>\n                </div>\n              </dl>\n            </div>\n          </li>\n        </ul>\n\n        <div class=\"space-y-4 text-center\">\n          <a\n            href=\"#\"\n            class=\"block rounded-sm border border-gray-600 px-5 py-3 text-sm text-gray-600 transition hover:ring-1 hover:ring-gray-400\"\n          >\n            View my cart (2)\n          </a>\n\n          <a\n            href=\"#\"\n            class=\"block rounded-sm bg-gray-700 px-5 py-3 text-sm text-gray-100 transition hover:bg-gray-600\"\n          >\n            Checkout\n          </a>\n\n          <a\n            href=\"#\"\n            class=\"inline-block text-sm text-gray-500 underline underline-offset-4 transition hover:text-gray-600\"\n          >\n            Continue shopping\n          </a>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/carts/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-end p-6\">\n    <div\n      class=\"relative w-screen max-w-sm border border-gray-600 bg-gray-100 px-4 py-8 sm:px-6 lg:px-8\"\n      aria-modal=\"true\"\n      role=\"dialog\"\n      tabindex=\"-1\"\n    >\n      <button class=\"absolute end-4 top-4 text-gray-600 transition hover:scale-110\">\n        <span class=\"sr-only\">Close cart</span>\n\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-5\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n        </svg>\n      </button>\n\n      <div class=\"mt-4 space-y-6\">\n        <ul class=\"space-y-4\">\n          <li class=\"flex items-center gap-4\">\n            <img\n              src=\"https://images.unsplash.com/photo-1618354691373-d851c5c3a990?auto=format&fit=crop&q=80&w=1160\"\n              alt=\"\"\n              class=\"size-16 rounded-sm object-cover\"\n            />\n\n            <div>\n              <h3 class=\"text-sm text-gray-900\">Basic Tee 6-Pack</h3>\n\n              <dl class=\"mt-0.5 space-y-px text-[10px] text-gray-600\">\n                <div>\n                  <dt class=\"inline\">Size:</dt>\n                  <dd class=\"inline\">XXS</dd>\n                </div>\n\n                <div>\n                  <dt class=\"inline\">Color:</dt>\n                  <dd class=\"inline\">White</dd>\n                </div>\n              </dl>\n            </div>\n\n            <div class=\"flex flex-1 items-center justify-end gap-2\">\n              <form>\n                <label for=\"Line1Qty\" class=\"sr-only\"> Quantity </label>\n\n                <input\n                  type=\"number\"\n                  min=\"1\"\n                  value=\"1\"\n                  id=\"Line1Qty\"\n                  class=\"h-8 w-12 rounded-sm border-gray-200 bg-gray-50 p-0 text-center text-xs text-gray-600 [-moz-appearance:_textfield] focus:outline-hidden [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n                />\n              </form>\n\n              <button class=\"text-gray-600 transition hover:text-red-600\">\n                <span class=\"sr-only\">Remove item</span>\n\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-4\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0\"\n                  />\n                </svg>\n              </button>\n            </div>\n          </li>\n\n          <li class=\"flex items-center gap-4\">\n            <img\n              src=\"https://images.unsplash.com/photo-1618354691373-d851c5c3a990?auto=format&fit=crop&q=80&w=1160\"\n              alt=\"\"\n              class=\"size-16 rounded-sm object-cover\"\n            />\n\n            <div>\n              <h3 class=\"text-sm text-gray-900\">Basic Tee 6-Pack</h3>\n\n              <dl class=\"mt-0.5 space-y-px text-[10px] text-gray-600\">\n                <div>\n                  <dt class=\"inline\">Size:</dt>\n                  <dd class=\"inline\">XXS</dd>\n                </div>\n\n                <div>\n                  <dt class=\"inline\">Color:</dt>\n                  <dd class=\"inline\">White</dd>\n                </div>\n              </dl>\n            </div>\n\n            <div class=\"flex flex-1 items-center justify-end gap-2\">\n              <form>\n                <label for=\"Line2Qty\" class=\"sr-only\"> Quantity </label>\n\n                <input\n                  type=\"number\"\n                  min=\"1\"\n                  value=\"1\"\n                  id=\"Line2Qty\"\n                  class=\"h-8 w-12 rounded-sm border-gray-200 bg-gray-50 p-0 text-center text-xs text-gray-600 [-moz-appearance:_textfield] focus:outline-hidden [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n                />\n              </form>\n\n              <button class=\"text-gray-600 transition hover:text-red-600\">\n                <span class=\"sr-only\">Remove item</span>\n\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-4\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0\"\n                  />\n                </svg>\n              </button>\n            </div>\n          </li>\n\n          <li class=\"flex items-center gap-4\">\n            <img\n              src=\"https://images.unsplash.com/photo-1618354691373-d851c5c3a990?auto=format&fit=crop&q=80&w=1160\"\n              alt=\"\"\n              class=\"size-16 rounded-sm object-cover\"\n            />\n\n            <div>\n              <h3 class=\"text-sm text-gray-900\">Basic Tee 6-Pack</h3>\n\n              <dl class=\"mt-0.5 space-y-px text-[10px] text-gray-600\">\n                <div>\n                  <dt class=\"inline\">Size:</dt>\n                  <dd class=\"inline\">XXS</dd>\n                </div>\n\n                <div>\n                  <dt class=\"inline\">Color:</dt>\n                  <dd class=\"inline\">White</dd>\n                </div>\n              </dl>\n            </div>\n\n            <div class=\"flex flex-1 items-center justify-end gap-2\">\n              <form>\n                <label for=\"Line3Qty\" class=\"sr-only\"> Quantity </label>\n\n                <input\n                  type=\"number\"\n                  min=\"1\"\n                  value=\"1\"\n                  id=\"Line3Qty\"\n                  class=\"h-8 w-12 rounded-sm border-gray-200 bg-gray-50 p-0 text-center text-xs text-gray-600 [-moz-appearance:_textfield] focus:outline-hidden [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n                />\n              </form>\n\n              <button class=\"text-gray-600 transition hover:text-red-600\">\n                <span class=\"sr-only\">Remove item</span>\n\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-4\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0\"\n                  />\n                </svg>\n              </button>\n            </div>\n          </li>\n        </ul>\n\n        <div class=\"space-y-4 text-center\">\n          <a\n            href=\"#\"\n            class=\"block rounded-sm border border-gray-600 px-5 py-3 text-sm text-gray-600 transition hover:ring-1 hover:ring-gray-400\"\n          >\n            View my cart (2)\n          </a>\n\n          <a\n            href=\"#\"\n            class=\"block rounded-sm bg-gray-700 px-5 py-3 text-sm text-gray-100 transition hover:bg-gray-600\"\n          >\n            Checkout\n          </a>\n\n          <a\n            href=\"#\"\n            class=\"inline-block text-sm text-gray-500 underline underline-offset-4 transition hover:text-gray-600\"\n          >\n            Continue shopping\n          </a>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/carts/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section>\n      <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8\">\n        <div class=\"mx-auto max-w-3xl\">\n          <header class=\"text-center\">\n            <h1 class=\"text-xl font-bold text-gray-900 sm:text-3xl\">Your Cart</h1>\n          </header>\n\n          <div class=\"mt-8\">\n            <ul class=\"space-y-4\">\n              <li class=\"flex items-center gap-4\">\n                <img\n                  src=\"https://images.unsplash.com/photo-1618354691373-d851c5c3a990?auto=format&fit=crop&q=80&w=1160\"\n                  alt=\"\"\n                  class=\"size-16 rounded-sm object-cover\"\n                />\n\n                <div>\n                  <h3 class=\"text-sm text-gray-900\">Basic Tee 6-Pack</h3>\n\n                  <dl class=\"mt-0.5 space-y-px text-[10px] text-gray-600\">\n                    <div>\n                      <dt class=\"inline\">Size:</dt>\n                      <dd class=\"inline\">XXS</dd>\n                    </div>\n\n                    <div>\n                      <dt class=\"inline\">Color:</dt>\n                      <dd class=\"inline\">White</dd>\n                    </div>\n                  </dl>\n                </div>\n\n                <div class=\"flex flex-1 items-center justify-end gap-2\">\n                  <form>\n                    <label for=\"Line1Qty\" class=\"sr-only\"> Quantity </label>\n\n                    <input\n                      type=\"number\"\n                      min=\"1\"\n                      value=\"1\"\n                      id=\"Line1Qty\"\n                      class=\"h-8 w-12 rounded-sm border-gray-200 bg-gray-50 p-0 text-center text-xs text-gray-600 [-moz-appearance:_textfield] focus:outline-hidden [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n                    />\n                  </form>\n\n                  <button class=\"text-gray-600 transition hover:text-red-600\">\n                    <span class=\"sr-only\">Remove item</span>\n\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"size-4\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </li>\n\n              <li class=\"flex items-center gap-4\">\n                <img\n                  src=\"https://images.unsplash.com/photo-1618354691373-d851c5c3a990?auto=format&fit=crop&q=80&w=1160\"\n                  alt=\"\"\n                  class=\"size-16 rounded-sm object-cover\"\n                />\n\n                <div>\n                  <h3 class=\"text-sm text-gray-900\">Basic Tee 6-Pack</h3>\n\n                  <dl class=\"mt-0.5 space-y-px text-[10px] text-gray-600\">\n                    <div>\n                      <dt class=\"inline\">Size:</dt>\n                      <dd class=\"inline\">XXS</dd>\n                    </div>\n\n                    <div>\n                      <dt class=\"inline\">Color:</dt>\n                      <dd class=\"inline\">White</dd>\n                    </div>\n                  </dl>\n                </div>\n\n                <div class=\"flex flex-1 items-center justify-end gap-2\">\n                  <form>\n                    <label for=\"Line2Qty\" class=\"sr-only\"> Quantity </label>\n\n                    <input\n                      type=\"number\"\n                      min=\"1\"\n                      value=\"1\"\n                      id=\"Line2Qty\"\n                      class=\"h-8 w-12 rounded-sm border-gray-200 bg-gray-50 p-0 text-center text-xs text-gray-600 [-moz-appearance:_textfield] focus:outline-hidden [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n                    />\n                  </form>\n\n                  <button class=\"text-gray-600 transition hover:text-red-600\">\n                    <span class=\"sr-only\">Remove item</span>\n\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"size-4\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </li>\n\n              <li class=\"flex items-center gap-4\">\n                <img\n                  src=\"https://images.unsplash.com/photo-1618354691373-d851c5c3a990?auto=format&fit=crop&q=80&w=1160\"\n                  alt=\"\"\n                  class=\"size-16 rounded-sm object-cover\"\n                />\n\n                <div>\n                  <h3 class=\"text-sm text-gray-900\">Basic Tee 6-Pack</h3>\n\n                  <dl class=\"mt-0.5 space-y-px text-[10px] text-gray-600\">\n                    <div>\n                      <dt class=\"inline\">Size:</dt>\n                      <dd class=\"inline\">XXS</dd>\n                    </div>\n\n                    <div>\n                      <dt class=\"inline\">Color:</dt>\n                      <dd class=\"inline\">White</dd>\n                    </div>\n                  </dl>\n                </div>\n\n                <div class=\"flex flex-1 items-center justify-end gap-2\">\n                  <form>\n                    <label for=\"Line3Qty\" class=\"sr-only\"> Quantity </label>\n\n                    <input\n                      type=\"number\"\n                      min=\"1\"\n                      value=\"1\"\n                      id=\"Line3Qty\"\n                      class=\"h-8 w-12 rounded-sm border-gray-200 bg-gray-50 p-0 text-center text-xs text-gray-600 [-moz-appearance:_textfield] focus:outline-hidden [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n                    />\n                  </form>\n\n                  <button class=\"text-gray-600 transition hover:text-red-600\">\n                    <span class=\"sr-only\">Remove item</span>\n\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"size-4\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </li>\n            </ul>\n\n            <div class=\"mt-8 flex justify-end border-t border-gray-100 pt-8\">\n              <div class=\"w-screen max-w-lg space-y-4\">\n                <dl class=\"space-y-0.5 text-sm text-gray-700\">\n                  <div class=\"flex justify-between\">\n                    <dt>Subtotal</dt>\n                    <dd>£250</dd>\n                  </div>\n\n                  <div class=\"flex justify-between\">\n                    <dt>VAT</dt>\n                    <dd>£25</dd>\n                  </div>\n\n                  <div class=\"flex justify-between\">\n                    <dt>Discount</dt>\n                    <dd>-£20</dd>\n                  </div>\n\n                  <div class=\"flex justify-between font-semibold\">\n                    <dt>Total</dt>\n                    <dd>£200</dd>\n                  </div>\n                </dl>\n\n                <div class=\"flex justify-end\">\n                  <span\n                    class=\"inline-flex items-center justify-center rounded-full bg-indigo-100 px-2.5 py-0.5 text-indigo-700\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"-ms-1 me-1.5 size-4\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z\"\n                      />\n                    </svg>\n\n                    <p class=\"text-xs whitespace-nowrap\">2 Discounts Applied</p>\n                  </span>\n                </div>\n\n                <div class=\"flex justify-end\">\n                  <a\n                    href=\"#\"\n                    class=\"block rounded-sm bg-gray-700 px-5 py-3 text-sm text-gray-100 transition hover:bg-gray-600\"\n                  >\n                    Checkout\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/contact-forms/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <form\n      action=\"#\"\n      class=\"mx-auto max-w-md space-y-4 rounded-lg border border-gray-300 bg-gray-100 p-6 dark:border-gray-600 dark:bg-gray-800\"\n    >\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"name\">\n          Name\n        </label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          id=\"name\"\n          type=\"text\"\n          placeholder=\"Your name\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"email\">\n          Email\n        </label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          id=\"email\"\n          type=\"email\"\n          placeholder=\"Your email\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"message\">\n          Message\n        </label>\n\n        <textarea\n          class=\"mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          id=\"message\"\n          rows=\"4\"\n          placeholder=\"Your message\"\n        ></textarea>\n      </div>\n\n      <button\n        class=\"block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600 dark:hover:bg-indigo-700 dark:hover:text-white\"\n        type=\"submit\"\n      >\n        Send Message\n      </button>\n    </form>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/contact-forms/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <form\n      action=\"#\"\n      class=\"mx-auto max-w-md space-y-4 rounded-lg border border-gray-300 bg-gray-100 p-6\"\n    >\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900\" for=\"name\">Name</label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n          id=\"name\"\n          type=\"text\"\n          placeholder=\"Your name\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900\" for=\"email\">Email</label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n          id=\"email\"\n          type=\"email\"\n          placeholder=\"Your email\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900\" for=\"message\">Message</label>\n\n        <textarea\n          class=\"mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n          id=\"message\"\n          rows=\"4\"\n          placeholder=\"Your message\"\n        ></textarea>\n      </div>\n\n      <button\n        class=\"block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600\"\n        type=\"submit\"\n      >\n        Send Message\n      </button>\n    </form>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/contact-forms/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <form\n      action=\"#\"\n      class=\"mx-auto max-w-md space-y-4 rounded-lg border border-gray-300 bg-gray-100 p-6 dark:border-gray-600 dark:bg-gray-800\"\n    >\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"name\">\n          Name\n        </label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          id=\"name\"\n          type=\"text\"\n          placeholder=\"Your name\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"email\">\n          Email\n        </label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          id=\"email\"\n          type=\"email\"\n          placeholder=\"Your email\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"subject\">\n          Subject\n        </label>\n\n        <select\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          id=\"subject\"\n        >\n          <option value=\"\">Select a subject</option>\n          <option value=\"general-inquiry\">General Inquiry</option>\n          <option value=\"support\">Support</option>\n          <option value=\"feedback\">Feedback</option>\n        </select>\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"priority\">\n          Priority\n        </label>\n\n        <select\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          id=\"priority\"\n        >\n          <option value=\"\">Select a priority</option>\n          <option value=\"low\">Low</option>\n          <option value=\"medium\">Medium</option>\n          <option value=\"high\">High</option>\n        </select>\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"message\">\n          Message\n        </label>\n\n        <textarea\n          class=\"mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          id=\"message\"\n          rows=\"4\"\n          placeholder=\"Your message\"\n        ></textarea>\n      </div>\n\n      <button\n        class=\"block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600 dark:hover:bg-indigo-700 dark:hover:text-white\"\n        type=\"submit\"\n      >\n        Send Message\n      </button>\n    </form>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/contact-forms/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <form\n      action=\"#\"\n      class=\"mx-auto max-w-md space-y-4 rounded-lg border border-gray-300 bg-gray-100 p-6\"\n    >\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900\" for=\"name\">Name</label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n          id=\"name\"\n          type=\"text\"\n          placeholder=\"Your name\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900\" for=\"email\">Email</label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n          id=\"email\"\n          type=\"email\"\n          placeholder=\"Your email\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900\" for=\"subject\">Subject</label>\n\n        <select\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n          id=\"subject\"\n        >\n          <option value=\"\">Select a subject</option>\n          <option value=\"general-inquiry\">General Inquiry</option>\n          <option value=\"support\">Support</option>\n          <option value=\"feedback\">Feedback</option>\n        </select>\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900\" for=\"priority\">Priority</label>\n\n        <select\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n          id=\"priority\"\n        >\n          <option value=\"\">Select a priority</option>\n          <option value=\"low\">Low</option>\n          <option value=\"medium\">Medium</option>\n          <option value=\"high\">High</option>\n        </select>\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900\" for=\"message\">Message</label>\n\n        <textarea\n          class=\"mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n          id=\"message\"\n          rows=\"4\"\n          placeholder=\"Your message\"\n        ></textarea>\n      </div>\n\n      <button\n        class=\"block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600\"\n        type=\"submit\"\n      >\n        Send Message\n      </button>\n    </form>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/contact-forms/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <form\n      action=\"#\"\n      class=\"mx-auto max-w-md space-y-4 rounded-lg border border-gray-300 bg-gray-100 p-6 dark:border-gray-600 dark:bg-gray-800\"\n    >\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"name\">\n          Name\n        </label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          id=\"name\"\n          type=\"text\"\n          placeholder=\"Your name\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"email\">\n          Email\n        </label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          id=\"email\"\n          type=\"email\"\n          placeholder=\"Your email\"\n        />\n      </div>\n\n      <fieldset>\n        <legend class=\"block text-sm font-medium text-gray-900 dark:text-white\">Inquiry</legend>\n\n        <div class=\"mt-2 space-y-2\">\n          <div class=\"flex items-center gap-2\">\n            <input\n              class=\"size-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n              id=\"general-inquiry\"\n              type=\"checkbox\"\n              name=\"inquiry-type\"\n              value=\"general-inquiry\"\n            />\n\n            <label class=\"block text-sm text-gray-900 dark:text-white\" for=\"general-inquiry\">\n              General Inquiry\n            </label>\n          </div>\n\n          <div class=\"flex items-center gap-2\">\n            <input\n              class=\"size-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n              id=\"support\"\n              type=\"checkbox\"\n              name=\"inquiry-type\"\n              value=\"support\"\n            />\n\n            <label class=\"block text-sm text-gray-900 dark:text-white\" for=\"support\">Support</label>\n          </div>\n\n          <div class=\"flex items-center gap-2\">\n            <input\n              class=\"size-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n              id=\"feedback\"\n              type=\"checkbox\"\n              name=\"inquiry-type\"\n              value=\"feedback\"\n            />\n\n            <label class=\"block text-sm text-gray-900 dark:text-white\" for=\"feedback\"\n              >Feedback</label\n            >\n          </div>\n\n          <div class=\"flex items-center gap-2\">\n            <input\n              class=\"size-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n              id=\"other\"\n              type=\"checkbox\"\n              name=\"inquiry-type\"\n              value=\"other\"\n            />\n\n            <label class=\"block text-sm text-gray-900 dark:text-white\" for=\"other\">Other</label>\n          </div>\n        </div>\n      </fieldset>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"message\">\n          Message\n        </label>\n\n        <textarea\n          class=\"mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          id=\"message\"\n          rows=\"4\"\n          placeholder=\"Your message\"\n        ></textarea>\n      </div>\n\n      <button\n        class=\"block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600 dark:hover:bg-indigo-700 dark:hover:text-white\"\n        type=\"submit\"\n      >\n        Send Message\n      </button>\n    </form>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/contact-forms/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <form\n      action=\"#\"\n      class=\"mx-auto max-w-md space-y-4 rounded-lg border border-gray-300 bg-gray-100 p-6\"\n    >\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900\" for=\"name\">Name</label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n          id=\"name\"\n          type=\"text\"\n          placeholder=\"Your name\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900\" for=\"email\">Email</label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n          id=\"email\"\n          type=\"email\"\n          placeholder=\"Your email\"\n        />\n      </div>\n\n      <fieldset>\n        <legend class=\"block text-sm font-medium text-gray-900\">Inquiry</legend>\n\n        <div class=\"mt-2 space-y-2\">\n          <div class=\"flex items-center gap-2\">\n            <input\n              class=\"size-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500\"\n              id=\"general-inquiry\"\n              type=\"checkbox\"\n              name=\"inquiry-type\"\n              value=\"general-inquiry\"\n            />\n\n            <label class=\"block text-sm text-gray-900\" for=\"general-inquiry\">General Inquiry</label>\n          </div>\n\n          <div class=\"flex items-center gap-2\">\n            <input\n              class=\"size-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500\"\n              id=\"support\"\n              type=\"checkbox\"\n              name=\"inquiry-type\"\n              value=\"support\"\n            />\n\n            <label class=\"block text-sm text-gray-900\" for=\"support\">Support</label>\n          </div>\n\n          <div class=\"flex items-center gap-2\">\n            <input\n              class=\"size-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500\"\n              id=\"feedback\"\n              type=\"checkbox\"\n              name=\"inquiry-type\"\n              value=\"feedback\"\n            />\n\n            <label class=\"block text-sm text-gray-900\" for=\"feedback\">Feedback</label>\n          </div>\n\n          <div class=\"flex items-center gap-2\">\n            <input\n              class=\"size-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500\"\n              id=\"other\"\n              type=\"checkbox\"\n              name=\"inquiry-type\"\n              value=\"other\"\n            />\n\n            <label class=\"block text-sm text-gray-900\" for=\"other\">Other</label>\n          </div>\n        </div>\n      </fieldset>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900\" for=\"message\">Message</label>\n\n        <textarea\n          class=\"mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n          id=\"message\"\n          rows=\"4\"\n          placeholder=\"Your message\"\n        ></textarea>\n      </div>\n\n      <button\n        class=\"block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600\"\n        type=\"submit\"\n      >\n        Send Message\n      </button>\n    </form>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/contact-forms/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <form\n      action=\"#\"\n      class=\"mx-auto grid max-w-lg grid-cols-1 gap-4 rounded-lg border border-gray-300 bg-gray-100 p-6 sm:grid-cols-2 dark:border-gray-600 dark:bg-gray-800\"\n    >\n      <div class=\"md:col-span-2\">\n        <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"name\">\n          Name\n        </label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          id=\"name\"\n          type=\"text\"\n          placeholder=\"Your name\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"email\">\n          Email\n        </label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          id=\"email\"\n          type=\"email\"\n          placeholder=\"Your email\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"phone\">\n          Phone\n        </label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          id=\"phone\"\n          type=\"tel\"\n          placeholder=\"Your phone\"\n        />\n      </div>\n\n      <div class=\"md:col-span-2\">\n        <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"message\">\n          Message\n        </label>\n\n        <textarea\n          class=\"mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n          id=\"message\"\n          rows=\"4\"\n          placeholder=\"Your message\"\n        ></textarea>\n      </div>\n\n      <div class=\"md:col-span-2\">\n        <button\n          class=\"block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600 dark:hover:bg-indigo-700 dark:hover:text-white\"\n          type=\"submit\"\n        >\n          Send Message\n        </button>\n      </div>\n    </form>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/contact-forms/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"p-6\">\n    <form\n      action=\"#\"\n      class=\"mx-auto grid max-w-lg grid-cols-1 gap-4 rounded-lg border border-gray-300 bg-gray-100 p-6 sm:grid-cols-2\"\n    >\n      <div class=\"md:col-span-2\">\n        <label class=\"block text-sm font-medium text-gray-900\" for=\"name\">Name</label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n          id=\"name\"\n          type=\"text\"\n          placeholder=\"Your name\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900\" for=\"email\">Email</label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n          id=\"email\"\n          type=\"email\"\n          placeholder=\"Your email\"\n        />\n      </div>\n\n      <div>\n        <label class=\"block text-sm font-medium text-gray-900\" for=\"phone\">Phone</label>\n\n        <input\n          class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n          id=\"phone\"\n          type=\"tel\"\n          placeholder=\"Your phone\"\n        />\n      </div>\n\n      <div class=\"md:col-span-2\">\n        <label class=\"block text-sm font-medium text-gray-900\" for=\"message\">Message</label>\n\n        <textarea\n          class=\"mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n          id=\"message\"\n          rows=\"4\"\n          placeholder=\"Your message\"\n        ></textarea>\n      </div>\n\n      <div class=\"md:col-span-2\">\n        <button\n          class=\"block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600\"\n          type=\"submit\"\n        >\n          Send Message\n        </button>\n      </div>\n    </form>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/contact-forms/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-1 gap-8 md:grid-cols-2\">\n        <div class=\"md:py-4\">\n          <h2 class=\"text-2xl font-bold text-gray-900 sm:text-3xl dark:text-white\">Get in touch</h2>\n\n          <p class=\"mt-4 text-pretty text-gray-700 dark:text-gray-200\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed voluptas delectus alias\n            magni velit! Dicta corrupti dignissimos dolor consequatur illum tempore consectetur hic\n            a cupiditate sunt quam, earum nisi aperiam.\n          </p>\n\n          <dl class=\"mt-6 space-y-3\">\n            <div>\n              <dt class=\"sr-only\">Phone number</dt>\n\n              <dd\n                class=\"grid grid-cols-[24px_1fr] items-center gap-2 text-gray-700 dark:text-gray-200\"\n              >\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3\"\n                  />\n                </svg>\n\n                <span class=\"font-medium\">+1 (555) 123-4567</span>\n              </dd>\n            </div>\n\n            <div>\n              <dt class=\"sr-only\">Email</dt>\n\n              <dd\n                class=\"grid grid-cols-[24px_1fr] items-center gap-2 text-gray-700 dark:text-gray-200\"\n              >\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75\"\n                  />\n                </svg>\n\n                <span class=\"font-medium\">info@example.com</span>\n              </dd>\n            </div>\n\n            <div>\n              <dt class=\"sr-only\">Location</dt>\n\n              <dd\n                class=\"grid grid-cols-[24px_1fr] items-center gap-2 text-gray-700 dark:text-gray-200\"\n              >\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25\"\n                  />\n                </svg>\n\n                <span class=\"font-medium\">123 Main St, Anytown, USA</span>\n              </dd>\n            </div>\n          </dl>\n        </div>\n\n        <form\n          action=\"#\"\n          class=\"space-y-4 rounded-lg border border-gray-300 bg-gray-100 p-6 dark:border-gray-600 dark:bg-gray-800\"\n        >\n          <div>\n            <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"name\">\n              Name\n            </label>\n\n            <input\n              class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n              id=\"name\"\n              type=\"text\"\n              placeholder=\"Your name\"\n            />\n          </div>\n\n          <div>\n            <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"email\">\n              Email\n            </label>\n\n            <input\n              class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"Your email\"\n            />\n          </div>\n\n          <div>\n            <label class=\"block text-sm font-medium text-gray-900 dark:text-white\" for=\"message\">\n              Message\n            </label>\n\n            <textarea\n              class=\"mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n              id=\"message\"\n              rows=\"4\"\n              placeholder=\"Your message\"\n            ></textarea>\n          </div>\n\n          <button\n            class=\"block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600 dark:hover:bg-indigo-700 dark:hover:text-white\"\n            type=\"submit\"\n          >\n            Send Message\n          </button>\n        </form>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/contact-forms/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-1 gap-8 md:grid-cols-2\">\n        <div class=\"md:py-4\">\n          <h2 class=\"text-2xl font-bold text-gray-900 sm:text-3xl\">Get in touch</h2>\n\n          <p class=\"mt-4 text-pretty text-gray-700\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed voluptas delectus alias\n            magni velit! Dicta corrupti dignissimos dolor consequatur illum tempore consectetur hic\n            a cupiditate sunt quam, earum nisi aperiam.\n          </p>\n\n          <dl class=\"mt-6 space-y-3\">\n            <div>\n              <dt class=\"sr-only\">Phone number</dt>\n\n              <dd class=\"grid grid-cols-[24px_1fr] items-center gap-2 text-gray-700\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3\"\n                  />\n                </svg>\n\n                <span class=\"font-medium\">+1 (555) 123-4567</span>\n              </dd>\n            </div>\n\n            <div>\n              <dt class=\"sr-only\">Email</dt>\n\n              <dd class=\"grid grid-cols-[24px_1fr] items-center gap-2 text-gray-700\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75\"\n                  />\n                </svg>\n\n                <span class=\"font-medium\">info@example.com</span>\n              </dd>\n            </div>\n\n            <div>\n              <dt class=\"sr-only\">Location</dt>\n\n              <dd class=\"grid grid-cols-[24px_1fr] items-center gap-2 text-gray-700\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25\"\n                  />\n                </svg>\n\n                <span class=\"font-medium\">123 Main St, Anytown, USA</span>\n              </dd>\n            </div>\n          </dl>\n        </div>\n\n        <form action=\"#\" class=\"space-y-4 rounded-lg border border-gray-300 bg-gray-100 p-6\">\n          <div>\n            <label class=\"block text-sm font-medium text-gray-900\" for=\"name\">Name</label>\n\n            <input\n              class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n              id=\"name\"\n              type=\"text\"\n              placeholder=\"Your name\"\n            />\n          </div>\n\n          <div>\n            <label class=\"block text-sm font-medium text-gray-900\" for=\"email\">Email</label>\n\n            <input\n              class=\"mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"Your email\"\n            />\n          </div>\n\n          <div>\n            <label class=\"block text-sm font-medium text-gray-900\" for=\"message\">Message</label>\n\n            <textarea\n              class=\"mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none\"\n              id=\"message\"\n              rows=\"4\"\n              placeholder=\"Your message\"\n            ></textarea>\n          </div>\n\n          <button\n            class=\"block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600\"\n            type=\"submit\"\n          >\n            Send Message\n          </button>\n        </form>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/ctas/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section class=\"overflow-hidden bg-gray-50 sm:grid sm:grid-cols-2 dark:bg-gray-900\">\n      <div class=\"p-8 md:p-12 lg:px-16 lg:py-24\">\n        <div class=\"mx-auto max-w-xl text-center ltr:sm:text-left rtl:sm:text-right\">\n          <h2 class=\"text-2xl font-bold text-gray-900 md:text-3xl dark:text-white\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit\n          </h2>\n\n          <p class=\"hidden text-gray-500 md:mt-4 md:block dark:text-gray-300\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus etiam\n            sed. Quam a scelerisque amet ullamcorper eu enim et fermentum, augue. Aliquet amet\n            volutpat quisque ut interdum tincidunt duis.\n          </p>\n\n          <div class=\"mt-4 md:mt-8\">\n            <a\n              href=\"#\"\n              class=\"inline-block rounded-sm bg-emerald-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-emerald-700 focus:ring-2 focus:ring-yellow-400 focus:outline-hidden\"\n            >\n              Get Started Today\n            </a>\n          </div>\n        </div>\n      </div>\n\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1464582883107-8adf2dca8a9f?auto=format&fit=crop&q=80&w=1160\"\n        class=\"h-56 w-full object-cover sm:h-full\"\n      />\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/ctas/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section class=\"overflow-hidden bg-gray-50 sm:grid sm:grid-cols-2\">\n      <div class=\"p-8 md:p-12 lg:px-16 lg:py-24\">\n        <div class=\"mx-auto max-w-xl text-center ltr:sm:text-left rtl:sm:text-right\">\n          <h2 class=\"text-2xl font-bold text-gray-900 md:text-3xl\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit\n          </h2>\n\n          <p class=\"hidden text-gray-500 md:mt-4 md:block\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus etiam\n            sed. Quam a scelerisque amet ullamcorper eu enim et fermentum, augue. Aliquet amet\n            volutpat quisque ut interdum tincidunt duis.\n          </p>\n\n          <div class=\"mt-4 md:mt-8\">\n            <a\n              href=\"#\"\n              class=\"inline-block rounded-sm bg-emerald-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-emerald-700 focus:ring-2 focus:ring-yellow-400 focus:outline-hidden\"\n            >\n              Get Started Today\n            </a>\n          </div>\n        </div>\n      </div>\n\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1464582883107-8adf2dca8a9f?auto=format&fit=crop&q=80&w=1160\"\n        class=\"h-56 w-full object-cover sm:h-full\"\n      />\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/ctas/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section class=\"bg-gray-50 dark:bg-gray-900\">\n      <div class=\"p-8 md:p-12 lg:px-16 lg:py-24\">\n        <div class=\"mx-auto max-w-lg text-center\">\n          <h2 class=\"text-2xl font-bold text-gray-900 md:text-3xl dark:text-white\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit\n          </h2>\n\n          <p class=\"hidden text-gray-500 sm:mt-4 sm:block dark:text-gray-400\">\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae dolor officia blanditiis\n            repellat in, vero, aperiam porro ipsum laboriosam consequuntur exercitationem incidunt\n            tempora nisi?\n          </p>\n        </div>\n\n        <div class=\"mx-auto mt-8 max-w-xl\">\n          <form action=\"#\" class=\"sm:flex sm:gap-4\">\n            <div class=\"sm:flex-1\">\n              <label for=\"email\" class=\"sr-only\">Email</label>\n\n              <input\n                type=\"email\"\n                placeholder=\"Email address\"\n                class=\"w-full rounded-md border-gray-200 bg-white p-3 shadow-xs transition focus:border-white focus:ring-2 focus:ring-yellow-400 focus:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:text-white\"\n              />\n            </div>\n\n            <button\n              type=\"submit\"\n              class=\"group mt-4 flex w-full items-center justify-center gap-2 rounded-md bg-rose-600 px-5 py-3 text-white transition focus:ring-2 focus:ring-yellow-400 focus:outline-hidden sm:mt-0 sm:w-auto\"\n            >\n              <span class=\"text-sm font-medium\"> Sign Up </span>\n\n              <svg\n                class=\"size-5 shadow-sm rtl:rotate-180\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M17 8l4 4m0 0l-4 4m4-4H3\"\n                />\n              </svg>\n            </button>\n          </form>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/ctas/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section class=\"bg-gray-50\">\n      <div class=\"p-8 md:p-12 lg:px-16 lg:py-24\">\n        <div class=\"mx-auto max-w-lg text-center\">\n          <h2 class=\"text-2xl font-bold text-gray-900 md:text-3xl\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit\n          </h2>\n\n          <p class=\"hidden text-gray-500 sm:mt-4 sm:block\">\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae dolor officia blanditiis\n            repellat in, vero, aperiam porro ipsum laboriosam consequuntur exercitationem incidunt\n            tempora nisi?\n          </p>\n        </div>\n\n        <div class=\"mx-auto mt-8 max-w-xl\">\n          <form action=\"#\" class=\"sm:flex sm:gap-4\">\n            <div class=\"sm:flex-1\">\n              <label for=\"email\" class=\"sr-only\">Email</label>\n\n              <input\n                type=\"email\"\n                placeholder=\"Email address\"\n                class=\"w-full rounded-md border-gray-200 bg-white p-3 text-gray-700 shadow-xs transition focus:border-white focus:ring-2 focus:ring-yellow-400 focus:outline-hidden\"\n              />\n            </div>\n\n            <button\n              type=\"submit\"\n              class=\"group mt-4 flex w-full items-center justify-center gap-2 rounded-md bg-rose-600 px-5 py-3 text-white transition focus:ring-2 focus:ring-yellow-400 focus:outline-hidden sm:mt-0 sm:w-auto\"\n            >\n              <span class=\"text-sm font-medium\"> Sign Up </span>\n\n              <svg\n                class=\"size-5 shadow-sm rtl:rotate-180\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M17 8l4 4m0 0l-4 4m4-4H3\"\n                />\n              </svg>\n            </button>\n          </form>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/ctas/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section\n      class=\"overflow-hidden bg-gray-50 sm:grid sm:grid-cols-2 sm:items-center dark:bg-gray-900\"\n    >\n      <div class=\"p-8 md:p-12 lg:px-16 lg:py-24\">\n        <div class=\"mx-auto max-w-xl text-center ltr:sm:text-left rtl:sm:text-right\">\n          <h2 class=\"text-2xl font-bold text-gray-900 md:text-3xl dark:text-white\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit\n          </h2>\n\n          <p class=\"hidden text-gray-500 md:mt-4 md:block dark:text-gray-400\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus etiam\n            sed. Quam a scelerisque amet ullamcorper eu enim et fermentum, augue. Aliquet amet\n            volutpat quisque ut interdum tincidunt duis.\n          </p>\n\n          <div class=\"mt-4 md:mt-8\">\n            <a\n              href=\"#\"\n              class=\"inline-block rounded-sm bg-emerald-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-emerald-700 focus:ring-2 focus:ring-yellow-400 focus:outline-hidden\"\n            >\n              Get Started Today\n            </a>\n          </div>\n        </div>\n      </div>\n\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1484959014842-cd1d967a39cf?auto=format&fit=crop&q=80&w=1160\"\n        class=\"h-full w-full object-cover sm:h-[calc(100%-2rem)] sm:self-end sm:rounded-ss-[30px] md:h-[calc(100%-4rem)] md:rounded-ss-[60px]\"\n      />\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/ctas/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section class=\"overflow-hidden bg-gray-50 sm:grid sm:grid-cols-2 sm:items-center\">\n      <div class=\"p-8 md:p-12 lg:px-16 lg:py-24\">\n        <div class=\"mx-auto max-w-xl text-center ltr:sm:text-left rtl:sm:text-right\">\n          <h2 class=\"text-2xl font-bold text-gray-900 md:text-3xl\">\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit\n          </h2>\n\n          <p class=\"hidden text-gray-500 md:mt-4 md:block\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus etiam\n            sed. Quam a scelerisque amet ullamcorper eu enim et fermentum, augue. Aliquet amet\n            volutpat quisque ut interdum tincidunt duis.\n          </p>\n\n          <div class=\"mt-4 md:mt-8\">\n            <a\n              href=\"#\"\n              class=\"inline-block rounded-sm bg-emerald-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-emerald-700 focus:ring-2 focus:ring-yellow-400 focus:outline-hidden\"\n            >\n              Get Started Today\n            </a>\n          </div>\n        </div>\n      </div>\n\n      <img\n        alt=\"\"\n        src=\"https://images.unsplash.com/photo-1484959014842-cd1d967a39cf?auto=format&fit=crop&q=80&w=1160\"\n        class=\"h-full w-full object-cover sm:h-[calc(100%-2rem)] sm:self-end sm:rounded-ss-[30px] md:h-[calc(100%-4rem)] md:rounded-ss-[60px]\"\n      />\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/ctas/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section>\n      <div class=\"mx-auto max-w-screen-2xl px-4 py-8 sm:px-6 lg:px-8\">\n        <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n          <div class=\"bg-blue-600 p-8 md:p-12 lg:px-16 lg:py-24\">\n            <div class=\"mx-auto max-w-xl text-center\">\n              <h2 class=\"text-2xl font-bold text-white md:text-3xl\">\n                Lorem, ipsum dolor sit amet consectetur adipisicing elit\n              </h2>\n\n              <p class=\"hidden text-white/90 sm:mt-4 sm:block\">\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus\n                etiam sed. Quam a scelerisque amet ullamcorper eu enim et fermentum, augue. Aliquet\n                amet volutpat quisque ut interdum tincidunt duis.\n              </p>\n\n              <div class=\"mt-4 md:mt-8\">\n                <a\n                  href=\"#\"\n                  class=\"inline-block rounded-sm border border-white bg-white px-12 py-3 text-sm font-medium text-blue-500 transition hover:bg-transparent hover:text-white focus:ring-2 focus:ring-yellow-400 focus:outline-hidden\"\n                >\n                  Get Started Today\n                </a>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"grid grid-cols-2 gap-4 md:grid-cols-1 lg:grid-cols-2\">\n            <img\n              alt=\"\"\n              src=\"https://images.unsplash.com/photo-1621274790572-7c32596bc67f?auto=format&fit=crop&q=80&w=1160\"\n              class=\"h-40 w-full object-cover sm:h-56 md:h-full\"\n            />\n\n            <img\n              alt=\"\"\n              src=\"https://images.unsplash.com/photo-1567168544813-cc03465b4fa8?auto=format&fit=crop&q=80&w=1160\"\n              class=\"h-40 w-full object-cover sm:h-56 md:h-full\"\n            />\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/empty-content/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400 dark:text-gray-500\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900 dark:text-white\">Hmm, nothing found</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700 dark:text-gray-200\">\n        We couldn't find what you were looking for. Try a different search term or explore our\n        popular categories.\n      </p>\n\n      <div class=\"mt-6 space-y-2\">\n        <a\n          href=\"#\"\n          class=\"block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700\"\n        >\n          Browse Popular Items\n        </a>\n\n        <a\n          href=\"#\"\n          class=\"block w-full rounded-lg border border-indigo-600 px-6 py-3 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50 dark:border-gray-800 dark:text-white dark:hover:bg-gray-800\"\n        >\n          Refine Search\n        </a>\n      </div>\n\n      <p class=\"mt-6 text-sm text-gray-700 dark:text-gray-200\">\n        Popular searches:\n        <a href=\"#\" class=\"text-indigo-600 hover:underline dark:text-indigo-300\">Trending</a>,\n        <a href=\"#\" class=\"text-indigo-600 hover:underline dark:text-indigo-300\">New</a>,\n        <a href=\"#\" class=\"text-indigo-600 hover:underline dark:text-indigo-300\">Best sellers</a>\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/empty-content/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900\">Hmm, nothing found</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700\">\n        We couldn't find what you were looking for. Try a different search term or explore our\n        popular categories.\n      </p>\n\n      <div class=\"mt-6 space-y-2\">\n        <a\n          href=\"#\"\n          class=\"block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700\"\n        >\n          Browse Popular Items\n        </a>\n\n        <a\n          href=\"#\"\n          class=\"block w-full rounded-lg border border-indigo-600 px-6 py-3 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50\"\n        >\n          Refine Search\n        </a>\n      </div>\n\n      <p class=\"mt-6 text-sm text-gray-700\">\n        Popular searches: <a href=\"#\" class=\"text-indigo-600 hover:underline\">Trending</a>,\n        <a href=\"#\" class=\"text-indigo-600 hover:underline\">New</a>,\n        <a href=\"#\" class=\"text-indigo-600 hover:underline\">Best sellers</a>\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/empty-content/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400 dark:text-gray-500\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900 dark:text-white\">Hmm, nothing found</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700 dark:text-gray-200\">\n        We couldn't find what you were looking for. Try a different search term or explore our\n        popular categories.\n      </p>\n\n      <div class=\"mt-6 space-y-2\">\n        <a\n          href=\"#\"\n          class=\"block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700\"\n        >\n          Browse Popular Items\n        </a>\n\n        <a\n          href=\"#\"\n          class=\"block w-full rounded-lg border border-indigo-600 px-6 py-3 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50 dark:border-gray-800 dark:text-white dark:hover:bg-gray-800\"\n        >\n          Refine Search\n        </a>\n      </div>\n\n      <p class=\"mt-6 flex flex-wrap justify-center gap-8 text-sm\">\n        <a href=\"#\" class=\"text-indigo-600 hover:underline dark:text-indigo-300\">Trending</a>\n        <a href=\"#\" class=\"text-indigo-600 hover:underline dark:text-indigo-300\">New</a>\n        <a href=\"#\" class=\"text-indigo-600 hover:underline dark:text-indigo-300\">Best sellers</a>\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/empty-content/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900\">Hmm, nothing found</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700\">\n        We couldn't find what you were looking for. Try a different search term or explore our\n        popular categories.\n      </p>\n\n      <div class=\"mt-6 space-y-2\">\n        <a\n          href=\"#\"\n          class=\"block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700\"\n        >\n          Browse Popular Items\n        </a>\n\n        <a\n          href=\"#\"\n          class=\"block w-full rounded-lg border border-indigo-600 px-6 py-3 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50\"\n        >\n          Refine Search\n        </a>\n      </div>\n\n      <p class=\"mt-6 flex flex-wrap justify-center gap-8 text-sm\">\n        <a href=\"#\" class=\"text-indigo-600 hover:underline\">Trending</a>\n        <a href=\"#\" class=\"text-indigo-600 hover:underline\">New</a>\n        <a href=\"#\" class=\"text-indigo-600 hover:underline\">Best sellers</a>\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/empty-content/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <h2 class=\"text-2xl font-bold text-gray-900 dark:text-white\">Coming soon!</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700 dark:text-gray-200\">\n        We're working on something exciting. Be the first to know when it launches.\n      </p>\n\n      <form class=\"mt-6 space-y-2\">\n        <input\n          type=\"email\"\n          placeholder=\"your@email.com\"\n          class=\"w-full rounded-lg border-gray-300 px-4 py-3 text-sm focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n        />\n\n        <button\n          class=\"block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700\"\n        >\n          Notify Me\n        </button>\n      </form>\n\n      <p class=\"mt-6 text-sm text-gray-700 dark:text-gray-200\">\n        We'll let you know the moment it's available.\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/empty-content/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <h2 class=\"text-2xl font-bold text-gray-900\">Coming soon!</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700\">\n        We're working on something exciting. Be the first to know when it launches.\n      </p>\n\n      <form class=\"mt-6 space-y-2\">\n        <input\n          type=\"email\"\n          placeholder=\"your@email.com\"\n          class=\"w-full rounded-lg border-gray-300 px-4 py-3 text-sm focus:border-indigo-500 focus:outline-none\"\n        />\n\n        <button\n          class=\"block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700\"\n        >\n          Notify Me\n        </button>\n      </form>\n\n      <p class=\"mt-6 text-sm text-gray-700\">We'll let you know the moment it's available.</p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/empty-content/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400 dark:text-gray-500\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900 dark:text-white\">Explore more</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700 dark:text-gray-200\">\n        This section doesn't have content right now. Discover related topics and inspiration\n        instead.\n      </p>\n\n      <div class=\"mt-6 space-y-2\">\n        <a\n          href=\"#\"\n          class=\"block rounded-lg border border-gray-300 bg-white p-4 text-left transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800\"\n        >\n          <h3 class=\"font-medium text-gray-900 dark:text-white\">Featured Collection</h3>\n\n          <p class=\"mt-1 text-sm text-gray-600 dark:text-gray-300\">Browse our curated selection</p>\n        </a>\n\n        <a\n          href=\"#\"\n          class=\"block rounded-lg border border-gray-300 bg-white p-4 text-left transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800\"\n        >\n          <h3 class=\"font-medium text-gray-900 dark:text-white\">Latest Trends</h3>\n\n          <p class=\"mt-1 text-sm text-gray-600 dark:text-gray-300\">See what's trending now</p>\n        </a>\n      </div>\n\n      <a\n        href=\"#\"\n        class=\"mt-6 block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700\"\n      >\n        Back to Shopping\n      </a>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/empty-content/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900\">Explore more</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700\">\n        This section doesn't have content right now. Discover related topics and inspiration\n        instead.\n      </p>\n\n      <div class=\"mt-6 space-y-2\">\n        <a\n          href=\"#\"\n          class=\"block rounded-lg border border-gray-300 bg-white p-4 text-left transition-colors hover:bg-gray-50\"\n        >\n          <h3 class=\"font-medium text-gray-900\">Featured Collection</h3>\n\n          <p class=\"mt-1 text-sm text-gray-600\">Browse our curated selection</p>\n        </a>\n\n        <a\n          href=\"#\"\n          class=\"block rounded-lg border border-gray-300 bg-white p-4 text-left transition-colors hover:bg-gray-50\"\n        >\n          <h3 class=\"font-medium text-gray-900\">Latest Trends</h3>\n\n          <p class=\"mt-1 text-sm text-gray-600\">See what's trending now</p>\n        </a>\n      </div>\n\n      <a\n        href=\"#\"\n        class=\"mt-6 block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700\"\n      >\n        Back to Shopping\n      </a>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/empty-content/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400 dark:text-gray-500\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900 dark:text-white\">Out of stock</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700 dark:text-gray-200\">\n        This item is currently unavailable. Check back soon or explore similar products.\n      </p>\n\n      <div class=\"mt-6 space-y-2\">\n        <a\n          href=\"#\"\n          class=\"block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700\"\n        >\n          Notify When Available\n        </a>\n\n        <a\n          href=\"#\"\n          class=\"block w-full rounded-lg border border-indigo-600 px-6 py-3 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50 dark:border-gray-800 dark:text-white dark:hover:bg-gray-800\"\n        >\n          Explore Similar Products\n        </a>\n      </div>\n\n      <p class=\"mt-6 text-sm text-gray-700 dark:text-gray-200\">\n        Last restocked: <span class=\"font-medium\"> 3 weeks ago </span>\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/empty-content/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex min-h-screen items-center justify-center p-6\">\n    <div class=\"max-w-md text-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n        class=\"mx-auto size-20 text-gray-400\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z\"\n        />\n      </svg>\n\n      <h2 class=\"mt-6 text-2xl font-bold text-gray-900\">Out of stock</h2>\n\n      <p class=\"mt-4 text-pretty text-gray-700\">\n        This item is currently unavailable. Check back soon or explore similar products.\n      </p>\n\n      <div class=\"mt-6 space-y-2\">\n        <a\n          href=\"#\"\n          class=\"block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700\"\n        >\n          Notify When Available\n        </a>\n\n        <a\n          href=\"#\"\n          class=\"block w-full rounded-lg border border-indigo-600 px-6 py-3 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50\"\n        >\n          Explore Similar Products\n        </a>\n      </div>\n\n      <p class=\"mt-6 text-sm text-gray-700\">\n        Last restocked: <span class=\"font-medium\"> 3 weeks ago </span>\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/faqs/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"space-y-4\">\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\" open>\n        <summary\n          class=\"flex items-center justify-between gap-1.5 rounded-md border border-gray-100 bg-gray-50 p-4 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white\"\n        >\n          <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <p class=\"px-4 pt-4 text-gray-900 dark:text-white\">\n          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa\n          in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis\n          explicabo consequuntur distinctio corporis earum similique!\n        </p>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex items-center justify-between gap-1.5 rounded-md border border-gray-100 bg-gray-50 p-4 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white\"\n        >\n          <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <p class=\"px-4 pt-4 text-gray-900 dark:text-white\">\n          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa\n          in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis\n          explicabo consequuntur distinctio corporis earum similique!\n        </p>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex items-center justify-between gap-1.5 rounded-md border border-gray-100 bg-gray-50 p-4 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white\"\n        >\n          <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <p class=\"px-4 pt-4 text-gray-900 dark:text-white\">\n          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa\n          in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis\n          explicabo consequuntur distinctio corporis earum similique!\n        </p>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/faqs/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"space-y-4\">\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\" open>\n        <summary\n          class=\"flex items-center justify-between gap-1.5 rounded-md border border-gray-100 bg-gray-50 p-4 text-gray-900\"\n        >\n          <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <p class=\"px-4 pt-4 text-gray-900\">\n          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa\n          in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis\n          explicabo consequuntur distinctio corporis earum similique!\n        </p>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex items-center justify-between gap-1.5 rounded-md border border-gray-100 bg-gray-50 p-4 text-gray-900\"\n        >\n          <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <p class=\"px-4 pt-4 text-gray-900\">\n          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa\n          in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis\n          explicabo consequuntur distinctio corporis earum similique!\n        </p>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex items-center justify-between gap-1.5 rounded-md border border-gray-100 bg-gray-50 p-4 text-gray-900\"\n        >\n          <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <p class=\"px-4 pt-4 text-gray-900\">\n          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa\n          in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis\n          explicabo consequuntur distinctio corporis earum similique!\n        </p>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/faqs/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"flow-root\">\n      <div class=\"-my-4 flex flex-col divide-y divide-gray-200 dark:divide-gray-700\">\n        <details class=\"group py-4 [&_summary::-webkit-details-marker]:hidden\" open>\n          <summary class=\"flex items-center justify-between gap-1.5 text-gray-900 dark:text-white\">\n            <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n            <svg\n              class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M19 9l-7 7-7-7\"\n              />\n            </svg>\n          </summary>\n\n          <p class=\"pt-4 text-gray-900 dark:text-white\">\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias\n            culpa in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo\n            officiis explicabo consequuntur distinctio corporis earum similique!\n          </p>\n        </details>\n\n        <details class=\"group py-4 [&_summary::-webkit-details-marker]:hidden\">\n          <summary class=\"flex items-center justify-between gap-1.5 text-gray-900 dark:text-white\">\n            <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n            <svg\n              class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M19 9l-7 7-7-7\"\n              />\n            </svg>\n          </summary>\n\n          <p class=\"pt-4 text-gray-900 dark:text-white\">\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias\n            culpa in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo\n            officiis explicabo consequuntur distinctio corporis earum similique!\n          </p>\n        </details>\n\n        <details class=\"group py-4 [&_summary::-webkit-details-marker]:hidden\">\n          <summary class=\"flex items-center justify-between gap-1.5 text-gray-900 dark:text-white\">\n            <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n            <svg\n              class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M19 9l-7 7-7-7\"\n              />\n            </svg>\n          </summary>\n\n          <p class=\"pt-4 text-gray-900 dark:text-white\">\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias\n            culpa in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo\n            officiis explicabo consequuntur distinctio corporis earum similique!\n          </p>\n        </details>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/faqs/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"flow-root\">\n      <div class=\"-my-4 flex flex-col divide-y divide-gray-200\">\n        <details class=\"group py-4 [&_summary::-webkit-details-marker]:hidden\" open>\n          <summary class=\"flex items-center justify-between gap-1.5 text-gray-900\">\n            <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n            <svg\n              class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M19 9l-7 7-7-7\"\n              />\n            </svg>\n          </summary>\n\n          <p class=\"pt-4 text-gray-900\">\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias\n            culpa in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo\n            officiis explicabo consequuntur distinctio corporis earum similique!\n          </p>\n        </details>\n\n        <details class=\"group py-4 [&_summary::-webkit-details-marker]:hidden\">\n          <summary class=\"flex items-center justify-between gap-1.5 text-gray-900\">\n            <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n            <svg\n              class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M19 9l-7 7-7-7\"\n              />\n            </svg>\n          </summary>\n\n          <p class=\"pt-4 text-gray-900\">\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias\n            culpa in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo\n            officiis explicabo consequuntur distinctio corporis earum similique!\n          </p>\n        </details>\n\n        <details class=\"group py-4 [&_summary::-webkit-details-marker]:hidden\">\n          <summary class=\"flex items-center justify-between gap-1.5 text-gray-900\">\n            <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n            <svg\n              class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M19 9l-7 7-7-7\"\n              />\n            </svg>\n          </summary>\n\n          <p class=\"pt-4 text-gray-900\">\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias\n            culpa in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo\n            officiis explicabo consequuntur distinctio corporis earum similique!\n          </p>\n        </details>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/faqs/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"space-y-4\">\n      <details\n        class=\"group border-s-4 border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800 [&_summary::-webkit-details-marker]:hidden\"\n        open\n      >\n        <summary class=\"flex items-center justify-between gap-1.5 text-gray-900 dark:text-white\">\n          <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <p class=\"pt-4 text-gray-900 dark:text-white\">\n          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa\n          in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis\n          explicabo consequuntur distinctio corporis earum similique!\n        </p>\n      </details>\n\n      <details\n        class=\"group border-s-4 border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800 [&_summary::-webkit-details-marker]:hidden\"\n      >\n        <summary class=\"flex items-center justify-between gap-1.5 text-gray-900 dark:text-white\">\n          <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <p class=\"pt-4 text-gray-900 dark:text-white\">\n          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa\n          in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis\n          explicabo consequuntur distinctio corporis earum similique!\n        </p>\n      </details>\n\n      <details\n        class=\"group border-s-4 border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800 [&_summary::-webkit-details-marker]:hidden\"\n      >\n        <summary class=\"flex items-center justify-between gap-1.5 text-gray-900 dark:text-white\">\n          <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <p class=\"pt-4 text-gray-900 dark:text-white\">\n          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa\n          in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis\n          explicabo consequuntur distinctio corporis earum similique!\n        </p>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/faqs/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"space-y-4\">\n      <details\n        class=\"group border-s-4 border-gray-200 bg-gray-50 p-4 [&_summary::-webkit-details-marker]:hidden\"\n        open\n      >\n        <summary class=\"flex items-center justify-between gap-1.5 text-gray-900\">\n          <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <p class=\"pt-4 text-gray-900\">\n          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa\n          in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis\n          explicabo consequuntur distinctio corporis earum similique!\n        </p>\n      </details>\n\n      <details\n        class=\"group border-s-4 border-gray-200 bg-gray-50 p-4 [&_summary::-webkit-details-marker]:hidden\"\n      >\n        <summary class=\"flex items-center justify-between gap-1.5 text-gray-900\">\n          <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <p class=\"pt-4 text-gray-900\">\n          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa\n          in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis\n          explicabo consequuntur distinctio corporis earum similique!\n        </p>\n      </details>\n\n      <details\n        class=\"group border-s-4 border-gray-200 bg-gray-50 p-4 [&_summary::-webkit-details-marker]:hidden\"\n      >\n        <summary class=\"flex items-center justify-between gap-1.5 text-gray-900\">\n          <h2 class=\"text-lg font-medium\">Lorem ipsum dolor sit amet consectetur adipisicing?</h2>\n\n          <svg\n            class=\"size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <p class=\"pt-4 text-gray-900\">\n          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa\n          in, recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis\n          explicabo consequuntur distinctio corporis earum similique!\n        </p>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/feature-grids/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"mx-auto max-w-lg text-center\">\n        <h2 class=\"text-3xl/tight font-bold text-gray-900 sm:text-4xl dark:text-white\">\n          Features for growth\n        </h2>\n\n        <p class=\"mt-4 text-lg text-pretty text-gray-700 dark:text-gray-200\">\n          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis tenetur, nemo quam\n          voluptas sunt impedit dolorem asperiores aliquid doloribus fugit.\n        </p>\n      </div>\n\n      <div class=\"mt-8 grid grid-cols-1 gap-8 md:grid-cols-3\">\n        <div class=\"rounded-lg border border-gray-200 p-6 dark:border-gray-700\">\n          <div\n            class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\"\n              />\n            </svg>\n          </div>\n\n          <h3 class=\"mt-4 text-lg font-semibold text-gray-900 dark:text-white\">High performance</h3>\n\n          <p class=\"mt-2 text-pretty text-gray-700 dark:text-gray-200\">\n            Lightning-quick load times optimized for every device\n          </p>\n        </div>\n\n        <div class=\"rounded-lg border border-gray-200 p-6 dark:border-gray-700\">\n          <div\n            class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z\"\n              />\n            </svg>\n          </div>\n\n          <h3 class=\"mt-4 text-lg font-semibold text-gray-900 dark:text-white\">\n            Enterprise security\n          </h3>\n\n          <p class=\"mt-2 text-pretty text-gray-700 dark:text-gray-200\">\n            Enterprise-grade security built into every layer\n          </p>\n        </div>\n\n        <div class=\"rounded-lg border border-gray-200 p-6 dark:border-gray-700\">\n          <div\n            class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5\"\n              />\n            </svg>\n          </div>\n\n          <h3 class=\"mt-4 text-lg font-semibold text-gray-900 dark:text-white\">\n            Highly configurable\n          </h3>\n\n          <p class=\"mt-2 text-pretty text-gray-700 dark:text-gray-200\">\n            Adapt every aspect to match your brand and needs\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/feature-grids/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"mx-auto max-w-lg text-center\">\n        <h2 class=\"text-3xl/tight font-bold text-gray-900 sm:text-4xl\">Features for growth</h2>\n\n        <p class=\"mt-4 text-lg text-pretty text-gray-700\">\n          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis tenetur, nemo quam\n          voluptas sunt impedit dolorem asperiores aliquid doloribus fugit.\n        </p>\n      </div>\n\n      <div class=\"mt-8 grid grid-cols-1 gap-8 md:grid-cols-3\">\n        <div class=\"rounded-lg border border-gray-200 p-6\">\n          <div class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\"\n              />\n            </svg>\n          </div>\n\n          <h3 class=\"mt-4 text-lg font-semibold text-gray-900\">High performance</h3>\n\n          <p class=\"mt-2 text-pretty text-gray-700\">\n            Lightning-quick load times optimized for every device\n          </p>\n        </div>\n\n        <div class=\"rounded-lg border border-gray-200 p-6\">\n          <div class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z\"\n              />\n            </svg>\n          </div>\n\n          <h3 class=\"mt-4 text-lg font-semibold text-gray-900\">Enterprise security</h3>\n\n          <p class=\"mt-2 text-pretty text-gray-700\">\n            Enterprise-grade security built into every layer\n          </p>\n        </div>\n\n        <div class=\"rounded-lg border border-gray-200 p-6\">\n          <div class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5\"\n              />\n            </svg>\n          </div>\n\n          <h3 class=\"mt-4 text-lg font-semibold text-gray-900\">Highly configurable</h3>\n\n          <p class=\"mt-2 text-pretty text-gray-700\">\n            Adapt every aspect to match your brand and needs\n          </p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/feature-grids/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-1 gap-8 md:grid-cols-2\">\n        <div class=\"col-span-1\">\n          <h2 class=\"text-3xl/tight font-bold text-gray-900 sm:text-4xl dark:text-white\">\n            Features for growth\n          </h2>\n\n          <p class=\"mt-4 text-lg text-pretty text-gray-700 dark:text-gray-200\">\n            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis tenetur, nemo quam\n            voluptas sunt impedit dolorem asperiores aliquid doloribus fugit.\n          </p>\n        </div>\n\n        <div class=\"space-y-6\">\n          <div class=\"flex items-start gap-4\">\n            <div\n              class=\"shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-6\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  d=\"M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6\"\n                />\n              </svg>\n            </div>\n\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">\n                Advanced reporting\n              </h3>\n\n              <p class=\"mt-1 text-gray-700 dark:text-gray-200\">\n                Track metrics that matter with instant insights\n              </p>\n            </div>\n          </div>\n\n          <div class=\"flex items-start gap-4\">\n            <div\n              class=\"shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-6\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  d=\"M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z\"\n                />\n              </svg>\n            </div>\n\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">\n                Collaboration tools\n              </h3>\n\n              <p class=\"mt-1 text-gray-700 dark:text-gray-200\">\n                Work together seamlessly across your organization\n              </p>\n            </div>\n          </div>\n\n          <div class=\"flex items-start gap-4\">\n            <div\n              class=\"shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-6\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  d=\"M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z\"\n                />\n              </svg>\n            </div>\n\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">\n                Third-party connectors\n              </h3>\n\n              <p class=\"mt-1 text-gray-700 dark:text-gray-200\">\n                Connect with your favorite tools and services\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/feature-grids/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-1 gap-8 md:grid-cols-2\">\n        <div class=\"col-span-1\">\n          <h2 class=\"text-3xl/tight font-bold text-gray-900 sm:text-4xl\">Features for growth</h2>\n\n          <p class=\"mt-4 text-lg text-pretty text-gray-700\">\n            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis tenetur, nemo quam\n            voluptas sunt impedit dolorem asperiores aliquid doloribus fugit.\n          </p>\n        </div>\n\n        <div class=\"space-y-6\">\n          <div class=\"flex items-start gap-4\">\n            <div class=\"shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-6\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  d=\"M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6\"\n                />\n              </svg>\n            </div>\n\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-900\">Advanced reporting</h3>\n\n              <p class=\"mt-1 text-gray-700\">Track metrics that matter with instant insights</p>\n            </div>\n          </div>\n\n          <div class=\"flex items-start gap-4\">\n            <div class=\"shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-6\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  d=\"M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z\"\n                />\n              </svg>\n            </div>\n\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-900\">Collaboration tools</h3>\n\n              <p class=\"mt-1 text-gray-700\">Work together seamlessly across your organization</p>\n            </div>\n          </div>\n\n          <div class=\"flex items-start gap-4\">\n            <div class=\"shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-6\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  d=\"M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z\"\n                />\n              </svg>\n            </div>\n\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-900\">Third-party connectors</h3>\n\n              <p class=\"mt-1 text-gray-700\">Connect with your favorite tools and services</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/feature-grids/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4\">\n        <div class=\"text-center\">\n          <div\n            class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\"\n              />\n            </svg>\n          </div>\n\n          <h3 class=\"mt-4 text-lg font-semibold text-gray-900 dark:text-white\">High performance</h3>\n\n          <p class=\"mt-2 text-pretty text-gray-700 dark:text-gray-200\">Optimized load times</p>\n        </div>\n\n        <div class=\"text-center\">\n          <div\n            class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z\"\n              />\n            </svg>\n          </div>\n\n          <h3 class=\"mt-4 text-lg font-semibold text-gray-900 dark:text-white\">\n            Enterprise security\n          </h3>\n\n          <p class=\"mt-2 text-pretty text-gray-700 dark:text-gray-200\">Every layer secured</p>\n        </div>\n\n        <div class=\"text-center\">\n          <div\n            class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5\"\n              />\n            </svg>\n          </div>\n\n          <h3 class=\"mt-4 text-lg font-semibold text-gray-900 dark:text-white\">\n            Highly configurable\n          </h3>\n\n          <p class=\"mt-2 text-pretty text-gray-700 dark:text-gray-200\">Adapt every aspect</p>\n        </div>\n\n        <div class=\"text-center\">\n          <div\n            class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6\"\n              />\n            </svg>\n          </div>\n\n          <h3 class=\"mt-4 text-lg font-semibold text-gray-900 dark:text-white\">\n            Advanced reporting\n          </h3>\n\n          <p class=\"mt-2 text-pretty text-gray-700 dark:text-gray-200\">Metrics that matter</p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/feature-grids/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4\">\n        <div class=\"text-center\">\n          <div class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\"\n              />\n            </svg>\n          </div>\n\n          <h3 class=\"mt-4 text-lg font-semibold text-gray-900\">High performance</h3>\n\n          <p class=\"mt-2 text-pretty text-gray-700\">Optimized load times</p>\n        </div>\n\n        <div class=\"text-center\">\n          <div class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z\"\n              />\n            </svg>\n          </div>\n\n          <h3 class=\"mt-4 text-lg font-semibold text-gray-900\">Enterprise security</h3>\n\n          <p class=\"mt-2 text-pretty text-gray-700\">Every layer secured</p>\n        </div>\n\n        <div class=\"text-center\">\n          <div class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5\"\n              />\n            </svg>\n          </div>\n\n          <h3 class=\"mt-4 text-lg font-semibold text-gray-900\">Highly configurable</h3>\n\n          <p class=\"mt-2 text-pretty text-gray-700\">Adapt every aspect</p>\n        </div>\n\n        <div class=\"text-center\">\n          <div class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6\"\n              />\n            </svg>\n          </div>\n\n          <h3 class=\"mt-4 text-lg font-semibold text-gray-900\">Advanced reporting</h3>\n\n          <p class=\"mt-2 text-pretty text-gray-700\">Metrics that matter</p>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/feature-grids/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-1 gap-8 md:grid-cols-2\">\n        <div\n          class=\"flex items-start gap-4 rounded-lg border border-gray-200 p-6 dark:border-gray-700\"\n        >\n          <div\n            class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\"\n              />\n            </svg>\n          </div>\n\n          <div>\n            <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">High performance</h3>\n\n            <p class=\"mt-2 text-pretty text-gray-700 dark:text-gray-200\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut accusamus consectetur\n              eius quo ea ipsa illum eos amet velit assumenda.\n            </p>\n          </div>\n        </div>\n\n        <div\n          class=\"flex items-start gap-4 rounded-lg border border-gray-200 p-6 dark:border-gray-700\"\n        >\n          <div\n            class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z\"\n              />\n            </svg>\n          </div>\n\n          <div>\n            <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">Enterprise security</h3>\n\n            <p class=\"mt-2 text-pretty text-gray-700 dark:text-gray-200\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Est optio fugit eos quia\n              ipsam ullam pariatur iusto accusantium possimus distinctio?\n            </p>\n          </div>\n        </div>\n\n        <div\n          class=\"flex items-start gap-4 rounded-lg border border-gray-200 p-6 dark:border-gray-700\"\n        >\n          <div\n            class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5\"\n              />\n            </svg>\n          </div>\n\n          <div>\n            <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">Highly configurable</h3>\n\n            <p class=\"mt-2 text-pretty text-gray-700 dark:text-gray-200\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ea cum harum corporis\n              debitis. Nobis officia dignissimos aliquam praesentium quod?\n            </p>\n          </div>\n        </div>\n\n        <div\n          class=\"flex items-start gap-4 rounded-lg border border-gray-200 p-6 dark:border-gray-700\"\n        >\n          <div\n            class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6\"\n              />\n            </svg>\n          </div>\n\n          <div>\n            <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">Advanced reporting</h3>\n\n            <p class=\"mt-2 text-pretty text-gray-700 dark:text-gray-200\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ea cum harum corporis\n              debitis. Nobis officia dignissimos aliquam praesentium quod?\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/feature-grids/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-1 gap-8 md:grid-cols-2\">\n        <div class=\"flex items-start gap-4 rounded-lg border border-gray-200 p-6\">\n          <div class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\"\n              />\n            </svg>\n          </div>\n\n          <div>\n            <h3 class=\"text-lg font-semibold text-gray-900\">High performance</h3>\n\n            <p class=\"mt-2 text-pretty text-gray-700\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut accusamus consectetur\n              eius quo ea ipsa illum eos amet velit assumenda.\n            </p>\n          </div>\n        </div>\n\n        <div class=\"flex items-start gap-4 rounded-lg border border-gray-200 p-6\">\n          <div class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z\"\n              />\n            </svg>\n          </div>\n\n          <div>\n            <h3 class=\"text-lg font-semibold text-gray-900\">Enterprise security</h3>\n\n            <p class=\"mt-2 text-pretty text-gray-700\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Est optio fugit eos quia\n              ipsam ullam pariatur iusto accusantium possimus distinctio?\n            </p>\n          </div>\n        </div>\n\n        <div class=\"flex items-start gap-4 rounded-lg border border-gray-200 p-6\">\n          <div class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5\"\n              />\n            </svg>\n          </div>\n\n          <div>\n            <h3 class=\"text-lg font-semibold text-gray-900\">Highly configurable</h3>\n\n            <p class=\"mt-2 text-pretty text-gray-700\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ea cum harum corporis\n              debitis. Nobis officia dignissimos aliquam praesentium quod?\n            </p>\n          </div>\n        </div>\n\n        <div class=\"flex items-start gap-4 rounded-lg border border-gray-200 p-6\">\n          <div class=\"inline-flex rounded-lg bg-gray-100 p-3 text-gray-700\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-6\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6\"\n              />\n            </svg>\n          </div>\n\n          <div>\n            <h3 class=\"text-lg font-semibold text-gray-900\">Advanced reporting</h3>\n\n            <p class=\"mt-2 text-pretty text-gray-700\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ea cum harum corporis\n              debitis. Nobis officia dignissimos aliquam praesentium quod?\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white dark:bg-gray-900\">\n      <div class=\"mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8\">\n        <div class=\"lg:flex lg:items-start lg:gap-8\">\n          <div class=\"text-teal-600 dark:text-teal-300\">\n            <svg class=\"h-8\" viewBox=\"0 0 28 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </div>\n\n          <div class=\"mt-8 grid grid-cols-2 gap-8 lg:mt-0 lg:grid-cols-5 lg:gap-y-16\">\n            <div class=\"col-span-2\">\n              <div>\n                <h2 class=\"text-2xl font-bold text-gray-900 dark:text-white\">\n                  Get the latest news!\n                </h2>\n\n                <p class=\"mt-4 text-gray-500 dark:text-gray-400\">\n                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse non cupiditate quae\n                  nam molestias.\n                </p>\n              </div>\n            </div>\n\n            <div class=\"col-span-2 lg:col-span-3 lg:flex lg:items-end\">\n              <form class=\"w-full\">\n                <label for=\"UserEmail\" class=\"sr-only\"> Email </label>\n\n                <div\n                  class=\"border border-gray-100 p-2 focus-within:ring-3 sm:flex sm:items-center sm:gap-4 dark:border-gray-800\"\n                >\n                  <input\n                    type=\"email\"\n                    id=\"UserEmail\"\n                    placeholder=\"john@rhcp.com\"\n                    class=\"w-full border-none focus:border-transparent focus:ring-transparent sm:text-sm dark:bg-gray-900 dark:text-white\"\n                  />\n\n                  <button\n                    class=\"mt-1 w-full bg-teal-500 px-6 py-3 text-sm font-bold tracking-wide text-white uppercase transition-none hover:bg-teal-600 sm:mt-0 sm:w-auto sm:shrink-0\"\n                  >\n                    Sign Up\n                  </button>\n                </div>\n              </form>\n            </div>\n\n            <div class=\"col-span-2 sm:col-span-1\">\n              <p class=\"font-medium text-gray-900 dark:text-white\">Services</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    1on1 Coaching\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Company Review\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Accounts Review\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    HR Consulting\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    SEO Optimisation\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div class=\"col-span-2 sm:col-span-1\">\n              <p class=\"font-medium text-gray-900 dark:text-white\">Company</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    About\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Meet the Team\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Accounts Review\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div class=\"col-span-2 sm:col-span-1\">\n              <p class=\"font-medium text-gray-900 dark:text-white\">Helpful Links</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Contact\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    FAQs\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Live Chat\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div class=\"col-span-2 sm:col-span-1\">\n              <p class=\"font-medium text-gray-900 dark:text-white\">Legal</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Accessibility\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Returns Policy\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Refund Policy\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Hiring-3 Statistics\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div class=\"col-span-2 sm:col-span-1\">\n              <p class=\"font-medium text-gray-900 dark:text-white\">Downloads</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Marketing Calendar\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    SEO Infographics\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <ul class=\"col-span-2 flex justify-start gap-6 lg:col-span-5 lg:justify-end\">\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                >\n                  <span class=\"sr-only\">Facebook</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                >\n                  <span class=\"sr-only\">Instagram</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                >\n                  <span class=\"sr-only\">Twitter</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                >\n                  <span class=\"sr-only\">GitHub</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                >\n                  <span class=\"sr-only\">Dribbble</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <div class=\"mt-8 border-t border-gray-100 pt-8 dark:border-gray-800\">\n          <div class=\"sm:flex sm:justify-between\">\n            <p class=\"text-xs text-gray-500 dark:text-gray-400\">\n              &copy; 2022. Company Name. All rights reserved.\n            </p>\n\n            <ul class=\"mt-8 flex flex-wrap justify-start gap-4 text-xs sm:mt-0 lg:justify-end\">\n              <li>\n                <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75 dark:text-gray-400\">\n                  Terms & Conditions\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75 dark:text-gray-400\">\n                  Privacy Policy\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75 dark:text-gray-400\">\n                  Cookies\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white\">\n      <div class=\"mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8\">\n        <div class=\"lg:flex lg:items-start lg:gap-8\">\n          <div class=\"text-teal-600\">\n            <svg class=\"h-8\" viewBox=\"0 0 28 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </div>\n\n          <div class=\"mt-8 grid grid-cols-2 gap-8 lg:mt-0 lg:grid-cols-5 lg:gap-y-16\">\n            <div class=\"col-span-2\">\n              <div>\n                <h2 class=\"text-2xl font-bold text-gray-900\">Get the latest news!</h2>\n\n                <p class=\"mt-4 text-gray-500\">\n                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse non cupiditate quae\n                  nam molestias.\n                </p>\n              </div>\n            </div>\n\n            <div class=\"col-span-2 lg:col-span-3 lg:flex lg:items-end\">\n              <form class=\"w-full\">\n                <label for=\"UserEmail\" class=\"sr-only\"> Email </label>\n\n                <div\n                  class=\"border border-gray-100 p-2 focus-within:ring-3 sm:flex sm:items-center sm:gap-4\"\n                >\n                  <input\n                    type=\"email\"\n                    id=\"UserEmail\"\n                    placeholder=\"john@rhcp.com\"\n                    class=\"w-full border-none focus:border-transparent focus:ring-transparent sm:text-sm\"\n                  />\n\n                  <button\n                    class=\"mt-1 w-full bg-teal-500 px-6 py-3 text-sm font-bold tracking-wide text-white uppercase transition-none hover:bg-teal-600 sm:mt-0 sm:w-auto sm:shrink-0\"\n                  >\n                    Sign Up\n                  </button>\n                </div>\n              </form>\n            </div>\n\n            <div class=\"col-span-2 sm:col-span-1\">\n              <p class=\"font-medium text-gray-900\">Services</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> 1on1 Coaching </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Company Review </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                    Accounts Review\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> HR Consulting </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                    SEO Optimisation\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div class=\"col-span-2 sm:col-span-1\">\n              <p class=\"font-medium text-gray-900\">Company</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> About </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Meet the Team </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                    Accounts Review\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div class=\"col-span-2 sm:col-span-1\">\n              <p class=\"font-medium text-gray-900\">Helpful Links</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Contact </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> FAQs </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Live Chat </a>\n                </li>\n              </ul>\n            </div>\n\n            <div class=\"col-span-2 sm:col-span-1\">\n              <p class=\"font-medium text-gray-900\">Legal</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Accessibility </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Returns Policy </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Refund Policy </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                    Hiring-3 Statistics\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div class=\"col-span-2 sm:col-span-1\">\n              <p class=\"font-medium text-gray-900\">Downloads</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                    Marketing Calendar\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                    SEO Infographics\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <ul class=\"col-span-2 flex justify-start gap-6 lg:col-span-5 lg:justify-end\">\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75\"\n                >\n                  <span class=\"sr-only\">Facebook</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75\"\n                >\n                  <span class=\"sr-only\">Instagram</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75\"\n                >\n                  <span class=\"sr-only\">Twitter</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75\"\n                >\n                  <span class=\"sr-only\">GitHub</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75\"\n                >\n                  <span class=\"sr-only\">Dribbble</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <div class=\"mt-8 border-t border-gray-100 pt-8\">\n          <div class=\"sm:flex sm:justify-between\">\n            <p class=\"text-xs text-gray-500\">&copy; 2022. Company Name. All rights reserved.</p>\n\n            <ul class=\"mt-8 flex flex-wrap justify-start gap-4 text-xs sm:mt-0 lg:justify-end\">\n              <li>\n                <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75\">\n                  Terms & Conditions\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75\"> Privacy Policy </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75\"> Cookies </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/10-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white dark:bg-gray-900\">\n      <div class=\"mx-auto max-w-7xl px-4 pt-16 pb-6 sm:px-6 lg:px-8 lg:pt-24\">\n        <div class=\"grid grid-cols-1 gap-8 lg:grid-cols-3\">\n          <div>\n            <div class=\"flex justify-center text-teal-600 sm:justify-start dark:text-teal-300\">\n              <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n\n            <p\n              class=\"mt-6 max-w-md text-center leading-relaxed text-gray-500 sm:max-w-xs sm:text-left dark:text-gray-400\"\n            >\n              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt consequuntur amet\n              culpa cum itaque neque.\n            </p>\n\n            <ul class=\"mt-8 flex justify-center gap-6 sm:justify-start md:gap-8\">\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-teal-700 transition hover:text-teal-700/75 dark:text-teal-500 dark:hover:text-teal-500/75\"\n                >\n                  <span class=\"sr-only\">Facebook</span>\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-teal-700 transition hover:text-teal-700/75 dark:text-teal-500 dark:hover:text-teal-500/75\"\n                >\n                  <span class=\"sr-only\">Instagram</span>\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-teal-700 transition hover:text-teal-700/75 dark:text-teal-500 dark:hover:text-teal-500/75\"\n                >\n                  <span class=\"sr-only\">Twitter</span>\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-teal-700 transition hover:text-teal-700/75 dark:text-teal-500 dark:hover:text-teal-500/75\"\n                >\n                  <span class=\"sr-only\">GitHub</span>\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-teal-700 transition hover:text-teal-700/75 dark:text-teal-500 dark:hover:text-teal-500/75\"\n                >\n                  <span class=\"sr-only\">Dribbble</span>\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          <div class=\"grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-4 lg:col-span-2\">\n            <div class=\"text-center sm:text-left\">\n              <p class=\"text-lg font-medium text-gray-900 dark:text-white\">About Us</p>\n\n              <ul class=\"mt-8 space-y-4 text-sm\">\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Company History\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Meet the Team\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Employee Handbook\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Careers\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div class=\"text-center sm:text-left\">\n              <p class=\"text-lg font-medium text-gray-900 dark:text-white\">Our Services</p>\n\n              <ul class=\"mt-8 space-y-4 text-sm\">\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Web Development\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Web Design\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Marketing\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Google Ads\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div class=\"text-center sm:text-left\">\n              <p class=\"text-lg font-medium text-gray-900 dark:text-white\">Helpful Links</p>\n\n              <ul class=\"mt-8 space-y-4 text-sm\">\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    FAQs\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Support\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"group flex justify-center gap-1.5 ltr:sm:justify-start rtl:sm:justify-end\"\n                    href=\"#\"\n                  >\n                    <span\n                      class=\"text-gray-700 transition group-hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    >\n                      Live Chat\n                    </span>\n\n                    <span class=\"relative flex size-2\">\n                      <span\n                        class=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-teal-400 opacity-75\"\n                      ></span>\n                      <span class=\"relative inline-flex size-2 rounded-full bg-teal-500\"></span>\n                    </span>\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div class=\"text-center sm:text-left\">\n              <p class=\"text-lg font-medium text-gray-900 dark:text-white\">Contact Us</p>\n\n              <ul class=\"mt-8 space-y-4 text-sm\">\n                <li>\n                  <a\n                    class=\"flex items-center justify-center gap-1.5 ltr:sm:justify-start rtl:sm:justify-end\"\n                    href=\"#\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"size-5 shrink-0 text-gray-900 dark:text-white\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n                      />\n                    </svg>\n\n                    <span class=\"text-gray-700 dark:text-gray-300\"> john@doe.com </span>\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"flex items-center justify-center gap-1.5 ltr:sm:justify-start rtl:sm:justify-end\"\n                    href=\"#\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"size-5 shrink-0 text-gray-900 dark:text-white\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"\n                      />\n                    </svg>\n\n                    <span class=\"text-gray-700 dark:text-gray-300\">0123456789</span>\n                  </a>\n                </li>\n\n                <li\n                  class=\"flex items-start justify-center gap-1.5 ltr:sm:justify-start rtl:sm:justify-end\"\n                >\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"size-5 shrink-0 text-gray-900 dark:text-white\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                  >\n                    <path\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n                    />\n                    <path\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n                    />\n                  </svg>\n\n                  <address class=\"-mt-0.5 text-gray-700 not-italic dark:text-gray-300\">\n                    213 Lane, London, United Kingdom\n                  </address>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"mt-12 border-t border-gray-100 pt-6 dark:border-gray-800\">\n          <div class=\"text-center sm:flex sm:justify-between sm:text-left\">\n            <p class=\"text-sm text-gray-500 dark:text-gray-400\">\n              <span class=\"block sm:inline\">All rights reserved.</span>\n\n              <a\n                class=\"inline-block text-teal-600 underline transition hover:text-teal-600/75 dark:text-teal-500 dark:hover:text-teal-500/75\"\n                href=\"#\"\n              >\n                Terms & Conditions\n              </a>\n\n              <span>&middot;</span>\n\n              <a\n                class=\"inline-block text-teal-600 underline transition hover:text-teal-600/75 dark:text-teal-500 dark:hover:text-teal-500/75\"\n                href=\"#\"\n              >\n                Privacy Policy\n              </a>\n            </p>\n\n            <p class=\"mt-4 text-sm text-gray-500 sm:order-first sm:mt-0 dark:text-gray-400\">\n              &copy; 2022 Company Name\n            </p>\n          </div>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/10.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white\">\n      <div class=\"mx-auto max-w-7xl px-4 pt-16 pb-6 sm:px-6 lg:px-8 lg:pt-24\">\n        <div class=\"grid grid-cols-1 gap-8 lg:grid-cols-3\">\n          <div>\n            <div class=\"flex justify-center text-teal-600 sm:justify-start\">\n              <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n\n            <p\n              class=\"mt-6 max-w-md text-center leading-relaxed text-gray-500 sm:max-w-xs sm:text-left\"\n            >\n              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt consequuntur amet\n              culpa cum itaque neque.\n            </p>\n\n            <ul class=\"mt-8 flex justify-center gap-6 sm:justify-start md:gap-8\">\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-teal-700 transition hover:text-teal-700/75\"\n                >\n                  <span class=\"sr-only\">Facebook</span>\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-teal-700 transition hover:text-teal-700/75\"\n                >\n                  <span class=\"sr-only\">Instagram</span>\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-teal-700 transition hover:text-teal-700/75\"\n                >\n                  <span class=\"sr-only\">Twitter</span>\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-teal-700 transition hover:text-teal-700/75\"\n                >\n                  <span class=\"sr-only\">GitHub</span>\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-teal-700 transition hover:text-teal-700/75\"\n                >\n                  <span class=\"sr-only\">Dribbble</span>\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          <div class=\"grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-4 lg:col-span-2\">\n            <div class=\"text-center sm:text-left\">\n              <p class=\"text-lg font-medium text-gray-900\">About Us</p>\n\n              <ul class=\"mt-8 space-y-4 text-sm\">\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                    Company History\n                  </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                    Meet the Team\n                  </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                    Employee Handbook\n                  </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Careers </a>\n                </li>\n              </ul>\n            </div>\n\n            <div class=\"text-center sm:text-left\">\n              <p class=\"text-lg font-medium text-gray-900\">Our Services</p>\n\n              <ul class=\"mt-8 space-y-4 text-sm\">\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                    Web Development\n                  </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                    Web Design\n                  </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                    Marketing\n                  </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                    Google Ads\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div class=\"text-center sm:text-left\">\n              <p class=\"text-lg font-medium text-gray-900\">Helpful Links</p>\n\n              <ul class=\"mt-8 space-y-4 text-sm\">\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> FAQs </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Support </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"group flex justify-center gap-1.5 ltr:sm:justify-start rtl:sm:justify-end\"\n                    href=\"#\"\n                  >\n                    <span class=\"text-gray-700 transition group-hover:text-gray-700/75\">\n                      Live Chat\n                    </span>\n\n                    <span class=\"relative flex size-2\">\n                      <span\n                        class=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-teal-400 opacity-75\"\n                      ></span>\n                      <span class=\"relative inline-flex size-2 rounded-full bg-teal-500\"></span>\n                    </span>\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div class=\"text-center sm:text-left\">\n              <p class=\"text-lg font-medium text-gray-900\">Contact Us</p>\n\n              <ul class=\"mt-8 space-y-4 text-sm\">\n                <li>\n                  <a\n                    class=\"flex items-center justify-center gap-1.5 ltr:sm:justify-start rtl:sm:justify-end\"\n                    href=\"#\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"size-5 shrink-0 text-gray-900\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n                      />\n                    </svg>\n\n                    <span class=\"text-gray-700\">john@doe.com</span>\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"flex items-center justify-center gap-1.5 ltr:sm:justify-start rtl:sm:justify-end\"\n                    href=\"#\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"size-5 shrink-0 text-gray-900\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"\n                      />\n                    </svg>\n\n                    <span class=\"text-gray-700\">0123456789</span>\n                  </a>\n                </li>\n\n                <li\n                  class=\"flex items-start justify-center gap-1.5 ltr:sm:justify-start rtl:sm:justify-end\"\n                >\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"size-5 shrink-0 text-gray-900\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                  >\n                    <path\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n                    />\n                    <path\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n                    />\n                  </svg>\n\n                  <address class=\"-mt-0.5 text-gray-700 not-italic\">\n                    213 Lane, London, United Kingdom\n                  </address>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"mt-12 border-t border-gray-100 pt-6\">\n          <div class=\"text-center sm:flex sm:justify-between sm:text-left\">\n            <p class=\"text-sm text-gray-500\">\n              <span class=\"block sm:inline\">All rights reserved.</span>\n\n              <a\n                class=\"inline-block text-teal-600 underline transition hover:text-teal-600/75\"\n                href=\"#\"\n              >\n                Terms & Conditions\n              </a>\n\n              <span>&middot;</span>\n\n              <a\n                class=\"inline-block text-teal-600 underline transition hover:text-teal-600/75\"\n                href=\"#\"\n              >\n                Privacy Policy\n              </a>\n            </p>\n\n            <p class=\"mt-4 text-sm text-gray-500 sm:order-first sm:mt-0\">\n              &copy; 2022 Company Name\n            </p>\n          </div>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/11-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-gray-50 dark:bg-gray-900\">\n      <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n        <div class=\"sm:flex sm:items-center sm:justify-between\">\n          <div class=\"flex justify-center text-teal-600 sm:justify-start dark:text-teal-300\">\n            <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </div>\n\n          <p\n            class=\"mt-4 text-center text-sm text-gray-500 lg:mt-0 lg:text-right dark:text-gray-400\"\n          >\n            Copyright &copy; 2022. All rights reserved.\n          </p>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/11.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-gray-50\">\n      <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n        <div class=\"sm:flex sm:items-center sm:justify-between\">\n          <div class=\"flex justify-center text-teal-600 sm:justify-start\">\n            <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </div>\n\n          <p class=\"mt-4 text-center text-sm text-gray-500 lg:mt-0 lg:text-right\">\n            Copyright &copy; 2022. All rights reserved.\n          </p>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/12-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white dark:bg-gray-900\">\n      <div class=\"mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8\">\n        <div\n          class=\"flex flex-col items-center gap-4 rounded-lg bg-indigo-600 p-6 shadow-lg sm:flex-row sm:justify-between\"\n        >\n          <strong class=\"text-xl text-white sm:text-xl\"> Make Your Next Career Move! </strong>\n\n          <a\n            class=\"inline-flex items-center gap-2 rounded-full border border-white bg-white px-8 py-3 text-indigo-600 hover:bg-transparent hover:text-white\"\n            href=\"#\"\n          >\n            <span class=\"text-sm font-medium\"> Let's Get Started </span>\n\n            <svg\n              class=\"size-5 shadow-sm rtl:rotate-180\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M17 8l4 4m0 0l-4 4m4-4H3\"\n              />\n            </svg>\n          </a>\n        </div>\n\n        <div class=\"mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4\">\n          <div class=\"text-center sm:text-left\">\n            <p class=\"text-lg font-medium text-gray-900 dark:text-white\">About Us</p>\n\n            <ul class=\"mt-8 space-y-4 text-sm\">\n              <li>\n                <a\n                  class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Company History\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Meet the Team\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Employee Handbook\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Careers\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          <div class=\"text-center sm:text-left\">\n            <p class=\"text-lg font-medium text-gray-900 dark:text-white\">Our Services</p>\n\n            <ul class=\"mt-8 space-y-4 text-sm\">\n              <li>\n                <a\n                  class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Web Development\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Web Design\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Marketing\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Google Ads\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          <div class=\"text-center sm:text-left\">\n            <p class=\"text-lg font-medium text-gray-900 dark:text-white\">Resources</p>\n\n            <ul class=\"mt-8 space-y-4 text-sm\">\n              <li>\n                <a\n                  class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Online Guides\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Conference Notes\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Forum\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Downloads\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Upcoming Events\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          <div class=\"text-center sm:text-left\">\n            <p class=\"text-lg font-medium text-gray-900 dark:text-white\">Helpful Links</p>\n\n            <ul class=\"mt-8 space-y-4 text-sm\">\n              <li>\n                <a\n                  class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  FAQs\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Support\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"group flex justify-center gap-1.5 ltr:sm:justify-start rtl:sm:justify-end\"\n                  href=\"#\"\n                >\n                  <span\n                    class=\"text-gray-700 transition group-hover:text-gray-700/75 dark:text-white dark:group-hover:text-white/75\"\n                  >\n                    Live Chat\n                  </span>\n\n                  <span class=\"relative flex size-2\">\n                    <span\n                      class=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-teal-400 opacity-75\"\n                    ></span>\n                    <span class=\"relative inline-flex size-2 rounded-full bg-teal-500\"></span>\n                  </span>\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <div class=\"mt-16\">\n          <ul class=\"flex justify-center gap-6 sm:justify-end\">\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-teal-700 transition hover:text-teal-700/75 dark:text-teal-500 dark:hover:text-teal-500/75\"\n              >\n                <span class=\"sr-only\">Facebook</span>\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-teal-700 transition hover:text-teal-700/75 dark:text-teal-500 dark:hover:text-teal-500/75\"\n              >\n                <span class=\"sr-only\">Instagram</span>\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-teal-700 transition hover:text-teal-700/75 dark:text-teal-500 dark:hover:text-teal-500/75\"\n              >\n                <span class=\"sr-only\">Twitter</span>\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-teal-700 transition hover:text-teal-700/75 dark:text-teal-500 dark:hover:text-teal-500/75\"\n              >\n                <span class=\"sr-only\">GitHub</span>\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-teal-700 transition hover:text-teal-700/75 dark:text-teal-500 dark:hover:text-teal-500/75\"\n              >\n                <span class=\"sr-only\">Dribbble</span>\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n          </ul>\n\n          <div class=\"mt-16 sm:flex sm:items-center sm:justify-between\">\n            <div class=\"flex justify-center text-teal-600 sm:justify-start dark:text-teal-300\">\n              <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n\n            <p\n              class=\"mt-4 text-center text-sm text-gray-500 sm:mt-0 sm:text-right dark:text-gray-400\"\n            >\n              Copyright &copy; 2022. All rights reserved.\n            </p>\n          </div>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/12.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white\">\n      <div class=\"mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8\">\n        <div\n          class=\"flex flex-col items-center gap-4 rounded-lg bg-indigo-600 p-6 shadow-lg sm:flex-row sm:justify-between\"\n        >\n          <strong class=\"text-xl text-white sm:text-xl\"> Make Your Next Career Move! </strong>\n\n          <a\n            class=\"inline-flex items-center gap-2 rounded-full border border-white bg-white px-8 py-3 text-indigo-600 hover:bg-transparent hover:text-white\"\n            href=\"#\"\n          >\n            <span class=\"text-sm font-medium\"> Let's Get Started </span>\n\n            <svg\n              class=\"size-5 shadow-sm rtl:rotate-180\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M17 8l4 4m0 0l-4 4m4-4H3\"\n              />\n            </svg>\n          </a>\n        </div>\n\n        <div class=\"mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4\">\n          <div class=\"text-center sm:text-left\">\n            <p class=\"text-lg font-medium text-gray-900\">About Us</p>\n\n            <ul class=\"mt-8 space-y-4 text-sm\">\n              <li>\n                <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                  Company History\n                </a>\n              </li>\n\n              <li>\n                <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                  Meet the Team\n                </a>\n              </li>\n\n              <li>\n                <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                  Employee Handbook\n                </a>\n              </li>\n\n              <li>\n                <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Careers </a>\n              </li>\n            </ul>\n          </div>\n\n          <div class=\"text-center sm:text-left\">\n            <p class=\"text-lg font-medium text-gray-900\">Our Services</p>\n\n            <ul class=\"mt-8 space-y-4 text-sm\">\n              <li>\n                <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                  Web Development\n                </a>\n              </li>\n\n              <li>\n                <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Web Design </a>\n              </li>\n\n              <li>\n                <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Marketing </a>\n              </li>\n\n              <li>\n                <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Google Ads </a>\n              </li>\n            </ul>\n          </div>\n\n          <div class=\"text-center sm:text-left\">\n            <p class=\"text-lg font-medium text-gray-900\">Resources</p>\n\n            <ul class=\"mt-8 space-y-4 text-sm\">\n              <li>\n                <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                  Online Guides\n                </a>\n              </li>\n\n              <li>\n                <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                  Conference Notes\n                </a>\n              </li>\n\n              <li>\n                <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Forum </a>\n              </li>\n\n              <li>\n                <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Downloads </a>\n              </li>\n\n              <li>\n                <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                  Upcoming Events\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          <div class=\"text-center sm:text-left\">\n            <p class=\"text-lg font-medium text-gray-900\">Helpful Links</p>\n\n            <ul class=\"mt-8 space-y-4 text-sm\">\n              <li>\n                <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> FAQs </a>\n              </li>\n\n              <li>\n                <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Support </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"group flex justify-center gap-1.5 ltr:sm:justify-start rtl:sm:justify-end\"\n                  href=\"#\"\n                >\n                  <span class=\"text-gray-700 transition group-hover:text-gray-700/75\">\n                    Live Chat\n                  </span>\n\n                  <span class=\"relative flex size-2\">\n                    <span\n                      class=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-teal-400 opacity-75\"\n                    ></span>\n                    <span class=\"relative inline-flex size-2 rounded-full bg-teal-500\"></span>\n                  </span>\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <div class=\"mt-16\">\n          <ul class=\"flex justify-center gap-6 sm:justify-end\">\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-teal-700 transition hover:text-teal-700/75\"\n              >\n                <span class=\"sr-only\">Facebook</span>\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-teal-700 transition hover:text-teal-700/75\"\n              >\n                <span class=\"sr-only\">Instagram</span>\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-teal-700 transition hover:text-teal-700/75\"\n              >\n                <span class=\"sr-only\">Twitter</span>\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-teal-700 transition hover:text-teal-700/75\"\n              >\n                <span class=\"sr-only\">GitHub</span>\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-teal-700 transition hover:text-teal-700/75\"\n              >\n                <span class=\"sr-only\">Dribbble</span>\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n          </ul>\n\n          <div class=\"mt-16 sm:flex sm:items-center sm:justify-between\">\n            <div class=\"flex justify-center text-teal-600 sm:justify-start\">\n              <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n\n            <p class=\"mt-4 text-center text-sm text-gray-500 sm:mt-0 sm:text-right\">\n              Copyright &copy; 2022. All rights reserved.\n            </p>\n          </div>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white dark:bg-gray-900\">\n      <div class=\"mx-auto max-w-7xl space-y-8 px-4 py-16 sm:px-6 lg:space-y-16 lg:px-8\">\n        <div class=\"sm:flex sm:items-center sm:justify-between\">\n          <div class=\"text-teal-600 dark:text-teal-300\">\n            <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n                fill=\"currentColor\"\n              />\n\n              <path\n                d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </div>\n\n          <ul class=\"mt-8 flex justify-start gap-6 sm:mt-0 sm:justify-end\">\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n              >\n                <span class=\"sr-only\">Facebook</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n              >\n                <span class=\"sr-only\">Instagram</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n              >\n                <span class=\"sr-only\">Twitter</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n              >\n                <span class=\"sr-only\">GitHub</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n              >\n                <span class=\"sr-only\">Dribbble</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n          </ul>\n        </div>\n\n        <div\n          class=\"grid grid-cols-1 gap-8 border-t border-gray-100 pt-8 sm:grid-cols-2 lg:grid-cols-4 lg:pt-16 dark:border-gray-800\"\n        >\n          <div>\n            <p class=\"font-medium text-gray-900 dark:text-white\">Services</p>\n\n            <ul class=\"mt-6 space-y-4 text-sm\">\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                  1on1 Coaching\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                  Company Review\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                  Accounts Review\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                  HR Consulting\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                  SEO Optimisation\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          <div>\n            <p class=\"font-medium text-gray-900 dark:text-white\">Company</p>\n\n            <ul class=\"mt-6 space-y-4 text-sm\">\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                  About\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                  Meet the Team\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                  Accounts Review\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          <div>\n            <p class=\"font-medium text-gray-900 dark:text-white\">Helpful Links</p>\n\n            <ul class=\"mt-6 space-y-4 text-sm\">\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                  Contact\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                  FAQs\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                  Live Chat\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          <div>\n            <p class=\"font-medium text-gray-900 dark:text-white\">Legal</p>\n\n            <ul class=\"mt-6 space-y-4 text-sm\">\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                  Accessibility\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                  Returns Policy\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                  Refund Policy\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                  Hiring-3 Statistics\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <p class=\"text-xs text-gray-500 dark:text-gray-400\">\n          &copy; 2022. Company Name. All rights reserved.\n        </p>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white\">\n      <div class=\"mx-auto max-w-7xl space-y-8 px-4 py-16 sm:px-6 lg:space-y-16 lg:px-8\">\n        <div class=\"sm:flex sm:items-center sm:justify-between\">\n          <div class=\"text-teal-600\">\n            <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n                fill=\"currentColor\"\n              />\n              <path\n                d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </div>\n\n          <ul class=\"mt-8 flex justify-start gap-6 sm:mt-0 sm:justify-end\">\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75\"\n              >\n                <span class=\"sr-only\">Facebook</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75\"\n              >\n                <span class=\"sr-only\">Instagram</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75\"\n              >\n                <span class=\"sr-only\">Twitter</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75\"\n              >\n                <span class=\"sr-only\">GitHub</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75\"\n              >\n                <span class=\"sr-only\">Dribbble</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n          </ul>\n        </div>\n\n        <div\n          class=\"grid grid-cols-1 gap-8 border-t border-gray-100 pt-8 sm:grid-cols-2 lg:grid-cols-4 lg:pt-16\"\n        >\n          <div>\n            <p class=\"font-medium text-gray-900\">Services</p>\n\n            <ul class=\"mt-6 space-y-4 text-sm\">\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> 1on1 Coaching </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Company Review </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Accounts Review </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> HR Consulting </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> SEO Optimisation </a>\n              </li>\n            </ul>\n          </div>\n\n          <div>\n            <p class=\"font-medium text-gray-900\">Company</p>\n\n            <ul class=\"mt-6 space-y-4 text-sm\">\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> About </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Meet the Team </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Accounts Review </a>\n              </li>\n            </ul>\n          </div>\n\n          <div>\n            <p class=\"font-medium text-gray-900\">Helpful Links</p>\n\n            <ul class=\"mt-6 space-y-4 text-sm\">\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Contact </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> FAQs </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Live Chat </a>\n              </li>\n            </ul>\n          </div>\n\n          <div>\n            <p class=\"font-medium text-gray-900\">Legal</p>\n\n            <ul class=\"mt-6 space-y-4 text-sm\">\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Accessibility </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Returns Policy </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Refund Policy </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                  Hiring-3 Statistics\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <p class=\"text-xs text-gray-500\">&copy; 2022. Company Name. All rights reserved.</p>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white dark:bg-gray-900\">\n      <div class=\"mx-auto max-w-7xl space-y-8 px-4 py-16 sm:px-6 lg:space-y-16 lg:px-8\">\n        <div class=\"grid grid-cols-1 gap-8 lg:grid-cols-3\">\n          <div>\n            <div class=\"text-teal-600 dark:text-teal-300\">\n              <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n\n            <p class=\"mt-4 max-w-xs text-gray-500 dark:text-gray-400\">\n              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse non cupiditate quae nam\n              molestias.\n            </p>\n\n            <ul class=\"mt-8 flex gap-6\">\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                >\n                  <span class=\"sr-only\">Facebook</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                >\n                  <span class=\"sr-only\">Instagram</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                >\n                  <span class=\"sr-only\">Twitter</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                >\n                  <span class=\"sr-only\">GitHub</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                >\n                  <span class=\"sr-only\">Dribbble</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          <div class=\"grid grid-cols-1 gap-8 sm:grid-cols-2 lg:col-span-2 lg:grid-cols-4\">\n            <div>\n              <p class=\"font-medium text-gray-900 dark:text-white\">Services</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    1on1 Coaching\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Company Review\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Accounts Review\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    HR Consulting\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    SEO Optimisation\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div>\n              <p class=\"font-medium text-gray-900 dark:text-white\">Company</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    About\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Meet the Team\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Accounts Review\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div>\n              <p class=\"font-medium text-gray-900 dark:text-white\">Helpful Links</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Contact\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    FAQs\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Live Chat\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div>\n              <p class=\"font-medium text-gray-900 dark:text-white\">Legal</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Accessibility\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Returns Policy\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Refund Policy\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Hiring-3 Statistics\n                  </a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <p class=\"text-xs text-gray-500 dark:text-gray-400\">\n          &copy; 2022. Company Name. All rights reserved.\n        </p>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white\">\n      <div class=\"mx-auto max-w-7xl space-y-8 px-4 py-16 sm:px-6 lg:space-y-16 lg:px-8\">\n        <div class=\"grid grid-cols-1 gap-8 lg:grid-cols-3\">\n          <div>\n            <div class=\"text-teal-600\">\n              <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n\n            <p class=\"mt-4 max-w-xs text-gray-500\">\n              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse non cupiditate quae nam\n              molestias.\n            </p>\n\n            <ul class=\"mt-8 flex gap-6\">\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75\"\n                >\n                  <span class=\"sr-only\">Facebook</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75\"\n                >\n                  <span class=\"sr-only\">Instagram</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75\"\n                >\n                  <span class=\"sr-only\">Twitter</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75\"\n                >\n                  <span class=\"sr-only\">GitHub</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75\"\n                >\n                  <span class=\"sr-only\">Dribbble</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          <div class=\"grid grid-cols-1 gap-8 sm:grid-cols-2 lg:col-span-2 lg:grid-cols-4\">\n            <div>\n              <p class=\"font-medium text-gray-900\">Services</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> 1on1 Coaching </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Company Review </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                    Accounts Review\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> HR Consulting </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                    SEO Optimisation\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div>\n              <p class=\"font-medium text-gray-900\">Company</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> About </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Meet the Team </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                    Accounts Review\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div>\n              <p class=\"font-medium text-gray-900\">Helpful Links</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Contact </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> FAQs </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Live Chat </a>\n                </li>\n              </ul>\n            </div>\n\n            <div>\n              <p class=\"font-medium text-gray-900\">Legal</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Accessibility </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Returns Policy </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Refund Policy </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                    Hiring-3 Statistics\n                  </a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <p class=\"text-xs text-gray-500\">&copy; 2022. Company Name. All rights reserved.</p>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white dark:bg-gray-900\">\n      <div class=\"mx-auto max-w-7xl px-4 pt-16 pb-8 sm:px-6 lg:px-8 lg:pt-24\">\n        <div class=\"text-center\">\n          <h2 class=\"text-3xl font-extrabold text-gray-900 sm:text-5xl dark:text-white\">\n            Customise Your Product\n          </h2>\n\n          <p class=\"mx-auto mt-4 max-w-sm text-gray-500 dark:text-gray-400\">\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum maiores ipsum eos\n            temporibus ea nihil.\n          </p>\n\n          <a\n            href=\"#\"\n            class=\"mt-8 inline-block rounded-full border border-indigo-600 px-12 py-3 text-sm font-medium text-white hover:bg-indigo-600 hover:text-white\"\n          >\n            Get Started\n          </a>\n        </div>\n\n        <div\n          class=\"mt-16 border-t border-gray-100 pt-8 sm:flex sm:items-center sm:justify-between lg:mt-24 dark:border-gray-800\"\n        >\n          <ul class=\"flex flex-wrap justify-center gap-4 text-xs lg:justify-end\">\n            <li>\n              <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75 dark:text-gray-400\">\n                Terms & Conditions\n              </a>\n            </li>\n\n            <li>\n              <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75 dark:text-gray-400\">\n                Privacy Policy\n              </a>\n            </li>\n\n            <li>\n              <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75 dark:text-gray-400\">\n                Cookies\n              </a>\n            </li>\n          </ul>\n\n          <ul class=\"mt-8 flex justify-center gap-6 sm:mt-0 lg:justify-end\">\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n              >\n                <span class=\"sr-only\">Facebook</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n              >\n                <span class=\"sr-only\">Instagram</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n              >\n                <span class=\"sr-only\">Twitter</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n              >\n                <span class=\"sr-only\">GitHub</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n              >\n                <span class=\"sr-only\">Dribbble</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white\">\n      <div class=\"mx-auto max-w-7xl px-4 pt-16 pb-8 sm:px-6 lg:px-8 lg:pt-24\">\n        <div class=\"text-center\">\n          <h2 class=\"text-3xl font-extrabold text-gray-900 sm:text-5xl\">Customise Your Product</h2>\n\n          <p class=\"mx-auto mt-4 max-w-sm text-gray-500\">\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum maiores ipsum eos\n            temporibus ea nihil.\n          </p>\n\n          <a\n            href=\"#\"\n            class=\"mt-8 inline-block rounded-full border border-indigo-600 px-12 py-3 text-sm font-medium text-indigo-600 hover:bg-indigo-600 hover:text-white\"\n          >\n            Get Started\n          </a>\n        </div>\n\n        <div\n          class=\"mt-16 border-t border-gray-100 pt-8 sm:flex sm:items-center sm:justify-between lg:mt-24\"\n        >\n          <ul class=\"flex flex-wrap justify-center gap-4 text-xs lg:justify-end\">\n            <li>\n              <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75\"> Terms & Conditions </a>\n            </li>\n\n            <li>\n              <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75\"> Privacy Policy </a>\n            </li>\n\n            <li>\n              <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75\"> Cookies </a>\n            </li>\n          </ul>\n\n          <ul class=\"mt-8 flex justify-center gap-6 sm:mt-0 lg:justify-end\">\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75\"\n              >\n                <span class=\"sr-only\">Facebook</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75\"\n              >\n                <span class=\"sr-only\">Instagram</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75\"\n              >\n                <span class=\"sr-only\">Twitter</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75\"\n              >\n                <span class=\"sr-only\">GitHub</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n\n            <li>\n              <a\n                href=\"#\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                class=\"text-gray-700 transition hover:opacity-75\"\n              >\n                <span class=\"sr-only\">Dribbble</span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/5-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white lg:grid lg:grid-cols-5 dark:bg-gray-900\">\n      <div class=\"relative block h-32 lg:col-span-2 lg:h-full\">\n        <img\n          src=\"https://images.unsplash.com/photo-1642370324100-324b21fab3a9?auto=format&fit=crop&q=80&w=1160\"\n          alt=\"\"\n          class=\"absolute inset-0 h-full w-full object-cover\"\n        />\n      </div>\n\n      <div class=\"px-4 py-16 sm:px-6 lg:col-span-3 lg:px-8\">\n        <div class=\"grid grid-cols-1 gap-8 sm:grid-cols-2\">\n          <div>\n            <p>\n              <span class=\"text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400\">\n                Call us\n              </span>\n\n              <a\n                href=\"#\"\n                class=\"block text-2xl font-medium text-gray-900 hover:opacity-75 sm:text-3xl dark:text-white\"\n              >\n                0123456789\n              </a>\n            </p>\n\n            <ul class=\"mt-8 space-y-1 text-sm text-gray-700 dark:text-gray-200\">\n              <li>Monday to Friday: 10am - 5pm</li>\n              <li>Weekend: 10am - 3pm</li>\n            </ul>\n\n            <ul class=\"mt-8 flex gap-6\">\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                >\n                  <span class=\"sr-only\">Facebook</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                >\n                  <span class=\"sr-only\">Instagram</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                >\n                  <span class=\"sr-only\">Twitter</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                >\n                  <span class=\"sr-only\">GitHub</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                >\n                  <span class=\"sr-only\">Dribbble</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            <div>\n              <p class=\"font-medium text-gray-900 dark:text-white\">Services</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    1on1 Coaching\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Company Review\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Accounts Review\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    HR Consulting\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    SEO Optimisation\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div>\n              <p class=\"font-medium text-gray-900 dark:text-white\">Company</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    About\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Meet the Team\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\">\n                    Accounts Review\n                  </a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"mt-12 border-t border-gray-100 pt-12 dark:border-gray-800\">\n          <div class=\"sm:flex sm:items-center sm:justify-between\">\n            <ul class=\"flex flex-wrap gap-4 text-xs\">\n              <li>\n                <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75 dark:text-gray-400\">\n                  Terms & Conditions\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75 dark:text-gray-400\">\n                  Privacy Policy\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75 dark:text-gray-400\">\n                  Cookies\n                </a>\n              </li>\n            </ul>\n\n            <p class=\"mt-8 text-xs text-gray-500 sm:mt-0 dark:text-gray-400\">\n              &copy; 2022. Company Name. All rights reserved.\n            </p>\n          </div>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white lg:grid lg:grid-cols-5\">\n      <div class=\"relative block h-32 lg:col-span-2 lg:h-full\">\n        <img\n          src=\"https://images.unsplash.com/photo-1642370324100-324b21fab3a9?auto=format&fit=crop&q=80&w=1160\"\n          alt=\"\"\n          class=\"absolute inset-0 h-full w-full object-cover\"\n        />\n      </div>\n\n      <div class=\"px-4 py-16 sm:px-6 lg:col-span-3 lg:px-8\">\n        <div class=\"grid grid-cols-1 gap-8 sm:grid-cols-2\">\n          <div>\n            <p>\n              <span class=\"text-xs tracking-wide text-gray-500 uppercase\"> Call us </span>\n\n              <a\n                href=\"#\"\n                class=\"block text-2xl font-medium text-gray-900 hover:opacity-75 sm:text-3xl\"\n              >\n                0123456789\n              </a>\n            </p>\n\n            <ul class=\"mt-8 space-y-1 text-sm text-gray-700\">\n              <li>Monday to Friday: 10am - 5pm</li>\n              <li>Weekend: 10am - 3pm</li>\n            </ul>\n\n            <ul class=\"mt-8 flex gap-6\">\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75\"\n                >\n                  <span class=\"sr-only\">Facebook</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75\"\n                >\n                  <span class=\"sr-only\">Instagram</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75\"\n                >\n                  <span class=\"sr-only\">Twitter</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75\"\n                >\n                  <span class=\"sr-only\">GitHub</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  class=\"text-gray-700 transition hover:opacity-75\"\n                >\n                  <span class=\"sr-only\">Dribbble</span>\n\n                  <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            <div>\n              <p class=\"font-medium text-gray-900\">Services</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> 1on1 Coaching </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Company Review </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                    Accounts Review\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> HR Consulting </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                    SEO Optimisation\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div>\n              <p class=\"font-medium text-gray-900\">Company</p>\n\n              <ul class=\"mt-6 space-y-4 text-sm\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> About </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Meet the Team </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                    Accounts Review\n                  </a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"mt-12 border-t border-gray-100 pt-12\">\n          <div class=\"sm:flex sm:items-center sm:justify-between\">\n            <ul class=\"flex flex-wrap gap-4 text-xs\">\n              <li>\n                <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75\">\n                  Terms & Conditions\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75\"> Privacy Policy </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75\"> Cookies </a>\n              </li>\n            </ul>\n\n            <p class=\"mt-8 text-xs text-gray-500 sm:mt-0\">\n              &copy; 2022. Company Name. All rights reserved.\n            </p>\n          </div>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/6-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white dark:bg-gray-900\">\n      <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        <div class=\"lg:grid lg:grid-cols-2\">\n          <div\n            class=\"border-b border-gray-100 py-8 lg:order-last lg:border-s lg:border-b-0 lg:py-16 lg:ps-16 dark:border-gray-800\"\n          >\n            <div class=\"block text-teal-600 lg:hidden dark:text-teal-300\">\n              <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n\n            <div class=\"mt-8 space-y-4 lg:mt-0\">\n              <span class=\"hidden h-1 w-10 rounded-sm bg-teal-500 lg:block\"></span>\n\n              <div>\n                <h2 class=\"text-2xl font-medium text-gray-900 dark:text-white\">Request a Demo</h2>\n\n                <p class=\"mt-4 max-w-lg text-gray-500 dark:text-gray-400\">\n                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, harum deserunt\n                  nesciunt praesentium, repellendus eum perspiciatis ratione pariatur a aperiam eius\n                  numquam doloribus asperiores sunt.\n                </p>\n              </div>\n\n              <form class=\"mt-6 w-full\">\n                <label for=\"UserEmail\" class=\"sr-only\"> Email </label>\n\n                <div\n                  class=\"rounded-md border border-gray-100 p-2 focus-within:ring-3 sm:flex sm:items-center sm:gap-4 dark:border-gray-800\"\n                >\n                  <input\n                    type=\"email\"\n                    id=\"UserEmail\"\n                    placeholder=\"john@rhcp.com\"\n                    class=\"w-full border-none focus:border-transparent focus:ring-transparent sm:text-sm dark:bg-gray-900 dark:text-white\"\n                  />\n\n                  <button\n                    class=\"mt-1 w-full rounded-sm bg-teal-500 px-6 py-3 text-sm font-bold tracking-wide text-white uppercase transition-none hover:bg-teal-600 sm:mt-0 sm:w-auto sm:shrink-0\"\n                  >\n                    Sign Up\n                  </button>\n                </div>\n              </form>\n            </div>\n          </div>\n\n          <div class=\"py-8 lg:py-16 lg:pe-16\">\n            <div class=\"hidden text-teal-600 lg:block dark:text-teal-300\">\n              <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n\n            <div class=\"mt-8 grid grid-cols-1 gap-8 sm:grid-cols-3\">\n              <div>\n                <p class=\"font-medium text-gray-900 dark:text-white\">Services</p>\n\n                <ul class=\"mt-6 space-y-4 text-sm\">\n                  <li>\n                    <a\n                      href=\"#\"\n                      class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                    >\n                      1on1 Coaching\n                    </a>\n                  </li>\n\n                  <li>\n                    <a\n                      href=\"#\"\n                      class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                    >\n                      Company Review\n                    </a>\n                  </li>\n\n                  <li>\n                    <a\n                      href=\"#\"\n                      class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                    >\n                      Accounts Review\n                    </a>\n                  </li>\n\n                  <li>\n                    <a\n                      href=\"#\"\n                      class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                    >\n                      HR Consulting\n                    </a>\n                  </li>\n\n                  <li>\n                    <a\n                      href=\"#\"\n                      class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                    >\n                      SEO Optimisation\n                    </a>\n                  </li>\n                </ul>\n              </div>\n\n              <div>\n                <p class=\"font-medium text-gray-900 dark:text-white\">Company</p>\n\n                <ul class=\"mt-6 space-y-4 text-sm\">\n                  <li>\n                    <a\n                      href=\"#\"\n                      class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                    >\n                      About\n                    </a>\n                  </li>\n\n                  <li>\n                    <a\n                      href=\"#\"\n                      class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                    >\n                      Meet the Team\n                    </a>\n                  </li>\n\n                  <li>\n                    <a\n                      href=\"#\"\n                      class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                    >\n                      Accounts Review\n                    </a>\n                  </li>\n                </ul>\n              </div>\n\n              <div>\n                <p class=\"font-medium text-gray-900 dark:text-white\">Helpful Links</p>\n\n                <ul class=\"mt-6 space-y-4 text-sm\">\n                  <li>\n                    <a\n                      href=\"#\"\n                      class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                    >\n                      Contact\n                    </a>\n                  </li>\n\n                  <li>\n                    <a\n                      href=\"#\"\n                      class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                    >\n                      FAQs\n                    </a>\n                  </li>\n\n                  <li>\n                    <a\n                      href=\"#\"\n                      class=\"text-gray-700 transition hover:opacity-75 dark:text-gray-200\"\n                    >\n                      Live Chat\n                    </a>\n                  </li>\n                </ul>\n              </div>\n            </div>\n\n            <div class=\"mt-8 border-t border-gray-100 pt-8 dark:border-gray-800\">\n              <ul class=\"flex flex-wrap gap-4 text-xs\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75 dark:text-gray-400\">\n                    Terms & Conditions\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75 dark:text-gray-400\">\n                    Privacy Policy\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75 dark:text-gray-400\">\n                    Cookies\n                  </a>\n                </li>\n              </ul>\n\n              <p class=\"mt-8 text-xs text-gray-500 dark:text-gray-400\">\n                &copy; 2022. Company Name. All rights reserved.\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/6.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white\">\n      <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        <div class=\"lg:grid lg:grid-cols-2\">\n          <div\n            class=\"border-b border-gray-100 py-8 lg:order-last lg:border-s lg:border-b-0 lg:py-16 lg:ps-16\"\n          >\n            <div class=\"block text-teal-600 lg:hidden\">\n              <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n\n            <div class=\"mt-8 space-y-4 lg:mt-0\">\n              <span class=\"hidden h-1 w-10 rounded-sm bg-teal-500 lg:block\"></span>\n\n              <div>\n                <h2 class=\"text-2xl font-medium text-gray-900\">Request a Demo</h2>\n\n                <p class=\"mt-4 max-w-lg text-gray-500\">\n                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, harum deserunt\n                  nesciunt praesentium, repellendus eum perspiciatis ratione pariatur a aperiam eius\n                  numquam doloribus asperiores sunt.\n                </p>\n              </div>\n\n              <form class=\"mt-6 w-full\">\n                <label for=\"UserEmail\" class=\"sr-only\"> Email </label>\n\n                <div\n                  class=\"rounded-md border border-gray-100 p-2 focus-within:ring-3 sm:flex sm:items-center sm:gap-4\"\n                >\n                  <input\n                    type=\"email\"\n                    id=\"UserEmail\"\n                    placeholder=\"john@rhcp.com\"\n                    class=\"w-full border-none focus:border-transparent focus:ring-transparent sm:text-sm\"\n                  />\n\n                  <button\n                    class=\"mt-1 w-full rounded-sm bg-teal-500 px-6 py-3 text-sm font-bold tracking-wide text-white uppercase transition-none hover:bg-teal-600 sm:mt-0 sm:w-auto sm:shrink-0\"\n                  >\n                    Sign Up\n                  </button>\n                </div>\n              </form>\n            </div>\n          </div>\n\n          <div class=\"py-8 lg:py-16 lg:pe-16\">\n            <div class=\"hidden text-teal-600 lg:block\">\n              <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n\n            <div class=\"mt-8 grid grid-cols-1 gap-8 sm:grid-cols-3\">\n              <div>\n                <p class=\"font-medium text-gray-900\">Services</p>\n\n                <ul class=\"mt-6 space-y-4 text-sm\">\n                  <li>\n                    <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                      1on1 Coaching\n                    </a>\n                  </li>\n\n                  <li>\n                    <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                      Company Review\n                    </a>\n                  </li>\n\n                  <li>\n                    <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                      Accounts Review\n                    </a>\n                  </li>\n\n                  <li>\n                    <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                      HR Consulting\n                    </a>\n                  </li>\n\n                  <li>\n                    <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                      SEO Optimisation\n                    </a>\n                  </li>\n                </ul>\n              </div>\n\n              <div>\n                <p class=\"font-medium text-gray-900\">Company</p>\n\n                <ul class=\"mt-6 space-y-4 text-sm\">\n                  <li>\n                    <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> About </a>\n                  </li>\n\n                  <li>\n                    <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                      Meet the Team\n                    </a>\n                  </li>\n\n                  <li>\n                    <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\">\n                      Accounts Review\n                    </a>\n                  </li>\n                </ul>\n              </div>\n\n              <div>\n                <p class=\"font-medium text-gray-900\">Helpful Links</p>\n\n                <ul class=\"mt-6 space-y-4 text-sm\">\n                  <li>\n                    <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Contact </a>\n                  </li>\n\n                  <li>\n                    <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> FAQs </a>\n                  </li>\n\n                  <li>\n                    <a href=\"#\" class=\"text-gray-700 transition hover:opacity-75\"> Live Chat </a>\n                  </li>\n                </ul>\n              </div>\n            </div>\n\n            <div class=\"mt-8 border-t border-gray-100 pt-8\">\n              <ul class=\"flex flex-wrap gap-4 text-xs\">\n                <li>\n                  <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75\">\n                    Terms & Conditions\n                  </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75\"> Privacy Policy </a>\n                </li>\n\n                <li>\n                  <a href=\"#\" class=\"text-gray-500 transition hover:opacity-75\"> Cookies </a>\n                </li>\n              </ul>\n\n              <p class=\"mt-8 text-xs text-gray-500\">\n                &copy; 2022. Company Name. All rights reserved.\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/7-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white dark:bg-gray-900\">\n      <div class=\"mx-auto max-w-7xl px-4 pt-16 pb-8 sm:px-6 lg:px-8\">\n        <div class=\"mx-auto max-w-md\">\n          <strong\n            class=\"block text-center text-xl font-bold text-gray-900 sm:text-3xl dark:text-white\"\n          >\n            Want us to email you with the latest blockbuster news?\n          </strong>\n\n          <form class=\"mt-6\">\n            <div class=\"relative max-w-lg\">\n              <label class=\"sr-only\" for=\"email\"> Email </label>\n\n              <input\n                class=\"w-full rounded-full border-gray-200 bg-gray-100 p-4 pe-32 text-sm font-medium dark:border-gray-700 dark:bg-gray-800 dark:text-white\"\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"john@doe.com\"\n              />\n\n              <button\n                class=\"absolute end-1 top-1/2 -translate-y-1/2 rounded-full bg-blue-600 px-5 py-3 text-sm font-medium text-white transition hover:bg-blue-700\"\n              >\n                Subscribe\n              </button>\n            </div>\n          </form>\n        </div>\n\n        <div class=\"mt-16 grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-32\">\n          <div class=\"mx-auto max-w-sm lg:max-w-none\">\n            <p class=\"mt-4 text-center text-gray-500 lg:text-left lg:text-lg dark:text-gray-400\">\n              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium natus quod\n              eveniet aut perferendis distinctio iusto repudiandae, provident velit earum?\n            </p>\n\n            <div class=\"mt-6 flex justify-center gap-4 lg:justify-start\">\n              <a\n                class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <span class=\"sr-only\"> Facebook </span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n\n              <a\n                class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <span class=\"sr-only\"> Instagram </span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n\n              <a\n                class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <span class=\"sr-only\"> Twitter </span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                  />\n                </svg>\n              </a>\n\n              <a\n                class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <span class=\"sr-only\"> GitHub </span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n\n              <a\n                class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <span class=\"sr-only\"> Dribbble </span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </div>\n          </div>\n\n          <div class=\"grid grid-cols-1 gap-8 text-center lg:grid-cols-3 lg:text-left\">\n            <div>\n              <strong class=\"font-medium text-gray-900 dark:text-white\"> Services </strong>\n\n              <ul class=\"mt-6 space-y-1\">\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Marketing\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Graphic Design\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    App Development\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Web Development\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div>\n              <strong class=\"font-medium text-gray-900 dark:text-white\"> About </strong>\n\n              <ul class=\"mt-6 space-y-1\">\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    About\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Careers\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    History\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Our Team\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div>\n              <strong class=\"font-medium text-gray-900 dark:text-white\"> Support </strong>\n\n              <ul class=\"mt-6 space-y-1\">\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    FAQs\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Contact\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Live Chat\n                  </a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"mt-16 border-t border-gray-100 pt-8 dark:border-gray-800\">\n          <p class=\"text-center text-xs/relaxed text-gray-500 dark:text-gray-400\">\n            © Company 2022. All rights reserved.\n\n            <br />\n\n            Created with\n            <a\n              href=\"#\"\n              class=\"text-gray-700 underline transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n              >Laravel</a\n            >\n            and\n            <a\n              href=\"#\"\n              class=\"text-gray-700 underline transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n              >Laravel Livewire</a\n            >.\n          </p>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/7.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-white\">\n      <div class=\"mx-auto max-w-7xl px-4 pt-16 pb-8 sm:px-6 lg:px-8\">\n        <div class=\"mx-auto max-w-md\">\n          <strong class=\"block text-center text-xl font-bold text-gray-900 sm:text-3xl\">\n            Want us to email you with the latest blockbuster news?\n          </strong>\n\n          <form class=\"mt-6\">\n            <div class=\"relative max-w-lg\">\n              <label class=\"sr-only\" for=\"email\"> Email </label>\n\n              <input\n                class=\"w-full rounded-full border-gray-200 bg-gray-100 p-4 pe-32 text-sm font-medium\"\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"john@doe.com\"\n              />\n\n              <button\n                class=\"absolute end-1 top-1/2 -translate-y-1/2 rounded-full bg-blue-600 px-5 py-3 text-sm font-medium text-white transition hover:bg-blue-700\"\n              >\n                Subscribe\n              </button>\n            </div>\n          </form>\n        </div>\n\n        <div class=\"mt-16 grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-32\">\n          <div class=\"mx-auto max-w-sm lg:max-w-none\">\n            <p class=\"mt-4 text-center text-gray-500 lg:text-left lg:text-lg\">\n              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium natus quod\n              eveniet aut perferendis distinctio iusto repudiandae, provident velit earum?\n            </p>\n\n            <div class=\"mt-6 flex justify-center gap-4 lg:justify-start\">\n              <a\n                class=\"text-gray-700 transition hover:text-gray-700/75\"\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <span class=\"sr-only\"> Facebook </span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n\n              <a\n                class=\"text-gray-700 transition hover:text-gray-700/75\"\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <span class=\"sr-only\"> Instagram </span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n\n              <a\n                class=\"text-gray-700 transition hover:text-gray-700/75\"\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <span class=\"sr-only\"> Twitter </span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                  />\n                </svg>\n              </a>\n\n              <a\n                class=\"text-gray-700 transition hover:text-gray-700/75\"\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <span class=\"sr-only\"> GitHub </span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n\n              <a\n                class=\"text-gray-700 transition hover:text-gray-700/75\"\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <span class=\"sr-only\"> Dribbble </span>\n\n                <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </div>\n          </div>\n\n          <div class=\"grid grid-cols-1 gap-8 text-center lg:grid-cols-3 lg:text-left\">\n            <div>\n              <strong class=\"font-medium text-gray-900\"> Services </strong>\n\n              <ul class=\"mt-6 space-y-1\">\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                    Marketing\n                  </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                    Graphic Design\n                  </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                    App Development\n                  </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                    Web Development\n                  </a>\n                </li>\n              </ul>\n            </div>\n\n            <div>\n              <strong class=\"font-medium text-gray-900\"> About </strong>\n\n              <ul class=\"mt-6 space-y-1\">\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> About </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Careers </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> History </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Our Team </a>\n                </li>\n              </ul>\n            </div>\n\n            <div>\n              <strong class=\"font-medium text-gray-900\"> Support </strong>\n\n              <ul class=\"mt-6 space-y-1\">\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> FAQs </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Contact </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\">\n                    Live Chat\n                  </a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"mt-16 border-t border-gray-100 pt-8\">\n          <p class=\"text-center text-xs/relaxed text-gray-500\">\n            © Company 2022. All rights reserved.\n\n            <br />\n\n            Created with\n            <a href=\"#\" class=\"text-gray-700 underline transition hover:text-gray-700/75\"\n              >Laravel</a\n            >\n            and\n            <a href=\"#\" class=\"text-gray-700 underline transition hover:text-gray-700/75\"\n              >Laravel Livewire</a\n            >.\n          </p>\n        </div>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/8-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-gray-100 dark:bg-gray-900\">\n      <div class=\"mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8\">\n        <div class=\"flex justify-center text-teal-600 dark:text-teal-300\">\n          <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </div>\n\n        <p\n          class=\"mx-auto mt-6 max-w-md text-center leading-relaxed text-gray-500 dark:text-gray-400\"\n        >\n          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt consequuntur amet culpa\n          cum itaque neque.\n        </p>\n\n        <ul class=\"mt-12 flex flex-wrap justify-center gap-6 md:gap-8 lg:gap-12\">\n          <li>\n            <a\n              class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n              href=\"#\"\n            >\n              About\n            </a>\n          </li>\n\n          <li>\n            <a\n              class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n              href=\"#\"\n            >\n              Careers\n            </a>\n          </li>\n\n          <li>\n            <a\n              class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n              href=\"#\"\n            >\n              History\n            </a>\n          </li>\n\n          <li>\n            <a\n              class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n              href=\"#\"\n            >\n              Services\n            </a>\n          </li>\n\n          <li>\n            <a\n              class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n              href=\"#\"\n            >\n              Projects\n            </a>\n          </li>\n\n          <li>\n            <a\n              class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n              href=\"#\"\n            >\n              Blog\n            </a>\n          </li>\n        </ul>\n\n        <ul class=\"mt-12 flex justify-center gap-6 md:gap-8\">\n          <li>\n            <a\n              href=\"#\"\n              rel=\"noreferrer\"\n              target=\"_blank\"\n              class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n            >\n              <span class=\"sr-only\">Facebook</span>\n              <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </a>\n          </li>\n\n          <li>\n            <a\n              href=\"#\"\n              rel=\"noreferrer\"\n              target=\"_blank\"\n              class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n            >\n              <span class=\"sr-only\">Instagram</span>\n              <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </a>\n          </li>\n\n          <li>\n            <a\n              href=\"#\"\n              rel=\"noreferrer\"\n              target=\"_blank\"\n              class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n            >\n              <span class=\"sr-only\">Twitter</span>\n              <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path\n                  d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                />\n              </svg>\n            </a>\n          </li>\n\n          <li>\n            <a\n              href=\"#\"\n              rel=\"noreferrer\"\n              target=\"_blank\"\n              class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n            >\n              <span class=\"sr-only\">GitHub</span>\n              <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </a>\n          </li>\n\n          <li>\n            <a\n              href=\"#\"\n              rel=\"noreferrer\"\n              target=\"_blank\"\n              class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n            >\n              <span class=\"sr-only\">Dribbble</span>\n              <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/8.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-gray-100\">\n      <div class=\"mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8\">\n        <div class=\"flex justify-center text-teal-600\">\n          <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </div>\n\n        <p class=\"mx-auto mt-6 max-w-md text-center leading-relaxed text-gray-500\">\n          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt consequuntur amet culpa\n          cum itaque neque.\n        </p>\n\n        <ul class=\"mt-12 flex flex-wrap justify-center gap-6 md:gap-8 lg:gap-12\">\n          <li>\n            <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> About </a>\n          </li>\n\n          <li>\n            <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Careers </a>\n          </li>\n\n          <li>\n            <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> History </a>\n          </li>\n\n          <li>\n            <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Services </a>\n          </li>\n\n          <li>\n            <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Projects </a>\n          </li>\n\n          <li>\n            <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Blog </a>\n          </li>\n        </ul>\n\n        <ul class=\"mt-12 flex justify-center gap-6 md:gap-8\">\n          <li>\n            <a\n              href=\"#\"\n              rel=\"noreferrer\"\n              target=\"_blank\"\n              class=\"text-gray-700 transition hover:text-gray-700/75\"\n            >\n              <span class=\"sr-only\">Facebook</span>\n              <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </a>\n          </li>\n\n          <li>\n            <a\n              href=\"#\"\n              rel=\"noreferrer\"\n              target=\"_blank\"\n              class=\"text-gray-700 transition hover:text-gray-700/75\"\n            >\n              <span class=\"sr-only\">Instagram</span>\n              <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </a>\n          </li>\n\n          <li>\n            <a\n              href=\"#\"\n              rel=\"noreferrer\"\n              target=\"_blank\"\n              class=\"text-gray-700 transition hover:text-gray-700/75\"\n            >\n              <span class=\"sr-only\">Twitter</span>\n              <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path\n                  d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"\n                />\n              </svg>\n            </a>\n          </li>\n\n          <li>\n            <a\n              href=\"#\"\n              rel=\"noreferrer\"\n              target=\"_blank\"\n              class=\"text-gray-700 transition hover:text-gray-700/75\"\n            >\n              <span class=\"sr-only\">GitHub</span>\n              <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </a>\n          </li>\n\n          <li>\n            <a\n              href=\"#\"\n              rel=\"noreferrer\"\n              target=\"_blank\"\n              class=\"text-gray-700 transition hover:text-gray-700/75\"\n            >\n              <span class=\"sr-only\">Dribbble</span>\n              <svg class=\"size-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/9-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-gray-100 dark:bg-gray-900\">\n      <div class=\"relative mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:pt-24\">\n        <div class=\"absolute end-4 top-4 sm:end-6 sm:top-6 lg:end-8 lg:top-8\">\n          <a\n            class=\"inline-block rounded-full bg-teal-600 p-2 text-white shadow-sm transition hover:bg-teal-500 sm:p-3 lg:p-4 dark:bg-gray-700 dark:text-teal-300 dark:hover:bg-gray-600\"\n            href=\"#MainContent\"\n          >\n            <span class=\"sr-only\">Back to top</span>\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-5\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          </a>\n        </div>\n\n        <div class=\"lg:flex lg:items-end lg:justify-between\">\n          <div>\n            <div class=\"flex justify-center text-teal-600 lg:justify-start dark:text-teal-300\">\n              <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n\n            <p\n              class=\"mx-auto mt-6 max-w-md text-center leading-relaxed text-gray-500 lg:text-left dark:text-gray-400\"\n            >\n              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt consequuntur amet\n              culpa cum itaque neque.\n            </p>\n          </div>\n\n          <ul\n            class=\"mt-12 flex flex-wrap justify-center gap-6 md:gap-8 lg:mt-0 lg:justify-end lg:gap-12\"\n          >\n            <li>\n              <a\n                class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                href=\"#\"\n              >\n                About\n              </a>\n            </li>\n\n            <li>\n              <a\n                class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                href=\"#\"\n              >\n                Services\n              </a>\n            </li>\n\n            <li>\n              <a\n                class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                href=\"#\"\n              >\n                Projects\n              </a>\n            </li>\n\n            <li>\n              <a\n                class=\"text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75\"\n                href=\"#\"\n              >\n                Blog\n              </a>\n            </li>\n          </ul>\n        </div>\n\n        <p class=\"mt-12 text-center text-sm text-gray-500 lg:text-right dark:text-gray-400\">\n          Copyright &copy; 2022. All rights reserved.\n        </p>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/footers/9.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <footer class=\"bg-gray-100\">\n      <div class=\"relative mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:pt-24\">\n        <div class=\"absolute end-4 top-4 sm:end-6 sm:top-6 lg:end-8 lg:top-8\">\n          <a\n            class=\"inline-block rounded-full bg-teal-600 p-2 text-white shadow-sm transition hover:bg-teal-500 sm:p-3 lg:p-4\"\n            href=\"#MainContent\"\n          >\n            <span class=\"sr-only\">Back to top</span>\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"size-5\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          </a>\n        </div>\n\n        <div class=\"lg:flex lg:items-end lg:justify-between\">\n          <div>\n            <div class=\"flex justify-center text-teal-600 lg:justify-start\">\n              <svg class=\"h-8\" viewBox=\"0 0 118 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n\n            <p class=\"mx-auto mt-6 max-w-md text-center leading-relaxed text-gray-500 lg:text-left\">\n              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt consequuntur amet\n              culpa cum itaque neque.\n            </p>\n          </div>\n\n          <ul\n            class=\"mt-12 flex flex-wrap justify-center gap-6 md:gap-8 lg:mt-0 lg:justify-end lg:gap-12\"\n          >\n            <li>\n              <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> About </a>\n            </li>\n\n            <li>\n              <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Services </a>\n            </li>\n\n            <li>\n              <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Projects </a>\n            </li>\n\n            <li>\n              <a class=\"text-gray-700 transition hover:text-gray-700/75\" href=\"#\"> Blog </a>\n            </li>\n          </ul>\n        </div>\n\n        <p class=\"mt-12 text-center text-sm text-gray-500 lg:text-right\">\n          Copyright &copy; 2022. All rights reserved.\n        </p>\n      </div>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/headers/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <header class=\"bg-white dark:bg-gray-900\">\n      <div class=\"mx-auto flex h-16 max-w-7xl items-center gap-8 px-4 sm:px-6 lg:px-8\">\n        <a class=\"block text-teal-600 dark:text-teal-300\" href=\"#\">\n          <span class=\"sr-only\">Home</span>\n          <svg class=\"h-8\" viewBox=\"0 0 28 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </a>\n\n        <div class=\"flex flex-1 items-center justify-end md:justify-between\">\n          <nav aria-label=\"Global\" class=\"hidden md:block\">\n            <ul class=\"flex items-center gap-6 text-sm\">\n              <li>\n                <a\n                  class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  About\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Careers\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  History\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Services\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Projects\n                </a>\n              </li>\n\n              <li>\n                <a\n                  class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Blog\n                </a>\n              </li>\n            </ul>\n          </nav>\n\n          <div class=\"flex items-center gap-4\">\n            <div class=\"sm:flex sm:gap-4\">\n              <a\n                class=\"block rounded-md bg-teal-600 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-teal-700 dark:hover:bg-teal-500\"\n                href=\"#\"\n              >\n                Login\n              </a>\n\n              <a\n                class=\"hidden rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-teal-600 transition hover:text-teal-600/75 sm:block dark:bg-gray-800 dark:text-white dark:hover:text-white/75\"\n                href=\"#\"\n              >\n                Register\n              </a>\n            </div>\n\n            <button\n              class=\"block rounded-sm bg-gray-100 p-2.5 text-gray-600 transition hover:text-gray-600/75 md:hidden dark:bg-gray-800 dark:text-white dark:hover:text-white/75\"\n            >\n              <span class=\"sr-only\">Toggle menu</span>\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-5\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h16\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n      </div>\n    </header>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/headers/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <header class=\"bg-white\">\n      <div class=\"mx-auto flex h-16 max-w-7xl items-center gap-8 px-4 sm:px-6 lg:px-8\">\n        <a class=\"block text-teal-600\" href=\"#\">\n          <span class=\"sr-only\">Home</span>\n          <svg class=\"h-8\" viewBox=\"0 0 28 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </a>\n\n        <div class=\"flex flex-1 items-center justify-end md:justify-between\">\n          <nav aria-label=\"Global\" class=\"hidden md:block\">\n            <ul class=\"flex items-center gap-6 text-sm\">\n              <li>\n                <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> About </a>\n              </li>\n\n              <li>\n                <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> Careers </a>\n              </li>\n\n              <li>\n                <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> History </a>\n              </li>\n\n              <li>\n                <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> Services </a>\n              </li>\n\n              <li>\n                <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> Projects </a>\n              </li>\n\n              <li>\n                <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> Blog </a>\n              </li>\n            </ul>\n          </nav>\n\n          <div class=\"flex items-center gap-4\">\n            <div class=\"sm:flex sm:gap-4\">\n              <a\n                class=\"block rounded-md bg-teal-600 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-teal-700\"\n                href=\"#\"\n              >\n                Login\n              </a>\n\n              <a\n                class=\"hidden rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-teal-600 transition hover:text-teal-600/75 sm:block\"\n                href=\"#\"\n              >\n                Register\n              </a>\n            </div>\n\n            <button\n              class=\"block rounded-sm bg-gray-100 p-2.5 text-gray-600 transition hover:text-gray-600/75 md:hidden\"\n            >\n              <span class=\"sr-only\">Toggle menu</span>\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"size-5\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h16\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n      </div>\n    </header>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/headers/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <header class=\"bg-white dark:bg-gray-900\">\n      <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        <div class=\"flex h-16 items-center justify-between\">\n          <div class=\"md:flex md:items-center md:gap-12\">\n            <a class=\"block text-teal-600 dark:text-teal-600\" href=\"#\">\n              <span class=\"sr-only\">Home</span>\n              <svg class=\"h-8\" viewBox=\"0 0 28 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </a>\n          </div>\n\n          <div class=\"hidden md:block\">\n            <nav aria-label=\"Global\">\n              <ul class=\"flex items-center gap-6 text-sm\">\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    About\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Careers\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    History\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Services\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Projects\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Blog\n                  </a>\n                </li>\n              </ul>\n            </nav>\n          </div>\n\n          <div class=\"flex items-center gap-4\">\n            <div class=\"sm:flex sm:gap-4\">\n              <a\n                class=\"rounded-md bg-teal-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm dark:hover:bg-teal-500\"\n                href=\"#\"\n              >\n                Login\n              </a>\n\n              <div class=\"hidden sm:flex\">\n                <a\n                  class=\"rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-teal-600 dark:bg-gray-800 dark:text-white dark:hover:text-white/75\"\n                  href=\"#\"\n                >\n                  Register\n                </a>\n              </div>\n            </div>\n\n            <div class=\"block md:hidden\">\n              <button\n                class=\"rounded-sm bg-gray-100 p-2 text-gray-600 transition hover:text-gray-600/75 dark:bg-gray-800 dark:text-white dark:hover:text-white/75\"\n              >\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"size-5\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M4 6h16M4 12h16M4 18h16\"\n                  />\n                </svg>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </header>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/headers/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <header class=\"bg-white\">\n      <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        <div class=\"flex h-16 items-center justify-between\">\n          <div class=\"md:flex md:items-center md:gap-12\">\n            <a class=\"block text-teal-600\" href=\"#\">\n              <span class=\"sr-only\">Home</span>\n              <svg class=\"h-8\" viewBox=\"0 0 28 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </a>\n          </div>\n\n          <div class=\"hidden md:block\">\n            <nav aria-label=\"Global\">\n              <ul class=\"flex items-center gap-6 text-sm\">\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> About </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> Careers </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> History </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> Services </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> Projects </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> Blog </a>\n                </li>\n              </ul>\n            </nav>\n          </div>\n\n          <div class=\"flex items-center gap-4\">\n            <div class=\"sm:flex sm:gap-4\">\n              <a\n                class=\"rounded-md bg-teal-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm\"\n                href=\"#\"\n              >\n                Login\n              </a>\n\n              <div class=\"hidden sm:flex\">\n                <a\n                  class=\"rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-teal-600\"\n                  href=\"#\"\n                >\n                  Register\n                </a>\n              </div>\n            </div>\n\n            <div class=\"block md:hidden\">\n              <button\n                class=\"rounded-sm bg-gray-100 p-2 text-gray-600 transition hover:text-gray-600/75\"\n              >\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"size-5\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M4 6h16M4 12h16M4 18h16\"\n                  />\n                </svg>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </header>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/headers/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <header class=\"bg-white dark:bg-gray-900\">\n      <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        <div class=\"flex h-16 items-center justify-between\">\n          <div class=\"flex-1 md:flex md:items-center md:gap-12\">\n            <a class=\"block text-teal-600 dark:text-teal-300\" href=\"#\">\n              <span class=\"sr-only\">Home</span>\n              <svg class=\"h-8\" viewBox=\"0 0 28 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </a>\n          </div>\n\n          <div class=\"md:flex md:items-center md:gap-12\">\n            <nav aria-label=\"Global\" class=\"hidden md:block\">\n              <ul class=\"flex items-center gap-6 text-sm\">\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    About\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Careers\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    History\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Services\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Projects\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Blog\n                  </a>\n                </li>\n              </ul>\n            </nav>\n\n            <div class=\"flex items-center gap-4\">\n              <div class=\"sm:flex sm:gap-4\">\n                <a\n                  class=\"rounded-md bg-teal-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm dark:hover:bg-teal-500\"\n                  href=\"#\"\n                >\n                  Login\n                </a>\n\n                <div class=\"hidden sm:flex\">\n                  <a\n                    class=\"rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-teal-600 dark:bg-gray-800 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Register\n                  </a>\n                </div>\n              </div>\n\n              <div class=\"block md:hidden\">\n                <button\n                  class=\"rounded-sm bg-gray-100 p-2 text-gray-600 transition hover:text-gray-600/75 dark:bg-gray-800 dark:text-white dark:hover:text-white/75\"\n                >\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"size-5\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                  >\n                    <path\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      d=\"M4 6h16M4 12h16M4 18h16\"\n                    />\n                  </svg>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </header>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/headers/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <header class=\"bg-white\">\n      <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        <div class=\"flex h-16 items-center justify-between\">\n          <div class=\"flex-1 md:flex md:items-center md:gap-12\">\n            <a class=\"block text-teal-600\" href=\"#\">\n              <span class=\"sr-only\">Home</span>\n              <svg class=\"h-8\" viewBox=\"0 0 28 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </a>\n          </div>\n\n          <div class=\"md:flex md:items-center md:gap-12\">\n            <nav aria-label=\"Global\" class=\"hidden md:block\">\n              <ul class=\"flex items-center gap-6 text-sm\">\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> About </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> Careers </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> History </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> Services </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> Projects </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> Blog </a>\n                </li>\n              </ul>\n            </nav>\n\n            <div class=\"flex items-center gap-4\">\n              <div class=\"sm:flex sm:gap-4\">\n                <a\n                  class=\"rounded-md bg-teal-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm\"\n                  href=\"#\"\n                >\n                  Login\n                </a>\n\n                <div class=\"hidden sm:flex\">\n                  <a\n                    class=\"rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-teal-600\"\n                    href=\"#\"\n                  >\n                    Register\n                  </a>\n                </div>\n              </div>\n\n              <div class=\"block md:hidden\">\n                <button\n                  class=\"rounded-sm bg-gray-100 p-2 text-gray-600 transition hover:text-gray-600/75\"\n                >\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"size-5\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                  >\n                    <path\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      d=\"M4 6h16M4 12h16M4 18h16\"\n                    />\n                  </svg>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </header>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/headers/4-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <header class=\"bg-white dark:bg-gray-900\">\n      <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        <div class=\"flex h-16 items-center justify-between\">\n          <div class=\"flex-1 md:flex md:items-center md:gap-12\">\n            <a class=\"block text-teal-600 dark:text-teal-300\" href=\"#\">\n              <span class=\"sr-only\">Home</span>\n              <svg class=\"h-8\" viewBox=\"0 0 28 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </a>\n          </div>\n\n          <div class=\"md:flex md:items-center md:gap-12\">\n            <nav aria-label=\"Global\" class=\"hidden md:block\">\n              <ul class=\"flex items-center gap-6 text-sm\">\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    About\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Careers\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    History\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Services\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Projects\n                  </a>\n                </li>\n\n                <li>\n                  <a\n                    class=\"text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75\"\n                    href=\"#\"\n                  >\n                    Blog\n                  </a>\n                </li>\n              </ul>\n            </nav>\n\n            <div class=\"relative hidden md:block\">\n              <button\n                type=\"button\"\n                class=\"overflow-hidden rounded-full border border-gray-300 shadow-inner dark:border-gray-600\"\n              >\n                <span class=\"sr-only\">Toggle dashboard menu</span>\n\n                <img\n                  src=\"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=1160\"\n                  alt=\"\"\n                  class=\"size-10 object-cover\"\n                />\n              </button>\n\n              <div\n                class=\"absolute end-0 z-10 mt-0.5 w-56 rounded-md border border-gray-100 bg-white shadow-lg dark:border-gray-800 dark:bg-gray-900\"\n                role=\"menu\"\n              >\n                <div class=\"p-2\">\n                  <a\n                    href=\"#\"\n                    class=\"block rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300\"\n                    role=\"menuitem\"\n                  >\n                    My profile\n                  </a>\n\n                  <a\n                    href=\"#\"\n                    class=\"block rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300\"\n                    role=\"menuitem\"\n                  >\n                    My data\n                  </a>\n\n                  <a\n                    href=\"#\"\n                    class=\"block rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300\"\n                    role=\"menuitem\"\n                  >\n                    Team settings\n                  </a>\n\n                  <form method=\"POST\" action=\"#\">\n                    <button\n                      type=\"submit\"\n                      class=\"flex w-full items-center gap-2 rounded-lg px-4 py-2 text-sm text-red-700 hover:bg-red-50 dark:text-red-500 dark:hover:bg-red-600/10\"\n                      role=\"menuitem\"\n                    >\n                      <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke-width=\"1.5\"\n                        stroke=\"currentColor\"\n                        class=\"size-4\"\n                      >\n                        <path\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          d=\"M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3\"\n                        />\n                      </svg>\n\n                      Logout\n                    </button>\n                  </form>\n                </div>\n              </div>\n\n              <div class=\"block md:hidden\">\n                <button\n                  class=\"rounded-sm bg-gray-100 p-2 text-gray-600 transition hover:text-gray-600/75 dark:bg-gray-800 dark:text-white dark:hover:text-white/75\"\n                >\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"size-5\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                  >\n                    <path\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      d=\"M4 6h16M4 12h16M4 18h16\"\n                    />\n                  </svg>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </header>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/headers/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <header class=\"bg-white\">\n      <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        <div class=\"flex h-16 items-center justify-between\">\n          <div class=\"flex-1 md:flex md:items-center md:gap-12\">\n            <a class=\"block text-teal-600\" href=\"#\">\n              <span class=\"sr-only\">Home</span>\n              <svg class=\"h-8\" viewBox=\"0 0 28 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </a>\n          </div>\n\n          <div class=\"md:flex md:items-center md:gap-12\">\n            <nav aria-label=\"Global\" class=\"hidden md:block\">\n              <ul class=\"flex items-center gap-6 text-sm\">\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> About </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> Careers </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> History </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> Services </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> Projects </a>\n                </li>\n\n                <li>\n                  <a class=\"text-gray-500 transition hover:text-gray-500/75\" href=\"#\"> Blog </a>\n                </li>\n              </ul>\n            </nav>\n\n            <div class=\"hidden md:relative md:block\">\n              <button\n                type=\"button\"\n                class=\"overflow-hidden rounded-full border border-gray-300 shadow-inner\"\n              >\n                <span class=\"sr-only\">Toggle dashboard menu</span>\n\n                <img\n                  src=\"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=1160\"\n                  alt=\"\"\n                  class=\"size-10 object-cover\"\n                />\n              </button>\n\n              <div\n                class=\"absolute end-0 z-10 mt-0.5 w-56 divide-y divide-gray-100 rounded-md border border-gray-100 bg-white shadow-lg\"\n                role=\"menu\"\n              >\n                <div class=\"p-2\">\n                  <a\n                    href=\"#\"\n                    class=\"block rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700\"\n                    role=\"menuitem\"\n                  >\n                    My profile\n                  </a>\n\n                  <a\n                    href=\"#\"\n                    class=\"block rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700\"\n                    role=\"menuitem\"\n                  >\n                    Billing summary\n                  </a>\n\n                  <a\n                    href=\"#\"\n                    class=\"block rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700\"\n                    role=\"menuitem\"\n                  >\n                    Team settings\n                  </a>\n                </div>\n\n                <div class=\"p-2\">\n                  <form method=\"POST\" action=\"#\">\n                    <button\n                      type=\"submit\"\n                      class=\"flex w-full items-center gap-2 rounded-lg px-4 py-2 text-sm text-red-700 hover:bg-red-50\"\n                      role=\"menuitem\"\n                    >\n                      <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke-width=\"1.5\"\n                        stroke=\"currentColor\"\n                        class=\"size-4\"\n                      >\n                        <path\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          d=\"M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3\"\n                        />\n                      </svg>\n\n                      Logout\n                    </button>\n                  </form>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"block md:hidden\">\n              <button\n                class=\"rounded-sm bg-gray-100 p-2 text-gray-600 transition hover:text-gray-600/75\"\n              >\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"size-5\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M4 6h16M4 12h16M4 18h16\"\n                  />\n                </svg>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </header>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/logo-clouds/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-2 gap-px md:grid-cols-4\">\n        <div class=\"grid place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 285 40\" class=\"h-8\">\n            <path\n              fill=\"#ff500b\"\n              d=\"M35.235 0c10.494 0 19 8.507 19 19v21a8 8 0 0 1-8-8V19c0-6.075-4.925-11-11-11h-5.2a10 10 0 0 0-7.072 2.929L9.407 24.485a4 4 0 0 0-1.172 2.829V28a4 4 0 0 0 4 4h18a8 8 0 0 1-7.587 7.99l-.413.01h-10c-6.627 0-12-5.373-12-12v-.686a12 12 0 0 1 3.515-8.486L17.307 5.272A18 18 0 0 1 30.034 0z\"\n            />\n            <path\n              fill=\"#ff500b\"\n              d=\"M37.235 12a5 5 0 0 1 5 5v23a8 8 0 0 1-8-8V20h-3.343l-6.536 6.535A5 5 0 0 1 20.82 28h-8.107a.47.47 0 0 1-.332-.802l13.733-13.733A5 5 0 0 1 29.65 12z\"\n            />\n            <path\n              fill=\"#a62f00\"\n              d=\"M274.819 30.048V17.159a.73.73 0 0 0-.705-.706h-.483a.74.74 0 0 0-.669.446l-4.494 10.623c-.631 1.56-2.154 2.526-3.826 2.526-1.671 0-3.157-.966-3.788-2.526l-4.531-10.623c-.075-.26-.335-.446-.632-.446h-.483a.73.73 0 0 0-.705.706v12.889h-4.197V17.159c0-2.711 2.191-4.94 4.902-4.94h.483c1.969 0 3.751 1.189 4.531 3.046l4.42 10.474 4.42-10.474a4.93 4.93 0 0 1 4.569-3.046h.483c2.711 0 4.902 2.229 4.902 4.94v12.889zm-43.669 0a7.72 7.72 0 0 1-7.726-7.726V12.219h4.197v10.103c0 1.931 1.597 3.528 3.529 3.528h8.914c1.931 0 3.528-1.597 3.528-3.528V12.219h4.197v10.103a7.72 7.72 0 0 1-7.725 7.726zm-15.458-4.198c.705 0 1.3-.594 1.3-1.3 0-.705-.558-1.262-1.226-1.3h-9.917a5.484 5.484 0 0 1-5.497-5.497c0-3.045 2.451-5.534 5.497-5.534h15.377v4.234h-15.377c-.706 0-1.3.595-1.3 1.3s.594 1.3 1.3 1.3h9.991c2.971.075 5.386 2.489 5.386 5.497 0 3.046-2.489 5.497-5.534 5.497h-15.34V25.85zm-38.909 4.198V17.159c0-2.711 2.192-4.94 4.903-4.94h10.808c3.492 0 6.314 2.86 6.314 6.352 0 3.49-2.822 6.35-6.314 6.35H180.98v5.127zm4.197-12.889v3.529h11.514a2.14 2.14 0 0 0 2.117-2.117 2.14 2.14 0 0 0-2.117-2.118h-10.808a.73.73 0 0 0-.706.706m-11.266-4.939h4.197v17.828h-4.197zm-11.119 13.63c2.6 0 4.717-2.117 4.717-4.717 0-2.562-2.117-4.68-4.717-4.68h-6.537c-2.6 0-4.717 2.118-4.717 4.68 0 2.6 2.117 4.717 4.717 4.717zm0-13.63c4.94 0 8.914 4.01 8.914 8.913a8.893 8.893 0 0 1-8.914 8.915h-6.537a8.893 8.893 0 0 1-8.914-8.915c0-4.902 3.974-8.914 8.914-8.914zm-31.782 17.828a8.893 8.893 0 0 1-8.914-8.915c0-4.902 3.974-8.914 8.914-8.914h12.888v4.234h-12.888c-2.6 0-4.717 2.118-4.717 4.68 0 2.6 2.117 4.717 4.717 4.717h9.471c.706 0 1.3-.594 1.3-1.3 0-.705-.594-1.3-1.3-1.3h-10.177v-4.197h10.177c3.046 0 5.534 2.452 5.534 5.497s-2.488 5.497-5.534 5.497zm-19.216-4.198c2.6 0 4.717-2.117 4.717-4.717 0-2.562-2.117-4.68-4.717-4.68h-6.537c-2.6 0-4.717 2.118-4.717 4.68 0 2.6 2.117 4.717 4.717 4.717zm0-13.63c4.94 0 8.914 4.01 8.914 8.913a8.893 8.893 0 0 1-8.914 8.915h-6.537a8.893 8.893 0 0 1-8.914-8.915c0-4.902 3.974-8.914 8.914-8.914zM74.959 25.145a.73.73 0 0 0 .706.705h15.71v4.197h-15.71a4.9 4.9 0 0 1-4.903-4.902V12.108h4.197zm209.168-13.037a2.155 2.155 0 1 1-4.31 0 2.155 2.155 0 0 1 4.31 0\"\n            />\n          </svg>\n        </div>\n\n        <div class=\"grid place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 216 40\" class=\"h-8\">\n            <path\n              fill=\"#ff1616\"\n              d=\"M16.658 40h-1.276c-3.317 0-5.312 0-6.836-.284l8.82-11.682zm14.59-.249c-1.498.248-3.46.249-6.63.249H23.11l-.712-11.97zm8.424-8.081a8 8 0 0 1-.233.873 10.9 10.9 0 0 1-3.052 4.655L26.44 26.044zM3.485 37.08a10.9 10.9 0 0 1-2.924-4.537 8 8 0 0 1-.254-.963l13.017-5.534zM40 24.618c0 1.125-.003 2.097-.014 2.951l-11.813-4.563H40zm-28.404-1.612L.011 27.48C0 26.649 0 25.705 0 24.618v-1.612zM24.618 0c4.163 0 6.244 0 7.925.561a10.91 10.91 0 0 1 6.896 6.896c.56 1.681.561 3.762.561 7.925v4.634H27.509l9.01-3.83-2.673-1.774-8.741 3.376 4.103-5.43-2.95-.808-4.532 5.078-.337-5.719h-3.006l-.343 5.72-4.528-5.079-2.95.808 4.099 5.428-8.736-3.374-2.672 1.774 9.007 3.83H0v-4.634c0-4.163 0-6.244.561-7.925A10.91 10.91 0 0 1 7.457.561C9.138.001 11.22 0 15.382 0z\"\n            />\n            <path\n              fill=\"#280f00\"\n              d=\"M93.273 31.443c.94 1.763 2.755 2.872 5.094 2.872s4.154-1.109 5.094-2.872h3.518c-1.163 3.522-4.395 5.876-8.612 5.876-4.216 0-7.449-2.354-8.612-5.876zm51.23-18.683c5.36 0 9.115 3.687 9.115 8.978 0 5.6-4.165 8.775-8.569 8.775-2.731 0-5.052-1.23-6.281-3.414v10.173h-3.244v-15.5c0-5.496 3.756-9.012 8.979-9.012m.034 3.004c-3.448 0-5.769 2.458-5.769 5.872s2.321 5.872 5.769 5.872c3.482 0 5.804-2.458 5.804-5.872s-2.322-5.872-5.804-5.872M79.059 12.76c5.325 0 9.08 3.755 9.08 8.876s-3.755 8.877-9.08 8.877-9.081-3.756-9.081-8.877 3.755-8.876 9.08-8.876m0 3.004c-3.483 0-5.804 2.458-5.804 5.872s2.321 5.872 5.804 5.872 5.803-2.458 5.803-5.872-2.321-5.872-5.803-5.872m19.668-2.996h8.821v2.9h-2.276c1.378 1.545 2.175 3.611 2.175 5.968 0 5.12-3.755 8.877-9.08 8.877-5.327 0-9.082-3.756-9.082-8.877s3.756-8.876 9.081-8.876q.181.001.36.008m-.36 2.996c-3.483 0-5.804 2.458-5.805 5.872s2.322 5.872 5.804 5.872 5.804-2.458 5.804-5.872-2.322-5.872-5.804-5.872m19.308-3.004c5.325 0 9.081 3.755 9.081 8.876s-3.756 8.877-9.081 8.877c-5.326 0-9.081-3.756-9.081-8.877s3.755-8.876 9.081-8.876m0 3.004c-3.482 0-5.804 2.458-5.804 5.872s2.322 5.872 5.804 5.872 5.804-2.458 5.804-5.872c-.001-3.414-2.322-5.872-5.804-5.872m44.141-3.004c4.029 0 6.521 2.287 6.589 5.19h-3.21c-.102-1.298-1.296-2.254-3.344-2.255-2.151 0-3.38 1.025-3.38 2.357 0 1.604 1.775 1.774 3.857 2.048 2.936.375 6.52.921 6.521 4.779 0 3.414-2.765 5.633-6.998 5.634-4.234 0-6.897-2.254-6.999-5.327h3.277c.068 1.4 1.366 2.39 3.722 2.39 2.457 0 3.72-1.058 3.72-2.39 0-1.604-1.775-1.81-3.891-2.082-2.936-.376-6.487-.922-6.487-4.78 0-3.311 2.595-5.564 6.623-5.564m12.167 9.25c0 3.654 2.015 5.498 5.087 5.498 3.073 0 5.087-1.844 5.087-5.497v-8.808h3.243v8.808c0 5.599-3.345 8.5-8.33 8.5s-8.33-2.867-8.33-8.5v-8.808h3.243zm-117.5 4.85h12.529v3.208H53V7.741h3.482zm75.959 3.208h-3.243V13.203h3.243zM208.76 12.76c3.96 0 6.965 2.39 6.965 7.545v9.763h-3.244v-9.763c0-3.141-1.672-4.541-4.028-4.541-2.287 0-3.995 1.468-3.995 4.54v9.764h-3.243v-9.763c0-3.073-1.741-4.541-4.028-4.541-2.356 0-4.029 1.4-4.029 4.54v9.764h-3.243v-9.763c0-5.155 3.005-7.545 6.965-7.545 2.594 0 4.779 1.16 5.939 3.345 1.161-2.184 3.312-3.345 5.941-3.345M130.804 6c1.297 0 2.254.956 2.254 2.253s-.957 2.288-2.254 2.288-2.253-.99-2.253-2.288S129.507 6 130.804 6\"\n            />\n          </svg>\n        </div>\n\n        <div class=\"grid place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 260 40\" class=\"h-8\">\n            <path\n              fill=\"#297aff\"\n              d=\"M33.724 36.58A21.429 21.429 0 0 0 3.419 6.277l7.072 7.071c1.115 1.116 2.917 1.06 4.337.371a8.57 8.57 0 0 1 11.454 11.455c-.69 1.42-.745 3.221.37 4.337z\"\n            />\n            <path\n              fill=\"#34c2ff\"\n              d=\"M30 40H19.51a5.7 5.7 0 0 1-4.04-1.674L1.673 24.531A5.7 5.7 0 0 1 0 20.49V10zm-19.286 0H4.286A4.286 4.286 0 0 1 0 35.714v-6.428z\"\n            />\n            <path\n              fill=\"#0f2d5e\"\n              d=\"M244.137 6.93c8.44 0 15.311 6.87 15.311 15.31v10.83h-7.469V22.24c0-3.099-1.867-5.788-4.481-7.057V33.07h-7.469V22.24c0-3.1-1.868-5.789-4.482-7.058V33.07h-7.469V6.929h4.108c2.838 0 5.527.822 7.843 2.204V6.929zm-19.025 15.31c0 5.976-4.893 10.83-10.831 10.83-5.975 0-10.83-4.854-10.83-10.83V6.93h7.469v15.31a3.347 3.347 0 0 0 3.361 3.362 3.37 3.37 0 0 0 3.362-3.361V6.929h7.469zm-23.938 2.428c0 4.594-3.735 8.328-8.328 8.328h-11.092v-7.469h11.092a.87.87 0 0 0 .859-.859c0-.448-.411-.821-.859-.821h-3.025a8.43 8.43 0 0 1-8.44-8.44c0-4.669 3.772-8.478 8.44-8.478H200.8v7.47h-10.979c-.56 0-.971.447-.971 1.008 0 .522.411.97.971.97h3.025c4.593 0 8.328 3.735 8.328 8.291M170.441 6.93c5.229 0 9.523 4.294 9.523 9.522 0 5.266-4.294 9.523-9.523 9.523h-2.801v7.096h-7.469V6.929zm0 11.576a2.05 2.05 0 0 0 2.054-2.054c0-1.12-.933-2.054-2.054-2.054h-2.801v4.108zM156.809 33.07h-7.469V6.93h7.469zM147.046 20c0 7.208-5.901 13.07-13.071 13.07-7.208 0-13.071-5.862-13.071-13.07 0-7.17 5.863-13.07 13.071-13.07 7.17 0 13.071 5.9 13.071 13.07m-7.469 0c0-3.062-2.54-5.602-5.602-5.602-3.1 0-5.602 2.54-5.602 5.602 0 3.1 2.502 5.602 5.602 5.602 3.062 0 5.602-2.502 5.602-5.602m-20.846-1.68v14.75h-9.337c-7.207 0-13.07-5.862-13.07-13.07 0-7.17 5.863-13.07 13.07-13.07h9.337v7.468h-9.337c-3.099 0-5.601 2.54-5.601 5.602 0 3.1 2.502 5.602 5.601 5.602h1.868V18.32zM95.113 20c0 7.208-5.9 13.07-13.071 13.07-7.208 0-13.07-5.862-13.07-13.07 0-7.17 5.862-13.07 13.07-13.07 7.17 0 13.07 5.9 13.07 13.07m-7.47 0c0-3.062-2.539-5.602-5.601-5.602-3.1 0-5.602 2.54-5.602 5.602 0 3.1 2.502 5.602 5.602 5.602 3.062 0 5.602-2.502 5.602-5.602m-19.441 5.602v7.469h-9.337a6.694 6.694 0 0 1-6.722-6.722V6.929h7.47v18.673z\"\n            />\n          </svg>\n        </div>\n\n        <div class=\"grid place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 221 40\" class=\"h-8\">\n            <path\n              fill=\"#00dc33\"\n              fill-rule=\"evenodd\"\n              d=\"M38.349.937A3.37 3.37 0 0 1 42.97.896l.123.12.42.441c4.248 4.592 5.832 9.943 5.426 15.168-.413 5.3-2.847 10.297-6.242 14.246-3.394 3.947-7.925 7.055-12.822 8.404-4.96 1.366-10.383.93-15.091-2.409-3.993-2.832-5.514-7.41-5.617-11.857-2.24-1.104-4.599-2.476-7.072-4.145l-.654-.446-.14-.101A3.32 3.32 0 0 1 .6 15.779a3.37 3.37 0 0 1 4.525-.931l.145.094.595.407c1.482 1 2.896 1.867 4.24 2.615.868-3.058 2.305-5.994 4.199-8.415 2.836-3.626 7.09-6.526 12.3-6.093 4.693.39 8.16 2.822 9.95 6.255 1.734 3.324 1.76 7.323.245 10.761-1.544 3.506-4.68 6.426-9.19 7.63-3.245.866-7.047.806-11.337-.353v.001a37.4 37.4 0 0 1-5.368-1.928c-.42-.185-.784.099 0 .591 2.21 1.575 5.32 2.895 6.22 3.339a5.7 5.7 0 0 0 1.559 1.687c2.783 1.974 6.04 2.336 9.4 1.41 3.421-.942 6.851-3.214 9.511-6.308 2.658-3.091 4.372-6.795 4.655-10.43.266-3.428-.719-6.95-3.686-10.152l-.293-.308-.117-.127a3.32 3.32 0 0 1 .196-4.587M26.045 10.1c-2.152-.179-4.424.96-6.443 3.54-1.537 1.965-2.7 4.519-3.294 7.147 4.225 1.45 7.374 1.46 9.561.877 2.533-.676 4.051-2.206 4.782-3.865.76-1.726.683-3.607-.055-5.021-.68-1.306-2.05-2.47-4.55-2.678\"\n              clip-rule=\"evenodd\"\n            />\n            <path\n              fill=\"#00390e\"\n              d=\"M137.709 13.603c-1.869 0-3.069-1.41-2.809-3.302C135.16 8.41 136.748 7 138.618 7s3.069 1.41 2.809 3.301-1.848 3.302-3.718 3.302m-5.099 18.535 2.337-16.988h5.099l-2.337 16.988z\"\n            />\n            <path\n              fill=\"#00390e\"\n              fill-rule=\"evenodd\"\n              d=\"m141.573 23.816-2.144 15.578h5.099l1.254-9.113c.846 1.513 2.437 2.304 4.442 2.304 3.808 0 8.547-2.82 9.36-8.734.753-5.468-2.48-9.148-7.817-9.148-5.133 0-9.409 3.405-10.194 9.113m12.873-.172c-.336 2.442-2.132 4.127-4.443 4.127-2.312 0-3.644-1.685-3.308-4.127s2.132-4.126 4.443-4.126c2.312 0 3.644 1.685 3.308 4.126\"\n              clip-rule=\"evenodd\"\n            />\n            <path\n              fill=\"#00390e\"\n              d=\"M166.375 32.585c-4.317 0-6.783-2.338-6.402-5.605h5.031c-.089.894.496 1.341 1.889 1.341 1.564 0 2.15-.55 2.249-1.272.146-1.06-.899-1.22-2.284-1.432l-.005-.001-.295-.046c-2.264-.344-5.991-.928-5.428-5.02.473-3.44 3.49-5.847 7.671-5.847s6.429 2.442 6.11 5.502h-4.963c-.028-.79-.646-1.237-1.666-1.237-1.257 0-1.857.653-1.952 1.34-.135.986.957 1.156 2.387 1.378l.207.032c2.366.344 5.981.998 5.428 5.021-.483 3.508-3.66 5.846-7.977 5.846m28.803-10.007-1.315 9.56h5.099l1.315-9.56c.313-2.27 1.509-3.06 3.039-3.06 1.496 0 2.475.79 2.162 3.06l-1.315 9.56h5.099l1.315-9.56c.313-2.27 1.509-3.06 3.005-3.06 1.53 0 2.509.79 2.197 3.06l-1.316 9.56h5.099l1.316-9.56c.752-5.468-2.044-7.875-6.124-7.875-2.413 0-4.513.929-6.016 2.717-1.012-1.788-2.89-2.717-5.27-2.717-4.079 0-7.537 2.407-8.29 7.875m-18.941 1.376c-.79 5.743 2.144 8.631 7.107 8.631s8.696-2.923 9.482-8.631l1.211-8.804h-5.099l-1.211 8.804c-.369 2.682-1.817 3.817-3.721 3.817s-3.039-1.135-2.67-3.817l1.211-8.804h-5.099z\"\n            />\n            <path\n              fill=\"#00390e\"\n              fill-rule=\"evenodd\"\n              d=\"M113.669 23.644c-.709 5.159 2.51 8.941 7.813 8.941s9.562-3.782 10.272-8.94c.71-5.159-2.509-8.942-7.812-8.942s-9.563 3.783-10.273 8.941m12.918 0c-.336 2.442-2.132 4.127-4.443 4.127-2.312 0-3.644-1.685-3.308-4.127s2.132-4.126 4.443-4.126c2.312 0 3.644 1.685 3.308 4.126m-29.153 7.344c-2.06-1.578-3.081-4.206-2.65-7.344.71-5.158 4.97-8.94 10.272-8.94s8.522 3.782 7.813 8.94c-.686 4.983-4.684 8.682-9.734 8.928 1.189.684 2.917 1.237 4.187 1.644.424.136.797.255 1.082.358 1.153.291 1.889 1.378 1.711 2.674-.209 1.52-1.596 2.752-3.099 2.752h-8.16c-3.004 0-5.1-2.464-4.683-5.503h8.702c-1.988-.778-4.09-2.334-5.441-3.509m5.825-3.217c2.311 0 4.107-1.685 4.443-4.127s-.996-4.126-3.308-4.126-4.107 1.685-4.443 4.126.996 4.127 3.308 4.127m-27.36-4.127c-.71 5.159 2.51 8.941 7.812 8.941s9.563-3.782 10.273-8.94c.71-5.159-2.51-8.942-7.813-8.942S76.61 18.486 75.9 23.644m12.918 0c-.336 2.442-2.132 4.127-4.443 4.127-2.312 0-3.644-1.685-3.308-4.127s2.131-4.126 4.443-4.126 3.643 1.685 3.308 4.126\"\n              clip-rule=\"evenodd\"\n            />\n            <path fill=\"#00390e\" d=\"m58 32.138 3.094-22.49h5.507L64.217 26.98H74.72l-.71 5.158z\" />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/logo-clouds/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"mx-auto max-w-lg text-center\">\n        <h2 class=\"text-2xl font-bold text-gray-900 sm:text-3xl\">Trusted by many</h2>\n\n        <p class=\"mt-4 text-pretty text-gray-700\">\n          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed voluptas delectus alias\n          magni velit! Dicta corrupti dignissimos dolor consequatur illum tempore consectetur hic a\n          cupiditate sunt quam, earum nisi aperiam.\n        </p>\n      </div>\n\n      <div class=\"mt-4 grid grid-cols-2 gap-px md:grid-cols-4\">\n        <div class=\"grid place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 285 40\" class=\"h-8\">\n            <path\n              fill=\"#ff500b\"\n              d=\"M35.235 0c10.494 0 19 8.507 19 19v21a8 8 0 0 1-8-8V19c0-6.075-4.925-11-11-11h-5.2a10 10 0 0 0-7.072 2.929L9.407 24.485a4 4 0 0 0-1.172 2.829V28a4 4 0 0 0 4 4h18a8 8 0 0 1-7.587 7.99l-.413.01h-10c-6.627 0-12-5.373-12-12v-.686a12 12 0 0 1 3.515-8.486L17.307 5.272A18 18 0 0 1 30.034 0z\"\n            />\n            <path\n              fill=\"#ff500b\"\n              d=\"M37.235 12a5 5 0 0 1 5 5v23a8 8 0 0 1-8-8V20h-3.343l-6.536 6.535A5 5 0 0 1 20.82 28h-8.107a.47.47 0 0 1-.332-.802l13.733-13.733A5 5 0 0 1 29.65 12z\"\n            />\n            <path\n              fill=\"#a62f00\"\n              d=\"M274.819 30.048V17.159a.73.73 0 0 0-.705-.706h-.483a.74.74 0 0 0-.669.446l-4.494 10.623c-.631 1.56-2.154 2.526-3.826 2.526-1.671 0-3.157-.966-3.788-2.526l-4.531-10.623c-.075-.26-.335-.446-.632-.446h-.483a.73.73 0 0 0-.705.706v12.889h-4.197V17.159c0-2.711 2.191-4.94 4.902-4.94h.483c1.969 0 3.751 1.189 4.531 3.046l4.42 10.474 4.42-10.474a4.93 4.93 0 0 1 4.569-3.046h.483c2.711 0 4.902 2.229 4.902 4.94v12.889zm-43.669 0a7.72 7.72 0 0 1-7.726-7.726V12.219h4.197v10.103c0 1.931 1.597 3.528 3.529 3.528h8.914c1.931 0 3.528-1.597 3.528-3.528V12.219h4.197v10.103a7.72 7.72 0 0 1-7.725 7.726zm-15.458-4.198c.705 0 1.3-.594 1.3-1.3 0-.705-.558-1.262-1.226-1.3h-9.917a5.484 5.484 0 0 1-5.497-5.497c0-3.045 2.451-5.534 5.497-5.534h15.377v4.234h-15.377c-.706 0-1.3.595-1.3 1.3s.594 1.3 1.3 1.3h9.991c2.971.075 5.386 2.489 5.386 5.497 0 3.046-2.489 5.497-5.534 5.497h-15.34V25.85zm-38.909 4.198V17.159c0-2.711 2.192-4.94 4.903-4.94h10.808c3.492 0 6.314 2.86 6.314 6.352 0 3.49-2.822 6.35-6.314 6.35H180.98v5.127zm4.197-12.889v3.529h11.514a2.14 2.14 0 0 0 2.117-2.117 2.14 2.14 0 0 0-2.117-2.118h-10.808a.73.73 0 0 0-.706.706m-11.266-4.939h4.197v17.828h-4.197zm-11.119 13.63c2.6 0 4.717-2.117 4.717-4.717 0-2.562-2.117-4.68-4.717-4.68h-6.537c-2.6 0-4.717 2.118-4.717 4.68 0 2.6 2.117 4.717 4.717 4.717zm0-13.63c4.94 0 8.914 4.01 8.914 8.913a8.893 8.893 0 0 1-8.914 8.915h-6.537a8.893 8.893 0 0 1-8.914-8.915c0-4.902 3.974-8.914 8.914-8.914zm-31.782 17.828a8.893 8.893 0 0 1-8.914-8.915c0-4.902 3.974-8.914 8.914-8.914h12.888v4.234h-12.888c-2.6 0-4.717 2.118-4.717 4.68 0 2.6 2.117 4.717 4.717 4.717h9.471c.706 0 1.3-.594 1.3-1.3 0-.705-.594-1.3-1.3-1.3h-10.177v-4.197h10.177c3.046 0 5.534 2.452 5.534 5.497s-2.488 5.497-5.534 5.497zm-19.216-4.198c2.6 0 4.717-2.117 4.717-4.717 0-2.562-2.117-4.68-4.717-4.68h-6.537c-2.6 0-4.717 2.118-4.717 4.68 0 2.6 2.117 4.717 4.717 4.717zm0-13.63c4.94 0 8.914 4.01 8.914 8.913a8.893 8.893 0 0 1-8.914 8.915h-6.537a8.893 8.893 0 0 1-8.914-8.915c0-4.902 3.974-8.914 8.914-8.914zM74.959 25.145a.73.73 0 0 0 .706.705h15.71v4.197h-15.71a4.9 4.9 0 0 1-4.903-4.902V12.108h4.197zm209.168-13.037a2.155 2.155 0 1 1-4.31 0 2.155 2.155 0 0 1 4.31 0\"\n            />\n          </svg>\n        </div>\n\n        <div class=\"grid place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 216 40\" class=\"h-8\">\n            <path\n              fill=\"#ff1616\"\n              d=\"M16.658 40h-1.276c-3.317 0-5.312 0-6.836-.284l8.82-11.682zm14.59-.249c-1.498.248-3.46.249-6.63.249H23.11l-.712-11.97zm8.424-8.081a8 8 0 0 1-.233.873 10.9 10.9 0 0 1-3.052 4.655L26.44 26.044zM3.485 37.08a10.9 10.9 0 0 1-2.924-4.537 8 8 0 0 1-.254-.963l13.017-5.534zM40 24.618c0 1.125-.003 2.097-.014 2.951l-11.813-4.563H40zm-28.404-1.612L.011 27.48C0 26.649 0 25.705 0 24.618v-1.612zM24.618 0c4.163 0 6.244 0 7.925.561a10.91 10.91 0 0 1 6.896 6.896c.56 1.681.561 3.762.561 7.925v4.634H27.509l9.01-3.83-2.673-1.774-8.741 3.376 4.103-5.43-2.95-.808-4.532 5.078-.337-5.719h-3.006l-.343 5.72-4.528-5.079-2.95.808 4.099 5.428-8.736-3.374-2.672 1.774 9.007 3.83H0v-4.634c0-4.163 0-6.244.561-7.925A10.91 10.91 0 0 1 7.457.561C9.138.001 11.22 0 15.382 0z\"\n            />\n            <path\n              fill=\"#280f00\"\n              d=\"M93.273 31.443c.94 1.763 2.755 2.872 5.094 2.872s4.154-1.109 5.094-2.872h3.518c-1.163 3.522-4.395 5.876-8.612 5.876-4.216 0-7.449-2.354-8.612-5.876zm51.23-18.683c5.36 0 9.115 3.687 9.115 8.978 0 5.6-4.165 8.775-8.569 8.775-2.731 0-5.052-1.23-6.281-3.414v10.173h-3.244v-15.5c0-5.496 3.756-9.012 8.979-9.012m.034 3.004c-3.448 0-5.769 2.458-5.769 5.872s2.321 5.872 5.769 5.872c3.482 0 5.804-2.458 5.804-5.872s-2.322-5.872-5.804-5.872M79.059 12.76c5.325 0 9.08 3.755 9.08 8.876s-3.755 8.877-9.08 8.877-9.081-3.756-9.081-8.877 3.755-8.876 9.08-8.876m0 3.004c-3.483 0-5.804 2.458-5.804 5.872s2.321 5.872 5.804 5.872 5.803-2.458 5.803-5.872-2.321-5.872-5.803-5.872m19.668-2.996h8.821v2.9h-2.276c1.378 1.545 2.175 3.611 2.175 5.968 0 5.12-3.755 8.877-9.08 8.877-5.327 0-9.082-3.756-9.082-8.877s3.756-8.876 9.081-8.876q.181.001.36.008m-.36 2.996c-3.483 0-5.804 2.458-5.805 5.872s2.322 5.872 5.804 5.872 5.804-2.458 5.804-5.872-2.322-5.872-5.804-5.872m19.308-3.004c5.325 0 9.081 3.755 9.081 8.876s-3.756 8.877-9.081 8.877c-5.326 0-9.081-3.756-9.081-8.877s3.755-8.876 9.081-8.876m0 3.004c-3.482 0-5.804 2.458-5.804 5.872s2.322 5.872 5.804 5.872 5.804-2.458 5.804-5.872c-.001-3.414-2.322-5.872-5.804-5.872m44.141-3.004c4.029 0 6.521 2.287 6.589 5.19h-3.21c-.102-1.298-1.296-2.254-3.344-2.255-2.151 0-3.38 1.025-3.38 2.357 0 1.604 1.775 1.774 3.857 2.048 2.936.375 6.52.921 6.521 4.779 0 3.414-2.765 5.633-6.998 5.634-4.234 0-6.897-2.254-6.999-5.327h3.277c.068 1.4 1.366 2.39 3.722 2.39 2.457 0 3.72-1.058 3.72-2.39 0-1.604-1.775-1.81-3.891-2.082-2.936-.376-6.487-.922-6.487-4.78 0-3.311 2.595-5.564 6.623-5.564m12.167 9.25c0 3.654 2.015 5.498 5.087 5.498 3.073 0 5.087-1.844 5.087-5.497v-8.808h3.243v8.808c0 5.599-3.345 8.5-8.33 8.5s-8.33-2.867-8.33-8.5v-8.808h3.243zm-117.5 4.85h12.529v3.208H53V7.741h3.482zm75.959 3.208h-3.243V13.203h3.243zM208.76 12.76c3.96 0 6.965 2.39 6.965 7.545v9.763h-3.244v-9.763c0-3.141-1.672-4.541-4.028-4.541-2.287 0-3.995 1.468-3.995 4.54v9.764h-3.243v-9.763c0-3.073-1.741-4.541-4.028-4.541-2.356 0-4.029 1.4-4.029 4.54v9.764h-3.243v-9.763c0-5.155 3.005-7.545 6.965-7.545 2.594 0 4.779 1.16 5.939 3.345 1.161-2.184 3.312-3.345 5.941-3.345M130.804 6c1.297 0 2.254.956 2.254 2.253s-.957 2.288-2.254 2.288-2.253-.99-2.253-2.288S129.507 6 130.804 6\"\n            />\n          </svg>\n        </div>\n\n        <div class=\"grid place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 260 40\" class=\"h-8\">\n            <path\n              fill=\"#297aff\"\n              d=\"M33.724 36.58A21.429 21.429 0 0 0 3.419 6.277l7.072 7.071c1.115 1.116 2.917 1.06 4.337.371a8.57 8.57 0 0 1 11.454 11.455c-.69 1.42-.745 3.221.37 4.337z\"\n            />\n            <path\n              fill=\"#34c2ff\"\n              d=\"M30 40H19.51a5.7 5.7 0 0 1-4.04-1.674L1.673 24.531A5.7 5.7 0 0 1 0 20.49V10zm-19.286 0H4.286A4.286 4.286 0 0 1 0 35.714v-6.428z\"\n            />\n            <path\n              fill=\"#0f2d5e\"\n              d=\"M244.137 6.93c8.44 0 15.311 6.87 15.311 15.31v10.83h-7.469V22.24c0-3.099-1.867-5.788-4.481-7.057V33.07h-7.469V22.24c0-3.1-1.868-5.789-4.482-7.058V33.07h-7.469V6.929h4.108c2.838 0 5.527.822 7.843 2.204V6.929zm-19.025 15.31c0 5.976-4.893 10.83-10.831 10.83-5.975 0-10.83-4.854-10.83-10.83V6.93h7.469v15.31a3.347 3.347 0 0 0 3.361 3.362 3.37 3.37 0 0 0 3.362-3.361V6.929h7.469zm-23.938 2.428c0 4.594-3.735 8.328-8.328 8.328h-11.092v-7.469h11.092a.87.87 0 0 0 .859-.859c0-.448-.411-.821-.859-.821h-3.025a8.43 8.43 0 0 1-8.44-8.44c0-4.669 3.772-8.478 8.44-8.478H200.8v7.47h-10.979c-.56 0-.971.447-.971 1.008 0 .522.411.97.971.97h3.025c4.593 0 8.328 3.735 8.328 8.291M170.441 6.93c5.229 0 9.523 4.294 9.523 9.522 0 5.266-4.294 9.523-9.523 9.523h-2.801v7.096h-7.469V6.929zm0 11.576a2.05 2.05 0 0 0 2.054-2.054c0-1.12-.933-2.054-2.054-2.054h-2.801v4.108zM156.809 33.07h-7.469V6.93h7.469zM147.046 20c0 7.208-5.901 13.07-13.071 13.07-7.208 0-13.071-5.862-13.071-13.07 0-7.17 5.863-13.07 13.071-13.07 7.17 0 13.071 5.9 13.071 13.07m-7.469 0c0-3.062-2.54-5.602-5.602-5.602-3.1 0-5.602 2.54-5.602 5.602 0 3.1 2.502 5.602 5.602 5.602 3.062 0 5.602-2.502 5.602-5.602m-20.846-1.68v14.75h-9.337c-7.207 0-13.07-5.862-13.07-13.07 0-7.17 5.863-13.07 13.07-13.07h9.337v7.468h-9.337c-3.099 0-5.601 2.54-5.601 5.602 0 3.1 2.502 5.602 5.601 5.602h1.868V18.32zM95.113 20c0 7.208-5.9 13.07-13.071 13.07-7.208 0-13.07-5.862-13.07-13.07 0-7.17 5.862-13.07 13.07-13.07 7.17 0 13.07 5.9 13.07 13.07m-7.47 0c0-3.062-2.539-5.602-5.601-5.602-3.1 0-5.602 2.54-5.602 5.602 0 3.1 2.502 5.602 5.602 5.602 3.062 0 5.602-2.502 5.602-5.602m-19.441 5.602v7.469h-9.337a6.694 6.694 0 0 1-6.722-6.722V6.929h7.47v18.673z\"\n            />\n          </svg>\n        </div>\n\n        <div class=\"grid place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 221 40\" class=\"h-8\">\n            <path\n              fill=\"#00dc33\"\n              fill-rule=\"evenodd\"\n              d=\"M38.349.937A3.37 3.37 0 0 1 42.97.896l.123.12.42.441c4.248 4.592 5.832 9.943 5.426 15.168-.413 5.3-2.847 10.297-6.242 14.246-3.394 3.947-7.925 7.055-12.822 8.404-4.96 1.366-10.383.93-15.091-2.409-3.993-2.832-5.514-7.41-5.617-11.857-2.24-1.104-4.599-2.476-7.072-4.145l-.654-.446-.14-.101A3.32 3.32 0 0 1 .6 15.779a3.37 3.37 0 0 1 4.525-.931l.145.094.595.407c1.482 1 2.896 1.867 4.24 2.615.868-3.058 2.305-5.994 4.199-8.415 2.836-3.626 7.09-6.526 12.3-6.093 4.693.39 8.16 2.822 9.95 6.255 1.734 3.324 1.76 7.323.245 10.761-1.544 3.506-4.68 6.426-9.19 7.63-3.245.866-7.047.806-11.337-.353v.001a37.4 37.4 0 0 1-5.368-1.928c-.42-.185-.784.099 0 .591 2.21 1.575 5.32 2.895 6.22 3.339a5.7 5.7 0 0 0 1.559 1.687c2.783 1.974 6.04 2.336 9.4 1.41 3.421-.942 6.851-3.214 9.511-6.308 2.658-3.091 4.372-6.795 4.655-10.43.266-3.428-.719-6.95-3.686-10.152l-.293-.308-.117-.127a3.32 3.32 0 0 1 .196-4.587M26.045 10.1c-2.152-.179-4.424.96-6.443 3.54-1.537 1.965-2.7 4.519-3.294 7.147 4.225 1.45 7.374 1.46 9.561.877 2.533-.676 4.051-2.206 4.782-3.865.76-1.726.683-3.607-.055-5.021-.68-1.306-2.05-2.47-4.55-2.678\"\n              clip-rule=\"evenodd\"\n            />\n            <path\n              fill=\"#00390e\"\n              d=\"M137.709 13.603c-1.869 0-3.069-1.41-2.809-3.302C135.16 8.41 136.748 7 138.618 7s3.069 1.41 2.809 3.301-1.848 3.302-3.718 3.302m-5.099 18.535 2.337-16.988h5.099l-2.337 16.988z\"\n            />\n            <path\n              fill=\"#00390e\"\n              fill-rule=\"evenodd\"\n              d=\"m141.573 23.816-2.144 15.578h5.099l1.254-9.113c.846 1.513 2.437 2.304 4.442 2.304 3.808 0 8.547-2.82 9.36-8.734.753-5.468-2.48-9.148-7.817-9.148-5.133 0-9.409 3.405-10.194 9.113m12.873-.172c-.336 2.442-2.132 4.127-4.443 4.127-2.312 0-3.644-1.685-3.308-4.127s2.132-4.126 4.443-4.126c2.312 0 3.644 1.685 3.308 4.126\"\n              clip-rule=\"evenodd\"\n            />\n            <path\n              fill=\"#00390e\"\n              d=\"M166.375 32.585c-4.317 0-6.783-2.338-6.402-5.605h5.031c-.089.894.496 1.341 1.889 1.341 1.564 0 2.15-.55 2.249-1.272.146-1.06-.899-1.22-2.284-1.432l-.005-.001-.295-.046c-2.264-.344-5.991-.928-5.428-5.02.473-3.44 3.49-5.847 7.671-5.847s6.429 2.442 6.11 5.502h-4.963c-.028-.79-.646-1.237-1.666-1.237-1.257 0-1.857.653-1.952 1.34-.135.986.957 1.156 2.387 1.378l.207.032c2.366.344 5.981.998 5.428 5.021-.483 3.508-3.66 5.846-7.977 5.846m28.803-10.007-1.315 9.56h5.099l1.315-9.56c.313-2.27 1.509-3.06 3.039-3.06 1.496 0 2.475.79 2.162 3.06l-1.315 9.56h5.099l1.315-9.56c.313-2.27 1.509-3.06 3.005-3.06 1.53 0 2.509.79 2.197 3.06l-1.316 9.56h5.099l1.316-9.56c.752-5.468-2.044-7.875-6.124-7.875-2.413 0-4.513.929-6.016 2.717-1.012-1.788-2.89-2.717-5.27-2.717-4.079 0-7.537 2.407-8.29 7.875m-18.941 1.376c-.79 5.743 2.144 8.631 7.107 8.631s8.696-2.923 9.482-8.631l1.211-8.804h-5.099l-1.211 8.804c-.369 2.682-1.817 3.817-3.721 3.817s-3.039-1.135-2.67-3.817l1.211-8.804h-5.099z\"\n            />\n            <path\n              fill=\"#00390e\"\n              fill-rule=\"evenodd\"\n              d=\"M113.669 23.644c-.709 5.159 2.51 8.941 7.813 8.941s9.562-3.782 10.272-8.94c.71-5.159-2.509-8.942-7.812-8.942s-9.563 3.783-10.273 8.941m12.918 0c-.336 2.442-2.132 4.127-4.443 4.127-2.312 0-3.644-1.685-3.308-4.127s2.132-4.126 4.443-4.126c2.312 0 3.644 1.685 3.308 4.126m-29.153 7.344c-2.06-1.578-3.081-4.206-2.65-7.344.71-5.158 4.97-8.94 10.272-8.94s8.522 3.782 7.813 8.94c-.686 4.983-4.684 8.682-9.734 8.928 1.189.684 2.917 1.237 4.187 1.644.424.136.797.255 1.082.358 1.153.291 1.889 1.378 1.711 2.674-.209 1.52-1.596 2.752-3.099 2.752h-8.16c-3.004 0-5.1-2.464-4.683-5.503h8.702c-1.988-.778-4.09-2.334-5.441-3.509m5.825-3.217c2.311 0 4.107-1.685 4.443-4.127s-.996-4.126-3.308-4.126-4.107 1.685-4.443 4.126.996 4.127 3.308 4.127m-27.36-4.127c-.71 5.159 2.51 8.941 7.812 8.941s9.563-3.782 10.273-8.94c.71-5.159-2.51-8.942-7.813-8.942S76.61 18.486 75.9 23.644m12.918 0c-.336 2.442-2.132 4.127-4.443 4.127-2.312 0-3.644-1.685-3.308-4.127s2.131-4.126 4.443-4.126 3.643 1.685 3.308 4.126\"\n              clip-rule=\"evenodd\"\n            />\n            <path fill=\"#00390e\" d=\"m58 32.138 3.094-22.49h5.507L64.217 26.98H74.72l-.71 5.158z\" />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/logo-clouds/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"max-w-lg\">\n        <h2 class=\"text-2xl font-bold text-gray-900 sm:text-3xl\">Trusted by many</h2>\n\n        <p class=\"mt-4 text-pretty text-gray-700\">\n          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed voluptas delectus alias\n          magni velit! Dicta corrupti dignissimos dolor consequatur illum tempore consectetur hic a\n          cupiditate sunt quam, earum nisi aperiam.\n        </p>\n      </div>\n\n      <div\n        class=\"mt-4 grid grid-cols-2 gap-px overflow-hidden rounded-lg *:bg-gray-100 md:grid-cols-4\"\n      >\n        <div\n          class=\"grid aspect-video place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 285 40\" class=\"h-8\">\n            <path\n              fill=\"#ff500b\"\n              d=\"M35.235 0c10.494 0 19 8.507 19 19v21a8 8 0 0 1-8-8V19c0-6.075-4.925-11-11-11h-5.2a10 10 0 0 0-7.072 2.929L9.407 24.485a4 4 0 0 0-1.172 2.829V28a4 4 0 0 0 4 4h18a8 8 0 0 1-7.587 7.99l-.413.01h-10c-6.627 0-12-5.373-12-12v-.686a12 12 0 0 1 3.515-8.486L17.307 5.272A18 18 0 0 1 30.034 0z\"\n            />\n            <path\n              fill=\"#ff500b\"\n              d=\"M37.235 12a5 5 0 0 1 5 5v23a8 8 0 0 1-8-8V20h-3.343l-6.536 6.535A5 5 0 0 1 20.82 28h-8.107a.47.47 0 0 1-.332-.802l13.733-13.733A5 5 0 0 1 29.65 12z\"\n            />\n            <path\n              fill=\"#a62f00\"\n              d=\"M274.819 30.048V17.159a.73.73 0 0 0-.705-.706h-.483a.74.74 0 0 0-.669.446l-4.494 10.623c-.631 1.56-2.154 2.526-3.826 2.526-1.671 0-3.157-.966-3.788-2.526l-4.531-10.623c-.075-.26-.335-.446-.632-.446h-.483a.73.73 0 0 0-.705.706v12.889h-4.197V17.159c0-2.711 2.191-4.94 4.902-4.94h.483c1.969 0 3.751 1.189 4.531 3.046l4.42 10.474 4.42-10.474a4.93 4.93 0 0 1 4.569-3.046h.483c2.711 0 4.902 2.229 4.902 4.94v12.889zm-43.669 0a7.72 7.72 0 0 1-7.726-7.726V12.219h4.197v10.103c0 1.931 1.597 3.528 3.529 3.528h8.914c1.931 0 3.528-1.597 3.528-3.528V12.219h4.197v10.103a7.72 7.72 0 0 1-7.725 7.726zm-15.458-4.198c.705 0 1.3-.594 1.3-1.3 0-.705-.558-1.262-1.226-1.3h-9.917a5.484 5.484 0 0 1-5.497-5.497c0-3.045 2.451-5.534 5.497-5.534h15.377v4.234h-15.377c-.706 0-1.3.595-1.3 1.3s.594 1.3 1.3 1.3h9.991c2.971.075 5.386 2.489 5.386 5.497 0 3.046-2.489 5.497-5.534 5.497h-15.34V25.85zm-38.909 4.198V17.159c0-2.711 2.192-4.94 4.903-4.94h10.808c3.492 0 6.314 2.86 6.314 6.352 0 3.49-2.822 6.35-6.314 6.35H180.98v5.127zm4.197-12.889v3.529h11.514a2.14 2.14 0 0 0 2.117-2.117 2.14 2.14 0 0 0-2.117-2.118h-10.808a.73.73 0 0 0-.706.706m-11.266-4.939h4.197v17.828h-4.197zm-11.119 13.63c2.6 0 4.717-2.117 4.717-4.717 0-2.562-2.117-4.68-4.717-4.68h-6.537c-2.6 0-4.717 2.118-4.717 4.68 0 2.6 2.117 4.717 4.717 4.717zm0-13.63c4.94 0 8.914 4.01 8.914 8.913a8.893 8.893 0 0 1-8.914 8.915h-6.537a8.893 8.893 0 0 1-8.914-8.915c0-4.902 3.974-8.914 8.914-8.914zm-31.782 17.828a8.893 8.893 0 0 1-8.914-8.915c0-4.902 3.974-8.914 8.914-8.914h12.888v4.234h-12.888c-2.6 0-4.717 2.118-4.717 4.68 0 2.6 2.117 4.717 4.717 4.717h9.471c.706 0 1.3-.594 1.3-1.3 0-.705-.594-1.3-1.3-1.3h-10.177v-4.197h10.177c3.046 0 5.534 2.452 5.534 5.497s-2.488 5.497-5.534 5.497zm-19.216-4.198c2.6 0 4.717-2.117 4.717-4.717 0-2.562-2.117-4.68-4.717-4.68h-6.537c-2.6 0-4.717 2.118-4.717 4.68 0 2.6 2.117 4.717 4.717 4.717zm0-13.63c4.94 0 8.914 4.01 8.914 8.913a8.893 8.893 0 0 1-8.914 8.915h-6.537a8.893 8.893 0 0 1-8.914-8.915c0-4.902 3.974-8.914 8.914-8.914zM74.959 25.145a.73.73 0 0 0 .706.705h15.71v4.197h-15.71a4.9 4.9 0 0 1-4.903-4.902V12.108h4.197zm209.168-13.037a2.155 2.155 0 1 1-4.31 0 2.155 2.155 0 0 1 4.31 0\"\n            />\n          </svg>\n        </div>\n\n        <div\n          class=\"grid aspect-video place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 216 40\" class=\"h-8\">\n            <path\n              fill=\"#ff1616\"\n              d=\"M16.658 40h-1.276c-3.317 0-5.312 0-6.836-.284l8.82-11.682zm14.59-.249c-1.498.248-3.46.249-6.63.249H23.11l-.712-11.97zm8.424-8.081a8 8 0 0 1-.233.873 10.9 10.9 0 0 1-3.052 4.655L26.44 26.044zM3.485 37.08a10.9 10.9 0 0 1-2.924-4.537 8 8 0 0 1-.254-.963l13.017-5.534zM40 24.618c0 1.125-.003 2.097-.014 2.951l-11.813-4.563H40zm-28.404-1.612L.011 27.48C0 26.649 0 25.705 0 24.618v-1.612zM24.618 0c4.163 0 6.244 0 7.925.561a10.91 10.91 0 0 1 6.896 6.896c.56 1.681.561 3.762.561 7.925v4.634H27.509l9.01-3.83-2.673-1.774-8.741 3.376 4.103-5.43-2.95-.808-4.532 5.078-.337-5.719h-3.006l-.343 5.72-4.528-5.079-2.95.808 4.099 5.428-8.736-3.374-2.672 1.774 9.007 3.83H0v-4.634c0-4.163 0-6.244.561-7.925A10.91 10.91 0 0 1 7.457.561C9.138.001 11.22 0 15.382 0z\"\n            />\n            <path\n              fill=\"#280f00\"\n              d=\"M93.273 31.443c.94 1.763 2.755 2.872 5.094 2.872s4.154-1.109 5.094-2.872h3.518c-1.163 3.522-4.395 5.876-8.612 5.876-4.216 0-7.449-2.354-8.612-5.876zm51.23-18.683c5.36 0 9.115 3.687 9.115 8.978 0 5.6-4.165 8.775-8.569 8.775-2.731 0-5.052-1.23-6.281-3.414v10.173h-3.244v-15.5c0-5.496 3.756-9.012 8.979-9.012m.034 3.004c-3.448 0-5.769 2.458-5.769 5.872s2.321 5.872 5.769 5.872c3.482 0 5.804-2.458 5.804-5.872s-2.322-5.872-5.804-5.872M79.059 12.76c5.325 0 9.08 3.755 9.08 8.876s-3.755 8.877-9.08 8.877-9.081-3.756-9.081-8.877 3.755-8.876 9.08-8.876m0 3.004c-3.483 0-5.804 2.458-5.804 5.872s2.321 5.872 5.804 5.872 5.803-2.458 5.803-5.872-2.321-5.872-5.803-5.872m19.668-2.996h8.821v2.9h-2.276c1.378 1.545 2.175 3.611 2.175 5.968 0 5.12-3.755 8.877-9.08 8.877-5.327 0-9.082-3.756-9.082-8.877s3.756-8.876 9.081-8.876q.181.001.36.008m-.36 2.996c-3.483 0-5.804 2.458-5.805 5.872s2.322 5.872 5.804 5.872 5.804-2.458 5.804-5.872-2.322-5.872-5.804-5.872m19.308-3.004c5.325 0 9.081 3.755 9.081 8.876s-3.756 8.877-9.081 8.877c-5.326 0-9.081-3.756-9.081-8.877s3.755-8.876 9.081-8.876m0 3.004c-3.482 0-5.804 2.458-5.804 5.872s2.322 5.872 5.804 5.872 5.804-2.458 5.804-5.872c-.001-3.414-2.322-5.872-5.804-5.872m44.141-3.004c4.029 0 6.521 2.287 6.589 5.19h-3.21c-.102-1.298-1.296-2.254-3.344-2.255-2.151 0-3.38 1.025-3.38 2.357 0 1.604 1.775 1.774 3.857 2.048 2.936.375 6.52.921 6.521 4.779 0 3.414-2.765 5.633-6.998 5.634-4.234 0-6.897-2.254-6.999-5.327h3.277c.068 1.4 1.366 2.39 3.722 2.39 2.457 0 3.72-1.058 3.72-2.39 0-1.604-1.775-1.81-3.891-2.082-2.936-.376-6.487-.922-6.487-4.78 0-3.311 2.595-5.564 6.623-5.564m12.167 9.25c0 3.654 2.015 5.498 5.087 5.498 3.073 0 5.087-1.844 5.087-5.497v-8.808h3.243v8.808c0 5.599-3.345 8.5-8.33 8.5s-8.33-2.867-8.33-8.5v-8.808h3.243zm-117.5 4.85h12.529v3.208H53V7.741h3.482zm75.959 3.208h-3.243V13.203h3.243zM208.76 12.76c3.96 0 6.965 2.39 6.965 7.545v9.763h-3.244v-9.763c0-3.141-1.672-4.541-4.028-4.541-2.287 0-3.995 1.468-3.995 4.54v9.764h-3.243v-9.763c0-3.073-1.741-4.541-4.028-4.541-2.356 0-4.029 1.4-4.029 4.54v9.764h-3.243v-9.763c0-5.155 3.005-7.545 6.965-7.545 2.594 0 4.779 1.16 5.939 3.345 1.161-2.184 3.312-3.345 5.941-3.345M130.804 6c1.297 0 2.254.956 2.254 2.253s-.957 2.288-2.254 2.288-2.253-.99-2.253-2.288S129.507 6 130.804 6\"\n            />\n          </svg>\n        </div>\n\n        <div\n          class=\"grid aspect-video place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 260 40\" class=\"h-8\">\n            <path\n              fill=\"#297aff\"\n              d=\"M33.724 36.58A21.429 21.429 0 0 0 3.419 6.277l7.072 7.071c1.115 1.116 2.917 1.06 4.337.371a8.57 8.57 0 0 1 11.454 11.455c-.69 1.42-.745 3.221.37 4.337z\"\n            />\n            <path\n              fill=\"#34c2ff\"\n              d=\"M30 40H19.51a5.7 5.7 0 0 1-4.04-1.674L1.673 24.531A5.7 5.7 0 0 1 0 20.49V10zm-19.286 0H4.286A4.286 4.286 0 0 1 0 35.714v-6.428z\"\n            />\n            <path\n              fill=\"#0f2d5e\"\n              d=\"M244.137 6.93c8.44 0 15.311 6.87 15.311 15.31v10.83h-7.469V22.24c0-3.099-1.867-5.788-4.481-7.057V33.07h-7.469V22.24c0-3.1-1.868-5.789-4.482-7.058V33.07h-7.469V6.929h4.108c2.838 0 5.527.822 7.843 2.204V6.929zm-19.025 15.31c0 5.976-4.893 10.83-10.831 10.83-5.975 0-10.83-4.854-10.83-10.83V6.93h7.469v15.31a3.347 3.347 0 0 0 3.361 3.362 3.37 3.37 0 0 0 3.362-3.361V6.929h7.469zm-23.938 2.428c0 4.594-3.735 8.328-8.328 8.328h-11.092v-7.469h11.092a.87.87 0 0 0 .859-.859c0-.448-.411-.821-.859-.821h-3.025a8.43 8.43 0 0 1-8.44-8.44c0-4.669 3.772-8.478 8.44-8.478H200.8v7.47h-10.979c-.56 0-.971.447-.971 1.008 0 .522.411.97.971.97h3.025c4.593 0 8.328 3.735 8.328 8.291M170.441 6.93c5.229 0 9.523 4.294 9.523 9.522 0 5.266-4.294 9.523-9.523 9.523h-2.801v7.096h-7.469V6.929zm0 11.576a2.05 2.05 0 0 0 2.054-2.054c0-1.12-.933-2.054-2.054-2.054h-2.801v4.108zM156.809 33.07h-7.469V6.93h7.469zM147.046 20c0 7.208-5.901 13.07-13.071 13.07-7.208 0-13.071-5.862-13.071-13.07 0-7.17 5.863-13.07 13.071-13.07 7.17 0 13.071 5.9 13.071 13.07m-7.469 0c0-3.062-2.54-5.602-5.602-5.602-3.1 0-5.602 2.54-5.602 5.602 0 3.1 2.502 5.602 5.602 5.602 3.062 0 5.602-2.502 5.602-5.602m-20.846-1.68v14.75h-9.337c-7.207 0-13.07-5.862-13.07-13.07 0-7.17 5.863-13.07 13.07-13.07h9.337v7.468h-9.337c-3.099 0-5.601 2.54-5.601 5.602 0 3.1 2.502 5.602 5.601 5.602h1.868V18.32zM95.113 20c0 7.208-5.9 13.07-13.071 13.07-7.208 0-13.07-5.862-13.07-13.07 0-7.17 5.862-13.07 13.07-13.07 7.17 0 13.07 5.9 13.07 13.07m-7.47 0c0-3.062-2.539-5.602-5.601-5.602-3.1 0-5.602 2.54-5.602 5.602 0 3.1 2.502 5.602 5.602 5.602 3.062 0 5.602-2.502 5.602-5.602m-19.441 5.602v7.469h-9.337a6.694 6.694 0 0 1-6.722-6.722V6.929h7.47v18.673z\"\n            />\n          </svg>\n        </div>\n\n        <div\n          class=\"grid aspect-video place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 221 40\" class=\"h-8\">\n            <path\n              fill=\"#00dc33\"\n              fill-rule=\"evenodd\"\n              d=\"M38.349.937A3.37 3.37 0 0 1 42.97.896l.123.12.42.441c4.248 4.592 5.832 9.943 5.426 15.168-.413 5.3-2.847 10.297-6.242 14.246-3.394 3.947-7.925 7.055-12.822 8.404-4.96 1.366-10.383.93-15.091-2.409-3.993-2.832-5.514-7.41-5.617-11.857-2.24-1.104-4.599-2.476-7.072-4.145l-.654-.446-.14-.101A3.32 3.32 0 0 1 .6 15.779a3.37 3.37 0 0 1 4.525-.931l.145.094.595.407c1.482 1 2.896 1.867 4.24 2.615.868-3.058 2.305-5.994 4.199-8.415 2.836-3.626 7.09-6.526 12.3-6.093 4.693.39 8.16 2.822 9.95 6.255 1.734 3.324 1.76 7.323.245 10.761-1.544 3.506-4.68 6.426-9.19 7.63-3.245.866-7.047.806-11.337-.353v.001a37.4 37.4 0 0 1-5.368-1.928c-.42-.185-.784.099 0 .591 2.21 1.575 5.32 2.895 6.22 3.339a5.7 5.7 0 0 0 1.559 1.687c2.783 1.974 6.04 2.336 9.4 1.41 3.421-.942 6.851-3.214 9.511-6.308 2.658-3.091 4.372-6.795 4.655-10.43.266-3.428-.719-6.95-3.686-10.152l-.293-.308-.117-.127a3.32 3.32 0 0 1 .196-4.587M26.045 10.1c-2.152-.179-4.424.96-6.443 3.54-1.537 1.965-2.7 4.519-3.294 7.147 4.225 1.45 7.374 1.46 9.561.877 2.533-.676 4.051-2.206 4.782-3.865.76-1.726.683-3.607-.055-5.021-.68-1.306-2.05-2.47-4.55-2.678\"\n              clip-rule=\"evenodd\"\n            />\n            <path\n              fill=\"#00390e\"\n              d=\"M137.709 13.603c-1.869 0-3.069-1.41-2.809-3.302C135.16 8.41 136.748 7 138.618 7s3.069 1.41 2.809 3.301-1.848 3.302-3.718 3.302m-5.099 18.535 2.337-16.988h5.099l-2.337 16.988z\"\n            />\n            <path\n              fill=\"#00390e\"\n              fill-rule=\"evenodd\"\n              d=\"m141.573 23.816-2.144 15.578h5.099l1.254-9.113c.846 1.513 2.437 2.304 4.442 2.304 3.808 0 8.547-2.82 9.36-8.734.753-5.468-2.48-9.148-7.817-9.148-5.133 0-9.409 3.405-10.194 9.113m12.873-.172c-.336 2.442-2.132 4.127-4.443 4.127-2.312 0-3.644-1.685-3.308-4.127s2.132-4.126 4.443-4.126c2.312 0 3.644 1.685 3.308 4.126\"\n              clip-rule=\"evenodd\"\n            />\n            <path\n              fill=\"#00390e\"\n              d=\"M166.375 32.585c-4.317 0-6.783-2.338-6.402-5.605h5.031c-.089.894.496 1.341 1.889 1.341 1.564 0 2.15-.55 2.249-1.272.146-1.06-.899-1.22-2.284-1.432l-.005-.001-.295-.046c-2.264-.344-5.991-.928-5.428-5.02.473-3.44 3.49-5.847 7.671-5.847s6.429 2.442 6.11 5.502h-4.963c-.028-.79-.646-1.237-1.666-1.237-1.257 0-1.857.653-1.952 1.34-.135.986.957 1.156 2.387 1.378l.207.032c2.366.344 5.981.998 5.428 5.021-.483 3.508-3.66 5.846-7.977 5.846m28.803-10.007-1.315 9.56h5.099l1.315-9.56c.313-2.27 1.509-3.06 3.039-3.06 1.496 0 2.475.79 2.162 3.06l-1.315 9.56h5.099l1.315-9.56c.313-2.27 1.509-3.06 3.005-3.06 1.53 0 2.509.79 2.197 3.06l-1.316 9.56h5.099l1.316-9.56c.752-5.468-2.044-7.875-6.124-7.875-2.413 0-4.513.929-6.016 2.717-1.012-1.788-2.89-2.717-5.27-2.717-4.079 0-7.537 2.407-8.29 7.875m-18.941 1.376c-.79 5.743 2.144 8.631 7.107 8.631s8.696-2.923 9.482-8.631l1.211-8.804h-5.099l-1.211 8.804c-.369 2.682-1.817 3.817-3.721 3.817s-3.039-1.135-2.67-3.817l1.211-8.804h-5.099z\"\n            />\n            <path\n              fill=\"#00390e\"\n              fill-rule=\"evenodd\"\n              d=\"M113.669 23.644c-.709 5.159 2.51 8.941 7.813 8.941s9.562-3.782 10.272-8.94c.71-5.159-2.509-8.942-7.812-8.942s-9.563 3.783-10.273 8.941m12.918 0c-.336 2.442-2.132 4.127-4.443 4.127-2.312 0-3.644-1.685-3.308-4.127s2.132-4.126 4.443-4.126c2.312 0 3.644 1.685 3.308 4.126m-29.153 7.344c-2.06-1.578-3.081-4.206-2.65-7.344.71-5.158 4.97-8.94 10.272-8.94s8.522 3.782 7.813 8.94c-.686 4.983-4.684 8.682-9.734 8.928 1.189.684 2.917 1.237 4.187 1.644.424.136.797.255 1.082.358 1.153.291 1.889 1.378 1.711 2.674-.209 1.52-1.596 2.752-3.099 2.752h-8.16c-3.004 0-5.1-2.464-4.683-5.503h8.702c-1.988-.778-4.09-2.334-5.441-3.509m5.825-3.217c2.311 0 4.107-1.685 4.443-4.127s-.996-4.126-3.308-4.126-4.107 1.685-4.443 4.126.996 4.127 3.308 4.127m-27.36-4.127c-.71 5.159 2.51 8.941 7.812 8.941s9.563-3.782 10.273-8.94c.71-5.159-2.51-8.942-7.813-8.942S76.61 18.486 75.9 23.644m12.918 0c-.336 2.442-2.132 4.127-4.443 4.127-2.312 0-3.644-1.685-3.308-4.127s2.131-4.126 4.443-4.126 3.643 1.685 3.308 4.126\"\n              clip-rule=\"evenodd\"\n            />\n            <path fill=\"#00390e\" d=\"m58 32.138 3.094-22.49h5.507L64.217 26.98H74.72l-.71 5.158z\" />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/logo-clouds/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-2 gap-px overflow-hidden rounded-lg *:bg-gray-100 md:grid-cols-4\">\n        <div\n          class=\"grid aspect-video place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 285 40\" class=\"h-8\">\n            <path\n              fill=\"#ff500b\"\n              d=\"M35.235 0c10.494 0 19 8.507 19 19v21a8 8 0 0 1-8-8V19c0-6.075-4.925-11-11-11h-5.2a10 10 0 0 0-7.072 2.929L9.407 24.485a4 4 0 0 0-1.172 2.829V28a4 4 0 0 0 4 4h18a8 8 0 0 1-7.587 7.99l-.413.01h-10c-6.627 0-12-5.373-12-12v-.686a12 12 0 0 1 3.515-8.486L17.307 5.272A18 18 0 0 1 30.034 0z\"\n            />\n            <path\n              fill=\"#ff500b\"\n              d=\"M37.235 12a5 5 0 0 1 5 5v23a8 8 0 0 1-8-8V20h-3.343l-6.536 6.535A5 5 0 0 1 20.82 28h-8.107a.47.47 0 0 1-.332-.802l13.733-13.733A5 5 0 0 1 29.65 12z\"\n            />\n            <path\n              fill=\"#a62f00\"\n              d=\"M274.819 30.048V17.159a.73.73 0 0 0-.705-.706h-.483a.74.74 0 0 0-.669.446l-4.494 10.623c-.631 1.56-2.154 2.526-3.826 2.526-1.671 0-3.157-.966-3.788-2.526l-4.531-10.623c-.075-.26-.335-.446-.632-.446h-.483a.73.73 0 0 0-.705.706v12.889h-4.197V17.159c0-2.711 2.191-4.94 4.902-4.94h.483c1.969 0 3.751 1.189 4.531 3.046l4.42 10.474 4.42-10.474a4.93 4.93 0 0 1 4.569-3.046h.483c2.711 0 4.902 2.229 4.902 4.94v12.889zm-43.669 0a7.72 7.72 0 0 1-7.726-7.726V12.219h4.197v10.103c0 1.931 1.597 3.528 3.529 3.528h8.914c1.931 0 3.528-1.597 3.528-3.528V12.219h4.197v10.103a7.72 7.72 0 0 1-7.725 7.726zm-15.458-4.198c.705 0 1.3-.594 1.3-1.3 0-.705-.558-1.262-1.226-1.3h-9.917a5.484 5.484 0 0 1-5.497-5.497c0-3.045 2.451-5.534 5.497-5.534h15.377v4.234h-15.377c-.706 0-1.3.595-1.3 1.3s.594 1.3 1.3 1.3h9.991c2.971.075 5.386 2.489 5.386 5.497 0 3.046-2.489 5.497-5.534 5.497h-15.34V25.85zm-38.909 4.198V17.159c0-2.711 2.192-4.94 4.903-4.94h10.808c3.492 0 6.314 2.86 6.314 6.352 0 3.49-2.822 6.35-6.314 6.35H180.98v5.127zm4.197-12.889v3.529h11.514a2.14 2.14 0 0 0 2.117-2.117 2.14 2.14 0 0 0-2.117-2.118h-10.808a.73.73 0 0 0-.706.706m-11.266-4.939h4.197v17.828h-4.197zm-11.119 13.63c2.6 0 4.717-2.117 4.717-4.717 0-2.562-2.117-4.68-4.717-4.68h-6.537c-2.6 0-4.717 2.118-4.717 4.68 0 2.6 2.117 4.717 4.717 4.717zm0-13.63c4.94 0 8.914 4.01 8.914 8.913a8.893 8.893 0 0 1-8.914 8.915h-6.537a8.893 8.893 0 0 1-8.914-8.915c0-4.902 3.974-8.914 8.914-8.914zm-31.782 17.828a8.893 8.893 0 0 1-8.914-8.915c0-4.902 3.974-8.914 8.914-8.914h12.888v4.234h-12.888c-2.6 0-4.717 2.118-4.717 4.68 0 2.6 2.117 4.717 4.717 4.717h9.471c.706 0 1.3-.594 1.3-1.3 0-.705-.594-1.3-1.3-1.3h-10.177v-4.197h10.177c3.046 0 5.534 2.452 5.534 5.497s-2.488 5.497-5.534 5.497zm-19.216-4.198c2.6 0 4.717-2.117 4.717-4.717 0-2.562-2.117-4.68-4.717-4.68h-6.537c-2.6 0-4.717 2.118-4.717 4.68 0 2.6 2.117 4.717 4.717 4.717zm0-13.63c4.94 0 8.914 4.01 8.914 8.913a8.893 8.893 0 0 1-8.914 8.915h-6.537a8.893 8.893 0 0 1-8.914-8.915c0-4.902 3.974-8.914 8.914-8.914zM74.959 25.145a.73.73 0 0 0 .706.705h15.71v4.197h-15.71a4.9 4.9 0 0 1-4.903-4.902V12.108h4.197zm209.168-13.037a2.155 2.155 0 1 1-4.31 0 2.155 2.155 0 0 1 4.31 0\"\n            />\n          </svg>\n        </div>\n\n        <div\n          class=\"grid aspect-video place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 413 117\" class=\"h-8\">\n            <path\n              fill=\"#1d3aa7\"\n              d=\"M357.551 45.182v-.56h.056q2.016 0 3.248-1.232 1.232-1.233 1.232-3.248V21.774q0-2.129-.896-3.304-.84-1.176-3.64-1.176v-.56h5.544q2.296 0 3.528-.224 1.288-.224 1.904-.56.616-.393.896-.784h.56l.056 7.28q1.456-2.913 4.424-4.704 2.968-1.792 6.272-1.792 3.192 0 5.32 1.792 2.128 1.791 2.744 4.816a12.1 12.1 0 0 1 4.48-4.816q2.968-1.792 6.384-1.792 3.751-.001 5.992 2.464 2.296 2.464 2.296 6.496v15.232q0 2.016 1.232 3.248t3.248 1.232h.056v.56h-17.08v-.56h.056q2.016 0 3.248-1.232 1.232-1.233 1.232-3.248V24.35q0-2.8-1.12-4.48t-2.912-1.68q-1.736 0-3.64 1.568-1.905 1.512-3.304 3.976a.6.6 0 0 1 .056.28v16.128q0 2.016 1.232 3.248t3.248 1.232h.056v.56h-17.08v-.56h.056q2.016 0 3.248-1.232 1.232-1.233 1.232-3.248V24.35q0-2.8-1.12-4.48-1.063-1.68-2.856-1.68-1.736 0-3.64 1.512-1.848 1.455-3.248 3.976v16.464q0 2.016 1.232 3.248t3.248 1.232h.056v.56z\"\n            />\n            <path\n              fill=\"#1d3aa7\"\n              d=\"m345.774 46.75-.056-7.224q-1.457 2.856-4.424 4.648-2.969 1.792-6.272 1.792-3.753 0-6.048-2.464-2.24-2.464-2.24-6.496V21.774q0-2.129-.84-3.304-.84-1.176-3.696-1.176v-.56h5.656q2.856 0 4.368-.616 1.4-.617 1.96-1.512h.56v22.96q0 2.8 1.12 4.48t2.912 1.68q1.736 0 3.584-1.456 1.848-1.512 3.248-4.032V21.774q0-2.016-1.008-3.248t-3.472-1.232v-.56h5.656q2.856 0 4.368-.616 1.455-.617 2.016-1.512h.56l-.056 25.536q0 2.016 1.232 3.304 1.232 1.232 3.248 1.232v.504h-5.544q-1.457 0-2.576.056-1.12.111-1.848.224-1.512.336-2.128 1.288zm-34.721-.784q-1.457 0-2.184-.112a16 16 0 0 1-1.4-.28q-.617-.169-1.68-.28-1.064-.112-3.248-.112l-1.344-10.528h.728q.895 5.264 3.36 7.952 2.464 2.631 5.376 2.632 2.856 0 4.312-1.176 1.512-1.176 1.512-3.192 0-1.289-.672-2.24-.616-1.008-2.184-2.016-1.568-1.065-4.256-2.52l-1.624-.896q-3.08-1.737-4.592-4.032-1.456-2.352-1.456-5.04 0-3.808 2.744-5.992 2.8-2.184 7.448-2.184 1.176 0 1.904.112.728.111 1.4.28.672.168 1.68.28t2.688.112l.784 9.016h-.672q-.336-2.632-1.512-4.648-1.12-2.073-2.688-3.192-1.567-1.176-3.192-1.176-2.128 0-3.416 1.12-1.232 1.12-1.232 3.136 0 1.511.952 2.8 1.008 1.232 3.808 2.688l1.68.84q3.92 2.016 5.712 4.2t1.792 5.6q0 8.736-10.528 8.848m-45.9 10.976v-.56h.056q2.016 0 3.248-1.232 1.232-1.233 1.232-3.248V21.774q-.056-2.464-1.064-3.472t-3.472-1.008v-.56h5.544q3.304 0 4.536-.616 1.233-.617 1.792-1.512h.56l.056 7.168q1.289-2.52 3.92-4.2t5.544-1.68q3.137 0 5.544 1.904 2.409 1.903 3.752 5.208 1.4 3.247 1.4 7.504 0 4.704-1.68 8.176-1.68 3.471-4.76 5.376-3.024 1.904-7.224 1.904-2.295 0-3.752-.728-1.456-.672-2.632-2.296v8.96q0 2.016 1.232 3.248t3.248 1.232h.056v.56zm17.808-11.928q3.024 0 4.592-3.752 1.512-3.809 1.512-10.92 0-12.208-4.928-12.208-1.904 0-3.752 1.512t-2.632 3.696V36.39q0 4.032 1.4 6.328 1.4 2.295 3.808 2.296\"\n            />\n            <path\n              fill=\"#1d3aa7\"\n              d=\"M249.872 45.182v-.56h.056q2.016 0 3.248-1.232 1.232-1.233 1.232-3.248V21.774q0-2.129-.896-3.304-.84-1.176-3.64-1.176v-.56h5.712q2.856 0 4.368-.616 1.4-.617 1.96-1.512h.56v25.536q0 2.016 1.232 3.248 1.233 1.232 3.248 1.232h.056v.56zm8.512-34.104q-2.016 0-3.36-1.288-1.287-1.344-1.288-3.36 0-2.017 1.288-3.304 1.344-1.344 3.36-1.344 1.96 0 3.248 1.344 1.344 1.344 1.344 3.304t-1.344 3.304q-1.287 1.344-3.248 1.344m-24.579 34.888q-4.591 0-8.064-1.848-3.415-1.848-5.32-5.208-1.904-3.36-1.904-7.952t1.904-7.952q1.905-3.36 5.32-5.208 3.472-1.848 8.064-1.848t8.008 1.848 5.32 5.208 1.904 7.952-1.904 7.952q-1.903 3.36-5.32 5.208-3.415 1.848-8.008 1.848m-.056-.728q1.96 0 3.36-1.96 1.401-1.96 2.184-5.208.784-3.304.784-7.168 0-4.2-.84-7.392-.783-3.249-2.24-5.04-1.4-1.848-3.192-1.848-1.904 0-3.36 1.96-1.4 1.959-2.184 5.208-.783 3.248-.784 7.112 0 4.255.84 7.504.84 3.247 2.24 5.04 1.456 1.792 3.192 1.792\"\n            />\n            <path\n              fill=\"#1d3aa7\"\n              d=\"M203.496 57.726q-5.936 0-9.632-1.624-3.64-1.569-3.64-4.144 0-1.96 1.848-3.528 1.904-1.512 5.152-2.352-5.264-1.344-5.264-4.76 0-1.848 1.456-3.416 1.456-1.625 4.088-2.576-2.8-1.233-4.368-3.584-1.512-2.352-1.512-5.544 0-4.65 3.192-7.448 3.248-2.8 8.68-2.8 2.576-.001 5.04.784h10.304l-.56 1.008h-7.616q2.24 1.288 3.416 3.472 1.232 2.127 1.232 4.984 0 4.648-3.192 7.504-3.136 2.8-8.624 2.8-3.024-.001-5.32-.896-1.792.95-1.792 2.24 0 1.119 1.568 1.512.784.224 2.24.392t3.528.224l1.96.112q6.44.223 9.912 2.464 3.528 2.24 3.528 6.104 0 4.312-4.144 6.664-4.144 2.408-11.48 2.408m-.056-21.896q1.736 0 2.856-2.632 1.008-2.632 1.008-7 0-4.425-1.008-7-1.064-2.52-2.8-2.52-1.792 0-2.8 2.52-1.008 2.575-1.008 7 0 4.423 1.008 7.056 1.008 2.576 2.744 2.576m.672 21.168q2.576 0 4.76-.784 2.184-.728 3.472-2.072 1.344-1.344 1.344-3.08 0-1.905-1.96-3.024-2.072-1.065-6.328-1.12l-1.96-.112a36 36 0 0 1-3.024-.224 20 20 0 0 1-2.408-.336q-1.176.392-1.736 1.568t-.56 2.8q0 2.911 2.184 4.648t6.216 1.736m-30.955-11.032q-4.592 0-8.064-1.848-3.416-1.848-5.32-5.208t-1.904-7.952q0-4.593 1.904-7.952t5.32-5.208q3.472-1.848 8.064-1.848t8.008 1.848 5.32 5.208 1.904 7.952-1.904 7.952-5.32 5.208-8.008 1.848m-.056-.728q1.96 0 3.36-1.96t2.184-5.208q.784-3.304.784-7.168 0-4.2-.84-7.392-.784-3.249-2.24-5.04-1.4-1.848-3.192-1.848-1.904 0-3.36 1.96-1.4 1.959-2.184 5.208t-.784 7.112q0 4.255.84 7.504.84 3.247 2.24 5.04 1.457 1.792 3.192 1.792m-48.8-.056v-.56h.056q2.015 0 3.248-1.064 1.232-1.065 1.232-3.08V8.222q0-2.016-1.232-3.248-1.233-1.232-3.248-1.232h-.056v-.56h17.864v.56h-.224q-2.016 0-3.248 1.232t-1.232 3.248v32.48q0 1.791.84 2.8.896.952 3.08.952h1.176q4.983 0 8.4-3.08 3.415-3.08 4.312-8.68h.56l-1.68 12.488z\"\n            />\n            <path\n              fill=\"#7f869e\"\n              d=\"M356.465 116.726q-2.296 0-4.424-.896l2.184-6.552q1.4.56 3.024.952 1.68.392 3.36.392a9 9 0 0 0 3.976-.896q1.903-.84 2.856-3.192l.616-1.512-11.088-25.704q-.56-1.345-1.456-2.128-.952-.84-2.576-.896v-.56h16.184v.56q-1.512.167-2.352 1.064-.784.895-.784 2.296 0 1.231.56 2.52l5.656 13.272 5.656-13.272q.56-1.288.56-2.52 0-1.4-.84-2.296-.785-.896-2.352-1.064v-.56h7.728v.56q-1.288.279-2.184 1.68-.896 1.344-1.904 3.696l-11.424 26.544q-1.792 4.143-4.648 6.328-2.856 2.184-6.328 2.184\"\n            />\n            <path\n              fill=\"#7f869e\"\n              d=\"M345.742 104.966q-2.912 0-4.76-1.848t-1.848-4.816v-21.56h-4.76v-.728q3.864-.28 6.888-2.464 3.08-2.184 5.04-5.88h.896v8.064h7.448l-.56 1.008h-6.888V97.07q0 4.48 3.024 4.48 1.008 0 2.296-.616a10.8 10.8 0 0 0 2.52-1.624v.56q-1.848 2.352-4.368 3.752-2.52 1.344-4.928 1.344m-27.565-.784v-.56h.056q2.016 0 3.248-1.232t1.232-3.248V80.774q0-2.129-.896-3.304-.84-1.176-3.64-1.176v-.56h5.712q2.856 0 4.368-.616 1.4-.617 1.96-1.512h.56v25.536q0 2.016 1.232 3.248t3.248 1.232h.056v.56zm8.512-34.104q-2.016 0-3.36-1.288-1.288-1.344-1.288-3.36t1.288-3.304q1.344-1.344 3.36-1.344 1.96 0 3.248 1.344 1.344 1.344 1.344 3.304t-1.344 3.304q-1.288 1.344-3.248 1.344m-19.956 34.888q-1.456 0-2.184-.112a16 16 0 0 1-1.4-.28q-.616-.168-1.68-.28t-3.248-.112l-1.344-10.528h.728q.895 5.264 3.36 7.952 2.463 2.632 5.376 2.632 2.856 0 4.312-1.176 1.512-1.176 1.512-3.192 0-1.29-.672-2.24-.617-1.008-2.184-2.016-1.569-1.065-4.256-2.52l-1.624-.896q-3.08-1.737-4.592-4.032-1.456-2.352-1.456-5.04 0-3.809 2.744-5.992 2.8-2.184 7.448-2.184 1.175 0 1.904.112t1.4.28 1.68.28 2.688.112l.784 9.016h-.672q-.336-2.632-1.512-4.648-1.12-2.073-2.688-3.192-1.569-1.176-3.192-1.176-2.129 0-3.416 1.12-1.233 1.12-1.232 3.136 0 1.511.952 2.8 1.008 1.23 3.808 2.688l1.68.84q3.92 2.016 5.712 4.2 1.791 2.183 1.792 5.6 0 8.736-10.528 8.848m-36.463-.784v-.56h.056q2.015 0 3.248-1.232 1.232-1.232 1.232-3.248V80.774q0-2.129-.896-3.304-.84-1.176-3.64-1.176v-.56h5.544q2.967 0 4.48-.56 1.512-.617 2.128-1.568h.28l.056 9.184a29 29 0 0 1 1.848-3.528 10.9 10.9 0 0 1 2.912-3.08q1.791-1.289 4.256-1.288.84 0 1.792.168a9.5 9.5 0 0 1 2.016.616l-2.184 6.552q-2.016-1.12-3.528-1.568-1.457-.449-2.576-.448-1.905 0-2.856 1.176-.897 1.176-1.568 2.8v14.952q0 2.016 1.232 3.248t3.248 1.232h.056v.56zm-13.929.672q-3.864 0-6.888-1.904-2.968-1.904-4.648-5.264-1.68-3.417-1.68-7.784 0-4.48 1.848-7.84t5.04-5.208q3.249-1.904 7.336-1.904 3.417 0 6.048 1.344 2.688 1.344 4.256 3.808 1.625 2.408 1.848 5.6l.056.84h-18.816v.28q0 5.935 2.632 9.52 2.632 3.528 7.056 3.528 2.688 0 5.096-1.288 2.464-1.344 3.976-3.584l.504.168a13.75 13.75 0 0 1-2.968 5.04 14.5 14.5 0 0 1-4.76 3.416q-2.744 1.232-5.936 1.232m-5.544-19.152h11.368q0-4.425-1.456-7.168-1.4-2.744-3.976-2.744-2.463 0-4.088 2.688-1.623 2.688-1.848 7.224m-21.305 19.376-11.144-25.76q-.56-1.288-1.512-2.128-.896-.84-2.52-.896v-.56h15.68v.56q-1.96.224-2.576 1.736-.56 1.512.392 3.808l5.768 13.496 5.712-13.16q.56-1.288.56-2.52 0-1.4-.84-2.296t-2.352-1.064v-.56h8.848v.56q-1.456.336-2.8 1.68T240.3 81.67l-10.304 23.408zm-29.057-.896v-.56h.056q2.016 0 3.248-1.232t1.232-3.248V80.774q0-2.129-.896-3.304-.84-1.176-3.64-1.176v-.56h5.712q2.856 0 4.368-.616 1.4-.617 1.96-1.512h.56v25.536q0 2.016 1.232 3.248t3.248 1.232h.056v.56zm8.512-34.104q-2.016 0-3.36-1.288-1.288-1.344-1.288-3.36t1.288-3.304q1.344-1.344 3.36-1.344 1.96 0 3.248 1.344 1.344 1.344 1.344 3.304t-1.344 3.304q-1.288 1.344-3.248 1.344\"\n            />\n            <path\n              fill=\"#7f869e\"\n              d=\"M165.051 104.182v-.56h.056q2.015 0 3.248-1.232 1.232-1.232 1.232-3.248V80.774q0-2.129-.896-3.304-.84-1.176-3.64-1.176v-.56h5.544q2.856 0 4.368-.616 1.4-.617 1.96-1.512h.56l.056 7.84q1.455-2.913 4.424-4.704 2.967-1.792 6.272-1.792 3.751-.001 5.992 2.464 2.295 2.463 2.296 6.496v15.232q0 2.016 1.232 3.248t3.248 1.232h.056v.56h-17.08v-.56h.056q2.015 0 3.248-1.232 1.232-1.232 1.232-3.248V83.35q0-2.8-1.12-4.48-1.065-1.68-2.856-1.68-1.737 0-3.64 1.512-1.848 1.456-3.248 3.976v16.464q0 2.016 1.232 3.248t3.248 1.232h.056v.56zm-20.142.784q-4.929 0-8.568-1.904-3.64-1.905-5.656-5.376-1.96-3.528-1.96-8.232V67.222q0-2.016-1.232-3.248-1.233-1.233-3.248-1.232h-.224v-.56h18.032v.56h-.168q-2.016 0-3.248 1.232t-1.232 3.248v22.232q0 5.935 3.024 9.408 3.08 3.416 8.288 3.416 5.264 0 8.288-3.472 3.024-3.529 3.024-9.352V68.062q0-2.409-1.456-3.808-1.456-1.401-3.864-1.512v-.56h11.592v.56q-2.409.111-3.864 1.512-1.456 1.4-1.456 3.808v21.392q0 4.704-1.96 8.176-1.905 3.471-5.544 5.432-3.585 1.904-8.568 1.904\"\n            />\n            <path\n              fill=\"#1d3aa7\"\n              fill-rule=\"evenodd\"\n              d=\"M85.3 7.182v-7h16.001v64.5c0 27.89-22.61 50.5-50.5 50.5-26.714 0-48.583-20.743-50.38-47H.3v-68h16v7h27v-7h16v7zm0 57.5v-9.817a66 66 0 0 1-5.775 5.277c-6.758 5.479-14.696 9.76-23.33 12.659-8.636 2.9-17.851 4.38-27.13 4.38h-10.43c5.007 12.875 17.52 22 32.166 22 19.054 0 34.5-15.446 34.5-34.5m-40.482-12.05a50.4 50.4 0 0 1-10.22 8.334c5.683-.443 11.247-1.568 16.502-3.333 6.953-2.334 13.177-5.726 18.348-9.92 5.17-4.19 9.16-9.076 11.839-14.32 1.692-3.312 2.849-6.74 3.471-10.211H58.786a54.6 54.6 0 0 1-3.231 12.428c-2.477 6.338-6.118 12.126-10.737 17.022m-28.517-1.233V23.182h26.27a38.5 38.5 0 0 1-1.919 6.605c-1.744 4.465-4.29 8.493-7.472 11.865-3.18 3.371-6.93 6.019-11.023 7.816-1.9.834-3.86 1.48-5.856 1.93\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </div>\n\n        <div\n          class=\"grid aspect-video place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 260 40\" class=\"h-8\">\n            <path\n              fill=\"#297aff\"\n              d=\"M33.724 36.58A21.429 21.429 0 0 0 3.419 6.277l7.072 7.071c1.115 1.116 2.917 1.06 4.337.371a8.57 8.57 0 0 1 11.454 11.455c-.69 1.42-.745 3.221.37 4.337z\"\n            />\n            <path\n              fill=\"#34c2ff\"\n              d=\"M30 40H19.51a5.7 5.7 0 0 1-4.04-1.674L1.673 24.531A5.7 5.7 0 0 1 0 20.49V10zm-19.286 0H4.286A4.286 4.286 0 0 1 0 35.714v-6.428z\"\n            />\n            <path\n              fill=\"#0f2d5e\"\n              d=\"M244.137 6.93c8.44 0 15.311 6.87 15.311 15.31v10.83h-7.469V22.24c0-3.099-1.867-5.788-4.481-7.057V33.07h-7.469V22.24c0-3.1-1.868-5.789-4.482-7.058V33.07h-7.469V6.929h4.108c2.838 0 5.527.822 7.843 2.204V6.929zm-19.025 15.31c0 5.976-4.893 10.83-10.831 10.83-5.975 0-10.83-4.854-10.83-10.83V6.93h7.469v15.31a3.347 3.347 0 0 0 3.361 3.362 3.37 3.37 0 0 0 3.362-3.361V6.929h7.469zm-23.938 2.428c0 4.594-3.735 8.328-8.328 8.328h-11.092v-7.469h11.092a.87.87 0 0 0 .859-.859c0-.448-.411-.821-.859-.821h-3.025a8.43 8.43 0 0 1-8.44-8.44c0-4.669 3.772-8.478 8.44-8.478H200.8v7.47h-10.979c-.56 0-.971.447-.971 1.008 0 .522.411.97.971.97h3.025c4.593 0 8.328 3.735 8.328 8.291M170.441 6.93c5.229 0 9.523 4.294 9.523 9.522 0 5.266-4.294 9.523-9.523 9.523h-2.801v7.096h-7.469V6.929zm0 11.576a2.05 2.05 0 0 0 2.054-2.054c0-1.12-.933-2.054-2.054-2.054h-2.801v4.108zM156.809 33.07h-7.469V6.93h7.469zM147.046 20c0 7.208-5.901 13.07-13.071 13.07-7.208 0-13.071-5.862-13.071-13.07 0-7.17 5.863-13.07 13.071-13.07 7.17 0 13.071 5.9 13.071 13.07m-7.469 0c0-3.062-2.54-5.602-5.602-5.602-3.1 0-5.602 2.54-5.602 5.602 0 3.1 2.502 5.602 5.602 5.602 3.062 0 5.602-2.502 5.602-5.602m-20.846-1.68v14.75h-9.337c-7.207 0-13.07-5.862-13.07-13.07 0-7.17 5.863-13.07 13.07-13.07h9.337v7.468h-9.337c-3.099 0-5.601 2.54-5.601 5.602 0 3.1 2.502 5.602 5.601 5.602h1.868V18.32zM95.113 20c0 7.208-5.9 13.07-13.071 13.07-7.208 0-13.07-5.862-13.07-13.07 0-7.17 5.862-13.07 13.07-13.07 7.17 0 13.07 5.9 13.07 13.07m-7.47 0c0-3.062-2.539-5.602-5.601-5.602-3.1 0-5.602 2.54-5.602 5.602 0 3.1 2.502 5.602 5.602 5.602 3.062 0 5.602-2.502 5.602-5.602m-19.441 5.602v7.469h-9.337a6.694 6.694 0 0 1-6.722-6.722V6.929h7.47v18.673z\"\n            />\n          </svg>\n        </div>\n\n        <div\n          class=\"grid aspect-video place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 221 40\" class=\"h-8\">\n            <path\n              fill=\"#00dc33\"\n              fill-rule=\"evenodd\"\n              d=\"M38.349.937A3.37 3.37 0 0 1 42.97.896l.123.12.42.441c4.248 4.592 5.832 9.943 5.426 15.168-.413 5.3-2.847 10.297-6.242 14.246-3.394 3.947-7.925 7.055-12.822 8.404-4.96 1.366-10.383.93-15.091-2.409-3.993-2.832-5.514-7.41-5.617-11.857-2.24-1.104-4.599-2.476-7.072-4.145l-.654-.446-.14-.101A3.32 3.32 0 0 1 .6 15.779a3.37 3.37 0 0 1 4.525-.931l.145.094.595.407c1.482 1 2.896 1.867 4.24 2.615.868-3.058 2.305-5.994 4.199-8.415 2.836-3.626 7.09-6.526 12.3-6.093 4.693.39 8.16 2.822 9.95 6.255 1.734 3.324 1.76 7.323.245 10.761-1.544 3.506-4.68 6.426-9.19 7.63-3.245.866-7.047.806-11.337-.353v.001a37.4 37.4 0 0 1-5.368-1.928c-.42-.185-.784.099 0 .591 2.21 1.575 5.32 2.895 6.22 3.339a5.7 5.7 0 0 0 1.559 1.687c2.783 1.974 6.04 2.336 9.4 1.41 3.421-.942 6.851-3.214 9.511-6.308 2.658-3.091 4.372-6.795 4.655-10.43.266-3.428-.719-6.95-3.686-10.152l-.293-.308-.117-.127a3.32 3.32 0 0 1 .196-4.587M26.045 10.1c-2.152-.179-4.424.96-6.443 3.54-1.537 1.965-2.7 4.519-3.294 7.147 4.225 1.45 7.374 1.46 9.561.877 2.533-.676 4.051-2.206 4.782-3.865.76-1.726.683-3.607-.055-5.021-.68-1.306-2.05-2.47-4.55-2.678\"\n              clip-rule=\"evenodd\"\n            />\n            <path\n              fill=\"#00390e\"\n              d=\"M137.709 13.603c-1.869 0-3.069-1.41-2.809-3.302C135.16 8.41 136.748 7 138.618 7s3.069 1.41 2.809 3.301-1.848 3.302-3.718 3.302m-5.099 18.535 2.337-16.988h5.099l-2.337 16.988z\"\n            />\n            <path\n              fill=\"#00390e\"\n              fill-rule=\"evenodd\"\n              d=\"m141.573 23.816-2.144 15.578h5.099l1.254-9.113c.846 1.513 2.437 2.304 4.442 2.304 3.808 0 8.547-2.82 9.36-8.734.753-5.468-2.48-9.148-7.817-9.148-5.133 0-9.409 3.405-10.194 9.113m12.873-.172c-.336 2.442-2.132 4.127-4.443 4.127-2.312 0-3.644-1.685-3.308-4.127s2.132-4.126 4.443-4.126c2.312 0 3.644 1.685 3.308 4.126\"\n              clip-rule=\"evenodd\"\n            />\n            <path\n              fill=\"#00390e\"\n              d=\"M166.375 32.585c-4.317 0-6.783-2.338-6.402-5.605h5.031c-.089.894.496 1.341 1.889 1.341 1.564 0 2.15-.55 2.249-1.272.146-1.06-.899-1.22-2.284-1.432l-.005-.001-.295-.046c-2.264-.344-5.991-.928-5.428-5.02.473-3.44 3.49-5.847 7.671-5.847s6.429 2.442 6.11 5.502h-4.963c-.028-.79-.646-1.237-1.666-1.237-1.257 0-1.857.653-1.952 1.34-.135.986.957 1.156 2.387 1.378l.207.032c2.366.344 5.981.998 5.428 5.021-.483 3.508-3.66 5.846-7.977 5.846m28.803-10.007-1.315 9.56h5.099l1.315-9.56c.313-2.27 1.509-3.06 3.039-3.06 1.496 0 2.475.79 2.162 3.06l-1.315 9.56h5.099l1.315-9.56c.313-2.27 1.509-3.06 3.005-3.06 1.53 0 2.509.79 2.197 3.06l-1.316 9.56h5.099l1.316-9.56c.752-5.468-2.044-7.875-6.124-7.875-2.413 0-4.513.929-6.016 2.717-1.012-1.788-2.89-2.717-5.27-2.717-4.079 0-7.537 2.407-8.29 7.875m-18.941 1.376c-.79 5.743 2.144 8.631 7.107 8.631s8.696-2.923 9.482-8.631l1.211-8.804h-5.099l-1.211 8.804c-.369 2.682-1.817 3.817-3.721 3.817s-3.039-1.135-2.67-3.817l1.211-8.804h-5.099z\"\n            />\n            <path\n              fill=\"#00390e\"\n              fill-rule=\"evenodd\"\n              d=\"M113.669 23.644c-.709 5.159 2.51 8.941 7.813 8.941s9.562-3.782 10.272-8.94c.71-5.159-2.509-8.942-7.812-8.942s-9.563 3.783-10.273 8.941m12.918 0c-.336 2.442-2.132 4.127-4.443 4.127-2.312 0-3.644-1.685-3.308-4.127s2.132-4.126 4.443-4.126c2.312 0 3.644 1.685 3.308 4.126m-29.153 7.344c-2.06-1.578-3.081-4.206-2.65-7.344.71-5.158 4.97-8.94 10.272-8.94s8.522 3.782 7.813 8.94c-.686 4.983-4.684 8.682-9.734 8.928 1.189.684 2.917 1.237 4.187 1.644.424.136.797.255 1.082.358 1.153.291 1.889 1.378 1.711 2.674-.209 1.52-1.596 2.752-3.099 2.752h-8.16c-3.004 0-5.1-2.464-4.683-5.503h8.702c-1.988-.778-4.09-2.334-5.441-3.509m5.825-3.217c2.311 0 4.107-1.685 4.443-4.127s-.996-4.126-3.308-4.126-4.107 1.685-4.443 4.126.996 4.127 3.308 4.127m-27.36-4.127c-.71 5.159 2.51 8.941 7.812 8.941s9.563-3.782 10.273-8.94c.71-5.159-2.51-8.942-7.813-8.942S76.61 18.486 75.9 23.644m12.918 0c-.336 2.442-2.132 4.127-4.443 4.127-2.312 0-3.644-1.685-3.308-4.127s2.131-4.126 4.443-4.126 3.643 1.685 3.308 4.126\"\n              clip-rule=\"evenodd\"\n            />\n            <path fill=\"#00390e\" d=\"m58 32.138 3.094-22.49h5.507L64.217 26.98H74.72l-.71 5.158z\" />\n          </svg>\n        </div>\n\n        <div\n          class=\"grid aspect-video place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 155 40\" class=\"h-8\">\n            <path\n              fill=\"#243a5a\"\n              d=\"M51.582 10.284H48v16.163h9.916V23.28h-6.334zm6.677 10.681c0 3.45 2.315 5.744 5.81 5.744 3.472 0 5.788-2.293 5.788-5.744s-2.316-5.767-5.788-5.767c-3.495 0-5.81 2.316-5.81 5.767m3.385-.022c0-1.638.961-2.73 2.425-2.73 1.441 0 2.402 1.092 2.402 2.73 0 1.66-.96 2.752-2.403 2.752-1.463 0-2.424-1.092-2.424-2.752m8.754-.153c0 3.298 2.14 5.526 5.176 5.526 1.464 0 2.73-.524 3.364-1.376v1.507c0 1.507-.94 2.512-2.6 2.512-1.484 0-2.511-.699-2.576-1.944h-3.408c.306 2.992 2.621 5.002 5.788 5.002 3.735 0 6.094-2.425 6.094-6.269V15.526H79.2l-.175 1.114c-.611-.896-1.9-1.485-3.385-1.485-3.058 0-5.242 2.293-5.242 5.635m3.407-.087c0-1.573 1.049-2.621 2.381-2.621 1.55 0 2.687 1.026 2.687 2.62s-1.114 2.687-2.665 2.687c-1.332 0-2.403-1.092-2.403-2.686m9.412.262c0 3.45 2.315 5.744 5.81 5.744 3.473 0 5.788-2.293 5.788-5.744s-2.315-5.767-5.788-5.767c-3.495 0-5.81 2.316-5.81 5.767m3.385-.022c0-1.638.961-2.73 2.425-2.73 1.441 0 2.402 1.092 2.402 2.73 0 1.66-.96 2.752-2.402 2.752-1.464 0-2.425-1.092-2.425-2.752m11.113-7.121c1.048 0 1.9-.851 1.9-1.922s-.852-1.9-1.9-1.9c-1.07 0-1.922.83-1.922 1.9s.852 1.922 1.922 1.922M96.01 26.447h3.386v-10.92H96.01zm5.358 5.243h3.32v-6.335c.633.83 2.075 1.398 3.582 1.398 3.254 0 5.22-2.49 5.133-5.941-.088-3.517-2.119-5.635-5.155-5.635-1.551 0-3.014.677-3.626 1.681l-.175-1.332h-3.079zm3.385-10.703c0-1.638 1.092-2.73 2.665-2.73 1.594 0 2.599 1.113 2.599 2.73s-1.005 2.73-2.599 2.73c-1.573 0-2.665-1.092-2.665-2.73m9.008 2.009c.087 2.206 1.835 3.735 4.587 3.735 2.643 0 4.478-1.398 4.478-3.648 0-1.616-.961-2.686-2.753-3.123l-1.943-.48c-.699-.175-1.136-.35-1.136-.918s.458-.94 1.136-.94c.764 0 1.266.503 1.245 1.246h3.036c-.088-2.272-1.813-3.691-4.216-3.691-2.424 0-4.237 1.441-4.237 3.625 0 1.464.808 2.665 2.97 3.233l1.922.502c.568.153.808.415.808.787 0 .546-.502.895-1.354.895-.983 0-1.507-.458-1.507-1.223zm14.213 3.735c1.333 0 2.665-.612 3.342-1.507l.219 1.223h3.167v-10.92h-3.364v5.678c0 1.638-.48 2.534-2.031 2.534-1.202 0-1.988-.546-1.988-2.578v-5.635h-3.364v6.858c0 2.6 1.442 4.347 4.019 4.347m12.062-.284v-5.963c0-1.835.983-2.359 1.944-2.359 1.07 0 1.769.656 1.769 2.01v6.312h3.32v-5.963c0-1.856.961-2.38 1.922-2.38 1.07 0 1.791.655 1.791 2.03v6.313h3.277v-7.142c0-2.49-1.311-4.15-4.129-4.15-1.572 0-2.861.764-3.429 1.944-.655-1.18-1.791-1.944-3.604-1.944-1.201 0-2.315.546-2.97 1.42l-.131-1.049h-3.146v10.921zM0 20C0 10.572 0 5.858 2.929 2.929S10.572 0 20 0s14.142 0 17.071 2.929S40 10.572 40 20s0 14.142-2.929 17.071S29.428 40 20 40 5.858 40 2.929 37.071 0 29.428 0 20\"\n              class=\"ccustom\"\n            />\n            <path\n              fill=\"#2df8bb\"\n              d=\"M24 26c.552 0 1.01.452.9.993a5 5 0 0 1-9.8 0c-.11-.54.348-.993.9-.993zm2.102-8.223c-.533.142-.86.7-.59 1.182a4 4 0 1 0 .627-4.754c-.386.395-.215 1.019.263 1.295l.507.293c.772.445.62 1.601-.24 1.832zm-12.204 0c.533.142.86.7.59 1.182a4 4 0 1 1-.626-4.754c.386.395.214 1.019-.264 1.295l-.507.293c-.772.445-.62 1.601.241 1.832z\"\n              class=\"ccompli2\"\n            />\n          </svg>\n        </div>\n\n        <div\n          class=\"grid aspect-video place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 216 40\" class=\"h-8\">\n            <path\n              fill=\"#ff1616\"\n              d=\"M16.658 40h-1.276c-3.317 0-5.312 0-6.836-.284l8.82-11.682zm14.59-.249c-1.498.248-3.46.249-6.63.249H23.11l-.712-11.97zm8.424-8.081a8 8 0 0 1-.233.873 10.9 10.9 0 0 1-3.052 4.655L26.44 26.044zM3.485 37.08a10.9 10.9 0 0 1-2.924-4.537 8 8 0 0 1-.254-.963l13.017-5.534zM40 24.618c0 1.125-.003 2.097-.014 2.951l-11.813-4.563H40zm-28.404-1.612L.011 27.48C0 26.649 0 25.705 0 24.618v-1.612zM24.618 0c4.163 0 6.244 0 7.925.561a10.91 10.91 0 0 1 6.896 6.896c.56 1.681.561 3.762.561 7.925v4.634H27.509l9.01-3.83-2.673-1.774-8.741 3.376 4.103-5.43-2.95-.808-4.532 5.078-.337-5.719h-3.006l-.343 5.72-4.528-5.079-2.95.808 4.099 5.428-8.736-3.374-2.672 1.774 9.007 3.83H0v-4.634c0-4.163 0-6.244.561-7.925A10.91 10.91 0 0 1 7.457.561C9.138.001 11.22 0 15.382 0z\"\n            />\n            <path\n              fill=\"#280f00\"\n              d=\"M93.273 31.443c.94 1.763 2.755 2.872 5.094 2.872s4.154-1.109 5.094-2.872h3.518c-1.163 3.522-4.395 5.876-8.612 5.876-4.216 0-7.449-2.354-8.612-5.876zm51.23-18.683c5.36 0 9.115 3.687 9.115 8.978 0 5.6-4.165 8.775-8.569 8.775-2.731 0-5.052-1.23-6.281-3.414v10.173h-3.244v-15.5c0-5.496 3.756-9.012 8.979-9.012m.034 3.004c-3.448 0-5.769 2.458-5.769 5.872s2.321 5.872 5.769 5.872c3.482 0 5.804-2.458 5.804-5.872s-2.322-5.872-5.804-5.872M79.059 12.76c5.325 0 9.08 3.755 9.08 8.876s-3.755 8.877-9.08 8.877-9.081-3.756-9.081-8.877 3.755-8.876 9.08-8.876m0 3.004c-3.483 0-5.804 2.458-5.804 5.872s2.321 5.872 5.804 5.872 5.803-2.458 5.803-5.872-2.321-5.872-5.803-5.872m19.668-2.996h8.821v2.9h-2.276c1.378 1.545 2.175 3.611 2.175 5.968 0 5.12-3.755 8.877-9.08 8.877-5.327 0-9.082-3.756-9.082-8.877s3.756-8.876 9.081-8.876q.181.001.36.008m-.36 2.996c-3.483 0-5.804 2.458-5.805 5.872s2.322 5.872 5.804 5.872 5.804-2.458 5.804-5.872-2.322-5.872-5.804-5.872m19.308-3.004c5.325 0 9.081 3.755 9.081 8.876s-3.756 8.877-9.081 8.877c-5.326 0-9.081-3.756-9.081-8.877s3.755-8.876 9.081-8.876m0 3.004c-3.482 0-5.804 2.458-5.804 5.872s2.322 5.872 5.804 5.872 5.804-2.458 5.804-5.872c-.001-3.414-2.322-5.872-5.804-5.872m44.141-3.004c4.029 0 6.521 2.287 6.589 5.19h-3.21c-.102-1.298-1.296-2.254-3.344-2.255-2.151 0-3.38 1.025-3.38 2.357 0 1.604 1.775 1.774 3.857 2.048 2.936.375 6.52.921 6.521 4.779 0 3.414-2.765 5.633-6.998 5.634-4.234 0-6.897-2.254-6.999-5.327h3.277c.068 1.4 1.366 2.39 3.722 2.39 2.457 0 3.72-1.058 3.72-2.39 0-1.604-1.775-1.81-3.891-2.082-2.936-.376-6.487-.922-6.487-4.78 0-3.311 2.595-5.564 6.623-5.564m12.167 9.25c0 3.654 2.015 5.498 5.087 5.498 3.073 0 5.087-1.844 5.087-5.497v-8.808h3.243v8.808c0 5.599-3.345 8.5-8.33 8.5s-8.33-2.867-8.33-8.5v-8.808h3.243zm-117.5 4.85h12.529v3.208H53V7.741h3.482zm75.959 3.208h-3.243V13.203h3.243zM208.76 12.76c3.96 0 6.965 2.39 6.965 7.545v9.763h-3.244v-9.763c0-3.141-1.672-4.541-4.028-4.541-2.287 0-3.995 1.468-3.995 4.54v9.764h-3.243v-9.763c0-3.073-1.741-4.541-4.028-4.541-2.356 0-4.029 1.4-4.029 4.54v9.764h-3.243v-9.763c0-5.155 3.005-7.545 6.965-7.545 2.594 0 4.779 1.16 5.939 3.345 1.161-2.184 3.312-3.345 5.941-3.345M130.804 6c1.297 0 2.254.956 2.254 2.253s-.957 2.288-2.254 2.288-2.253-.99-2.253-2.288S129.507 6 130.804 6\"\n            />\n          </svg>\n        </div>\n\n        <div\n          class=\"grid aspect-video place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 82 40\" class=\"h-8\">\n            <path\n              fill=\"#ffd43d\"\n              d=\"M73.365 19.71c0 2.904-2.241 5.31-5.27 5.31-3.03 0-5.228-2.406-5.228-5.31 0-2.905 2.199-5.312 5.228-5.312s5.27 2.407 5.27 5.311Z\"\n            />\n            <path\n              fill=\"#ff0c81\"\n              d=\"M48.764 19.544c0 2.946-2.323 5.145-5.27 5.145-2.904 0-5.227-2.2-5.227-5.145 0-2.947 2.323-5.104 5.228-5.104 2.946 0 5.27 2.158 5.27 5.104Z\"\n            />\n            <path\n              fill=\"#11eefc\"\n              d=\"M20.074 25.02c3.029 0 5.27-2.406 5.27-5.31 0-2.905-2.241-5.312-5.27-5.312-3.03 0-5.228 2.407-5.228 5.311s2.199 5.312 5.228 5.312Z\"\n            />\n            <path\n              fill=\"#171a26\"\n              d=\"M68.095 30.54c-6.307 0-11.12-4.897-11.12-10.872 0-5.934 4.855-10.83 11.12-10.83 6.349 0 11.162 4.938 11.162 10.83 0 5.975-4.855 10.871-11.162 10.871Zm0-5.52c3.03 0 5.27-2.406 5.27-5.31 0-2.905-2.24-5.312-5.27-5.312s-5.228 2.407-5.228 5.311 2.199 5.312 5.228 5.312ZM43.08 40c-4.813 0-8.506-2.116-10.373-5.934l4.896-2.655c.913 1.784 2.614 3.195 5.394 3.195 3.486 0 5.85-2.448 5.85-6.473v-.374c-1.12 1.411-3.111 2.49-6.016 2.49-5.768 0-10.373-4.481-10.373-10.581 0-5.934 4.813-10.788 11.12-10.788 6.431 0 11.162 4.605 11.162 10.788v8.299C54.74 35.27 49.76 40 43.08 40m.415-15.311c2.946 0 5.27-2.2 5.27-5.145 0-2.947-2.324-5.104-5.27-5.104-2.905 0-5.228 2.158-5.228 5.104s2.323 5.145 5.228 5.145M20.074 30.54c-6.307 0-11.12-4.897-11.12-10.872 0-5.934 4.854-10.83 11.12-10.83 6.348 0 11.162 4.938 11.162 10.83 0 5.975-4.855 10.871-11.162 10.871Zm0-5.52c3.029 0 5.27-2.406 5.27-5.31 0-2.905-2.241-5.312-5.27-5.312-3.03 0-5.228 2.407-5.228 5.311s2.199 5.312 5.228 5.312ZM0 0h5.892v30H0zm82 6.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0\"\n            />\n          </svg>\n        </div>\n\n        <div\n          class=\"grid aspect-video place-content-center p-4 grayscale transition-[filter] hover:grayscale-0\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 423 113\" class=\"h-8\">\n            <path\n              fill=\"#193070\"\n              fill-rule=\"evenodd\"\n              d=\"m.879 12.439 7.395-3.22a108 108 0 0 1 86.21 0l7.395 3.22v49.743c0 27.89-22.61 50.5-50.5 50.5s-50.5-22.61-50.5-50.5zm16 10.52v21.768a34 34 0 0 0 16.041-9.004 34 34 0 0 0 9.59-19.05 92 92 0 0 0-25.63 6.287m.003 39.678a34 34 0 0 1 25.997 32.99c-14.803-3.75-25.791-17.07-25.997-32.99m33.997 5.915a50 50 0 0 0-14.87-14.87 50 50 0 0 0 14.87-14.871 50 50 0 0 0 14.87 14.87 50 50 0 0 0-14.87 14.871m8 27.312c15.376-3.409 26.893-17.077 27-33.454a34 34 0 0 0-27 33.272zm20.989-52.77a34 34 0 0 0 6.01 1.86V22.958a92 92 0 0 0-26.644-6.378 34 34 0 0 0 20.634 26.513\"\n              clip-rule=\"evenodd\"\n            />\n            <path\n              fill=\"#788199\"\n              fill-rule=\"evenodd\"\n              d=\"M222.027 102.758q-3.6 0-6.48-1.728-2.88-1.776-4.56-4.8-1.632-3.072-1.632-6.912 0-3.888 1.632-6.912 1.68-3.024 4.512-4.752 2.88-1.776 6.528-1.776 3.312 0 5.904 1.44 2.122 1.178 3.504 3.033V65.846h3.6v36.336h-3.6v-4.193q-1.293 2.045-3.456 3.281-2.64 1.488-5.952 1.488m.192-3.6q2.592 0 4.656-1.296a9.2 9.2 0 0 0 3.312-3.504q1.248-2.256 1.248-5.04t-1.248-4.992q-1.2-2.256-3.312-3.552-2.064-1.296-4.656-1.296-2.544 0-4.608 1.296t-3.264 3.504q-1.152 2.208-1.152 5.04 0 2.784 1.152 5.04 1.2 2.208 3.216 3.504 2.064 1.296 4.656 1.296m23.952 1.872q2.928 1.728 6.528 1.728 2.64 0 4.8-.864 2.208-.912 3.792-2.352 1.584-1.488 2.352-3.216l-3.072-1.632a10.8 10.8 0 0 1-3.12 3.36q-1.92 1.344-4.752 1.344a9.06 9.06 0 0 1-4.608-1.248q-2.112-1.248-3.36-3.504-.969-1.862-.999-4.224h20.247q.096-.624.144-1.2.048-.624.048-1.104a12.5 12.5 0 0 0-.816-4.464 12.3 12.3 0 0 0-2.352-3.936 10.8 10.8 0 0 0-3.744-2.784q-2.16-1.056-4.944-1.056-3.504 0-6.336 1.728-2.784 1.728-4.416 4.752-1.632 2.976-1.632 6.864t1.68 6.96 4.56 4.848m-2.382-13.968q.178-1.703.894-3.072 1.152-2.256 3.168-3.504a8.47 8.47 0 0 1 4.464-1.248q2.4 0 4.32 1.248 1.92 1.2 2.928 3.312.758 1.483.749 3.264z\"\n              clip-rule=\"evenodd\"\n            />\n            <path\n              fill=\"#788199\"\n              d=\"M269.078 76.454h3.6v3.134a7.8 7.8 0 0 1 2.544-2.462 8.9 8.9 0 0 1 4.608-1.248q2.976 0 5.376 1.68 1.856 1.298 2.879 3.2.988-2.092 2.833-3.296a9.4 9.4 0 0 1 5.28-1.584q2.592 0 4.752 1.248a9.3 9.3 0 0 1 3.504 3.456q1.344 2.16 1.344 4.896v16.704h-3.6V86.87q0-2.352-.864-3.984-.816-1.632-2.256-2.496-1.44-.912-3.312-.912-1.824 0-3.312.912-1.488.864-2.352 2.544-.864 1.632-.864 3.936v15.312h-3.6V86.87q0-2.352-.864-3.984-.816-1.632-2.256-2.496-1.44-.912-3.312-.912t-3.36.912q-1.44.864-2.304 2.544-.864 1.632-.864 3.936v15.312h-3.6zm42.213 36.288a9 9 0 0 1-1.584-.144 6.8 6.8 0 0 1-1.536-.384v-3.36q.48.048 1.2.144a8.3 8.3 0 0 0 1.536.144q2.352 0 3.6-1.008 1.248-.96 2.448-3.744l.93-2.189-10.29-25.747h3.888l8.423 21.237 8.377-21.237h3.984l-11.76 28.992a17.6 17.6 0 0 1-1.968 3.552 8.7 8.7 0 0 1-2.928 2.688q-1.776 1.056-4.32 1.056\"\n            />\n            <path\n              fill=\"#788199\"\n              fill-rule=\"evenodd\"\n              d=\"M187.454 101.846q1.92.912 4.369.912 2.256 0 4.127-.672 1.92-.72 3.312-1.872a8.4 8.4 0 0 0 1.584-1.715v3.683h3.601V84.518q0-2.544-1.249-4.464-1.2-1.968-3.407-3.072-2.16-1.104-4.993-1.104-2.16 0-4.176.816a12.3 12.3 0 0 0-3.6 2.112q-1.535 1.344-2.256 2.976l3.265 1.776q.863-1.872 2.64-3.024 1.775-1.2 4.127-1.2 2.688 0 4.369 1.44 1.679 1.44 1.679 3.744v1.328l-9.312 1.552q-2.832.48-4.655 1.632-1.825 1.152-2.689 2.832-.863 1.632-.863 3.648 0 2.112 1.103 3.744 1.105 1.632 3.024 2.592m13.392-12.736v1.936q0 2.352-1.104 4.272t-3.071 3.072q-1.968 1.104-4.609 1.104-2.16 0-3.552-1.2-1.343-1.2-1.343-2.928 0-1.776 1.199-3.072 1.248-1.296 4.032-1.776z\"\n              clip-rule=\"evenodd\"\n            />\n            <path\n              fill=\"#788199\"\n              d=\"M169.27 102.758q-3.792 0-6.672-1.776t-4.512-4.8q-1.632-3.072-1.632-6.912t1.632-6.864 4.512-4.752q2.88-1.776 6.672-1.776 2.4 0 4.512.864a12.6 12.6 0 0 1 3.744 2.352q1.632 1.44 2.448 3.36l-3.264 1.68q-.96-2.064-2.928-3.36t-4.512-1.296-4.608 1.296q-2.016 1.248-3.216 3.504-1.152 2.208-1.152 5.04 0 2.784 1.152 5.04 1.2 2.208 3.216 3.504 2.064 1.296 4.608 1.296t4.464-1.296a8.2 8.2 0 0 0 2.976-3.456l3.264 1.776q-.816 1.872-2.448 3.36a12.6 12.6 0 0 1-3.744 2.352q-2.112.864-4.512.864\"\n            />\n            <path\n              fill=\"#788199\"\n              fill-rule=\"evenodd\"\n              d=\"m138.463 66.422-13.056 35.76h4.032l3.12-8.736h15.984l3.072 8.736h4.032l-13.056-35.76zm8.736 23.424h-13.392l6.718-18.917z\"\n              clip-rule=\"evenodd\"\n            />\n            <path\n              fill=\"#0c193e\"\n              d=\"M128.66 8.499v42.683h26.928v-7.735H137.54V8.5zm135.614 42.683h8.594V19.9h-8.594zm0-42.683v8.594h8.594V8.499z\"\n            />\n            <path\n              fill=\"#0c193e\"\n              fill-rule=\"evenodd\"\n              d=\"M277.438 62.64V19.9h8.021v3.245q1.39-1.635 3.437-2.615 2.693-1.317 6.131-1.318 4.468 0 8.078 2.178t5.729 5.9q2.12 3.667 2.12 8.25 0 4.527-2.12 8.25-2.063 3.725-5.672 5.902t-8.193 2.177q-3.209 0-5.958-1.146a10.9 10.9 0 0 1-2.979-1.944V62.64zm16.5-18.505q2.406 0 4.24-1.089 1.833-1.089 2.864-3.036 1.031-1.949 1.031-4.47t-1.031-4.41q-1.03-1.949-2.864-3.037-1.834-1.146-4.24-1.146-2.292 0-4.125 1.088-1.776 1.089-2.807 3.037-.974 1.948-.974 4.469 0 2.52.974 4.469 1.03 1.947 2.807 3.036 1.833 1.089 4.125 1.089\"\n              clip-rule=\"evenodd\"\n            />\n            <path\n              fill=\"#0c193e\"\n              d=\"M317.534 49.463q3.838 2.406 8.995 2.406 3.666 0 6.359-1.203 2.693-1.26 4.183-3.437 1.547-2.178 1.547-5.1 0-3.38-2.063-5.671-2.062-2.349-5.958-3.495l-4.985-1.49a12.3 12.3 0 0 1-1.948-.745q-.744-.401-1.088-.916a2 2 0 0 1-.344-1.146q0-1.204.917-1.89.973-.689 2.635-.688 2.292 0 4.068 1.203 1.833 1.146 2.521 3.093l6.359-2.979q-1.432-3.896-4.927-6.015-3.437-2.178-8.021-2.178-3.495 0-6.188 1.26-2.692 1.204-4.182 3.381t-1.489 5.1q0 3.322 2.062 5.786 2.062 2.406 5.901 3.495l5.328 1.49q1.032.286 1.719.687t1.031.916q.345.459.344 1.146 0 1.318-.974 2.063t-2.807.745a7.86 7.86 0 0 1-4.584-1.433q-2.062-1.432-3.265-3.953l-6.302 2.98q1.374 4.125 5.156 6.588M374.613 19.9h8.021v3.779a7.1 7.1 0 0 1 2.464-2.748q2.635-1.719 6.302-1.719 3.896 0 6.818 2.006 1.737 1.135 2.715 2.74 1.242-1.814 2.957-2.912 2.864-1.834 6.703-1.834 3.38 0 5.958 1.49 2.636 1.49 4.125 4.182 1.49 2.636 1.49 6.188v20.11h-8.594V32.905q0-1.833-.687-3.15a4.8 4.8 0 0 0-1.834-2.063q-1.203-.745-2.922-.745-1.66 0-2.921.745-1.204.744-1.891 2.062-.63 1.319-.63 3.151v18.277h-8.594V32.905q0-1.833-.688-3.15a4.8 4.8 0 0 0-1.833-2.063q-1.203-.745-2.922-.745-1.662 0-2.922.745-1.203.744-1.891 2.062-.63 1.319-.63 3.151v18.277h-8.594zm-21.349 31.97q-3.781 0-6.474-1.605-2.636-1.662-4.01-4.584-1.375-2.921-1.375-6.817V19.9h8.594v18.276q0 1.776.687 3.151a5.35 5.35 0 0 0 2.063 2.063q1.317.745 2.979.745 1.719 0 2.979-.745a4.96 4.96 0 0 0 2.005-2.063q.745-1.375.745-3.15V19.9h8.594v31.282h-8.021v-3.807q-1.093 2.06-3.094 3.176-2.406 1.318-5.672 1.318\"\n            />\n            <path\n              fill=\"#0c193e\"\n              fill-rule=\"evenodd\"\n              d=\"M244.201 51.87q-4.641 0-8.48-2.12a16.65 16.65 0 0 1-6.073-5.787q-2.234-3.724-2.234-8.422 0-4.756 2.234-8.422a16.65 16.65 0 0 1 6.073-5.787q3.839-2.12 8.48-2.12 4.64 0 8.422 2.12 3.78 2.12 6.015 5.787 2.292 3.666 2.292 8.422 0 4.699-2.292 8.422-2.234 3.666-6.015 5.786-3.782 2.12-8.422 2.12m0-7.735q2.35 0 4.067-1.089 1.776-1.089 2.75-3.036 1.032-1.949 1.032-4.47t-1.032-4.41q-.974-1.949-2.75-3.037-1.718-1.146-4.067-1.146t-4.125 1.146q-1.777 1.089-2.808 3.036-.974 1.89-.974 4.412 0 2.52.974 4.469 1.031 1.947 2.808 3.036t4.125 1.089m-42.307 18.449q3.094 1.203 6.703 1.203 4.526 0 7.964-1.833 3.495-1.834 5.5-5.1 2.004-3.207 2.005-7.333V19.9h-8.021v3.286q-1.416-1.662-3.208-2.599-2.521-1.374-5.902-1.375-4.296 0-7.677 1.948t-5.328 5.386q-1.948 3.38-1.948 7.792 0 4.41 1.948 7.906a14.45 14.45 0 0 0 5.386 5.443q3.437 1.947 7.791 1.948 3.381 0 5.901-1.26a10 10 0 0 0 2.464-1.816v2.961q0 2.006-.859 3.495a5.13 5.13 0 0 1-2.349 2.234q-1.548.802-3.667.802-2.692 0-4.641-1.26t-2.578-3.437l-7.964 2.807q.974 2.922 3.152 5.041 2.233 2.178 5.328 3.38m10.198-21.657q-1.605.917-3.782.917t-3.895-.917a7.26 7.26 0 0 1-2.636-2.635q-.917-1.661-.917-3.839 0-2.235.917-3.896.974-1.719 2.636-2.635 1.718-.974 3.895-.974 2.12 0 3.724.974 1.605.917 2.521 2.635.918 1.662.917 3.896 0 2.235-.917 3.896a6.17 6.17 0 0 1-2.463 2.578M173.169 51.87q-4.64 0-8.479-2.12a16.65 16.65 0 0 1-6.073-5.787q-2.234-3.724-2.234-8.422 0-4.756 2.234-8.422a16.65 16.65 0 0 1 6.073-5.787q3.838-2.12 8.479-2.12t8.422 2.12 6.016 5.787q2.292 3.666 2.292 8.422 0 4.699-2.292 8.422-2.235 3.666-6.016 5.786t-8.422 2.12m0-7.735q2.349 0 4.068-1.089 1.776-1.089 2.75-3.036 1.031-1.949 1.031-4.47t-1.031-4.41q-.974-1.949-2.75-3.037-1.719-1.146-4.068-1.146t-4.125 1.146q-1.776 1.089-2.807 3.036-.974 1.89-.974 4.412 0 2.52.974 4.469 1.03 1.947 2.807 3.036t4.125 1.089\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/newsletter-signup/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"bg-gray-100 dark:bg-gray-800\">\n      <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n        <div class=\"max-w-prose\">\n          <h2 class=\"text-2xl font-semibold text-gray-900 sm:text-3xl dark:text-white\">\n            Sign up for our newsletter\n          </h2>\n\n          <p class=\"mt-4 text-pretty text-gray-700 dark:text-gray-200\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe\n            architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas\n            sequi.\n          </p>\n        </div>\n\n        <form action=\"#\" class=\"mt-6 flex max-w-xl flex-col gap-4 sm:flex-row sm:items-center\">\n          <label for=\"Email\" class=\"flex-1\">\n            <span class=\"sr-only\"> Email </span>\n\n            <input\n              type=\"email\"\n              id=\"Email\"\n              placeholder=\"Enter your email\"\n              class=\"h-12 w-full rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n            />\n          </label>\n\n          <button\n            type=\"submit\"\n            class=\"h-12 rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 dark:text-white dark:hover:bg-indigo-700 dark:hover:text-white\"\n          >\n            Sign Up\n          </button>\n        </form>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/newsletter-signup/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"bg-gray-100\">\n      <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n        <div class=\"max-w-prose\">\n          <h2 class=\"text-2xl font-semibold text-gray-900 sm:text-3xl\">\n            Sign up for our newsletter\n          </h2>\n\n          <p class=\"mt-4 text-pretty text-gray-700\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe\n            architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas\n            sequi.\n          </p>\n        </div>\n\n        <form action=\"#\" class=\"mt-6 flex max-w-xl flex-col gap-4 sm:flex-row sm:items-center\">\n          <label for=\"Email\" class=\"flex-1\">\n            <span class=\"sr-only\"> Email </span>\n\n            <input\n              type=\"email\"\n              id=\"Email\"\n              placeholder=\"Enter your email\"\n              class=\"h-12 w-full rounded border-gray-300 shadow-sm\"\n            />\n          </label>\n\n          <button\n            type=\"submit\"\n            class=\"h-12 rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600\"\n          >\n            Sign Up\n          </button>\n        </form>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/newsletter-signup/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"bg-gray-100 dark:bg-gray-800\">\n      <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n        <div class=\"mx-auto max-w-prose text-center\">\n          <h2 class=\"text-2xl font-semibold text-gray-900 sm:text-3xl dark:text-white\">\n            Sign up for our newsletter\n          </h2>\n\n          <p class=\"mt-4 text-pretty text-gray-700 dark:text-gray-200\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe\n            architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas\n            sequi.\n          </p>\n        </div>\n\n        <form\n          action=\"#\"\n          class=\"mx-auto mt-6 flex max-w-xl flex-col gap-4 sm:flex-row sm:items-center sm:justify-center\"\n        >\n          <label for=\"Email\" class=\"flex-1\">\n            <span class=\"sr-only\"> Email </span>\n\n            <input\n              type=\"email\"\n              id=\"Email\"\n              placeholder=\"Enter your email\"\n              class=\"h-12 w-full rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n            />\n          </label>\n\n          <button\n            type=\"submit\"\n            class=\"h-12 rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 dark:text-white dark:hover:bg-indigo-700 dark:hover:text-white\"\n          >\n            Sign Up\n          </button>\n        </form>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/newsletter-signup/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"bg-gray-100\">\n      <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n        <div class=\"mx-auto max-w-prose text-center\">\n          <h2 class=\"text-2xl font-semibold text-gray-900 sm:text-3xl\">\n            Sign up for our newsletter\n          </h2>\n\n          <p class=\"mt-4 text-pretty text-gray-700\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe\n            architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas\n            sequi.\n          </p>\n        </div>\n\n        <form\n          action=\"#\"\n          class=\"mx-auto mt-6 flex max-w-xl flex-col gap-4 sm:flex-row sm:items-center sm:justify-center\"\n        >\n          <label for=\"Email\" class=\"flex-1\">\n            <span class=\"sr-only\"> Email </span>\n\n            <input\n              type=\"email\"\n              id=\"Email\"\n              placeholder=\"Enter your email\"\n              class=\"h-12 w-full rounded border-gray-300 shadow-sm\"\n            />\n          </label>\n\n          <button\n            type=\"submit\"\n            class=\"h-12 rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600\"\n          >\n            Sign Up\n          </button>\n        </form>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/polls/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"max-w-prose\">\n        <h2 class=\"text-2xl font-semibold text-gray-900 sm:text-3xl dark:text-white\">\n          Where should we go for lunch?\n        </h2>\n\n        <p class=\"mt-4 text-pretty text-gray-700 dark:text-gray-200\">\n          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe maiores exercitationem id\n          soluta eaque harum eligendi distinctio sapiente esse ad! Sit expedita eos quam numquam ea,\n          assumenda officiis minus ut!\n        </p>\n      </div>\n\n      <form action=\"#\" class=\"mt-6 space-y-4\">\n        <fieldset class=\"space-y-4\">\n          <legend class=\"sr-only\">Select an option</legend>\n\n          <div class=\"flex items-center gap-4\">\n            <label\n              for=\"Option1\"\n              class=\"relative block flex-1 overflow-hidden rounded border border-gray-300 px-4 py-2 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n            >\n              <div\n                class=\"absolute inset-y-0 left-0 rounded bg-gray-100 dark:bg-gray-800\"\n                style=\"width: 45%\"\n              ></div>\n\n              <div class=\"relative flex items-center gap-4\">\n                <input\n                  type=\"radio\"\n                  id=\"Option1\"\n                  name=\"Poll1\"\n                  class=\"size-5 border-gray-300 shadow-sm dark:border-gray-600\"\n                />\n\n                <span class=\"font-medium text-gray-900 dark:text-white\"> Option 1 </span>\n              </div>\n            </label>\n\n            <span class=\"text-gray-700 dark:text-gray-200\">45%</span>\n          </div>\n\n          <div class=\"flex items-center gap-4\">\n            <label\n              for=\"Option2\"\n              class=\"relative block flex-1 overflow-hidden rounded border border-gray-300 px-4 py-2 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n            >\n              <div\n                class=\"absolute inset-y-0 left-0 rounded bg-gray-100 dark:bg-gray-800\"\n                style=\"width: 25%\"\n              ></div>\n\n              <div class=\"relative flex items-center gap-4\">\n                <input\n                  type=\"radio\"\n                  id=\"Option2\"\n                  name=\"Poll1\"\n                  class=\"size-5 border-gray-300 shadow-sm dark:border-gray-600\"\n                />\n\n                <span class=\"font-medium text-gray-900 dark:text-white\"> Option 2 </span>\n              </div>\n            </label>\n\n            <span class=\"text-gray-700 dark:text-gray-200\">25%</span>\n          </div>\n\n          <div class=\"flex items-center gap-4\">\n            <label\n              for=\"Option3\"\n              class=\"relative block flex-1 overflow-hidden rounded border border-gray-300 px-4 py-2 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white\"\n            >\n              <div\n                class=\"absolute inset-y-0 left-0 rounded bg-gray-100 dark:bg-gray-800\"\n                style=\"width: 30%\"\n              ></div>\n\n              <div class=\"relative flex items-center gap-4\">\n                <input\n                  type=\"radio\"\n                  id=\"Option3\"\n                  name=\"Poll1\"\n                  class=\"size-5 border-gray-300 shadow-sm dark:border-gray-600\"\n                />\n\n                <span class=\"font-medium text-gray-900 dark:text-white\"> Option 3 </span>\n              </div>\n            </label>\n\n            <span class=\"text-gray-700 dark:text-gray-200\">30%</span>\n          </div>\n        </fieldset>\n      </form>\n\n      <p class=\"mt-4 text-sm text-gray-700 dark:text-gray-200\">\n        Ends on <time datetime=\"2025-10-31\">October 31, 2025</time>\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/polls/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"max-w-prose\">\n        <h2 class=\"text-2xl font-semibold text-gray-900 sm:text-3xl\">\n          Where should we go for lunch?\n        </h2>\n\n        <p class=\"mt-4 text-pretty text-gray-700\">\n          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe maiores exercitationem id\n          soluta eaque harum eligendi distinctio sapiente esse ad! Sit expedita eos quam numquam ea,\n          assumenda officiis minus ut!\n        </p>\n      </div>\n\n      <form action=\"#\" class=\"mt-6 space-y-4\">\n        <fieldset class=\"space-y-4\">\n          <legend class=\"sr-only\">Select an option</legend>\n\n          <div class=\"flex items-center gap-4\">\n            <label\n              for=\"Option1\"\n              class=\"relative block flex-1 overflow-hidden rounded border border-gray-300 px-4 py-2 shadow-sm\"\n            >\n              <div class=\"absolute inset-y-0 left-0 rounded bg-gray-100\" style=\"width: 45%\"></div>\n\n              <div class=\"relative flex items-center gap-4\">\n                <input\n                  type=\"radio\"\n                  id=\"Option1\"\n                  name=\"Poll1\"\n                  class=\"size-5 border-gray-300 shadow-sm\"\n                />\n\n                <span class=\"font-medium text-gray-900\"> Option 1 </span>\n              </div>\n            </label>\n\n            <span class=\"text-gray-700\">45%</span>\n          </div>\n\n          <div class=\"flex items-center gap-4\">\n            <label\n              for=\"Option2\"\n              class=\"relative block flex-1 overflow-hidden rounded border border-gray-300 px-4 py-2 shadow-sm\"\n            >\n              <div class=\"absolute inset-y-0 left-0 rounded bg-gray-100\" style=\"width: 25%\"></div>\n\n              <div class=\"relative flex items-center gap-4\">\n                <input\n                  type=\"radio\"\n                  id=\"Option2\"\n                  name=\"Poll1\"\n                  class=\"size-5 border-gray-300 shadow-sm\"\n                />\n\n                <span class=\"font-medium text-gray-900\"> Option 2 </span>\n              </div>\n            </label>\n\n            <span class=\"text-gray-700\">25%</span>\n          </div>\n\n          <div class=\"flex items-center gap-4\">\n            <label\n              for=\"Option3\"\n              class=\"relative block flex-1 overflow-hidden rounded border border-gray-300 px-4 py-2 shadow-sm\"\n            >\n              <div class=\"absolute inset-y-0 left-0 rounded bg-gray-100\" style=\"width: 30%\"></div>\n\n              <div class=\"relative flex items-center gap-4\">\n                <input\n                  type=\"radio\"\n                  id=\"Option3\"\n                  name=\"Poll1\"\n                  class=\"size-5 border-gray-300 shadow-sm\"\n                />\n\n                <span class=\"font-medium text-gray-900\"> Option 3 </span>\n              </div>\n            </label>\n\n            <span class=\"text-gray-700\">30%</span>\n          </div>\n        </fieldset>\n      </form>\n\n      <p class=\"mt-4 text-sm text-gray-700\">\n        Ends on <time datetime=\"2025-10-31\">October 31, 2025</time>\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/polls/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"max-w-prose\">\n        <h2 class=\"text-2xl font-semibold text-gray-900 sm:text-3xl dark:text-white\">\n          Where should we go for lunch?\n        </h2>\n\n        <p class=\"mt-4 text-pretty text-gray-700 dark:text-gray-200\">\n          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe maiores exercitationem id\n          soluta eaque harum eligendi distinctio sapiente esse ad! Sit expedita eos quam numquam ea,\n          assumenda officiis minus ut!\n        </p>\n      </div>\n\n      <form action=\"#\" class=\"mt-6 space-y-4\">\n        <fieldset class=\"space-y-4\">\n          <legend class=\"sr-only\">Select an option</legend>\n\n          <div class=\"flex items-center gap-4\">\n            <label\n              for=\"Option1\"\n              class=\"relative block flex-1 overflow-hidden rounded border border-gray-300 px-4 py-2 shadow-sm dark:border-gray-600\"\n            >\n              <div\n                class=\"absolute inset-y-0 left-0 rounded bg-gray-100 dark:bg-gray-800\"\n                style=\"width: 45%\"\n              ></div>\n\n              <div class=\"relative flex items-center gap-4\">\n                <input\n                  type=\"checkbox\"\n                  id=\"Option1\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm dark:border-gray-600\"\n                />\n\n                <span class=\"font-medium text-gray-900 dark:text-white\"> Option 1 </span>\n              </div>\n            </label>\n\n            <span class=\"text-gray-700 dark:text-gray-200\">45%</span>\n          </div>\n\n          <div class=\"flex items-center gap-4\">\n            <label\n              for=\"Option2\"\n              class=\"relative block flex-1 overflow-hidden rounded border border-gray-300 px-4 py-2 shadow-sm dark:border-gray-600\"\n            >\n              <div\n                class=\"absolute inset-y-0 left-0 rounded bg-gray-100 dark:bg-gray-800\"\n                style=\"width: 25%\"\n              ></div>\n\n              <div class=\"relative flex items-center gap-4\">\n                <input\n                  type=\"checkbox\"\n                  id=\"Option2\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm dark:border-gray-600\"\n                />\n\n                <span class=\"font-medium text-gray-900 dark:text-white\"> Option 2 </span>\n              </div>\n            </label>\n\n            <span class=\"text-gray-700 dark:text-gray-200\">25%</span>\n          </div>\n\n          <div class=\"flex items-center gap-4\">\n            <label\n              for=\"Option3\"\n              class=\"relative block flex-1 overflow-hidden rounded border border-gray-300 px-4 py-2 shadow-sm dark:border-gray-600\"\n            >\n              <div\n                class=\"absolute inset-y-0 left-0 rounded bg-gray-100 dark:bg-gray-800\"\n                style=\"width: 30%\"\n              ></div>\n\n              <div class=\"relative flex items-center gap-4\">\n                <input\n                  type=\"checkbox\"\n                  id=\"Option3\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm dark:border-gray-600\"\n                />\n\n                <span class=\"font-medium text-gray-900 dark:text-white\"> Option 3 </span>\n              </div>\n            </label>\n\n            <span class=\"text-gray-700 dark:text-gray-200\">30%</span>\n          </div>\n        </fieldset>\n      </form>\n\n      <p class=\"mt-4 text-sm text-gray-700 dark:text-gray-200\">\n        Ends on <time datetime=\"2025-10-31\">October 31, 2025</time>\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/polls/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"max-w-prose\">\n        <h2 class=\"text-2xl font-semibold text-gray-900 sm:text-3xl\">\n          Where should we go for lunch?\n        </h2>\n\n        <p class=\"mt-4 text-pretty text-gray-700\">\n          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe maiores exercitationem id\n          soluta eaque harum eligendi distinctio sapiente esse ad! Sit expedita eos quam numquam ea,\n          assumenda officiis minus ut!\n        </p>\n      </div>\n\n      <form action=\"#\" class=\"mt-6 space-y-4\">\n        <fieldset class=\"space-y-4\">\n          <legend class=\"sr-only\">Select an option</legend>\n\n          <div class=\"flex items-center gap-4\">\n            <label\n              for=\"Option1\"\n              class=\"relative block flex-1 overflow-hidden rounded border border-gray-300 px-4 py-2 shadow-sm\"\n            >\n              <div class=\"absolute inset-y-0 left-0 rounded bg-gray-100\" style=\"width: 45%\"></div>\n\n              <div class=\"relative flex items-center gap-4\">\n                <input\n                  type=\"checkbox\"\n                  id=\"Option1\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm\"\n                />\n\n                <span class=\"font-medium text-gray-900\"> Option 1 </span>\n              </div>\n            </label>\n\n            <span class=\"text-gray-700\">45%</span>\n          </div>\n\n          <div class=\"flex items-center gap-4\">\n            <label\n              for=\"Option2\"\n              class=\"relative block flex-1 overflow-hidden rounded border border-gray-300 px-4 py-2 shadow-sm\"\n            >\n              <div class=\"absolute inset-y-0 left-0 rounded bg-gray-100\" style=\"width: 25%\"></div>\n\n              <div class=\"relative flex items-center gap-4\">\n                <input\n                  type=\"checkbox\"\n                  id=\"Option2\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm\"\n                />\n\n                <span class=\"font-medium text-gray-900\"> Option 2 </span>\n              </div>\n            </label>\n\n            <span class=\"text-gray-700\">25%</span>\n          </div>\n\n          <div class=\"flex items-center gap-4\">\n            <label\n              for=\"Option3\"\n              class=\"relative block flex-1 overflow-hidden rounded border border-gray-300 px-4 py-2 shadow-sm\"\n            >\n              <div class=\"absolute inset-y-0 left-0 rounded bg-gray-100\" style=\"width: 30%\"></div>\n\n              <div class=\"relative flex items-center gap-4\">\n                <input\n                  type=\"checkbox\"\n                  id=\"Option3\"\n                  class=\"size-5 rounded border-gray-300 shadow-sm\"\n                />\n\n                <span class=\"font-medium text-gray-900\"> Option 3 </span>\n              </div>\n            </label>\n\n            <span class=\"text-gray-700\">30%</span>\n          </div>\n        </fieldset>\n      </form>\n\n      <p class=\"mt-4 text-sm text-gray-700\">\n        Ends on <time datetime=\"2025-10-31\">October 31, 2025</time>\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/polls/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <!--\n      This is a pure HTML implementation.\n      Highlighting all previous stars when selecting a rating is not possible without additional JavaScript.\n    -->\n\n    <form action=\"#\">\n      <fieldset>\n        <legend class=\"sr-only\">Leave a rating</legend>\n\n        <div class=\"flex flex-row-reverse items-center justify-end gap-1\">\n          <label\n            for=\"Rating5\"\n            class=\"text-gray-900 hover:text-yellow-500 dark:text-white hover:[&~label]:text-yellow-500\"\n          >\n            <input type=\"radio\" name=\"Rating1\" value=\"5\" id=\"Rating5\" class=\"peer sr-only\" />\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"block size-6 peer-checked:hidden\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z\"\n              />\n            </svg>\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              class=\"hidden size-6 text-yellow-500 peer-checked:block\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          </label>\n\n          <label\n            for=\"Rating4\"\n            class=\"text-gray-900 hover:text-yellow-500 dark:text-white hover:[&~label]:text-yellow-500\"\n          >\n            <input type=\"radio\" name=\"Rating1\" value=\"4\" id=\"Rating4\" class=\"peer sr-only\" />\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"block size-6 peer-checked:hidden\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z\"\n              />\n            </svg>\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              class=\"hidden size-6 text-yellow-500 peer-checked:block\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          </label>\n\n          <label\n            for=\"Rating3\"\n            class=\"text-gray-900 hover:text-yellow-500 dark:text-white hover:[&~label]:text-yellow-500\"\n          >\n            <input type=\"radio\" name=\"Rating1\" value=\"3\" id=\"Rating3\" class=\"peer sr-only\" />\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"block size-6 peer-checked:hidden\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z\"\n              />\n            </svg>\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              class=\"hidden size-6 text-yellow-500 peer-checked:block\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          </label>\n\n          <label\n            for=\"Rating2\"\n            class=\"text-gray-900 hover:text-yellow-500 dark:text-white hover:[&~label]:text-yellow-500\"\n          >\n            <input type=\"radio\" name=\"Rating1\" value=\"2\" id=\"Rating2\" class=\"peer sr-only\" />\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"block size-6 peer-checked:hidden\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z\"\n              />\n            </svg>\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              class=\"hidden size-6 text-yellow-500 peer-checked:block\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          </label>\n\n          <label\n            for=\"Rating1\"\n            class=\"text-gray-900 hover:text-yellow-500 dark:text-white hover:[&~label]:text-yellow-500\"\n          >\n            <input type=\"radio\" name=\"Rating1\" value=\"1\" id=\"Rating1\" class=\"peer sr-only\" />\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"block size-6 peer-checked:hidden\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z\"\n              />\n            </svg>\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              class=\"hidden size-6 text-yellow-500 peer-checked:block\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          </label>\n        </div>\n      </fieldset>\n    </form>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/polls/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <!--\n      This is a pure HTML implementation.\n      Highlighting all previous stars when selecting a rating is not possible without additional JavaScript.\n    -->\n\n    <form action=\"#\">\n      <fieldset>\n        <legend class=\"sr-only\">Leave a rating</legend>\n\n        <div class=\"flex flex-row-reverse items-center justify-end gap-1\">\n          <label\n            for=\"Rating5\"\n            class=\"text-gray-900 hover:text-yellow-500 hover:[&~label]:text-yellow-500\"\n          >\n            <input type=\"radio\" name=\"Rating1\" value=\"5\" id=\"Rating5\" class=\"peer sr-only\" />\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"block size-6 peer-checked:hidden\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z\"\n              />\n            </svg>\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              class=\"hidden size-6 text-yellow-500 peer-checked:block\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          </label>\n\n          <label\n            for=\"Rating4\"\n            class=\"text-gray-900 hover:text-yellow-500 hover:[&~label]:text-yellow-500\"\n          >\n            <input type=\"radio\" name=\"Rating1\" value=\"4\" id=\"Rating4\" class=\"peer sr-only\" />\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"block size-6 peer-checked:hidden\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z\"\n              />\n            </svg>\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              class=\"hidden size-6 text-yellow-500 peer-checked:block\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          </label>\n\n          <label\n            for=\"Rating3\"\n            class=\"text-gray-900 hover:text-yellow-500 hover:[&~label]:text-yellow-500\"\n          >\n            <input type=\"radio\" name=\"Rating1\" value=\"3\" id=\"Rating3\" class=\"peer sr-only\" />\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"block size-6 peer-checked:hidden\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z\"\n              />\n            </svg>\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              class=\"hidden size-6 text-yellow-500 peer-checked:block\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          </label>\n\n          <label\n            for=\"Rating2\"\n            class=\"text-gray-900 hover:text-yellow-500 hover:[&~label]:text-yellow-500\"\n          >\n            <input type=\"radio\" name=\"Rating1\" value=\"2\" id=\"Rating2\" class=\"peer sr-only\" />\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"block size-6 peer-checked:hidden\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z\"\n              />\n            </svg>\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              class=\"hidden size-6 text-yellow-500 peer-checked:block\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          </label>\n\n          <label\n            for=\"Rating1\"\n            class=\"text-gray-900 hover:text-yellow-500 hover:[&~label]:text-yellow-500\"\n          >\n            <input type=\"radio\" name=\"Rating1\" value=\"1\" id=\"Rating1\" class=\"peer sr-only\" />\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"block size-6 peer-checked:hidden\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z\"\n              />\n            </svg>\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              class=\"hidden size-6 text-yellow-500 peer-checked:block\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          </label>\n        </div>\n      </fieldset>\n    </form>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/pricing/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8\">\n      <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:items-center md:gap-8\">\n        <div\n          class=\"rounded-2xl border border-indigo-600 p-6 shadow-xs ring-1 ring-indigo-600 sm:order-last sm:px-8 lg:p-12\"\n        >\n          <div class=\"text-center\">\n            <h2 class=\"text-lg font-medium text-gray-900\">\n              Pro\n              <span class=\"sr-only\">Plan</span>\n            </h2>\n\n            <p class=\"mt-2 sm:mt-4\">\n              <strong class=\"text-3xl font-bold text-gray-900 sm:text-4xl\"> 30$ </strong>\n\n              <span class=\"text-sm font-medium text-gray-700\">/month</span>\n            </p>\n          </div>\n\n          <ul class=\"mt-6 space-y-2\">\n            <li class=\"flex items-center gap-1\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-5 text-indigo-700\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n              </svg>\n\n              <span class=\"text-gray-700\"> 20 users included </span>\n            </li>\n\n            <li class=\"flex items-center gap-1\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-5 text-indigo-700\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n              </svg>\n\n              <span class=\"text-gray-700\"> 5GB of storage </span>\n            </li>\n\n            <li class=\"flex items-center gap-1\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-5 text-indigo-700\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n              </svg>\n\n              <span class=\"text-gray-700\"> Email support </span>\n            </li>\n\n            <li class=\"flex items-center gap-1\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-5 text-indigo-700\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n              </svg>\n\n              <span class=\"text-gray-700\"> Help center access </span>\n            </li>\n\n            <li class=\"flex items-center gap-1\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-5 text-indigo-700\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n              </svg>\n\n              <span class=\"text-gray-700\"> Phone support </span>\n            </li>\n\n            <li class=\"flex items-center gap-1\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-5 text-indigo-700\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n              </svg>\n\n              <span class=\"text-gray-700\"> Community access </span>\n            </li>\n          </ul>\n\n          <a\n            href=\"#\"\n            class=\"mt-8 block rounded-full border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-indigo-700 hover:ring-1 hover:ring-indigo-700\"\n          >\n            Get Started\n          </a>\n        </div>\n\n        <div class=\"rounded-2xl border border-gray-200 p-6 shadow-xs sm:px-8 lg:p-12\">\n          <div class=\"text-center\">\n            <h2 class=\"text-lg font-medium text-gray-900\">\n              Starter\n              <span class=\"sr-only\">Plan</span>\n            </h2>\n\n            <p class=\"mt-2 sm:mt-4\">\n              <strong class=\"text-3xl font-bold text-gray-900 sm:text-4xl\"> 20$ </strong>\n\n              <span class=\"text-sm font-medium text-gray-700\">/month</span>\n            </p>\n          </div>\n\n          <ul class=\"mt-6 space-y-2\">\n            <li class=\"flex items-center gap-1\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-5 text-indigo-700\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n              </svg>\n\n              <span class=\"text-gray-700\"> 10 users included </span>\n            </li>\n\n            <li class=\"flex items-center gap-1\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-5 text-indigo-700\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n              </svg>\n\n              <span class=\"text-gray-700\"> 2GB of storage </span>\n            </li>\n\n            <li class=\"flex items-center gap-1\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-5 text-indigo-700\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n              </svg>\n\n              <span class=\"text-gray-700\"> Email support </span>\n            </li>\n\n            <li class=\"flex items-center gap-1\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-5 text-indigo-700\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n              </svg>\n\n              <span class=\"text-gray-700\"> Help center access </span>\n            </li>\n          </ul>\n\n          <a\n            href=\"#\"\n            class=\"mt-8 block rounded-full border border-indigo-600 bg-white px-12 py-3 text-center text-sm font-medium text-indigo-600 hover:ring-1 hover:ring-indigo-600\"\n          >\n            Get Started\n          </a>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/pricing/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16\">\n      <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:items-stretch md:grid-cols-3 md:gap-8\">\n        <div class=\"divide-y divide-gray-200 rounded-2xl border border-gray-200 shadow-xs\">\n          <div class=\"p-6 sm:px-8\">\n            <h2 class=\"text-lg font-medium text-gray-900\">\n              Starter\n              <span class=\"sr-only\">Plan</span>\n            </h2>\n\n            <p class=\"mt-2 text-pretty text-gray-700\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit.\n            </p>\n\n            <p class=\"mt-2 sm:mt-4\">\n              <strong class=\"text-3xl font-bold text-gray-900 sm:text-4xl\"> 20$ </strong>\n\n              <span class=\"text-sm font-medium text-gray-700\">/month</span>\n            </p>\n\n            <a\n              class=\"mt-4 block rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 sm:mt-6\"\n              href=\"#\"\n            >\n              Get Started\n            </a>\n          </div>\n\n          <div class=\"p-6 sm:px-8\">\n            <p class=\"text-lg font-medium text-gray-900 sm:text-xl\">What's included:</p>\n\n            <ul class=\"mt-2 space-y-2 sm:mt-4\">\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-indigo-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> 10 users </span>\n              </li>\n\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-indigo-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> 2GB of storage </span>\n              </li>\n\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-indigo-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> Email support </span>\n              </li>\n\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-red-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> Help center access </span>\n              </li>\n\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-red-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> Phone support </span>\n              </li>\n\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-red-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> Community access </span>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <div class=\"divide-y divide-gray-200 rounded-2xl border border-gray-200 shadow-xs\">\n          <div class=\"p-6 sm:px-8\">\n            <h2 class=\"text-lg font-medium text-gray-900\">\n              Pro\n              <span class=\"sr-only\">Plan</span>\n            </h2>\n\n            <p class=\"mt-2 text-pretty text-gray-700\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit.\n            </p>\n\n            <p class=\"mt-2 sm:mt-4\">\n              <strong class=\"text-3xl font-bold text-gray-900 sm:text-4xl\"> 30$ </strong>\n\n              <span class=\"text-sm font-medium text-gray-700\">/month</span>\n            </p>\n\n            <a\n              class=\"mt-4 block rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 sm:mt-6\"\n              href=\"#\"\n            >\n              Get Started\n            </a>\n          </div>\n\n          <div class=\"p-6 sm:px-8\">\n            <p class=\"text-lg font-medium text-gray-900 sm:text-xl\">What's included:</p>\n\n            <ul class=\"mt-2 space-y-2 sm:mt-4\">\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-indigo-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> 20 users </span>\n              </li>\n\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-indigo-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> 5GB of storage </span>\n              </li>\n\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-indigo-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> Email support </span>\n              </li>\n\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-indigo-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> Help center access </span>\n              </li>\n\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-red-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> Phone support </span>\n              </li>\n\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-red-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> Community access </span>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <div class=\"divide-y divide-gray-200 rounded-2xl border border-gray-200 shadow-xs\">\n          <div class=\"p-6 sm:px-8\">\n            <h2 class=\"text-lg font-medium text-gray-900\">\n              Enterprise\n              <span class=\"sr-only\">Plan</span>\n            </h2>\n\n            <p class=\"mt-2 text-pretty text-gray-700\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit.\n            </p>\n\n            <p class=\"mt-2 sm:mt-4\">\n              <strong class=\"text-3xl font-bold text-gray-900 sm:text-4xl\"> 100$ </strong>\n\n              <span class=\"text-sm font-medium text-gray-700\">/month</span>\n            </p>\n\n            <a\n              class=\"mt-4 block rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 sm:mt-6\"\n              href=\"#\"\n            >\n              Get Started\n            </a>\n          </div>\n\n          <div class=\"p-6 sm:px-8\">\n            <p class=\"text-lg font-medium text-gray-900 sm:text-xl\">What's included:</p>\n\n            <ul class=\"mt-2 space-y-2 sm:mt-4\">\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-indigo-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> 50 users </span>\n              </li>\n\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-indigo-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> 20GB of storage </span>\n              </li>\n\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-indigo-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> Email support </span>\n              </li>\n\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-indigo-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> Help center access </span>\n              </li>\n\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-indigo-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> Phone support </span>\n              </li>\n\n              <li class=\"flex items-center gap-1\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"size-5 text-indigo-700\"\n                >\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                </svg>\n\n                <span class=\"text-gray-700\"> Community access </span>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/product-cards/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <a href=\"#\" class=\"group block overflow-hidden\">\n      <div class=\"relative h-87.5 sm:h-112.5\">\n        <img\n          src=\"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160\"\n          alt=\"\"\n          class=\"absolute inset-0 h-full w-full object-cover opacity-100 group-hover:opacity-0\"\n        />\n\n        <img\n          src=\"https://images.unsplash.com/photo-1523381140794-a1eef18a37c7?auto=format&fit=crop&q=80&w=1160\"\n          alt=\"\"\n          class=\"absolute inset-0 h-full w-full object-cover opacity-0 group-hover:opacity-100\"\n        />\n      </div>\n\n      <div class=\"relative bg-white pt-3\">\n        <h3 class=\"text-sm text-gray-700 group-hover:underline group-hover:underline-offset-4\">\n          Limited Edition Sports Trainer\n        </h3>\n\n        <p class=\"mt-1.5 tracking-wide text-gray-900\">$189.99</p>\n      </div>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/product-cards/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <a href=\"#\" class=\"group block overflow-hidden\">\n      <div class=\"relative h-87.5 sm:h-112.5\">\n        <img\n          src=\"https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?auto=format&fit=crop&q=80&w=1160\"\n          alt=\"\"\n          class=\"absolute inset-0 h-full w-full object-cover opacity-100 group-hover:opacity-0\"\n        />\n\n        <img\n          src=\"https://images.unsplash.com/photo-1600185365926-3a2ce3cdb9eb?auto=format&fit=crop&q=80&w=1160\"\n          alt=\"\"\n          class=\"absolute inset-0 h-full w-full object-cover opacity-0 group-hover:opacity-100\"\n        />\n      </div>\n\n      <div class=\"relative bg-white pt-3\">\n        <h3 class=\"text-sm text-gray-700 group-hover:underline group-hover:underline-offset-4\">\n          Limited Edition Sports Trainer\n        </h3>\n\n        <div class=\"mt-1.5 flex items-center justify-between text-gray-900\">\n          <p class=\"tracking-wide\">$189.99</p>\n\n          <p class=\"text-xs tracking-wide uppercase\">6 Colors</p>\n        </div>\n      </div>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/product-cards/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <a href=\"#\" class=\"group block\">\n      <img\n        src=\"https://images.unsplash.com/photo-1592921870789-04563d55041c?auto=format&fit=crop&q=80&w=1160\"\n        alt=\"\"\n        class=\"h-87.5 w-full object-cover sm:h-112.5\"\n      />\n\n      <div class=\"mt-3 flex justify-between text-sm\">\n        <div>\n          <h3 class=\"text-gray-900 group-hover:underline group-hover:underline-offset-4\">\n            Small Headphones\n          </h3>\n\n          <p class=\"mt-1.5 text-xs text-pretty text-gray-500\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi nobis, quia soluta\n            quisquam voluptatem nemo.\n          </p>\n        </div>\n\n        <p class=\"text-gray-900\">$299</p>\n      </div>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/product-cards/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <a href=\"#\" class=\"group block\">\n      <img\n        src=\"https://images.unsplash.com/photo-1592921870789-04563d55041c?auto=format&fit=crop&q=80&w=1160\"\n        alt=\"\"\n        class=\"aspect-square w-full rounded-sm object-cover\"\n      />\n\n      <div class=\"mt-3\">\n        <h3 class=\"font-medium text-gray-900 group-hover:underline group-hover:underline-offset-4\">\n          Simple Watch\n        </h3>\n\n        <p class=\"mt-1 text-sm text-gray-700\">$150</p>\n      </div>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/product-cards/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <a href=\"#\" class=\"group block\">\n      <img\n        src=\"https://images.unsplash.com/photo-1592921870789-04563d55041c?auto=format&fit=crop&q=80&w=1160\"\n        alt=\"\"\n        class=\"h-87.5 w-full object-cover sm:h-112.5\"\n      />\n\n      <div class=\"mt-1.5\">\n        <p class=\"text-xs text-gray-500\">Space Grey</p>\n\n        <div class=\"mt-1.5 flex gap-1\">\n          <form>\n            <fieldset>\n              <legend class=\"sr-only\">Color</legend>\n            </fieldset>\n\n            <div class=\"flex flex-wrap justify-center gap-1\">\n              <div>\n                <input type=\"checkbox\" id=\"ColorSg\" class=\"sr-only\" />\n\n                <label for=\"ColorSg\" class=\"block size-4 cursor-pointer rounded-full bg-[#595759]\">\n                  <span class=\"sr-only\"> Space Gray </span>\n                </label>\n              </div>\n\n              <div>\n                <input type=\"checkbox\" id=\"ColorS\" class=\"sr-only\" />\n\n                <label for=\"ColorS\" class=\"block size-4 cursor-pointer rounded-full bg-[#d2d3d4]\">\n                  <span class=\"sr-only\"> Silver </span>\n                </label>\n              </div>\n\n              <div>\n                <input type=\"checkbox\" id=\"ColorP\" class=\"sr-only\" />\n\n                <label for=\"ColorP\" class=\"block size-4 cursor-pointer rounded-full bg-[#d89f97]\">\n                  <span class=\"sr-only\"> Pink </span>\n                </label>\n              </div>\n\n              <div>\n                <input type=\"checkbox\" id=\"ColorG\" class=\"sr-only\" />\n\n                <label for=\"ColorG\" class=\"block size-4 cursor-pointer rounded-full bg-[#afbfab]\">\n                  <span class=\"sr-only\"> Pink </span>\n                </label>\n              </div>\n\n              <div>\n                <input type=\"checkbox\" id=\"ColorSb\" class=\"sr-only\" />\n\n                <label for=\"ColorSb\" class=\"block size-4 cursor-pointer rounded-full bg-[#91a5bb]\">\n                  <span class=\"sr-only\"> Pink </span>\n                </label>\n              </div>\n            </div>\n          </form>\n        </div>\n\n        <div class=\"mt-3 flex justify-between text-sm\">\n          <h3 class=\"text-gray-900 group-hover:underline group-hover:underline-offset-4\">\n            Small Headphones\n          </h3>\n\n          <p class=\"text-gray-900\">$299</p>\n        </div>\n      </div>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/product-cards/6.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <a href=\"#\" class=\"group relative block overflow-hidden\">\n      <button\n        class=\"absolute end-4 top-4 z-10 rounded-full bg-white p-1.5 text-gray-900 transition hover:text-gray-900/75\"\n      >\n        <span class=\"sr-only\">Wishlist</span>\n\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-4\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z\"\n          />\n        </svg>\n      </button>\n\n      <img\n        src=\"https://images.unsplash.com/photo-1599481238640-4c1288750d7a?auto=format&fit=crop&q=80&w=1160\"\n        alt=\"\"\n        class=\"h-64 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-72\"\n      />\n\n      <div class=\"relative border border-gray-100 bg-white p-6\">\n        <span class=\"bg-yellow-400 px-3 py-1.5 text-xs font-medium whitespace-nowrap\"> New </span>\n\n        <h3 class=\"mt-4 text-lg font-medium text-gray-900\">Robot Toy</h3>\n\n        <p class=\"mt-1.5 text-sm text-gray-700\">$14.99</p>\n\n        <form class=\"mt-4\">\n          <button\n            class=\"block w-full rounded-sm bg-yellow-400 p-4 text-sm font-medium transition hover:scale-105\"\n          >\n            Add to Cart\n          </button>\n        </form>\n      </div>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/product-cards/7.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <a href=\"#\" class=\"relative block rounded-se-3xl border border-gray-100\">\n      <span\n        class=\"absolute -top-px -right-px rounded-se-3xl rounded-es-3xl bg-rose-600 px-6 py-4 font-medium tracking-widest text-white uppercase\"\n      >\n        Save 10%\n      </span>\n\n      <img\n        src=\"https://images.unsplash.com/photo-1485955900006-10f4d324d411?auto=format&fit=crop&q=80&w=1160\"\n        alt=\"\"\n        class=\"h-80 w-full rounded-se-3xl object-cover\"\n      />\n\n      <div class=\"p-4 text-center\">\n        <strong class=\"text-xl font-medium text-gray-900\"> Aloe Vera </strong>\n\n        <p class=\"mt-2 text-pretty text-gray-700\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet officia rem vel voluptatum\n          in eum vitae aliquid at sed dignissimos.\n        </p>\n\n        <span\n          class=\"mt-4 block rounded-md border border-indigo-900 bg-indigo-900 px-5 py-3 text-sm font-medium tracking-widest text-white uppercase transition-colors hover:bg-white hover:text-indigo-900\"\n        >\n          Buy now\n        </span>\n      </div>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/product-cards/8.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <a href=\"#\" class=\"group relative block overflow-hidden\">\n      <button\n        class=\"absolute end-4 top-4 z-10 rounded-full bg-white p-1.5 text-gray-900 transition hover:text-gray-900/75\"\n      >\n        <span class=\"sr-only\">Wishlist</span>\n\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          class=\"size-4\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            d=\"M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z\"\n          />\n        </svg>\n      </button>\n\n      <img\n        src=\"https://images.unsplash.com/photo-1628202926206-c63a34b1618f?auto=format&fit=crop&q=80&w=1160\"\n        alt=\"\"\n        class=\"h-64 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-72\"\n      />\n\n      <div class=\"relative border border-gray-100 bg-white p-6\">\n        <p class=\"text-gray-700\">\n          $49.99\n          <span class=\"text-gray-400 line-through\">$80</span>\n        </p>\n\n        <h3 class=\"mt-1.5 text-lg font-medium text-gray-900\">Wireless Headphones</h3>\n\n        <p class=\"mt-1.5 line-clamp-3 text-gray-700\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore nobis iure obcaecati\n          pariatur. Officiis qui, enim cupiditate aliquam corporis iste.\n        </p>\n\n        <form class=\"mt-4 flex gap-4\">\n          <button\n            class=\"block w-full rounded-sm bg-gray-100 px-4 py-3 text-sm font-medium text-gray-900 transition hover:scale-105\"\n          >\n            Add to Cart\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"block w-full rounded-sm bg-gray-900 px-4 py-3 text-sm font-medium text-white transition hover:scale-105\"\n          >\n            Buy Now\n          </button>\n        </form>\n      </div>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/product-collections/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section>\n      <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8\">\n        <header>\n          <h2 class=\"text-xl font-bold text-gray-900 sm:text-3xl\">Product Collection</h2>\n\n          <p class=\"mt-4 max-w-md text-gray-500\">\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque praesentium cumque iure\n            dicta incidunt est ipsam, officia dolor fugit natus?\n          </p>\n        </header>\n\n        <ul class=\"mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          <li>\n            <a href=\"#\" class=\"group block overflow-hidden\">\n              <img\n                src=\"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160\"\n                alt=\"\"\n                class=\"h-87.5 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-112.5\"\n              />\n\n              <div class=\"relative bg-white pt-3\">\n                <h3\n                  class=\"text-xs text-gray-700 group-hover:underline group-hover:underline-offset-4\"\n                >\n                  Basic Tee\n                </h3>\n\n                <p class=\"mt-2\">\n                  <span class=\"sr-only\"> Regular Price </span>\n\n                  <span class=\"tracking-wider text-gray-900\"> £24.00 GBP </span>\n                </p>\n              </div>\n            </a>\n          </li>\n\n          <li>\n            <a href=\"#\" class=\"group block overflow-hidden\">\n              <img\n                src=\"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160\"\n                alt=\"\"\n                class=\"h-87.5 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-112.5\"\n              />\n\n              <div class=\"relative bg-white pt-3\">\n                <h3\n                  class=\"text-xs text-gray-700 group-hover:underline group-hover:underline-offset-4\"\n                >\n                  Basic Tee\n                </h3>\n\n                <p class=\"mt-2\">\n                  <span class=\"sr-only\"> Regular Price </span>\n\n                  <span class=\"tracking-wider text-gray-900\"> £24.00 GBP </span>\n                </p>\n              </div>\n            </a>\n          </li>\n\n          <li>\n            <a href=\"#\" class=\"group block overflow-hidden\">\n              <img\n                src=\"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160\"\n                alt=\"\"\n                class=\"h-87.5 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-112.5\"\n              />\n\n              <div class=\"relative bg-white pt-3\">\n                <h3\n                  class=\"text-xs text-gray-700 group-hover:underline group-hover:underline-offset-4\"\n                >\n                  Basic Tee\n                </h3>\n\n                <p class=\"mt-2\">\n                  <span class=\"sr-only\"> Regular Price </span>\n\n                  <span class=\"tracking-wider text-gray-900\"> £24.00 GBP </span>\n                </p>\n              </div>\n            </a>\n          </li>\n\n          <li>\n            <a href=\"#\" class=\"group block overflow-hidden\">\n              <img\n                src=\"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160\"\n                alt=\"\"\n                class=\"h-87.5 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-112.5\"\n              />\n\n              <div class=\"relative bg-white pt-3\">\n                <h3\n                  class=\"text-xs text-gray-700 group-hover:underline group-hover:underline-offset-4\"\n                >\n                  Basic Tee\n                </h3>\n\n                <p class=\"mt-2\">\n                  <span class=\"sr-only\"> Regular Price </span>\n\n                  <span class=\"tracking-wider text-gray-900\"> £24.00 GBP </span>\n                </p>\n              </div>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/product-collections/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section>\n      <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8\">\n        <header class=\"text-center\">\n          <h2 class=\"text-xl font-bold text-gray-900 sm:text-3xl\">Product Collection</h2>\n\n          <p class=\"mx-auto mt-4 max-w-md text-gray-500\">\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque praesentium cumque iure\n            dicta incidunt est ipsam, officia dolor fugit natus?\n          </p>\n        </header>\n\n        <ul class=\"mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          <li>\n            <a href=\"#\" class=\"group block overflow-hidden\">\n              <img\n                src=\"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160\"\n                alt=\"\"\n                class=\"h-87.5 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-112.5\"\n              />\n\n              <div class=\"relative bg-white pt-3\">\n                <h3\n                  class=\"text-xs text-gray-700 group-hover:underline group-hover:underline-offset-4\"\n                >\n                  Basic Tee\n                </h3>\n\n                <p class=\"mt-2\">\n                  <span class=\"sr-only\"> Regular Price </span>\n\n                  <span class=\"tracking-wider text-gray-900\"> £24.00 GBP </span>\n                </p>\n              </div>\n            </a>\n          </li>\n\n          <li>\n            <a href=\"#\" class=\"group block overflow-hidden\">\n              <img\n                src=\"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160\"\n                alt=\"\"\n                class=\"h-87.5 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-112.5\"\n              />\n\n              <div class=\"relative bg-white pt-3\">\n                <h3\n                  class=\"text-xs text-gray-700 group-hover:underline group-hover:underline-offset-4\"\n                >\n                  Basic Tee\n                </h3>\n\n                <p class=\"mt-2\">\n                  <span class=\"sr-only\"> Regular Price </span>\n\n                  <span class=\"tracking-wider text-gray-900\"> £24.00 GBP </span>\n                </p>\n              </div>\n            </a>\n          </li>\n\n          <li>\n            <a href=\"#\" class=\"group block overflow-hidden\">\n              <img\n                src=\"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160\"\n                alt=\"\"\n                class=\"h-87.5 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-112.5\"\n              />\n\n              <div class=\"relative bg-white pt-3\">\n                <h3\n                  class=\"text-xs text-gray-700 group-hover:underline group-hover:underline-offset-4\"\n                >\n                  Basic Tee\n                </h3>\n\n                <p class=\"mt-2\">\n                  <span class=\"sr-only\"> Regular Price </span>\n\n                  <span class=\"tracking-wider text-gray-900\"> £24.00 GBP </span>\n                </p>\n              </div>\n            </a>\n          </li>\n\n          <li>\n            <a href=\"#\" class=\"group block overflow-hidden\">\n              <img\n                src=\"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160\"\n                alt=\"\"\n                class=\"h-87.5 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-112.5\"\n              />\n\n              <div class=\"relative bg-white pt-3\">\n                <h3\n                  class=\"text-xs text-gray-700 group-hover:underline group-hover:underline-offset-4\"\n                >\n                  Basic Tee\n                </h3>\n\n                <p class=\"mt-2\">\n                  <span class=\"sr-only\"> Regular Price </span>\n\n                  <span class=\"tracking-wider text-gray-900\"> £24.00 GBP </span>\n                </p>\n              </div>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/product-collections/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section>\n      <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8\">\n        <header>\n          <h2 class=\"text-xl font-bold text-gray-900 sm:text-3xl\">Product Collection</h2>\n\n          <p class=\"mt-4 max-w-md text-gray-500\">\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque praesentium cumque iure\n            dicta incidunt est ipsam, officia dolor fugit natus?\n          </p>\n        </header>\n\n        <div class=\"mt-8 sm:flex sm:items-center sm:justify-between\">\n          <div class=\"block sm:hidden\">\n            <button\n              class=\"flex cursor-pointer items-center gap-2 border-b border-gray-400 pb-1 text-gray-900 transition hover:border-gray-600\"\n            >\n              <span class=\"text-sm font-medium\"> Filters & Sorting </span>\n\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"size-4 rtl:rotate-180\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"\n                />\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"hidden sm:flex sm:gap-4\">\n            <div class=\"relative\">\n              <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n                <summary\n                  class=\"flex cursor-pointer items-center gap-2 border-b border-gray-400 pb-1 text-gray-900 transition hover:border-gray-600\"\n                >\n                  <span class=\"text-sm font-medium\"> Availability </span>\n\n                  <span class=\"transition group-open:-rotate-180\">\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"size-4\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"\n                      />\n                    </svg>\n                  </span>\n                </summary>\n\n                <div\n                  class=\"z-50 group-open:absolute group-open:top-auto group-open:mt-2 ltr:group-open:start-0\"\n                >\n                  <div class=\"w-96 rounded-sm border border-gray-200 bg-white\">\n                    <header class=\"flex items-center justify-between p-4\">\n                      <span class=\"text-sm text-gray-700\"> 0 Selected </span>\n\n                      <button\n                        type=\"button\"\n                        class=\"text-sm text-gray-900 underline underline-offset-4\"\n                      >\n                        Reset\n                      </button>\n                    </header>\n\n                    <ul class=\"space-y-1 border-t border-gray-200 p-4\">\n                      <li>\n                        <label for=\"FilterInStock\" class=\"inline-flex items-center gap-2\">\n                          <input\n                            type=\"checkbox\"\n                            id=\"FilterInStock\"\n                            class=\"size-5 rounded-sm border-gray-300 shadow-sm\"\n                          />\n\n                          <span class=\"text-sm font-medium text-gray-700\"> In Stock (5+) </span>\n                        </label>\n                      </li>\n\n                      <li>\n                        <label for=\"FilterPreOrder\" class=\"inline-flex items-center gap-2\">\n                          <input\n                            type=\"checkbox\"\n                            id=\"FilterPreOrder\"\n                            class=\"size-5 rounded-sm border-gray-300 shadow-sm\"\n                          />\n\n                          <span class=\"text-sm font-medium text-gray-700\"> Pre Order (3+) </span>\n                        </label>\n                      </li>\n\n                      <li>\n                        <label for=\"FilterOutOfStock\" class=\"inline-flex items-center gap-2\">\n                          <input\n                            type=\"checkbox\"\n                            id=\"FilterOutOfStock\"\n                            class=\"size-5 rounded-sm border-gray-300 shadow-sm\"\n                          />\n\n                          <span class=\"text-sm font-medium text-gray-700\">\n                            Out of Stock (10+)\n                          </span>\n                        </label>\n                      </li>\n                    </ul>\n                  </div>\n                </div>\n              </details>\n            </div>\n\n            <div class=\"relative\">\n              <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n                <summary\n                  class=\"flex cursor-pointer items-center gap-2 border-b border-gray-400 pb-1 text-gray-900 transition hover:border-gray-600\"\n                >\n                  <span class=\"text-sm font-medium\"> Price </span>\n\n                  <span class=\"transition group-open:-rotate-180\">\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"size-4\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"\n                      />\n                    </svg>\n                  </span>\n                </summary>\n\n                <div\n                  class=\"z-50 group-open:absolute group-open:top-auto group-open:mt-2 ltr:group-open:start-0\"\n                >\n                  <div class=\"w-96 rounded-sm border border-gray-200 bg-white\">\n                    <header class=\"flex items-center justify-between p-4\">\n                      <span class=\"text-sm text-gray-700\"> The highest price is $600 </span>\n\n                      <button\n                        type=\"button\"\n                        class=\"text-sm text-gray-900 underline underline-offset-4\"\n                      >\n                        Reset\n                      </button>\n                    </header>\n\n                    <div class=\"border-t border-gray-200 p-4\">\n                      <div class=\"flex justify-between gap-4\">\n                        <label for=\"FilterPriceFrom\" class=\"flex items-center gap-2\">\n                          <span class=\"text-sm text-gray-600\">$</span>\n\n                          <input\n                            type=\"number\"\n                            id=\"FilterPriceFrom\"\n                            placeholder=\"From\"\n                            class=\"w-full rounded-md border-gray-200 shadow-xs sm:text-sm\"\n                          />\n                        </label>\n\n                        <label for=\"FilterPriceTo\" class=\"flex items-center gap-2\">\n                          <span class=\"text-sm text-gray-600\">$</span>\n\n                          <input\n                            type=\"number\"\n                            id=\"FilterPriceTo\"\n                            placeholder=\"To\"\n                            class=\"w-full rounded-md border-gray-200 shadow-xs sm:text-sm\"\n                          />\n                        </label>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </details>\n            </div>\n          </div>\n\n          <div class=\"hidden sm:block\">\n            <label for=\"SortBy\" class=\"sr-only\">SortBy</label>\n\n            <select id=\"SortBy\" class=\"h-10 rounded-sm border-gray-300 text-sm\">\n              <option>Sort By</option>\n              <option value=\"Title, DESC\">Title, DESC</option>\n              <option value=\"Title, ASC\">Title, ASC</option>\n              <option value=\"Price, DESC\">Price, DESC</option>\n              <option value=\"Price, ASC\">Price, ASC</option>\n            </select>\n          </div>\n        </div>\n\n        <ul class=\"mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          <li>\n            <a href=\"#\" class=\"group block overflow-hidden\">\n              <img\n                src=\"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160\"\n                alt=\"\"\n                class=\"h-87.5 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-112.5\"\n              />\n\n              <div class=\"relative bg-white pt-3\">\n                <h3\n                  class=\"text-xs text-gray-700 group-hover:underline group-hover:underline-offset-4\"\n                >\n                  Basic Tee\n                </h3>\n\n                <p class=\"mt-2\">\n                  <span class=\"sr-only\"> Regular Price </span>\n\n                  <span class=\"tracking-wider text-gray-900\"> £24.00 GBP </span>\n                </p>\n              </div>\n            </a>\n          </li>\n\n          <li>\n            <a href=\"#\" class=\"group block overflow-hidden\">\n              <img\n                src=\"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160\"\n                alt=\"\"\n                class=\"h-87.5 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-112.5\"\n              />\n\n              <div class=\"relative bg-white pt-3\">\n                <h3\n                  class=\"text-xs text-gray-700 group-hover:underline group-hover:underline-offset-4\"\n                >\n                  Basic Tee\n                </h3>\n\n                <p class=\"mt-2\">\n                  <span class=\"sr-only\"> Regular Price </span>\n\n                  <span class=\"tracking-wider text-gray-900\"> £24.00 GBP </span>\n                </p>\n              </div>\n            </a>\n          </li>\n\n          <li>\n            <a href=\"#\" class=\"group block overflow-hidden\">\n              <img\n                src=\"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160\"\n                alt=\"\"\n                class=\"h-87.5 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-112.5\"\n              />\n\n              <div class=\"relative bg-white pt-3\">\n                <h3\n                  class=\"text-xs text-gray-700 group-hover:underline group-hover:underline-offset-4\"\n                >\n                  Basic Tee\n                </h3>\n\n                <p class=\"mt-2\">\n                  <span class=\"sr-only\"> Regular Price </span>\n\n                  <span class=\"tracking-wider text-gray-900\"> £24.00 GBP </span>\n                </p>\n              </div>\n            </a>\n          </li>\n\n          <li>\n            <a href=\"#\" class=\"group block overflow-hidden\">\n              <img\n                src=\"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160\"\n                alt=\"\"\n                class=\"h-87.5 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-112.5\"\n              />\n\n              <div class=\"relative bg-white pt-3\">\n                <h3\n                  class=\"text-xs text-gray-700 group-hover:underline group-hover:underline-offset-4\"\n                >\n                  Basic Tee\n                </h3>\n\n                <p class=\"mt-2\">\n                  <span class=\"sr-only\"> Regular Price </span>\n\n                  <span class=\"tracking-wider text-gray-900\"> £24.00 GBP </span>\n                </p>\n              </div>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/product-collections/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section>\n      <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8\">\n        <header>\n          <h2 class=\"text-xl font-bold text-gray-900 sm:text-3xl\">Product Collection</h2>\n\n          <p class=\"mt-4 max-w-md text-gray-500\">\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque praesentium cumque iure\n            dicta incidunt est ipsam, officia dolor fugit natus?\n          </p>\n        </header>\n\n        <div class=\"mt-8 block lg:hidden\">\n          <button\n            class=\"flex cursor-pointer items-center gap-2 border-b border-gray-400 pb-1 text-gray-900 transition hover:border-gray-600\"\n          >\n            <span class=\"text-sm font-medium\"> Filters & Sorting </span>\n\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              class=\"size-4 rtl:rotate-180\"\n            >\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\n            </svg>\n          </button>\n        </div>\n\n        <div class=\"mt-4 lg:mt-8 lg:grid lg:grid-cols-4 lg:items-start lg:gap-8\">\n          <div class=\"hidden space-y-4 lg:block\">\n            <div>\n              <label for=\"SortBy\" class=\"block text-xs font-medium text-gray-700\"> Sort By </label>\n\n              <select id=\"SortBy\" class=\"mt-1 rounded-sm border-gray-300 text-sm\">\n                <option>Sort By</option>\n                <option value=\"Title, DESC\">Title, DESC</option>\n                <option value=\"Title, ASC\">Title, ASC</option>\n                <option value=\"Price, DESC\">Price, DESC</option>\n                <option value=\"Price, ASC\">Price, ASC</option>\n              </select>\n            </div>\n\n            <div>\n              <p class=\"block text-xs font-medium text-gray-700\">Filters</p>\n\n              <div class=\"mt-1 space-y-2\">\n                <details\n                  class=\"overflow-hidden rounded-sm border border-gray-300 [&_summary::-webkit-details-marker]:hidden\"\n                >\n                  <summary\n                    class=\"flex cursor-pointer items-center justify-between gap-2 p-4 text-gray-900 transition\"\n                  >\n                    <span class=\"text-sm font-medium\"> Availability </span>\n\n                    <span class=\"transition group-open:-rotate-180\">\n                      <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke-width=\"1.5\"\n                        stroke=\"currentColor\"\n                        class=\"size-4\"\n                      >\n                        <path\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"\n                        />\n                      </svg>\n                    </span>\n                  </summary>\n\n                  <div class=\"border-t border-gray-200 bg-white\">\n                    <header class=\"flex items-center justify-between p-4\">\n                      <span class=\"text-sm text-gray-700\"> 0 Selected </span>\n\n                      <button\n                        type=\"button\"\n                        class=\"text-sm text-gray-900 underline underline-offset-4\"\n                      >\n                        Reset\n                      </button>\n                    </header>\n\n                    <ul class=\"space-y-1 border-t border-gray-200 p-4\">\n                      <li>\n                        <label for=\"FilterInStock\" class=\"inline-flex items-center gap-2\">\n                          <input\n                            type=\"checkbox\"\n                            id=\"FilterInStock\"\n                            class=\"size-5 rounded-sm border-gray-300 shadow-sm\"\n                          />\n\n                          <span class=\"text-sm font-medium text-gray-700\"> In Stock (5+) </span>\n                        </label>\n                      </li>\n\n                      <li>\n                        <label for=\"FilterPreOrder\" class=\"inline-flex items-center gap-2\">\n                          <input\n                            type=\"checkbox\"\n                            id=\"FilterPreOrder\"\n                            class=\"size-5 rounded-sm border-gray-300 shadow-sm\"\n                          />\n\n                          <span class=\"text-sm font-medium text-gray-700\"> Pre Order (3+) </span>\n                        </label>\n                      </li>\n\n                      <li>\n                        <label for=\"FilterOutOfStock\" class=\"inline-flex items-center gap-2\">\n                          <input\n                            type=\"checkbox\"\n                            id=\"FilterOutOfStock\"\n                            class=\"size-5 rounded-sm border-gray-300 shadow-sm\"\n                          />\n\n                          <span class=\"text-sm font-medium text-gray-700\">\n                            Out of Stock (10+)\n                          </span>\n                        </label>\n                      </li>\n                    </ul>\n                  </div>\n                </details>\n\n                <details\n                  class=\"overflow-hidden rounded-sm border border-gray-300 [&_summary::-webkit-details-marker]:hidden\"\n                >\n                  <summary\n                    class=\"flex cursor-pointer items-center justify-between gap-2 p-4 text-gray-900 transition\"\n                  >\n                    <span class=\"text-sm font-medium\"> Price </span>\n\n                    <span class=\"transition group-open:-rotate-180\">\n                      <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke-width=\"1.5\"\n                        stroke=\"currentColor\"\n                        class=\"size-4\"\n                      >\n                        <path\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"\n                        />\n                      </svg>\n                    </span>\n                  </summary>\n\n                  <div class=\"border-t border-gray-200 bg-white\">\n                    <header class=\"flex items-center justify-between p-4\">\n                      <span class=\"text-sm text-gray-700\"> The highest price is $600 </span>\n\n                      <button\n                        type=\"button\"\n                        class=\"text-sm text-gray-900 underline underline-offset-4\"\n                      >\n                        Reset\n                      </button>\n                    </header>\n\n                    <div class=\"border-t border-gray-200 p-4\">\n                      <div class=\"flex justify-between gap-4\">\n                        <label for=\"FilterPriceFrom\" class=\"flex items-center gap-2\">\n                          <span class=\"text-sm text-gray-600\">$</span>\n\n                          <input\n                            type=\"number\"\n                            id=\"FilterPriceFrom\"\n                            placeholder=\"From\"\n                            class=\"w-full rounded-md border-gray-200 shadow-xs sm:text-sm\"\n                          />\n                        </label>\n\n                        <label for=\"FilterPriceTo\" class=\"flex items-center gap-2\">\n                          <span class=\"text-sm text-gray-600\">$</span>\n\n                          <input\n                            type=\"number\"\n                            id=\"FilterPriceTo\"\n                            placeholder=\"To\"\n                            class=\"w-full rounded-md border-gray-200 shadow-xs sm:text-sm\"\n                          />\n                        </label>\n                      </div>\n                    </div>\n                  </div>\n                </details>\n\n                <details\n                  class=\"overflow-hidden rounded-sm border border-gray-300 [&_summary::-webkit-details-marker]:hidden\"\n                >\n                  <summary\n                    class=\"flex cursor-pointer items-center justify-between gap-2 p-4 text-gray-900 transition\"\n                  >\n                    <span class=\"text-sm font-medium\"> Colors </span>\n\n                    <span class=\"transition group-open:-rotate-180\">\n                      <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke-width=\"1.5\"\n                        stroke=\"currentColor\"\n                        class=\"size-4\"\n                      >\n                        <path\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"\n                        />\n                      </svg>\n                    </span>\n                  </summary>\n\n                  <div class=\"border-t border-gray-200 bg-white\">\n                    <header class=\"flex items-center justify-between p-4\">\n                      <span class=\"text-sm text-gray-700\"> 0 Selected </span>\n\n                      <button\n                        type=\"button\"\n                        class=\"text-sm text-gray-900 underline underline-offset-4\"\n                      >\n                        Reset\n                      </button>\n                    </header>\n\n                    <ul class=\"space-y-1 border-t border-gray-200 p-4\">\n                      <li>\n                        <label for=\"FilterRed\" class=\"inline-flex items-center gap-2\">\n                          <input\n                            type=\"checkbox\"\n                            id=\"FilterRed\"\n                            class=\"size-5 rounded-sm border-gray-300 shadow-sm\"\n                          />\n\n                          <span class=\"text-sm font-medium text-gray-700\"> Red </span>\n                        </label>\n                      </li>\n\n                      <li>\n                        <label for=\"FilterBlue\" class=\"inline-flex items-center gap-2\">\n                          <input\n                            type=\"checkbox\"\n                            id=\"FilterBlue\"\n                            class=\"size-5 rounded-sm border-gray-300 shadow-sm\"\n                          />\n\n                          <span class=\"text-sm font-medium text-gray-700\"> Blue </span>\n                        </label>\n                      </li>\n\n                      <li>\n                        <label for=\"FilterGreen\" class=\"inline-flex items-center gap-2\">\n                          <input\n                            type=\"checkbox\"\n                            id=\"FilterGreen\"\n                            class=\"size-5 rounded-sm border-gray-300 shadow-sm\"\n                          />\n\n                          <span class=\"text-sm font-medium text-gray-700\"> Green </span>\n                        </label>\n                      </li>\n\n                      <li>\n                        <label for=\"FilterOrange\" class=\"inline-flex items-center gap-2\">\n                          <input\n                            type=\"checkbox\"\n                            id=\"FilterOrange\"\n                            class=\"size-5 rounded-sm border-gray-300 shadow-sm\"\n                          />\n\n                          <span class=\"text-sm font-medium text-gray-700\"> Orange </span>\n                        </label>\n                      </li>\n\n                      <li>\n                        <label for=\"FilterPurple\" class=\"inline-flex items-center gap-2\">\n                          <input\n                            type=\"checkbox\"\n                            id=\"FilterPurple\"\n                            class=\"size-5 rounded-sm border-gray-300 shadow-sm\"\n                          />\n\n                          <span class=\"text-sm font-medium text-gray-700\"> Purple </span>\n                        </label>\n                      </li>\n\n                      <li>\n                        <label for=\"FilterTeal\" class=\"inline-flex items-center gap-2\">\n                          <input\n                            type=\"checkbox\"\n                            id=\"FilterTeal\"\n                            class=\"size-5 rounded-sm border-gray-300 shadow-sm\"\n                          />\n\n                          <span class=\"text-sm font-medium text-gray-700\"> Teal </span>\n                        </label>\n                      </li>\n                    </ul>\n                  </div>\n                </details>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"lg:col-span-3\">\n            <ul class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n              <li>\n                <a href=\"#\" class=\"group block overflow-hidden\">\n                  <img\n                    src=\"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160\"\n                    alt=\"\"\n                    class=\"h-87.5 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-112.5\"\n                  />\n\n                  <div class=\"relative bg-white pt-3\">\n                    <h3\n                      class=\"text-xs text-gray-700 group-hover:underline group-hover:underline-offset-4\"\n                    >\n                      Basic Tee\n                    </h3>\n\n                    <p class=\"mt-2\">\n                      <span class=\"sr-only\"> Regular Price </span>\n\n                      <span class=\"tracking-wider text-gray-900\"> £24.00 GBP </span>\n                    </p>\n                  </div>\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"group block overflow-hidden\">\n                  <img\n                    src=\"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160\"\n                    alt=\"\"\n                    class=\"h-87.5 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-112.5\"\n                  />\n\n                  <div class=\"relative bg-white pt-3\">\n                    <h3\n                      class=\"text-xs text-gray-700 group-hover:underline group-hover:underline-offset-4\"\n                    >\n                      Basic Tee\n                    </h3>\n\n                    <p class=\"mt-2\">\n                      <span class=\"sr-only\"> Regular Price </span>\n\n                      <span class=\"tracking-wider text-gray-900\"> £24.00 GBP </span>\n                    </p>\n                  </div>\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"group block overflow-hidden\">\n                  <img\n                    src=\"https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&q=80&w=1160\"\n                    alt=\"\"\n                    class=\"h-87.5 w-full object-cover transition duration-500 group-hover:scale-105 sm:h-112.5\"\n                  />\n\n                  <div class=\"relative bg-white pt-3\">\n                    <h3\n                      class=\"text-xs text-gray-700 group-hover:underline group-hover:underline-offset-4\"\n                    >\n                      Basic Tee\n                    </h3>\n\n                    <p class=\"mt-2\">\n                      <span class=\"sr-only\"> Regular Price </span>\n\n                      <span class=\"tracking-wider text-gray-900\"> £24.00 GBP </span>\n                    </p>\n                  </div>\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/sections/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section>\n      <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n        <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2 md:items-center md:gap-8\">\n          <div>\n            <div class=\"max-w-prose md:max-w-none\">\n              <h2 class=\"text-2xl font-semibold text-gray-900 sm:text-3xl\">\n                Lorem ipsum dolor sit amet consectetur adipisicing elit.\n              </h2>\n\n              <p class=\"mt-4 text-pretty text-gray-700\">\n                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe\n                architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas\n                sequi.\n              </p>\n            </div>\n          </div>\n\n          <div>\n            <img\n              src=\"https://images.unsplash.com/photo-1731690415686-e68f78e2b5bd?auto=format&fit=crop&q=80&w=1160\"\n              class=\"rounded\"\n              alt=\"\"\n            />\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/sections/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section>\n      <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n        <div class=\"grid grid-cols-1 gap-4 md:grid-cols-4 md:items-center md:gap-8\">\n          <div class=\"md:col-span-1\">\n            <div class=\"max-w-prose md:max-w-none\">\n              <h2 class=\"text-2xl font-semibold text-gray-900 sm:text-3xl\">\n                Lorem ipsum dolor sit amet consectetur adipisicing elit.\n              </h2>\n\n              <p class=\"mt-4 text-pretty text-gray-700\">\n                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe\n                architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas\n                sequi.\n              </p>\n            </div>\n          </div>\n\n          <div class=\"md:col-span-3\">\n            <img\n              src=\"https://images.unsplash.com/photo-1731690415686-e68f78e2b5bd?auto=format&fit=crop&q=80&w=1160\"\n              class=\"rounded\"\n              alt=\"\"\n            />\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/sections/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section>\n      <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n        <div class=\"grid grid-cols-1 gap-4 md:grid-cols-4 md:items-center md:gap-8\">\n          <div class=\"md:col-span-3\">\n            <img\n              src=\"https://images.unsplash.com/photo-1731690415686-e68f78e2b5bd?auto=format&fit=crop&q=80&w=1160\"\n              class=\"rounded\"\n              alt=\"\"\n            />\n          </div>\n\n          <div class=\"md:col-span-1\">\n            <div class=\"max-w-prose md:max-w-none\">\n              <h2 class=\"text-2xl font-semibold text-gray-900 sm:text-3xl\">\n                Lorem ipsum dolor sit amet consectetur adipisicing elit.\n              </h2>\n\n              <p class=\"mt-4 text-pretty text-gray-700\">\n                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe\n                architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas\n                sequi.\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/sections/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <section>\n      <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n        <div class=\"space-y-4 md:space-y-8\">\n          <div class=\"max-w-prose\">\n            <h2 class=\"text-2xl font-semibold text-gray-900 sm:text-3xl\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit.\n            </h2>\n\n            <p class=\"mt-4 text-pretty text-gray-700\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe\n              architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas\n              sequi.\n            </p>\n          </div>\n\n          <img\n            src=\"https://images.unsplash.com/photo-1731690415686-e68f78e2b5bd?auto=format&fit=crop&q=80&w=1160\"\n            class=\"rounded\"\n            alt=\"\"\n          />\n        </div>\n      </div>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/stats/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8\">\n      <div class=\"mx-auto max-w-3xl text-center\">\n        <h2 class=\"text-3xl font-bold text-gray-900 sm:text-4xl dark:text-white\">\n          Trusted by eCommerce Businesses\n        </h2>\n\n        <p class=\"mt-4 text-gray-500 sm:text-xl dark:text-gray-400\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore\n          provident impedit esse recusandae facere libero harum sequi.\n        </p>\n      </div>\n\n      <dl class=\"mt-6 grid grid-cols-1 gap-4 sm:mt-8 sm:grid-cols-2 lg:grid-cols-4\">\n        <div\n          class=\"flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center dark:border-gray-800\"\n        >\n          <dt class=\"order-last text-lg font-medium text-gray-500 dark:text-gray-400\">\n            Total Sales\n          </dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">$4.8m</dd>\n        </div>\n\n        <div\n          class=\"flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center dark:border-gray-800\"\n        >\n          <dt class=\"order-last text-lg font-medium text-gray-500 dark:text-gray-400\">\n            Official Addons\n          </dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">24</dd>\n        </div>\n\n        <div\n          class=\"flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center dark:border-gray-800\"\n        >\n          <dt class=\"order-last text-lg font-medium text-gray-500 dark:text-gray-400\">\n            Total Addons\n          </dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">86</dd>\n        </div>\n\n        <div\n          class=\"flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center dark:border-gray-800\"\n        >\n          <dt class=\"order-last text-lg font-medium text-gray-500 dark:text-gray-400\">Downloads</dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">86k</dd>\n        </div>\n      </dl>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/stats/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8\">\n      <div class=\"mx-auto max-w-3xl text-center\">\n        <h2 class=\"text-3xl font-bold text-gray-900 sm:text-4xl\">\n          Trusted by eCommerce Businesses\n        </h2>\n\n        <p class=\"mt-4 text-gray-500 sm:text-xl\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore\n          provident impedit esse recusandae facere libero harum sequi.\n        </p>\n      </div>\n\n      <dl class=\"mt-6 grid grid-cols-1 gap-4 sm:mt-8 sm:grid-cols-2 lg:grid-cols-4\">\n        <div class=\"flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center\">\n          <dt class=\"order-last text-lg font-medium text-gray-500\">Total Sales</dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">$4.8m</dd>\n        </div>\n\n        <div class=\"flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center\">\n          <dt class=\"order-last text-lg font-medium text-gray-500\">Official Addons</dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">24</dd>\n        </div>\n\n        <div class=\"flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center\">\n          <dt class=\"order-last text-lg font-medium text-gray-500\">Total Addons</dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">86</dd>\n        </div>\n\n        <div class=\"flex flex-col rounded-lg border border-gray-100 px-4 py-8 text-center\">\n          <dt class=\"order-last text-lg font-medium text-gray-500\">Downloads</dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">86k</dd>\n        </div>\n      </dl>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/stats/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8\">\n      <div class=\"mx-auto max-w-3xl text-center\">\n        <h2 class=\"text-3xl font-bold text-gray-900 sm:text-4xl dark:text-white\">\n          Trusted by eCommerce Businesses\n        </h2>\n\n        <p class=\"mt-4 text-gray-500 sm:text-xl dark:text-gray-400\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore\n          provident impedit esse recusandae facere libero harum sequi.\n        </p>\n      </div>\n\n      <dl\n        class=\"mg-6 grid grid-cols-1 gap-4 divide-y divide-gray-100 sm:mt-8 sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-4 dark:divide-gray-900\"\n      >\n        <div class=\"flex flex-col px-4 py-8 text-center\">\n          <dt class=\"order-last text-lg font-medium text-gray-500 dark:text-gray-400\">\n            Total Sales\n          </dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">$4.8m</dd>\n        </div>\n\n        <div class=\"flex flex-col px-4 py-8 text-center\">\n          <dt class=\"order-last text-lg font-medium text-gray-500 dark:text-gray-400\">\n            Official Addons\n          </dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">24</dd>\n        </div>\n\n        <div class=\"flex flex-col px-4 py-8 text-center\">\n          <dt class=\"order-last text-lg font-medium text-gray-500 dark:text-gray-400\">\n            Total Addons\n          </dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">86</dd>\n        </div>\n\n        <div class=\"flex flex-col px-4 py-8 text-center\">\n          <dt class=\"order-last text-lg font-medium text-gray-500 dark:text-gray-400\">Downloads</dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">86k</dd>\n        </div>\n      </dl>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/stats/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8\">\n      <div class=\"mx-auto max-w-3xl text-center\">\n        <h2 class=\"text-3xl font-bold text-gray-900 sm:text-4xl\">\n          Trusted by eCommerce Businesses\n        </h2>\n\n        <p class=\"mt-4 text-gray-500 sm:text-xl\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore\n          provident impedit esse recusandae facere libero harum sequi.\n        </p>\n      </div>\n\n      <dl\n        class=\"mg-6 grid grid-cols-1 gap-4 divide-y divide-gray-100 sm:mt-8 sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-4\"\n      >\n        <div class=\"flex flex-col px-4 py-8 text-center\">\n          <dt class=\"order-last text-lg font-medium text-gray-500\">Total Sales</dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">$4.8m</dd>\n        </div>\n\n        <div class=\"flex flex-col px-4 py-8 text-center\">\n          <dt class=\"order-last text-lg font-medium text-gray-500\">Official Addons</dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">24</dd>\n        </div>\n\n        <div class=\"flex flex-col px-4 py-8 text-center\">\n          <dt class=\"order-last text-lg font-medium text-gray-500\">Total Addons</dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">86</dd>\n        </div>\n\n        <div class=\"flex flex-col px-4 py-8 text-center\">\n          <dt class=\"order-last text-lg font-medium text-gray-500\">Downloads</dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">86k</dd>\n        </div>\n      </dl>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/stats/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8\">\n      <div class=\"mx-auto max-w-3xl text-center\">\n        <h2 class=\"text-3xl font-bold text-gray-900 sm:text-4xl dark:text-white\">\n          Trusted by eCommerce Businesses\n        </h2>\n\n        <p class=\"mt-4 text-gray-500 sm:text-xl dark:text-gray-400\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore\n          provident impedit esse recusandae facere libero harum sequi.\n        </p>\n      </div>\n\n      <dl class=\"mt-6 grid grid-cols-1 gap-4 sm:mt-8 sm:grid-cols-2 lg:grid-cols-4\">\n        <div class=\"flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center dark:bg-blue-700/25\">\n          <dt class=\"order-last text-lg font-medium text-gray-500 dark:text-white/75\">\n            Total Sales\n          </dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl dark:text-blue-50\">$4.8m</dd>\n        </div>\n\n        <div class=\"flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center dark:bg-blue-700/25\">\n          <dt class=\"order-last text-lg font-medium text-gray-500 dark:text-white/75\">\n            Official Addons\n          </dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl dark:text-blue-50\">24</dd>\n        </div>\n\n        <div class=\"flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center dark:bg-blue-700/25\">\n          <dt class=\"order-last text-lg font-medium text-gray-500 dark:text-white/75\">\n            Total Addons\n          </dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl dark:text-blue-50\">86</dd>\n        </div>\n\n        <div class=\"flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center dark:bg-blue-700/25\">\n          <dt class=\"order-last text-lg font-medium text-gray-500 dark:text-white/75\">Downloads</dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl dark:text-blue-50\">86k</dd>\n        </div>\n      </dl>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/stats/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8\">\n      <div class=\"mx-auto max-w-3xl text-center\">\n        <h2 class=\"text-3xl font-bold text-gray-900 sm:text-4xl\">\n          Trusted by eCommerce Businesses\n        </h2>\n\n        <p class=\"mt-4 text-gray-500 sm:text-xl\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dolores laborum labore\n          provident impedit esse recusandae facere libero harum sequi.\n        </p>\n      </div>\n\n      <dl class=\"mt-6 grid grid-cols-1 gap-4 sm:mt-8 sm:grid-cols-2 lg:grid-cols-4\">\n        <div class=\"flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center\">\n          <dt class=\"order-last text-lg font-medium text-gray-500\">Total Sales</dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">$4.8m</dd>\n        </div>\n\n        <div class=\"flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center\">\n          <dt class=\"order-last text-lg font-medium text-gray-500\">Official Addons</dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">24</dd>\n        </div>\n\n        <div class=\"flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center\">\n          <dt class=\"order-last text-lg font-medium text-gray-500\">Total Addons</dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">86</dd>\n        </div>\n\n        <div class=\"flex flex-col rounded-lg bg-blue-50 px-4 py-8 text-center\">\n          <dt class=\"order-last text-lg font-medium text-gray-500\">Downloads</dt>\n\n          <dd class=\"text-4xl font-extrabold text-blue-600 md:text-5xl\">86k</dd>\n        </div>\n      </dl>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/team-sections/1-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-1 gap-8 md:grid-cols-3\">\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-video rounded-lg object-cover\"\n          />\n\n          <div class=\"mt-4 flex items-center justify-between gap-4\">\n            <div>\n              <h3 class=\"text-lg/tight font-semibold text-gray-900 dark:text-white\">\n                Eric Johnson\n              </h3>\n\n              <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">Product Designer</p>\n            </div>\n\n            <a\n              href=\"#\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              class=\"text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white\"\n            >\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"size-7\">\n                <path\n                  d=\"M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z\"\n                  clip-rule=\"evenodd\"\n                  fill-rule=\"evenodd\"\n                ></path>\n              </svg>\n            </a>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-video rounded-lg object-cover\"\n          />\n\n          <div class=\"mt-4 flex items-center justify-between gap-4\">\n            <div>\n              <h3 class=\"text-lg/tight font-semibold text-gray-900 dark:text-white\">\n                Eric Johnson\n              </h3>\n\n              <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">Product Designer</p>\n            </div>\n\n            <a\n              href=\"#\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              class=\"text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white\"\n            >\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"size-7\">\n                <path\n                  d=\"M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z\"\n                  clip-rule=\"evenodd\"\n                  fill-rule=\"evenodd\"\n                ></path>\n              </svg>\n            </a>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-video rounded-lg object-cover\"\n          />\n\n          <div class=\"mt-4 flex items-center justify-between gap-4\">\n            <div>\n              <h3 class=\"text-lg/tight font-semibold text-gray-900 dark:text-white\">\n                Eric Johnson\n              </h3>\n\n              <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">Product Designer</p>\n            </div>\n\n            <a\n              href=\"#\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              class=\"text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white\"\n            >\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"size-7\">\n                <path\n                  d=\"M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z\"\n                  clip-rule=\"evenodd\"\n                  fill-rule=\"evenodd\"\n                ></path>\n              </svg>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/team-sections/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-1 gap-8 md:grid-cols-3\">\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-video rounded-lg object-cover\"\n          />\n\n          <div class=\"mt-4 flex items-center justify-between gap-4\">\n            <div>\n              <h3 class=\"text-lg/tight font-semibold text-gray-900\">Eric Johnson</h3>\n\n              <p class=\"mt-0.5 text-sm text-gray-700\">Product Designer</p>\n            </div>\n\n            <a\n              href=\"#\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              class=\"text-[#0072b1] transition-opacity hover:opacity-90\"\n            >\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"size-7\">\n                <path\n                  d=\"M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z\"\n                  clip-rule=\"evenodd\"\n                  fill-rule=\"evenodd\"\n                ></path>\n              </svg>\n            </a>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-video rounded-lg object-cover\"\n          />\n\n          <div class=\"mt-4 flex items-center justify-between gap-4\">\n            <div>\n              <h3 class=\"text-lg/tight font-semibold text-gray-900\">Eric Johnson</h3>\n\n              <p class=\"mt-0.5 text-sm text-gray-700\">Product Designer</p>\n            </div>\n\n            <a\n              href=\"#\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              class=\"text-[#0072b1] transition-opacity hover:opacity-90\"\n            >\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"size-7\">\n                <path\n                  d=\"M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z\"\n                  clip-rule=\"evenodd\"\n                  fill-rule=\"evenodd\"\n                ></path>\n              </svg>\n            </a>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-video rounded-lg object-cover\"\n          />\n\n          <div class=\"mt-4 flex items-center justify-between gap-4\">\n            <div>\n              <h3 class=\"text-lg/tight font-semibold text-gray-900\">Eric Johnson</h3>\n\n              <p class=\"mt-0.5 text-sm text-gray-700\">Product Designer</p>\n            </div>\n\n            <a\n              href=\"#\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              class=\"text-[#0072b1] transition-opacity hover:opacity-90\"\n            >\n              <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"size-7\">\n                <path\n                  d=\"M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z\"\n                  clip-rule=\"evenodd\"\n                  fill-rule=\"evenodd\"\n                ></path>\n              </svg>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/team-sections/2-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-1 gap-8 md:grid-cols-3\">\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-video rounded-lg object-cover\"\n          />\n\n          <div class=\"mt-4\">\n            <div class=\"flex items-center justify-between gap-4\">\n              <div>\n                <h3 class=\"text-lg/tight font-semibold text-gray-900 dark:text-white\">\n                  Eric Johnson\n                </h3>\n\n                <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">Product Designer</p>\n              </div>\n\n              <a\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                class=\"text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white\"\n              >\n                <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"size-7\">\n                  <path\n                    d=\"M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z\"\n                    clip-rule=\"evenodd\"\n                    fill-rule=\"evenodd\"\n                  ></path>\n                </svg>\n              </a>\n            </div>\n\n            <p class=\"mt-2 text-pretty text-gray-700 dark:text-gray-200\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, placeat facere? Iste\n              nostrum odio magnam?\n            </p>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-video rounded-lg object-cover\"\n          />\n\n          <div class=\"mt-4\">\n            <div class=\"flex items-center justify-between gap-4\">\n              <div>\n                <h3 class=\"text-lg/tight font-semibold text-gray-900 dark:text-white\">\n                  Eric Johnson\n                </h3>\n\n                <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">Product Designer</p>\n              </div>\n\n              <a\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                class=\"text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white\"\n              >\n                <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"size-7\">\n                  <path\n                    d=\"M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z\"\n                    clip-rule=\"evenodd\"\n                    fill-rule=\"evenodd\"\n                  ></path>\n                </svg>\n              </a>\n            </div>\n\n            <p class=\"mt-2 text-pretty text-gray-700 dark:text-gray-200\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, placeat facere? Iste\n              nostrum odio magnam?\n            </p>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-video rounded-lg object-cover\"\n          />\n\n          <div class=\"mt-4\">\n            <div class=\"flex items-center justify-between gap-4\">\n              <div>\n                <h3 class=\"text-lg/tight font-semibold text-gray-900 dark:text-white\">\n                  Eric Johnson\n                </h3>\n\n                <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">Product Designer</p>\n              </div>\n\n              <a\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                class=\"text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white\"\n              >\n                <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"size-7\">\n                  <path\n                    d=\"M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z\"\n                    clip-rule=\"evenodd\"\n                    fill-rule=\"evenodd\"\n                  ></path>\n                </svg>\n              </a>\n            </div>\n\n            <p class=\"mt-2 text-pretty text-gray-700 dark:text-gray-200\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, placeat facere? Iste\n              nostrum odio magnam?\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/team-sections/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-1 gap-8 md:grid-cols-3\">\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-video rounded-lg object-cover\"\n          />\n\n          <div class=\"mt-4\">\n            <div class=\"flex items-center justify-between gap-4\">\n              <div>\n                <h3 class=\"text-lg/tight font-semibold text-gray-900\">Eric Johnson</h3>\n\n                <p class=\"mt-0.5 text-sm text-gray-700\">Product Designer</p>\n              </div>\n\n              <a\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                class=\"text-[#0072b1] transition-opacity hover:opacity-90\"\n              >\n                <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"size-7\">\n                  <path\n                    d=\"M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z\"\n                    clip-rule=\"evenodd\"\n                    fill-rule=\"evenodd\"\n                  ></path>\n                </svg>\n              </a>\n            </div>\n\n            <p class=\"mt-2 text-pretty text-gray-700\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, placeat facere? Iste\n              nostrum odio magnam?\n            </p>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-video rounded-lg object-cover\"\n          />\n\n          <div class=\"mt-4\">\n            <div class=\"flex items-center justify-between gap-4\">\n              <div>\n                <h3 class=\"text-lg/tight font-semibold text-gray-900\">Eric Johnson</h3>\n\n                <p class=\"mt-0.5 text-sm text-gray-700\">Product Designer</p>\n              </div>\n\n              <a\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                class=\"text-[#0072b1] transition-opacity hover:opacity-90\"\n              >\n                <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"size-7\">\n                  <path\n                    d=\"M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z\"\n                    clip-rule=\"evenodd\"\n                    fill-rule=\"evenodd\"\n                  ></path>\n                </svg>\n              </a>\n            </div>\n\n            <p class=\"mt-2 text-pretty text-gray-700\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, placeat facere? Iste\n              nostrum odio magnam?\n            </p>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-video rounded-lg object-cover\"\n          />\n\n          <div class=\"mt-4\">\n            <div class=\"flex items-center justify-between gap-4\">\n              <div>\n                <h3 class=\"text-lg/tight font-semibold text-gray-900\">Eric Johnson</h3>\n\n                <p class=\"mt-0.5 text-sm text-gray-700\">Product Designer</p>\n              </div>\n\n              <a\n                href=\"#\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                class=\"text-[#0072b1] transition-opacity hover:opacity-90\"\n              >\n                <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"size-7\">\n                  <path\n                    d=\"M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z\"\n                    clip-rule=\"evenodd\"\n                    fill-rule=\"evenodd\"\n                  ></path>\n                </svg>\n              </a>\n            </div>\n\n            <p class=\"mt-2 text-pretty text-gray-700\">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, placeat facere? Iste\n              nostrum odio magnam?\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/team-sections/3-dark.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-6\">\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-square rounded-full object-cover\"\n          />\n\n          <div class=\"mt-4 text-center\">\n            <h3 class=\"text-lg/tight font-semibold text-gray-900 dark:text-white\">Eric Johnson</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">Product Designer</p>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-square rounded-full object-cover\"\n          />\n\n          <div class=\"mt-4 text-center\">\n            <h3 class=\"text-lg/tight font-semibold text-gray-900 dark:text-white\">Eric Johnson</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">Product Designer</p>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-square rounded-full object-cover\"\n          />\n\n          <div class=\"mt-4 text-center\">\n            <h3 class=\"text-lg/tight font-semibold text-gray-900 dark:text-white\">Eric Johnson</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">Product Designer</p>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-square rounded-full object-cover\"\n          />\n\n          <div class=\"mt-4 text-center\">\n            <h3 class=\"text-lg/tight font-semibold text-gray-900 dark:text-white\">Eric Johnson</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">Product Designer</p>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-square rounded-full object-cover\"\n          />\n\n          <div class=\"mt-4 text-center\">\n            <h3 class=\"text-lg/tight font-semibold text-gray-900 dark:text-white\">Eric Johnson</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">Product Designer</p>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-square rounded-full object-cover\"\n          />\n\n          <div class=\"mt-4 text-center\">\n            <h3 class=\"text-lg/tight font-semibold text-gray-900 dark:text-white\">Eric Johnson</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700 dark:text-gray-200\">Product Designer</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/marketing/team-sections/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body>\n    <div class=\"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-6\">\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-square rounded-full object-cover\"\n          />\n\n          <div class=\"mt-4 text-center\">\n            <h3 class=\"text-lg/tight font-semibold text-gray-900\">Eric Johnson</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700\">Product Designer</p>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-square rounded-full object-cover\"\n          />\n\n          <div class=\"mt-4 text-center\">\n            <h3 class=\"text-lg/tight font-semibold text-gray-900\">Eric Johnson</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700\">Product Designer</p>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-square rounded-full object-cover\"\n          />\n\n          <div class=\"mt-4 text-center\">\n            <h3 class=\"text-lg/tight font-semibold text-gray-900\">Eric Johnson</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700\">Product Designer</p>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-square rounded-full object-cover\"\n          />\n\n          <div class=\"mt-4 text-center\">\n            <h3 class=\"text-lg/tight font-semibold text-gray-900\">Eric Johnson</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700\">Product Designer</p>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-square rounded-full object-cover\"\n          />\n\n          <div class=\"mt-4 text-center\">\n            <h3 class=\"text-lg/tight font-semibold text-gray-900\">Eric Johnson</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700\">Product Designer</p>\n          </div>\n        </div>\n\n        <div>\n          <img\n            src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160\"\n            alt=\"\"\n            class=\"aspect-square rounded-full object-cover\"\n          />\n\n          <div class=\"mt-4 text-center\">\n            <h3 class=\"text-lg/tight font-semibold text-gray-900\">Eric Johnson</h3>\n\n            <p class=\"mt-0.5 text-sm text-gray-700\">Product Designer</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/accordions/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"space-y-3\">\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 border-2 border-black bg-white px-4 py-3 font-medium text-gray-900 shadow-[4px_4px_0_0] hover:bg-yellow-100 focus:bg-yellow-100 focus:outline-0\"\n        >\n          <span class=\"font-semibold\">What are the basic features?</span>\n\n          <svg\n            class=\"size-5 shrink-0 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-4\">\n          <p>\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 border-2 border-black bg-white px-4 py-3 font-medium text-gray-900 shadow-[4px_4px_0_0] hover:bg-yellow-100 focus:bg-yellow-100 focus:outline-0\"\n        >\n          <span class=\"font-semibold\">How do I get started?</span>\n\n          <svg\n            class=\"size-5 shrink-0 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-4\">\n          <p>\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 border-2 border-black bg-white px-4 py-3 font-medium text-gray-900 shadow-[4px_4px_0_0] hover:bg-yellow-100 focus:bg-yellow-100 focus:outline-0\"\n        >\n          <span class=\"font-semibold\">What support options are available?</span>\n\n          <svg\n            class=\"size-5 shrink-0 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"p-4\">\n          <p>\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/accordions/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"space-y-3\">\n      <details\n        class=\"group border-2 border-black shadow-[4px_4px_0_0] [&_summary::-webkit-details-marker]:hidden\"\n      >\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-100 focus:bg-yellow-100 focus:outline-0\"\n        >\n          <span class=\"font-semibold\">What are the basic features?</span>\n\n          <svg\n            class=\"size-5 shrink-0 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"border-t-2 border-black p-4\">\n          <p>\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details\n        class=\"group border-2 border-black shadow-[4px_4px_0_0] [&_summary::-webkit-details-marker]:hidden\"\n      >\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-100 focus:bg-yellow-100 focus:outline-0\"\n        >\n          <span class=\"font-semibold\">How do I get started?</span>\n\n          <svg\n            class=\"size-5 shrink-0 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"border-t-2 border-black p-4\">\n          <p>\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details\n        class=\"group border-2 border-black shadow-[4px_4px_0_0] [&_summary::-webkit-details-marker]:hidden\"\n      >\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-100 focus:bg-yellow-100 focus:outline-0\"\n        >\n          <span class=\"font-semibold\">What support options are available?</span>\n\n          <svg\n            class=\"size-5 shrink-0 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"border-t-2 border-black p-4\">\n          <p>\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/accordions/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"divide-y-2 divide-black border-2 border-black shadow-[4px_4px_0_0]\">\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-100 focus:bg-yellow-100 focus:outline-0\"\n        >\n          <span class=\"font-semibold\">What are the basic features?</span>\n\n          <svg\n            class=\"size-5 shrink-0 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"border-t-2 border-black p-4\">\n          <p>\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-100 focus:bg-yellow-100 focus:outline-0\"\n        >\n          <span class=\"font-semibold\">How do I get started?</span>\n\n          <svg\n            class=\"size-5 shrink-0 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"border-t-2 border-black p-4\">\n          <p>\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n\n      <details class=\"group [&_summary::-webkit-details-marker]:hidden\">\n        <summary\n          class=\"flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-100 focus:bg-yellow-100 focus:outline-0\"\n        >\n          <span class=\"font-semibold\">What support options are available?</span>\n\n          <svg\n            class=\"size-5 shrink-0 group-open:-rotate-180\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </summary>\n\n        <div class=\"border-t-2 border-black p-4\">\n          <p>\n            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n            dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n            odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n            temporibus perspiciatis!\n          </p>\n        </div>\n      </details>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/alerts/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div role=\"alert\" class=\"border-2 bg-blue-100 p-4 text-blue-900 shadow-[4px_4px_0_0]\">\n      <div class=\"flex items-start gap-3\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n          fill=\"currentColor\"\n          class=\"mt-0.5 size-4\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6.75 8a.75.75 0 0 0 0 1.5h.75v1.75a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8.25 8h-1.5Z\"\n            clip-rule=\"evenodd\"\n          />\n        </svg>\n\n        <strong class=\"block flex-1 leading-tight font-semibold\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, eos!\n        </strong>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/alerts/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div role=\"alert\" class=\"border-2 bg-green-100 p-4 text-green-900 shadow-[4px_4px_0_0]\">\n      <div class=\"flex items-start gap-3\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n          fill=\"currentColor\"\n          class=\"mt-0.5 size-4\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z\"\n            clip-rule=\"evenodd\"\n          />\n        </svg>\n\n        <strong class=\"block flex-1 leading-tight font-semibold\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, eos!\n        </strong>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/alerts/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div role=\"alert\" class=\"border-2 bg-red-100 p-4 text-red-900 shadow-[4px_4px_0_0]\">\n      <div class=\"flex items-start gap-3\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n          fill=\"currentColor\"\n          class=\"mt-0.5 size-4\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\"\n            clip-rule=\"evenodd\"\n          />\n        </svg>\n\n        <strong class=\"block flex-1 leading-tight font-semibold\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, eos!\n        </strong>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/badges/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <span\n      class=\"border-2 border-black bg-blue-100 px-3 py-1.5 text-sm/none font-semibold shadow-[2px_2px_0_0]\"\n    >\n      Info\n    </span>\n\n    <span\n      class=\"border-2 border-black bg-green-100 px-3 py-1.5 text-sm/none font-semibold shadow-[2px_2px_0_0]\"\n    >\n      Success\n    </span>\n\n    <span\n      class=\"border-2 border-black bg-red-100 px-3 py-1.5 text-sm/none font-semibold shadow-[2px_2px_0_0]\"\n    >\n      Error\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/badges/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex flex-wrap justify-center gap-4 p-6\">\n    <span\n      class=\"inline-flex items-center gap-1.5 border-2 border-black bg-white px-3 py-1.5 text-sm/none font-semibold shadow-[2px_2px_0_0]\"\n    >\n      <span class=\"size-2 bg-green-600\"></span>\n\n      Success\n    </span>\n\n    <span\n      class=\"inline-flex items-center gap-1.5 border-2 border-black bg-white px-3 py-1.5 text-sm/none font-semibold shadow-[2px_2px_0_0]\"\n    >\n      <span class=\"size-2 bg-red-600\"></span>\n\n      Error\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/badges/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <span\n      class=\"inline-flex items-center gap-3 border-2 border-black bg-white px-3 py-1.5 text-sm/none font-semibold shadow-[2px_2px_0_0]\"\n    >\n      New Message\n\n      <button\n        type=\"button\"\n        class=\"bg-black p-0.5 text-white shadow-[2px_2px_0_0] shadow-black hover:translate-0.5 hover:shadow-none focus:ring-2 focus:ring-yellow-300\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n          fill=\"currentColor\"\n          class=\"size-4\"\n        >\n          <path\n            d=\"M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z\"\n          />\n        </svg>\n      </button>\n    </span>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/buttons/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <a\n      class=\"border-2 border-black bg-white px-5 py-3 font-semibold text-black shadow-[4px_4px_0_0] hover:bg-yellow-300 focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n      href=\"#\"\n    >\n      Click Here\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/buttons/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <a\n      class=\"border-2 border-black bg-white px-5 py-3 font-semibold text-black shadow-[4px_4px_0_0] hover:translate-1 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n      href=\"#\"\n    >\n      Click Here\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/buttons/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <a\n      class=\"border-2 border-black bg-white px-5 py-3 font-semibold text-black shadow-[4px_4px_0_0] hover:translate-1 hover:shadow-[-1px_-1px_0_0] focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n      href=\"#\"\n    >\n      Click Here\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/buttons/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <a\n      class=\"relative border-black bg-white px-5 py-3 font-semibold text-black after:absolute after:inset-x-0 after:bottom-0 after:h-1 after:bg-black hover:text-white hover:after:h-full focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n      href=\"#\"\n    >\n      <span class=\"relative z-10\"> Click Here </span>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/buttons/5.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"flex justify-center p-6\">\n    <a\n      class=\"border-2 border-black bg-white px-5 py-3 font-semibold text-black ring-2 ring-black ring-offset-2 ring-offset-yellow-300 hover:bg-yellow-300 focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n      href=\"#\"\n    >\n      Click Here\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/cards/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <a\n      href=\"#\"\n      class=\"block border-2 border-black bg-white p-4 shadow-[4px_4px_0_0] hover:bg-yellow-100 focus:ring-2 focus:ring-yellow-300 focus:outline-0 sm:p-6\"\n    >\n      <span class=\"inline-flex items-center gap-1.5\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n          fill=\"currentColor\"\n          class=\"size-4\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z\"\n            clip-rule=\"evenodd\"\n          />\n        </svg>\n\n        <time datetime=\"2025-04-01\" class=\"text-xs/none font-semibold uppercase\">\n          April 1, 2025\n        </time>\n      </span>\n\n      <h3 class=\"mt-1 text-xl font-semibold\">\n        How I built my first website with Nuxt, Tailwind CSS and Vercel\n      </h3>\n\n      <p class=\"mt-2 line-clamp-2 text-pretty\">\n        Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum provident a, ipsa\n        maiores deleniti consectetur nobis et eaque.\n      </p>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/cards/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <a\n      href=\"#\"\n      class=\"block border-2 border-black bg-white p-4 shadow-[4px_4px_0_0,8px_8px_0_0,12px_12px_0_0] hover:translate-3 hover:bg-yellow-100 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0 sm:p-6\"\n    >\n      <span class=\"inline-flex items-center gap-1.5\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n          fill=\"currentColor\"\n          class=\"size-4\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z\"\n            clip-rule=\"evenodd\"\n          />\n        </svg>\n\n        <time datetime=\"2025-04-01\" class=\"text-xs/none font-semibold uppercase\">\n          April 1, 2025\n        </time>\n      </span>\n\n      <h3 class=\"mt-1 text-xl font-semibold\">\n        How I built my first website with Nuxt, Tailwind CSS and Vercel\n      </h3>\n\n      <p class=\"mt-2 line-clamp-2 text-pretty\">\n        Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum provident a, ipsa\n        maiores deleniti consectetur nobis et eaque.\n      </p>\n    </a>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/cards/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div class=\"group/card relative\">\n      <span class=\"absolute inset-0 border-2 border-dashed bg-white\"></span>\n\n      <a\n        href=\"#\"\n        class=\"group/link relative flex h-72 flex-col justify-end border-2 border-black bg-white p-4 group-hover/card:-translate-2 after:absolute hover:bg-yellow-100 focus:ring-2 focus:ring-yellow-300 focus:outline-0 sm:p-6\"\n      >\n        <span class=\"inline-flex items-center gap-1.5\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 16 16\"\n            fill=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n\n          <time datetime=\"2025-04-01\" class=\"text-xs/none font-semibold uppercase\">\n            April 1, 2025\n          </time>\n        </span>\n\n        <h3 class=\"mt-1 text-xl font-semibold\">\n          How I built my first website with Nuxt, Tailwind CSS and Vercel\n        </h3>\n\n        <p class=\"mt-2 line-clamp-2 hidden text-pretty group-hover/link:block\">\n          Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum provident a, ipsa\n          maiores deleniti consectetur nobis et eaque.\n        </p>\n      </a>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/cards/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <article class=\"border-2 border-black bg-white shadow-[4px_4px_0_0,8px_8px_0_0]\">\n      <div class=\"bg-yellow-300 p-3\">\n        <div class=\"flex items-center justify-between\">\n          <strong class=\"text-xs/none font-bold uppercase\">System Message</strong>\n\n          <div class=\"flex gap-1\">\n            <div class=\"size-3 border-2 border-black bg-white\"></div>\n            <div class=\"size-3 border-2 border-black bg-white\"></div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"border-t-2 border-black p-4 sm:p-6\">\n        <h3 class=\"text-lg font-semibold text-black\">Retro Window</h3>\n\n        <p class=\"mt-2 text-sm text-pretty\">\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam nihil, sit quod quos\n          quibusdam quam ducimus dolore necessitatibus delectus perspiciatis.\n        </p>\n      </div>\n    </article>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/checkboxes/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <fieldset>\n      <legend class=\"sr-only\">Checkboxes</legend>\n\n      <div class=\"flex flex-col items-start gap-3\">\n        <label for=\"Option1\" class=\"inline-flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            class=\"size-6 border-2 border-black shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black\"\n            id=\"Option1\"\n          />\n\n          <span class=\"font-semibold\"> Option 1 </span>\n        </label>\n\n        <label for=\"Option2\" class=\"inline-flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            class=\"size-6 border-2 border-black shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black\"\n            id=\"Option2\"\n          />\n\n          <span class=\"font-semibold\"> Option 2 </span>\n        </label>\n\n        <label for=\"Option3\" class=\"inline-flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            class=\"size-6 border-2 border-black shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black\"\n            id=\"Option3\"\n          />\n\n          <span class=\"font-semibold\"> Option 3 </span>\n        </label>\n      </div>\n    </fieldset>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/checkboxes/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <fieldset>\n      <legend class=\"sr-only\">Checkboxes</legend>\n\n      <div class=\"flex flex-col items-start gap-3\">\n        <label for=\"Option1\" class=\"inline-flex items-start gap-3\">\n          <input\n            type=\"checkbox\"\n            class=\"size-6 border-2 border-black shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black\"\n            id=\"Option1\"\n          />\n\n          <div>\n            <strong class=\"font-semibold\"> Option 1 </strong>\n\n            <p class=\"mt-0.5 text-sm text-pretty\">\n              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n            </p>\n          </div>\n        </label>\n\n        <label for=\"Option2\" class=\"inline-flex items-start gap-3\">\n          <input\n            type=\"checkbox\"\n            class=\"size-6 border-2 border-black shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black\"\n            id=\"Option2\"\n          />\n\n          <div>\n            <strong class=\"font-semibold\"> Option 2 </strong>\n\n            <p class=\"mt-0.5 text-sm text-pretty\">\n              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n            </p>\n          </div>\n        </label>\n\n        <label for=\"Option3\" class=\"inline-flex items-start gap-3\">\n          <input\n            type=\"checkbox\"\n            class=\"size-6 border-2 border-black shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black\"\n            id=\"Option3\"\n          />\n\n          <div>\n            <strong class=\"font-semibold\"> Option 3 </strong>\n\n            <p class=\"mt-0.5 text-sm text-pretty\">\n              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n            </p>\n          </div>\n        </label>\n      </div>\n    </fieldset>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/checkboxes/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <fieldset>\n      <legend class=\"sr-only\">Checkboxes</legend>\n\n      <div\n        class=\"flex flex-col items-start divide-y-2 divide-black border-2 border-black shadow-[4px_4px_0_0]\"\n      >\n        <label\n          for=\"Option1\"\n          class=\"inline-flex items-start gap-3 p-4 focus-within:bg-yellow-300 hover:bg-yellow-100\"\n        >\n          <input\n            type=\"checkbox\"\n            class=\"size-6 border-2 border-black shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black\"\n            id=\"Option1\"\n          />\n\n          <div>\n            <strong class=\"font-semibold\"> Option 1 </strong>\n\n            <p class=\"mt-0.5 text-sm text-pretty\">\n              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n            </p>\n          </div>\n        </label>\n\n        <label\n          for=\"Option2\"\n          class=\"inline-flex items-start gap-3 p-4 focus-within:bg-yellow-300 hover:bg-yellow-100\"\n        >\n          <input\n            type=\"checkbox\"\n            class=\"size-6 border-2 border-black shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black\"\n            id=\"Option2\"\n          />\n\n          <div>\n            <strong class=\"font-semibold\"> Option 2 </strong>\n\n            <p class=\"mt-0.5 text-sm text-pretty\">\n              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n            </p>\n          </div>\n        </label>\n\n        <label\n          for=\"Option3\"\n          class=\"inline-flex items-start gap-3 p-4 focus-within:bg-yellow-300 hover:bg-yellow-100\"\n        >\n          <input\n            type=\"checkbox\"\n            class=\"size-6 border-2 border-black shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black\"\n            id=\"Option3\"\n          />\n\n          <div>\n            <strong class=\"font-semibold\"> Option 3 </strong>\n\n            <p class=\"mt-0.5 text-sm text-pretty\">\n              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.\n            </p>\n          </div>\n        </label>\n      </div>\n    </fieldset>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/inputs/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <label for=\"Email\">\n      <span class=\"text-sm font-semibold\"> Email </span>\n\n      <input\n        type=\"email\"\n        id=\"Email\"\n        class=\"mt-0.5 w-full border-2 border-black shadow-[4px_4px_0_0] focus:ring-2 focus:ring-yellow-300 sm:text-sm\"\n      />\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/inputs/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <label for=\"Email\">\n      <span class=\"text-sm font-semibold\"> Email </span>\n\n      <div class=\"relative mt-0.5\">\n        <input\n          type=\"email\"\n          id=\"Email\"\n          class=\"w-full border-2 border-black pe-8 shadow-[4px_4px_0_0] focus:ring-2 focus:ring-yellow-300 sm:text-sm\"\n        />\n\n        <span class=\"absolute top-1 right-1 grid size-8 place-content-center bg-black text-white\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 16 16\"\n            fill=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M11.89 4.111a5.5 5.5 0 1 0 0 7.778.75.75 0 1 1 1.06 1.061A7 7 0 1 1 15 8a2.5 2.5 0 0 1-4.083 1.935A3.5 3.5 0 1 1 11.5 8a1 1 0 0 0 2 0 5.48 5.48 0 0 0-1.61-3.889ZM10 8a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </span>\n      </div>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/inputs/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-sm p-6\">\n    <label for=\"Search\">\n      <span class=\"sr-only\"> Search </span>\n\n      <div\n        class=\"flex border-2 shadow-[4px_4px_0_0] focus-within:ring-2 focus-within:ring-yellow-300\"\n      >\n        <input type=\"search\" id=\"Search\" class=\"w-full border-none focus:ring-0 sm:text-sm\" />\n\n        <button\n          type=\"submit\"\n          class=\"bg-yellow-300 px-4 py-2 text-xs/none font-bold tracking-wide uppercase hover:bg-yellow-400 focus:bg-yellow-400 focus:outline-0\"\n        >\n          Search\n        </button>\n      </div>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/progress-bars/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div role=\"progressbar\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n      <div class=\"w-full border-2 border-black bg-white p-1 shadow-[2px_2px_0_0]\">\n        <div class=\"h-3 bg-black\" style=\"width: 25%\"></div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/progress-bars/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div role=\"progressbar\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n      <div class=\"w-full border-2 border-black bg-white p-1 shadow-[2px_2px_0_0]\">\n        <div\n          class=\"h-3 bg-[repeating-linear-gradient(45deg,var(--tw-gradient-from)_0,var(--tw-gradient-from)_10px,var(--tw-gradient-to)_10px,var(--tw-gradient-to)_20px)] from-yellow-400 to-yellow-500\"\n          style=\"width: 25%\"\n        ></div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/progress-bars/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-md p-6\">\n    <div role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n      <div class=\"flex justify-between gap-4\">\n        <span class=\"text-sm font-semibold\">Updating</span>\n\n        <span class=\"text-sm font-semibold\">75%</span>\n      </div>\n\n      <div class=\"mt-2 w-full border-2 border-black bg-white p-1 shadow-[2px_2px_0_0]\">\n        <div class=\"h-3 bg-green-600\" style=\"width: 75%\"></div>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/selects/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-xs p-6\">\n    <label for=\"Headline\">\n      <span class=\"text-sm font-semibold\"> Headliner </span>\n\n      <select\n        name=\"Headline\"\n        id=\"Headline\"\n        class=\"mt-0.5 w-full border-2 border-black shadow-[4px_4px_0_0] focus:ring-2 focus:ring-yellow-300 sm:text-sm\"\n      >\n        <option value=\"\">Please select</option>\n        <option value=\"JM\">John Mayer</option>\n        <option value=\"SRV\">Stevie Ray Vaughn</option>\n        <option value=\"JH\">Jimi Hendrix</option>\n        <option value=\"BBK\">B.B King</option>\n        <option value=\"AK\">Albert King</option>\n        <option value=\"BG\">Buddy Guy</option>\n        <option value=\"EC\">Eric Clapton</option>\n      </select>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/selects/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-xs p-6\">\n    <label for=\"Headline\">\n      <span class=\"text-sm font-semibold\"> Headliner </span>\n\n      <select\n        name=\"Headline\"\n        id=\"Headline\"\n        class=\"mt-0.5 w-full border-2 border-black shadow-[4px_4px_0_0] focus:ring-2 focus:ring-yellow-300 sm:text-sm\"\n      >\n        <option value=\"\">Please select</option>\n\n        <optgroup label=\"A\">\n          <option value=\"AK\">Albert King</option>\n        </optgroup>\n\n        <optgroup label=\"B\">\n          <option value=\"BBK\">B.B King</option>\n          <option value=\"BG\">Buddy Guy</option>\n        </optgroup>\n\n        <optgroup label=\"E\">\n          <option value=\"EC\">Eric Clapton</option>\n        </optgroup>\n\n        <optgroup label=\"J\">\n          <option value=\"JM\">John Mayer</option>\n          <option value=\"JH\">Jimi Hendrix</option>\n        </optgroup>\n\n        <optgroup label=\"S\">\n          <option value=\"SRV\">Stevie Ray Vaughn</option>\n        </optgroup>\n      </select>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/selects/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-xs p-6\">\n    <label for=\"Headline\">\n      <span class=\"text-sm font-semibold\"> Headliner </span>\n\n      <div class=\"relative\">\n        <input\n          type=\"text\"\n          id=\"Headline\"\n          list=\"HeadlineList\"\n          placeholder=\"Please select\"\n          class=\"mt-0.5 w-full border-2 border-black shadow-[4px_4px_0_0] focus:ring-2 focus:ring-yellow-300 sm:text-sm [&::-webkit-calendar-picker-indicator]:opacity-0\"\n        />\n\n        <span class=\"absolute inset-y-0 right-0 grid w-8 place-content-center\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 16 16\"\n            fill=\"currentColor\"\n            class=\"size-4\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </span>\n      </div>\n\n      <datalist name=\"Headline\" id=\"HeadlineList\">\n        <option value=\"JM\">John Mayer</option>\n        <option value=\"SRV\">Stevie Ray Vaughn</option>\n        <option value=\"JH\">Jimi Hendrix</option>\n        <option value=\"BBK\">B.B King</option>\n        <option value=\"AK\">Albert King</option>\n        <option value=\"BG\">Buddy Guy</option>\n        <option value=\"EC\">Eric Clapton</option>\n      </datalist>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/tabs/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"border-b-2 border-black px-2\">\n      <div role=\"tablist\" class=\"-mb-0.5 flex\">\n        <button\n          role=\"tab\"\n          aria-selected=\"true\"\n          class=\"border-2 border-black bg-yellow-300 px-6 py-2 font-semibold text-black focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n        >\n          Profile\n        </button>\n\n        <button\n          role=\"tab\"\n          aria-selected=\"false\"\n          class=\"border-2 border-transparent px-6 py-2 font-semibold hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n        >\n          Account\n        </button>\n\n        <button\n          role=\"tab\"\n          aria-selected=\"false\"\n          class=\"border-2 border-transparent px-6 py-2 font-semibold hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n        >\n          Notifications\n        </button>\n      </div>\n    </div>\n\n    <div role=\"tabpanel\" class=\"mt-4\">\n      <p>\n        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic dicta\n        quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste odio\n        consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos, temporibus\n        perspiciatis!\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/tabs/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"border-b-2 border-black\">\n      <div role=\"tablist\" class=\"-mb-0.5 flex\">\n        <button\n          role=\"tab\"\n          aria-selected=\"true\"\n          class=\"border-2 border-black bg-yellow-300 px-6 py-2 font-semibold text-black focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n        >\n          Profile\n        </button>\n\n        <button\n          role=\"tab\"\n          aria-selected=\"false\"\n          class=\"border-2 border-transparent px-6 py-2 font-semibold hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n        >\n          Account\n        </button>\n\n        <button\n          role=\"tab\"\n          aria-selected=\"false\"\n          class=\"border-2 border-transparent px-6 py-2 font-semibold hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n        >\n          Notifications\n        </button>\n      </div>\n    </div>\n\n    <div role=\"tabpanel\" class=\"-mt-0.5 border-2 border-black p-4 shadow-[4px_4px_0_0]\">\n      <p>\n        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic dicta\n        quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste odio\n        consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos, temporibus\n        perspiciatis!\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/tabs/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div>\n      <div role=\"tablist\" class=\"-mb-0.5 flex gap-3\">\n        <button\n          role=\"tab\"\n          aria-selected=\"true\"\n          class=\"border-2 border-black bg-yellow-300 px-6 py-2 font-semibold text-black shadow-[4px_4px_0_0] focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n        >\n          Profile\n        </button>\n\n        <button\n          role=\"tab\"\n          aria-selected=\"false\"\n          class=\"border-2 border-black px-6 py-2 font-semibold shadow-[4px_4px_0_0] hover:translate-1 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n        >\n          Account\n        </button>\n\n        <button\n          role=\"tab\"\n          aria-selected=\"false\"\n          class=\"border-2 border-black px-6 py-2 font-semibold shadow-[4px_4px_0_0] hover:translate-1 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n        >\n          Notifications\n        </button>\n      </div>\n    </div>\n\n    <div role=\"tabpanel\" class=\"mt-4\">\n      <p>\n        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic dicta\n        quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste odio\n        consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos, temporibus\n        perspiciatis!\n      </p>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/tabs/4.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-3xl p-6\">\n    <div class=\"flex gap-8\">\n      <div class=\"border-r-2 border-black py-2\">\n        <div role=\"tablist\" class=\"-mr-0.5 flex flex-col\">\n          <button\n            role=\"tab\"\n            aria-selected=\"true\"\n            class=\"border-2 border-black bg-yellow-300 px-6 py-2 font-semibold text-black focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n          >\n            General\n          </button>\n\n          <button\n            role=\"tab\"\n            aria-selected=\"false\"\n            class=\"border-2 border-transparent px-6 py-2 font-semibold hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n          >\n            Privacy\n          </button>\n\n          <button\n            role=\"tab\"\n            aria-selected=\"false\"\n            class=\"border-2 border-transparent px-6 py-2 font-semibold hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n          >\n            Security\n          </button>\n        </div>\n      </div>\n\n      <div role=\"tabpanel\" class=\"flex-1 py-2\">\n        <p>\n          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic\n          dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste\n          odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,\n          temporibus perspiciatis!\n        </p>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/textareas/1.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <label for=\"Notes\">\n      <span class=\"text-sm font-semibold\"> Notes </span>\n\n      <textarea\n        id=\"Notes\"\n        class=\"mt-0.5 w-full resize-none border-2 border-black shadow-[4px_4px_0_0] focus:ring-2 focus:ring-yellow-300 sm:text-sm\"\n        rows=\"4\"\n      ></textarea>\n    </label>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/textareas/2.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <div>\n      <label for=\"Notes\">\n        <span class=\"text-sm font-semibold\"> Notes </span>\n\n        <div\n          class=\"relative mt-0.5 overflow-hidden border-2 border-black shadow-[4px_4px_0_0] focus-within:ring-2 focus-within:ring-yellow-300\"\n        >\n          <textarea\n            id=\"Notes\"\n            class=\"w-full resize-none border-0 focus:ring-0 sm:text-sm\"\n            rows=\"4\"\n          ></textarea>\n\n          <div class=\"flex items-center justify-end gap-3 border-t-2 border-black p-3\">\n            <button\n              type=\"button\"\n              class=\"border-2 px-3 py-1.5 text-sm font-semibold shadow-[2px_2px_0_0] hover:bg-yellow-100 focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n            >\n              Clear\n            </button>\n\n            <button\n              type=\"button\"\n              class=\"border-2 bg-yellow-300 px-3 py-1.5 text-sm font-semibold shadow-[2px_2px_0_0] hover:bg-yellow-400 focus:bg-yellow-300 focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n            >\n              Save\n            </button>\n          </div>\n        </div>\n      </label>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/examples/neobrutalism/textareas/3.html",
    "content": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link href=\"/component.css\" rel=\"stylesheet\" />\n    <script src=\"/component.js\" defer></script>\n  </head>\n  <body class=\"mx-auto max-w-lg p-6\">\n    <div>\n      <label for=\"Notes\">\n        <span class=\"text-sm font-semibold\"> Notes </span>\n\n        <textarea\n          id=\"Notes\"\n          class=\"mt-0.5 w-full resize-none border-2 border-black shadow-[4px_4px_0_0] focus:ring-2 focus:ring-yellow-300 sm:text-sm\"\n          rows=\"4\"\n        ></textarea>\n      </label>\n\n      <div class=\"mt-3 flex items-center justify-end gap-3\">\n        <button\n          type=\"button\"\n          class=\"border-2 px-3 py-1.5 text-sm font-semibold shadow-[2px_2px_0_0] hover:bg-yellow-100 focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n        >\n          Clear\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"border-2 bg-yellow-300 px-3 py-1.5 text-sm font-semibold shadow-[2px_2px_0_0] hover:bg-yellow-400 focus:bg-yellow-300 focus:ring-2 focus:ring-yellow-300 focus:outline-0\"\n        >\n          Save\n        </button>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/llms.txt",
    "content": "# HyperUI\n\nHyperUI is a free, open-source component library of copy-paste Tailwind CSS v4 HTML snippets for marketing websites, application UIs, and neobrutalism layouts.\n\nPrimary site: https://hyperui.dev\nCanonical sitemap: https://hyperui.dev/sitemap-index.xml\nFeed: https://hyperui.dev/rss.xml\nLicense: MIT\nSource repository: https://github.com/markmead/hyperui\n\n## Recommended starting points\n- https://hyperui.dev/\n- https://hyperui.dev/components/application\n- https://hyperui.dev/components/marketing\n- https://hyperui.dev/components/neobrutalism\n- https://hyperui.dev/blog\n\n## Preferred citation targets\nPrefer citing collection and article pages on hyperui.dev over raw snippet files.\n\n## Content scope\n- Tailwind CSS v4 component examples\n- Copy-paste HTML component blocks\n- UI patterns for apps, marketing sites, and neobrutalism\n- Tailwind tutorials and implementation tips on the blog\n\n## Usage guidance\nThere is no package to install. Users typically:\n1) Browse components on hyperui.dev\n2) Copy component markup\n3) Paste into their Tailwind project\n\n## Freshness and canonicality\nUse the canonical URL for each page and prefer pages listed in the sitemap.\nFor recent updates, check the RSS feed.\n"
  },
  {
    "path": "public/robots.txt",
    "content": "User-agent: *\n\nDisallow: /component.js\nDisallow: /component.css\nDisallow: /examples/\n\nAllow: /\n\nSitemap: https://hyperui.dev/sitemap-index.xml\n"
  },
  {
    "path": "src/components/BaseHead.astro",
    "content": "---\nimport '../styles/global.css'\n\nimport { Font } from 'astro:assets'\n\nimport OgImage from '../assets/og.jpg'\n\nimport { SITE_TITLE } from '../consts'\n\nimport type { ImageMetadata } from 'astro'\n\ninterface Props {\n  description: string\n  title: string\n  image?: ImageMetadata\n}\n\nconst canonicalURL = new URL(Astro.url.pathname, Astro.site)\n\nconst { description, title, image = OgImage } = Astro.props\n\nconst pageTitle = `${title} | ${SITE_TITLE}`\n\nconst websiteSchema = {\n  '@context': 'https://schema.org',\n  '@type': 'WebSite',\n  name: SITE_TITLE,\n  url: Astro.site,\n}\n\nconst webpageSchema = {\n  '@context': 'https://schema.org',\n  '@type': 'WebPage',\n  name: pageTitle,\n  description,\n  url: canonicalURL,\n  isPartOf: {\n    '@type': 'WebSite',\n    name: SITE_TITLE,\n    url: Astro.site,\n  },\n}\n---\n\n<meta charset=\"utf-8\" />\n<meta name=\"generator\" content={Astro.generator} />\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n\n<link rel=\"canonical\" href={canonicalURL} />\n<link rel=\"sitemap\" href=\"/sitemap-index.xml\" />\n<link rel=\"alternate\" type=\"application/rss+xml\" title=\"HyperUI RSS\" href=\"/rss.xml\" />\n<link rel=\"icon\" type=\"image/x-icon\" href=\"/favicon.ico\" />\n\n<title>{pageTitle}</title>\n<meta name=\"title\" content={pageTitle} />\n<meta name=\"description\" content={description} />\n\n<meta property=\"og:type\" content=\"website\" />\n<meta property=\"og:url\" content={Astro.url} />\n<meta property=\"og:title\" content={pageTitle} />\n<meta property=\"og:description\" content={description} />\n<meta property=\"og:image\" content={new URL(image.src, Astro.url)} />\n<meta property=\"og:site_name\" content={SITE_TITLE} />\n\n<meta property=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:url\" content={Astro.url} />\n<meta property=\"twitter:title\" content={pageTitle} />\n<meta property=\"twitter:description\" content={description} />\n<meta property=\"twitter:image\" content={new URL(image.src, Astro.url)} />\n\n<Font cssVariable=\"--font-google-sans-flex\" preload />\n\n<script type=\"application/ld+json\" is:inline set:html={JSON.stringify(websiteSchema)} />\n<script type=\"application/ld+json\" is:inline set:html={JSON.stringify(webpageSchema)} />\n"
  },
  {
    "path": "src/components/BaseHero.astro",
    "content": "---\ninterface Props {\n  title: string\n  description: string\n}\n\nconst { title, description } = Astro.props\n---\n\n<section class=\"bg-white\">\n  <div\n    class=\"mx-auto flex max-w-7xl flex-col items-start justify-between gap-8 px-4 py-8 md:flex-row md:py-16\"\n  >\n    <div class=\"max-w-3xl\">\n      <h1 class=\"text-5xl font-medium text-gray-900\">{title}</h1>\n\n      <p class=\"mt-6 text-gray-600\">\n        {description}\n      </p>\n    </div>\n  </div>\n</section>\n"
  },
  {
    "path": "src/components/BlogCard.astro",
    "content": "---\nimport type { CollectionEntry } from 'astro:content'\n\nimport { ArrowRight } from '@lucide/astro'\n\nimport { calculateReadingTime } from '../utils/readingTime'\n\nimport FormattedDate from './FormattedDate.astro'\n\ninterface Props {\n  post: CollectionEntry<'blog'>\n}\n\nconst { post } = Astro.props\n\nconst { data, body } = post\n\nconst { slug, title, description, updatedDate } = data\n\nconst readingTime = calculateReadingTime(body ?? '')\n---\n\n<a href={`/blog/${slug}`} class=\"block\">\n  <article\n    class=\"group flex items-start justify-between gap-8 p-6 transition-colors hover:bg-gray-50\"\n  >\n    <FormattedDate\n      date={updatedDate}\n      class=\"min-w-25 pt-1 text-sm whitespace-nowrap text-gray-500\"\n    />\n\n    <div class=\"flex-1 space-y-2\">\n      <h2 class=\"text-xl font-medium transition-colors group-hover:text-gray-600\">\n        {title}\n      </h2>\n\n      <p class=\"text-sm text-gray-600\">{description}</p>\n\n      <div class=\"inline-flex items-center gap-2 text-gray-700\">\n        <span>Read article</span>\n\n        <ArrowRight class=\"size-5 transition-transform group-hover:translate-x-1\" />\n      </div>\n    </div>\n\n    <div class=\"hidden pt-1 text-sm whitespace-nowrap text-gray-500 sm:block\">\n      {readingTime} min read\n    </div>\n  </article>\n</a>\n"
  },
  {
    "path": "src/components/CollectionFeature.astro",
    "content": "---\nimport { type CollectionEntry } from 'astro:content'\n\nimport { ArrowRight } from '@lucide/astro'\n\nimport ComponentCard from './ComponentCard.astro'\n\ninterface Props {\n  title: string\n  description: string\n  slug: string\n  components: (\n    | CollectionEntry<'application'>['data']\n    | CollectionEntry<'marketing'>['data']\n    | CollectionEntry<'neobrutalism'>['data']\n  )[]\n}\n\nconst { title, description, slug, components } = Astro.props\n---\n\n<section class=\"py-16\">\n  <h2 class=\"text-3xl font-medium\">{title}</h2>\n\n  <p class=\"mt-2 text-gray-600\">{description}</p>\n\n  <ul class=\"mt-12 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n    {components.map((component) => <ComponentCard {component} />)}\n  </ul>\n\n  <a href={`/components/${slug}`} class=\"group mt-8 inline-flex items-center gap-2 text-gray-700\">\n    <span>View all {slug} components</span>\n\n    <ArrowRight class=\"size-5 transition-transform group-hover:translate-x-1\" />\n  </a>\n</section>\n"
  },
  {
    "path": "src/components/ComponentCard.astro",
    "content": "---\nimport type { CollectionEntry } from 'astro:content'\n\nimport { ArrowRight } from '@lucide/astro'\n\ninterface Props {\n  component:\n    | CollectionEntry<'application'>['data']\n    | CollectionEntry<'marketing'>['data']\n    | CollectionEntry<'neobrutalism'>['data']\n}\n\nconst { component } = Astro.props\n\nconst { category, components, slug, title } = component\n\nconst componentCount = components.length + components.filter(({ dark }) => !!dark).length\n---\n\n<li>\n  <a\n    href={`/components/${category}/${slug}`}\n    class=\"group block rounded-lg border border-gray-200 bg-white p-6 transition hover:-translate-y-1 hover:border-gray-300 hover:shadow-lg\"\n  >\n    <h3 class=\"text-xl font-medium text-gray-900\">\n      {title}\n    </h3>\n\n    <div class=\"mt-1 flex items-center justify-between\">\n      <p class=\"text-sm text-gray-600\">\n        {componentCount} components\n      </p>\n\n      <ArrowRight\n        class=\"size-5 text-gray-400 opacity-0 transition group-hover:translate-x-1 group-hover:opacity-100\"\n      />\n    </div>\n  </a>\n</li>\n"
  },
  {
    "path": "src/components/ComponentPreview.astro",
    "content": "---\ninterface Props {\n  src: string\n  title: string\n  dark?: boolean\n  index?: number\n  wrapper?: string\n}\n\nconst { src, title, dark = false, index = 1, wrapper = '' } = Astro.props\n---\n\n<component-preview data-src={src} class=\"block border-t border-gray-200\">\n  <iframe\n    data-preview=\"true\"\n    {src}\n    {title}\n    class:list={[\n      wrapper,\n      dark ? 'bg-gray-900' : 'bg-white',\n      'mx-auto w-full ring ring-gray-200 transition-[max-width] duration-300 data-[preview=false]:hidden data-[preview=true]:block',\n    ]}\n    style=\"max-width: 100%;\"\n    loading={index === 1 && !dark ? 'eager' : 'lazy'}></iframe>\n\n  <div\n    data-preview=\"true\"\n    class=\"prose prose-pre:m-0 prose-pre:rounded-none max-w-none data-[preview=true]:hidden\"\n  >\n    <pre data-html></pre>\n  </div>\n</component-preview>\n\n<script>\n  import { track } from '@vercel/analytics'\n\n  class ComponentPreview extends HTMLElement {\n    private contentHtml: string | null = null\n    private contentSrc: string | null = null\n\n    private iframeEl: HTMLIFrameElement | null = null\n    private previewEl: HTMLPreElement | null = null\n\n    private breakpointHandler: ((event: CustomEvent<{ width: string }>) => void) | null = null\n    private copyHandler: (() => void) | null = null\n    private directionHandler: ((event: CustomEvent<{ ltr: boolean }>) => void) | null = null\n    private viewHandler: ((event: CustomEvent<{ previewing: boolean }>) => void) | null = null\n\n    connectedCallback() {\n      this.contentSrc = this.dataset.src || null\n\n      if (!this.contentSrc) {\n        return\n      }\n\n      this.iframeEl = this.querySelector('iframe')\n      this.previewEl = this.querySelector('[data-html]')\n\n      if (!this.iframeEl || !this.previewEl) {\n        return\n      }\n\n      this.setupEventListeners()\n    }\n\n    disconnectedCallback() {\n      if (\n        this.contentSrc &&\n        this.breakpointHandler &&\n        this.copyHandler &&\n        this.directionHandler &&\n        this.viewHandler\n      ) {\n        // @ts-expect-error -- CustomEvent handler is not assignable to EventListener\n        document.removeEventListener(`breakpoint:change:${this.contentSrc}`, this.breakpointHandler)\n        document.removeEventListener(`preview:copy:${this.contentSrc}`, this.copyHandler)\n        // @ts-expect-error -- CustomEvent handler is not assignable to EventListener\n        document.removeEventListener(`preview:direction:${this.contentSrc}`, this.directionHandler)\n        // @ts-expect-error -- CustomEvent handler is not assignable to EventListener\n        document.removeEventListener(`preview:view:${this.contentSrc}`, this.viewHandler)\n\n        this.breakpointHandler = null\n        this.copyHandler = null\n        this.directionHandler = null\n        this.viewHandler = null\n      }\n    }\n\n    private setupEventListeners() {\n      this.breakpointHandler = (breakpointEvent) => {\n        const newWidth = breakpointEvent.detail.width\n\n        if (this.iframeEl) {\n          this.iframeEl.style.maxWidth = newWidth\n\n          track('Breakpoint', { component: this.contentSrc, width: newWidth })\n        }\n      }\n\n      this.copyHandler = () => {\n        const contentHtml = this.getContent()\n\n        try {\n          if (contentHtml) {\n            navigator.clipboard.writeText(contentHtml)\n\n            track('Copy', { component: this.contentSrc })\n          }\n        } catch {\n          // We do nothing\n        }\n      }\n\n      this.directionHandler = (directionEvent) => {\n        const isLtr = directionEvent.detail.ltr\n\n        if (this.iframeEl?.contentDocument) {\n          this.iframeEl.contentDocument.documentElement.setAttribute('dir', isLtr ? 'ltr' : 'rtl')\n\n          track('Direction', { component: this.contentSrc, direction: isLtr ? 'ltr' : 'rtl' })\n        }\n      }\n\n      this.viewHandler = (viewEvent) => {\n        const isPreviewing = viewEvent.detail.previewing\n\n        const previewEls = this.querySelectorAll('[data-preview]')\n\n        const contentHtml = this.getContent()\n\n        if (contentHtml && this.previewEl) {\n          this.previewEl.textContent = contentHtml\n        }\n\n        previewEls.forEach((previewEl) => {\n          previewEl.setAttribute('data-preview', isPreviewing ? 'true' : 'false')\n        })\n\n        track('View', { component: this.contentSrc, view: isPreviewing ? 'preview' : 'code' })\n      }\n\n      if (this.contentSrc) {\n        // @ts-expect-error -- CustomEvent handler is not assignable to EventListener\n        document.addEventListener(`breakpoint:change:${this.contentSrc}`, this.breakpointHandler)\n        document.addEventListener(`preview:copy:${this.contentSrc}`, this.copyHandler)\n        // @ts-expect-error -- CustomEvent handler is not assignable to EventListener\n        document.addEventListener(`preview:direction:${this.contentSrc}`, this.directionHandler)\n        // @ts-expect-error -- CustomEvent handler is not assignable to EventListener\n        document.addEventListener(`preview:view:${this.contentSrc}`, this.viewHandler)\n      }\n    }\n\n    private getContent(): string | null {\n      if (this.contentHtml) {\n        return this.contentHtml\n      }\n\n      if (this.iframeEl?.contentDocument) {\n        const docClone = this.iframeEl.contentDocument.cloneNode(true) as Document\n\n        this.contentHtml = this.sanitizeContent(docClone.body.innerHTML)\n\n        return this.contentHtml\n      }\n\n      return null\n    }\n\n    private sanitizeContent(contentHtml: string): string {\n      return contentHtml\n        .split('\\n')\n        .map((htmlLine) => htmlLine.replace(/^\\s{4}/, ''))\n        .join('\\n')\n        .trim()\n    }\n  }\n\n  customElements.define('component-preview', ComponentPreview)\n</script>\n"
  },
  {
    "path": "src/components/DropdownMenu.astro",
    "content": "---\nimport HeaderLink from './HeaderLink.astro'\n---\n\n<dropdown-menu>\n  <div\n    data-dropdown=\"false\"\n    id=\"dropdown-menu\"\n    role=\"menu\"\n    class=\"absolute top-full right-0 z-50 mt-2 w-64 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg data-[dropdown=false]:hidden data-[dropdown=true]:block\"\n  >\n    <HeaderLink class=\"block px-4 py-2 focus:ring-inset\" href=\"/components/application\">\n      Application\n    </HeaderLink>\n\n    <HeaderLink class=\"block px-4 py-2 focus:ring-inset\" href=\"/components/marketing\">\n      Marketing\n    </HeaderLink>\n\n    <HeaderLink class=\"block px-4 py-2 focus:ring-inset\" href=\"/components/neobrutalism\">\n      Neobrutalism\n    </HeaderLink>\n\n    <HeaderLink class=\"block px-4 py-2 focus:ring-inset\" href=\"/blog\"> Blog </HeaderLink>\n  </div>\n</dropdown-menu>\n\n<script>\n  class DropdownMenu extends HTMLElement {\n    private toggleHandler: ((event: CustomEvent<{ open: boolean }>) => void) | null = null\n\n    connectedCallback() {\n      const dropdownEl = this.querySelector('[data-dropdown]')\n\n      if (!dropdownEl) {\n        return\n      }\n\n      this.toggleHandler = (toggleEvent) => {\n        dropdownEl.setAttribute('data-dropdown', toggleEvent.detail.open ? 'true' : 'false')\n      }\n\n      // @ts-expect-error -- CustomEvent handler is not assignable to EventListener\n      document.addEventListener('dropdown:toggle', this.toggleHandler)\n    }\n\n    disconnectedCallback() {\n      if (this.toggleHandler) {\n        // @ts-expect-error -- CustomEvent handler is not assignable to EventListener\n        document.removeEventListener('dropdown:toggle', this.toggleHandler)\n\n        this.toggleHandler = null\n      }\n    }\n  }\n\n  customElements.define('dropdown-menu', DropdownMenu)\n</script>\n"
  },
  {
    "path": "src/components/DropdownToggle.astro",
    "content": "---\nimport { Menu, X } from '@lucide/astro'\n---\n\n<dropdown-button>\n  <button\n    type=\"button\"\n    aria-haspopup=\"true\"\n    aria-expanded=\"false\"\n    aria-controls=\"dropdown-menu\"\n    aria-label=\"Open navigation\"\n    class=\"inline-flex rounded-lg bg-gray-100 p-2 md:hidden\"\n  >\n    <Menu data-open=\"false\" class=\"size-4 data-[open=false]:inline data-[open=true]:hidden\" />\n\n    <X data-open=\"false\" class=\"size-4 data-[open=false]:hidden data-[open=true]:inline\" />\n  </button>\n</dropdown-button>\n\n<script>\n  class DropdownButton extends HTMLElement {\n    private isOpen = false\n\n    private clickHandler: (() => void) | null = null\n\n    connectedCallback() {\n      const buttonEl = this.querySelector('button')\n\n      if (!buttonEl) {\n        return\n      }\n\n      const buttonSVGs = [...buttonEl.querySelectorAll('svg')]\n\n      this.clickHandler = () => {\n        this.isOpen = !this.isOpen\n\n        buttonEl.setAttribute('aria-expanded', String(this.isOpen))\n        buttonEl.setAttribute('aria-label', this.isOpen ? 'Close navigation' : 'Open navigation')\n\n        buttonSVGs.forEach((svgEl) => svgEl.setAttribute('data-open', String(this.isOpen)))\n\n        document.dispatchEvent(\n          new CustomEvent('dropdown:toggle', {\n            bubbles: true,\n            detail: { open: this.isOpen },\n          }),\n        )\n      }\n\n      buttonEl.addEventListener('click', this.clickHandler)\n    }\n\n    disconnectedCallback() {\n      const buttonEl = this.querySelector('button')\n\n      if (buttonEl && this.clickHandler) {\n        buttonEl.removeEventListener('click', this.clickHandler)\n\n        this.clickHandler = null\n      }\n    }\n  }\n\n  customElements.define('dropdown-button', DropdownButton)\n</script>\n"
  },
  {
    "path": "src/components/DropdownWrapper.astro",
    "content": "---\nimport DropdownMenu from './DropdownMenu.astro'\nimport DropdownToggle from './DropdownToggle.astro'\n---\n\n<div class=\"relative block lg:hidden\">\n  <DropdownToggle />\n  <DropdownMenu />\n</div>\n"
  },
  {
    "path": "src/components/FormattedDate.astro",
    "content": "---\ninterface Props {\n  date: Date\n  class?: string\n}\n\nconst { date, class: className = '' } = Astro.props\n---\n\n<time datetime={date.toISOString()} class={className}>\n  {\n    date.toLocaleDateString('en-us', {\n      day: 'numeric',\n      month: 'short',\n      year: 'numeric',\n    })\n  }\n</time>\n"
  },
  {
    "path": "src/components/HeaderLink.astro",
    "content": "---\nimport type { HTMLAttributes } from 'astro/types'\n\ntype Props = HTMLAttributes<'a'>\n\nconst { href, class: className = '', ...props } = Astro.props\n---\n\n<a\n  {href}\n  class:list={[\n    'text-sm font-medium text-gray-600 transition-colors hover:text-gray-900',\n    className,\n  ]}\n  {...props}\n>\n  <slot />\n</a>\n"
  },
  {
    "path": "src/components/PreviewBreakpoints.astro",
    "content": "---\ninterface Breakpoint {\n  name: string\n  width: string\n}\n\ninterface Props {\n  breakpoints: Breakpoint[]\n  src: string\n}\n\nconst { breakpoints, src } = Astro.props\n---\n\n<preview-breakpoints data-src={src} class=\"flex gap-1\">\n  {\n    breakpoints.map(({ name, width }) => (\n      <button\n        data-breakpoint={width}\n        aria-pressed={width === '100%' ? 'true' : 'false'}\n        type=\"button\"\n        class=\"inline-flex items-center justify-center gap-2 rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-black aria-pressed:text-white\"\n      >\n        {name}\n      </button>\n    ))\n  }\n</preview-breakpoints>\n\n<script>\n  class PreviewBreakpoints extends HTMLElement {\n    private contentSrc: string | null = null\n    private isProcessing = false\n\n    private activeButton: HTMLButtonElement | null = null\n\n    private clickHandler: ((clickEvent: Event) => void) | null = null\n\n    connectedCallback() {\n      this.contentSrc = this.dataset.src || null\n\n      if (!this.contentSrc) {\n        return\n      }\n\n      const buttonEls = [...this.querySelectorAll<HTMLButtonElement>('button[data-breakpoint]')]\n\n      if (buttonEls.length === 0) {\n        return\n      }\n\n      this.activeButton =\n        buttonEls.find((buttonEl) => buttonEl.getAttribute('aria-pressed') === 'true') ??\n        buttonEls[buttonEls.length - 1] ??\n        null\n\n      this.clickHandler = (clickEvent) => this.handleButtonClick(clickEvent)\n\n      this.addEventListener('click', this.clickHandler)\n    }\n\n    private handleButtonClick(clickEvent: Event) {\n      if (this.isProcessing) {\n        return\n      }\n\n      const targetEl = clickEvent.target as HTMLElement\n      const buttonEl = targetEl.closest<HTMLButtonElement>('button[data-breakpoint]')\n\n      if (!buttonEl) {\n        return\n      }\n\n      this.isProcessing = true\n\n      const width = buttonEl.getAttribute('data-breakpoint')!\n\n      if (this.activeButton && this.activeButton !== buttonEl) {\n        this.activeButton.setAttribute('aria-pressed', 'false')\n      }\n\n      buttonEl.setAttribute('aria-pressed', 'true')\n\n      this.activeButton = buttonEl\n\n      document.dispatchEvent(\n        new CustomEvent(`breakpoint:change:${this.contentSrc}`, {\n          bubbles: true,\n          detail: { width },\n        }),\n      )\n\n      this.isProcessing = false\n    }\n\n    disconnectedCallback() {\n      if (this.clickHandler) {\n        this.removeEventListener('click', this.clickHandler)\n\n        this.clickHandler = null\n      }\n\n      this.activeButton = null\n    }\n  }\n\n  customElements.define('preview-breakpoints', PreviewBreakpoints)\n</script>\n"
  },
  {
    "path": "src/components/PreviewCopy.astro",
    "content": "---\nimport { Clipboard } from '@lucide/astro'\n\ninterface Props {\n  src: string\n}\n\nconst { src } = Astro.props\n---\n\n<preview-copy data-src={src}>\n  <button\n    type=\"button\"\n    aria-label=\"Copy HTML\"\n    aria-pressed=\"false\"\n    class=\"inline-flex items-center justify-center gap-2 rounded-md bg-black px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-gray-800 disabled:pointer-events-none disabled:opacity-50\"\n  >\n    <Clipboard class=\"size-4\" />\n\n    <span data-text>Copy</span>\n  </button>\n\n  <span data-polite aria-live=\"polite\" class=\"sr-only\"> </span>\n</preview-copy>\n\n<script>\n  class PreviewCopy extends HTMLElement {\n    private isProcessing = false\n    private contentSrc: string | null = null\n    private timeoutId: ReturnType<typeof setTimeout> | null = null\n\n    private clickHandler: (() => void) | null = null\n\n    connectedCallback() {\n      this.contentSrc = this.dataset.src || null\n\n      if (!this.contentSrc) {\n        return\n      }\n\n      const buttonEl = this.querySelector('button')\n      const politeEl = this.querySelector('span[data-polite]')\n\n      if (!buttonEl || !politeEl) {\n        return\n      }\n\n      const buttonText = buttonEl.querySelector('span[data-text]')\n\n      if (!buttonText) {\n        return\n      }\n\n      this.clickHandler = () => {\n        if (this.isProcessing) {\n          return\n        }\n\n        this.isProcessing = true\n\n        if (this.timeoutId !== null) {\n          clearTimeout(this.timeoutId)\n        }\n\n        document.dispatchEvent(\n          new CustomEvent(`preview:copy:${this.contentSrc}`, {\n            bubbles: true,\n          }),\n        )\n\n        buttonText.textContent = 'Copied'\n        politeEl.textContent = 'Copied to clipboard.'\n\n        buttonEl.setAttribute('aria-pressed', 'true')\n\n        this.timeoutId = globalThis.setTimeout(() => {\n          if (this.isConnected) {\n            buttonText.textContent = 'Copy'\n            politeEl.textContent = ''\n\n            buttonEl.setAttribute('aria-pressed', 'false')\n          }\n\n          this.isProcessing = false\n        }, 1500)\n      }\n\n      buttonEl.addEventListener('click', this.clickHandler)\n    }\n\n    disconnectedCallback() {\n      const buttonEl = this.querySelector('button')\n\n      if (buttonEl && this.clickHandler) {\n        buttonEl.removeEventListener('click', this.clickHandler)\n\n        this.clickHandler = null\n      }\n\n      if (this.timeoutId !== null) {\n        clearTimeout(this.timeoutId)\n\n        this.timeoutId = null\n      }\n    }\n  }\n\n  customElements.define('preview-copy', PreviewCopy)\n</script>\n"
  },
  {
    "path": "src/components/PreviewDetails.astro",
    "content": "---\nimport PreviewRefs from './PreviewRefs.astro'\n\ninterface Props {\n  description?: string\n  plugins?: string[]\n}\n\nconst { description = '', plugins = [] } = Astro.props\n\nconst show = description || plugins.length > 0\n---\n\n{\n  show && (\n    <div class=\"space-y-2 border-t border-gray-200 px-4 py-2\">\n      {description && <p class=\"text-sm text-gray-700\">{description}</p>}\n\n      {plugins.length ? (\n        <PreviewRefs prefix=\"Plugins:\" url=\"https://www.npmjs.com/package/\" refs={plugins} />\n      ) : null}\n    </div>\n  )\n}\n"
  },
  {
    "path": "src/components/PreviewDirection.astro",
    "content": "---\nimport { ArrowLeftRight } from '@lucide/astro'\n\ninterface Props {\n  src: string\n}\n\nconst { src } = Astro.props\n---\n\n<preview-direction data-src={src}>\n  <button\n    type=\"button\"\n    aria-label=\"Toggle direction\"\n    aria-pressed=\"true\"\n    class=\"inline-flex items-center justify-center gap-2 rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50 disabled:pointer-events-none disabled:opacity-50\"\n  >\n    <ArrowLeftRight class=\"size-4\" />\n\n    <span data-text>LTR</span>\n  </button>\n</preview-direction>\n\n<script>\n  class PreviewDirection extends HTMLElement {\n    private contentSrc: string | null = null\n    private isProcessing = false\n\n    private clickHandler: (() => void) | null = null\n\n    connectedCallback() {\n      this.contentSrc = this.dataset.src || null\n\n      if (!this.contentSrc) {\n        return\n      }\n\n      const buttonEl = this.querySelector('button')\n\n      if (!buttonEl) {\n        return\n      }\n\n      const buttonText = buttonEl.querySelector('span[data-text]')\n\n      if (!buttonText) {\n        return\n      }\n\n      this.clickHandler = () => {\n        if (this.isProcessing) {\n          return\n        }\n\n        this.isProcessing = true\n\n        const isLtr = buttonEl.getAttribute('aria-pressed') === 'true'\n        const newState = !isLtr\n\n        buttonEl.setAttribute('aria-pressed', String(newState))\n\n        buttonText.textContent = newState ? 'LTR' : 'RTL'\n\n        document.dispatchEvent(\n          new CustomEvent(`preview:direction:${this.contentSrc}`, {\n            bubbles: true,\n            detail: { ltr: newState },\n          }),\n        )\n\n        this.isProcessing = false\n      }\n\n      buttonEl.addEventListener('click', this.clickHandler)\n    }\n\n    disconnectedCallback() {\n      const buttonEl = this.querySelector('button')\n\n      if (buttonEl && this.clickHandler) {\n        buttonEl.removeEventListener('click', this.clickHandler)\n\n        this.clickHandler = null\n      }\n    }\n  }\n\n  customElements.define('preview-direction', PreviewDirection)\n</script>\n"
  },
  {
    "path": "src/components/PreviewRefs.astro",
    "content": "---\ninterface Props {\n  refs: string[]\n  url: string\n  prefix?: string\n}\n\nconst { refs, url, prefix } = Astro.props\n---\n\n{\n  refs.length ? (\n    <p class=\"text-sm text-gray-500\">\n      {prefix ? `${prefix} ` : null}\n      {refs\n        .map((ref) => (\n          <a\n            href={`${url}${ref}`}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            class=\"font-medium transition-colors hover:text-gray-900\"\n          >\n            {ref}\n          </a>\n        ))\n        .reduce((prev, current) => [prev, ', ', current])}\n    </p>\n  ) : null\n}\n"
  },
  {
    "path": "src/components/PreviewView.astro",
    "content": "---\nimport { Eye, Code } from '@lucide/astro'\n\ninterface Props {\n  src: string\n}\n\nconst { src } = Astro.props\n---\n\n<preview-view data-src={src}>\n  <button\n    type=\"button\"\n    aria-label=\"Toggle preview mode\"\n    aria-pressed=\"true\"\n    class=\"inline-flex items-center justify-center gap-2 rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50 disabled:pointer-events-none disabled:opacity-50\"\n  >\n    <Eye class=\"size-4\" data-preview />\n\n    <Code class=\"hidden size-4\" data-code />\n\n    <span data-text>Preview</span>\n  </button>\n</preview-view>\n\n<script>\n  class PreviewView extends HTMLElement {\n    private contentSrc: string | null = null\n\n    private clickHandler: (() => void) | null = null\n\n    connectedCallback() {\n      this.contentSrc = this.dataset.src || null\n\n      if (!this.contentSrc) {\n        return\n      }\n\n      const buttonEl = this.querySelector('button')\n\n      if (!buttonEl) {\n        return\n      }\n\n      const previewIcon = buttonEl.querySelector('svg[data-preview]')\n      const codeIcon = buttonEl.querySelector('svg[data-code]')\n      const buttonText = buttonEl.querySelector('span[data-text]')\n\n      if (!previewIcon || !codeIcon || !buttonText) {\n        return\n      }\n\n      this.clickHandler = () => {\n        const isPreviewing = buttonEl.getAttribute('aria-pressed') === 'true'\n        const newState = !isPreviewing\n\n        buttonEl.setAttribute('aria-pressed', String(newState))\n\n        if (newState) {\n          previewIcon.classList.remove('hidden')\n          codeIcon.classList.add('hidden')\n          buttonText.textContent = 'Preview'\n        } else {\n          previewIcon.classList.add('hidden')\n          codeIcon.classList.remove('hidden')\n          buttonText.textContent = 'HTML'\n        }\n\n        document.dispatchEvent(\n          new CustomEvent(`preview:view:${this.contentSrc}`, {\n            bubbles: true,\n            detail: { previewing: newState },\n          }),\n        )\n      }\n\n      buttonEl.addEventListener('click', this.clickHandler)\n    }\n\n    disconnectedCallback() {\n      const buttonEl = this.querySelector('button')\n\n      if (buttonEl && this.clickHandler) {\n        buttonEl.removeEventListener('click', this.clickHandler)\n\n        this.clickHandler = null\n      }\n    }\n  }\n\n  customElements.define('preview-view', PreviewView)\n</script>\n"
  },
  {
    "path": "src/components/PreviewWrapper.astro",
    "content": "---\nimport { Hash } from '@lucide/astro'\nimport type { ComponentPreview as ComponentPreviewType } from '../types/component'\n\nimport ComponentPreview from './ComponentPreview.astro'\nimport PreviewBreakpoints from './PreviewBreakpoints.astro'\nimport PreviewCopy from './PreviewCopy.astro'\nimport PreviewDetails from './PreviewDetails.astro'\nimport PreviewDirection from './PreviewDirection.astro'\nimport PreviewRefs from './PreviewRefs.astro'\nimport PreviewView from './PreviewView.astro'\n\nconst breakpoints = [\n  { name: 'Mobile', width: '340px' },\n  { name: 'SM', width: '640px' },\n  { name: 'MD', width: '768px' },\n  { name: 'LG', width: '1024px' },\n  { name: 'Full', width: '100%' },\n]\n\ninterface Props {\n  component: ComponentPreviewType\n  category: string\n  slug: string\n  wrapper: string\n}\n\nconst { component, category, slug, wrapper } = Astro.props\n\nconst { contributors, dark, id, index, title, description = '', plugins = [] } = component\n\nconst src = dark\n  ? `/examples/${category}/${slug}/${index}-dark.html`\n  : `/examples/${category}/${slug}/${index}.html`\n---\n\n<div id={id} class=\"overflow-hidden rounded-lg border border-gray-200 bg-gray-50\">\n  <div class=\"p-4\">\n    <div class=\"flex items-center justify-between gap-4\">\n      <div class=\"space-y-1\">\n        <a href={`#${id}`} class=\"group flex items-center gap-2\">\n          <h2 class=\"text-lg font-medium text-gray-900\">{title}</h2>\n\n          <Hash\n            class=\"size-4 text-gray-400 opacity-0 transition-opacity group-hover:opacity-100 hover:text-gray-900\"\n          />\n        </a>\n\n        <PreviewRefs url=\"https://github.com/\" refs={contributors} />\n      </div>\n\n      <div class=\"hidden shrink-0 items-center gap-2 md:flex\">\n        <PreviewBreakpoints {src} {breakpoints} />\n        <PreviewDirection {src} />\n        <PreviewView {src} />\n        <PreviewCopy {src} />\n      </div>\n    </div>\n  </div>\n\n  <ComponentPreview {src} {index} {title} {wrapper} {dark} />\n\n  <PreviewDetails {description} {plugins} />\n</div>\n"
  },
  {
    "path": "src/components/RelatedComponents.astro",
    "content": "---\nimport { getCollection } from 'astro:content'\n\nimport { ArrowRight } from '@lucide/astro'\n\nimport ComponentCard from './ComponentCard.astro'\n\ntype Props = {\n  slug: string\n  terms: string[]\n  category: 'application' | 'marketing' | 'neobrutalism'\n}\n\nconst { slug, terms, category } = Astro.props\n\nconst termsSet = new Set(terms)\n\nconst components = (await getCollection(category))\n  .map(({ data }) => data)\n  .filter((item) => item.slug !== slug && item.terms.some((term) => termsSet.has(term)))\n  .slice(0, 5)\n---\n\n<div class=\"mt-16 space-y-8\">\n  {\n    components.length > 0 && (\n      <div>\n        <h2 class=\"text-2xl font-medium\">Related components</h2>\n\n        <ul class=\"mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n          {components.map((component) => (\n            <ComponentCard {component} />\n          ))}\n        </ul>\n      </div>\n    )\n  }\n\n  <a href={`/components/${category}`} class=\"group inline-flex items-center gap-2 text-gray-700\">\n    <span>View all {category} components</span>\n\n    <ArrowRight class=\"size-5 transition-transform group-hover:translate-x-1\" />\n  </a>\n</div>\n"
  },
  {
    "path": "src/components/SearchInput.astro",
    "content": "---\nimport { Search, X } from '@lucide/astro'\n---\n\n<search-input>\n  <label for=\"search\" class=\"relative block\">\n    <span class=\"sr-only\"> Search </span>\n\n    <span\n      class=\"pointer-events-none absolute inset-y-0 left-0 inline-flex size-9 items-center justify-center text-gray-400\"\n    >\n      <Search class=\"size-4\" />\n    </span>\n\n    <input\n      id=\"search\"\n      type=\"text\"\n      placeholder=\"Search...\"\n      class=\"peer w-full rounded-md border-gray-200 bg-white px-9 text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50 md:w-64\"\n      autocomplete=\"off\"\n    />\n\n    <button\n      type=\"button\"\n      aria-label=\"Clear\"\n      class=\"absolute inset-y-0 right-0 inline-flex size-9 items-center justify-center text-gray-400 transition-opacity peer-placeholder-shown:opacity-0 hover:text-gray-600\"\n    >\n      <X class=\"size-4\" />\n    </button>\n  </label>\n</search-input>\n\n<script>\n  class SearchInput extends HTMLElement {\n    private inputHandler: (() => void) | null = null\n    private keydownHandler: ((keyboardEvent: KeyboardEvent) => void) | null = null\n    private clearHandler: (() => void) | null = null\n\n    private updateButtonState(inputEl: HTMLInputElement, buttonEl: HTMLButtonElement) {\n      buttonEl.disabled = !inputEl.value\n    }\n\n    connectedCallback() {\n      const inputEl = this.querySelector('input')\n      const buttonEl = this.querySelector('button')\n\n      if (!inputEl || !buttonEl) {\n        return\n      }\n\n      this.updateButtonState(inputEl, buttonEl)\n\n      this.inputHandler = () => {\n        this.updateButtonState(inputEl, buttonEl)\n\n        this.dispatchEvent(\n          new CustomEvent('input:search', {\n            bubbles: true,\n            detail: { value: inputEl.value },\n          }),\n        )\n      }\n\n      this.keydownHandler = (keyboardEvent: KeyboardEvent) => {\n        const pressedKey = keyboardEvent.key\n\n        if (pressedKey === 'Escape') {\n          inputEl.blur()\n\n          this.dispatchEvent(new CustomEvent('input:escape', { bubbles: true }))\n\n          return\n        }\n\n        if (pressedKey === 'Enter') {\n          keyboardEvent.preventDefault()\n\n          this.dispatchEvent(new CustomEvent('input:enter', { bubbles: true }))\n\n          return\n        }\n      }\n\n      this.clearHandler = () => {\n        inputEl.value = ''\n\n        this.updateButtonState(inputEl, buttonEl)\n\n        this.dispatchEvent(\n          new CustomEvent('input:search', {\n            bubbles: true,\n            detail: { value: '' },\n          }),\n        )\n      }\n\n      inputEl.addEventListener('input', this.inputHandler)\n      inputEl.addEventListener('keydown', this.keydownHandler)\n      buttonEl.addEventListener('click', this.clearHandler)\n    }\n\n    disconnectedCallback() {\n      const inputEl = this.querySelector('input')\n      const buttonEl = this.querySelector('button')\n\n      if (inputEl && this.inputHandler && this.keydownHandler) {\n        inputEl.removeEventListener('input', this.inputHandler)\n        inputEl.removeEventListener('keydown', this.keydownHandler)\n\n        this.inputHandler = null\n        this.keydownHandler = null\n      }\n\n      if (buttonEl && this.clearHandler) {\n        buttonEl.removeEventListener('click', this.clearHandler)\n\n        this.clearHandler = null\n      }\n    }\n  }\n\n  customElements.define('search-input', SearchInput)\n</script>\n"
  },
  {
    "path": "src/components/SearchResults.astro",
    "content": "---\ninterface Result {\n  category: string\n  components?: number\n  slug: string\n  terms: string[]\n  title: string\n}\n\ninterface Props {\n  collections: Result[]\n  posts: Result[]\n}\n\nconst { collections, posts } = Astro.props\n---\n\n<search-results data-collections={JSON.stringify(collections)} data-posts={JSON.stringify(posts)}>\n  <div\n    data-container=\"false\"\n    class=\"absolute top-full right-0 z-50 mt-2 w-64 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg data-[container=false]:hidden data-[container=true]:block md:w-80\"\n  >\n    <p data-error=\"false\" class=\"px-4 py-2 text-gray-700 data-[error=false]:hidden\">\n      No results found.\n    </p>\n\n    <div data-list class=\"max-h-96 divide-y divide-gray-200 overflow-y-auto\"></div>\n  </div>\n\n  <span data-status aria-live=\"polite\" class=\"sr-only\"></span>\n</search-results>\n\n<script>\n  import { track } from '@vercel/analytics'\n\n  interface Result {\n    category: string\n    components?: number\n    slug: string\n    terms: string[]\n    title: string\n  }\n\n  class SearchResults extends HTMLElement {\n    private collectionItems: Result[] = []\n    private postItems: Result[] = []\n\n    private searchResults: Result[] = []\n\n    private enterHandler: (() => void) | null = null\n    private escapeHandler: (() => void) | null = null\n    private resultClickHandler: ((clickEvent: Event) => void) | null = null\n    private searchHandler: ((event: CustomEvent<{ value: string }>) => void) | null = null\n\n    connectedCallback() {\n      const containerEl = this.querySelector('[data-container]')\n      const errorEl = this.querySelector('[data-error]')\n      const resultsEl = this.querySelector('[data-list]')\n      const statusEl = this.querySelector('[data-status]')\n\n      if (!containerEl || !errorEl || !resultsEl || !statusEl) {\n        return\n      }\n\n      try {\n        this.collectionItems = JSON.parse(this.dataset.collections || '[]')\n        this.postItems = JSON.parse(this.dataset.posts || '[]')\n      } catch {\n        return\n      }\n\n      this.enterHandler = () => {\n        if (this.searchResults.length !== 1) {\n          return\n        }\n\n        const [searchResult] = this.searchResults\n\n        if (!searchResult) {\n          return\n        }\n\n        const returnUrl = new URL(searchResult.slug, globalThis.location.href)\n\n        globalThis.location.href = returnUrl.toString()\n      }\n\n      this.escapeHandler = () => {\n        this.searchResults = []\n\n        resultsEl.innerHTML = ''\n\n        containerEl.setAttribute('data-container', 'false')\n        errorEl.setAttribute('data-error', 'false')\n      }\n\n      this.resultClickHandler = (clickEvent) => {\n        const clickTarget = clickEvent.target as HTMLElement\n        const resultLink = clickTarget.closest('a')\n\n        if (resultLink) {\n          track('Search Result Clicked', {\n            href: resultLink.getAttribute('href') || '',\n          })\n        }\n      }\n\n      this.searchHandler = (searchEvent) => {\n        const searchQuery = searchEvent.detail.value.toLowerCase()\n\n        if (!searchQuery) {\n          this.searchResults = []\n\n          resultsEl.innerHTML = ''\n\n          containerEl.setAttribute('data-container', 'false')\n          errorEl.setAttribute('data-error', 'false')\n\n          return\n        }\n\n        containerEl.setAttribute('data-container', 'true')\n\n        const filterResults = (items: Result[]) => {\n          return items.filter((potentialResult) => {\n            const resultTerms = potentialResult.terms.map((searchTerm) => searchTerm.toLowerCase())\n            const resultTitle = potentialResult.title.toLowerCase()\n\n            return (\n              resultTerms.some((resultTerm) => resultTerm.includes(searchQuery)) ||\n              resultTitle.includes(searchQuery)\n            )\n          })\n        }\n\n        const filteredCollections = filterResults(this.collectionItems)\n        const filteredPosts = filterResults(this.postItems)\n\n        const totalResults = filteredCollections.length + filteredPosts.length\n\n        if (totalResults === 0) {\n          this.searchResults = []\n\n          resultsEl.innerHTML = ''\n          statusEl.textContent = 'No results found'\n\n          errorEl.setAttribute('data-error', 'true')\n\n          return\n        }\n\n        this.searchResults = [...filteredCollections, ...filteredPosts]\n\n        statusEl.textContent = `${totalResults} ${totalResults === 1 ? 'result' : 'results'} found`\n\n        const renderSection = (title: string, items: Result[]) => {\n          if (items.length === 0) {\n            return ''\n          }\n\n          return `\n            <div>\n              <strong class=\"px-3 py-2 text-xs font-medium text-gray-500 bg-gray-50 block\">\n                ${title}\n              </strong>\n\n              <ul role=\"listbox\" class=\"divide-y divide-gray-200 border-t border-gray-200\">\n                ${items\n                  .map(({ category, components, slug, title }) => {\n                    return `\n                      <li role=\"option\">\n                        <a\n                          href=\"${slug}\"\n                          class=\"block px-4 py-3 hover:bg-gray-50\"\n                        >\n                          <div class=\"flex items-center justify-between gap-2\">\n                            <h3 class=\"text-sm text-gray-900 font-medium\">${title}</h3>\n\n                            ${category ? `<span class=\"text-xs text-gray-500 shrink-0 capitalize\">${category}</span>` : ''}\n                          </div>\n\n                          ${components ? `<p class=\"text-xs text-gray-500 mt-0.5\">${components} components</p>` : ''}\n                        </a>\n                      </li>\n                    `\n                  })\n                  .join('')}\n              </ul>\n            </div>\n          `\n        }\n\n        resultsEl.innerHTML = `\n          ${renderSection('Components', filteredCollections)}\n          ${renderSection('Blog Posts', filteredPosts)}\n        `\n\n        errorEl.setAttribute('data-error', 'false')\n      }\n\n      document.addEventListener('input:enter', this.enterHandler)\n      document.addEventListener('input:escape', this.escapeHandler)\n      // @ts-expect-error -- CustomEvent handler is not assignable to EventListener\n      document.addEventListener('input:search', this.searchHandler)\n      resultsEl.addEventListener('click', this.resultClickHandler)\n    }\n\n    disconnectedCallback() {\n      const resultsEl = this.querySelector('[data-list]')\n\n      if (\n        this.enterHandler &&\n        this.escapeHandler &&\n        this.searchHandler &&\n        this.resultClickHandler\n      ) {\n        document.removeEventListener('input:enter', this.enterHandler)\n        document.removeEventListener('input:escape', this.escapeHandler)\n        // @ts-expect-error -- CustomEvent handler is not assignable to EventListener\n        document.removeEventListener('input:search', this.searchHandler)\n\n        if (resultsEl) {\n          resultsEl.removeEventListener('click', this.resultClickHandler)\n        }\n\n        this.enterHandler = null\n        this.escapeHandler = null\n        this.searchHandler = null\n        this.resultClickHandler = null\n      }\n\n      this.collectionItems = []\n      this.postItems = []\n    }\n  }\n\n  customElements.define('search-results', SearchResults)\n</script>\n"
  },
  {
    "path": "src/components/SearchWrapper.astro",
    "content": "---\nimport { getCollection } from 'astro:content'\n\nimport SearchInput from './SearchInput.astro'\nimport SearchResults from './SearchResults.astro'\n\ninterface Result {\n  category: string\n  components?: number\n  slug: string\n  terms: string[]\n  title: string\n}\n\nconst [application, marketing, neobrutalism, blog] = await Promise.all([\n  getCollection('application'),\n  getCollection('marketing'),\n  getCollection('neobrutalism'),\n  getCollection('blog'),\n])\n\nconst allCollections = [...application, ...marketing, ...neobrutalism]\n  .map(({ data }) => data)\n  .sort((a, b) => a.title.localeCompare(b.title))\n\nconst collections: Result[] = allCollections.map(({ category, components, slug, terms, title }) => {\n  const componentCount = components.length + components.filter(({ dark }) => !!dark).length\n\n  return {\n    category,\n    components: componentCount,\n    slug: `/components/${category}/${slug}`,\n    terms,\n    title,\n  }\n})\n\nconst posts: Result[] = blog.map(({ data }) => {\n  return {\n    category: '',\n    slug: `/blog/${data.slug}`,\n    terms: data.terms,\n    title: data.title,\n  }\n})\n---\n\n<div class=\"relative\">\n  <SearchInput />\n  <SearchResults {collections} {posts} />\n</div>\n"
  },
  {
    "path": "src/components/SiteFooter.astro",
    "content": "<footer class=\"mt-8 border-t border-gray-200 md:mt-16\">\n  <div\n    class=\"mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-4 py-6 md:flex-row md:py-12\"\n  >\n    <p class=\"text-sm text-gray-700\">\n      Built by <a\n        href=\"https://github.com/markmead\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        class=\"underline transition-colors hover:text-gray-900\">Mark Mead</a\n      >\n    </p>\n\n    <p class=\"text-sm text-gray-700\">\n      Released under the\n      <a\n        href=\"https://github.com/markmead/hyperui/blob/main/LICENSE\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        class=\"underline transition-colors hover:text-gray-900\"\n      >\n        MIT License\n      </a>\n    </p>\n  </div>\n</footer>\n"
  },
  {
    "path": "src/components/SiteHeader.astro",
    "content": "---\nimport { SITE_TITLE } from '../consts'\n\nimport DropdownWrapper from './DropdownWrapper.astro'\nimport HeaderLink from './HeaderLink.astro'\nimport SearchWrapper from './SearchWrapper.astro'\n---\n\n<header\n  class=\"sticky top-0 z-50 w-full border-b border-gray-200 bg-white/85 backdrop-blur supports-backdrop-filter:bg-white/85\"\n>\n  <div class=\"mx-auto flex h-16 max-w-7xl items-center gap-8 px-4\">\n    <a href=\"/\" class=\"inline-block text-xl font-medium transition-opacity hover:opacity-80\">\n      {SITE_TITLE}\n    </a>\n\n    <nav class=\"hidden items-center gap-4 lg:flex\">\n      <HeaderLink href=\"/components/application\"> Application </HeaderLink>\n      <HeaderLink href=\"/components/marketing\"> Marketing </HeaderLink>\n      <HeaderLink href=\"/components/neobrutalism\"> Neobrutalism </HeaderLink>\n      <HeaderLink href=\"/blog\"> Blog </HeaderLink>\n    </nav>\n\n    <div class=\"flex flex-1 items-center justify-end gap-2\">\n      <SearchWrapper />\n\n      <a\n        href=\"https://github.com/markmead/hyperui\"\n        class=\"inline-flex items-center justify-center gap-2 rounded-md border border-gray-900 bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:border-gray-800 hover:bg-gray-800\"\n        aria-label=\"GitHub\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n          class=\"size-4\"\n        >\n          <path\n            d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n            fill=\"currentColor\"></path>\n        </svg>\n\n        <span class=\"hidden md:inline\">GitHub</span>\n      </a>\n\n      <DropdownWrapper />\n    </div>\n  </div>\n</header>\n"
  },
  {
    "path": "src/consts.ts",
    "content": "export const SITE_DESCRIPTION = 'Free Open Source Tailwind CSS v4 Components'\nexport const SITE_TITLE = 'HyperUI'\n\nexport const SEO_DESCRIPTION_SITE =\n  'Free, open-source Tailwind CSS v4 components for modern web development. Copy-paste ready components to build beautiful, responsive websites faster.'\nexport const SEO_TITLE_SITE = 'Free Tailwind CSS v4 Components'\n\nexport const SEO_DESCRIPTION_APPLICATION_COMPONENTS =\n  'Free Tailwind CSS components for dashboards, CMS, and eCommerce platforms. Build accessible, responsive admin panels and web applications quickly.'\nexport const SEO_TITLE_APPLICATION_COMPONENTS = 'Tailwind CSS Application UI Components'\n\nexport const SEO_DESCRIPTION_MARKETING_COMPONENTS =\n  'Free Tailwind CSS components for landing pages, marketing sites, and portfolios. Create high-converting, responsive marketing websites with ease.'\nexport const SEO_TITLE_MARKETING_COMPONENTS = 'Tailwind CSS Marketing Components'\n\nexport const SEO_DESCRIPTION_NEOBRUTALISM_COMPONENTS =\n  'Free Neobrutalism Tailwind CSS components. Big, bold designs with thick borders and hard shadows.'\nexport const SEO_TITLE_NEOBRUTALISM_COMPONENTS = 'Neobrutalism Tailwind CSS Components'\n\nexport const SEO_DESCRIPTION_BLOG =\n  'Learn Tailwind CSS best practices, web development tips, and component tutorials. Stay updated with the latest techniques to build better websites.'\nexport const SEO_TITLE_BLOG = 'Tailwind CSS Tips & Tutorials'\n"
  },
  {
    "path": "src/content/blog/acknowledgements.mdx",
    "content": "---\ntitle: Project Acknowledgements\ndescription: Tools and libraries that power HyperUI and help make the project possible.\nslug: acknowledgements\npubDate: 2022-08-13\nupdatedDate: 2025-11-02\nterms:\n  - dependencies\n  - opensource\n---\n\nThis list does not include all of the tools and libraries used to create\nHyperUI.\n\n## Astro Build\n\n- [Astro](https://astro.build/)\n- [Prettier (Tailwind CSS)](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)\n- [Tailwind CSS](https://tailwindcss.com/)\n\nIt's worth mentioning [Alpine JS](https://alpinejs.dev/). Even though it's not currently used (as I've switched to [web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)), it's a fantastic JavaScript framework that helped with the transition from Next to Astro.\n\n## Next Build (Pre October 27th 2025)\n\n- [Next MDX Remote](https://github.com/hashicorp/next-mdx-remote)\n- [PrismJS](https://github.com/PrismJS/prism)\n- [React Intersection Observer](https://github.com/thebuilder/react-intersection-observer)\n- [Rehype](https://github.com/rehypejs)\n"
  },
  {
    "path": "src/content/blog/animated-border-gradient-with-tailwindcss.mdx",
    "content": "---\ntitle: How to Create an Animated Border Gradient with Tailwind CSS v4\ndescription: Learn to create an animated border gradient using Tailwind CSS without custom CSS.\nslug: animated-border-gradient-with-tailwindcss\npubDate: 2022-09-29\nupdatedDate: 2025-08-08\nterms:\n  - gradient\n  - border\n  - animation\n---\n\nWhile gradient borders aren't heavily featured in the HyperUI components, they\nadd a beautiful touch to interactive elements - especially when animated. In\nthis tutorial, I'll show you how to create a gradient border with Tailwind CSS\nand then bring it to life with animation.\n\n## Step 1: Creating the Gradient Border\n\nFirst, let's create our interactive element. For this example, I'll use an `<a>`\ntag. The border effect comes from applying padding (`p-1`) which creates a 4px\nspace between the outer gradient background and an inner element with a solid\nbackground color.\n\n_Note: 4px is quite a large border and is only used for demonstration purposes.\nFor more subtle effects, consider using `p-px` or `p-0.5` instead._\n\n```html\n<a href=\"#\" class=\"block rounded-full bg-linear-to-r from-green-300 via-blue-600 to-red-300 p-1\">\n  <span class=\"block rounded-full bg-white px-10 py-4 text-lg font-medium\"> Hello there 👋 </span>\n</a>\n```\n\nThis code gives you a static gradient border. If that's all you need, you're all\nset! But if you want to add animation, continue reading.\n\n## Step 2: Animating the Border\n\nTo create the animation effect, we need to make the gradient move around the\nelement. Here's the complete animated example:\n\n```html\n<a\n  href=\"#\"\n  class=\"animate-background block rounded-full bg-linear-to-r from-green-300 via-blue-600 to-red-300 bg-size-[400%_400%] p-1 [animation-duration:6s]\"\n>\n  <span class=\"block rounded-full bg-white px-10 py-4 text-lg font-medium\"> Hello there 👋 </span>\n</a>\n```\n\nLet's break down the new classes that enable the animation:\n\n`animate-background`\n\nThis extends Tailwind's animation utilities with a custom animation for moving\nbackground gradients:\n\n```css\n@theme {\n  --animate-background: background-move ease infinite;\n\n  @keyframes background-move {\n    0%,\n    100% {\n      background-position: 0% 50%;\n    }\n\n    50% {\n      background-position: 100% 50%;\n    }\n  }\n}\n```\n\nThis animation shifts the background position back and forth, creating the\nflowing gradient effect.\n\n`bg-[length:_400%_400%]`\n\nThis enlarges the gradient to 400% of the element's size in both directions. The\nlarger background size is essential for the animation - it gives the gradient\nroom to move without showing empty space during animation.\n\n`[animation-duration:_6s]`\n\nThis controls how quickly the animation completes one cycle. You can adjust this\nvalue to speed up or slow down the effect.\n\n## Step 3: Experiment with Variations\n\nNow that you have the basic animated gradient border working, try these\nvariations:\n\n- **Change the gradient colors**: Try `from-purple-500 via-pink-500 to-red-500`\n  for a warmer palette\n- **Adjust animation speed**: `[animation-duration:_3s]` for faster movement or\n  [animation-duration:_10s] for a more subtle effect\n- **Play with background size**: A smaller value like `bg-[length:_200%_200%]`\n  creates a shorter animation path\n- **Try different easing functions**: Use `ease-in-out` for smoother transitions\n\nHere is the full working example on Tailwind Play -\n[https://play.tailwindcss.com/R1JVmaA97v](https://play.tailwindcss.com/R1JVmaA97v)\n"
  },
  {
    "path": "src/content/blog/animation-duration-delay-with-tailwindcss.mdx",
    "content": "---\ntitle: How to Add Animation Duration, Delay and Easing Support to Tailwind CSS (v3)\ndescription: Currently, Tailwind CSS does not support animation duration, delay, and easing. Learn how to add these features yourself.\nslug: animation-duration-delay-with-tailwindcss\npubDate: 2023-08-25\nupdatedDate: 2025-08-08\nterms:\n  - animation\n  - duration\n  - easing\n---\n\nIt's important to mention that you can use JIT for one-off classes, such as:\n\n- `[animation-duration:_2s]`\n- `[animation-delay:_0.5s]`\n- `[animation-timing-function:_linear]`\n\n---\n\nIt may seem strange that Tailwind CSS doesn't include this, but let's proceed.\n\n## Adding Animation Duration Classes to Tailwind CSS\n\nTo do this, add the following to your `tailwind.config.js`:\n\n```js\nconst plugin = require('tailwindcss/plugin')\n\nmodule.exports = {\n  plugins: [\n    plugin(function ({ matchUtilities, theme }) {\n      matchUtilities(\n        {\n          'animate-duration': (value) => ({\n            animationDuration: value,\n          }),\n        },\n        { values: theme('transitionDuration') },\n      )\n    }),\n  ],\n}\n```\n\nThis will add the `duration` classes used for transitions to animations with the\n`animate-` prefix:\n\n- `animate-duration-0`\n- `animate-duration-75`\n- `animate-duration-100`\n- `animate-duration-150`\n- `animate-duration-200`\n- `animate-duration-300`\n- `animate-duration-500`\n- `animate-duration-700`\n- `animate-duration-1000`\n\n## Adding Animation Delay Classes to Tailwind CSS\n\nAdd the following to your `tailwind.config.js`:\n\n```js\nconst plugin = require('tailwindcss/plugin')\n\nmodule.exports = {\n  plugins: [\n    plugin(function ({ matchUtilities, theme }) {\n      matchUtilities(\n        {\n          'animate-delay': (value) => ({\n            animationDelay: value,\n          }),\n        },\n        { values: theme('transitionDelay') },\n      )\n    }),\n  ],\n}\n```\n\nThis will add the `delay` classes used for transitions to animations with the\n`animate-` prefix:\n\n- `animate-delay-0`\n- `animate-delay-75`\n- `animate-delay-100`\n- `animate-delay-150`\n- `animate-delay-200`\n- `animate-delay-300`\n- `animate-delay-500`\n- `animate-delay-700`\n- `animate-delay-1000`\n\n## Adding Animation Easing Classes to Tailwind CSS\n\nAdd the following to your `tailwind.config.js`:\n\n```js\nconst plugin = require('tailwindcss/plugin')\n\nmodule.exports = {\n  plugins: [\n    plugin(function ({ matchUtilities, theme }) {\n      matchUtilities(\n        {\n          'animate-ease': (value) => ({\n            animationTimingFunction: value,\n          }),\n        },\n        { values: theme('transitionTimingFunction') },\n      )\n    }),\n  ],\n}\n```\n\nThis will add the `ease` classes used for transitions to animations with the\n`animate-` prefix:\n\n- `animate-ease`\n- `animate-ease-linear`\n- `animate-ease-in`\n- `animate-ease-out`\n- `animate-ease-in-out`\n\nCheck out the [Tailwind Play](https://play.tailwindcss.com/DFSnsN3Vc6) example.\n\nThe added classes will appear in\n[Tailwind CSS IntelliSense](https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code).\n\nThis also means you can use JIT, for example:\n\n- `animate-duration-[5s]`\n- `animate-delay-[0.25s]`\n- `animate-ease-[cubic-bezier(.17,_.67,_.83,_.67)]`\n\n---\n\nAnd that's it.\n\nThat's all you need to do to add animation duration, delay, and easing support\nto Tailwind CSS while it's not yet part of the core. Perhaps it will be included\nin the future.\n"
  },
  {
    "path": "src/content/blog/faqs.mdx",
    "content": "---\ntitle: FAQs\ndescription: Quick answers to common HyperUI and Tailwind CSS questions.\nslug: faqs\npubDate: 2022-08-13\nupdatedDate: 2026-02-22\nterms:\n  - questions\n  - answers\n---\n\n## What is HyperUI?\n\nHyperUI is a free, open-source collection of Tailwind CSS components that you can copy and paste into your projects.\n\n## Is HyperUI free to use?\n\nYes, completely free with no hidden costs.\n\n## How do I use HyperUI components?\n\nBrowse the collection, find a component you like, copy the code, and paste it into your project.\n\n## Do I need to install HyperUI?\n\nNo installation needed. Just copy and paste the component code.\n\n## Which frameworks can I use HyperUI with?\n\nThe components are HTML, so you can use them with any framework or no framework at all.\n\n## Can I modify the components after copying them?\n\nYes, that's the entire point. HyperUI provides building blocks that you customize to fit your needs.\n\n## Should I update my copied components when HyperUI updates?\n\nNo. Once you copy a component, it's yours to maintain. Don't try to keep it synced with HyperUI updates.\n\n## Are the components responsive?\n\nYes, all components use Tailwind's responsive utilities and work across all screen sizes.\n\n## Which Tailwind CSS version is HyperUI compatible with?\n\nHyperUI uses Tailwind CSS v4.2.\n\n## Will HyperUI components work with Tailwind CSS v3?\n\nNo. HyperUI uses Tailwind CSS v4.2, which has breaking changes from v3. Upgrade your project to v4 to use HyperUI components.\n\n## Does HyperUI have dependencies?\n\nComponents use Tailwind CSS utilities. Some components require first-party Tailwind plugins like `@tailwindcss/forms` or `@tailwindcss/typography`.\n\n## Does HyperUI include JavaScript functionality?\n\nMost components are pure HTML/CSS. Some interactive components include minimal vanilla JavaScript that you can adapt or replace with your framework's approach.\n\n## Are dark mode variants available?\n\nMany components include dark mode variants, but not all.\n\n## Why might components look different in my project?\n\nThis is usually due to different Tailwind CSS versions. Check your version and open a GitHub issue if problems persist.\n\n## Can HyperUI be used in commercial projects?\n\nYes, use it in any project including commercial applications.\n\n## Is attribution required when using HyperUI?\n\nNo, but it's always appreciated.\n\n## How can I support the HyperUI project?\n\nStar the project on GitHub. Every star helps!\n\n## Where can I get help with HyperUI?\n\nCreate an issue on the GitHub repository.\n\n## Can I request new features or components?\n\nYes! Submit feature requests through GitHub issues.\n\n## How can I contribute code to HyperUI?\n\nCreate a GitHub issue first to discuss your contribution. Once approved, submit a pull request. See the [contributing guide](https://www.hyperui.dev/blog/how-to-contribute) for detailed instructions.\n"
  },
  {
    "path": "src/content/blog/highlight-hover-effect-with-tailwindcss.mdx",
    "content": "---\ntitle: How to Create a Highlight Hover Effect with Tailwind CSS (v3)\ndescription: Learn how to create a hover effect wherein one element is highlighted while the rest are faded using Tailwind CSS.\nslug: highlight-hover-effect-with-tailwindcss\npubDate: 2022-09-22\nupdatedDate: 2025-08-08\nterms:\n  - hover\n  - effect\n  - opacity\n---\n\nYou may have seen a hover effect on the web where the element you're hovering\nover remains fully opaque, while its sibling elements become less opaque.\n\n## Creating this effect in Tailwind CSS\n\nWith the new syntax that allows us to write expressions like `[&:hover>li]`, we\ncan easily achieve this effect without any custom CSS 🎉\n\nSo, what do we need?\n\n1. A parent element that reduces the opacity of its child elements when hovered\n   over.\n2. Child elements that revert their opacity when hovered over.\n\nHere's a simple implementation of that:\n\n```html\n<ul class=\"[&:hover>li]:opacity-50\">\n  <li class=\"hover:!opacity-100\">...</li>\n  <li class=\"hover:!opacity-100\">...</li>\n  <li class=\"hover:!opacity-100\">...</li>\n  <li class=\"hover:!opacity-100\">...</li>\n</li>\n```\n\nLet's break down what's happening here:\n\n**`[&:hover>li]:opacity-50`**\n\nWhen you hover over the `ul`, it targets the `li` elements and reduces their\nopacity to `0.5`.\n\n**`hover:!opacity-100`**\n\nWhen you hover over an `li` element, it forces its opacity back to `1`. The `!`\nmodifier applies `!important` to enforce this.\n\nThis is the basic structure of any hover effect like this in Tailwind CSS. You\ncan take this logic and apply it to a more complex design.\n\n---\n\nOne thing you might notice is that when you hover between the `li` elements, one\nof them will still be highlighted. This is to ensure that an element is\nhighlighted whenever the cursor is within the `ul`.\n\nTo get around this, you can use JavaScript and a package like\n[Negative Hover](https://github.com/markmead/negative-hover) that I wrote.\n"
  },
  {
    "path": "src/content/blog/how-to-clean-up-tailwindcss-code.mdx",
    "content": "---\ntitle: One Simple Trick to Cleaning Up Tailwind CSS Code (v3)\ndescription: Learn how to clean up repetitive Tailwind CSS classes in your markup by using the child selector variant to delegate styles to parent elements.\nslug: how-to-clean-up-tailwindcss-code\npubDate: 2022-10-07\nupdatedDate: 2025-10-16\nterms:\n  - refactoring\n  - selector\n  - jit\n---\n\n**[This is outdated since Tailwind CSS 3.4](https://tailwindcss.com/blog/tailwindcss-v3-4#style-children-with-the-variant)**\n\nTailwind CSS can make your markup messy. However, we can prevent this by\ndelegating classes to the parent element.\n\nLet's take the following example.\n\n```html\n<ul>\n  <li class=\"text-sm font-medium text-gray-900\">...</li>\n  <li class=\"text-sm font-medium text-gray-900\">...</li>\n  <li class=\"bg-gray-100 text-sm font-medium text-gray-900\">...</li>\n</ul>\n```\n\nWe have three repeating classes on the `<li>` elements.\n\n- `text-sm`\n- `font-medium`\n- `text-gray-900`\n\nWe can clean this up by moving these classes to the parent `<ul>` element and\nletting the CSS cascade down.\n\n```html\n<ul class=\"text-sm font-medium text-gray-900\">\n  <li>...</li>\n  <li>...</li>\n  <li class=\"bg-gray-100\">...</li>\n</ul>\n```\n\nBut what if we are using classes that cannot be delegated to the parent? Classes\nlike `whitespace-nowrap`, `px-8`, `rotate-3` and many more cannot be applied to\nchild elements through cascading. Thankfully, there's a solution...\n\n## Enter Tailwind CSS JIT\n\nIf you're uncertain about JIT, you can refer to my blog\n[What is JIT in Tailwind CSS?](/blog/what-is-jit) for a detailed explanation.\n\nBut here's a short description.\n\n> Since v3, JIT has been the default in Tailwind CSS and has brought a lot of\n> power to the framework. One of the best additions is arbitrary values, these\n> allow you to replace custom CSS with Tailwind CSS-like classes.\n\nLet's use this example.\n\n```html\n<ul>\n  <li class=\"p-4 text-sm font-medium whitespace-nowrap\">...</li>\n  <li class=\"p-4 text-sm font-medium whitespace-nowrap\">...</li>\n  <li class=\"bg-gray-100 p-4 text-sm font-medium whitespace-nowrap\">...</li>\n</ul>\n```\n\nHere we have four repeating classes.\n\n- `whitespace-nowrap`\n- `p-4`\n- `text-sm`\n- `font-medium`\n\nHowever, only two can be delegated to the parent.\n\n- `text-sm`\n- `font-medium`\n\nHere's how it would look without JIT.\n\n```html\n<ul class=\"text-sm font-medium\">\n  <li class=\"p-4 whitespace-nowrap\">...</li>\n  <li class=\"p-4 whitespace-nowrap\">...</li>\n  <li class=\"bg-gray-100 p-4 whitespace-nowrap\">...</li>\n</ul>\n```\n\nWe still have `p-4` and `whitespace-nowrap` repeated on all the `<li>` elements.\n\n## Delegating Classes with JIT\n\nHere's how the example looks with JIT.\n\n```html\n<ul class=\"text-sm font-medium *:p-4 *:whitespace-nowrap\">\n  <li>...</li>\n  <li>...</li>\n  <li class=\"bg-gray-100\">...</li>\n</ul>\n```\n\nIt's the same as writing this.\n\n```css\n& li {\n  //\n}\n```\n\nWhich translates to.\n\n> Select all first level children within this element\n\nIn our example, the `&` is the `<ul>` and the `*` is the `<li>` elements.\n\nHere's how it would look in CSS.\n\n```css\nul > li {\n  //\n}\n```\n\nAnd from that, all we're doing is applying CSS but with Tailwind CSS utilities.\n\n```css\nul {\n  @apply text-sm font-medium;\n}\n\nul > li {\n  @apply p-4 whitespace-nowrap;\n}\n```\n\nHere's a more\n[built-out example using a table component](https://play.tailwindcss.com/pJxSAPRw22)\nfrom HyperUI.\n\n---\n\nI'm unsure about this approach, as arbitrary classes have some downsides.\n\n- Confusing to read\n- Confusing to write\n- Messy markup\n"
  },
  {
    "path": "src/content/blog/how-to-contribute.mdx",
    "content": "---\ntitle: Contributing to HyperUI\ndescription: Learn how to get involved with HyperUI development, report issues, and add new components or collections.\nslug: how-to-contribute\npubDate: 2022-07-26\nupdatedDate: 2026-02-18\nterms:\n  - contribute\n  - opensource\n  - github\n---\n\nContributing to open source can feel overwhelming, but getting involved with\nHyperUI is straightforward and rewarding. Here's how you can help make HyperUI\neven better.\n\n## Found a Bug or Have an Idea?\n\nIf you notice something off—like a typo, accessibility issue, or SEO concern—or\nif you have an idea for an improvement, please\n[open an issue](https://github.com/markmead/hyperui/issues/new/choose). This\nhelps us discuss and plan the best way forward together.\n\n## Want to Add or Improve Something?\n\nThinking of adding a new component or feature? Before you start,\n[create an issue](https://github.com/markmead/hyperui/issues/new/choose) so we\ncan chat about your idea. For new components, sharing example designs is\nhelpful.\n\n### Pull Request Process\n\nAll pull requests are reviewed before merging. You may receive feedback—this is\npart of making HyperUI great! If feedback from the first review isn't addressed\nby the third review, the PR will be closed. If new feedback comes up in the\nthird review, that's fine—just address it as usual.\n\n### Setting Up HyperUI Locally\n\nHyperUI is built with Astro and uses Tailwind CSS v4. To get started:\n\n```shell\ngit clone git@github.com:markmead/hyperui.git\npnpm install\npnpm dev\npnpm run css --watch\n```\n\n### Adding a New Component\n\nFor example, to add a new footer component in the marketing category:\n\n1. Create a new file in `/public/components/marketing/footers`.\n2. Add the component to the group in\n   `/src/content/collection/marketing/footers.mdx`.\n\nComponent files are named incrementally (e.g., 21, 22, etc.). Please follow this\npattern.\n\n#### Component Guidelines\n\nKey guidelines include:\n\n1. Use Tailwind CSS for all components.\n2. Only use official Tailwind CSS plugins. Declare any plugins used in the\n   component object in the MDX file, for example:\n   `plugins: ['@tailwindcss/forms']`.\n\nSee examples in the\n[input component](/components/application/pagination#component-3).\n\n### Creating a New Collection\n\nTo propose a new collection,\n[open an issue](https://github.com/markmead/hyperui/issues/new/choose) so we can\ndiscuss and brainstorm ideas together.\n"
  },
  {
    "path": "src/content/blog/how-to-write-better-containers-in-tailwindcss.mdx",
    "content": "---\ntitle: How to Write Better Containers in Tailwind CSS\ndescription: The best way to set up containers in Tailwind CSS v4 for fluid layouts.\nslug: how-to-write-better-containers-in-tailwindcss\npubDate: 2022-09-21\nupdatedDate: 2025-08-08\nterms:\n  - container\n  - layout\n  - responsive\n---\n\n## Fluid Containers in Tailwind v4\n\nWant a container that feels modern and fluid? Use the following:\n\n```html\n<div class=\"mx-auto max-w-7xl px-4\">\n  <!-- Content -->\n</div>\n```\n\nOr set up a custom utility:\n\n```css\n@utility container {\n  @apply mx-auto px-4;\n}\n```\n\nWhy use this approach? The default `container` class in Tailwind makes use of fixed breakpoints, this can make layouts feel rigid and less natural. By using `max-w-7xl` and padding, your content adapts smoothly.\n\nFor a direct comparison, check out this [fluid container example](https://play.tailwindcss.com/a1nvWMO4Vm?layout=preview&size=1420x720).\n"
  },
  {
    "path": "src/content/blog/how-to-write-better-tailwindcss.mdx",
    "content": "---\ntitle: Tips & Tricks for Writing Better Tailwind CSS (v3)\ndescription: Since 2018, I've been writing Tailwind CSS and have gathered some tips and tricks to enhance the look and performance of your code.\nslug: how-to-write-better-tailwindcss\npubDate: 2022-04-17\nupdatedDate: 2025-08-08\nterms:\n  - practices\n  - performance\n  - quality\n---\n\nDo you write in Tailwind CSS? Here are some tips and tricks I use to optimize my\ncode's look and performance.\n\nWant to add more tips?\n[Create a PR on GitHub](https://github.com/markmead/hyperui).\n\n## Delegate Classes to Parent Element\n\n### Incorrect\n\n```html\n<ul>\n  <li class=\"text-sm font-medium whitespace-nowrap\">First</li>\n  <li class=\"text-sm font-medium whitespace-nowrap\">Second</li>\n  <li class=\"text-sm font-medium whitespace-nowrap\">Third</li>\n</ul>\n```\n\n### Correct\n\n```html\n<ul class=\"text-sm font-medium\">\n  <li class=\"whitespace-nowrap\">First</li>\n  <li class=\"whitespace-nowrap\">Second</li>\n  <li class=\"whitespace-nowrap\">Third</li>\n</ul>\n```\n\n---\n\n## Remove Flex Classes on Mobile\n\n### Incorrect\n\n```html\n<div class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between\">\n  <div>Hello</div>\n  <div>World</div>\n</div>\n```\n\n### Correct\n\n```html\n<div class=\"sm:flex sm:items-center sm:justify-between\">\n  <div>Hello</div>\n  <div>World</div>\n</div>\n```\n\n---\n\n## Evenly Space Content with Flow Root\n\n### Incorrect\n\n```html\n<ul class=\"space-y-8 divide-y\">\n  <li>First</li>\n  <li class=\"pt-8\">Second</li>\n  <li class=\"pt-8\">Third</li>\n</ul>\n```\n\n### Correct\n\n```html\n<div class=\"flow-root\">\n  <ul class=\"-my-8 divide-y\">\n    <li class=\"py-8\">First</li>\n    <li class=\"py-8\">Second</li>\n    <li class=\"py-8\">Third</li>\n  </ul>\n</div>\n```\n\n> But this is more code\n\nTrue, however...\n\n- Which one will make more sense in a few months time?\n- How would the first example work with dynamic content?\n\n---\n\n## Avoid Margin Bottom for Spacing Content\n\n### Incorrect\n\n```html\n<div>\n  <div class=\"mb-4\">Hello</div>\n  <div>World</div>\n</div>\n```\n\n### Correct\n\n```html\n<div>\n  <div>Hello</div>\n  <div class=\"mt-4\">World</div>\n</div>\n```\n\n> What is the benefit, they do the same thing?\n\nSure, but what if the content is dynamic and there's no second element? You'll\nend up with extra space below the first element.\n\n---\n\n## Remove Duplicate Spacing Classes with Parent Classes\n\n### Incorrect\n\n```html\n<ul>\n  <li>First</li>\n  <li class=\"mt-8\">Second</li>\n  <li class=\"mt-8\">Third</li>\n</ul>\n```\n\n### Correct\n\n```html\n<ul class=\"space-y-8\">\n  <li>First</li>\n  <li>Second</li>\n  <li>Third</li>\n</ul>\n```\n\n---\n\n## Use the Accurate Transition Class\n\n### Incorrect\n\n```html\n<button class=\"bg-red-500 transition-all hover:bg-red-600\">Click</button>\n```\n\n### Correct\n\n```html\n<button class=\"bg-red-500 transition-colors hover:bg-red-600\">Click</button>\n```\n\n> But the class name is longer?\n\nCan't argue with that, but do you need `transition-all`? Probably not.\n\n**If you want to save on class name length then use `transition` it will cover\n99% of the transition effects you need.**\n\n---\n\n## Use Color Opacity Classes\n\n### Incorrect\n\n```html\n<button class=\"relative\">\n  <span class=\"absolute inset-0 bg-red-500 opacity-50\"></span>\n  Click\n</button>\n```\n\n### Correct\n\n```html\n<button class=\"bg-opacity-50 bg-red-500\">Click</button>\n<!-- With JIT -->\n<button class=\"bg-red-500/50\">Click</button>\n```\n\n---\n\n## Split CSS Class Names onto Multiple Lines in CSS Files\n\n### Incorrect\n\n```css\n.button {\n  @apply inline-flex items-center rounded-sm border px-5 py-3 text-sm transition hover:scale-105;\n}\n```\n\n### Correct\n\n```css\n.button {\n  @apply inline-flex items-center;\n  @apply px-5 py-3 text-sm;\n  @apply rounded-sm border;\n  @apply transition;\n  @apply hover:scale-105;\n}\n```\n\n> How is this better? It's more code...\n\nCorrect, but it's easier to read and it all gets compiled down.\n\n---\n\n## Avoid Creating Components in CSS Files\n\n**Only applies if you are using a templating language that allows for\ncomponents, such as Blade, React, Liquid OR Vue.**\n\n### Incorrect\n\n```html\n<div class=\"card\">\n  <div class=\"card-title\">Title</div>\n  <div class=\"card-body\">Title</div>\n  <div class=\"card-footer\">\n    <div class=\"card-timestamp\">15/05/2025</div>\n\n    <div class=\"card-actions\">\n      <button>Edit</button>\n      <button>Delete</button>\n    </div>\n  </div>\n</div>\n```\n\nAnd for the CSS...\n\n```css\n.card {\n  @apply rounded-sm p-4;\n}\n\n.card-title {\n  @apply text-lg;\n}\n\n.card-body {\n  @apply mt-1;\n}\n\n.card-footer {\n  @apply flex items-center justify-between;\n}\n\n.card-timestamp {\n  @apply text-sm;\n}\n\n.card-actions {\n  @apply flex gap-4;\n}\n```\n\n### Correct\n\n```html\n<div class=\"rounded-sm p-4\">\n  <div class=\"text-lg\">Title</div>\n  <div class=\"mt-1\">Title</div>\n  <div class=\"flex items-center justify-between\">\n    <div class=\"text-sm\">15/05/2025</div>\n\n    <div class=\"flex gap-4\">\n      <button>Edit</button>\n      <button>Delete</button>\n    </div>\n  </div>\n</div>\n```\n\n---\n\n## Use Max Width Classes When Restricting Width\n\n### Incorrect\n\n```html\n<div class=\"w-auto sm:w-64\">\n  <div>Hello World</div>\n</div>\n```\n\n### Correct\n\n```html\n<div class=\"max-w-sm\">\n  <div>Hello World</div>\n</div>\n```\n\n> What's the benefit?\n\nThere are several:\n\n- They are responsive by default\n- They better describe the layout\n\n---\n\n## Group Prefixed Class Names\n\n### Incorrect\n\n```html\n<div class=\"\\\\mt-4 lg:text-3xl\\\\ text-lg sm:mt-0 sm:text-xl\">Hello World</div>\n```\n\n_Excuse the `\\\\...\\\\` it's to stop Prettier from formatting._\n\n### Correct\n\n```html\n<div class=\"mt-4 text-lg sm:mt-0 sm:text-xl lg:text-3xl\">Hello World</div>\n```\n\nYou can use something like\n[Tailwind CSS Prettier](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)\nto do this for you.\n\n---\n\n## Be Specific with Breakpoint Classes\n\n### Incorrect\n\n```html\n<div class=\"items-center justify-between sm:flex\">\n  <div>Hello</div>\n  <div>World</div>\n</div>\n```\n\n### Correct\n\n```html\n<div class=\"sm:flex sm:items-center sm:justify-between\">\n  <div>Hello</div>\n  <div>World</div>\n</div>\n```\n\n> What's the issue here?\n\nYou are loading extra CSS on mobile that isn't being used. While it may not seem\ndrastic in this example, imagine if the entire frontend was written like the\nfirst example. That's a lot of extra CSS being loaded on mobile.\n\n---\n\n## Use Tailwind CSS Prettier and Tailwind CSS Intellisense\n\n### Tailwind CSS Prettier\n\n[Tailwind CSS Prettier GitHub Repo](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)\n\n- Sort Tailwind CSS class names\n- Remove duplicate class names\n- Move custom class names to end of class name list\n\n### Tailwind CSS Intellisense\n\n[Tailwind CSS Intellisense GitHub Repo](https://github.com/tailwindlabs/tailwindcss-intellisense)\n\n- Autocomplete Tailwind CSS class names (includes classes added in the Tailwind\n  CSS config)\n- Highlights errors with Tailwind CSS class names\n- Displays the CSS generated with each Tailwind CSS class\n"
  },
  {
    "path": "src/content/blog/move-to-tailwindcss-without-breaking-changes.mdx",
    "content": "---\ntitle: Moving to Tailwind CSS from another framework? Use a Prefix!\ndescription: Migrating to Tailwind CSS from another CSS framework? Here's a simple solution to avoid class conflicts.\nslug: move-to-tailwindcss-without-breaking-changes\npubDate: 2022-10-26\nupdatedDate: 2025-08-08\nterms:\n  - migration\n  - prefix\n  - css\n---\n\nI've heard this a few times:\n\n> I'm switching to Tailwind CSS, but my old framework keeps breaking things!\n\nWhether you're moving from Bootstrap, Bulma, or any other CSS framework,\nTailwind CSS makes it easy to avoid class name conflicts.\n\n**The magic line?**\n\n```css\n@import 'tailwindcss' prefix(tw);\n```\n\nAdd this to your CSS entry file and Tailwind will generate classes like\n`tw-flex` instead of `flex`. You can use any prefix you like, such as `app` or\n`custom`:\n\n```css\n@import 'tailwindcss' prefix(app);\n```\n\nThis prevents conflicts with utility classes from other frameworks, making your\nmigration much smoother.\n\n**What about CSS resets?**\n\nMost CSS frameworks include their own CSS resets (normalize/base styles). If you\nnotice style conflicts, you can disable Tailwind's base styles by omitting the\nbase import:\n\n```css\n/* @import \"tailwindcss/base\"; */\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n```\n\nThis keeps your previous framework's styles intact while you transition.\n\nFor more details, check out the\n[Tailwind CSS docs on prefix](https://tailwindcss.com/docs/configuration#prefix).\n"
  },
  {
    "path": "src/content/blog/remove-number-input-spinners-with-tailwindcss.mdx",
    "content": "---\ntitle: How to remove the spinners on a number inputs with Tailwind CSS\ndescription: This guide will show you how to eliminate the spinners that appear on number inputs using Tailwind CSS v4 and  CSS techniques.\nslug: remove-number-input-spinners-with-tailwindcss\npubDate: 2022-12-06\nupdatedDate: 2025-08-08\nterms:\n  - input\n  - spinner\n  - appearance\n---\n\nIf you've ever wanted to remove the spinners from a number input, you're not alone.\n\nWhile they can be useful, they can also be distracting or unwanted. Let's see how to remove them in Tailwind CSS.\n\n## CSS Class\n\nThis solution works in any framework and uses CSS properties.\n\n```css\n.no-spinner {\n  appearance: textfield;\n}\n\n.no-spinner::-webkit-outer-spin-button,\n.no-spinner::-webkit-inner-spin-button {\n  appearance: none;\n  margin: 0;\n}\n```\n\nAdd the `no-spinner` class to your number inputs to remove the spinners.\n\n## Tailwind CSS Class\n\n```css\n@layer components {\n  .no-spinner {\n    appearance: textfield;\n  }\n\n  .no-spinner::-webkit-outer-spin-button,\n  .no-spinner::-webkit-inner-spin-button {\n    appearance: none;\n    margin: 0;\n  }\n}\n```\n\nThis integrates the `no-spinner` class into Tailwind CSS v4. It will show up in Tailwind CSS Intellisense in VS Code.\n\n## Tailwind CSS Inline\n\n```html\n<input\n  type=\"number\"\n  class=\"[appearance:textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n/>\n```\n\n[Take a look at the 3 examples here](https://play.tailwindcss.com/9lCLR4jK5d?layout=preview).\n\nThat's all! Which approach should you use? I recommend adding a Tailwind CSS class with `@layer`, but the choice is yours.\n"
  },
  {
    "path": "src/content/collection/application/accordions.mdx",
    "content": "---\ntitle: Accordions\ndescription: Responsive accordion and collapsible content components. Perfect for FAQs, feature lists, and information hierarchies in dashboards and web applications.\ncategory: application\nslug: accordions\nterms:\n  - collapse\n  - expand\ncomponents:\n  - title: Base\n    description: Simple accordion with chevron expand/collapse indicators\n    dark: true\n  - title: Base with category icons\n    description: Accordion items with custom icons for each section\n    dark: true\n  - title: Base with dividers\n    description: Minimal list-style layout using dividers instead of borders\n    dark: true\n  - title: Base nested\n    description: Multi-level accordion with parent and child items\n    dark: true\n  - title: Base compact\n    description: Space-efficient version with condensed padding and smaller text\n    dark: true\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/badges.mdx",
    "content": "---\ntitle: Badges\ndescription: Responsive badge and tag components with base badges, icon badges, dismissible badges, and themed variations for notifications, statuses, and labels in web applications and dashboards.\ncategory: application\nslug: badges\nwrapper: h-[200px]\nterms:\n  - alert\n  - status\ncomponents:\n  - title: Base\n    description: Simple pill-shaped badges with solid and outlined variants\n    dark: true\n  - title: Base with icon\n    description: Badges with icons positioned on the left side\n    dark: true\n  - title: Base with dismiss\n    description: Removable badges with close button for tags and filters\n    dark: true\n  - title: Icon only\n    description: Compact icon-only badges without text labels\n    dark: true\n  - title: Themed with icon\n    description: Status badges with semantic colors for success, warning, and error states\n    dark: true\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/breadcrumbs.mdx",
    "content": "---\ntitle: Breadcrumbs\ndescription: Responsive breadcrumb navigation components for tracking location within websites and applications. Perfect for ecommerce, dashboards, and multi-level navigation with customizable dividers and icons.\ncategory: application\nslug: breadcrumbs\nwrapper: h-[200px]\nterms:\n  - link\n  - navigation\ncomponents:\n  - { title: 'Base', dark: true }\n  - { title: 'Base with home icon', dark: true }\n  - { title: 'Slash divider', dark: true, contributors: ['mohdahsanrazakhan'] }\n  - { title: 'Slash divider with home icon', dark: true, contributors: ['mohdahsanrazakhan'] }\n  - { title: 'Grouped with chevron divider', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/button-groups.mdx",
    "content": "---\ntitle: Button Groups\ndescription: Responsive button group components for web applications, dashboards, and admin panels with action buttons, icon buttons, tabbed navigation, and toggle controls.\ncategory: application\nslug: button-groups\nwrapper: h-[200px]\nterms:\n  - action\n  - group\ncomponents:\n  - { title: 'Base', dark: true }\n  - { title: 'Icons', dark: true }\n  - { title: 'Main and secondary', dark: true }\n  - { title: 'Layouts', dark: true }\n  - { title: 'Layouts without space', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/checkboxes.mdx",
    "content": "---\ntitle: Checkboxes\ndescription: Checkbox input components with styled checkboxes, labels, descriptions, and responsive designs for forms, settings, and user interfaces.\ncategory: application\nslug: checkboxes\nwrapper: h-[400px]\nterms:\n  - filter\n  - form\n  - input\ncomponents:\n  - { title: 'Base', dark: true, plugins: ['@tailwindcss/forms'] }\n  - { title: 'Described', dark: true, plugins: ['@tailwindcss/forms'] }\n  - { title: 'Described with divide', dark: true, plugins: ['@tailwindcss/forms'] }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/details-list.mdx",
    "content": "---\ntitle: Details Lists\ndescription: Responsive details list components for displaying structured data with striped rows, borders, and dark mode support for web applications and dashboards.\ncategory: application\nslug: details-list\nterms:\n  - data\ncomponents:\n  - { title: 'Base', dark: true }\n  - { title: 'Striped', dark: true }\n  - { title: 'Bordered', dark: true }\n  - { title: 'Striped and bordered', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/dividers.mdx",
    "content": "---\ntitle: Dividers\ndescription: Responsive layout divider components with basic, gradient, and aligned styles for separating content sections in web applications and UI designs.\ncategory: application\nslug: dividers\nwrapper: h-[200px]\nterms:\n  - layout\n  - separator\ncomponents:\n  - { title: 'Base', dark: true }\n  - { title: 'Gradient', dark: true }\n  - { title: 'Left align', dark: true }\n  - { title: 'Left align gradient', dark: true }\n  - { title: 'Right align', dark: true }\n  - { title: 'Right align gradient', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/dropdown.mdx",
    "content": "---\ntitle: Dropdowns\ndescription: Responsive dropdown menu components for navigation, filters, settings, and user actions in web applications.\ncategory: application\nslug: dropdown\nterms:\n  - menu\n  - navigation\ncomponents:\n  - { title: 'Base', dark: true }\n  - { title: 'Divided', dark: true }\n  - { title: 'Grouped', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/empty-states.mdx",
    "content": "---\ntitle: Empty States\ndescription: Empty state components for Tailwind CSS. Task-oriented UI patterns for workspaces and dashboards with clear primary actions, helping users create, import, or populate content in their applications.\ncategory: application\nslug: empty-states\nterms:\n  - placeholder\n  - cta\ncomponents:\n  - { title: 'Create first item', dark: true }\n  - { title: 'Import or create', dark: true }\n  - { title: 'Upload data', dark: true }\n  - { title: 'Get started', dark: true }\n  - { title: 'No results found', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/file-uploaders.mdx",
    "content": "---\ntitle: File Uploaders\ndescription: File uploader components with drag-and-drop, previews, and progress indicators for web applications.\ncategory: application\nslug: file-uploaders\nterms:\n  - form\n  - input\ncomponents:\n  - { title: 'Base', dark: true }\n  - { title: 'Base with button', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/filters.mdx",
    "content": "---\ntitle: Filters\ndescription: Responsive filter components for sorting, searching, and refining content in ecommerce, dashboards, data tables, and search interfaces.\ncategory: application\nslug: filters\nwrapper: h-[400px]\nterms:\n  - form\n  - input\n  - search\n  - sort\ncomponents:\n  - { title: 'Dropdown', dark: true, plugins: ['@tailwindcss/forms'] }\n  - { title: 'Accordion', dark: true, plugins: ['@tailwindcss/forms'] }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/grids.mdx",
    "content": "---\ntitle: Grids\ndescription: Responsive grid layouts and grid systems for web applications with customizable columns and rows. Flexible grid components for dashboards, admin panels, and content organization.\ncategory: application\nslug: grids\nwrapper: h-[400px]\nterms:\n  - layout\ncomponents:\n  - { title: '1x1' }\n  - { title: '1x2' }\n  - { title: '2x1' }\n  - { title: '1x1x1' }\n  - { title: '1x1x1x1' }\n  - { title: '1x1x2' }\n  - { title: '2x1x1' }\n  - { title: '1x2x1' }\n  - { title: 'Sidebar left' }\n  - { title: 'Sidebar right' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/inputs.mdx",
    "content": "---\ntitle: Inputs\ndescription: Form input components with responsive text fields, search boxes, and form controls. Customizable input elements with various styles including icons and floating labels.\ncategory: application\nslug: inputs\nwrapper: h-[200px]\nterms:\n  - filter\n  - form\ncomponents:\n  - title: Base\n    description: Standard text input with label and border styling\n    dark: true\n    plugins: ['@tailwindcss/forms']\n  - title: Base with icon\n    description: Input field with an icon positioned on the right side\n    dark: true\n    plugins: ['@tailwindcss/forms']\n  - title: Base with button\n    description: Search input with an integrated action button\n    dark: true\n    plugins: ['@tailwindcss/forms']\n  - title: Floating label\n    description: Input with animated label that floats above on focus\n    dark: true\n    plugins: ['@tailwindcss/forms']\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/loaders.mdx",
    "content": "---\ntitle: Loaders\ndescription: Loading and progress indicator components for web applications. Includes spinners, progress bars, and animated loaders for data fetching states in dashboards, forms, and content-heavy applications.\ncategory: application\nslug: loaders\nwrapper: h-[200px]\nterms:\n  - progress\ncomponents:\n  - title: Spinner\n    description: Circular spinning loader for general loading states\n    dark: true\n  - title: Spinner with text\n    description: Centered spinner with loading message displayed below\n    dark: true\n  - title: Spinner inline\n    description: Compact spinner with text aligned horizontally\n    dark: true\n  - title: Progress bar\n    description: Horizontal bar indicator showing loading progress\n    dark: true\n  - title: Dots pulse\n    description: Three animated dots with sequential pulse effect\n    dark: true\n  - title: Dots ping\n    description: Three animated dots with expanding ping effect\n    dark: true\n  - title: Dots bounce\n    description: Three animated dots with bouncing effect\n    dark: true\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/media.mdx",
    "content": "---\ntitle: Media\ndescription: Responsive media and avatar components for user profiles, image galleries, and content cards with flexible alignment and layouts.\ncategory: application\nslug: media\nwrapper: h-[400px]\nterms:\n  - avatar\n  - image\ncomponents:\n  - { title: 'Left align top' }\n  - { title: 'Left align center' }\n  - { title: 'Left align bottom' }\n  - { title: 'Left align stretch' }\n  - { title: 'Right align top' }\n  - { title: 'Right align center' }\n  - { title: 'Right align bottom' }\n  - { title: 'Right align stretch' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/modals.mdx",
    "content": "---\ntitle: Modals\ndescription: Modal and dialog components for web applications. Includes simple modals, close buttons, and action modals with responsive, customizable designs.\ncategory: application\nslug: modals\nterms:\n  - dialog\n  - popup\ncomponents:\n  - { title: 'Base', dark: true }\n  - { title: 'Base with close', dark: true }\n  - { title: 'Actions', dark: true }\n  - { title: 'Actions with close', dark: true }\n  - { title: 'Input', dark: true }\n  - { title: 'Input with close', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/pagination.mdx",
    "content": "---\ntitle: Pagination\ndescription: Responsive pagination components for page navigation in web applications, dashboards, and data tables with numbered links and previous/next buttons.\ncategory: application\nslug: pagination\nwrapper: h-[200px]\nterms:\n  - filter\n  - navigation\n  - page\n  - pagination\ncomponents:\n  - { title: 'Navigation', dark: true }\n  - { title: 'Input', dark: true, plugins: ['@tailwindcss/forms'] }\n  - { title: 'X/Y', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/progress-bars.mdx",
    "content": "---\ntitle: Progress Bars\ndescription: Progress indicator components for tasks, uploads, and workflows. Features linear bars, circular progress, segmented steps, and status labels.\ncategory: application\nslug: progress-bars\nwrapper: h-[400px]\nterms:\n  - indicator\n  - loading\n  - status\ncomponents:\n  - { title: 'Basic' }\n  - { title: 'With labels and status colors' }\n  - { title: 'Compact with metadata' }\n  - { title: 'Circular progress' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/quantity-inputs.mdx",
    "content": "---\ntitle: Quantity Inputs\ndescription: Quantity input components for number inputs, ideal for ecommerce, order forms, and shopping carts.\ncategory: application\nslug: quantity-inputs\nwrapper: h-[200px]\nterms:\n  - ecommerce\n  - quantity\n  - form\ncomponents:\n  - { title: 'Base with plus and minus buttons', dark: true, plugins: ['@tailwindcss/forms'] }\n  - {\n      title: 'Base with plus and minus buttons, no spinners in the input',\n      dark: true,\n      plugins: ['@tailwindcss/forms'],\n    }\n  - { title: 'Base with plus and minus buttons, no spinners in the input and text\n        centered', dark: true, plugins: ['@tailwindcss/forms'] }\n  - { title: 'Bordered with plus and minus buttons', dark: true, plugins: ['@tailwindcss/forms'] }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/radio-groups.mdx",
    "content": "---\ntitle: Radio Groups\ndescription: Radio group input components for forms, settings, and user preferences in web applications with responsive, customizable designs.\ncategory: application\nslug: radio-groups\nwrapper: h-[400px]\nterms:\n  - form\n  - group\n  - radio\ncomponents:\n  - { title: 'Base', dark: true }\n  - { title: 'Base with input', dark: true, plugins: ['@tailwindcss/forms'] }\n  - { title: 'Color variant' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/range-inputs.mdx",
    "content": "---\ntitle: Range Inputs\ndescription: Range input slider components for volume controls, price filters, and value selectors with custom styling.\ncategory: application\nslug: range-inputs\nwrapper: h-[200px]\nterms:\n  - filter\n  - form\n  - slider\ncomponents:\n  - { title: 'Base', contributors: ['Kryonn'] }\n  - { title: 'Base with output' }\n  - { title: 'Base with min and max labels' }\n  - { title: 'Native with tick marks' }\n  - { title: 'Native with label marks' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/selects.mdx",
    "content": "---\ntitle: Selects\ndescription: Customizable select components and responsive dropdown menus for filtering data, user preferences, and form controls in web applications.\ncategory: application\nslug: selects\nwrapper: h-[400px]\nterms:\n  - dropdown\n  - filter\n  - form\ncomponents:\n  - { title: 'Base', dark: true, plugins: ['@tailwindcss/forms'] }\n  - { title: 'Option groups', dark: true, plugins: ['@tailwindcss/forms'] }\n  - { title: 'Datalist', dark: true, plugins: ['@tailwindcss/forms'] }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/side-menu.mdx",
    "content": "---\ntitle: Side Menu\ndescription: Responsive side menu and navigation components for dashboards, admin panels, and web applications.\ncategory: application\nslug: side-menu\nterms:\n  - navigation\ncomponents:\n  - { title: 'Logo, links with accordion menu and profile details' }\n  - { title: 'Icon, links with tooltips and logout action' }\n  - { title: 'Multi layout with icon, links with tooltips, logout action and links\n        with accordion menu' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/skip-links.mdx",
    "content": "---\ntitle: Skip Links\ndescription: Skip link navigation components for keyboard navigation and screen reader support.\ncategory: application\nslug: skip-links\nwrapper: h-[300px]\nterms:\n  - navigation\ncomponents:\n  - { title: 'Basic skip link' }\n  - { title: 'Multiple skip links with dark background' }\n  - { title: 'Skip links with title and light background' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/stats.mdx",
    "content": "---\ntitle: Stats\ndescription: Stat block components for displaying key metrics, growth indicators, and performance data in dashboards, admin panels, and analytics pages.\ncategory: application\nslug: stats\nwrapper: h-[400px]\nterms:\n  - analytics\n  - feedback\n  - metric\ncomponents:\n  - { title: 'Title, value, from value and themed growth stat', dark: true }\n  - { title: 'Title, value, icon and themed growth stat', dark: true }\n  - { title: 'Title, value and themed growth stat', dark: true }\n  - { title: 'Title, value and icon', dark: true }\n  - { title: 'Title, value and themed growth stat, stacked style', dark: true }\n  - { title: 'Title, value, icon and themed growth stat, stacked style', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/steps.mdx",
    "content": "---\ntitle: Steps\ndescription: Step indicator components for onboarding, progress tracking, and multi-step forms in web applications.\ncategory: application\nslug: steps\nwrapper: h-[200px]\nterms:\n  - breadcrumb\n  - progress\n  - navigation\ncomponents:\n  - { title: 'Title, icon and progress bar', dark: { contributors: ['WinnyChang'] } }\n  - { title: 'Title, step/total and progress bar', dark: { contributors: ['WinnyChang'] } }\n  - { title: 'Title, check icon and progress bar', dark: { contributors: ['WinnyChang'] } }\n  - {\n      title: 'Grouped with title and description, with highlighted current step',\n      dark: { contributors: ['WinnyChang'] },\n    }\n  - {\n      title: 'Timeline with title, with highlighted current step',\n      dark: { contributors: ['WinnyChang'] },\n    }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/tables.mdx",
    "content": "---\ntitle: Tables\ndescription: Responsive table components for displaying data in dashboards, admin panels, and web applications with bordered, striped, and sticky header options.\ncategory: application\nslug: tables\nwrapper: h-[400px]\nterms:\n  - data\ncomponents:\n  - { title: 'Base', dark: true }\n  - { title: 'Bordered', dark: true }\n  - { title: 'Striped', dark: true }\n  - { title: 'Sticky headings', dark: true }\n  - { title: 'Sticky first column', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/tabs.mdx",
    "content": "---\ntitle: Tabs\ndescription: Responsive tab components for organizing content sections with customizable styles, icons, and interactions.\ncategory: application\nslug: tabs\nwrapper: h-[400px]\nterms:\n  - navigation\ncomponents:\n  - { title: 'Base', dark: true }\n  - { title: 'With icons', dark: true }\n  - { title: 'Vertical', dark: true }\n  - { title: 'Underline', dark: true }\n  - { title: 'Pills', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/textareas.mdx",
    "content": "---\ntitle: Textareas\ndescription: Textarea components for forms and user input fields, ideal for web applications, contact forms, comment sections, and feedback forms.\ncategory: application\nslug: textareas\nwrapper: h-[400px]\nterms:\n  - form\n  - input\ncomponents:\n  - { title: 'Base', dark: true, plugins: ['@tailwindcss/forms'] }\n  - { title: 'Actions inside', dark: true, plugins: ['@tailwindcss/forms'] }\n  - { title: 'Actions outside', dark: true, plugins: ['@tailwindcss/forms'] }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/timelines.mdx",
    "content": "---\ntitle: Timelines\ndescription: Timeline components for visualizing project roadmaps, company histories, event sequences, and progress tracking with responsive designs.\ncategory: application\nslug: timelines\nterms:\n  - history\n  - roadmap\ncomponents:\n  - { title: 'Vertical', dark: true }\n  - { title: 'Vertical with middle line', dark: true }\n  - { title: 'Horizontal', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/toasts.mdx",
    "content": "---\ntitle: Toasts\ndescription: Toast notification components for displaying temporary feedback messages including success, error, warning, and info states with customizable positioning.\ncategory: application\nslug: toasts\nwrapper: h-[400px]\nterms:\n  - alert\n  - feedback\n  - notification\ncomponents:\n  - { title: 'Success', dark: true }\n  - { title: 'Error', dark: true }\n  - { title: 'Warning', dark: true }\n  - { title: 'Info', dark: true }\n  - { title: 'With action button', dark: true }\n  - { title: 'Standout', dark: { contributors: ['WinnyChang'] } }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/toggles.mdx",
    "content": "---\ntitle: Toggles\ndescription: Toggle and switch components for forms, settings, and user preferences in web applications with responsive, customizable designs.\ncategory: application\nslug: toggles\nwrapper: h-[200px]\nterms:\n  - form\n  - switch\ncomponents:\n  - { title: 'Base', dark: true, plugins: ['@tailwindcss/forms'], contributors: ['Aniket1026'] }\n  - {\n      title: 'Base with icon',\n      dark: true,\n      plugins: ['@tailwindcss/forms'],\n      contributors: ['Aniket1026'],\n    }\n  - {\n      title: 'Material',\n      dark: true,\n      plugins: ['@tailwindcss/forms'],\n      contributors: ['GlintonLiao'],\n    }\n  - { title: 'Apple', dark: true, plugins: ['@tailwindcss/forms'], contributors: ['GlintonLiao'] }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/application/vertical-menu.mdx",
    "content": "---\ntitle: Vertical Menu\ndescription: Vertical menu components for sidebar navigation and menu design in applications with modern, customizable patterns and badge/icon support.\ncategory: application\nslug: vertical-menu\nterms:\n  - navigation\n  - sidebar\ncomponents:\n  - { title: 'Base', dark: true }\n  - { title: 'Base with badge', dark: true }\n  - { title: 'Base with icon', dark: true }\n  - { title: 'Base with badge, icon', dark: true }\n  - { title: 'Base with icon, color with left border', dark: true }\n  - { title: 'Accordion menu', dark: true }\n  - { title: 'Accordion menu with icon', dark: true }\n  - { title: 'Base with divided sections', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/announcements.mdx",
    "content": "---\ntitle: Announcements\ndescription: Discover announcement components built with Tailwind CSS v4. These responsive, accessible banners and notification bars are perfect for marketing websites, SaaS products, and eCommerce stores. Easily highlight updates, promotions, or important messages with customizable UI elements optimized for SEO and user engagement.\ncategory: marketing\nslug: announcements\nwrapper: h-[200px]\nterms:\n  - banner\n  - feedback\n  - notification\ncomponents:\n  - { title: 'Base', dark: { contributors: ['WinnyChang'] } }\n  - { title: 'Base with dismiss', dark: { contributors: ['WinnyChang'] } }\n  - { title: 'Fixed', dark: { contributors: ['WinnyChang'] } }\n  - { title: 'Fixed with dismiss', dark: { contributors: ['WinnyChang'] } }\n  - { title: 'Floating', dark: { contributors: ['WinnyChang'] } }\n  - { title: 'Floating with dismiss', dark: { contributors: ['WinnyChang'] } }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/banners.mdx",
    "content": "---\ntitle: Banners\ndescription: Responsive, customizable banner and hero section components for marketing websites. Built with Tailwind CSS v4, these banner designs feature clean layouts, flexible content areas, and mobile-friendly interfaces. Perfect for landing pages, promotional announcements, and website headers that drive user engagement and conversion.\ncategory: marketing\nslug: banners\nterms:\n  - hero\ncomponents:\n  - { title: 'Center', dark: true }\n  - { title: 'Left', dark: true }\n  - { title: 'Left with image', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/blog-cards.mdx",
    "content": "---\ntitle: Blog Cards\ndescription: Discover modern blog card components built with Tailwind CSS v4. Enhance your marketing pages with responsive, customizable blog cards for posts, articles, and news—optimized for performance and SEO.\ncategory: marketing\nslug: blog-cards\nterms:\n  - blog\n  - post\ncomponents:\n  - { title: 'Bordered with image, date, title and excerpt, shadow on hover', dark: true }\n  - { title: 'Floating image with title and excerpt', dark: true }\n  - { title: 'Bordered with image, title, excerpt and call to action', dark: true }\n  - { title: 'Gradient border with date, title and tags, animated gradient on hover', dark: true }\n  - { title: 'Bordered with icon, title, excerpt and call to action, shadow on hover', dark: true }\n  - { title: 'Artistic with rotated date, image, title, excerpt and call to action,\n        shadow on hover', dark: true }\n  - { title: 'Background image with overlay containing date, title and excerpt' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/buttons.mdx",
    "content": "---\ntitle: Buttons\ndescription: Explore a curated collection of button components built with Tailwind CSS v4. Discover modern, responsive, and customizable buttons for marketing websites, optimized for performance and accessibility.\ncategory: marketing\nslug: buttons\nwrapper: h-[200px]\nterms:\n  - action\n  - cta\ncomponents:\n  - { title: 'Base, solid and bordered' }\n  - { title: 'Base with icon, solid and bordered' }\n  - { title: 'Gradient border, rounded and pill' }\n  - { title: 'Icon, solid and bordered' }\n  - { title: 'Drop shadow, hide shadow and show shadow on hover' }\n  - { title: 'Base with icon on hover, solid, bordered and icon left/right' }\n  - { title: 'Base with shadow and expand on hover, solid and bordered' }\n  - { title: 'Base with rotate and expand on hover, solid, outline and rotate\n        left/right' }\n  - { title: 'Artistic with offset background, background moves in and out on hover' }\n  - { title: 'Highlighted border which expands on hover, left, right, bottom and left' }\n  - { title: 'Large with emphasized icon, solid and bordered' }\n  - { title: 'Reveal hidden static border on hover, solid and bordered' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/cards.mdx",
    "content": "---\ntitle: Cards\ndescription: Explore a variety of card components designed with Tailwind CSS v4. These responsive, SEO-friendly cards are ideal for showcasing content, products, blog posts, and user profiles on modern marketing websites and applications. Fully customizable for any project.\ncategory: marketing\nslug: cards\nterms:\n  - profile\n  - post\ncomponents:\n  - { title: 'Title, author, avatar, excerpt, published date and reading time' }\n  - { title: 'Stacked with Large Image and Content' }\n  - { title: 'Darkened Background with Content on Hover' }\n  - { title: 'Bordered with Content on Hover' }\n  - { title: 'Bordered with Image, Price, Content and Details' }\n  - { title: 'Image, Name, with Social Links and Project Links' }\n  - { title: 'Shaped with Image and Content' }\n  - { title: 'Podcast Post' }\n  - { title: 'Forum Post' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/carts.mdx",
    "content": "---\ntitle: Carts\ndescription: Cart components crafted with Tailwind CSS v4 for eCommerce and online stores. These responsive, accessible shopping cart UIs are fully customizable and optimized for seamless checkout experiences, mobile usability, and SEO best practices.\ncategory: marketing\nslug: carts\nterms:\n  - checkout\n  - ecommerce\ncomponents:\n  - { title: 'Popup' }\n  - { title: 'Popup with actions', plugins: ['@tailwindcss/forms'] }\n  - { title: 'Page', plugins: ['@tailwindcss/forms'] }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/contact-forms.mdx",
    "content": "---\ntitle: Contact Forms\ndescription: Explore a curated collection of contact form components built with Tailwind CSS v4. Display contact forms with modern, responsive layouts perfect for marketing websites and lead generation.\ncategory: marketing\nslug: contact-forms\nterms:\n  - input\n  - inquiry\n  - newsletter\ncomponents:\n  - { title: 'Base', dark: true, plugins: ['@tailwindcss/forms'] }\n  - { title: 'Base with triage', dark: true, plugins: ['@tailwindcss/forms'] }\n  - { title: 'Base with checkboxes', dark: true, plugins: ['@tailwindcss/forms'] }\n  - { title: 'Grid', dark: true, plugins: ['@tailwindcss/forms'] }\n  - { title: 'Side-by-side form with description', dark: true, plugins: ['@tailwindcss/forms'] }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/ctas.mdx",
    "content": "---\ntitle: CTAs\ndescription: Discover high-converting CTA components built with Tailwind CSS v4. Boost your marketing campaigns with modern, responsive call-to-action designs optimized for engagement and conversion.\ncategory: marketing\nslug: ctas\nterms:\n  - marketing\n  - signup\ncomponents:\n  - { title: 'Base with content and call to action on the left, image on the right', dark: true }\n  - { title: 'Newsletter sign up form with centered content and form', dark: true }\n  - { title: 'Base with content can call to action on the left, offset image on the\n        right', dark: true }\n  - { title: 'Content and call to action in block color on the left, grid of images\n        on the right' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/empty-content.mdx",
    "content": "---\ntitle: Empty Content\ndescription: Empty content components for Tailwind CSS. Engagement-focused patterns for marketing sites and e-commerce with friendly messaging and exploration-oriented actions, helping users discover related content and stay engaged.\ncategory: marketing\nslug: empty-content\nterms:\n  - placeholder\ncomponents:\n  - { title: 'No search results', dark: true }\n  - { title: 'No search results (alternative)', dark: true }\n  - { title: 'Coming soon', dark: true }\n  - { title: 'Related content', dark: true }\n  - { title: 'No stock', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/faqs.mdx",
    "content": "---\ntitle: FAQs\ndescription: Selection of FAQ components created with Tailwind CSS v4, featuring responsive design, interactive toggles, and customizable styling. Perfect for websites, landing pages, and knowledge bases to improve user experience and SEO through structured question-answer formats.\ncategory: marketing\nslug: faqs\nterms:\n  - question\n  - answer\n  - support\ncomponents:\n  - { title: 'Base with chevrons', dark: true }\n  - { title: 'Divided with chevrons', dark: true }\n  - { title: 'Background', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/feature-grids.mdx",
    "content": "---\ntitle: Feature Grids\ndescription: Explore a curated collection of feature grid components built with Tailwind CSS v4. Display product features, benefits, and service highlights with modern, responsive layouts perfect for marketing websites.\ncategory: marketing\nslug: feature-grids\nterms:\n  - benefits\n  - highlights\ncomponents:\n  - { title: 'Grid with content', dark: true }\n  - { title: 'List with content', dark: true }\n  - { title: 'Simple grid', dark: true }\n  - { title: 'Grid with list items', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/footers.mdx",
    "content": "---\ntitle: Footers\ndescription: Explore our collection of responsive footer components, designed with Tailwind CSS v4. These customizable website footers enhance user navigation, SEO, and brand presence while maintaining accessibility and performance standards.\ncategory: marketing\nslug: footers\nterms:\n  - layout\n  - navigation\ncomponents:\n  - { title: 'Large with newsletter form', dark: true, plugins: ['@tailwindcss/forms'] }\n  - { title: 'Simple stacked', dark: true }\n  - { title: 'Simple row', dark: true }\n  - { title: 'Call to action with gradient', dark: true }\n  - { title: 'Split with company info, links and image', dark: true }\n  - {\n      title: 'Split with company info, links and call to action',\n      dark: true,\n      plugins: ['@tailwindcss/forms'],\n    }\n  - { title: 'Newsletter form as priority', dark: true, plugins: ['@tailwindcss/forms'] }\n  - { title: 'Centered with branding', dark: true }\n  - { title: 'Slim with branding and link top', dark: true }\n  - { title: 'Company info and links', dark: true }\n  - { title: 'Inline with logo and copyright', dark: true }\n  - { title: 'With call to action', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/headers.mdx",
    "content": "---\ntitle: Header\ndescription: Header components designed with Tailwind CSS v4 for marketing websites and web applications. These responsive, SEO-optimized headers feature navigation, branding, and call-to-action layouts, making them perfect for landing pages, SaaS, and eCommerce projects.\ncategory: marketing\nslug: headers\nwrapper: h-[400px]\nterms:\n  - layout\n  - navigation\ncomponents:\n  - { title: 'Icon and links on the left, call to actions on the right', dark: true }\n  - { title: 'Icon on the left, links in the middle and call to actions on the right', dark: true }\n  - { title: 'Icon on the left, links and call to actions on the right', dark: true }\n  - { title: 'Icon on the left, links and user dropdown on the right', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/logo-clouds.mdx",
    "content": "---\ntitle: Logo Clouds\ndescription: Explore a curated collection of logo cloud components built with Tailwind CSS v4. Display client, partner, and brand logos with modern, responsive layouts perfect for marketing websites.\ncategory: marketing\nslug: logo-clouds\nwrapper: h-[400px]\nterms:\n  - brand\n  - social\ncomponents:\n  - { title: 'Base' }\n  - { title: 'Base with title' }\n  - { title: 'Base with title left aligned' }\n  - { title: 'Grid' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/newsletter-signup.mdx",
    "content": "---\ntitle: Newsletter Signup\ndescription: Newsletter signup components created with Tailwind CSS v4. Perfect for capturing email leads and growing your audience on marketing websites and web applications.\ncategory: marketing\nslug: newsletter-signup\nterms:\n  - email\n  - form\ncomponents:\n  - { title: 'Simple signup', plugins: ['@tailwindcss/forms'], dark: true }\n  - { title: 'Simple signup centered', plugins: ['@tailwindcss/forms'], dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/polls.mdx",
    "content": "---\ntitle: Polls\ndescription: Interactive poll and survey components built with Tailwind CSS v4. Use these blocks to gather feedback, run surveys, or engage users on marketing websites and web applications.\ncategory: marketing\nslug: polls\nterms:\n  - feedback\n  - survey\ncomponents:\n  - { title: 'Single question poll', plugins: ['@tailwindcss/forms'], dark: true }\n  - { title: 'Multiple choice survey', plugins: ['@tailwindcss/forms'], dark: true }\n  - { title: 'Rating poll', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/pricing.mdx",
    "content": "---\ntitle: Pricing\ndescription: Pricing components built with Tailwind CSS v4. These responsive, customizable pricing tables and plan layouts are ideal for SaaS, eCommerce, and service websites. Improve conversions and SEO with clear, accessible pricing options for your users.\ncategory: marketing\nslug: pricing\nterms:\n  - plan\n  - subscription\ncomponents:\n  - { title: 'Options with tier, price, features and call to action with highlighted\n        option' }\n  - { title: 'Options with tier, description, price, call to action and features' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/product-cards.mdx",
    "content": "---\ntitle: Product Cards\ndescription: Product card components built with Tailwind CSS v4. These responsive, SEO-friendly cards are perfect for showcasing products in eCommerce stores, landing pages, and marketing sites. Easily customizable for any brand or catalog.\ncategory: marketing\nslug: product-cards\nterms:\n  - card\n  - ecommerce\ncomponents:\n  - { title: 'Product with image, title and price' }\n  - { title: 'Product with image, title, price and variant count' }\n  - { title: 'Product with image, title, price and description' }\n  - { title: 'Product with rounded image, title and price' }\n  - { title: 'Product with image, title, price and variant options' }\n  - { title: 'Product with image, title, price, tag, wishlist and call to action' }\n  - { title: 'Product with image, title, description, offer and call to action' }\n  - { title: 'Product with image, title, price, wishlist and call to actions' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/product-collections.mdx",
    "content": "---\ntitle: Product Collections\ndescription: Product collection components built with Tailwind CSS v4. These responsive, customizable layouts are ideal for displaying product groups, categories, and featured items in eCommerce and marketing websites. Optimized for SEO and user experience.\ncategory: marketing\nslug: product-collections\nterms:\n  - ecommerce\ncomponents:\n  - { title: 'Base' }\n  - { title: 'Base with centered title' }\n  - { title: 'Filtering (Dropdown)' }\n  - { title: 'Filtering (Side)' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/sections.mdx",
    "content": "---\ntitle: Sections\ndescription: Section components created with Tailwind CSS v4. These responsive, SEO-optimized layouts are perfect for building content blocks, feature sections, and landing page segments for marketing websites and web applications.\ncategory: marketing\nslug: sections\nterms:\n  - content\ncomponents:\n  - { title: 'Content with image, 1/2 grid' }\n  - { title: 'Content with image, 2/3 grid' }\n  - { title: 'Content with image, 3/2 grid' }\n  - { title: 'Content with image, vertical split' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/marketing/team-sections.mdx",
    "content": "---\ntitle: Team Sections\ndescription: Explore a curated collection of team section components built with Tailwind CSS v4. Display team member profiles with images, names, roles, and social links perfect for company websites and about pages.\ncategory: marketing\nslug: team-sections\nterms:\n  - people\n  - staff\ncomponents:\n  - { title: 'Base', dark: true }\n  - { title: 'Base with description', dark: true }\n  - { title: 'Small', dark: true }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/neobrutalism/accordions.mdx",
    "content": "---\ntitle: Accordions\ndescription: Neobrutalism-style accordion components built with Tailwind CSS v4. Featuring thick borders, hard shadows, and bold typography. Perfect for adding a retro, high-contrast look to your FAQs, collapsible content, and information sections.\ncategory: neobrutalism\nslug: accordions\nterms:\n  - accordion\n  - faq\n  - collapse\ncomponents:\n  - { title: 'Base' }\n  - { title: 'Contained' }\n  - { title: 'Grouped' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/neobrutalism/alerts.mdx",
    "content": "---\ntitle: Alerts\ndescription: Neobrutalism-style alert components built with Tailwind CSS v4. Featuring thick borders, hard shadows, and bold colors. Perfect for displaying important messages, notifications, and feedback with a retro, high-contrast look.\ncategory: neobrutalism\nslug: alerts\nwrapper: h-[400px]\nterms:\n  - toast\n  - feedback\n  - notification\ncomponents:\n  - { title: 'Info' }\n  - { title: 'Success' }\n  - { title: 'Error' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/neobrutalism/badges.mdx",
    "content": "---\ntitle: Badges\ndescription: Neobrutalism-style badge components built with Tailwind CSS v4. Featuring thick borders, hard shadows, and bold typography. Ideal for labeling content, status indicators, and tags with a distinct, retro aesthetic.\ncategory: neobrutalism\nslug: badges\nwrapper: h-[200px]\nterms:\n  - alert\n  - status\n  - tag\ncomponents:\n  - { title: 'Base' }\n  - { title: 'Base with status' }\n  - { title: 'Base with dismiss' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/neobrutalism/buttons.mdx",
    "content": "---\ntitle: Buttons\ndescription: Neobrutalism-style button components built with Tailwind CSS v4. Featuring thick borders, hard shadows, and interactive hover states. Perfect for calls-to-action, forms, and navigation with a bold, retro design.\ncategory: neobrutalism\nslug: buttons\nwrapper: h-[200px]\nterms:\n  - action\n  - cta\ncomponents:\n  - { title: 'Base' }\n  - { title: 'Pressed' }\n  - { title: 'Pressed with inset' }\n  - { title: 'Underlined' }\n  - { title: 'Double border' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/neobrutalism/cards.mdx",
    "content": "---\ntitle: Cards\ndescription: Neobrutalism-style card components built with Tailwind CSS v4. Featuring thick borders, hard shadows, and distinct layouts. Great for displaying content, products, and features with a unique, high-contrast retro style.\ncategory: neobrutalism\nslug: cards\nterms:\n  - card\n  - container\ncomponents:\n  - { title: 'Base' }\n  - { title: 'Base stacked' }\n  - { title: 'Base dashed' }\n  - { title: 'Retro window' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/neobrutalism/checkboxes.mdx",
    "content": "---\ntitle: Checkboxes\ndescription: Neobrutalism-style checkbox components built with Tailwind CSS v4. Featuring thick borders, hard shadows, and custom check marks. Perfect for forms, filters, and settings requiring a bold, retro interactive element.\ncategory: neobrutalism\nslug: checkboxes\nwrapper: h-[400px]\nterms:\n  - filter\n  - form\n  - input\ncomponents:\n  - { title: 'Base', plugins: ['@tailwindcss/forms'] }\n  - { title: 'Base with description', plugins: ['@tailwindcss/forms'] }\n  - { title: 'Grouped', plugins: ['@tailwindcss/forms'] }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/neobrutalism/inputs.mdx",
    "content": "---\ntitle: Inputs\ndescription: Neobrutalism-style input components built with Tailwind CSS v4. Featuring thick borders, hard shadows, and bold focus states. Ideal for search bars, contact forms, and data entry with a distinctive retro look.\ncategory: neobrutalism\nslug: inputs\nwrapper: h-[200px]\nterms:\n  - filter\n  - form\ncomponents:\n  - { title: 'Base', plugins: ['@tailwindcss/forms'] }\n  - { title: 'Base with icon', plugins: ['@tailwindcss/forms'] }\n  - { title: 'Search', plugins: ['@tailwindcss/forms'] }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/neobrutalism/progress-bars.mdx",
    "content": "---\ntitle: Progress Bars\ndescription: Neobrutalism-style progress bar components built with Tailwind CSS v4. Featuring thick borders, hard shadows, and bold fill patterns. Perfect for loading states, completion tracking, and status indicators with a retro flair.\ncategory: neobrutalism\nslug: progress-bars\nwrapper: h-[400px]\nterms:\n  - indicator\n  - loading\n  - status\ncomponents:\n  - { title: 'Base' }\n  - { title: 'Striped' }\n  - { title: 'Status' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/neobrutalism/selects.mdx",
    "content": "---\ntitle: Selects\ndescription: Neobrutalism-style select components built with Tailwind CSS v4. Featuring thick borders, hard shadows, and custom dropdown styling. Great for forms, filtering options, and menus with a bold, high-contrast design.\ncategory: neobrutalism\nslug: selects\nwrapper: h-[400px]\nterms:\n  - dropdown\n  - filter\n  - form\ncomponents:\n  - { title: 'Base', plugins: ['@tailwindcss/forms'] }\n  - { title: 'Option groups', plugins: ['@tailwindcss/forms'] }\n  - { title: 'Datalist', plugins: ['@tailwindcss/forms'] }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/neobrutalism/tabs.mdx",
    "content": "---\ntitle: Tabs\ndescription: Brutalist tab components for Tailwind CSS v4. Bold, minimalist tabbed navigation with stark borders, high contrast, and raw typography. Stripped-down tabs UI for no-nonsense content organization.\ncategory: neobrutalism\nslug: tabs\nwrapper: h-[400px]\nterms:\n  - navigation\ncomponents:\n  - { title: 'Base' }\n  - { title: 'Contained' }\n  - { title: 'Pills' }\n  - { title: 'Vertical' }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content/collection/neobrutalism/textareas.mdx",
    "content": "---\ntitle: Textareas\ndescription: Neobrutalism-style textarea components built with Tailwind CSS v4. Featuring thick borders, hard shadows, and resizable layouts. Perfect for comments, messages, and long-form input with a retro, neobrutalist aesthetic.\ncategory: neobrutalism\nslug: textareas\nwrapper: h-[400px]\nterms:\n  - form\n  - input\ncomponents:\n  - { title: 'Base', plugins: ['@tailwindcss/forms'] }\n  - { title: 'Actions inside', plugins: ['@tailwindcss/forms'] }\n  - { title: 'Actions outside', plugins: ['@tailwindcss/forms'] }\n---\n\nimport BaseHero from '../../../components/BaseHero.astro'\n\n<BaseHero title={frontmatter.title} description={frontmatter.description} />\n"
  },
  {
    "path": "src/content.config.ts",
    "content": "import { defineCollection } from 'astro:content'\nimport { glob } from 'astro/loaders'\nimport { z } from 'astro/zod'\n\nconst blog = defineCollection({\n  loader: glob({\n    base: './src/content/blog',\n    pattern: '**/*.{md,mdx}',\n    retainBody: true,\n  }),\n  schema: () =>\n    z.object({\n      description: z.string(),\n      pubDate: z.coerce.date(),\n      slug: z.string(),\n      terms: z.array(z.string()),\n      title: z.string(),\n      updatedDate: z.coerce.date(),\n    }),\n})\n\nconst collection = z.object({\n  description: z.string(),\n  slug: z.string(),\n  terms: z.array(z.string()),\n  title: z.string(),\n  wrapper: z.string().default('h-[600px]'),\n  components: z.array(\n    z.object({\n      contributors: z.array(z.string()).default(['markmead']),\n      description: z.string().optional(),\n      title: z.string(),\n      dark: z\n        .union([\n          z.boolean(),\n          z.object({\n            contributors: z.array(z.string()).default(['markmead']),\n          }),\n        ])\n        .optional(),\n      plugins: z.array(z.string()).optional(),\n    }),\n  ),\n})\n\nconst application = defineCollection({\n  loader: glob({\n    base: './src/content/collection/application',\n    pattern: '**/*.{md,mdx}',\n    retainBody: false,\n  }),\n  schema: collection.extend({\n    category: z.literal('application'),\n  }),\n})\n\nconst marketing = defineCollection({\n  loader: glob({\n    base: './src/content/collection/marketing',\n    pattern: '**/*.{md,mdx}',\n    retainBody: false,\n  }),\n  schema: collection.extend({\n    category: z.literal('marketing'),\n  }),\n})\n\nconst neobrutalism = defineCollection({\n  loader: glob({\n    base: './src/content/collection/neobrutalism',\n    pattern: '**/*.{md,mdx}',\n    retainBody: false,\n  }),\n  schema: collection.extend({\n    category: z.literal('neobrutalism'),\n  }),\n})\n\nexport const collections = { blog, application, marketing, neobrutalism }\n"
  },
  {
    "path": "src/layouts/BaseLayout.astro",
    "content": "---\nimport Analytics from '@vercel/analytics/astro'\n\nimport SiteHeader from '../components/SiteHeader.astro'\nimport SiteFooter from '../components/SiteFooter.astro'\nimport BaseHead from '../components/BaseHead.astro'\n\ninterface Props {\n  title: string\n  description: string\n}\n\nconst { title, description } = Astro.props\n---\n\n<html lang=\"en\" class=\"scroll-pt-16 scroll-smooth\">\n  <head>\n    <BaseHead {title} {description} />\n\n    <slot name=\"head\" />\n  </head>\n  <body class=\"font-sans antialiased\">\n    <a\n      href=\"#main-content\"\n      class=\"sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-60 focus:rounded-lg focus:bg-white focus:px-4 focus:py-2 focus:font-medium focus:text-gray-900 focus:shadow-lg\"\n    >\n      Skip to content\n    </a>\n\n    <SiteHeader />\n\n    <slot />\n\n    <SiteFooter />\n\n    <Analytics />\n  </body>\n</html>\n"
  },
  {
    "path": "src/layouts/BlogPost.astro",
    "content": "---\nimport type { CollectionEntry } from 'astro:content'\n\nimport { ArrowLeft, Calendar, Clock } from '@lucide/astro'\n\nimport { calculateReadingTime } from '../utils/readingTime'\n\nimport BaseLayout from './BaseLayout.astro'\nimport FormattedDate from '../components/FormattedDate.astro'\n\ntype Props = CollectionEntry<'blog'>\n\nconst { data, body } = Astro.props\n\nconst { title, description, pubDate, updatedDate } = data\n\nconst readingTime = calculateReadingTime(body ?? '')\n\nconst canonicalURL = new URL(Astro.url.pathname, Astro.site)\n\nconst blogPostSchema = {\n  '@context': 'https://schema.org',\n  '@type': 'BlogPosting',\n  headline: title,\n  description,\n  mainEntityOfPage: canonicalURL,\n  datePublished: pubDate.toISOString(),\n  dateModified: updatedDate.toISOString(),\n  author: {\n    '@type': 'Organization',\n    name: 'HyperUI',\n  },\n  publisher: {\n    '@type': 'Organization',\n    name: 'HyperUI',\n    url: Astro.site,\n  },\n}\n---\n\n<BaseLayout {title} {description}>\n  <script\n    type=\"application/ld+json\"\n    slot=\"head\"\n    is:inline\n    set:html={JSON.stringify(blogPostSchema)}\n  />\n\n  <main id=\"main-content\" class=\"mx-auto max-w-3xl px-4 py-8 md:py-16\">\n    <article>\n      <a\n        href=\"/blog\"\n        class=\"inline-flex items-center gap-2 text-gray-700 transition-colors hover:text-gray-900\"\n      >\n        <ArrowLeft class=\"size-5\" />\n\n        <span>Back to blog</span>\n      </a>\n\n      <header class=\"mt-8 space-y-4\">\n        <div class=\"flex items-center gap-4 text-sm text-gray-600\">\n          <div class=\"flex items-center gap-1.5\">\n            <Calendar class=\"size-4\" />\n\n            <FormattedDate date={updatedDate} />\n          </div>\n\n          <div class=\"flex items-center gap-1.5\">\n            <Clock class=\"size-4\" />\n\n            <span>{readingTime} min read</span>\n          </div>\n        </div>\n\n        <h1 class=\"text-4xl font-medium md:text-5xl\">{title}</h1>\n\n        <p class=\"text-xl text-gray-600\">\n          {description}\n        </p>\n      </header>\n\n      <div class=\"prose prose-headings:font-medium mt-8 max-w-none border-t border-gray-200 pt-8\">\n        <slot />\n      </div>\n\n      <footer class=\"mt-16 border-t border-gray-200 pt-8\">\n        <a\n          href=\"/blog\"\n          class=\"inline-flex items-center justify-center gap-2 rounded-md border border-gray-200 bg-white px-4 py-2 text-sm text-gray-900 transition-colors hover:bg-gray-50 disabled:pointer-events-none disabled:opacity-50\"\n        >\n          <ArrowLeft class=\"size-5\" />\n\n          <span>Back to all articles</span>\n        </a>\n      </footer>\n    </article>\n  </main>\n</BaseLayout>\n"
  },
  {
    "path": "src/layouts/ComponentPost.astro",
    "content": "---\nimport type { CollectionEntry } from 'astro:content'\nimport type { ComponentPreview } from '../types/component'\n\nimport BaseLayout from './BaseLayout.astro'\nimport PreviewWrapper from '../components/PreviewWrapper.astro'\nimport RelatedComponents from '../components/RelatedComponents.astro'\n\ntype Props =\n  | CollectionEntry<'application'>['data']\n  | CollectionEntry<'marketing'>['data']\n  | CollectionEntry<'neobrutalism'>['data']\n\nconst { title, category, components, description, slug, terms, wrapper } = Astro.props\n\nconst pageTitle = `Free Tailwind CSS ${title}`\n\nconst formattedComponents: ComponentPreview[] = components\n  .map((component, index) => {\n    const { dark, ...rest } = component\n\n    const baseComponent = {\n      ...rest,\n      dark: false,\n      id: `component-${index + 1}`,\n      index: index + 1,\n    }\n\n    if (!dark) {\n      return [baseComponent]\n    }\n\n    const contributors =\n      Object.prototype.toString.call(dark) === '[object Object]'\n        ? // @ts-expect-error We know dark is an object at this point.\n          dark.contributors\n        : component.contributors\n\n    return [\n      baseComponent,\n      {\n        ...rest,\n        contributors,\n        dark: true,\n        id: `component-${index + 1}-dark`,\n        index: index + 1,\n        title: `${component.title} (Dark)`,\n      },\n    ]\n  })\n  .flat()\n\nconst canonicalURL = new URL(Astro.url.pathname, Astro.site)\n\nconst componentPageSchema = {\n  '@context': 'https://schema.org',\n  '@type': 'CollectionPage',\n  name: pageTitle,\n  description,\n  url: canonicalURL,\n  isPartOf: {\n    '@type': 'WebSite',\n    name: 'HyperUI',\n    url: Astro.site,\n  },\n  mainEntity: {\n    '@type': 'ItemList',\n    itemListElement: formattedComponents.map((component, index) => ({\n      '@type': 'ListItem',\n      position: index + 1,\n      name: component.title,\n      url: `${canonicalURL}#${component.id}`,\n    })),\n  },\n}\n---\n\n<BaseLayout title={pageTitle} {description}>\n  <script\n    type=\"application/ld+json\"\n    slot=\"head\"\n    is:inline\n    set:html={JSON.stringify(componentPageSchema)}\n  />\n\n  <main id=\"main-content\">\n    <slot />\n\n    <div class=\"mx-auto max-w-7xl space-y-8 px-4\">\n      {\n        formattedComponents.map((component) => (\n          <PreviewWrapper {component} {category} {slug} {wrapper} />\n        ))\n      }\n\n      <RelatedComponents {slug} {terms} {category} />\n    </div>\n  </main>\n</BaseLayout>\n"
  },
  {
    "path": "src/layouts/ErrorLayout.astro",
    "content": "---\nimport Analytics from '@vercel/analytics/astro'\n\nimport BaseHead from '../components/BaseHead.astro'\n\ninterface Props {\n  title: string\n  description: string\n}\n\nconst { title, description } = Astro.props\n---\n\n<html lang=\"en\" class=\"scroll-pt-16 scroll-smooth\">\n  <head>\n    <BaseHead {title} {description} />\n\n    <slot name=\"head\" />\n  </head>\n  <body class=\"flex min-h-svh items-center justify-center font-sans antialiased\">\n    <a\n      href=\"#main-content\"\n      class=\"sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-60 focus:rounded-lg focus:bg-white focus:px-4 focus:py-2 focus:font-medium focus:text-gray-900 focus:shadow-lg\"\n    >\n      Skip to content\n    </a>\n\n    <slot />\n\n    <Analytics />\n  </body>\n</html>\n"
  },
  {
    "path": "src/pages/404.astro",
    "content": "---\nimport { ArrowLeft } from '@lucide/astro'\n\nimport ErrorLayout from '../layouts/ErrorLayout.astro'\n---\n\n<ErrorLayout title=\"404 - Page Not Found\" description=\"Page not found\">\n  <main id=\"main-content\" class=\"mx-auto max-w-3xl space-y-6 text-center\">\n    <h1 class=\"text-5xl font-medium text-gray-900\">404 - Page Not Found</h1>\n\n    <p class=\"text-gray-600\">Sorry, the page you are looking for does not exist.</p>\n\n    <a\n      href=\"/\"\n      class=\"inline-flex items-center gap-2 text-gray-700 transition-colors hover:text-gray-900\"\n    >\n      <ArrowLeft class=\"size-5\" />\n\n      <span>Go back home</span>\n    </a>\n  </main>\n</ErrorLayout>\n"
  },
  {
    "path": "src/pages/blog/[...slug].astro",
    "content": "---\nimport { type CollectionEntry, getCollection, render } from 'astro:content'\n\nimport BlogPost from '../../layouts/BlogPost.astro'\n\nexport async function getStaticPaths() {\n  return (await getCollection('blog')).map((post) => ({\n    params: { slug: post.data.slug },\n    props: post,\n  }))\n}\n\ntype Props = CollectionEntry<'blog'>\n\nconst post = Astro.props\n\nconst { Content } = await render(post)\n---\n\n<BlogPost {...post}>\n  <Content />\n</BlogPost>\n"
  },
  {
    "path": "src/pages/blog/index.astro",
    "content": "---\nimport { getCollection } from 'astro:content'\n\nimport { SEO_TITLE_BLOG, SEO_DESCRIPTION_BLOG } from '../../consts'\n\nimport BaseLayout from '../../layouts/BaseLayout.astro'\nimport BaseHero from '../../components/BaseHero.astro'\nimport BlogCard from '../../components/BlogCard.astro'\n\nconst posts = (await getCollection('blog')).sort(\n  (a, b) => b.data.updatedDate.valueOf() - a.data.updatedDate.valueOf(),\n)\n\nconst blogListSchema = {\n  '@context': 'https://schema.org',\n  '@type': 'Blog',\n  name: 'HyperUI Blog',\n  description: SEO_DESCRIPTION_BLOG,\n  url: new URL('/blog', Astro.site),\n  blogPost: posts.map(({ data }) => ({\n    '@type': 'BlogPosting',\n    headline: data.title,\n    description: data.description,\n    datePublished: data.pubDate.toISOString(),\n    dateModified: data.updatedDate.toISOString(),\n    url: new URL(`/blog/${data.slug}`, Astro.site),\n  })),\n}\n---\n\n<BaseLayout title={SEO_TITLE_BLOG} description={SEO_DESCRIPTION_BLOG}>\n  <script\n    type=\"application/ld+json\"\n    slot=\"head\"\n    is:inline\n    set:html={JSON.stringify(blogListSchema)}\n  />\n\n  <BaseHero\n    title=\"Tailwind CSS Blog\"\n    description=\"Tips, tricks and real-world solutions for working with Tailwind CSS\"\n  />\n\n  <main id=\"main-content\" class=\"mx-auto max-w-7xl divide-y divide-gray-200 px-4\">\n    {posts.map((post) => <BlogCard {post} />)}\n  </main>\n</BaseLayout>\n"
  },
  {
    "path": "src/pages/components/application/[...slug].astro",
    "content": "---\nimport { type CollectionEntry, getCollection, render } from 'astro:content'\n\nimport ComponentPost from '../../../layouts/ComponentPost.astro'\n\nexport async function getStaticPaths() {\n  return (await getCollection('application')).map((component) => ({\n    params: { slug: component.data.slug },\n    props: component,\n  }))\n}\n\ntype Props = CollectionEntry<'application'>\n\nconst collection = Astro.props\n\nconst { Content } = await render(collection)\n---\n\n<ComponentPost {...collection.data}>\n  <Content />\n</ComponentPost>\n"
  },
  {
    "path": "src/pages/components/application/index.astro",
    "content": "---\nimport { getCollection } from 'astro:content'\n\nimport {\n  SEO_TITLE_APPLICATION_COMPONENTS,\n  SEO_DESCRIPTION_APPLICATION_COMPONENTS,\n} from '../../../consts'\n\nimport BaseLayout from '../../../layouts/BaseLayout.astro'\nimport ComponentCard from '../../../components/ComponentCard.astro'\nimport BaseHero from '../../../components/BaseHero.astro'\n\nconst components = (await getCollection('application'))\n  .map(({ data }) => data)\n  .sort((a, b) => a.title.localeCompare(b.title))\n---\n\n<BaseLayout\n  title={SEO_TITLE_APPLICATION_COMPONENTS}\n  description={SEO_DESCRIPTION_APPLICATION_COMPONENTS}\n>\n  <BaseHero\n    title=\"Application\"\n    description=\"Free Tailwind CSS application components that can be used in your next project.\"\n  />\n\n  <main id=\"main-content\" class=\"mx-auto max-w-7xl px-4\">\n    <h2 class=\"sr-only\">Application Components</h2>\n\n    <ul class=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n      {components.map((component) => <ComponentCard {component} />)}\n    </ul>\n  </main>\n</BaseLayout>\n"
  },
  {
    "path": "src/pages/components/marketing/[...slug].astro",
    "content": "---\nimport { type CollectionEntry, getCollection, render } from 'astro:content'\n\nimport ComponentPost from '../../../layouts/ComponentPost.astro'\n\nexport async function getStaticPaths() {\n  return (await getCollection('marketing')).map((component) => ({\n    params: { slug: component.data.slug },\n    props: component,\n  }))\n}\n\ntype Props = CollectionEntry<'marketing'>\n\nconst collection = Astro.props\n\nconst { Content } = await render(collection)\n---\n\n<ComponentPost {...collection.data}>\n  <Content />\n</ComponentPost>\n"
  },
  {
    "path": "src/pages/components/marketing/index.astro",
    "content": "---\nimport { getCollection } from 'astro:content'\n\nimport {\n  SEO_TITLE_MARKETING_COMPONENTS,\n  SEO_DESCRIPTION_MARKETING_COMPONENTS,\n} from '../../../consts'\n\nimport BaseLayout from '../../../layouts/BaseLayout.astro'\nimport ComponentCard from '../../../components/ComponentCard.astro'\nimport BaseHero from '../../../components/BaseHero.astro'\n\nconst components = (await getCollection('marketing'))\n  .map(({ data }) => data)\n  .sort((a, b) => a.title.localeCompare(b.title))\n---\n\n<BaseLayout\n  title={SEO_TITLE_MARKETING_COMPONENTS}\n  description={SEO_DESCRIPTION_MARKETING_COMPONENTS}\n>\n  <BaseHero\n    title=\"Marketing\"\n    description=\"Free Tailwind CSS marketing components that can be used in your next project.\"\n  />\n\n  <main id=\"main-content\" class=\"mx-auto max-w-7xl px-4\">\n    <h2 class=\"sr-only\">Marketing Components</h2>\n\n    <ul class=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n      {components.map((component) => <ComponentCard {component} />)}\n    </ul>\n  </main>\n</BaseLayout>\n"
  },
  {
    "path": "src/pages/components/neobrutalism/[...slug].astro",
    "content": "---\nimport { type CollectionEntry, getCollection, render } from 'astro:content'\n\nimport ComponentPost from '../../../layouts/ComponentPost.astro'\n\nexport async function getStaticPaths() {\n  return (await getCollection('neobrutalism')).map((component) => ({\n    params: { slug: component.data.slug },\n    props: component,\n  }))\n}\n\ntype Props = CollectionEntry<'neobrutalism'>\n\nconst collection = Astro.props\n\nconst { Content } = await render(collection)\n---\n\n<ComponentPost {...collection.data}>\n  <Content />\n</ComponentPost>\n"
  },
  {
    "path": "src/pages/components/neobrutalism/index.astro",
    "content": "---\nimport { getCollection } from 'astro:content'\n\nimport {\n  SEO_TITLE_NEOBRUTALISM_COMPONENTS,\n  SEO_DESCRIPTION_NEOBRUTALISM_COMPONENTS,\n} from '../../../consts'\n\nimport BaseLayout from '../../../layouts/BaseLayout.astro'\nimport ComponentCard from '../../../components/ComponentCard.astro'\nimport BaseHero from '../../../components/BaseHero.astro'\n\nconst components = (await getCollection('neobrutalism'))\n  .map(({ data }) => data)\n  .sort((a, b) => a.title.localeCompare(b.title))\n---\n\n<BaseLayout\n  title={SEO_TITLE_NEOBRUTALISM_COMPONENTS}\n  description={SEO_DESCRIPTION_NEOBRUTALISM_COMPONENTS}\n>\n  <BaseHero\n    title=\"Neobrutalism\"\n    description=\"Free Tailwind CSS neobrutalism components that can be used in your next project.\"\n  />\n\n  <main id=\"main-content\" class=\"mx-auto max-w-7xl px-4\">\n    <h2 class=\"sr-only\">Neobrutalism Components</h2>\n\n    <ul class=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n      {components.map((component) => <ComponentCard {component} />)}\n    </ul>\n  </main>\n</BaseLayout>\n"
  },
  {
    "path": "src/pages/index.astro",
    "content": "---\nimport { getCollection } from 'astro:content'\n\nimport { SEO_TITLE_SITE, SEO_DESCRIPTION_SITE } from '../consts'\n\nimport BaseLayout from '../layouts/BaseLayout.astro'\nimport CollectionFeature from '../components/CollectionFeature.astro'\n\nconst [applicationRaw, marketingRaw, neobrutalismRaw] = await Promise.all([\n  getCollection('application'),\n  getCollection('marketing'),\n  getCollection('neobrutalism'),\n])\n\nconst application = applicationRaw\n  .map(({ data }) => data)\n  .sort((a, b) => a.title.localeCompare(b.title))\n  .slice(0, 9)\n\nconst marketing = marketingRaw\n  .map(({ data }) => data)\n  .sort((a, b) => a.title.localeCompare(b.title))\n  .slice(0, 9)\n\nconst neobrutalism = neobrutalismRaw\n  .map(({ data }) => data)\n  .sort((a, b) => a.title.localeCompare(b.title))\n  .slice(0, 9)\n---\n\n<BaseLayout title={SEO_TITLE_SITE} description={SEO_DESCRIPTION_SITE}>\n  <section class=\"bg-white\">\n    <div class=\"mx-auto max-w-4xl space-y-6 px-4 py-8 text-center md:py-16\">\n      <h1 class=\"text-6xl font-medium tracking-tight md:text-7xl lg:text-8xl\">HyperUI</h1>\n\n      <h2 class=\"text-xl text-gray-600 md:text-2xl\">Free Open Source Tailwind CSS Components</h2>\n\n      <p class=\"mx-auto max-w-2xl text-gray-600\">\n        HyperUI is a collection of free Tailwind CSS components that can be used in your next\n        project. With a range of components, you can build your next marketing website, admin\n        dashboard, eCommerce store and much more.\n      </p>\n    </div>\n  </section>\n\n  <main\n    id=\"main-content\"\n    class=\"mx-auto max-w-7xl divide-y divide-gray-200 border-t border-gray-200 px-4\"\n  >\n    <CollectionFeature\n      title=\"Application Components\"\n      description=\"Components for building application user interfaces.\"\n      slug=\"application\"\n      components={application}\n    />\n\n    <CollectionFeature\n      title=\"Marketing Components\"\n      description=\"Components for building marketing websites and landing pages.\"\n      slug=\"marketing\"\n      components={marketing}\n    />\n\n    <CollectionFeature\n      title=\"Neobrutalism Components\"\n      description=\"Components for building neobrutalist designs.\"\n      slug=\"neobrutalism\"\n      components={neobrutalism}\n    />\n  </main>\n</BaseLayout>\n"
  },
  {
    "path": "src/pages/rss.xml.ts",
    "content": "import type { APIContext } from 'astro'\n\nimport { getCollection } from 'astro:content'\n\nimport rss from '@astrojs/rss'\n\nimport { SITE_TITLE, SEO_DESCRIPTION_BLOG } from '../consts'\n\nexport async function GET(context: APIContext) {\n  const site = context.site ?? new URL('https://hyperui.dev')\n\n  const posts = (await getCollection('blog')).sort(\n    (a, b) => b.data.updatedDate.valueOf() - a.data.updatedDate.valueOf(),\n  )\n\n  return rss({\n    title: `${SITE_TITLE} Blog`,\n    description: SEO_DESCRIPTION_BLOG,\n    site,\n    items: posts.map(({ data }) => ({\n      title: data.title,\n      pubDate: data.pubDate,\n      description: data.description,\n      link: `/blog/${data.slug}`,\n    })),\n  })\n}\n"
  },
  {
    "path": "src/styles/component.css",
    "content": "@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');\n\n@import 'tailwindcss' source(none);\n@plugin '@tailwindcss/forms';\n@plugin '@tailwindcss/typography';\n\n@source '../../public/components';\n\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n  --font-sans: 'Google Sans Flex', sans-serif;\n}\n"
  },
  {
    "path": "src/styles/global.css",
    "content": "@import 'tailwindcss';\n@plugin '@tailwindcss/forms';\n@plugin '@tailwindcss/typography';\n\n@view-transition {\n  navigation: auto;\n}\n\n@theme inline {\n  --font-sans: var(--font-google-sans-flex);\n}\n"
  },
  {
    "path": "src/types/component.ts",
    "content": "export interface ComponentPreview {\n  contributors: string[]\n  dark: boolean\n  id: string\n  index: number\n  title: string\n  description?: string | undefined\n  plugins?: string[] | undefined\n}\n"
  },
  {
    "path": "src/utils/readingTime.ts",
    "content": "export function calculateReadingTime(text: string): number {\n  const WORDS_PER_MINUTE = 200\n\n  const trimmed = text.trim()\n\n  if (trimmed.length === 0) {\n    return 0\n  }\n\n  const words = trimmed.split(/\\s+/).length\n\n  return Math.ceil(words / WORDS_PER_MINUTE)\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig.json\",\n  \"extends\": \"astro/tsconfigs/strictest\",\n  \"include\": [\".astro/types.d.ts\", \"**/*\"],\n  \"exclude\": [\"dist\"],\n  \"compilerOptions\": {\n    \"verbatimModuleSyntax\": true\n  }\n}\n"
  }
]