true3dco · DanielHabib · May 28, 2021 · May 28, 2021 · May 28, 2021
diff --git a/examples/pricing_page.py b/examples/pricing_page.py
@@ -0,0 +1,28 @@
+from splashgen import launch
+from splashgen.components import PricingCard, CTAButton
+from splashgen.templates import PricingPage
+
+site = PricingPage(title="Splashgen - Splash Pages Built In Python",
+                  theme="dark")
+site.headline = "Get started immediately!"
+site.subtext = """
+Splashgen's plans scale for any organization—from startups to Fortune 500s
+"""
+
+freeCard = PricingCard(tier="Free", price_description="Free forever.")
+freeCard.call_to_action = CTAButton(
+    "https://github.com/true3dco/splashgen", "Get Started")
+freeCard.feature_checklist = ["Custom Code", "Unlimited pages", "Continuous deployment"]
+
+teamsCard = PricingCard(tier="Teams", price_description="8$/month.")
+teamsCard.call_to_action = CTAButton(
+    "https://github.com/true3dco/splashgen", "Sign up")
+teamsCard.feature_checklist = [
+    "All of the features of free", 
+    "Analytics", 
+    "Custom domains",]
+
+site.pricing_cards = [freeCard, teamsCard]
+
+
+launch(site)
diff --git a/splashgen/components/__init__.py b/splashgen/components/__init__.py
@@ -2,3 +2,4 @@
 from .cta_button_secondary import CTAButtonSecondary
 from .form import Form, TextInput, EmailInput, SelectInput
 from .link import Link
