Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WD-16600 Rebrand embedding/landing page #14620

Open
wants to merge 6 commits into
base: feature-rebrand-embedding
Choose a base branch
from
+384 −262
Open

WD-16600 Rebrand embedding/landing page #14620

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cbdadb5
Rebrand embedding/landing page
muhammad-ali-pk Jan 8, 2025
87f8448
Fixed wrapping
muhammad-ali-pk Jan 9, 2025
36f1e0b
Addressed code review comments
muhammad-ali-pk Jan 14, 2025
a04a692
Refactor contact form
muhammad-ali-pk Jan 14, 2025
bafe741
Removed unnecessary fields
muhammad-ali-pk Jan 14, 2025
d4e0c7f
Made phone field optional
muhammad-ali-pk Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions templates/embedding/base_embedding.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
{% extends "templates/base.html" %}

{% block meta_copydoc %}https://drive.google.com/drive/folders/19PBDauuZAlJPizPte3Es-Rc3FFmp8Xt2{% endblock meta_copydoc %}
{% block meta_copydoc %}
https://drive.google.com/drive/folders/19PBDauuZAlJPizPte3Es-Rc3FFmp8Xt2
{% endblock meta_copydoc %}

{% block body_class %}
is-paper
{% endblock body_class %}

{% block outer_content %}
{% block content %}{% endblock %}
{% endblock %}

{% block content %}{% endblock %}
{% endblock %}
352 changes: 172 additions & 180 deletions templates/embedding/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,206 +1,198 @@
{% extends "embedding/base_embedding.html" %}

{% block title %}Ubuntu is the new standard for embedded Linux{% endblock %}
{% from "_macros/vf_hero.jinja" import vf_hero %}

{% block meta_description %}Ubuntu Embedding Programme offers the optimal technical, commercial and legal framework to deploy your products and solutions with Canonical offerings.{% endblock meta_description %}
{% block title %}Canonical Embedding program{% endblock %}

{% block meta_copydoc %}https://docs.google.com/document/d/1evAFIXbNztOd5yZee-uV8_OM-s6o27P46yXFaaeEhy0/edit#{% endblock meta_copydoc %}
{% block meta_description %}
Ubuntu Embedding Programme offers the optimal technical, commercial and legal framework to deploy your products and solutions with Canonical offerings.
{% endblock meta_description %}

{% block meta_copydoc %}
https://docs.google.com/document/d/1evAFIXbNztOd5yZee-uV8_OM-s6o27P46yXFaaeEhy0/edit#
{% endblock meta_copydoc %}

{% block content %}

<section class="p-suru--50-50">
<div class="p-strip u-no-padding--bottom">
{% call(slot) vf_hero(
title_text='Canonical Embedding program',
layout='50/50-full-width-image'
) -%}
{%- if slot == 'description' -%}
<p>
Our Embedding program offers the optimal technical, commercial and legal framework to deploy your products and solutions with Canonical offerings, including cost-effective support across the lifecycle of your product.
</p>
{%- endif -%}
{%- if slot == 'cta' -%}
<a href="/contact-us" class="p-button--positive js-invoke-modal">Get in touch</a>
{%- endif -%}
{%- if slot == 'image' -%}
<div class="p-image-container--cinematic is-cover">
{{ image(url="https://assets.ubuntu.com/v1/580a82f9-hero-img.png",
alt="",
width="2464",
height="1027",
hi_def=True,
loading="auto",
attrs={"class": "p-image-container__image"}) | safe
}}
</div>
{% endif -%}
{% endcall -%}

