V3

core/views.py

@@ -1043,7 +1043,46 @@ class V3ComponentDemoView(TemplateView):
     template_name = "base.html"
 
     def get_context_data(self, **kwargs):
+        from libraries.models import LibraryVersion
+        from libraries.utils import build_library_intro_context
+
+        CODE_DEMO_BEAST = """int main()
+        {
+            net::io_context ioc;
+            tcp::resolver resolver(ioc);
+            beast::tcp_stream stream(ioc);
+
+            stream.connect(resolver.resolve("example.com", "80"));
+
+            http::request<http::empty_body> req{http::verb::get, "/", 11};
+            req.set(http::field::host, "example.com");
+
+            http::write(stream, req);
+
+            beast::flat_buffer buffer;
+            http::response<http::string_body> res;
+            http::read(stream, buffer, res);
+
+            std::cout << res << std::endl;
+        }"""
+
+        CODE_DEMO_HELLO = """#include <iostream>
+        int main()
+        {
+            std::cout << "Hello, Boost.";
+        }"""
+
+        CODE_DEMO_INSTALL = """brew install openssl
+
+        export OPENSSL_ROOT=$(brew --prefix openssl)
+
+        # Install bjam tool user config: https://www.bfgroup.xyz/b2/manual/release/index.html
+        cp ./libs/beast/tools/user-config.jam $HOME"""
+
         context = super().get_context_data(**kwargs)
+        context["code_demo_beast"] = CODE_DEMO_BEAST
+        context["code_demo_hello"] = CODE_DEMO_HELLO
+        context["code_demo_install"] = CODE_DEMO_INSTALL
         context["popular_terms"] = [
             {"label": "Networking"},
             {"label": "Math"},
@@ -1070,8 +1109,129 @@ def get_context_data(self, **kwargs):
                 {"value": "networking", "label": "Networking"},
             ]
         )
-        from libraries.models import LibraryVersion
-        from libraries.utils import build_library_intro_context
+        context["basic_card_data"] = {
+            "title": "Found a Bug?",
+            "text": "We rely on developers like you to keep Boost solid. Here's how to report issues that help the whole comm",
+            "primary_button_url": "www.example.com",
+            "primary_button_label": "Primary Button",
+            "secondary_button_url": "www.example.com",
+            "secondary_button_label": "Secondary Button",
+        }
+
+        context["demo_cards_carousel_cards"] = [
+            {
+                "title": "Get help",
+                "description": "Tap into quick answers, networking, and chat with 24,000+ members.",
+                "icon_name": "info-box",
+                "cta_label": "Start here",
+                "cta_href": reverse("community"),
+            },
+            {
+                "title": "Documentation",
+                "description": "Browse library docs, examples, and release notes in one place.",
+                "icon_name": "link",
+                "cta_label": "View docs",
+                "cta_href": reverse("docs"),
+            },
+            {
+                "title": "Community",
+                "description": "Mailing lists, GitHub, and community guidelines for contributors.",
+                "icon_name": "human",
+                "cta_label": "Join",
+                "cta_href": reverse("community"),
+            },
+            {
+                "title": "Releases",
+                "description": "Latest releases, download links, and release notes.",
+                "icon_name": "info-box",
+                "cta_label": "Download",
+                "cta_href": reverse("releases-most-recent"),
+            },
+            {
+                "title": "Libraries",
+                "description": "Explore the full catalog of Boost C++ libraries with docs and metadata.",
+                "icon_name": "link",
+                "cta_label": "Browse libraries",
+                "cta_href": reverse("libraries"),
+            },
+            {
+                "title": "News",
+                "description": "Blog posts, announcements, and community news from the Boost project.",
+                "icon_name": "device-tv",
+                "cta_label": "Read news",
+                "cta_href": reverse("news"),
+            },
+            {
+                "title": "Getting started",
+                "description": "Step-by-step guides to build and use Boost in your projects.",
+                "icon_name": "bullseye-arrow",
+                "cta_label": "Get started",
+                "cta_href": reverse("getting-started"),
+            },
+            {
+                "title": "Resources",
+                "description": "Learning resources, books, and other materials for Boost users.",
+                "icon_name": "get-help",
+                "cta_label": "View resources",
+                "cta_href": reverse("resources"),
+            },
+            {
+                "title": "Calendar",
+                "description": "Community events, meetings, and review schedule.",
+                "icon_name": "info-box",
+                "cta_label": "View calendar",
+                "cta_href": reverse("calendar"),
+            },
+            {
+                "title": "Donate",
+                "description": "Support the Boost Software Foundation and open-source C++.",
+                "icon_name": "human",
+                "cta_label": "Donate",
+                "cta_href": reverse("donate"),
+            },
+        ]
+
+        context["testimonial_data"] = {
+            "heading": "What Engineers are saying",
+            "testimonials": [
+                {
+                    "quote": "I use Boost daily. I absolutely love it. It's wonderful. I could not do my job w/o it. Much of it is in the new C++11 standard too.",
+                    "author": {
+                        "name": "Name Surname",
+                        "avatar_url": "/static/img/v3/demo_page/Avatar.png",
+                        "role": "Contributor",
+                        "role_badge": "/static/img/v3/demo_page/Badge.svg",
+                    },
+                },
+                {
+                    "quote": "I use Boost daily. I absolutely love it. It's wonderful. I could not do my job w/o it. Much of it is in the new C++11 standard too.",
+                    "author": {
+                        "name": "Name Surname",
+                        "avatar_url": "/static/img/v3/demo_page/Avatar.png",
+                        "role": "Contributor",
+                        "role_badge": "/static/img/v3/demo_page/Badge.svg",
+                    },
+                },
+                {
+                    "quote": "I use Boost daily. I absolutely love it. It's wonderful. I could not do my job w/o it. Much of it is in the new C++11 standard too.",
+                    "author": {
+                        "name": "Name Surname",
+                        "avatar_url": "/static/img/v3/demo_page/Avatar.png",
+                        "role": "Contributor",
+                        "role_badge": "/static/img/v3/demo_page/Badge.svg",
+                    },
+                },
+                {
+                    "quote": "I use Boost daily. I absolutely love it. It's wonderful. I could not do my job w/o it. Much of it is in the new C++11 standard too.",
+                    "author": {
+                        "name": "Name Surname",
+                        "avatar_url": "/static/img/v3/demo_page/Avatar.png",
+                        "role": "Contributor",
+                        "role_badge": "/static/img/v3/demo_page/Badge.svg",
+                    },
+                },
+            ],
+        }
 
         latest = Version.objects.most_recent()
         if latest:

