diff --git a/core/views.py b/core/views.py index ada4b7af..ea168841 100644 --- a/core/views.py +++ b/core/views.py @@ -1133,6 +1133,9 @@ def get_context_data(self, **kwargs): {"value": "networking", "label": "Networking"}, ] ) + context["create_account_card_preview_url"] = ( + f"{settings.STATIC_URL}img/checker.png" + ) 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", @@ -1215,6 +1218,19 @@ def get_context_data(self, **kwargs): }, ] + context["learn_card_data"] = { + "title": "I want to learn:", + "text": "How to install Boost, use its libraries, build projects, and get help when you need it.", + "links": [ + {"label": "Explore common use cases", "url": "https://www.example.com"}, + {"label": "Build with CMake", "url": "https://www.example.com"}, + {"label": "Visit the FAQ", "url": "https://www.example.com"}, + ], + "url": "https://www.example.com", + "label": "Learn more about Boost", + "image_src": "/static/img/v3/examples/Learn Card Image.png", + } + context["testimonial_data"] = { "heading": "What Engineers are saying", "testimonials": [ diff --git a/static/css/v3/components.css b/static/css/v3/components.css index 5088d931..384a911e 100644 --- a/static/css/v3/components.css +++ b/static/css/v3/components.css @@ -18,7 +18,9 @@ @import './category-tags.css'; @import './code-block.css'; @import './search-card.css'; +@import './create-account-card.css'; @import './privacy-policy.css'; @import './library-intro-card.css'; +@import './learn-cards.css'; @import './terms-of-use.css'; @import './thread-archive-card.css'; diff --git a/static/css/v3/create-account-card.css b/static/css/v3/create-account-card.css new file mode 100644 index 00000000..3548fa3c --- /dev/null +++ b/static/css/v3/create-account-card.css @@ -0,0 +1,52 @@ +.create-account-card { + box-sizing: border-box; + max-width: 459px; + padding: var(--space-large, 16px) 0; +} + +.create-account-card__body { + display: flex; + flex-direction: column; + gap: var(--space-large, 16px); + padding: 0 var(--space-large, 16px); +} + +.create-account-card__richtext { + display: flex; + flex-direction: column; + gap: var(--space-default, 8px); + color: var(--color-text-secondary, #585a64); +} + +.create-account-card__richtext p { + margin: 0; + padding: 0; + font-size: var(--font-size-base, 16px); + font-weight: var(--font-weight-regular, 400); + line-height: var(--line-height-default, 1.2); + letter-spacing: -0.01em; +} + +.create-account-card__richtext ul { + margin: 0; + padding-left: 1.2em; + list-style: disc; + list-style-position: outside; +} + +.create-account-card__richtext li { + font-size: var(--font-size-base, 16px); + font-weight: var(--font-weight-regular, 400); + line-height: var(--line-height-default, 1.2); + letter-spacing: -0.01em; +} + +.create-account-card__richtext li + li { + margin-top: var(--space-default, 8px); +} + +.create-account-card__preview { + width: 100%; + display: block; + border-radius: var(--border-radius-l, 8px); +} diff --git a/static/css/v3/learn-cards.css b/static/css/v3/learn-cards.css new file mode 100644 index 00000000..83f87e5a --- /dev/null +++ b/static/css/v3/learn-cards.css @@ -0,0 +1,84 @@ +.learn-card { + max-width: 696px; +} + +.learn-card__row { + display: flex; + align-items: flex-start; + gap: var(--space-large, 16px); + align-self: stretch; + flex-direction: row; +} + +@media (max-width: 768px) { + .learn-card__row { + flex-direction: column; + } +} + +.learn-card__column { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + flex: 1 0 0; + align-self: stretch; +} + +.learn-card__title { + color: var(--color-text-primary, #050816); + + /* Display/Desktop/Medium/Large */ + font-family: var(--font-display, "Mona Sans Display SemiCondensed"); + font-size: var(--font-size-large, 24px); + font-weight: var(--font-weight-medium); + line-height: var(--tight); + /* 24px */ + letter-spacing: -0.24px; +} + +.learn-card__text { + color: var(--color-text-secondary, #585A64); + + /* Sans/Desktop/Regular/Base */ + font-family: var(--font-sans, "Mona Sans VF"); + font-size: var(--font-size-base, 16px); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-default); + /* 19.2px */ + letter-spacing: -0.16px; +} + +.learn-card__link-container { + display: flex; + min-width: 128px; + align-items: center; + gap: var(--space-s, 4px); +} + +.learn-card__link-icon { + fill: var(--color-icon-primary) +} + +.learn-card__link { + font-size: var(--font-sizes-small, 14px); + font-weight: var(--font-weight-medium); + line-height: 124%; + /* 17.36px */ + letter-spacing: -0.14px; + text-decoration-line: underline; + text-decoration-style: solid; + text-decoration-skip-ink: auto; + text-decoration-thickness: 7.5%; + /* 1.05px */ + text-underline-offset: 15.2%; + /* 2.128px */ + text-underline-position: from-font; +} + +.learn-card__image { + flex: 1 0 0; + aspect-ratio: 1/1; + border-radius: var(--border-radius-default, 8px); + background: url() lightgray 50% / cover no-repeat, url() lightgray 50% / cover no-repeat; +} diff --git a/static/css/v3/terms-of-use.css b/static/css/v3/terms-of-use.css index 56dbb2b0..90851488 100644 --- a/static/css/v3/terms-of-use.css +++ b/static/css/v3/terms-of-use.css @@ -65,6 +65,7 @@ .terms-page__body p { margin: 0 0 0.5em 0; + padding: 0; } .terms-page__body p:last-child { diff --git a/static/css/v3/v3-examples-section.css b/static/css/v3/v3-examples-section.css index 7c603392..f43c5df6 100644 --- a/static/css/v3/v3-examples-section.css +++ b/static/css/v3/v3-examples-section.css @@ -20,7 +20,7 @@ margin-bottom: 0; } -.v3-examples-section__block h3 { +.v3-examples-section__block .block-title { font-size: var(--font-size-base, 16px); font-weight: var(--font-weight-medium, 500); margin-bottom: var(--space-default, 8px); diff --git a/static/img/v3/examples/Learn Card Image.png b/static/img/v3/examples/Learn Card Image.png new file mode 100644 index 00000000..ea61e82f Binary files /dev/null and b/static/img/v3/examples/Learn Card Image.png differ diff --git a/templates/v3/examples/_v3_example_section.html b/templates/v3/examples/_v3_example_section.html index 560f3d35..1dba02ea 100644 --- a/templates/v3/examples/_v3_example_section.html +++ b/templates/v3/examples/_v3_example_section.html @@ -3,14 +3,14 @@

