- `
- },
-}
-
-const pipFormat = {
- to: function (value) {
- return pricingList[value].icon
- },
-}
-
-const pricingSlider = noUiSlider.create(sliderDiv, {
- start: 3,
- range: { min: 0, max: priceNumbers.length - 1 },
- step: 1,
- tooltips: tooltipFormat,
- pips: { mode: 'count', values: priceNumbers.length, format: pipFormat, density: -1 },
-})
-
-pricingSlider.on('update', function (values, _) {
- for (const e of sliderDiv.querySelectorAll('.noUi-value')) {
- e.classList.remove('active')
- }
-
- const value = parseInt(values[0])
- const el = sliderDiv.querySelector('.noUi-value[data-value="' + value + '"]')
- el.classList.add('active')
-
- const tooltip = sliderDiv.querySelector('.noUi-tooltip')
- tooltip.classList.remove('first')
- tooltip.classList.remove('last')
-
- if (document.documentElement.clientWidth < 500) {
- if (value === 0) {
- tooltip.classList.add('first')
- }
- if (value === priceNumbers.length - 1) {
- tooltip.classList.add('last')
- }
- }
-})
-
-const pips = sliderDiv.querySelectorAll('.noUi-value')
-for (const pip of pips) {
- pip.addEventListener('click', e => {
- const v = e.target.getAttribute('data-value')
- pricingSlider.set(v)
- })
-}
diff --git a/website/src/components/Donate.astro b/website/src/components/Donate.astro
index f1e1ecf..d5b138c 100644
--- a/website/src/components/Donate.astro
+++ b/website/src/components/Donate.astro
@@ -1,18 +1,12 @@
---
-import { Content as DonateText } from '../content/index/donate.md'
+const { title } = Astro.props
+
+import { Content as Sponsor } from '../content/donate/sponsor.md'
+import { Content as Pro } from '../content/donate/pro.md'
+
---
-
How can I donate or support this project?
-
- If this project helps you save on your map hosting costs, please subscribe to one of our support
- plans here. Alternatively, sponsor us on GitHub Sponsors.
-
-
-
-
-
-
-
+
+Sponsor
+
diff --git a/website/src/content/donate/pro.md b/website/src/content/donate/pro.md
new file mode 100644
index 0000000..a2f3c6f
--- /dev/null
+++ b/website/src/content/donate/pro.md
@@ -0,0 +1,4 @@
+## Do you offer support and SLA guarantees?
+
+I'm considering launching paid support plans - where I personally help you migrate to OpenFreeMap - and maybe a Pro plan with SLA guarantees. If you're interested, please write me an [email](mailto:zsolt@openfreemap.org).
+
diff --git a/website/src/content/donate/sponsor.md b/website/src/content/donate/sponsor.md
new file mode 100644
index 0000000..aee4d5f
--- /dev/null
+++ b/website/src/content/donate/sponsor.md
@@ -0,0 +1,5 @@
+## How can I sponsor the project?
+
+If this project helps you save on your map hosting costs, please consider sponsoring me on [GitHub Sponsors](https://github.com/sponsors/hyperknot).
+
+If possible, please choose a monthly donation, even if it's a smaller amount. The nature of this project needs recurring donations to cover the server costs.
diff --git a/website/src/content/index/after_donate.md b/website/src/content/index/after_donate.md
index 6751032..4cda79b 100644
--- a/website/src/content/index/after_donate.md
+++ b/website/src/content/index/after_donate.md
@@ -1,3 +1,25 @@
+## Why did you build this project?
+
+OpenStreetMap is one of the most important collective projects in history. It began 20 years ago, and today, 3 million edits are made each day!
+
+For a long time, when you wanted to use the map on your website or app, you had to look for a commercial map tile provider and hope your site didn't become too popular. Otherwise, you might end up with a $10,000 bill in a single day, as Hoodmaps [did](https://x.com/levelsio/status/1730659933232730443).
+
+Self-hosting was an option, but it required a big server and a lot of time to get it right.
+
+Since I've spent many years developing the map tile infrastructure for [MapHub](https://maphub.net/), I decided to open-source it so anyone can use it. With OpenFreeMap, you now have the option to either set up your own server with just one line of code or use our public instance.
+
+## How can you offer a free public instance ?
+
+There is no technical reason why map hosting costs as much as it does today. Vector tiles are just static files. It's true that serving hundreds of millions of files is not easy, but at the end of the day, they are just files.
+
+Financially, the plan is to keep renting servers until they cover the bandwidth. I believe it can be self-sustainable if enough people subscribe to the support plans.
+
+If this project helps you save on your map hosting costs, please consider subscribing to a support plan.
+
+## Is commercial usage allowed?
+
+Yes.
+
## What is the tech stack?
There is no tile server running; only nginx serving a Btrfs image with 300 million hard-linked files. This was my idea; I haven't read about anyone else doing this in production, but it works really well. (You can read more about it on [GitHub](https://github.com/hyperknot/openfreemap).)
diff --git a/website/src/content/index/before_donate.md b/website/src/content/index/before_donate.md
index dd25433..909ddab 100644
--- a/website/src/content/index/before_donate.md
+++ b/website/src/content/index/before_donate.md
@@ -9,24 +9,6 @@ X: [@OpenFreeMapOrg](https://x.com/OpenFreeMapOrg) (for announcements)
GitHub: [openfreemap](https://github.com/hyperknot/openfreemap) and [openfreemap-styles](https://github.com/hyperknot/openfreemap-styles)
-## Why did you build this project?
-OpenStreetMap is one of the most important collective projects in history. It began 20 years ago, and today, 3 million edits are made each day!
-For a long time, when you wanted to use the map on your website or app, you had to look for a commercial map tile provider and hope your site didn't become too popular. Otherwise, you might end up with a $10,000 bill in a single day, as Hoodmaps [did](https://x.com/levelsio/status/1730659933232730443).
-Self-hosting was an option, but it required a big server and a lot of time to get it right.
-
-Since I've spent many years developing the map tile infrastructure for [MapHub](https://maphub.net/), I decided to open-source it so anyone can use it. With OpenFreeMap, you now have the option to either set up your own server with just one line of code or use our public instance.
-
-## How can you offer a free public instance ?
-
-There is no technical reason why map hosting costs as much as it does today. Vector tiles are just static files. It's true that serving hundreds of millions of files is not easy, but at the end of the day, they are just files.
-
-Financially, the plan is to keep renting servers until they cover the bandwidth. I believe it can be self-sustainable if enough people subscribe to the support plans.
-
-If this project helps you save on your map hosting costs, please consider subscribing to a support plan.
-
-## Is commercial usage allowed?
-
-Yes.
diff --git a/website/src/content/index/donate.md b/website/src/content/index/donate.md
deleted file mode 100644
index 50f6db5..0000000
--- a/website/src/content/index/donate.md
+++ /dev/null
@@ -1,7 +0,0 @@
-On **Gold** level and above, we offer personalised technical support by email. Otherwise, support is via GitHub [Discussions](https://github.com/hyperknot/openfreemap/discussions).
-
-If we ever receive a **Diamond** level supporter, we'll put their logo on this page.
-
-When subscribing to a support plan, you receive an invoice for each of your payments.
-
-Note: if you want to make a single donation, you can do this via [GitHub Sponsors](https://github.com/sponsors/hyperknot). However, please understand that the nature of this project needs recurring donations to cover the server costs.
diff --git a/website/src/layouts/Layout.astro b/website/src/layouts/Layout.astro
index 4b34584..3ce67cb 100644
--- a/website/src/layouts/Layout.astro
+++ b/website/src/layouts/Layout.astro
@@ -25,7 +25,6 @@ import '../styles/_style.css'
-
diff --git a/website/src/styles/_style.css b/website/src/styles/_style.css
index e68b907..223371e 100644
--- a/website/src/styles/_style.css
+++ b/website/src/styles/_style.css
@@ -2,4 +2,3 @@
@import 'global.css';
/* */
@import 'map.css';
-@import 'donate.css';
diff --git a/website/src/styles/collapsible.css b/website/src/styles/collapsible.css
deleted file mode 100644
index c93ea3c..0000000
--- a/website/src/styles/collapsible.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.col-lbl {
- display: block;
- cursor: pointer;
- color: #333;
-}
-
-.col-chk {
- display: none;
-}
-
-.col-lbl:before {
- content: '►';
- margin-right: 1em;
- color: #555;
- font-size: 0.8em;
-}
-
-.col-cnt {
- display: none;
- margin: 1em 0 2em;
-}
-
-.col-chk:checked ~ .col-cnt {
- display: block;
-}
-
-.col-chk:checked ~ .col-lbl:before {
- content: '▼';
-}
diff --git a/website/src/styles/donate.css b/website/src/styles/donate.css
deleted file mode 100644
index f9353b3..0000000
--- a/website/src/styles/donate.css
+++ /dev/null
@@ -1,78 +0,0 @@
-#support-plans-slider {
- margin: 200px auto 150px;
-
- @media (max-width: 550px) {
- max-width: 98%;
- margin: 170px auto 120px;
- }
-}
-
-.plan-name {
- font-weight: bold;
- margin-bottom: 10px;
-}
-
-.plan-link {
- display: block;
- text-decoration: none;
- color: white;
- font-weight: bold;
- letter-spacing: 0.05rem;
- font-size: 15px;
- border-radius: 20px;
- padding: 6px 16px;
- margin-top: 15px;
- background: linear-gradient(32deg, #03a9f4, transparent) #f441a5;
- transition: background-color 1s;
-
- &:hover,
- &:focus {
- background-color: #fdb900;
- }
-}
-
-/* noUI slider customizations */
-
-.noUi-connects {
- cursor: pointer;
-}
-
-.noUi-value {
- line-height: 0;
- margin-top: 32px;
- font-size: 30px;
- transition: font-size 0.3s ease;
- cursor: pointer;
-
- &.active {
- font-size: 45px;
- }
-}
-
-.noUi-marker-horizontal {
- &.noUi-marker-large {
- height: 5px;
- }
-
- &.noUi-marker {
- margin-left: 0;
- width: 1px;
- }
-}
-
-.noUi-tooltip {
- border-color: #ccc;
- border-radius: 10px;
- padding: 10px;
-
- &.first {
- left: 0;
- transform: unset;
- }
-
- &.last {
- right: 0;
- left: unset;
- transform: unset;
- }
-}
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index aab3cf0..34d2f24 100644
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@@ -123,4 +123,15 @@ hr {
&:focus {
background-color: #dea31d;
}
+
+ &.pink {
+ background: linear-gradient(32deg, #0070a2, transparent) #ed36a7;
+
+ &:hover,
+ &:focus {
+ background-color: #dea31d;
+ }
+ }
}
+
+