mirror of
https://github.com/boostorg/website-v2.git
synced 2026-02-27 17:42:08 +00:00
394 lines
22 KiB
HTML
394 lines
22 KiB
HTML
<!DOCTYPE html>{% load static %}
|
|
<html>
|
|
|
|
<head>
|
|
<title>{% block title %}{% endblock %}</title>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
|
|
<!-- Google fonts for Cairo Medium and SemiBold -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@500;600&display=swap" rel="stylesheet">
|
|
{% block extra_head %}{% endblock %}
|
|
|
|
<style>
|
|
#lottie{
|
|
width:100%;
|
|
height:100%;
|
|
display:block;
|
|
overflow: hidden;
|
|
transform: translate3d(0,0,0);
|
|
text-align: center;
|
|
opacity: 1;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body class="h-screen bg-black font-cairo">
|
|
<div class="container mx-auto">
|
|
<div class="relative bg-gray-50">
|
|
<div class="relative pb-16 sm:pb-24">
|
|
<div>
|
|
<div class="mx-auto px-3 sm:px-6 bg-charcoal">
|
|
<nav class="relative flex items-center justify-between sm:h-10 pt-6 pb-6" aria-label="Global">
|
|
<div class="hidden md:flex md:space-x-10 pt-3 pb-3 pl-3">
|
|
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">About</a>
|
|
|
|
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Support</a>
|
|
|
|
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Resources</a>
|
|
|
|
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Signup</a>
|
|
|
|
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Login</a>
|
|
|
|
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">
|
|
<img class="mt-1" src="{% static 'img/icons/icon-search.svg' %}" alt="Search" />
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<span id="icon-container" class="inline-block w-6 h-6 mt-2"></span><span class="inline-block ml-2 text-sm uppercase text-orange"> 1.79.0 Releases on 9-8-22<small> > </small></span>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="py-5 border-b-2 border-charcoal">
|
|
<!-- TODO: Fix border -->
|
|
<nav class="relative flex items-center justify-between sm:h-10 md:justify-center">
|
|
<div class="hidden sm:block sm:absolute sm:inset-y-0 sm:h-full sm:w-full md:space-x-10" aria-hidden="true">
|
|
<div class="relative h-full mx-auto pl-8 inline">
|
|
<img class="inline w-auto h-[50px]" src="{% static 'img/Boost_Brandmark_WhiteBoost_Transparent.svg' %}" alt="Boost">
|
|
</div>
|
|
<div class="inline md:space-x-10 float-right pr-8 text-lg">
|
|
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Versions</a>
|
|
|
|
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Libraries</a>
|
|
|
|
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Review Process</a>
|
|
|
|
<a href="/forum/" class="font-medium text-gray-500 hover:text-gray-900">Forums</a>
|
|
|
|
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">News</a>
|
|
|
|
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Donate</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!--
|
|
Mobile menu, show/hide based on menu open state.
|
|
|
|
Entering: "duration-150 ease-out"
|
|
From: "opacity-0 scale-95"
|
|
To: "opacity-100 scale-100"
|
|
Leaving: "duration-100 ease-in"
|
|
From: "opacity-100 scale-100"
|
|
To: "opacity-0 scale-95"
|
|
-->
|
|
<div class="absolute z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden bg-charcoal" x-data="{ isOpen: false }">
|
|
<div>
|
|
<div class="px-5 pt-4 flex items-center justify-between">
|
|
<div class="border-b-2 border-slate">
|
|
<span class="text-center uppercase text-orange block">1.79.0 Releases on 9-8-22 ></span>
|
|
</div>
|
|
<div class="-mr-2">
|
|
<button @click="isOpen = !isOpen" type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset">
|
|
<span class="sr-only">Close menu</span>
|
|
<!-- Heroicon name: outline/x -->
|
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div x-show="isOpen" class="h-screen z-50">
|
|
<div class="px-2 pt-2 pb-3 text-2xl">
|
|
<a href="#" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Versions</a>
|
|
|
|
<a href="#" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Libraries</a>
|
|
|
|
<a href="#" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Review Process</a>
|
|
|
|
<a href="/forum/" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Forums</a>
|
|
|
|
<a href="#" class="block px-3 py-2 text-gray-500 hover:text-gray-900">News</a>
|
|
|
|
<a href="#" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Donate</a>
|
|
</div>
|
|
<div class="px-2 pt-2 pb-3 absolute bottom-0 left-0 text-sm">
|
|
<a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">About</a>
|
|
|
|
<a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Support</a>
|
|
|
|
<a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Resources</a>
|
|
|
|
<a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Signup</a>
|
|
|
|
<a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Login </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TODO: Move this home page content into a partial when routing is setup -->
|
|
<!-- Homepage Hero Section -->
|
|
<main class="my-16 mx-auto md:max-w-7xl px-4 sm:mt-24">
|
|
<div class="md:flex">
|
|
<div class="text-left md:w-1/2">
|
|
<h1 class="font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
|
|
<span class="block xl:inline">Boost provides free peer-reviewed portable C++ source libraries.</span>
|
|
</h1>
|
|
<p class="mt-3 md:mb-11 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">Experience C++ libraries created by expoerts to be reliable, skillfully designed, and well-tested.</p>
|
|
<div class="mt-5 max-w-md sm:flex sm:justify-center md:mt-8">
|
|
<div class="rounded-md shadow">
|
|
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-4"><img class="mt-1 pr-2" src="{% static 'img/icons/icon-download-orng.svg' %}" alt="Downloads" /> Download Latest </a>
|
|
</div>
|
|
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
|
|
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Version Details > </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full md:w-1/2 text-center">
|
|
<div id="scene03"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:flex my-4 md:my-16">
|
|
<div class="md:order-last md:w-1/2">
|
|
<h2 class="text-4xl mb-3">Boost Mission</h2>
|
|
The Boost mission is threefold:
|
|
<ul class="mb-11 list-disc ml-6 space-y-2">
|
|
<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>
|
|
<a href="#" class="justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10"> About Us > </a>
|
|
</div>
|
|
</div>
|
|
<div class="flex md:w-1/2 my-16">
|
|
<div class="w-1/2 items-center text-center">
|
|
<img class="mx-auto mb-2" src="{% static 'img/icons/icon-download-grn.svg' %}" alt="Downloads" />
|
|
<h4 class="text-5xl mb-3">10M+</h4>
|
|
Total Downloads
|
|
</div>
|
|
<div class="w-1/2 items-center text-center">
|
|
<img class="mx-auto mb-2" src="{% static 'img/icons/icon-library-grn.svg' %}" alt="Libraries" />
|
|
<h4 class="text-5xl mb-3">165+</h4>
|
|
Individual Libraries
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:flex my-4 md:my-16 md:space-x-4 space-y-4 md:space-y-0">
|
|
<div class="md:w-1/2 rounded bg-charcoal p-11">
|
|
<div class="mb-6">
|
|
<span class="inline uppercase text-green bg-green/10 rounded text-lg w-auto px-3 py-1">library spotlight</span>
|
|
</div>
|
|
<h3 class="text-xl">Boost.JSON</h3>
|
|
<p class="my-3">Released 4/5/22</p>
|
|
<p>Boost.JSON is a portable C++ library which provides containers and algorithms that implment
|
|
JavaScript Object Notation, or simply "JSON", a lightweight data-interchange format.</p>
|
|
<div class="my-5"><span class="mr-5">Authors</span> <img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /></div>
|
|
<div class="mt-5 max-w-md sm:flex md:mt-8">
|
|
<div class="rounded-md shadow">
|
|
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"> Download </a>
|
|
</div>
|
|
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
|
|
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Version Details > </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="md:w-1/2 rounded bg-charcoal p-11">
|
|
<div class="mb-6">
|
|
<span class="inline uppercase text-green bg-green/10 rounded text-lg w-auto px-3 py-1">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 my-4 md:my-16 rounded bg-charcoal px-11 py-5">
|
|
<div class="flex justify-between mb-6">
|
|
<span class="inline uppercase text-green bg-green/10 rounded text-lg w-auto px-3 py-1">Recent reviews</span>
|
|
<span class="inline uppercase text-orange w-auto px-2">See All ></span>
|
|
</div>
|
|
<div class="md:flex md:space-x-6 py-11 md:divide-x-2 divide-slate">
|
|
<div class="md:pl-6 pr-2">
|
|
<h3 class="text-2xl pb-3">Library Name Here</h3>
|
|
<p class="text-lg py-5">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="md:pl-6 pr-2">
|
|
<h3 class="text-2xl pb-3">Library Name Here</h3>
|
|
<p class="text-lg py-5">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="md:pl-6 pr-2">
|
|
<h3 class="text-2xl pb-3">Library Name Here</h3>
|
|
<p class="text-lg py-5">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 -->
|
|
<div class="md:flex my-4 md:my-16 md:space-x-4">
|
|
<div class="md:w-1/2 rounded bg-charcoal px-11 py-5">
|
|
<div class="flex justify-between mb-6">
|
|
<span class="inline uppercase text-green bg-green/10 rounded text-lg w-auto px-3 py-1">recent news</span>
|
|
<span class="inline uppercase text-orange w-auto">See All ></span>
|
|
</div>
|
|
<div class="divide-y divide-slate space-y-8">
|
|
<div class="pt-6">
|
|
<h3 class="text-xl mb-2">Name of Article</h3>
|
|
<p class="mb-3">Category | 4/5/22</p>
|
|
<p class="mb-3">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum... <a href="" class="text-orange">Read More</a></p>
|
|
</div>
|
|
<div class="pt-6">
|
|
<h3 class="text-xl mb-2">Name of Article</h3>
|
|
<p class="mb-3">Category | 4/5/22</p>
|
|
<p class="mb-3">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum... <a href="" class="text-orange">Read More</a></p>
|
|
</div>
|
|
<div class="pt-6">
|
|
<h3 class="text-xl mb-2">Name of Article</h3>
|
|
<p class="mb-3">Category | 4/5/22</p>
|
|
<p class="mb-3">Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum... <a href="" class="text-orange">Read More</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="md:w-1/2 my-4 md:my-0 rounded bg-charcoal px-11 py-5">
|
|
<div class="flex justify-between mb-6">
|
|
<span class="inline uppercase text-green bg-green/10 rounded text-lg w-auto px-3 py-1">Join the conversation</span>
|
|
<span class="inline uppercase text-orange w-auto">Visit Forum ></span>
|
|
</div>
|
|
<div class="divide-y divide-slate space-y-8">
|
|
<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>
|
|
<!-- END RECENT NEWS & JOIN CONVERSATION -->
|
|
|
|
<!-- BOOST LIBRARIES LOGOS AND TESTIMONIALS -->
|
|
<div>
|
|
<h2 class="text-center text-4xl">Boost Libraries Headline</h2>
|
|
<div class="justify-between md:flex my-16">
|
|
<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 -->
|
|
|
|
{% block content_wrapper %}
|
|
{% block content %}{% endblock %}
|
|
{% endblock %}
|
|
|
|
<footer class="my-16 mx-auto max-w-7xl px-4 sm:mt-24 py-16">
|
|
<div class="md:flex">
|
|
<div class="text-left md:w-1/2 content-center gap-4 grid">
|
|
<div>
|
|
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl block xl:inline pt-6">
|
|
Join the growing community
|
|
</h1>
|
|
</div>
|
|
<div class="my-16 grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div><img class="float-left mr-3 mt-1 h-8 w-auto" src="{% static 'img/icons/icon_Cup-C++.svg' %}" alt=""> Best collections of C++ libraries</div>
|
|
<div><img class="float-left mr-3 mt-1 h-8 w-auto" src="{% static 'img/icons/icon_graduation-cap.svg' %}" alt=""> Supports research and education for C++</div>
|
|
<div><img class="float-left mr-3 mt-1 h-8 w-auto" src="{% static 'img/icons/icon_down-arrow-stack.svg' %}" alt=""> Accessible with minimal restriction</div>
|
|
<div><img class="float-left mr-3 mt-1 h-8 w-auto" src="{% static 'img/icons/icon_three-people.svg' %}" alt=""> Collaborative community</div>
|
|
</div>
|
|
<div class="hidden mt-5 max-w-md sm:flex md:mt-8">
|
|
<div class="rounded-md shadow">
|
|
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-3 md:text-lg md:px-8">Sign Up > </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center md:w-1/2">
|
|
<div id="hero-illustration"></div>
|
|
<div id="scene01"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-5 pt-4 md:flex items-center mt-16">
|
|
<div class="mr-11">
|
|
<img class="h-[53px] w-auto" src="{% static 'img/Boost_Symbol_Transparent.svg' %}" alt="">
|
|
</div>
|
|
<div class="justify-between md:space-x-10 pt-3 pb-3">
|
|
<a class="my-2 block md:inline" href="">© 2022 Boost.org</a>
|
|
<a class="my-2 block md:inline" href="">Contact</a>
|
|
<a class="my-2 block md:inline" href="">Privacy Policy</a>
|
|
<a class="my-2 block md:inline" href="">Terms of Use</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
{% block footer_js %}{% endblock %}
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>
|
|
|
|
<script>
|
|
var params = {
|
|
// animationData: { /* ... */ },
|
|
container: document.getElementById('icon-container'), // required
|
|
path: '{% static "animations/4dots.json" %}', // required
|
|
renderer: 'svg', // required
|
|
loop: true, // optional
|
|
autoplay: true, // optional
|
|
name: "4 Dots", // optional
|
|
};
|
|
|
|
var scene1Params = {
|
|
// animationData: { /* ... */ },
|
|
container: document.getElementById('scene01'), // required
|
|
path: '{% static "animations/Scene01/data.json" %}', // required
|
|
renderer: 'svg', // required
|
|
loop: true, // optional
|
|
autoplay: true, // optional
|
|
name: "4 Dots", // optional
|
|
};
|
|
|
|
var scene3Params = {
|
|
// animationData: { /* ... */ },
|
|
container: document.getElementById('scene03'), // required
|
|
path: '{% static "animations/Scene03/data.json" %}', // required
|
|
renderer: 'svg', // required
|
|
loop: true, // optional
|
|
autoplay: true, // optional
|
|
name: "4 Dots", // optional
|
|
};
|
|
|
|
anim = lottie.loadAnimation(params);
|
|
anim2 = lottie.loadAnimation(scene1Params);
|
|
anim3 = lottie.loadAnimation(scene3Params);
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|