<section class="p-section">
<hr class="is-fixed-width p-rule" />
<div class="row--50-50">
<div class="col">
<h1>Canonical Embedding programme</h1>
<p>Our Embedding programme offers the optimal technical, commercial and legal framework to deploy your products and solutions with Canonical offerings, including cost-effective support across the lifecycle of your product.</p>
<h2>Build your products with Canonical</h2>
</div>
<div class="col">
<p>
<a class="p-button--positive js-invoke-modal" href="/embedding#get-in-touch">Get in touch</a>
Canonical’s portfolio is used by ISVs to power their SaaS, appliances and software solutions deployed within public clouds, data centers, edge infrastructure and workstations. It is also used by device manufacturers embedding Ubuntu into their products, from IoT devices to robotics and more.
</p>
</div>
<div class="col u-hide--small u-hide--medium u-align--center">
{{ image (
url="https://assets.ubuntu.com/v1/83e7ce7c-ubuntu-pro-circular.png",
alt="",
width="250",
height="270",
hi_def=True,
loading="lazy"
) | safe
}}
</div>
</div>
</div>
</section>

<section class="p-strip--light is-deep">
<div class="row">
<div class="col-6">
<h2>Build your products with Canonical</h2>
<p>Canonical's portfolio is used by ISVs to power their SaaS, appliances and software solutions deployed within public clouds, data-centres, edge infrastructure and workstations. It is also used by device manufacturers embedding Ubuntu into their products, from IoT devices to robotics and more.</p>
</div>
<div class="col-6 u-hide--small u-hide--medium u-align--center u-vertically-center">
{{ image (
url="https://assets.ubuntu.com/v1/bcf36072-Ubuntu+Deep+tech+-+dark.svg",
alt="",
width="273",
height="188",
hi_def=True,
loading="lazy"
) | safe
}}
</div>
</div>
</section>
</section>

<section class="p-strip u-no-padding--bottom">
<div class="u-fixed-width">
<h2>What's included</h2>
<p>Our Embedding programme brings all the advantages of Ubuntu Pro together with the framework you need to deploy and distribute your products and solutions powered with Canonical offerings.</p>
<p class="p-heading--3">Capabilities</p>
<ul class="p-list is-split">
<li class="p-list__item is-ticked">Deploy and distribute your products and solutions with Canonical offerings.</li>
<li class="p-list__item is-ticked">L3 engineering support for your engineering team for the full stack from Ubuntu to containers.</li>
<li class="p-list__item is-ticked">Certified components for compliance, hardening and audit such as FIPS 140-2, DISA STIG profiles, CIS level 1 and 2 hardening and Common Criteria.</li>
<li class="p-list__item is-ticked">10 years security maintenance for Canonical code repositories.</li>
<li class="p-list__item is-ticked">Ubuntu systems management with Landscape and Kernel Livepatch.</li>
<li class="p-list__item is-ticked">Trademark use.</li>
<li class="p-list__item is-ticked">Joint marketing opportunities.</li>
<li class="p-list__item is-ticked">Transparent pricing model per instance and use-case.</li>
</ul>
<p>
<a class="p-button--positive js-invoke-modal" href="/embedding#get-in-touch">Contact us to learn more</a>
</p>
</div>
</section>

<div class="u-fixed-width">
<hr class="p-rule"/>
</div>

