Last active
June 24, 2022 16:41
-
-
Save sanscheese/01acde8ac24c4de865ae134e728909b4 to your computer and use it in GitHub Desktop.
Pricing HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<link href="/css/output.css" rel="stylesheet"> | |
</head> | |
<body> | |
<div class="bg-green-700 text-white p-5"> | |
<h1>Pricing</h1> | |
<a href="/">< Back home</a> | |
</div> | |
<!-- This example requires Tailwind CSS v2.0+ --> | |
<div class="bg-white"> | |
<div class="max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:px-8"> | |
<div class="sm:flex sm:flex-col sm:align-center"> | |
<h1 class="text-5xl font-extrabold text-gray-900 sm:text-center">Pricing Plans</h1> | |
<p class="mt-5 text-xl text-gray-500 sm:text-center">Start building for free, then add a site plan to go live. Account plans unlock additional features.</p> | |
<div class="relative self-center mt-6 bg-gray-100 rounded-lg p-0.5 flex sm:mt-8"> | |
<button type="button" class="relative w-1/2 bg-white border-gray-200 rounded-md shadow-sm py-2 text-sm font-medium text-gray-900 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8">Monthly billing</button> | |
<button type="button" class="ml-0.5 relative w-1/2 border border-transparent rounded-md py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8">Yearly billing</button> | |
</div> | |
</div> | |
<div class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-4"> | |
<div class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200"> | |
<div class="p-6"> | |
<h2 class="text-lg leading-6 font-medium text-gray-900">Hobby</h2> | |
<p class="mt-4 text-sm text-gray-500">All the basics for starting a new business</p> | |
<p class="mt-8"> | |
<span class="text-4xl font-extrabold text-gray-900">{{PRICE_HOBBY}}</span> | |
<span class="text-base font-medium text-gray-500">/mo</span> | |
</p> | |
<a href="#" class="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Hobby</a> | |
</div> | |
<div class="pt-6 pb-8 px-6"> | |
<h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3> | |
<ul role="list" class="mt-6 space-y-4"> | |
<li class="flex space-x-3"> | |
<!-- Heroicon name: solid/check --> | |
<svg class="flex-shrink-0 h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
</svg> | |
<span class="text-sm text-gray-500">Potenti felis, in cras at at ligula nunc.</span> | |
</li> | |
<li class="flex space-x-3"> | |
<!-- Heroicon name: solid/check --> | |
<svg class="flex-shrink-0 h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
</svg> | |
<span class="text-sm text-gray-500">Orci neque eget pellentesque.</span> | |
</li> | |
</ul> | |
</div> | |
</div> | |
<div class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200"> | |
<div class="p-6"> | |
<h2 class="text-lg leading-6 font-medium text-gray-900">Freelancer</h2> | |
<p class="mt-4 text-sm text-gray-500">All the basics for starting a new business</p> | |
<p class="mt-8"> | |
<span class="text-4xl font-extrabold text-gray-900">{{PRICE_FREELANCE}}</span> | |
<span class="text-base font-medium text-gray-500">/mo</span> | |
</p> | |
<a href="#" class="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Freelancer</a> | |
</div> | |
<div class="pt-6 pb-8 px-6"> | |
<h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3> | |
<ul role="list" class="mt-6 space-y-4"> | |
<li class="flex space-x-3"> | |
<!-- Heroicon name: solid/check --> | |
<svg class="flex-shrink-0 h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
</svg> | |
<span class="text-sm text-gray-500">Potenti felis, in cras at at ligula nunc. </span> | |
</li> | |
<li class="flex space-x-3"> | |
<!-- Heroicon name: solid/check --> | |
<svg class="flex-shrink-0 h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
</svg> | |
<span class="text-sm text-gray-500">Orci neque eget pellentesque.</span> | |
</li> | |
<li class="flex space-x-3"> | |
<!-- Heroicon name: solid/check --> | |
<svg class="flex-shrink-0 h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
</svg> | |
<span class="text-sm text-gray-500">Donec mauris sit in eu tincidunt etiam.</span> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Netlify Edge Function - netlify/edge-functions/pricing.ts | |
import { Context } from "netlify:edge" | |
export default async (request: Request, context: Context) => { | |
const url = new URL(request.url) | |
context.log(`Updating price ${url}`) | |
// Get the page content | |
const response = await context.next() | |
const page = await response.text() | |
// Pricing | |
const regex_hobby = /{{PRICE_HOBBY}}/ig | |
const regex_freelance = /{{PRICE_FREELANCE}}/ig | |
const prices: any = { | |
'GB': { | |
hobby: '£5', | |
freelance: '£20' | |
}, | |
'AU': { | |
hobby: '$50', | |
freelance: '$300' | |
}, | |
'US': { | |
hobby: '$2', | |
freelance: '$5' | |
}, | |
} | |
const countryCode = context.geo.country?.code || 'GB' | |
// Replace the content | |
const updatedPage = page | |
.replace(regex_hobby, prices[countryCode].hobby) | |
.replace(regex_freelance, prices[countryCode].freelance) | |
return new Response(updatedPage, response); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment