Skip to content

Commit fd310f6

Browse files
immortalcodesimmortalcodes
authored
Merge pull request #2842 from canonical/WD-37829-dev-add-chip-component-to-pro-related-pages-on-c-com
WD-37829: Add Ubuntu Pro chip to hero sections of Pro-connected pages
2 parents 0415633 + 1597372 commit fd310f6

7 files changed

Lines changed: 228 additions & 165 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
"sass": "1.89.2",
5555
"use-query-params": "^2.2.1",
5656
"uuid": "^11.1.0",
57-
"vanilla-framework": "4.50.0",
57+
"vanilla-framework": "4.56.0",
5858
"venobox": "2.1.8",
5959
"yup": "^1.6.1"
6060
},

‎templates/data/spark/index.html‎

Lines changed: 44 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
{% from "_macros/vf_pricing-block.jinja" import vf_pricing_block %}
44
{% from 'macros/_macros-lite-video.jinja' import lite_video %}
5+
{% from "_macros/vf_hero.jinja" import vf_hero %}
56

67
{% block meta_copydoc %}
78
https://docs.google.com/document/d/1sM8pgyM-N8VK8fyHgMsW21PdXUiqYrdRkPkipIljNd0/edit
@@ -21,38 +22,49 @@
2122

2223
{% block content %}
2324

24-
<section class="p-strip is-shallow u-no-padding--bottom">
25-
<div class="p-section">
26-
<div class="grid-row--50-50">
27-
<div class="grid-col">
28-
<div class="p-section--shallow">
29-
<h1 class="u-no-margin--bottom">
30-
Apache Spark<sup>&reg;</sup> operations, simplified
31-
</h1>
32-
</div>
33-
<div class="p-section--shallow">
34-
<p>
35-
Secure and automate the deployment, maintenance and upgrades of Spark on Kubernetes. Run your big data clusters across private and public clouds.
36-
</p>
37-
</div>
38-
<a class="p-button--positive js-invoke-modal"
39-
aria-controls="data-spark-modal"
40-
href="/contact-us">Contact us</a>
41-
</div>
42-
<div class="grid-col">
43-
<div class="u-vertically-center u-aspect-ratio--16-9 p-image-wrapper u-container--background u-align--center p-strip">
44-
{{ image(url="https://assets.ubuntu.com/v1/8baab06a-apache-spark-logo.png",
45-
alt="Apache Spark",
46-
width="143",
47-
height="186",
48-
hi_def=True,
49-
loading="auto") | safe
50-
}}
51-
</div>
52-
</div>
53-
</div>
54-
</div>
55-
</section>
25+
{% call(slot) vf_hero(
26+
title_text='Apache Spark<sup>&reg;</sup> operations, simplified',
27+
chip_text='Supported with Ubuntu Pro',
28+
layout='50/50',
29+
blocks=[
30+
{
31+
"type": "description",
32+
"padding": "shallow",
33+
"item": {
34+
"type": "text",
35+
"content": "Secure and automate the deployment, maintenance and upgrades of Spark on Kubernetes. Run your big data clusters across private and public clouds."
36+
}
37+
},
38+
{
39+
"type": "cta-block",
40+
"padding": "shallow",
41+
"item": {
42+
"primary": {
43+
"content_html": "Contact us",
44+
"attrs": {
45+
"href": "/contact-us",
46+
"class": "js-invoke-modal",
47+
"aria-controls": "data-spark-modal"
48+
}
49+
}
50+
}
51+
},
52+
{
53+
"type": "image",
54+
"item": {
55+
"aspect_ratio": "16-9",
56+
"is_highlighted": true,
57+
"attrs": {
58+
"src": "https://assets.ubuntu.com/v1/8baab06a-apache-spark-logo.png",
59+
"alt": "Apache Spark",
60+
"width": "143",
61+
"height": "186"
62+
}
63+
}
64+
}
65+
]
66+
) -%}
67+
{% endcall -%}
5668

5769
<section class="p-section">
5870
<div class="grid-row--50-50">

‎templates/juju/index.html‎

Lines changed: 44 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -941,42 +941,50 @@ <h3 class="p-heading-icon__title p-heading--4">Landscape</h3>
941941
</div>
942942
</section>
943943

