✨ boost-homepage-redesign

close #413

ak/views.py

@@ -1,8 +1,14 @@
+import requests
 from django.core.exceptions import PermissionDenied
 from django.http import Http404, HttpResponse
+from django.shortcuts import render
 from django.views import View
 from django.views.generic import TemplateView
 
+from config.settings import JDOODLE_API_CLIENT_ID, JDOODLE_API_CLIENT_SECRET
+from libraries.models import Category, Library
+from versions.models import Version
+
 
 class HomepageView(TemplateView):
     """
@@ -13,6 +19,79 @@ class HomepageView(TemplateView):
     template_name = "homepage.html"
 
 
+class HomepageBetaView(TemplateView):
+    """
+    Boost homepage
+    """
+
+    template_name = "homepage_beta.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        libraries, categories = [], []
+        if "category" in self.request.GET and self.request.GET["category"] != "":
+            context["category"] = Category.objects.get(
+                slug=self.request.GET["category"]
+            )
+            libraries = Library.objects.filter(categories=context["category"]).order_by(
+                "name"
+            )
+        else:
+            context["category"] = None
+            libraries = Library.objects.all().order_by("name")
+            categories = Category.objects.all().order_by("name")
+        if "version" in self.request.GET:
+            context["version"] = Version.objects.filter(
+                slug=self.request.GET["version"]
+            ).first()
+        else:
+            context["version"] = Version.objects.most_recent()
+        if "library" in self.request.GET:
+            context["library"] = Library.objects.filter(
+                slug=self.request.GET["library"]
+            ).first()
+            categories = context["library"].categories.order_by("name")
+            if "category" in self.request.GET and self.request.GET["category"] != "":
+                context["category"] = categories.filter(
+                    slug=self.request.GET["category"]
+                ).first()
+                libraries = (
+                    Library.objects.filter(categories__in=categories)
+                    .order_by("name")
+                    .all()
+                )
+        else:
+            context["library"] = (
+                libraries[0] if libraries else Library.objects.order_by("name").first()
+            )
+            if "category" in self.request.GET and self.request.GET["category"] != "":
+                context["category"] = categories.filter(
+                    slug=self.request.GET["category"]
+                ).first()
+        context["versions"] = Version.objects.active().order_by("-release_date")
+        context["libraries"] = libraries
+        context["categories"] = categories
+        return context
+
+    def post(self, request, *args, **kwargs):
+        code = request.POST.get("code", "")
+        if not code:
+            return render(request, self.template_name)
+        api_url = "https://api.jdoodle.com/v1/execute"
+        data = {
+            "clientId": JDOODLE_API_CLIENT_ID,
+            "clientSecret": JDOODLE_API_CLIENT_SECRET,
+            "script": code,
+            "language": "cpp",
+            "versionIndex": "3",
+        }
+        response = requests.post(api_url, json=data)
+        result = response.json()
+        output = result.get("output", "")
+        error = result.get("error", "")
+        return render(request, self.template_name, {"output": output, "error": error})
+
+
 class ForbiddenView(View):
     """
     This view raises an exception to test our 403.html template

config/settings.py