V3 Examples for testing

-

Buttons

+

Buttons

{% include "v3/examples/_v3_example_buttons_block.html" %}
-

Tooltip button

+

Tooltip button

{% include "v3/includes/_button_tooltip_v3.html" with label="Top" position="top" button_text="Help" %} @@ -28,7 +28,7 @@

Tooltip button

-

Avatar

+

Avatar

@@ -115,13 +115,13 @@

Avatar

-

Carousel buttons

+

Carousel buttons

{% include "v3/includes/_carousel_buttons.html" %}
- {% comment %}
+

Detail card carousel

{% include "v3/includes/_cards_carousel_v3.html" with carousel_id="post-cards-carousel-demo" heading="Libraries categories" cards=demo_cards_carousel_cards %} @@ -140,10 +140,10 @@

Detail card carousel with infinite looping and autoplay

{% include "v3/includes/_cards_carousel_v3.html" with carousel_id="post-cards-carousel-demo-infinite-autoplay" heading="Libraries categories" cards=demo_cards_carousel_cards infinite=True autoplay=True autoplay_delay=5000 %}
-
{% endcomment %} +
-

Post cards list

+

Post cards list

@@ -183,7 +183,7 @@

Detail card (single)

-

Search Card

+

Search Card

{% include "v3/includes/_search_card.html" with heading="What are you trying to find?" action_url="#" popular_terms=popular_terms %}
@@ -239,7 +239,14 @@

Commits per release (by library)

{% endif %}
-

Form inputs

+

Create Account Card

+
+ {% include "v3/includes/_create_account_card.html" with heading="Contribute to earn badges, track your progress and grow your impact" body_html=create_account_card_body_html preview_image_url=create_account_card_preview_url cta_url="#" cta_label="Start contributing" %} +
+
+ +
+

Form inputs

{% include "v3/includes/_field_text.html" with name="ex_basic" label="Text field" placeholder="Enter text..." %} @@ -265,6 +272,15 @@

Card with one button

{% endwith %}
+
+

Learn Card

+
+ {% with learn_card_data as data %} + {% include "v3/includes/_learn_card.html" with title=data.title text=data.text links=data.links image_src=data.image_src url=data.url label=data.label %} + {% endwith %} +
+
+

Testimonial Card

@@ -281,7 +297,7 @@

Thread Archive Card

{% endwith %}
-

Why Boost

+

Why Boost

