Pricing plan template

django_project/geocontext/templates/pricing_plan.html

@@ -0,0 +1,63 @@
+{% extends 'main_base.html' %}
+
+{% load static %}
+{% block title %}
+    Pricing Plan
+{% endblock %}
+
+{% block body_content %}
+
+    <style>
+        .pricing-plan-container {
+            margin-top: 2em;
+            text-align: center;
+        }
+        .pricing-plan-container .card {
+            border-width: 2px;
+            border-radius: 1em;
+            padding-top: 2em;
+            padding-bottom: 2em;
+            transition: 0.5s;
+        }
+        .pricing-plan-container .card:hover {
+            border: 2px solid #d91269;
+            box-shadow: 0 0 8px #5e5e5e;
+        }
+        .card-title {
+            font-weight: 300;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+        }
+        .price {
+            font-size: 3em;
+        }
+        .btn-purchase {
+            margin-top: 1.5em;
+            border-radius: 15px;
+            font-size: 0.9em;
+            padding-left: 2em;
+            padding-right: 2em;
+        }
+        .card-body p {
+            line-height: 2em;
+        }
+    </style>
+
+    <div class="container pricing-plan-container">
+        <div class="row">
+            {% for user_tier in user_tiers %}
+                <div class="col-lg-4">
+                    <div class="card" style="width: 100%;">
+                        <div class="card-body">
+                            <h5 class="card-title">{{ user_tier.name }}</h5>
+                            <h4 class="price">${{ user_tier.price_amount|floatformat:"0" }}</h4>
+                            {{ user_tier.description | linebreaks }}
+                            <a href="#" class="btn btn-primary btn-purchase">Purchase</a>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+
+{% endblock %}

django_project/geocontext/urls.py

@@ -12,6 +12,7 @@
 )
 from geocontext.views.api_v2 import GenericAPIView
 from geocontext.views.collection import CollectionListView, CollectionDetailView
+from geocontext.views.pricing_plan import PricingPlanTemplateView
 from geocontext.views.service import ServiceListView, ServiceDetailView
 from geocontext.views.group import GroupListView, GroupDetailView
 
@@ -38,6 +39,9 @@
     url(regex=r'^geocontext/collection/(?P<slug>[\w-]+)/$',
         view=CollectionDetailView.as_view(),
         name='collection-detail'),
+    url(r'^pricing-plan/$',
+        PricingPlanTemplateView.as_view(),
+        name='collection-detail'),
 ]
 
 urlpatterns_api_v1 = [

django_project/geocontext/views/pricing_plan.py

@@ -0,0 +1,16 @@
+from typing import Any, Dict
+
+from django.views.generic import TemplateView
+
+from geocontext.models import UserTier
+
+
+class PricingPlanTemplateView(TemplateView):
+    template_name = 'pricing_plan.html'
+
+    def get_context_data(self, **kwargs: Any) -> Dict[str, Any]:
+        ctx = super(PricingPlanTemplateView, self).get_context_data(**kwargs)
+
+        ctx['user_tiers'] = UserTier.objects.all()
+
+        return ctx