@@ -298,6 +298,8 @@ AUTHENTICATION_BACKENDS = ("allauth.account.auth_backends.AuthenticationBackend"
 # GitHub settings
 
 GITHUB_TOKEN = env("GITHUB_TOKEN", default=None)
+JDOODLE_API_CLIENT_ID = env("JDOODLE_API_CLIENT_ID", "")
+JDOODLE_API_CLIENT_SECRET = env("JDOODLE_API_CLIENT_SECRET", "")
 
 # Django Allauth settings
 

config/urls.py

@@ -21,6 +21,7 @@ from ak.views import (
     InternalServerErrorView,
     NotFoundView,
     OKView,
+    HomepageBetaView,
 )
 from core.views import MarkdownTemplateView, StaticContentTemplateView
 from libraries.views import (
@@ -63,6 +64,7 @@ router.register(r"libraries", LibrarySearchView, basename="libraries")
 urlpatterns = (
     [
         path("", HomepageView.as_view(), name="home"),
+        path("homepage-beta/", HomepageBetaView.as_view(), name="home-beta"),
         path("admin/", admin.site.urls),
         path("accounts/", include("allauth.urls")),
         path(

templates/base.html

@@ -1,4 +1,4 @@
-{% load static %}
+ {% load static %}
 <!DOCTYPE html>
 <html>
 
@@ -45,7 +45,251 @@
             text-align: center;
             opacity: 1;
         }
+        .portion {
+          height: 50vh; /* Set the height to 50% of the viewport height */
+          width: 100%; /* Set the width to 100% of the parent container */
+          border: groove;
+          overflow: auto;
+          padding: 10px;
+        }
+        .section-one-right{
+          display: inline-block;
+          width: 49%;
+        }
+        .section-one-left{
+          padding: 20px 100px 0px 20px;
+          display: inline-block;
+          width: 49%;
+          vertical-align: top;
+        }
+        .top-heading{
+          font-weight: 900;
+        }
+        .top-sub-heading{
+          font-size: 20px;
+          line-height: 28px;
+          margin: 0px 0px 20px 0px;
+        }
+        .top-select {
+            padding: 10px 15px;
+            font-size: 16px;
+            border: 1px solid orange;
+            border-radius: 4px;
+            width: 200px;
+            background-color: #172A34;
+        }
+        option {
+            background-color: #172A34;
+            color: orange;
+        }
+        option:hover {
+            background-color: orange !important;
+            color: #fff;
+        }
+        .download-button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 200px;
+            padding: 10px 0px;
+            background-color: #172A34;
+            color: orange !important;
+            border: 1px solid orange;
+            border-radius: 6px;
+            margin: 10px 0px 10px 0px;
+            font-size: 16px;
+        }
+        .download-button i {
+            margin-right: 12px;
+        }
+        .bsl-button{
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 200px;
+            padding: 10px 0px;
+            background-color: #172A34;
+            color: orange !important;
+            border: 1px solid orange;
+            border-radius: 6px;
+            margin: 0px 0px;
+            font-size: 16px;
+        }
+        .link-text{
+          margin: 0px 0px 0px 20px;
+          text-decoration: underline;
+          font-size: 18px;
+        }
+        .inline-select{
+            padding: 5px 15px;
+            font-size: 16px;
+            border: 1px solid orange;
+            border-radius: 4px;
+            width: 180px;
+            background-color: #172A34;
+            display: inline-block;
+            margin: 0px;
+        }
+        .sub-heading{
+          font-size: 20px;
+          line-height: 28px;
+          padding: 0px 80px 20px 0px;
+        }
+        .line-breaker{
+          width: 10%;
+          text-align: center;
+          border-color: orange;
+          margin: 50px auto;
+        }
+        .copy-icon{
+          border-radius: 4px;
+          border: 1px solid orange;
+          padding: 10px;
+          display: inline-block;
+          background-color:  #172A34;
+          color: orange;
+        }
+        .copy-text{
+          display: inline-block;
+          border: 1px solid orange;
+          padding: 7px 30px;
+          border-radius: 4px;
+          margin: 5px 2px;
+        }
+        .circle {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background-color: #172A34;
+            border: 1px solid orange;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 5px;
+        }
+        .circle-text {
+            font-size: 18px;
+            color: orange
+        }
+        .section-two-left{
+          width: 48%;
+          display: inline-block;
+          vertical-align: top;
+          padding: 30px 0px 0px 0px;
+        }
+        .section-two-right{
+          width: 51%;
+          display: inline-block;
+          height: 63vh;
+        }
+        fieldset{
+          border: 1px solid orange;
+          border-top-color: orange;
+          padding: 10px 20px 10px 20px;
+          height: 100%;
+        }
+        legend{
+          padding: 0px 8px;
+          font-size: 18px;
+          color: orange;
+          border: none;
+        }
+        .compiler-block{
+          height: 100%;
+          margin: 0px !important;
+          width: 59%;
+          display: inline-block;
+        }
+        .compiler-output{
+          height: 43vh;
+          border: 1px solid #2D5266;
+          border-radius: 4px;
+          background-color: #172A34;
+          margin: 24px 0px 0px 0px;
+          width: 40%;
+          display: inline-block;
+          vertical-align: top;
+        }
+        .compiler-text-area{
+          height: 43vh;
+          width: 100% !important;
+          margin: 0px;
+        }
+        .run-btn{
+          padding: 5px 20px;
+          background-color: #172A34;
+          color: orange;
+          border: 1px solid orange;
+          border-radius: 6px;
+          margin: 5px 0px 10px 0px;
+        }
+        .no-scrollbar-scroll, .compiler-output, .compiler-text-area {
+          overflow-y: scroll;
+        }
+        .no-scrollbar-scroll::-webkit-scrollbar,
+        .compiler-output::-webkit-scrollbar,
+        .compiler-text-area::-webkit-scrollbar {
+            display: none;
+        }
+        .no-scrollbar-scroll, .compiler-output, .compiler-text-area{
+          -ms-overflow-style: none;  /* IE and Edge */
+          scrollbar-width: none;  /* Firefox */
+        }
 
+        .section-04{
+          height: 55vh;
+          overflow-y: scroll;
+          padding: 20px;
+          border: 1px solid lightgray;
+          border-radius: 8px;
+        }
+        .news-container{
+          border: 1px solid lightgray;
+          border-radius: 8px;
+          margin: 0px 0px 10px 0px;
+          padding: 20px 10px 10px 10px;
+          height: 100%;
+          width: 49.5% !important;
+          display: inline-block;
+          vertical-align: top;
+        }
+        .news-text{
+          overflow-wrap: break-word;
+          padding: 5px 20px 5px 10px;
+          font-size: 14px;
+          display: inline-block;
+          width: 49.5%;
+          vertical-align: middle;
+        }
+        .news-image{
+          display: inline-block;
+          width: 49.5%;
+          vertical-align: top;
+          width:  270px;
+          height: 265px;
+          object-fit: cover;
+        }
+        .section-05{
+          min-height: 55vh;
+          padding: 20px;
+          border: 1px solid lightgray;
+          border-radius: 8px;
+        }
+        .activity-containers{
+          width: 32.8%;
+          display: inline-block;
+          height: 50vh;
+          vertical-align: top;
+        }
+        .activity-select{
+          padding: 5px 10px;
+          font-size: 16px;
+          border: 1px solid orange;
+          border-radius: 4px;
+          width: 90%;
+          margin: 0px;
+          background-color: #172A34;
+        }
     </style>
   </head>
 
@@ -122,6 +366,27 @@
       anim2 = lottie.loadAnimation(scene1Params);
       anim3 = lottie.loadAnimation(scene3Params);
     </script>
+
+
+    <script>
+        function copyToClipboard() {
+            var text = document.getElementById("myText").innerText;
+
+            // Create a temporary textarea element
+            var tempTextArea = document.createElement("textarea");
+            tempTextArea.value = text;
+            document.body.appendChild(tempTextArea);
+
+            // Select and copy the text
+            tempTextArea.select();
+            document.execCommand("copy");
+
+            // Remove the temporary textarea
+            document.body.removeChild(tempTextArea);
+
+            alert("Text copied to clipboard");
+        }
+    </script>
   </body>
 
 </html>

templates/homepage_beta.html

@@ -0,0 +1,323 @@
+{% extends "base.html" %}
+
+{% load static %}
+
+{% block content %}
+  <!-- Homepage Hero Section -->
+<main>
+  <div style="padding: 30px 0px 0px 0px">
+    <div class="section-one-left">
+      <h1 class="top-heading">Boost your C++</h1>
+      <p class="top-sub-heading">Home to 165+ free, peer-reviewed, portable libraries to increase your productivity across all industry domains.</p>
+      <select class="top-select">
+        <option value="option1">Option 1</option>
+        <option value="option2">Option 2</option>
+        <option value="option3">Option 3</option>
+      </select>
+      <br>
+      <a class="download-button">
+        <i class="fas fa-arrow-circle-down"></i> Download
+      </a>
+      <a class="link-text">Release notes</a>
+      <br>
+      <a class="bsl-button"> BSL Logo </a>
+      <a class="link-text">License</a>
+    </div>
+    <div class="section-one-right">
+      <div id="scene03"></div>
+    </div>
+  </div>
+
+  <!---------- SECTION - 02 ------------>
+
+  <hr class="line-breaker">
+  <div>
+    <div>
+      <div class="section-two-left">
+      <select class="inline-select">
+        <option value="option1">Option 1</option>
+        <option value="option2">Option 2</option>
+        <option value="option3">Option 3</option>
+      </select>
+      <select class="inline-select">
+        <option value="option1">Option 1</option>
+        <option value="option2">Option 2</option>
+        <option value="option3">Option 3</option>
+      </select>
+      <h2 style="margin: 30px 0px">Accumulators</h2>
+      <p class="sub-heading">Framework for incremental calculation, and collection of statistical accumulators</p>
+    <div>
+      <p id="myText" class="copy-text"> install boost accumulators </p>
+      <i onclick="copyToClipboard()" class="fas fa-light fa-copy copy-icon"></i>
+      <br>
+      <p id="" class="copy-text"> install boost accumulators </p>
+      <i onclick="copyToClipboard()" class="fas fa-light fa-copy copy-icon"></i>
+      <br>
+      <p id="" class="copy-text"> install boost accumulators </p>
+      <i onclick="copyToClipboard()" class="fas fa-light fa-copy copy-icon"></i>
+      <br>
+    <div class="circle">
+        <span class="circle-text">C++</span>
+    </div>
+    </div>
+      </div>
+      <div class="section-two-right">
+        <fieldset><legend>Compiler Explorer</legend>
+          <form method="post" action="{% url 'home-beta' %}">
+            {% csrf_token %}
+            <div class="compiler-block">
+              <label for="code">Code:</label>
+              <br>
+              <textarea name="code" id="" class="compiler-text-area">{{ request.POST.code }}</textarea>
+              <br>
+              <button type="submit" class="run-btn">Run</button>
+            </div>
+            <div class="compiler-output">
+              {% if output %}
+                <div class="output">{{ output }}</div>
+              {% endif %}
+              {% if error %}
+                <div class="error">error</div>
+              {% endif %}
+            </div>
+          </form>
+        </fieldset>
+      </div>
+
+    </div>
+  </div>
+    <!---------- SECTION - 03 ------------>
+    <!---------- SECTION - 04 ------------>
+
+  <hr class="line-breaker">
+  <h2 style="margin: 20px 0px">News from Boost and C++</h2>
+  <div class="section-04">
+    <div class="news-container">
+      <p class="news-text">Boost.MySQL is an Asio-based network client which lets you access MySQL and MariaDB databases using your own data types New in Boost 1.82.0,
+        check it out here https://https://boost.org/libs/mysql
+        Get Boost:
+        https://boost.org/users/history/version_1_82_0.html
+        #boost #cpp #cplusplus #mysql #mariadb #database</p>
+      <img src="{% static 'img/fpo/news-1.png' %}" class="news-image"/>
+    </div>
+    <div class="news-container">
+      <p class="news-text">Boost 1.82.0 is released for the Spring season!
+        Release Notes: https://boost.org/users/history/version_1_82_0.html
+        Downloads: http://boost.org/users/news/version_1.82.0
+        Direct Download:
+        https://boostorg.jfrog.io/artifactory/main/release/1.82.0
+        #boost #cpp #cplusplus</p>
+      <img src="{% static 'img/fpo/news-2.png' %}" class="news-image"/>
+    </div>
+  </div>
+
+      <!---------- SECTION - 05 ------------>
+
+  <hr class="line-breaker">
+  <h2 style="margin: 20px 0px">Activity Apr21,2023 - May20,2023</h2>
+  <div class="section-05">
+    <div class="activity-containers">
+      <fieldset style="margin: 0px 3px"><legend>Code</legend>
+        <select class="activity-select">
+          <option value="option1">Option 1</option>
+          <option value="option2">Option 2</option>
+          <option value="option3">Option 3</option>
+        </select>
+      </fieldset>
+    </div>
+    <div class="activity-containers">
+      <fieldset style="margin: 0px 3px"><legend>Downloads</legend></fieldset>
+    </div>
+    <div class="activity-containers">
+      <fieldset style="margin: 0px 3px"><legend>Community</legend></fieldset>
+    </div>
+  </div>
+</main>
+
+
+
+
+<!--  <main class="px-4 my-16 mx-auto sm:mt-24">
+  <div class="grid gap-6 mt-12 sm:grid-cols-1 md:grid-cols-1 md:mt-16 lg:grid-cols-0">
+  <div class="border_red">
+  <div class="md:flex md:h-full">
+    <div class="order-1 mt-6 w-full text-center md:order-2 md:mt-3 md:w-1/2 md:h-full">
+      &lt;!&ndash;<div id="scene03"></div>&ndash;&gt;
+    </div>
+    <div class="text-left md:w-1/2 md:h-full">
+      <div class="h-full md:flex md:flex-col md:justify-between">
+        <div>
+          <h1 class="text-4xl font-extrabold md:text-6xl">
+            <span class="block xl:inline">Boost your C++ </span>
+          </h1>
+          <p class="mx-auto mt-3 max-w-md text-base text-lg md:mt-5 md:mb-11 md:max-w-3xl md:text-xl">Home to 165+ free, peer-reviewed, portable libraries to increase your productivity across all industry domains.</p>
+          <div class="mt-5">
+            <select onchange="this.form.submit()"
+                    name="version"
+                    class="block py-1 pr-8 pl-5 mb-3 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:text-orange dark:border-slate"
+                    id="id_version"
+            >
+              {% for v in versions %}
+                <option value="{{ v.slug }}" {% if version == v %}selected="selected"{% endif %}>Boost {{ v.display_name }}</option>
+              {% endfor %}
+            </select>
+          </div>
+        </div>
+        <div class="md:mb-8">
+          <div class="justify-center space-y-3 md:flex md:justify-between md:space-y-0">
+            <a href="{% url 'releases' %}" class="flex justify-center items-center py-3 px-8 text-base font-medium text-white rounded-md border md:py-4 md:px-4 md:text-lg border-orange bg-orange dark:bg-charcoal dark:text-orange">
+              <i class="pr-2 text-white fas fa-arrow-circle-down dark:text-orange"></i> Download
+            </a>
+            <a href="{% url 'releases' %}" class="flex justify-center items-center">Release notes</a>
+          </div>
+          <div class="justify-center mt-5 space-y-3 md:flex md:justify-between md:space-y-0">
+            <a href="{% url 'releases' %}" class="flex justify-center items-center py-3 px-8 text-base font-medium text-white rounded-md border md:py-4 md:px-4 md:text-lg border-orange bg-orange dark:bg-charcoal dark:text-orange">
+              BSL Logo
+            </a>
+            <a href="{% url 'releases' %}" class="flex justify-center items-center">License</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+    &lt;!&ndash; Select a library &ndash;&gt;
+  <div class="portion">
+    <div class="rounded-md md:flex">
+      <div class="text-left md:w-1/2">
+        <form action="/homepage-beta/" method="get">
+          <div>
+            <label for="id_library" hidden="true">Libraries</label>
+            <select onchange="this.form.submit()"
+                    name="library"
+                    class="block py-2 pr-11 pl-5 mb-2 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:text-orange dark:border-slate"
+                    id="id_library"
+            >
+              <option value="" {% if library is None %}selected="selected"{% endif %}>Select a library</option>
+              {% for l in libraries %}
+                <option value="{{ l.slug }}" {% if library == l %}selected="selected"{% endif %}>{{ l.name }}</option>
+              {% endfor %}
+            </select>
+            <label for="id_category" hidden="true">Categories:</label>
+            <select onchange="this.form.submit()"
+                    name="category"
+                    class="block py-2 pr-11 pl-5 mb-3 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:text-orange dark:border-slate"
+                    id="id_category"
+            >
+              <option value="">Filter by category</option>
+              {% for c in categories %}
+                <option value="{{ c.slug }}" {% if category == c %}selected="selected"{% endif %}>{{ c.name }}</option>
+              {% endfor %}
+            </select>
+          </div>
+        </form>
+      </div>
+    <div>
+      <div class="rounded-md md:flex">
+      <div class="text-left md:w-1/2">
+
+        <form method="post" action="{% url 'home-beta' %}">
+          {% csrf_token %}
+          <label for="code">Code:</label>
+          <textarea name="code" id="" rows="10" cols="50">{{ request.POST.code }}</textarea>
+          <button type="submit">Run</button>
+        </form>
+      </div>
+    </div>
+
+    {% if output %}
+      <div class="output">{{ output }}</div>
+    {% endif %}
+    {% if error %}
+      <div class="error">{{ error }}</div>
+    {% endif %}
+    </div>
+    </div>
+  </div>
+
+    &lt;!&ndash; Seven equal div portions &ndash;&gt;
+{#    <div class="grid gap-6 mt-12 sm:grid-cols-1 md:grid-cols-1 md:mt-16 lg:grid-cols-0">#}
+      &lt;!&ndash; Simple fixed-size portion &ndash;&gt;
+      <div class="portion">
+        <h2 class="text-xl font-semibold">Simple Fixed Size</h2>
+        <p class="mt-4">This portion has a fixed size and can be used to display important information or a call-to-action.</p>
+      </div>
+
+      &lt;!&ndash; Description, Copy Commands, Code Explore &ndash;&gt;
+      <div class="portion">
+        <h2 class="text-xl font-semibold">Description, Copy Commands, Code Explore</h2>
+        <p class="mt-4">Here, you can provide a brief description of a library, along with some copy commands for installation or usage. You can also embed an interactive code explorer to showcase the library's features and demonstrate how it can be used.</p>
+        <div class="mt-6">
+          &lt;!&ndash; Code explorer embed code here &ndash;&gt;
+        </div>
+      </div>
+
+      &lt;!&ndash; One-row Calendar &ndash;&gt;
+      <div class="portion">
+        <h2 class="text-xl font-semibold">One-row Calendar</h2>
+        <div class="mt-4">
+          &lt;!&ndash; One-row calendar implementation here &ndash;&gt;
+        </div>
+      </div>
+
+      &lt;!&ndash; Two News Portions &ndash;&gt;
+      <div class="portion">
+        <h2 class="text-xl font-semibold">News Portion 1</h2>
+        <p class="mt-4">Stay updated with the latest news, updates, and announcements related to the Boost library.</p>
+      </div>
+      <div class="portion">
+        <h2 class="text-xl font-semibold">News Portion 2</h2>
+        <p class="mt-4">More news and updates to keep you informed about the Boost library community and its developments.</p>
+      </div>
+
+      &lt;!&ndash; Code, Download, Community &ndash;&gt;
+      <div class="portion">
+        <h2 class="text-xl font-semibold">Code</h2>
+        <p class="mt-4">View the code repository of the Boost library on GitHub and explore the source code, contribute to its development, and download the latest versions.</p>
+      </div>
+      <div class="portion">
+        <div class="py-3 px-6 dark:text-white text-slate">
+          <h5
+            class="text-xl font-bold leading-tight text-orange">
+            New to Boost?
+          </h5>
+          <p class="py-1 text-white border-b border-gray-700">This is how you can help</p>
+          <ul class="flex flex-wrap mt-2 text-sm">
+            <li class="w-1/2"><a href="/doc/contributor-guide/intro.html">Becoming a Contributor</a></li>
+            <li class="w-1/2"><a href="/doc/contributor-guide/license-requirements.html">License Requirements</a></li>
+            <li class="w-1/2"><a href="/doc/contributor-guide/portability-requirements.html">Portability Requirements</a></li>
+            <li class="w-1/2"><a href="/doc/contributor-guide/organization-requirements.html">Organization Requirements</a></li>
+            <li class="w-1/2"><a href="/doc/contributor-guide/library-design-guidelines.html">Library Design Guidelines</a></li>
+            <li class="w-1/2"><a href="/doc/contributor-guide/antora.html">Antora Guide</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="portion">
+          <div class="py-3 px-6 dark:text-white text-slate">
+          <h5
+            class="text-xl font-bold leading-tight text-orange">
+            Contributor Guide
+          </h5>
+          <p class="py-1 text-white border-b border-gray-700">This is how you can help</p>
+          <ul class="flex flex-wrap mt-2 text-sm">
+            <li class="w-1/2"><a href="/doc/contributor-guide/intro.html">Becoming a Contributor</a></li>
+            <li class="w-1/2"><a href="/doc/contributor-guide/license-requirements.html">License Requirements</a></li>
+            <li class="w-1/2"><a href="/doc/contributor-guide/portability-requirements.html">Portability Requirements</a></li>
+            <li class="w-1/2"><a href="/doc/contributor-guide/organization-requirements.html">Organization Requirements</a></li>
+            <li class="w-1/2"><a href="/doc/contributor-guide/library-design-guidelines.html">Library Design Guidelines</a></li>
+            <li class="w-1/2"><a href="/doc/contributor-guide/antora.html">Antora Guide</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    </div>
+  </main>-->
+  <!-- End Homepage Hero Section -->
+
+{% endblock %}
+
+{% block footer_js %}
+
+{% endblock %}