<section class="p-strip">
<div class="row">
<div class="col-9">
<h2>Legal Framework</h2>
<p>Embedding contracts include the rights required to deliver solutions based on Canonical offerings and to use the Ubuntu trademarks.</p>
</div>
<div class="col-3 u-hide--small u-hide--medium u-align--center">
{{
image (
url="https://assets.ubuntu.com/v1/253da317-image-document-ubuntudocs.svg",
alt="",
width="160",
height="186",
hi_def=True,
loading="lazy"
) | safe
}}
<section class="p-section">
<hr class="is-fixed-width p-rule" />
<div class="row--50-50">
<div class="col">
<h2>What's included</h2>
</div>
<div class="col">
<p>
Our Embedding program brings all the advantages of Ubuntu Pro together with the framework you need to deploy and distribute your products and solutions powered with Canonical offerings.
</p>
<hr class="p-rule--muted" />
<ul class="p-list--divided">
<li class="p-list__item is-ticked">Deploy and distribute your products and solutions with Canonical offerings</li>
<li class="p-list__item is-ticked">
L3 engineering support for your engineering team for the full stack from Ubuntu to containers
</li>
<li class="p-list__item is-ticked">
Certified components for compliance, hardening and audit such as FIPS 140-2, DISA STIG profiles, CIS level 1 and 2 hardening, and Common Criteria
</li>
<li class="p-list__item is-ticked">10 years security maintenance for Canonical code repositories</li>
<li class="p-list__item is-ticked">Ubuntu systems management with Landscape and Kernel Livepatch</li>
<li class="p-list__item is-ticked">Trademark use</li>
<li class="p-list__item is-ticked">Joint marketing opportunities</li>
<li class="p-list__item is-ticked">Transparent pricing model per instance and use-case</li>
</ul>
<div class="p-cta-block">
<a href="/contact-us" class="p-button--positive js-invoke-modal">Contact us to learn more</a>
</div>
</div>
</div>
</div>
</section>
</section>

<section class="p-strip--light">
<div class="row">
<div class="col-3 u-hide--small u-hide--medium u-align--center u-vertically-center">
{{
image (
url="https://assets.ubuntu.com/v1/b0af9ede-UA_24-7_Support.svg",
alt="",
width="174",
height="174",
hi_def=True,
loading="lazy"
) | safe
}}
<section class="p-section">
<hr class="is-fixed-width p-rule" />
<div class="row--50-50">
<div class="col">
<h2>Legal framework</h2>
</div>
<div class="col">
<p>
Embedding contracts include the rights required to deliver solutions based on Canonical offerings and to use the Ubuntu trademarks.
</p>
</div>
</div>
<div class="col-9">
<h2>Embedding Support</h2>
<p>An efficient and clean support model for you and your customers</p>
<ul class="p-list">
<li class="p-list__item is-ticked">The Embedder delivers support to their customers</li>
<li class="p-list__item is-ticked">Canonical L3 Engineering support to the embedder's L3 Engineering</li>
<li class="p-list__item is-ticked">Essential, Standard and Advanced Support Tiers </li>
</ul>
<p>For more information <a href="/embedding/faqs">check our FAQs</a>.</p>
<p><a class="p-button" href="/support">Get support</a></p>
</section>

<section class="p-section">
<hr class="is-fixed-width p-rule" />
<div class="p-section--shallow">
<div class="row--50-50">
<div class="col">
<h2>Embedding support</h2>
</div>
<div class="col">
<p>An efficient and clean support model for you and your customers</p>
</div>
</div>
</div>
</div>
</section>

<section class="p-strip">
<div class="row">
<div class="col-9">
<h2>Commercials</h2>
<p>The familiar Ubuntu commercial framework is evolved for OEM requirements including easing adding support to estates that grow over time.</p>
<ul class="p-list">
<li class="p-list__item is-ticked">The combination of embedder-only Support and specific tailored solution use-cases means Canonical can offer OEM-type pricing to embedders. Contact us to discuss your project</li>
<li class="p-list__item is-ticked">Regular shipment reporting to ensure your entire estate is under Canonical support coverage</li>
</ul>
<div class="p-section--shallow">
<div class="row">
<div class="col-start-large-4">
<div class="p-section--shallow">
<div class="p-image-container">
{{ image(url="https://assets.ubuntu.com/v1/3ff2dd9f-embedding-support.png",
alt="",
width="1832",
height="764",
hi_def=True,
loading="lazy",
attrs={"class": "p-image-container__image"}) | safe
}}
</div>
</div>
<hr class="p-rule--muted" />
<div class="row">
<div class="col-4">
<p>The Embedder delivers support to their customers</p>
</div>
<div class="col-4">
<p>Canonical L3 Engineering support to the embedder’s L3 Engineering</p>
</div>
<div class="col-4">
<p>Essential, Standard and Advanced Support Tiers</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 u-hide--small u-hide--medium u-align--center u-vertically-center">
{{
image (
url="https://assets.ubuntu.com/v1/d127abd7-safety+reliability.svg",
alt="",
width="150",
height="150",
hi_def=True,
loading="lazy"
) | safe
}}
<div class="u-fixed-width">
<div class="p-cta-block">
<div class="row">
<div class="col-start-large-8">
<a href="/support" class="p-button" aria-label="Get support for your full open source stack">Get support</a>
<span>For more information <a href="/embedding/faqs" aria-label="check out out embedding FAQs">check our FAQs</a></span>
muhammad-ali-pk marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
</div>
</div>
</div>
</section>
</section>

