Files
website-v2/templates/homepage.html
Lacey Williams Henschel d3d9572ad6 - Add featured field to Library model
- Add featured library to context of home page
- Add the featured library to the homepage template
- Return a random library if no library is marked as featured
- Add link to library detail page
- Add default author image
- Add hover text with author name
- Limit "random" featured library to libraries within the most recent Boost version
2023-08-21 11:04:15 -07:00

188 lines
11 KiB
HTML

{% extends "base.html" %}
{% load static %}
{% block content %}
<!-- Homepage Hero Section -->
<main class="px-4 my-16 mx-auto sm:mt-24">
<div class="md:flex">
<div class="order-1 mt-6 w-full text-center md:order-2 md:mt-3 md:w-1/2">
<div id="scene03"></div>
</div>
<div class="text-left md:w-1/2">
<h1 class="text-4xl font-extrabold md:text-6xl">
<span class="block xl:inline">Boost provides free peer-reviewed portable C++ source libraries.</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">Experience C++ libraries created by experts to be reliable, skillfully designed, and well-tested.</p>
<div class="justify-center mt-5 space-y-3 max-w-md md:flex md:justify-between md:mt-8 md:space-y-0">
<a href="{% url 'releases-most-recent' %}" 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 Latest
</a>
<a href="{% url 'releases-most-recent' %}" class="flex justify-center items-center py-3 px-8 text-base font-medium bg-gray-300 rounded-md border md:py-4 md:px-10 md:text-lg border-steel text-slate dark:bg-charcoal dark:text-orange">
Version Details <i class="pl-2 fas fa-chevron-right text-slate dark:text-orange"></i>
</a>
</div>
</div>
</div>
<div class="py-4 my-16 border-t md:flex md:border-t-0 border-slate">
<div class="md:order-last md:w-1/2">
<h2 class="mb-3 text-4xl">Boost Mission</h2>
The Boost mission is threefold:
<ul class="mb-11 ml-6 space-y-2 list-disc">
<li>develop high-quality, expert-reviewed, open-source C++ libraries</li>
<li>incubate C++ standard library enhancements</li>
<li>advance and disseminate C++ software development best practices</li>
</ul>
<div>
</div>
</div>
<div class="flex my-16 md:w-1/2">
<div class="items-center w-1/2 text-center">
<img class="mx-auto mb-2" src="{% static 'img/icons/icon-download-grn.svg' %}" alt="Downloads" />
<h4 class="mb-3 text-5xl">10M+</h4>
Total Downloads
</div>
<div class="items-center w-1/2 text-center">
<img class="mx-auto mb-2" src="{% static 'img/icons/icon-library-grn.svg' %}" alt="Libraries" />
<h4 class="mb-3 text-5xl">165+</h4>
Individual Libraries
</div>
</div>
</div>
<div class="my-4 space-y-4 md:flex md:my-16 md:space-y-0 md:space-x-4">
<div class="p-4 bg-white rounded md:p-11 md:w-1/2 dark:bg-charcoal">
{% if featured_library %}
<div class="mb-6">
<span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-green bg-green/10">library spotlight</span>
</div>
<h3 class="text-xl"><a href="{% url 'library-detail' slug=featured_library.slug %}">{{ featured_library.name }}</a></h3>
<p class="my-3">{% if featured_library.first_github_tag_date %}Released {{ featured_library.first_github_tag_date|date:"m/d/y"}}{% endif %}</p>
<p>{{ featured_library.description }}</p>
<div class="my-5">
{% if featured_library.authors %}
<span class="mr-5">Authors</span>
{% for author in featured_library.authors.all %}
{% if author.image %}
<img src="{{ author.image.url }}" alt="Photo of {{ author.get_full_name }}" title="{{ author.get_full_name }}" class="inline" />
{% else %}
<i class="mr-2 text-5xl fas fa-user" title="{{ author.get_full_name }}"></i>
{% endif %}
{% endfor %}
{% endif %}</div>
<div class="mt-5 max-w-md sm:flex md:mt-8">
<div class="rounded-md shadow">
<a href="{% url 'releases-most-recent' %}" class="flex justify-center items-center py-3 px-8 w-full text-base font-medium text-white rounded-md border md:py-4 md:px-10 md:text-base border-orange bg-orange">
<i class="pr-2 fas fa-arrow-circle-down"></i> Download
</a>
</div>
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
<a href="{% url 'library-detail' slug=featured_library.slug %}" class="flex justify-center items-center py-3 px-8 w-full text-base font-medium bg-gray-300 rounded-md border md:py-4 md:px-10 md:text-base border-steel text-slate dark:bg-charcoal dark:text-orange">
Library Details <i class="pl-2 fas fa-chevron-right text-slate dark:text-orange"></i>
</a>
</div>
</div>
{% endif %}
</div>
<div class="p-4 bg-white rounded md:p-11 md:w-1/2 dark:bg-charcoal">
<div class="mb-6">
<span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-green bg-green/10">featured video</span>
</div>
<img src="{% static 'img/fpo/video_fpo.png' %}" alt="user" class="mb-2" />
<div class="text-lg">Name of Video</div>
</div>
</div>
<div class="hidden py-5 px-4 my-4 bg-white rounded md:block md:px-11 md:my-16 dark:bg-charcoal">
<div class="flex justify-between items-center mb-6">
<span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-green bg-green/10">Recent reviews</span>
<span class="inline px-2 w-auto text-xs uppercase md:text-base text-orange"><a href="{% url 'review-upcoming' %}">See All ></a></span>
</div>
<div class="py-11 divide-gray-200 md:flex md:space-x-6 md:divide-x-2 dark:divide-slate">
<div class="pr-2 md:pl-6">
<h3 class="pb-3 text-2xl">Library Name Here</h3>
<p class="py-5 text-lg">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
<div class="mt-3"><span class="mr-5">Authors</span> <img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /></div>
</div>
<div class="pr-2 md:pl-6">
<h3 class="pb-3 text-2xl">Library Name Here</h3>
<p class="py-5 text-lg">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
<div class="mt-3"><span class="mr-5">Authors</span> <img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /></div>
</div>
<div class="pr-2 md:pl-6">
<h3 class="pb-3 text-2xl">Library Name Here</h3>
<p class="py-5 text-lg">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
<div class="mt-3"><span class="mr-5">Authors</span> <img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /></div>
</div>
</div>
</div>
<!-- RECENT NEWS & JOIN CONVERSATION -->
{% if entries %}
<div class="my-4 md:flex md:my-16 md:space-x-4">
<div class="py-5 px-4 bg-white rounded md:px-11 md:w-1/2 dark:bg-charcoal">
<div class="flex justify-between items-center mb-6">
<span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-green bg-green/10">recent news</span>
<span class="inline w-auto text-xs uppercase md:text-base text-orange"><a href="{% url 'news' %}">See All ></a></span>
</div>
<div class="space-y-8 divide-y divide-gray-200 dark:divide-slate">
{% for entry in entries %}
<div class="pt-6">
<h3 class="mb-2 text-xl">{{ entry.title }}</h3>
<p class="mb-3">{{ entry.publish_at|date:"m/d/Y" }}</p>
<p class="mb-3">{{ entry.content|truncatewords:20 }}... <a href="{% url 'news-detail' slug=entry.slug %}" class="text-orange">Read&nbsp;More</a></p>
</div>
{% endfor %}
</div>
</div>
<div class="py-5 px-4 my-4 bg-white rounded md:px-11 md:my-0 md:w-1/2 dark:bg-charcoal">
<div class="flex justify-between items-center mb-6">
<span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-green bg-green/10">Join the conversation</span>
<span class="inline w-auto text-xs uppercase md:text-base text-orange"></span>
</div>
<div class="space-y-8 divide-y divide-gray-200 dark:divide-slate">
<div class="pt-6">
<h3 class="text-xl">Topic of discussion headline from the Forum</h3>
<div class="mt-3"><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-3" /> Name of Author</div>
</div>
<div class="pt-6">
<h3 class="text-xl">Topic of discussion headline from the Forum</h3>
<div class="mt-3"><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-3" /> Name of Author</div>
</div>
<div class="pt-6">
<h3 class="text-xl">Topic of discussion headline from the Forum</h3>
<div class="mt-3"><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-3" /> Name of Author</div>
</div>
<div class="pt-6">
<h3 class="text-xl">Topic of discussion headline from the Forum</h3>
<div class="mt-3"><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-3" /> Name of Author</div>
</div>
</div>
</div>
</div>
{% endif %}
<!-- END RECENT NEWS & JOIN CONVERSATION -->
<!-- BOOST LIBRARIES LOGOS AND TESTIMONIALS -->
{# <div>#}
{# <h2 class="text-4xl text-center">Boost Libraries Headline</h2>#}
{# <div class="grid grid-cols-2 gap-4 justify-between justify-items-center items-center my-16 md:grid-cols-6">#}
{# <img src="{% static 'img/fpo/airbus.svg' %}" alt="airbus" />#}
{# <img src="{% static 'img/fpo/usairforce.svg' %}" alt="air force" />#}
{# <img src="{% static 'img/fpo/airbus.svg' %}" alt="airbus" />#}
{# <img src="{% static 'img/fpo/usairforce.svg' %}" alt="air force" />#}
{# <img src="{% static 'img/fpo/airbus.svg' %}" alt="airbus" />#}
{# <img src="{% static 'img/fpo/usairforce.svg' %}" alt="air force" />#}
{# </div>#}
{# </div>#}
<!-- END BOOST LIBRARIES LOGOS AND TESTIMONIALS -->
</main>
<!-- End Homepage Hero Section -->
{% endblock %}
{% block footer_js %}
{% endblock %}