+from .pricing_card import PricingCard
diff --git a/splashgen/components/pricing_card.py b/splashgen/components/pricing_card.py
@@ -0,0 +1,23 @@
+from splashgen import Component
+
+
+class PricingCard(Component):
+    def __init__(self, tier: str = "<<TIER>>", price_description: str = "<<PRICE_DESCRIPTION>>", call_to_action: Component = None) -> None:
+        self.tier = tier
+        self.price_description = price_description
+        self.call_to_action: Component = call_to_action 
+        self.feature_checklist: list[str] = None
+
+    def render(self) -> str:
+        return f"""
+        <div">
+            <div>
+                <p>{self.tier}</p>
+                <p>{self.price_description}</p>
+                {self.call_to_action}
+            </div>
+            <div>
+              {self.feature_checklist}
+            </div>
+        </div>
+        """
diff --git a/splashgen/jinja_templates/pricing_page.html.jinja b/splashgen/jinja_templates/pricing_page.html.jinja
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{ title }}</title>
+    {% for favicon in favicons %}
+    <link rel="{{favicon['rel']}}" type="{{favicon['type']}}" sizes="{{favicon['size']}}" href="{{favicon['filename']}}" />
+    {% endfor %}
+    <meta name="theme-color" content="{% if theme == 'dark' %}#1eaee0{% else %}#ffffff{% endif %}" />
+    {% if meta %}
+    <meta name="title" content="{{ meta.title }}" />
+    <meta name="description" content="{{ meta.description }}" />
+
+    <meta property="og:type" content="website" />
+    <meta property="twitter:card" content="summary_large_image" />
+    {% if meta.canonical_url %}
+    <meta property="og:url" content="{{ meta.canonical_url }}" />
+    <meta property="twitter:url" content="{{ meta.canonical_url }}" />
+    {% endif %}
+
+    <meta property="og:title" content="{{ meta.title }}" />
+    <meta property="og:description" content="{{ meta.description }}" />
+    <meta property="twitter:title" content="{{ meta.title }}" />
+    <meta property="twitter:description" content="{{ meta.description }}" />
+
+    {% if meta.image %}
+    <meta property="og:image" content="{{ meta.image }}" />
+    <meta property="twitter:image" content="{{ meta.image }}" />
+    {% endif %} {% endif %}
+
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
+      crossorigin="anonymous"
+    />
+    <style>
+      html,
+      body {
+        height: 100%;
+        {% if theme == "dark" %}
+        background: var(--bs-dark);
+        color: var(--bs-white);
+        {% endif %}
+      }
+
+      {% if hero_video %}
+      #hero-image-container {
+        max-height: 40vh;
+      }
+
+      @media screen and (max-height: 660px) {
+        #hero-image-container {
+          display: none;
+        }
+      }
+
+      @media screen and (max-width: 768px) {
+        #hero-image-container {
+          display: none;
+        }
+      }
+      {% endif %}
+    </style>
+    {% if enable_splashgen_analytics %}
+    <script>(function(f,b){if(!b.__SV){var e,g,i,h;window.mixpanel=b;b._i=[];b.init=function(e,f,c){function g(a,d){var b=d.split(".");2==b.length&&(a=a[b[0]],d=b[1]);a[d]=function(){a.push([d].concat(Array.prototype.slice.call(arguments,0)))}}var a=b;"undefined"!==typeof c?a=b[c]=[]:c="mixpanel";a.people=a.people||[];a.toString=function(a){var d="mixpanel";"mixpanel"!==c&&(d+="."+c);a||(d+=" (stub)");return d};a.people.toString=function(){return a.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
+      for(h=0;h<i.length;h++)g(a,i[h]);var j="set set_once union unset remove delete".split(" ");a.get_group=function(){function b(c){d[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));a.push([e,call2])}}for(var d={},e=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<j.length;c++)b(j[c]);return d};b._i.push([e,f,c])};b.__SV=1.2;e=f.createElement("script");e.type="text/javascript";e.async=!0;e.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?
+      MIXPANEL_CUSTOM_LIB_URL:"file:"===f.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";g=f.getElementsByTagName("script")[0];g.parentNode.insertBefore(e,g)}})(document,window.mixpanel||[]);
+      mixpanel.init("de3f5d107b7d40401a23cb003a69a492", {
+        batch_requests: true,
+        ip: false,
+        property_blacklist: ['$browser', '$browser_version', '$device', '$device_id', '$user_id', '$current_url', '$initial_referrer', '$initial_referring_domain', '$os', '$referrer', '$referring_domain', '$screen_height', '$screen_width', '$search_engine', 'mp_keyword', 'utm_source', 'utm_referrer', 'utm_campaign']
+      });
+    </script>
+    <script>
+      mixpanel.track('site', {'host': window.location.hostname});
+    </script>
+    {% endif %}
+  </head>
+  <body style="display: grid; place-content: center">
+    <div
+      class="
+        d-flex
+        flex-column
+        align-items-center
+        justify-content-center
+        px-4
+        py-lg-3
+        min-vw-100
+        text-center
+      "
+    >
+    {# Nav bar #}
+    <div>
+      {% if logo %}
+      <img
+        class="d-block mx-auto mb-4"
+        src="{{ logo }}"
+        alt=""
+        width="56"
+        height="56"
+      />
+      {%endif%}
+
+      </div>
+      <h1 class="display-5 fw-bold">
+        {{ headline }}
+      </h1>
+      <div class="col-lg-6 mx-auto">
+        <p
+          class="lead mb-4{% if theme == 'light' %} text-muted{% endif %}"
+          {% if theme == "dark" %}style="color: rgba(255, 255, 255, 0.7)"{% endif %}
+        >
+          {{ subtext }}
+        </p>
+      </div>
+
+    {% for pricing_card in pricing_cards %}
+        <div>
+            <div>
+            <p>{{pricing_card.tier}}</p>
+            <p>{{pricing_card.description}}</p>
+                {{pricing_card.call_to_action}}
+            </div>
+            <div>
+                {% for feature in pricing_card.feature_checklist %}
+                    <p>{{feature}}</p>
+                {% endfor %}
+            </div>
+        </div>
+    {% endfor %}
+
+    </div>
+  </body>
+</html>
diff --git a/splashgen/templates/__init__.py b/splashgen/templates/__init__.py
@@ -1,2 +1,3 @@
 from .splash_site import SplashSite
 from .splash_site_2 import SplashSite2
+from .pricing_page import PricingPage
diff --git a/splashgen/templates/pricing_page.py b/splashgen/templates/pricing_page.py
@@ -0,0 +1,17 @@
+from .base import Template
+
+
+class PricingPage(Template):
+
+    headline: str
+    subtext: str
+    pricing_cards = None # : list[PricingCard]
+
+    template = "pricing_page.html.jinja"
+
+    def __init__(self, **kwargs) -> str:
+        super().__init__(**kwargs)
+
+        self.headline = "Fill out your headline here by assigning to `headline`"
+        self.subtext = "Fill out subtext by assigning to `subtext`"
+        self.pricingCards = None