<section class="p-strip--light">
<div class="row">
<div class="col-6 u-hide--small u-hide--medium u-align--center u-vertically-center">
{{
image (
url="https://assets.ubuntu.com/v1/c4b290c8-Contact+us.svg",
alt="",
width="211",
height="150",
hi_def=True,
loading="lazy"
) | safe
}}
</div>
<div class="col-6">
<h2>Ready for the next steps?</h2>
<p>Join Canonical Embedding programme</p>
<p>
<a class="p-button--positive js-invoke-modal" href="/embedding#get-in-touch">Get in touch</a>
</p>
<section class="p-section">
<hr class="is-fixed-width p-rule" />
<div class="row--50-50">
<div class="col">
<h2>Commercials</h2>
</div>
<div class="col">
<p>
The familiar Ubuntu commercial framework is evolved for OEM requirements including easing adding support to estates that grow over time
</p>
<hr class="p-rule--muted" />
<ul class="p-list--divided">
<li class="p-list__item is-ticked">
The combination of embedder-only Support and specific tailored solution use-cases means Canonical can offer OEM-type pricing to embedders. Contact us to discuss your project
</li>
<li class="p-list__item is-ticked">
Regular shipment reporting to ensure your entire estate is under Canonical support coverage
</li>
</ul>
</div>
</div>
</div>
</section>
</section>

<!-- Set default Marketo information for contact form below-->
<div class="u-hide" id="contact-form-container" data-form-location="/shared/forms/interactive/embedding" data-form-id="4482" data-lp-id="" data-return-url="/embedding" data-lp-url="https://pages.ubuntu.com/things-contact-us.html">
</div>
<hr class="is-fixed-width p-rule" />

<script>
function canonicalProducts() {
const productsQuestion = document.getElementById("canonicalProductsQuestion").outerText;
const optionYes = document.getElementById("selectionYes");
const optionNo = document.getElementById("selectionNo");
const textarea = document.getElementById("Comments_from_lead__c");
const extraCommentsText = document.getElementById("about-use-case");
const extraCommentsLabel = document.querySelector(`[for="about-use-case"]`).innerHTML;

if (optionYes.checked) {
const text = document.getElementById("canonicalProductsYes").outerText;
textarea.value = productsQuestion + ": " + text + " \r\n";
} else if (optionNo.checked) {
const text = document.getElementById("canonicalProductsNo").outerText;
textarea.value = productsQuestion + ": " + text + " \r\n";
}

if (extraCommentsText.value) {
textarea.value += extraCommentsLabel + " " + extraCommentsText.value
}
}
</script>
<section class="p-strip is-deep">
<div class="u-fixed-width">
<h2>Ready for the next step?</h2>
<a href="/contact-us" class="p-heading--2 js-invoke-modal">Join the Canonical Embedding program&nbsp;&rsaquo;</a>
</div>
</section>

<!-- Set default Marketo information for contact form below-->
<div class="u-hide"
id="contact-form-container"
data-form-location="/shared/forms/interactive/embedding"
data-form-id="4482"
data-lp-id=""
data-return-url="/embedding"
data-lp-url="https://pages.ubuntu.com/things-contact-us.html"></div>

{% endblock content %}
Loading
Loading