[
  {
    "path": ".eslintignore",
    "content": "/.cache\n/.github\n/public\n/node_modules\n/dist\n/src/assets/styles.css\n"
  },
  {
    "path": ".eslintrc",
    "content": "{\n  \"root\": true,\n\n  \"env\": {\n    \"browser\": true,\n    \"es2021\": true\n  },\n\n  \"extends\": [\n    \"plugin:prettier/recommended\"\n  ],\n\n  \"parserOptions\": {\n    \"ecmaVersion\": 12,\n    \"sourceType\": \"module\"\n  },\n\n  \"plugins\": [\"prettier\"],\n\n  \"rules\": {\n    \"multiline-ternary\": 0,\n    \"no-shadow\": 0,\n    \"prettier/prettier\": \"error\",\n    \"react/jsx-uses-react\": \"off\",\n    \"react/react-in-jsx-scope\": \"off\"\n  }\n}\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\n.DS_Store\ndist\ndist-ssr\n*.local\n"
  },
  {
    "path": ".prettierignore",
    "content": "/.cache\n/.github\n/public\n/node_modules\n/dist\n/src/assets/styles.css\n"
  },
  {
    "path": "README.md",
    "content": "# Holly\n\nA React implementation of [Davide Pacilio's](https://cruip.com/) free landing page template, [Holly](https://lukemcdonald.github.io/holly-react/).\n\n# Getting Started\n\n- Run `npm install`\n- Run `npm run dev`\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"version\": \"4.0.0\",\n  \"name\": \"holly-react\",\n  \"description\": \"React version of Holly\",\n  \"author\": \"Luke McDonald (https://lukemcdonald.com/)\",\n  \"homepage\": \"https://lukemcdonald.github.io/holly-react\",\n  \"keywords\": [],\n  \"license\": \"MIT\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/lukemcdonald/holly-react.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/lukemcdonald/holly-react/issues\"\n  },\n  \"scripts\": {\n    \"build\": \"NODE_ENV=production run-s build:*\",\n    \"build:css\": \"postcss styles/tailwind.css -o src/assets/styles.css\",\n    \"build:vite\": \"vite build\",\n    \"deploy\": \"gh-pages -d dist\",\n    \"dev\": \"run-p dev:*\",\n    \"dev:css\": \"postcss styles/tailwind.css -o src/assets/styles.css --watch\",\n    \"dev:vite\": \"vite\",\n    \"format\": \"prettier --write .\",\n    \"lint\": \"eslint --cache --cache-location ./node_modules/.cache/eslint .\",\n    \"lint:fix\": \"eslint . --fix\",\n    \"predeploy\": \"$npm_execpath run build\",\n    \"preview\": \"vite preview\",\n    \"start\": \"$npm_execpath run dev\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"validate\": \"run-p lint typecheck\"\n  },\n  \"dependencies\": {\n    \"clsx\": \"^2.1.1\",\n    \"gh-pages\": \"^6.1.1\",\n    \"postcss-import\": \"^16.1.0\",\n    \"react\": \"^18.3.1\",\n    \"react-dom\": \"^18.3.1\",\n    \"react-router-dom\": \"^6.26.0\",\n    \"scrollreveal\": \"^4.0.9\",\n    \"tailwind-merge\": \"^2.4.0\",\n    \"tiny-invariant\": \"^1.3.3\"\n  },\n  \"devDependencies\": {\n    \"@tailwindcss/forms\": \"^0.5.7\",\n    \"@tailwindcss/typography\": \"^0.5.13\",\n    \"@types/eslint\": \"^9.6.0\",\n    \"@types/node\": \"^22.1.0\",\n    \"@types/react\": \"^18.3.3\",\n    \"@types/react-dom\": \"^18.3.0\",\n    \"@types/scrollreveal\": \"^0.0.11\",\n    \"@vitejs/plugin-react\": \"^4.3.1\",\n    \"autoprefixer\": \"^10.4.20\",\n    \"eslint\": \"^9.8.0\",\n    \"eslint-config-prettier\": \"^9.1.0\",\n    \"eslint-plugin-prettier\": \"^5.2.1\",\n    \"npm-run-all\": \"^4.1.5\",\n    \"postcss\": \"^8.4.40\",\n    \"postcss-cli\": \"^11.0.0\",\n    \"prettier\": \"^3.3.3\",\n    \"prettier-plugin-tailwindcss\": \"^0.6.5\",\n    \"tailwindcss\": \"^3.4.7\",\n    \"typescript\": \"^5.5.4\",\n    \"vite\": \"^5.3.5\"\n  },\n  \"prettier\": {\n    \"plugins\": [\n      \"prettier-plugin-tailwindcss\"\n    ],\n    \"printWidth\": 100,\n    \"semi\": false,\n    \"singleQuote\": true,\n    \"tabWidth\": 2\n  }\n}\n"
  },
  {
    "path": "postcss.config.js",
    "content": "module.exports = {\n  plugins: [\n    require(`postcss-import`),\n    require(`tailwindcss/nesting`),\n    require(`tailwindcss`),\n    require(`autoprefixer`),\n  ],\n}\n"
  },
  {
    "path": "src/app.tsx",
    "content": "import { ScrollToTop } from '@/components/scroll-to-top'\nimport AboutPage from '@/routes/about'\nimport ContactPage from '@/routes/contact'\nimport FaqsPage from '@/routes/faqs'\nimport HomePage from '@/routes/home'\nimport SupportPage from '@/routes/support'\nimport { BrowserRouter, Route, Routes } from 'react-router-dom'\n\nexport default function App() {\n  /**\n   * Vite exposes env variables on the special import.meta.env object.\n   * Basename needs to be set for GitHub Pages to function properly.\n   *\n   * @link https://vitejs.dev/guide/env-and-mode.html\n   */\n  const basename = import.meta.env.BASE_URL\n\n  return (\n    <BrowserRouter basename={basename}>\n      <ScrollToTop>\n        <Routes>\n          <Route path=\"/\" element={<HomePage />} />\n          <Route path=\"about\" element={<AboutPage />} />\n          <Route path=\"contact\" element={<ContactPage />} />\n          <Route path=\"faqs\" element={<FaqsPage />} />\n          <Route path=\"support\" element={<SupportPage />} />\n        </Routes>\n      </ScrollToTop>\n    </BrowserRouter>\n  )\n}\n"
  },
  {
    "path": "src/assets/styles.css",
    "content": "/**\n * Base\n * -----------------------------------------------------------------------------\n */\n/*! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com\n */\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e2e8f0; /* 2 */\n}\n::before,\n::after {\n  --tw-content: '';\n}\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\nhtml,\n:host {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: Fira Sans, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n/*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n  font-weight: bolder;\n}\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n  font-size: 80%;\n}\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\nsub {\n  bottom: -0.25em;\n}\nsup {\n  top: -0.5em;\n}\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n  text-transform: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n:-moz-focusring {\n  outline: auto;\n}\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\nprogress {\n  vertical-align: baseline;\n}\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n/*\nAdd the correct display in Chrome and Safari.\n*/\nsummary {\n  display: list-item;\n}\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\nfieldset {\n  margin: 0;\n  padding: 0;\n}\nlegend {\n  padding: 0;\n}\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n  resize: vertical;\n}\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #94a3b8; /* 2 */\n}\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #94a3b8; /* 2 */\n}\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background-color: #fff;\n  border-color: #64748b;\n  border-width: 1px;\n  border-radius: 0px;\n  padding-top: 0.5rem;\n  padding-right: 0.75rem;\n  padding-bottom: 0.5rem;\n  padding-left: 0.75rem;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  --tw-shadow: 0 0 #0000;\n}\n[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #2563eb;\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  border-color: #2563eb;\n}\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  color: #64748b;\n  opacity: 1;\n}\ninput::placeholder,textarea::placeholder {\n  color: #64748b;\n  opacity: 1;\n}\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 0;\n}\n::-webkit-date-and-time-value {\n  min-height: 1.5em;\n  text-align: inherit;\n}\n::-webkit-datetime-edit {\n  display: inline-flex;\n}\n::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {\n  padding-top: 0;\n  padding-bottom: 0;\n}\nselect {\n  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='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");\n  background-position: right 0.5rem center;\n  background-repeat: no-repeat;\n  background-size: 1.5em 1.5em;\n  padding-right: 2.5rem;\n  -webkit-print-color-adjust: exact;\n          print-color-adjust: exact;\n}\n[multiple],[size]:where(select:not([size=\"1\"])) {\n  background-image: initial;\n  background-position: initial;\n  background-repeat: unset;\n  background-size: initial;\n  padding-right: 0.75rem;\n  -webkit-print-color-adjust: unset;\n          print-color-adjust: unset;\n}\n[type='checkbox'],[type='radio'] {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  padding: 0;\n  -webkit-print-color-adjust: exact;\n          print-color-adjust: exact;\n  display: inline-block;\n  vertical-align: middle;\n  background-origin: border-box;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  flex-shrink: 0;\n  height: 1rem;\n  width: 1rem;\n  color: #2563eb;\n  background-color: #fff;\n  border-color: #64748b;\n  border-width: 1px;\n  --tw-shadow: 0 0 #0000;\n}\n[type='checkbox'] {\n  border-radius: 0px;\n}\n[type='radio'] {\n  border-radius: 100%;\n}\n[type='checkbox']:focus,[type='radio']:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 2px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #2563eb;\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n[type='checkbox']:checked,[type='radio']:checked {\n  border-color: transparent;\n  background-color: currentColor;\n  background-size: 100% 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n[type='checkbox']:checked {\n  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\");\n}\n@media (forced-colors: active)  {\n  [type='checkbox']:checked {\n    -webkit-appearance: auto;\n       -moz-appearance: auto;\n            appearance: auto;\n  }\n}\n[type='radio']:checked {\n  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\");\n}\n@media (forced-colors: active)  {\n  [type='radio']:checked {\n    -webkit-appearance: auto;\n       -moz-appearance: auto;\n            appearance: auto;\n  }\n}\n[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {\n  border-color: transparent;\n  background-color: currentColor;\n}\n[type='checkbox']:indeterminate {\n  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\");\n  border-color: transparent;\n  background-color: currentColor;\n  background-size: 100% 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n@media (forced-colors: active)  {\n  [type='checkbox']:indeterminate {\n    -webkit-appearance: auto;\n       -moz-appearance: auto;\n            appearance: auto;\n  }\n}\n[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {\n  border-color: transparent;\n  background-color: currentColor;\n}\n[type='file'] {\n  background: unset;\n  border-color: inherit;\n  border-width: 0;\n  border-radius: 0;\n  padding: 0;\n  font-size: unset;\n  line-height: inherit;\n}\n[type='file']:focus {\n  outline: 1px solid ButtonText;\n  outline: 1px auto -webkit-focus-ring-color;\n}\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n/**\n * Components\n * -----------------------------------------------------------------------------\n */\n.prose {\n  color: var(--tw-prose-body);\n  max-width: 65ch;\n}\n.prose :where(p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 1.25em;\n  margin-bottom: 1.25em;\n}\n.prose :where([class~=\"lead\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: var(--tw-prose-lead);\n  font-size: 1.25em;\n  line-height: 1.6;\n  margin-top: 1.2em;\n  margin-bottom: 1.2em;\n}\n.prose :where(a):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: currentColor;\n  text-decoration: underline;\n  font-weight: 500;\n}\n.prose :where(strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: var(--tw-prose-bold);\n  font-weight: 600;\n}\n.prose :where(a strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: inherit;\n}\n.prose :where(blockquote strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: inherit;\n}\n.prose :where(thead th strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: inherit;\n}\n.prose :where(ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  list-style-type: decimal;\n  margin-top: 1.25em;\n  margin-bottom: 1.25em;\n  padding-inline-start: 1.625em;\n}\n.prose :where(ol[type=\"A\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  list-style-type: upper-alpha;\n}\n.prose :where(ol[type=\"a\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  list-style-type: lower-alpha;\n}\n.prose :where(ol[type=\"A\" s]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  list-style-type: upper-alpha;\n}\n.prose :where(ol[type=\"a\" s]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  list-style-type: lower-alpha;\n}\n.prose :where(ol[type=\"I\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  list-style-type: upper-roman;\n}\n.prose :where(ol[type=\"i\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  list-style-type: lower-roman;\n}\n.prose :where(ol[type=\"I\" s]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  list-style-type: upper-roman;\n}\n.prose :where(ol[type=\"i\" s]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  list-style-type: lower-roman;\n}\n.prose :where(ol[type=\"1\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  list-style-type: decimal;\n}\n.prose :where(ul):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  list-style-type: disc;\n  margin-top: 1.25em;\n  margin-bottom: 1.25em;\n  padding-inline-start: 1.625em;\n}\n.prose :where(ol > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::marker {\n  font-weight: 400;\n  color: var(--tw-prose-counters);\n}\n.prose :where(ul > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::marker {\n  color: var(--tw-prose-bullets);\n}\n.prose :where(dt):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: var(--tw-prose-headings);\n  font-weight: 600;\n  margin-top: 1.25em;\n}\n.prose :where(hr):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  border-color: var(--tw-prose-hr);\n  border-top-width: 1px;\n  margin-top: 3em;\n  margin-bottom: 3em;\n}\n.prose :where(blockquote):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-weight: 500;\n  font-style: italic;\n  color: var(--tw-prose-quotes);\n  border-inline-start-width: 0.25rem;\n  border-inline-start-color: var(--tw-prose-quote-borders);\n  quotes: \"\\201C\"\"\\201D\"\"\\2018\"\"\\2019\";\n  margin-top: 1.6em;\n  margin-bottom: 1.6em;\n  padding-inline-start: 1em;\n}\n.prose :where(blockquote p:first-of-type):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::before {\n  content: open-quote;\n}\n.prose :where(blockquote p:last-of-type):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::after {\n  content: close-quote;\n}\n.prose :where(h1):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: var(--tw-prose-headings);\n  font-weight: 800;\n  font-size: 2.25em;\n  margin-top: 0;\n  margin-bottom: 0.8888889em;\n  line-height: 1.1111111;\n}\n.prose :where(h1 strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-weight: 900;\n  color: inherit;\n}\n.prose :where(h2):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: var(--tw-prose-headings);\n  font-weight: 700;\n  font-size: 1.5em;\n  margin-top: 2em;\n  margin-bottom: 1em;\n  line-height: 1.3333333;\n}\n.prose :where(h2 strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-weight: 800;\n  color: inherit;\n}\n.prose :where(h3):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: var(--tw-prose-headings);\n  font-weight: 600;\n  font-size: 1.25em;\n  margin-top: 1.6em;\n  margin-bottom: 0.6em;\n  line-height: 1.6;\n}\n.prose :where(h3 strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-weight: 700;\n  color: inherit;\n}\n.prose :where(h4):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: var(--tw-prose-headings);\n  font-weight: 600;\n  margin-top: 1.5em;\n  margin-bottom: 0.5em;\n  line-height: 1.5;\n}\n.prose :where(h4 strong):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-weight: 700;\n  color: inherit;\n}\n.prose :where(img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose :where(picture):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  display: block;\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose :where(video):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose :where(kbd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-weight: 500;\n  font-family: inherit;\n  color: var(--tw-prose-kbd);\n  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);\n  font-size: 0.875em;\n  border-radius: 0.3125rem;\n  padding-top: 0.1875em;\n  padding-inline-end: 0.375em;\n  padding-bottom: 0.1875em;\n  padding-inline-start: 0.375em;\n}\n.prose :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: var(--tw-prose-code);\n  font-weight: 600;\n  font-size: 0.875em;\n}\n.prose :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::before {\n  content: \"`\";\n}\n.prose :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::after {\n  content: \"`\";\n}\n.prose :where(a code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: inherit;\n}\n.prose :where(h1 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: inherit;\n}\n.prose :where(h2 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: inherit;\n  font-size: 0.875em;\n}\n.prose :where(h3 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: inherit;\n  font-size: 0.9em;\n}\n.prose :where(h4 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: inherit;\n}\n.prose :where(blockquote code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: inherit;\n}\n.prose :where(thead th code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: inherit;\n}\n.prose :where(pre):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: var(--tw-prose-pre-code);\n  background-color: var(--tw-prose-pre-bg);\n  overflow-x: auto;\n  font-weight: 400;\n  font-size: 0.875em;\n  line-height: 1.7142857;\n  margin-top: 1.7142857em;\n  margin-bottom: 1.7142857em;\n  border-radius: 0.375rem;\n  padding-top: 0.8571429em;\n  padding-inline-end: 1.1428571em;\n  padding-bottom: 0.8571429em;\n  padding-inline-start: 1.1428571em;\n}\n.prose :where(pre code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  background-color: transparent;\n  border-width: 0;\n  border-radius: 0;\n  padding: 0;\n  font-weight: inherit;\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n}\n.prose :where(pre code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::before {\n  content: none;\n}\n.prose :where(pre code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *))::after {\n  content: none;\n}\n.prose :where(table):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  width: 100%;\n  table-layout: auto;\n  text-align: start;\n  margin-top: 2em;\n  margin-bottom: 2em;\n  font-size: 0.875em;\n  line-height: 1.7142857;\n}\n.prose :where(thead):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  border-bottom-width: 1px;\n  border-bottom-color: var(--tw-prose-th-borders);\n}\n.prose :where(thead th):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: var(--tw-prose-headings);\n  font-weight: 600;\n  vertical-align: bottom;\n  padding-inline-end: 0.5714286em;\n  padding-bottom: 0.5714286em;\n  padding-inline-start: 0.5714286em;\n}\n.prose :where(tbody tr):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  border-bottom-width: 1px;\n  border-bottom-color: var(--tw-prose-td-borders);\n}\n.prose :where(tbody tr:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  border-bottom-width: 0;\n}\n.prose :where(tbody td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  vertical-align: baseline;\n}\n.prose :where(tfoot):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  border-top-width: 1px;\n  border-top-color: var(--tw-prose-th-borders);\n}\n.prose :where(tfoot td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  vertical-align: top;\n}\n.prose :where(figure > *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.prose :where(figcaption):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  color: var(--tw-prose-captions);\n  font-size: 0.875em;\n  line-height: 1.4285714;\n  margin-top: 0.8571429em;\n}\n.prose {\n  --tw-prose-body: #374151;\n  --tw-prose-headings: #111827;\n  --tw-prose-lead: #4b5563;\n  --tw-prose-links: #111827;\n  --tw-prose-bold: #111827;\n  --tw-prose-counters: #6b7280;\n  --tw-prose-bullets: #d1d5db;\n  --tw-prose-hr: #e5e7eb;\n  --tw-prose-quotes: #111827;\n  --tw-prose-quote-borders: #e5e7eb;\n  --tw-prose-captions: #6b7280;\n  --tw-prose-kbd: #111827;\n  --tw-prose-kbd-shadows: 17 24 39;\n  --tw-prose-code: #111827;\n  --tw-prose-pre-code: #e5e7eb;\n  --tw-prose-pre-bg: #1f2937;\n  --tw-prose-th-borders: #d1d5db;\n  --tw-prose-td-borders: #e5e7eb;\n  --tw-prose-invert-body: #d1d5db;\n  --tw-prose-invert-headings: #fff;\n  --tw-prose-invert-lead: #9ca3af;\n  --tw-prose-invert-links: #fff;\n  --tw-prose-invert-bold: #fff;\n  --tw-prose-invert-counters: #9ca3af;\n  --tw-prose-invert-bullets: #4b5563;\n  --tw-prose-invert-hr: #374151;\n  --tw-prose-invert-quotes: #f3f4f6;\n  --tw-prose-invert-quote-borders: #374151;\n  --tw-prose-invert-captions: #9ca3af;\n  --tw-prose-invert-kbd: #fff;\n  --tw-prose-invert-kbd-shadows: 255 255 255;\n  --tw-prose-invert-code: #fff;\n  --tw-prose-invert-pre-code: #d1d5db;\n  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n  --tw-prose-invert-th-borders: #4b5563;\n  --tw-prose-invert-td-borders: #374151;\n  font-size: 1rem;\n  line-height: 1.75;\n}\n.prose :where(picture > img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.prose :where(li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n}\n.prose :where(ol > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  padding-inline-start: 0.375em;\n}\n.prose :where(ul > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  padding-inline-start: 0.375em;\n}\n.prose :where(.prose > ul > li p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0.75em;\n  margin-bottom: 0.75em;\n}\n.prose :where(.prose > ul > li > p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 1.25em;\n}\n.prose :where(.prose > ul > li > p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-bottom: 1.25em;\n}\n.prose :where(.prose > ol > li > p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 1.25em;\n}\n.prose :where(.prose > ol > li > p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-bottom: 1.25em;\n}\n.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0.75em;\n  margin-bottom: 0.75em;\n}\n.prose :where(dl):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 1.25em;\n  margin-bottom: 1.25em;\n}\n.prose :where(dd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0.5em;\n  padding-inline-start: 1.625em;\n}\n.prose :where(hr + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0;\n}\n.prose :where(h2 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0;\n}\n.prose :where(h3 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0;\n}\n.prose :where(h4 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0;\n}\n.prose :where(thead th:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  padding-inline-start: 0;\n}\n.prose :where(thead th:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  padding-inline-end: 0;\n}\n.prose :where(tbody td, tfoot td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  padding-top: 0.5714286em;\n  padding-inline-end: 0.5714286em;\n  padding-bottom: 0.5714286em;\n  padding-inline-start: 0.5714286em;\n}\n.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  padding-inline-start: 0;\n}\n.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  padding-inline-end: 0;\n}\n.prose :where(figure):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose :where(.prose > :first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0;\n}\n.prose :where(.prose > :last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-bottom: 0;\n}\n.prose-xl {\n  font-size: 1.25rem;\n  line-height: 1.8;\n}\n.prose-xl :where(p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 1.2em;\n  margin-bottom: 1.2em;\n}\n.prose-xl :where([class~=\"lead\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-size: 1.2em;\n  line-height: 1.5;\n  margin-top: 1em;\n  margin-bottom: 1em;\n}\n.prose-xl :where(blockquote):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 1.6em;\n  margin-bottom: 1.6em;\n  padding-inline-start: 1.0666667em;\n}\n.prose-xl :where(h1):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-size: 2.8em;\n  margin-top: 0;\n  margin-bottom: 0.8571429em;\n  line-height: 1;\n}\n.prose-xl :where(h2):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-size: 1.8em;\n  margin-top: 1.5555556em;\n  margin-bottom: 0.8888889em;\n  line-height: 1.1111111;\n}\n.prose-xl :where(h3):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-size: 1.5em;\n  margin-top: 1.6em;\n  margin-bottom: 0.6666667em;\n  line-height: 1.3333333;\n}\n.prose-xl :where(h4):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 1.8em;\n  margin-bottom: 0.6em;\n  line-height: 1.6;\n}\n.prose-xl :where(img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-xl :where(picture):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-xl :where(picture > img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.prose-xl :where(video):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-xl :where(kbd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-size: 0.9em;\n  border-radius: 0.3125rem;\n  padding-top: 0.25em;\n  padding-inline-end: 0.4em;\n  padding-bottom: 0.25em;\n  padding-inline-start: 0.4em;\n}\n.prose-xl :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-size: 0.9em;\n}\n.prose-xl :where(h2 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-size: 0.8611111em;\n}\n.prose-xl :where(h3 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-size: 0.9em;\n}\n.prose-xl :where(pre):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-size: 0.9em;\n  line-height: 1.7777778;\n  margin-top: 2em;\n  margin-bottom: 2em;\n  border-radius: 0.5rem;\n  padding-top: 1.1111111em;\n  padding-inline-end: 1.3333333em;\n  padding-bottom: 1.1111111em;\n  padding-inline-start: 1.3333333em;\n}\n.prose-xl :where(ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 1.2em;\n  margin-bottom: 1.2em;\n  padding-inline-start: 1.6em;\n}\n.prose-xl :where(ul):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 1.2em;\n  margin-bottom: 1.2em;\n  padding-inline-start: 1.6em;\n}\n.prose-xl :where(li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0.6em;\n  margin-bottom: 0.6em;\n}\n.prose-xl :where(ol > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  padding-inline-start: 0.4em;\n}\n.prose-xl :where(ul > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  padding-inline-start: 0.4em;\n}\n.prose-xl :where(.prose-xl > ul > li p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0.8em;\n  margin-bottom: 0.8em;\n}\n.prose-xl :where(.prose-xl > ul > li > p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 1.2em;\n}\n.prose-xl :where(.prose-xl > ul > li > p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-bottom: 1.2em;\n}\n.prose-xl :where(.prose-xl > ol > li > p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 1.2em;\n}\n.prose-xl :where(.prose-xl > ol > li > p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-bottom: 1.2em;\n}\n.prose-xl :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0.8em;\n  margin-bottom: 0.8em;\n}\n.prose-xl :where(dl):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 1.2em;\n  margin-bottom: 1.2em;\n}\n.prose-xl :where(dt):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 1.2em;\n}\n.prose-xl :where(dd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0.6em;\n  padding-inline-start: 1.6em;\n}\n.prose-xl :where(hr):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 2.8em;\n  margin-bottom: 2.8em;\n}\n.prose-xl :where(hr + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0;\n}\n.prose-xl :where(h2 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0;\n}\n.prose-xl :where(h3 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0;\n}\n.prose-xl :where(h4 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0;\n}\n.prose-xl :where(table):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-size: 0.9em;\n  line-height: 1.5555556;\n}\n.prose-xl :where(thead th):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  padding-inline-end: 0.6666667em;\n  padding-bottom: 0.8888889em;\n  padding-inline-start: 0.6666667em;\n}\n.prose-xl :where(thead th:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  padding-inline-start: 0;\n}\n.prose-xl :where(thead th:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  padding-inline-end: 0;\n}\n.prose-xl :where(tbody td, tfoot td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  padding-top: 0.8888889em;\n  padding-inline-end: 0.6666667em;\n  padding-bottom: 0.8888889em;\n  padding-inline-start: 0.6666667em;\n}\n.prose-xl :where(tbody td:first-child, tfoot td:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  padding-inline-start: 0;\n}\n.prose-xl :where(tbody td:last-child, tfoot td:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  padding-inline-end: 0;\n}\n.prose-xl :where(figure):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 2em;\n  margin-bottom: 2em;\n}\n.prose-xl :where(figure > *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.prose-xl :where(figcaption):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  font-size: 0.9em;\n  line-height: 1.5555556;\n  margin-top: 1em;\n}\n.prose-xl :where(.prose-xl > :first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-top: 0;\n}\n.prose-xl :where(.prose-xl > :last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n  margin-bottom: 0;\n}\n/**\n * Utilites\n * -----------------------------------------------------------------------------\n */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.inset-0 {\n  inset: 0px;\n}\n.-top-48 {\n  top: -12rem;\n}\n.-top-5 {\n  top: -1.25rem;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.left-1\\/2 {\n  left: 50%;\n}\n.left-16 {\n  left: 4rem;\n}\n.left-44 {\n  left: 11rem;\n}\n.left-96 {\n  left: 24rem;\n}\n.top-0 {\n  top: 0px;\n}\n.top-4 {\n  top: 1rem;\n}\n.top-72 {\n  top: 18rem;\n}\n.m-0 {\n  margin: 0px;\n}\n.m-auto {\n  margin: auto;\n}\n.-mx-4 {\n  margin-left: -1rem;\n  margin-right: -1rem;\n}\n.-mx-6 {\n  margin-left: -1.5rem;\n  margin-right: -1.5rem;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.my-0 {\n  margin-top: 0px;\n  margin-bottom: 0px;\n}\n.-mt-px {\n  margin-top: -1px;\n}\n.mb-3 {\n  margin-bottom: 0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.ml-28 {\n  margin-left: 7rem;\n}\n.ml-auto {\n  margin-left: auto;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.mt-0 {\n  margin-top: 0px;\n}\n.mt-12 {\n  margin-top: 3rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.block {\n  display: block;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.hidden {\n  display: none;\n}\n.min-h-screen {\n  min-height: 100vh;\n}\n.w-1\\/2 {\n  width: 50%;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-3xl {\n  max-width: 48rem;\n}\n.max-w-6xl {\n  max-width: 72rem;\n}\n.max-w-\\[40rem\\] {\n  max-width: 40rem;\n}\n.max-w-md {\n  max-width: 28rem;\n}\n.max-w-screen-2xl {\n  max-width: 1536px;\n}\n.max-w-screen-sm {\n  max-width: 640px;\n}\n.flex-shrink {\n  flex-shrink: 1;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n.flex-grow {\n  flex-grow: 1;\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.flex-col {\n  flex-direction: column;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-6 {\n  gap: 1.5rem;\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.rounded-sm {\n  border-radius: 0.125rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-0 {\n  border-width: 0px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-gray-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(226 232 240 / var(--tw-border-opacity));\n}\n.border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(203 213 225 / var(--tw-border-opacity));\n}\n.border-primary-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(199 210 254 / var(--tw-border-opacity));\n}\n.bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(241 245 249 / var(--tw-bg-opacity));\n}\n.bg-primary-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(129 140 248 / var(--tw-bg-opacity));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.bg-gradient-to-b {\n  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n.bg-gradient-to-r {\n  background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.from-primary-600 {\n  --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);\n  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.from-secondary-500 {\n  --tw-gradient-from: #f43f5e var(--tw-gradient-from-position);\n  --tw-gradient-to: rgb(244 63 94 / 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.to-primary-400 {\n  --tw-gradient-to: #818cf8 var(--tw-gradient-to-position);\n}\n.to-secondary-400 {\n  --tw-gradient-to: #fb7185 var(--tw-gradient-to-position);\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n.px-7 {\n  padding-left: 1.75rem;\n  padding-right: 1.75rem;\n}\n.py-10 {\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n}\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n.pb-16 {\n  padding-bottom: 4rem;\n}\n.pt-10 {\n  padding-top: 2.5rem;\n}\n.text-center {\n  text-align: center;\n}\n.text-4xl {\n  font-size: 2.25rem;\n  line-height: 2.5rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-medium {\n  font-weight: 500;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.italic {\n  font-style: italic;\n}\n.leading-10 {\n  line-height: 2.5rem;\n}\n.leading-4 {\n  line-height: 1rem;\n}\n.leading-5 {\n  line-height: 1.25rem;\n}\n.leading-none {\n  line-height: 1;\n}\n.tracking-normal {\n  letter-spacing: 0em;\n}\n.text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(100 116 139 / var(--tw-text-opacity));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.no-underline {\n  text-decoration-line: none;\n}\n.shadow-2xl {\n  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.drop-shadow-2xl {\n  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));\n  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);\n}\n.filter {\n  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);\n}\n@media (min-width: 1024px) {\n  .lg\\:prose-xl {\n    font-size: 1.25rem;\n    line-height: 1.8;\n  }\n  .lg\\:prose-xl :where(p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 1.2em;\n    margin-bottom: 1.2em;\n  }\n  .lg\\:prose-xl :where([class~=\"lead\"]):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    font-size: 1.2em;\n    line-height: 1.5;\n    margin-top: 1em;\n    margin-bottom: 1em;\n  }\n  .lg\\:prose-xl :where(blockquote):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 1.6em;\n    margin-bottom: 1.6em;\n    padding-inline-start: 1.0666667em;\n  }\n  .lg\\:prose-xl :where(h1):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    font-size: 2.8em;\n    margin-top: 0;\n    margin-bottom: 0.8571429em;\n    line-height: 1;\n  }\n  .lg\\:prose-xl :where(h2):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    font-size: 1.8em;\n    margin-top: 1.5555556em;\n    margin-bottom: 0.8888889em;\n    line-height: 1.1111111;\n  }\n  .lg\\:prose-xl :where(h3):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    font-size: 1.5em;\n    margin-top: 1.6em;\n    margin-bottom: 0.6666667em;\n    line-height: 1.3333333;\n  }\n  .lg\\:prose-xl :where(h4):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 1.8em;\n    margin-bottom: 0.6em;\n    line-height: 1.6;\n  }\n  .lg\\:prose-xl :where(img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 2em;\n    margin-bottom: 2em;\n  }\n  .lg\\:prose-xl :where(picture):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 2em;\n    margin-bottom: 2em;\n  }\n  .lg\\:prose-xl :where(picture > img):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n  .lg\\:prose-xl :where(video):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 2em;\n    margin-bottom: 2em;\n  }\n  .lg\\:prose-xl :where(kbd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    font-size: 0.9em;\n    border-radius: 0.3125rem;\n    padding-top: 0.25em;\n    padding-inline-end: 0.4em;\n    padding-bottom: 0.25em;\n    padding-inline-start: 0.4em;\n  }\n  .lg\\:prose-xl :where(code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    font-size: 0.9em;\n  }\n  .lg\\:prose-xl :where(h2 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    font-size: 0.8611111em;\n  }\n  .lg\\:prose-xl :where(h3 code):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    font-size: 0.9em;\n  }\n  .lg\\:prose-xl :where(pre):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    font-size: 0.9em;\n    line-height: 1.7777778;\n    margin-top: 2em;\n    margin-bottom: 2em;\n    border-radius: 0.5rem;\n    padding-top: 1.1111111em;\n    padding-inline-end: 1.3333333em;\n    padding-bottom: 1.1111111em;\n    padding-inline-start: 1.3333333em;\n  }\n  .lg\\:prose-xl :where(ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 1.2em;\n    margin-bottom: 1.2em;\n    padding-inline-start: 1.6em;\n  }\n  .lg\\:prose-xl :where(ul):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 1.2em;\n    margin-bottom: 1.2em;\n    padding-inline-start: 1.6em;\n  }\n  .lg\\:prose-xl :where(li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 0.6em;\n    margin-bottom: 0.6em;\n  }\n  .lg\\:prose-xl :where(ol > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    padding-inline-start: 0.4em;\n  }\n  .lg\\:prose-xl :where(ul > li):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    padding-inline-start: 0.4em;\n  }\n  .lg\\:prose-xl :where(.lg\\:prose-xl > ul > li p):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 0.8em;\n    margin-bottom: 0.8em;\n  }\n  .lg\\:prose-xl :where(.lg\\:prose-xl > ul > li > p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 1.2em;\n  }\n  .lg\\:prose-xl :where(.lg\\:prose-xl > ul > li > p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-bottom: 1.2em;\n  }\n  .lg\\:prose-xl :where(.lg\\:prose-xl > ol > li > p:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 1.2em;\n  }\n  .lg\\:prose-xl :where(.lg\\:prose-xl > ol > li > p:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-bottom: 1.2em;\n  }\n  .lg\\:prose-xl :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 0.8em;\n    margin-bottom: 0.8em;\n  }\n  .lg\\:prose-xl :where(dl):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 1.2em;\n    margin-bottom: 1.2em;\n  }\n  .lg\\:prose-xl :where(dt):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 1.2em;\n  }\n  .lg\\:prose-xl :where(dd):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 0.6em;\n    padding-inline-start: 1.6em;\n  }\n  .lg\\:prose-xl :where(hr):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 2.8em;\n    margin-bottom: 2.8em;\n  }\n  .lg\\:prose-xl :where(hr + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 0;\n  }\n  .lg\\:prose-xl :where(h2 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 0;\n  }\n  .lg\\:prose-xl :where(h3 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 0;\n  }\n  .lg\\:prose-xl :where(h4 + *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 0;\n  }\n  .lg\\:prose-xl :where(table):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    font-size: 0.9em;\n    line-height: 1.5555556;\n  }\n  .lg\\:prose-xl :where(thead th):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    padding-inline-end: 0.6666667em;\n    padding-bottom: 0.8888889em;\n    padding-inline-start: 0.6666667em;\n  }\n  .lg\\:prose-xl :where(thead th:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    padding-inline-start: 0;\n  }\n  .lg\\:prose-xl :where(thead th:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    padding-inline-end: 0;\n  }\n  .lg\\:prose-xl :where(tbody td, tfoot td):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    padding-top: 0.8888889em;\n    padding-inline-end: 0.6666667em;\n    padding-bottom: 0.8888889em;\n    padding-inline-start: 0.6666667em;\n  }\n  .lg\\:prose-xl :where(tbody td:first-child, tfoot td:first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    padding-inline-start: 0;\n  }\n  .lg\\:prose-xl :where(tbody td:last-child, tfoot td:last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    padding-inline-end: 0;\n  }\n  .lg\\:prose-xl :where(figure):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 2em;\n    margin-bottom: 2em;\n  }\n  .lg\\:prose-xl :where(figure > *):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n  .lg\\:prose-xl :where(figcaption):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    font-size: 0.9em;\n    line-height: 1.5555556;\n    margin-top: 1em;\n  }\n  .lg\\:prose-xl :where(.lg\\:prose-xl > :first-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-top: 0;\n  }\n  .lg\\:prose-xl :where(.lg\\:prose-xl > :last-child):not(:where([class~=\"not-prose\"],[class~=\"not-prose\"] *)) {\n    margin-bottom: 0;\n  }\n}\n.open\\:border-primary-400[open] {\n  --tw-border-opacity: 1;\n  border-color: rgb(129 140 248 / var(--tw-border-opacity));\n}\n.hover\\:border-b:hover {\n  border-bottom-width: 1px;\n}\n.hover\\:border-primary-300:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(165 180 252 / var(--tw-border-opacity));\n}\n@media (min-width: 640px) {\n  .sm\\:flex-row {\n    flex-direction: row;\n  }\n}\n@media (min-width: 768px) {\n  .md\\:text-5xl {\n    font-size: 3rem;\n    line-height: 1;\n  }\n}\n@media (min-width: 1024px) {\n  .lg\\:-bottom-20 {\n    bottom: -5rem;\n  }\n  .lg\\:-bottom-28 {\n    bottom: -7rem;\n  }\n  .lg\\:-left-16 {\n    left: -4rem;\n  }\n  .lg\\:-right-10 {\n    right: -2.5rem;\n  }\n  .lg\\:-top-20 {\n    top: -5rem;\n  }\n  .lg\\:left-24 {\n    left: 6rem;\n  }\n  .lg\\:left-40 {\n    left: 10rem;\n  }\n  .lg\\:left-72 {\n    left: 18rem;\n  }\n  .lg\\:left-80 {\n    left: 20rem;\n  }\n  .lg\\:top-80 {\n    top: 20rem;\n  }\n  .lg\\:order-1 {\n    order: 1;\n  }\n  .lg\\:mx-0 {\n    margin-left: 0px;\n    margin-right: 0px;\n  }\n  .lg\\:block {\n    display: block;\n  }\n  .lg\\:flex {\n    display: flex;\n  }\n  .lg\\:hidden {\n    display: none;\n  }\n  .lg\\:aspect-\\[5\\/7\\] {\n    aspect-ratio: 5/7;\n  }\n  .lg\\:w-full {\n    width: 100%;\n  }\n  .lg\\:min-w-\\[40rem\\] {\n    min-width: 40rem;\n  }\n  .lg\\:max-w-none {\n    max-width: none;\n  }\n  .lg\\:flex-row {\n    flex-direction: row;\n  }\n  .lg\\:items-end {\n    align-items: flex-end;\n  }\n  .lg\\:justify-between {\n    justify-content: space-between;\n  }\n  .lg\\:bg-transparent {\n    background-color: transparent;\n  }\n  .lg\\:p-0 {\n    padding: 0px;\n  }\n  .lg\\:py-0 {\n    padding-top: 0px;\n    padding-bottom: 0px;\n  }\n  .lg\\:py-20 {\n    padding-top: 5rem;\n    padding-bottom: 5rem;\n  }\n  .lg\\:pr-20 {\n    padding-right: 5rem;\n  }\n  .lg\\:pt-16 {\n    padding-top: 4rem;\n  }\n  .lg\\:text-left {\n    text-align: left;\n  }\n  .lg\\:text-5xl {\n    font-size: 3rem;\n    line-height: 1;\n  }\n  .lg\\:leading-tight {\n    line-height: 1.25;\n  }\n  .lg\\:text-gray-400 {\n    --tw-text-opacity: 1;\n    color: rgb(148 163 184 / var(--tw-text-opacity));\n  }\n}\n"
  },
  {
    "path": "src/components/article/article.tsx",
    "content": "import { ArticleContent, ArticleImage, ArticleMedia, ArticleTitle } from '@/components/article'\nimport { cn } from '@/utils/cn'\nimport type { PropsWithChildren } from 'react'\nimport invariant from 'tiny-invariant'\n\nfunction Article({\n  className,\n  children,\n  imageAlt,\n  imageSrc,\n  title,\n}: PropsWithChildren<{\n  className?: string\n  imageAlt?: string\n  imageSrc?: string\n  title: string\n}>) {\n  if (imageSrc) {\n    invariant(imageAlt, 'Image alt text is required.')\n  }\n\n  return (\n    <article className={cn('article text-center lg:w-full lg:py-20 lg:text-left', className)}>\n      <div className=\"mx-auto w-full max-w-6xl px-6\">\n        <div className=\"relative lg:flex\">\n          <ArticleContent>\n            <header>\n              <ArticleTitle>{title}</ArticleTitle>\n            </header>\n\n            {children}\n          </ArticleContent>\n\n          {imageSrc && (\n            <ArticleMedia>\n              <ArticleImage alt={imageAlt!} src={imageSrc} />\n            </ArticleMedia>\n          )}\n        </div>\n      </div>\n    </article>\n  )\n}\n\nexport default Article\n"
  },
  {
    "path": "src/components/article/content.tsx",
    "content": "import { cn } from '@/utils/cn'\nimport type { PropsWithChildren } from 'react'\n\nfunction Content({\n  children,\n  className,\n}: PropsWithChildren<{\n  className?: string\n}>) {\n  return (\n    <div className=\"flex-grow\">\n      <div className={cn('prose mx-auto py-10 lg:prose-xl lg:pr-20 lg:pt-16', className)}>\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport default Content\n"
  },
  {
    "path": "src/components/article/image.tsx",
    "content": "import { cn } from '@/utils/cn'\n\nfunction Image({\n  alt,\n  className,\n  height,\n  src,\n  width,\n}: {\n  alt: string\n  className?: string\n  height?: number\n  src: string\n  width?: number\n}) {\n  return (\n    <img\n      alt={alt}\n      className={cn('mx-auto lg:aspect-[5/7] lg:w-full', className)}\n      height={width || 640}\n      src={src}\n      width={height || 420}\n    />\n  )\n}\n\nexport default Image\n"
  },
  {
    "path": "src/components/article/index.ts",
    "content": "export { default as Article } from './article'\nexport { default as ArticleContent } from './content'\nexport { default as ArticleImage } from './image'\nexport { default as ArticleMedia } from './media'\nexport { default as ArticleTitle } from './title'\n"
  },
  {
    "path": "src/components/article/media.tsx",
    "content": "import { cn } from '@/utils/cn'\nimport type { PropsWithChildren } from 'react'\n\nfunction Media({\n  as: Tag = 'figure',\n  children,\n  className,\n}: PropsWithChildren<{\n  as?: keyof JSX.IntrinsicElements\n  className?: string\n}>) {\n  return (\n    <Tag\n      className={cn(\n        'relative m-auto max-w-[40rem] py-10 lg:-right-10 lg:w-full lg:py-0',\n        className,\n      )}\n    >\n      {children}\n    </Tag>\n  )\n}\n\nexport default Media\n"
  },
  {
    "path": "src/components/article/title.tsx",
    "content": "import { cn } from '@/utils/cn'\nimport type { PropsWithChildren } from 'react'\n\nfunction Title({ children, className }: PropsWithChildren<{ className?: string }>) {\n  return (\n    <h1 className={cn('mb-3 mt-12 text-4xl font-bold lg:text-5xl lg:leading-tight', className)}>\n      {children}\n    </h1>\n  )\n}\n\nexport default Title\n"
  },
  {
    "path": "src/components/footer/footer.tsx",
    "content": "import { Menu } from '@/components/menu'\nimport { SocialLinks } from '@/components/social-links'\n\nfunction Footer() {\n  return (\n    <footer className=\"bg-primary-400 py-6 text-sm leading-5 tracking-normal text-white lg:bg-transparent lg:text-gray-400\">\n      <div className=\"mx-auto w-full max-w-6xl px-6\">\n        <div className=\"relative flex flex-col items-center gap-6 lg:flex-row lg:items-end lg:justify-between\">\n          <nav className=\"flex flex-col items-center gap-6 lg:order-1 lg:items-end\">\n            <SocialLinks className=\"flex gap-4\" />\n            <Menu className=\"flex gap-4\" />\n          </nav>\n          <div className=\"\">&copy; Holly</div>\n        </div>\n      </div>\n    </footer>\n  )\n}\n\nexport default Footer\n"
  },
  {
    "path": "src/components/footer/index.ts",
    "content": "export { default as Footer } from './footer'\n"
  },
  {
    "path": "src/components/gradient/gradient.tsx",
    "content": "import { cn } from '@/utils/cn'\n\nfunction Gradient({ className }: { className?: string }) {\n  return <div className={cn('bg-gradient-to-b from-primary-600 to-primary-400', className)} />\n}\n\nexport default Gradient\n"
  },
  {
    "path": "src/components/gradient/index.ts",
    "content": "export { default as Gradient } from './gradient'\n"
  },
  {
    "path": "src/components/header/header.tsx",
    "content": "import { Logo } from '@/components/logo'\nimport { Link } from 'react-router-dom'\n\nfunction Header({ title }: { title?: string }) {\n  return (\n    <header className=\"relative py-6\">\n      <div className=\"mx-auto w-full max-w-6xl px-6\">\n        <div className=\"relative flex items-center justify-between\">\n          <h1 className=\"m-0 text-xl font-bold uppercase leading-none\">\n            <Link to=\"/\" className=\"flex items-center gap-2 no-underline\">\n              <Logo />\n              <span>{title}</span>\n            </Link>\n          </h1>\n        </div>\n      </div>\n    </header>\n  )\n}\n\nexport default Header\n"
  },
  {
    "path": "src/components/header/index.ts",
    "content": "export { default as Header } from './header'\n"
  },
  {
    "path": "src/components/hero/hero.tsx",
    "content": "import { NewsletterForm } from '@/components/newsletter-form'\nimport { cn } from '@/utils/cn'\nimport type { ReactNode } from 'react'\nimport { useEffect, useRef } from 'react'\nimport ScrollReveal from 'scrollreveal'\n\ntype ScrollRevealRefElement = HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement\n\nfunction Hero({\n  className,\n  content,\n  illustration,\n  title,\n}: {\n  className?: string\n  content: string\n  illustration?: ReactNode\n  title: string\n}) {\n  const scrollRevealRef = useRef<ScrollRevealRefElement[]>([])\n\n  useEffect(() => {\n    if (scrollRevealRef.current.length > 0) {\n      scrollRevealRef.current.map((ref) =>\n        ScrollReveal().reveal(ref, {\n          duration: 1000,\n          distance: '40px',\n          easing: 'cubic-bezier(0.5, -0.01, 0, 1.005)',\n          origin: 'top',\n          interval: 150,\n        }),\n      )\n    }\n\n    return () => ScrollReveal().destroy()\n  }, [])\n\n  function onNewsletterSubmit(values: any) {\n    return new Promise((resolve) => {\n      setTimeout(() => {\n        resolve({ values })\n      }, 1000)\n    })\n  }\n\n  const addToScrollRevealRef = (el: ScrollRevealRefElement) => {\n    scrollRevealRef.current.push(el)\n  }\n\n  return (\n    <section className={cn('text-center lg:w-full lg:py-20 lg:text-left', className)}>\n      <div className=\"hero mx-auto w-full max-w-6xl px-6\">\n        <div className=\"hero-inner relative lg:flex\">\n          <div className=\"hero-copy pb-16 pt-10 lg:min-w-[40rem] lg:pr-20 lg:pt-16\">\n            <div className=\"mx-auto w-full max-w-3xl\">\n              <h1 className=\"mb-4 mt-0 text-4xl font-bold md:text-5xl \" ref={addToScrollRevealRef}>\n                {title}\n              </h1>\n              <p className=\"prose prose-xl m-auto text-gray-500\" ref={addToScrollRevealRef}>\n                {content}\n              </p>\n            </div>\n\n            <div ref={addToScrollRevealRef}>\n              <NewsletterForm\n                className=\"mx-auto mt-8 max-w-md lg:mx-0\"\n                submitText=\"Get early access\"\n                onSubmit={onNewsletterSubmit}\n              />\n            </div>\n          </div>\n\n          {!!illustration && (\n            <div className=\"relative -mx-6 py-10 lg:mx-0 lg:p-0\">{illustration}</div>\n          )}\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport default Hero\n"
  },
  {
    "path": "src/components/hero/illustration.tsx",
    "content": "import { Gradient } from '@/components/gradient'\nimport { useEffect, useRef } from 'react'\nimport ScrollReveal from 'scrollreveal'\n\nfunction Illustration({ className }: { className?: string }) {\n  const scrollRevealOneRef = useRef<HTMLDivElement[]>([])\n  const scrollRevealTwoRef = useRef<HTMLDivElement[]>([])\n\n  const addToScrollRevealOneRef = (el) => {\n    scrollRevealOneRef.current.push(el)\n  }\n\n  const addToScrollRevealTwoRef = (el) => {\n    scrollRevealTwoRef.current.push(el)\n  }\n\n  useEffect(() => {\n    if (scrollRevealOneRef.current.length > 0) {\n      scrollRevealOneRef.current.map((ref) =>\n        ScrollReveal().reveal(ref, {\n          delay: 1000,\n          duration: 1400,\n          distance: '40px',\n          easing: 'cubic-bezier(0.5, -0.01, 0, 1.005)',\n          origin: 'bottom',\n          interval: 200,\n        }),\n      )\n    }\n\n    if (scrollRevealTwoRef.current.length > 0) {\n      scrollRevealTwoRef.current.map((ref) =>\n        ScrollReveal().reveal(ref, {\n          delay: 400,\n          duration: 600,\n          distance: '40px',\n          easing: 'cubic-bezier(0.5, -0.01, 0, 1.005)',\n          origin: 'right',\n          interval: 150,\n        }),\n      )\n    }\n\n    return () => ScrollReveal().destroy()\n  }, [])\n\n  return (\n    <div className={className}>\n      <Gradient className=\"absolute inset-0 lg:hidden\" />\n      <div ref={addToScrollRevealTwoRef} className=\"absolute left-16 top-4 lg:-top-20 lg:left-24\">\n        <svg width=\"124\" height=\"64\" viewBox=\"0 0 124 64\" xmlns=\"http://www.w3.org/2000/svg\">\n          <defs>\n            <linearGradient x1=\"0%\" y1=\"50%\" x2=\"114.418%\" y2=\"50%\" id=\"squares-1-a\">\n              <stop stopColor=\"#6EFACC\" offset=\"0%\" />\n              <stop stopColor=\"#6EFACC\" stopOpacity=\"0\" offset=\"100%\" />\n            </linearGradient>\n          </defs>\n          <path\n            d=\"M0 0h4v4H0V0zm0 12h4v4H0v-4zm0 12h4v4H0v-4zm0 12h4v4H0v-4zm0 12h4v4H0v-4zm0 12h4v4H0v-4zM12 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM24 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM36 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM48 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM60 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM72 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM84 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM96 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4z\"\n            fill=\"url(#squares-1-a)\"\n            fillRule=\"evenodd\"\n          />\n        </svg>\n      </div>\n      <div\n        ref={addToScrollRevealTwoRef}\n        className=\"absolute hidden lg:-bottom-28 lg:left-40 lg:block\"\n      >\n        <svg width=\"64\" height=\"88\" viewBox=\"0 0 64 88\" xmlns=\"http://www.w3.org/2000/svg\">\n          <defs>\n            <linearGradient x1=\"0%\" y1=\"50%\" x2=\"114.418%\" y2=\"50%\" id=\"squares-2-a\">\n              <stop stopColor=\"#6EFACC\" offset=\"0%\" />\n              <stop stopColor=\"#6EFACC\" stopOpacity=\"0\" offset=\"100%\" />\n            </linearGradient>\n          </defs>\n          <path\n            d=\"M80 574h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4z\"\n            transform=\"rotate(90 359 279)\"\n            fill=\"url(#squares-2-a)\"\n            fillRule=\"evenodd\"\n          />\n        </svg>\n      </div>\n      <div\n        ref={addToScrollRevealTwoRef}\n        className=\"absolute -top-48 left-96 hidden drop-shadow-2xl lg:block\"\n      >\n        <svg width=\"400\" height=\"400\" viewBox=\"0 0 400 400\" xmlns=\"http://www.w3.org/2000/svg\">\n          <defs>\n            <radialGradient\n              cx=\"56.15%\"\n              cy=\"27.43%\"\n              fx=\"56.15%\"\n              fy=\"27.43%\"\n              r=\"57.526%\"\n              gradientTransform=\"matrix(.5626 -.82673 .8022 .54591 .026 .589)\"\n              id=\"ball-1-a\"\n            >\n              <stop stopColor=\"#eef2ff\" offset=\"0%\" />\n              <stop stopColor=\"#c7d2fe\" offset=\"34.827%\" />\n              <stop stopColor=\"#818cf8\" offset=\"100%\" />\n            </radialGradient>\n          </defs>\n          <circle cx=\"200\" cy=\"200\" r=\"200\" fill=\"#ffffff\" fillRule=\"evenodd\" />\n          <circle cx=\"200\" cy=\"200\" r=\"200\" fill=\"url(#ball-1-a)\" fillRule=\"evenodd\" />\n        </svg>\n      </div>\n      <div\n        className=\"hero-ball hero-ball-2 absolute left-16 top-72 drop-shadow-2xl lg:-left-16 lg:top-80\"\n        ref={addToScrollRevealOneRef}\n      >\n        <svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\" xmlns=\"http://www.w3.org/2000/svg\">\n          <defs>\n            <radialGradient\n              cx=\"56.15%\"\n              cy=\"27.43%\"\n              fx=\"56.15%\"\n              fy=\"27.43%\"\n              r=\"57.526%\"\n              gradientTransform=\"matrix(.5626 -.82673 .8022 .54591 .026 .589)\"\n              id=\"ball-2-a\"\n            >\n              <stop stopColor=\"#eef2ff\" offset=\"0%\" />\n              <stop stopColor=\"#c7d2fe\" offset=\"34.827%\" />\n              <stop stopColor=\"#818cf8\" offset=\"100%\" />\n            </radialGradient>\n          </defs>\n          <circle cx=\"100\" cy=\"100\" r=\"100\" fill=\"#ffffff\" fillRule=\"evenodd\" />\n          <circle cx=\"100\" cy=\"100\" r=\"100\" fill=\"url(#ball-2-a)\" fillRule=\"evenodd\" />\n        </svg>\n      </div>\n      <div ref={addToScrollRevealTwoRef} className=\"hero-illustration-browser drop-shadow-2xl\">\n        <svg\n          className=\"ml-auto max-w-screen-sm lg:max-w-none\"\n          width=\"800\"\n          height=\"450\"\n          viewBox=\"0 0 800 450\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <defs>\n            <linearGradient x1=\"50%\" y1=\"0%\" x2=\"50%\" y2=\"100%\" id=\"browser-a\">\n              <stop stopColor=\"#F89595\" offset=\"0%\" />\n              <stop stopColor=\"#EF5C5C\" offset=\"100%\" />\n            </linearGradient>\n            <linearGradient x1=\"50%\" y1=\"0%\" x2=\"50%\" y2=\"100%\" id=\"browser-b\">\n              <stop stopColor=\"#FFDFB0\" offset=\"0%\" />\n              <stop stopColor=\"#FFBB78\" offset=\"100%\" />\n            </linearGradient>\n            <linearGradient x1=\"50%\" y1=\"0%\" x2=\"50%\" y2=\"100%\" id=\"browser-c\">\n              <stop stopColor=\"#83E78D\" offset=\"0%\" />\n              <stop stopColor=\"#4BCA55\" offset=\"100%\" />\n            </linearGradient>\n            <filter\n              x=\"-30%\"\n              y=\"-42.9%\"\n              width=\"184%\"\n              height=\"220%\"\n              filterUnits=\"objectBoundingBox\"\n              id=\"browser-d\"\n            >\n              <feOffset dx=\"24\" dy=\"24\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n              <feGaussianBlur stdDeviation=\"24\" in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\" />\n              <feColorMatrix\n                values=\"0 0 0 0 0.866666667 0 0 0 0 0.905882353 0 0 0 0 0.937254902 0 0 0 0.56 0\"\n                in=\"shadowBlurOuter1\"\n                result=\"shadowMatrixOuter1\"\n              />\n              <feMerge>\n                <feMergeNode in=\"shadowMatrixOuter1\" />\n                <feMergeNode in=\"SourceGraphic\" />\n              </feMerge>\n            </filter>\n            <linearGradient x1=\"19.946%\" y1=\"72.147%\" x2=\"73.772%\" y2=\"18.374%\" id=\"browser-e\">\n              <stop stopColor=\"#eef2ff\" offset=\"0%\" />\n              <stop stopColor=\"#c7d2fe\" offset=\"100%\" />\n            </linearGradient>\n            <linearGradient x1=\"50%\" y1=\"0%\" x2=\"50%\" y2=\"100%\" id=\"browser-f\">\n              <stop stopColor=\"#c7d2fe\" offset=\"0%\" />\n              <stop stopColor=\"#818cf8\" offset=\"100%\" />\n            </linearGradient>\n            <linearGradient x1=\"50%\" y1=\"0%\" x2=\"50%\" y2=\"100%\" id=\"browser-g\">\n              <stop stopColor=\"#c7d2fe\" offset=\"0%\" />\n              <stop stopColor=\"#a5b4fc\" offset=\"100%\" />\n            </linearGradient>\n            <linearGradient x1=\"94.808%\" y1=\"-15.701%\" x2=\"6.924%\" y2=\"82.567%\" id=\"browser-h\">\n              <stop stopColor=\"#6ee7b7\" stopOpacity=\"0\" offset=\"0%\" />\n              <stop stopColor=\"#6ee7b7\" offset=\"100%\" />\n            </linearGradient>\n            <linearGradient x1=\"1.733%\" y1=\"-10.509%\" y2=\"77.375%\" id=\"browser-i\">\n              <stop stopColor=\"#6EFACC\" stopOpacity=\"0\" offset=\"0%\" />\n              <stop stopColor=\"#6EFACC\" offset=\"100%\" />\n            </linearGradient>\n            <linearGradient x1=\"92.458%\" y1=\"5.866%\" x2=\"0%\" y2=\"100%\" id=\"browser-j\">\n              <stop stopColor=\"#6ee7b7\" offset=\"0%\" />\n              <stop stopColor=\"#6ee7b7\" stopOpacity=\"0\" offset=\"100%\" />\n            </linearGradient>\n            <linearGradient x1=\"92.458%\" y1=\"5.866%\" x2=\"0%\" y2=\"100%\" id=\"browser-k\">\n              <stop stopColor=\"#6ee7b7\" stopOpacity=\"0\" offset=\"0%\" />\n              <stop stopColor=\"#6ee7b7\" stopOpacity=\"0.513\" offset=\"48.724%\" />\n              <stop stopColor=\"#6ee7b7\" stopOpacity=\"0\" offset=\"100%\" />\n            </linearGradient>\n            <linearGradient x1=\"92.458%\" y1=\"5.866%\" x2=\"0%\" y2=\"100%\" id=\"browser-l\">\n              <stop stopColor=\"#6ee7b7\" stopOpacity=\"0\" offset=\"0%\" />\n              <stop stopColor=\"#6ee7b7\" stopOpacity=\"0.513\" offset=\"47.494%\" />\n              <stop stopColor=\"#6ee7b7\" stopOpacity=\"0\" offset=\"100%\" />\n            </linearGradient>\n            <filter\n              x=\"-23.1%\"\n              y=\"-21.8%\"\n              width=\"192.3%\"\n              height=\"187.3%\"\n              filterUnits=\"objectBoundingBox\"\n              id=\"browser-m\"\n            >\n              <feOffset dx=\"24\" dy=\"24\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n              <feGaussianBlur stdDeviation=\"12\" in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\" />\n              <feColorMatrix\n                values=\"0 0 0 0 0.866666667 0 0 0 0 0.905882353 0 0 0 0 0.937254902 0 0 0 0.56 0\"\n                in=\"shadowBlurOuter1\"\n                result=\"shadowMatrixOuter1\"\n              />\n              <feMerge>\n                <feMergeNode in=\"shadowMatrixOuter1\" />\n                <feMergeNode in=\"SourceGraphic\" />\n              </feMerge>\n            </filter>\n            <linearGradient x1=\"100%\" y1=\"50%\" x2=\"-57.904%\" y2=\"50%\" id=\"browser-n\">\n              <stop stopColor=\"#c7d2fe\" offset=\"0%\" />\n              <stop stopColor=\"#818cf8\" offset=\"100%\" />\n            </linearGradient>\n            <filter\n              x=\"-500%\"\n              y=\"-500%\"\n              width=\"1000%\"\n              height=\"1000%\"\n              filterUnits=\"objectBoundingBox\"\n              id=\"dropshadow-1\"\n            >\n              <feOffset dy=\"16\" in=\"SourceAlpha\" result=\"shadowOffsetOuter\" />\n              <feGaussianBlur stdDeviation=\"24\" in=\"shadowOffsetOuter\" result=\"shadowBlurOuter\" />\n              <feColorMatrix\n                values=\"0 0 0 0 0.10 0 0 0 0 0.17 0 0 0 0 0.21 0 0 0 0.22 0\"\n                in=\"shadowBlurOuter\"\n              />\n            </filter>\n          </defs>\n          <g fill=\"none\" fillRule=\"evenodd\">\n            <rect width=\"800\" height=\"450\" rx=\"2\" fill=\"#ffffff\" filter=\"url(#dropshadow-1)\" />\n            <rect width=\"800\" height=\"450\" rx=\"2\" fill=\"#ffffff\" />\n            <path fill=\"#e2e8f0\" d=\"M0 32h800v1H0z\" />\n            <circle fill=\"url(#browser-a)\" cx=\"24\" cy=\"16\" r=\"4\" />\n            <circle fill=\"url(#browser-b)\" cx=\"40\" cy=\"16\" r=\"4\" />\n            <circle fill=\"url(#browser-c)\" cx=\"56\" cy=\"16\" r=\"4\" />\n            <g filter=\"url(#browser-d)\" transform=\"translate(505 196)\" fillRule=\"nonzero\">\n              <path\n                d=\"M100 100l100-50.426L103.193.762a7.087 7.087 0 0 0-6.393 0L0 49.574 100 100z\"\n                fill=\"url(#browser-e)\"\n              />\n              <path d=\"M199 90L99 139.875v-40L199 50v40z\" fill=\"url(#browser-f)\" />\n              <path d=\"M100 139.875L0 90V50l100 49.875v40z\" fill=\"url(#browser-g)\" />\n            </g>\n            <g strokeWidth=\"2\">\n              <path\n                stroke=\"url(#browser-h)\"\n                d=\"M498.336 298.7l-62.117 30.105L194 208\"\n                transform=\"translate(169 54)\"\n              />\n              <path\n                d=\"M511.219 127.805L269 7\"\n                stroke=\"url(#browser-i)\"\n                transform=\"translate(169 54)\"\n              />\n              <path\n                d=\"M312 157.547L533.512 43\"\n                stroke=\"url(#browser-j)\"\n                transform=\"translate(169 54)\"\n              />\n              <path\n                d=\"M222 114.547L443.512 0\"\n                stroke=\"url(#browser-k)\"\n                transform=\"translate(169 54)\"\n              />\n              <path\n                d=\"M0 356.547L221.512 242\"\n                stroke=\"url(#browser-l)\"\n                transform=\"translate(169 54)\"\n              />\n              <path\n                d=\"M215 319.266L312.031 268\"\n                stroke=\"url(#browser-j)\"\n                transform=\"translate(169 54)\"\n              />\n            </g>\n            <g\n              filter=\"url(#browser-m)\"\n              transform=\"scale(-1 1) rotate(45 -338.122 -406.594)\"\n              fillRule=\"nonzero\"\n            >\n              <path\n                d=\"M52 0L.511 70.268a2.668 2.668 0 0 0-.478 1.987 2.63 2.63 0 0 0 1.076 1.732L52 110V0z\"\n                fill=\"url(#browser-e)\"\n              />\n              <path\n                d=\"M103.49 70.27L52 0v110l50.89-36.011a2.637 2.637 0 0 0 1.077-1.732 2.669 2.669 0 0 0-.476-1.987z\"\n                fill=\"url(#browser-n)\"\n              />\n            </g>\n          </g>\n        </svg>\n      </div>\n      <div\n        className=\"hero-ball hero-ball-3 absolute drop-shadow-2xl\"\n        ref={addToScrollRevealOneRef}\n        style={{ top: '402px', left: '440px' }}\n      >\n        <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" xmlns=\"http://www.w3.org/2000/svg\">\n          <defs>\n            <radialGradient\n              cx=\"56.15%\"\n              cy=\"27.43%\"\n              fx=\"56.15%\"\n              fy=\"27.43%\"\n              r=\"57.526%\"\n              gradientTransform=\"matrix(.5626 -.82673 .8022 .54591 .026 .589)\"\n              id=\"ball-3-a\"\n            >\n              <stop stopColor=\"#eef2ff\" offset=\"0%\" />\n              <stop stopColor=\"#c7d2fe\" offset=\"34.827%\" />\n              <stop stopColor=\"#818cf8\" offset=\"100%\" />\n            </radialGradient>\n          </defs>\n          <circle cx=\"40\" cy=\"40\" r=\"40\" fill=\"#ffffff\" fillRule=\"evenodd\" />\n          <circle cx=\"40\" cy=\"40\" r=\"40\" fill=\"url(#ball-3-a)\" fillRule=\"evenodd\" />\n        </svg>\n      </div>\n      <div\n        className=\"hero-ball hero-ball-4 absolute -top-5 left-44 lg:-top-20 lg:left-72\"\n        ref={addToScrollRevealOneRef}\n      >\n        <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\">\n          <defs>\n            <radialGradient\n              cx=\"56.15%\"\n              cy=\"27.43%\"\n              fx=\"56.15%\"\n              fy=\"27.43%\"\n              r=\"57.526%\"\n              gradientTransform=\"matrix(.5626 -.82673 .8022 .54591 .026 .589)\"\n              id=\"ball-4-a\"\n            >\n              <stop stopColor=\"#eef2ff\" offset=\"0%\" />\n              <stop stopColor=\"#c7d2fe\" offset=\"34.827%\" />\n              <stop stopColor=\"#818cf8\" offset=\"100%\" />\n            </radialGradient>\n            <filter\n              x=\"-500%\"\n              y=\"-500%\"\n              width=\"1000%\"\n              height=\"1000%\"\n              filterUnits=\"objectBoundingBox\"\n              id=\"dropshadow-ball-4\"\n            >\n              <feOffset dx=\"24\" dy=\"24\" in=\"SourceAlpha\" result=\"shadowOffsetOuter\" />\n              <feGaussianBlur stdDeviation=\"24\" in=\"shadowOffsetOuter\" result=\"shadowBlurOuter\" />\n              <feColorMatrix\n                values=\"0 0 0 0 0.10 0 0 0 0 0.17 0 0 0 0 0.21 0 0 0 0.22 0\"\n                in=\"shadowBlurOuter\"\n              />\n            </filter>\n          </defs>\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"20\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n            filter=\"url(#dropshadow-ball-4)\"\n          />\n          <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"url(#ball-4-a)\" fillRule=\"evenodd\" />\n        </svg>\n      </div>\n      <div\n        className=\"hero-ball hero-ball-5 absolute lg:-bottom-20 lg:left-80\"\n        ref={addToScrollRevealOneRef}\n      >\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n          <defs>\n            <radialGradient\n              cx=\"56.15%\"\n              cy=\"27.43%\"\n              fx=\"56.15%\"\n              fy=\"27.43%\"\n              r=\"57.526%\"\n              gradientTransform=\"matrix(.5626 -.82673 .8022 .54591 .026 .589)\"\n              id=\"ball-5-a\"\n            >\n              <stop stopColor=\"#eef2ff\" offset=\"0%\" />\n              <stop stopColor=\"#c7d2fe\" offset=\"34.827%\" />\n              <stop stopColor=\"#818cf8\" offset=\"100%\" />\n            </radialGradient>\n            <filter\n              x=\"-500%\"\n              y=\"-500%\"\n              width=\"1000%\"\n              height=\"1000%\"\n              filterUnits=\"objectBoundingBox\"\n              id=\"dropshadow-ball-5\"\n            >\n              <feOffset dx=\"24\" dy=\"24\" in=\"SourceAlpha\" result=\"shadowOffsetOuter\" />\n              <feGaussianBlur stdDeviation=\"24\" in=\"shadowOffsetOuter\" result=\"shadowBlurOuter\" />\n              <feColorMatrix\n                values=\"0 0 0 0 0.10 0 0 0 0 0.17 0 0 0 0 0.21 0 0 0 0.22 0\"\n                in=\"shadowBlurOuter\"\n              />\n            </filter>\n          </defs>\n          <circle\n            cx=\"12\"\n            cy=\"12\"\n            r=\"12\"\n            fill=\"#ffffff\"\n            fillRule=\"evenodd\"\n            filter=\"url(#dropshadow-ball-5)\"\n          />\n          <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"url(#ball-5-a)\" fillRule=\"evenodd\" />\n        </svg>\n      </div>\n    </div>\n  )\n}\n\nexport default Illustration\n"
  },
  {
    "path": "src/components/hero/index.ts",
    "content": "export { default as Hero } from './hero'\nexport { default as HeroIllustration } from './illustration'\n"
  },
  {
    "path": "src/components/layout/index.ts",
    "content": "export { default as Layout } from './layout'\n"
  },
  {
    "path": "src/components/layout/layout.tsx",
    "content": "import type { PropsWithChildren } from 'react'\n\nimport { Footer } from '@/components/footer'\nimport { Gradient } from '@/components/gradient'\nimport { Header } from '@/components/header'\nimport { cn } from '@/utils/cn'\n\nfunction Layout({\n  children,\n  className,\n}: PropsWithChildren<{\n  className?: string\n}>) {\n  return (\n    <div\n      className={cn(\n        'relative mx-auto my-0 flex min-h-screen max-w-screen-2xl flex-col overflow-hidden bg-white shadow-2xl',\n        className,\n      )}\n    >\n      <Gradient className=\"absolute bottom-0 left-1/2 top-0 ml-28 hidden w-1/2 lg:block\" />\n      <Header />\n      <main className=\"flex-shrink-0 flex-grow items-center lg:flex\">{children}</main>\n      <Footer />\n    </div>\n  )\n}\n\nexport default Layout\n"
  },
  {
    "path": "src/components/logo/index.ts",
    "content": "export { default as Logo } from './logo'\n"
  },
  {
    "path": "src/components/logo/logo.tsx",
    "content": "function Logo({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n    >\n      <defs>\n        <linearGradient x1=\"50%\" y1=\"0%\" x2=\"50%\" y2=\"100%\" id=\"logo-b\">\n          <stop stopColor=\"#A8A3F6\" offset=\"0%\" />\n          <stop stopColor=\"#c7d2fe\" offset=\"100%\" />\n        </linearGradient>\n        <path\n          d=\"M27.098 7.53l-9.441 9.44a8.084 8.084 0 0 0-.625.702 8 8 0 0 0 12.173 10.377l9.24-9.24A16.02 16.02 0 0 1 39 23c0 8.837-7.163 16-16 16S7 31.837 7 23 14.163 7 23 7c1.416 0 2.79.184 4.098.53z\"\n          id=\"logo-a\"\n        />\n        <linearGradient x1=\"50%\" y1=\"0%\" x2=\"50%\" y2=\"100%\" id=\"logo-d\">\n          <stop stopColor=\"#c7d2fe\" offset=\"0%\" />\n          <stop stopColor=\"#818cf8\" offset=\"100%\" />\n        </linearGradient>\n        <path\n          d=\"M27.098 7.53l-9.441 9.44a8.084 8.084 0 0 0-.625.702 8 8 0 0 0 12.173 10.377l9.24-9.24A16.02 16.02 0 0 1 39 23c0 8.837-7.163 16-16 16S7 31.837 7 23 14.163 7 23 7c1.416 0 2.79.184 4.098.53z\"\n          id=\"logo-c\"\n        />\n      </defs>\n      <g transform=\"translate(-7 -7)\" fill=\"none\" fillRule=\"evenodd\">\n        <use fill=\"url(#logo-b)\" transform=\"rotate(45 23 23)\" xlinkHref=\"#logo-a\" />\n        <use fill=\"url(#logo-d)\" transform=\"scale(-1 1) rotate(45 0 -32.527)\" xlinkHref=\"#logo-c\" />\n      </g>\n    </svg>\n  )\n}\n\nexport default Logo\n"
  },
  {
    "path": "src/components/menu/index.tsx",
    "content": "export { default as Menu } from './menu'\n"
  },
  {
    "path": "src/components/menu/menu-item.tsx",
    "content": "import { NavLink } from 'react-router-dom'\n\nfunction MenuItem({ name, to }: { name: string; to: string }) {\n  return (\n    <li>\n      <NavLink\n        className={({ isActive }) =>\n          isActive ? 'border-b text-white' : 'text-white hover:border-b'\n        }\n        to={to}\n      >\n        {name}\n      </NavLink>\n    </li>\n  )\n}\n\nexport default MenuItem\n"
  },
  {
    "path": "src/components/menu/menu.tsx",
    "content": "import MenuItem from '@/components/menu/menu-item'\n\nconst MENU_ITEMS = [\n  { name: 'Contact', to: '/contact' },\n  { name: 'About Us', to: '/about' },\n  { name: \"FAQ's\", to: '/faqs' },\n  { name: 'Support', to: '/support' },\n]\n\nfunction Menu({ className }: { className?: string }) {\n  return (\n    <ul className={className}>\n      {MENU_ITEMS.map((link) => (\n        <MenuItem key={link.name} to={link.to} name={link.name} />\n      ))}\n    </ul>\n  )\n}\n\nexport default Menu\n"
  },
  {
    "path": "src/components/newsletter-form/index.ts",
    "content": "export { default as NewsletterForm } from './newsletter-form'\n"
  },
  {
    "path": "src/components/newsletter-form/newsletter-form.tsx",
    "content": "import { cn } from '@/utils/cn'\nimport type { ChangeEvent, FormEvent } from 'react'\nimport { useState } from 'react'\n\nfunction NewsletterForm({\n  className,\n  onSubmit,\n  submitText = 'Submit',\n}: {\n  className?: string\n  onSubmit: (email: string) => Promise<any>\n  submitText?: string\n}) {\n  const [email, setEmail] = useState('')\n  const [success, setSuccess] = useState(false)\n\n  async function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n    const result = await onSubmit(email)\n    console.log(result)\n    setEmail('')\n    setSuccess(true)\n  }\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    setEmail(event.target.value)\n  }\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className={cn('newsletter-form is-revealing flex flex-col gap-2 sm:flex-row', className)}\n    >\n      <div className=\"mr-2 flex-shrink flex-grow\">\n        <label className=\"hidden\" htmlFor=\"email\" aria-hidden=\"true\">\n          Email\n        </label>\n        <input\n          required\n          placeholder=\"Your best email&hellip;\"\n          id=\"email\"\n          name=\"email\"\n          type=\"email\"\n          value={email}\n          onChange={handleChange}\n          autoComplete=\"off\"\n          className=\"w-full rounded-sm border border-gray-300 bg-white px-4 py-3 text-sm text-gray-500 shadow-none\"\n        />\n        {success && (\n          <div className=\"mt-2 text-xs italic text-gray-500\">Email submitted successfully!</div>\n        )}\n      </div>\n\n      <div className=\"control\">\n        <button\n          className=\"-mt-px inline-flex cursor-pointer justify-center whitespace-nowrap rounded-sm border-0 bg-gradient-to-r from-secondary-500 to-secondary-400 px-7 py-4 text-center font-medium leading-4 text-white no-underline shadow-lg\"\n          type=\"submit\"\n        >\n          {submitText}\n        </button>\n      </div>\n    </form>\n  )\n}\n\nexport default NewsletterForm\n"
  },
  {
    "path": "src/components/scroll-to-top/index.ts",
    "content": "export { default as ScrollToTop } from './scroll-to-top'\n"
  },
  {
    "path": "src/components/scroll-to-top/scroll-to-top.tsx",
    "content": "import type { PropsWithChildren } from 'react'\nimport { Fragment, useLayoutEffect } from 'react'\nimport { useLocation } from 'react-router-dom'\n\nfunction ScrollToTop({ children }: PropsWithChildren) {\n  const { pathname } = useLocation()\n\n  useLayoutEffect(() => {\n    window.scrollTo(0, 0)\n  }, [pathname])\n\n  return <Fragment>{children}</Fragment>\n}\n\nexport default ScrollToTop\n"
  },
  {
    "path": "src/components/social-links/constants.ts",
    "content": "export const SOCIAL_LINKS = [\n  {\n    name: `Facebook`,\n    url: `https://facebook.com`,\n    svg: `<svg width=\"16\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.023 16L6 9H3V6h3V4c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V6H13l-1 3H9.28v7H6.023z\" fill=\"#FFFFFF\" /></svg>`,\n  },\n  {\n    name: `Google`,\n    url: `https://google.com`,\n    svg: `<svg width=\"16\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\"><path\n    d=\"M7.9 7v2.4H12c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C11.5 1.7 9.9 1 8 1 4.1 1 1 4.1 1 8s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H7.9z\" fill=\"#FFFFFF\" /></svg>`,\n  },\n  {\n    name: `Twitter`,\n    url: `https://twitter.com`,\n    svg: `<svg width=\"16\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16 3c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4C.7 7.7 1.8 9 3.3 9.3c-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4C15 4.3 15.6 3.7 16 3z\" fill=\"#FFFFFF\" /></svg>`,\n  },\n]\n"
  },
  {
    "path": "src/components/social-links/index.ts",
    "content": "export { default as SocialLinks } from './social-links'\n"
  },
  {
    "path": "src/components/social-links/social-link.tsx",
    "content": "import { SOCIAL_LINKS } from '@/components/social-links/constants'\n\nfunction SocialLink({ link }: { link: (typeof SOCIAL_LINKS)[number] }) {\n  return (\n    <li>\n      <a href={link.url}>\n        <span className=\"sr-only\">{link.name}</span>\n        <div dangerouslySetInnerHTML={{ __html: link.svg }} />\n      </a>\n    </li>\n  )\n}\n\nexport default SocialLink\n"
  },
  {
    "path": "src/components/social-links/social-links.tsx",
    "content": "import { SOCIAL_LINKS } from '@/components/social-links/constants'\nimport MenuItem from '@/components/social-links/social-link'\nimport { cn } from '@/utils/cn'\n\nfunction SocialLinks({ className }: { className?: string }) {\n  return (\n    <ul className={cn('flex gap-4', className)}>\n      {SOCIAL_LINKS.map((link) => (\n        <MenuItem key={link.name} link={link} />\n      ))}\n    </ul>\n  )\n}\n\nexport default SocialLinks\n"
  },
  {
    "path": "src/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <link rel=\"icon\" type=\"image/svg+xml\" href=\"/assets/favicon.svg\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Holly Template</title>\n    <link\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,500,700\"\n    />\n  </head>\n  <body class=\"bg-gray-100\">\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"/index.tsx\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "src/index.tsx",
    "content": "import React from 'react'\nimport { createRoot } from 'react-dom/client'\nimport App from './app'\n\nimport './assets/styles.css'\n\nconst root = document.getElementById('root') as HTMLElement\ncreateRoot(root).render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n)\n"
  },
  {
    "path": "src/routes/about.tsx",
    "content": "import { Article } from '@/components/article'\nimport { Layout } from '@/components/layout'\n\nfunction AboutPage() {\n  return (\n    <Layout>\n      <Article\n        title=\"About\"\n        imageAlt=\"Lorem Picsum\"\n        imageSrc=\"https://picsum.photos/420/640?grayscale\"\n      >\n        {/* prettier-ignore */}\n        <p>\n            Holly is a free HTML/CSS landing page designed and developed by <a href=\"https://twitter.com/pacovitiello\">@pacovitiello</a> and <a href=\"https://twitter.com/DavidePacilio\">@DavidePacilio</a>!\n          </p>\n        <p>\n          Holly is suitable for all kind of startups, it's easily customizable, and it's\n          downloadable for personal and commercial use.\n        </p>\n        <p>This template is distributed under the MIT License.</p>\n      </Article>\n    </Layout>\n  )\n}\n\nexport default AboutPage\n"
  },
  {
    "path": "src/routes/contact.tsx",
    "content": "import { Article } from '@/components/article'\nimport { Layout } from '@/components/layout'\n\nexport default function ContactPage() {\n  return (\n    <Layout>\n      <Article\n        title=\"Contact\"\n        imageAlt=\"Lorem Picsum\"\n        imageSrc=\"https://picsum.photos/420/640?grayscale\"\n      >\n        Add your contact information here.\n      </Article>\n    </Layout>\n  )\n}\n"
  },
  {
    "path": "src/routes/faqs.tsx",
    "content": "import { Article } from '@/components/article'\nimport { Layout } from '@/components/layout'\n\nexport default function FaqsPage() {\n  return (\n    <Layout>\n      <Article\n        title=\"FAQ's\"\n        imageAlt=\"Lorem Picsum\"\n        imageSrc=\"https://picsum.photos/420/640?grayscale\"\n      >\n        <p>Add your FAQ content here.</p>\n        <details\n          className=\"mt-4 block rounded-sm border px-4 open:border-primary-400 hover:border-primary-300\"\n          open\n        >\n          <summary className=\"-mx-4 cursor-pointer border-primary-200 px-4 py-3\">\n            What is Holly?\n          </summary>\n          <p>\n            Holly is a free HTML/CSS landing page designed and developed by{' '}\n            <a href=\"https://twitter.com/pacovitiello\">@pacovitiello</a> and{' '}\n            <a href=\"https://twitter.com/DavidePacilio\">@DavidePacilio</a>!\n          </p>\n          <p>\n            Holly is suitable for all kind of startups, it's easily customizable, and it's\n            downloadable for personal and commercial use.\n          </p>\n        </details>\n        <details className=\"mt-4 block rounded-sm border border-gray-200 px-4 hover:border-primary-300\">\n          <summary className=\"-mx-4 cursor-pointer px-4 py-3\">How can I use Holly?</summary>\n          <p>\n            Holly is licensed under the MIT License, which means you can use it for personal and\n            commercial projects for free.\n          </p>\n          <p>\n            You can also modify Holly to your needs, but you can't redistribute it or sell it as a\n            template.\n          </p>\n        </details>\n        <details className=\"mt-4 block rounded-sm border border-gray-200 px-4 hover:border-primary-300\">\n          <summary className=\"-mx-4 cursor-pointer px-4 py-3\">Can I contribute to Holly?</summary>\n          <p>\n            Yes, you can! Holly is an open source project, and you can contribute to it on{' '}\n            <a href=\"https://github.com/lukemcdonald/holly-react\">GitHub</a>.\n          </p>\n        </details>\n      </Article>\n    </Layout>\n  )\n}\n"
  },
  {
    "path": "src/routes/home.tsx",
    "content": "import { Hero, HeroIllustration } from '@/components/hero'\nimport { Layout } from '@/components/layout'\n\nexport default function HomePage() {\n  return (\n    <Layout>\n      <Hero\n        title=\"Landing template for startups\"\n        content=\"Our landing page template works for all the devices, so you only have to setup it once, and get beautiful results forever.\"\n        illustration={<HeroIllustration />}\n      />\n    </Layout>\n  )\n}\n"
  },
  {
    "path": "src/routes/support.tsx",
    "content": "import { Article } from '@/components/article'\nimport { Layout } from '@/components/layout'\nimport { useState } from 'react'\n\nexport default function SupportPage() {\n  const [success, setSuccess] = useState(false)\n\n  function handleClick(e) {\n    e.preventDefault()\n    setSuccess(true)\n  }\n\n  return (\n    <Layout>\n      <Article\n        title=\"FAQ's\"\n        imageAlt=\"Lorem Picsum\"\n        imageSrc=\"https://picsum.photos/420/640?grayscale\"\n      >\n        <p>Add your support content here.</p>\n\n        <form className=\"space-y-4\">\n          <div>\n            <label className=\"block text-lg font-medium leading-10\" htmlFor=\"name\">\n              Name\n            </label>\n            <input\n              className=\"w-full rounded-sm border border-gray-300 bg-white px-4 py-3 text-sm text-gray-500 shadow-none\"\n              id=\"name\"\n              name=\"name\"\n              type=\"text\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-lg font-medium leading-10\" htmlFor=\"email\">\n              Email\n            </label>\n            <input\n              className=\"w-full rounded-sm border border-gray-300 bg-white px-4 py-3 text-sm text-gray-500 shadow-none\"\n              id=\"email\"\n              name=\"email\"\n              type=\"email\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-lg font-medium leading-10\" htmlFor=\"message\">\n              Message\n            </label>\n            <textarea\n              className=\"w-full rounded-sm border border-gray-300 bg-white px-4 py-3 text-sm text-gray-500 shadow-none\"\n              id=\"message\"\n              name=\"message\"\n            />\n          </div>\n\n          <button\n            className=\"-mt-px inline-flex cursor-pointer justify-center whitespace-nowrap rounded-sm border-0 bg-gradient-to-r from-secondary-500 to-secondary-400 px-7 py-4 text-center font-medium leading-4 text-white no-underline shadow-lg\"\n            onClick={handleClick}\n            type=\"submit\"\n          >\n            Submit\n          </button>\n\n          {success && (\n            <div className=\"mt-2 text-xs italic text-gray-500\">\n              🎉 Do something when the form is submitted!\n            </div>\n          )}\n        </form>\n      </Article>\n    </Layout>\n  )\n}\n"
  },
  {
    "path": "src/utils/cn.ts",
    "content": "import { ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"
  },
  {
    "path": "src/vite-env.d.ts",
    "content": "/// <reference types=\"vite/client\" />\n"
  },
  {
    "path": "styles/tailwind.css",
    "content": "/**\n * Base\n * -----------------------------------------------------------------------------\n */\n@import 'tailwindcss/base';\n\n/**\n * Components\n * -----------------------------------------------------------------------------\n */\n@import 'tailwindcss/components';\n\n/**\n * Utilites\n * -----------------------------------------------------------------------------\n */\n@import 'tailwindcss/utilities';\n"
  },
  {
    "path": "tailwind.config.js",
    "content": "const { fontFamily } = require(`tailwindcss/defaultTheme`)\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n  content: ['./src/**/*.{html,ts,tsx}'],\n  theme: {\n    extend: {\n      fontFamily: {\n        sans: ['Fira Sans', ...fontFamily.sans],\n      },\n      typography: (theme) => ({\n        DEFAULT: {\n          css: {\n            a: {\n              color: theme('colors.current'),\n            },\n          },\n        },\n      }),\n    },\n    colors: {\n      inherit: 'inherit',\n      transparent: 'transparent',\n      current: 'currentColor',\n      black: '#000000',\n      white: '#ffffff',\n      gray: colors.slate,\n      primary: colors.indigo,\n      secondary: colors.rose,\n      tertiary: colors.emerald,\n    },\n  },\n  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"allowJs\": false,\n    \"allowSyntheticDefaultImports\": true,\n    \"esModuleInterop\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"react-jsx\",\n    \"lib\": [\"DOM\", \"DOM.Iterable\", \"ESNext\"],\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Node\",\n    \"noEmit\": true,\n    \"noImplicitAny\": false,\n    \"noUnusedLocals\": true,\n    \"paths\": { \"@/*\": [\"./src/*\"] },\n    \"resolveJsonModule\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"target\": \"ESNext\",\n    \"typeRoots\": [\"./node_modules/@types\"]\n  },\n  \"include\": [\"**/*.ts\", \"**/*.tsx\"],\n  \"references\": [{ \"path\": \"./tsconfig.node.json\" }]\n}\n"
  },
  {
    "path": "tsconfig.node.json",
    "content": "{\n  \"compilerOptions\": {\n    \"allowSyntheticDefaultImports\": true,\n    \"composite\": true,\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Node\"\n  },\n  \"include\": [\"vite.config.ts\"]\n}\n"
  },
  {
    "path": "vite.config.ts",
    "content": "import react from '@vitejs/plugin-react'\nimport path from 'path'\nimport { defineConfig } from 'vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  root: 'src',\n  base: '/holly-react/',\n  build: {\n    outDir: '../dist',\n  },\n  resolve: {\n    alias: {\n      '@': path.resolve(__dirname, './src'),\n    },\n  },\n  plugins: [react()],\n})\n"
  }
]