Skip to content

Instantly share code, notes, and snippets.

@sanscheese

sanscheese/pricing.html

Last active June 24, 2022 16:41
Show Gist options
  • Save sanscheese/01acde8ac24c4de865ae134e728909b4 to your computer and use it in GitHub Desktop.
Save sanscheese/01acde8ac24c4de865ae134e728909b4 to your computer and use it in GitHub Desktop.
Download ZIP
Pricing HTML
Raw
pricing.html
<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>
Raw
pricing.ts
// 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