944-
{% call(slot) vf_rich_vertical_list(
945-
title_text='Add visibility and compliance controls with JAAS.',
946-
list_item_tick_style="tick"
947-
) -%}
948-
{%- if slot == 'description' -%}
949-
<p>
950-
JAAS (Juju as a service) is your centralised enterprise control plane for Juju deployments.
951-
</p>
952-
{%- endif -%}
953-
{%- if slot == 'list_item_1' -%}
954-
Manage hundreds of Juju controllers
955-
{%- endif -%}
956-
{%- if slot == 'list_item_2' -%}
957-
Add fine grained access controls.
958-
{%- endif -%}
959-
{%- if slot == 'list_item_3' -%}
960-
Enable enhanced audit functionalities.
961-
{%- endif -%}
962-
{%- if slot == 'list_item_4' -%}
963-
Protect deployments by having a smaller attack area.
964-
{%- endif -%}
965-
{%- if slot == 'cta' -%}
966-
<a href="/jaas" class="p-button--positive">Discover JAAS</a>
967-
{%- endif -%}
968-
{%- if slot == 'image' -%}
969-
<div class="u-embedded-media">
970-
{{ image(url="https://assets.ubuntu.com/v1/ed078d85-juju-dashboard.gif",
971-
alt="",
972-
height="779",
973-
width="1200",
974-
hi_def=True,
975-
loading="lazy",) | safe
976-
}}
977-
</div>
978-
{%- endif -%}
979-
{% endcall -%}
944+
{{ vf_rich_vertical_list(
945+
title={"text": "Add visibility and compliance controls with JAAS."},
946+
items=[
947+
{
948+
"type": "description",
949+
"item": {
950+
"type": "html",
951+
"content": "<p>JAAS (Juju as a service) is your centralised enterprise control plane for Juju deployments.</p>"
952+
}
953+
},
954+
{
955+
"type": "list",
956+
"item": {
957+
"list_items": [
958+
{"list_item_type": "tick", "content": "Manage hundreds of Juju controllers"},
959+
{"list_item_type": "tick", "content": "Add fine grained access controls."},
960+
{"list_item_type": "tick", "content": "Enable enhanced audit functionalities."},
961+
{"list_item_type": "tick", "content": "Protect deployments by having a smaller attack area."}
962+
]
963+
}
964+
},
965+
{
966+
"type": "cta-block",
967+
"item": {
968+
"primary": {
969+
"content_html": "Discover JAAS",
970+
"attrs": {"href": "/jaas"}
971+
}
972+
}
973+
}
974+
],
975+
media={
976+
"type": "image",
977+
"ratio": {"large": "3-2", "medium_small": "3-2"},
978+
"fit": "contain",
979+
"attrs": {
980+
"src": "https://assets.ubuntu.com/v1/ed078d85-juju-dashboard.gif",
981+
"alt": "",
982+
"width": "1200",
983+
"height": "779",
984+
"loading": "lazy"
985+
}
986+
}
987+
) }}
980988

981989
<section class="p-section">
982990
<hr class="is-fixed-width" />

‎templates/mlops/feast.html‎

Lines changed: 52 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
{% extends 'base_index.html' %}
22

3+
{% from "_macros/vf_hero.jinja" import vf_hero %}
4+
35
{% block title %}Feast feature store | MLOps{% endblock %}
46

57
{% block meta_description %}
@@ -16,47 +18,56 @@
1618

1719
{% block content %}
1820

19-
<section class="p-strip is-shallow">
20-
<div class="row--25-75">
21-
<div class="col u-no-padding--bottom p-section">
22-
<div>
23-
{{ image (
24-
url="https://assets.ubuntu.com/v1/5dc85b16-feast-logo.png",
25-
alt="",
26-
width="852",
27-
height="175",
28-
hi_def=True,
29-
loading="auto"
30-
) | safe
31-
}}
32-
</div>
33-
</div>
34-
<div class="col">
35-
<div class="row">
36-
<div class="col p-section--shallow">
37-
<h1 class="u-no-margin--bottom">
38-
Best in class feature store,
39-
<br class="u-hide--small u-hide--medium" />
40-
integrated into your MLOps stack
41-
</h1>
42-
<h2>Open source. Fully supported. Built for scale.</h2>
43-
</div>
44-
<div class="p-section--shallow">
45-
<p>
46-
Charmed Feast is Canonical's securely designed, production-ready feature store for machine learning. Deploy it in minutes alongside Charmed Kubeflow, and manage features across environments with confidence.
47-
</p>
48-
</div>
49-
</div>
50-
51-
<hr class="p-rule--muted" />
52-
<a class="p-button--positive"
53-
href="https://documentation.ubuntu.com/charmed-feast/">Install Charmed Feast</a>
54-
<a class="p-button js-invoke-modal"
55-
href="/mlops/contact-us"
56-
aria-controls="mlops-modal">Contact us</a>
57-
</div>
58-
</div>
59-
</section>
21+
{% call(slot) vf_hero(
22+
title_text='Best in class feature store, <br class="u-hide--small u-hide--medium" /> integrated into your MLOps stack',
23+
subtitle_text='Open source. Fully supported. Built for scale.',
24+
chip_text='Supported with Ubuntu Pro',
25+
layout='25/75',
26+
blocks=[
27+
{
28+
"type": "description",
29+
"padding": "shallow",
30+
"item": {
31+
"type": "html",
32+
"content": '<p>Charmed Feast is Canonical\'s securely designed, production-ready feature store for machine learning. Deploy it in minutes alongside Charmed Kubeflow, and manage features across environments with confidence.</p><hr class="p-rule--muted" />'
33+
}
34+
},
35+
{
36+
"type": "cta-block",
37+
"padding": "shallow",
38+
"item": {
39+
"primary": {
40+
"content_html": "Install Charmed Feast",
41+
"attrs": {
42+
"href": "https://documentation.ubuntu.com/charmed-feast/"
43+
}
44+
},
45+
"secondaries": [
46+
{
47+
"content_html": "Contact us",
48+
"attrs": {
49+
"href": "/mlops/contact-us",
50+
"class": "js-invoke-modal",
51+
"aria-controls": "mlops-modal"
52+
}
53+
}
54+
]
55+
}
56+
}
57+
]
58+
) -%}
59+
{%- if slot == 'signpost_image' -%}
60+
{{ image (
61+
url="https://assets.ubuntu.com/v1/5dc85b16-feast-logo.png",
62+
alt="",
63+
width="852",
64+
height="175",
65+
hi_def=True,
66+
loading="auto"
67+
) | safe
68+
}}
69+
{%- endif -%}
70+
{%- endcall -%}
6071