static/css/v3/buttons.css

@@ -45,6 +45,12 @@
   min-width: 128px;
 }
 
+.btn-row>.btn-flex {
+  flex: 1 0 0;
+  display: flex;
+  min-width: 128px;
+}
+
 .btn-primary {
   background-color: var(--color-button-secondary, #fff);
   border-color: var(--color-stroke-strong, #05081640);

static/css/v3/card.css

@@ -0,0 +1,63 @@
+/*
+    Styles for the basic card, as well as some basic structural members for any children based off the basic card
+
+    card - basic shared styling and layout for cards
+    card__column - flex column for material in the card
+    card__center - Centers its children inside the flex parent
+    card__title - Styles the material bolded for title presentation
+    card__hr - a Horizontal rule for separating the card and being dark mode responsive
+
+*/
+
+.card {
+    /*Layout*/
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-large, 16px);
+    /*Style*/
+    width: 100%;
+    border-radius: var(--border-radius-xl);
+    border: 1px solid var(--color-stroke-weak, rgba(5, 8, 22, 0.10));
+    background: var(--color-surface-weak, #FFF);
+}
+
+.basic-card {
+    max-width: 458px;
+}
+
+.card .btn-row {
+  width: 100%;
+}
+
+.card__column {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-large, 16px);
+}
+
+.card__header {
+    align-self: stretch;
+    display: flex;
+    padding: 0 var(--space-large, 1rem);
+}
+
+.card__title {
+    flex: 1 0 0;
+    color: var(--color-text-primary, #050816);
+    font-family: var(--font-display, "Mona Sans Display SemiCondensed");
+    font-size: var(--font-size-large, 24px);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-display-regular);
+}
+
+.card__hr {
+    width: 100%;
+    height: 1px;
+    background: var(--color-stroke-weak, rgba(5, 8, 22, 0.10));
+    border: none;
+    margin: 0;
+}

static/css/v3/carousel-buttons.css

@@ -12,7 +12,7 @@
   width: 44px;
   height: 24px;
   border-radius: 8px;
-  background: var(--color-button-primary, #EFEFF1);
+  background: var(--color-surface-strong, #EFEFF1);
 }
 
 .carousel-buttons .btn-carousel {