{% comment %}Use 8 cards to test ACs: "Why Boost Cards render correctly with 1–8 cards" and "Cards wrap correctly after four items on desktop/tablet" (4+4 rows).{% endcomment %}
@@ -304,21 +320,21 @@

Why Boost?

-

Category tags

+

Category tags

{% include "v3/includes/_category_cards.html" with show_version_tags=True %}
-

Event cards

+

Event cards

{% include "v3/includes/_event_cards.html" %}
-

Content event list – clickable cards (link wraps each card)

+

Content event list – clickable cards (link wraps each card)

Releases

@@ -348,7 +364,7 @@

-

Content detail card

+

Content detail card

Content detail card

@@ -368,7 +384,7 @@

Content detail card

-

Code blocks

+

Code blocks

{% include "v3/includes/_code_blocks_story.html" with code_standalone_1=code_demo_beast code_standalone_2=code_demo_beast code_card_1=code_demo_hello code_card_2=code_demo_beast code_card_3=code_demo_install %}
diff --git a/templates/v3/includes/_button_hero_primary.html b/templates/v3/includes/_button_hero_primary.html index b6646dc6..b6cfabed 100644 --- a/templates/v3/includes/_button_hero_primary.html +++ b/templates/v3/includes/_button_hero_primary.html @@ -1,11 +1,11 @@ {% comment %} V3 foundation button: hero primary (larger, for hero section). Optional leading icon. - Variables: label (required), url (optional), icon_html (optional; HTML for icon, use with |safe), type (optional). + Variables: label (required), url (optional), icon_html (optional; HTML for icon, use with |safe), type (optional), extra_classes (optional). Icon must be wrapped in .... Usage: {% include "v3/includes/_button_hero_primary.html" with label="Get started" icon_html='' %} {% endcomment %} {% if url %} -{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }} +{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }} {% else %} - + {% endif %} diff --git a/templates/v3/includes/_button_hero_secondary.html b/templates/v3/includes/_button_hero_secondary.html index e0cc6b34..7d46013e 100644 --- a/templates/v3/includes/_button_hero_secondary.html +++ b/templates/v3/includes/_button_hero_secondary.html @@ -1,10 +1,10 @@ {% comment %} V3 foundation button: hero secondary. - Variables: label (required), url (optional), icon_html (optional), type (optional). + Variables: label (required), url (optional), icon_html (optional), type (optional), extra_classes (optional). Usage: {% include "v3/includes/_button_hero_secondary.html" with label="Learn more" %} {% endcomment %} {% if url %} -{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }} +{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }} {% else %} - + {% endif %} diff --git a/templates/v3/includes/_create_account_card.html b/templates/v3/includes/_create_account_card.html new file mode 100644 index 00000000..57b5d13c --- /dev/null +++ b/templates/v3/includes/_create_account_card.html @@ -0,0 +1,46 @@ +{% comment %} + Create Account Card component. + + Variables: + heading (string, optional) - Card title text + body_html (string, optional) - Rich text HTML content for the card body + preview_image_url (string, optional) - Preview image URL + preview_image_alt (string, optional) - Preview image alt text + cta_url (string, optional) - CTA target URL + cta_label (string, optional) - CTA text + + Usage: + {% include "v3/includes/_create_account_card.html" with heading="Contribute to earn badges, track your progress and grow your impact" body_html=create_account_card_body_html preview_image_url=create_account_card_preview_url cta_url="#" cta_label="Start contributing" %} +{% endcomment %} + diff --git a/templates/v3/includes/_learn_card.html b/templates/v3/includes/_learn_card.html new file mode 100644 index 00000000..cd1efb7d --- /dev/null +++ b/templates/v3/includes/_learn_card.html @@ -0,0 +1,41 @@ +{% comment %} +Card for displaying a boost library along with learn links, along with a large eye catching image +Inputs: + - title(required) - Title for the top of the card + - text (required) - A short description under the header, before the linebreaks + - links (required) - A list of links, earch with a label and url + - label (required) - Label for the hero button + - url (required) - Url for the hero button + - image_src (required) - Url at which the image can be found +{% endcomment %} + +
+
+
+
+
+ {{ title }} + {{ text }} +
+ {% for link in links %} + + + + + + {{ link.label }} + + + {% endfor %} +
+
+
+
+ {% include 'v3/includes/_button_hero_primary.html' with label=label url=url icon_html='' extra_classes='btn-flex' %} +
+
+
+ +
+
+
diff --git a/templates/v3/includes/_vertical_card.html b/templates/v3/includes/_vertical_card.html new file mode 100644 index 00000000..e69de29b