6172
<section class="p-section">
6273
<div class="u-fixed-width">

‎templates/mlops/kubeflow/index.html‎

Lines changed: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
{% from "_macros/vf_equal-heights.jinja" import vf_equal_heights %}
44
{% from "_macros/vf_cta-section.jinja" import vf_cta_section %}
5+
{% from "_macros/vf_hero.jinja" import vf_hero %}
56

67
{% block title %}Kubeflow | MLOps{% endblock %}
78

@@ -21,33 +22,42 @@
2122

2223
{% block content %}
2324

24-
<section class="p-section--hero">
25-
<div class="grid-row">
26-
<div class="grid-col-4 grid-col-medium-2">
27-
<div class="p-section--shallow">
28-
<h1>
29-
Kubeflow AI and MLOps
30-
<br class="u-hide--small" />
31-
at any scale
32-
</h1>
33-
</div>
34-
</div>
35-
<div class="grid-col-4 grid-col-medium-2">
36-
<div class="p-section--shallow">
37-
<p>
38-
<strong>Enterprise-ready Charmed Kubeflow, the fully supported MLOps platform for any cloud.</strong>
39-
Charmed Kubeflow is Canonical's enterprise-ready MLOps platform. Deploy, scale, and manage AI workflows across clouds, VMs, or bare metal. A complete solution for sophisticated data science labs. Upgrades and security updates – all supported in the free, open source distribution.
40-
</p>
41-
</div>
42-
<div class="p-cta-block">
43-
<a href="/contact-us"
44-
class="p-button--positive js-invoke-modal"
45-
aria-controls="mlops-modal">Get in touch</a>
46-
<a href="https://ubuntu.com/engage/mlops-guide">Read our guide to MLOps&nbsp;&rsaquo;</a>
47-
</div>
48-
</div>
49-
</div>
50-
</section>
25+
{% call(slot) vf_hero(
26+
title_text='Kubeflow AI and MLOps <br class="u-hide--small" /> at any scale',
27+
chip_text='Supported with Ubuntu Pro',
28+
layout='50/50',
29+
blocks=[
30+
{
31+
"type": "description",
32+
"padding": "shallow",
33+
"item": {
34+
"type": "html",
35+
"content": "<p><strong>Enterprise-ready Charmed Kubeflow, the fully supported MLOps platform for any cloud.</strong> Charmed Kubeflow is Canonical's enterprise-ready MLOps platform. Deploy, scale, and manage AI workflows across clouds, VMs, or bare metal. A complete solution for sophisticated data science labs. Upgrades and security updates – all supported in the free, open source distribution.</p>"
36+
}
37+
},
38+
{
39+
"type": "cta-block",
40+
"padding": "shallow",
41+
"item": {
42+
"primary": {
43+
"content_html": "Get in touch",
44+
"attrs": {
45+
"href": "/contact-us",
46+
"class": "js-invoke-modal",
47+
"aria-controls": "mlops-modal"
48+
}
49+
},
50+
"link": {
51+
"content_html": "Read our guide to MLOps&nbsp;&rsaquo;",
52+
"attrs": {
53+
"href": "https://ubuntu.com/engage/mlops-guide"
54+
}
55+
}
56+
}
57+
}
58+
]
59+
) -%}
60+
{%- endcall -%}
5161

5262
{% call(slot) vf_equal_heights(
5363
title_text="Why choose Charmed Kubeflow?",

0 commit comments

Comments
 (0)