Skip to content

Commit

Permalink
Build /automotive/resources page (#13276)
Browse files Browse the repository at this point in the history 
* Build /automotive/resources page

* Apply UX review changes

* Update with content changes

* spacing fixes

* responsive fixes

* Remove double dash

* Remove padding from above headings

* Add resources to navigation

* Update automotive chasis image with a higher resolution version

---------

Co-authored-by: Lyubomir Popov <[email protected]>
  • Loading branch information
@petesfrench @lyubomir-popov
petesfrench and lyubomir-popov authored Nov 9, 2023
1 parent 86c4478 commit cedb797
Show file tree
Hide file tree
Showing 5 changed files with 442 additions and 5 deletions.
2 changes: 2 additions & 0 deletions navigation.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ automotive:
path: /automotive
- title: Developers
path: /automotive/developers
- title: Resources
path: /automotive/resources

azure:
title: Azure
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
"dependencies": {
"@canonical/cookie-policy": "3.5.0",
"@canonical/global-nav": "^2.7.0",
"@canonical/latest-news": "1.4.1",
"@canonical/latest-news": "1.5.0",
"@canonical/react-components": "^0.38.0",
"@reduxjs/toolkit": "1.7.1",
"@sentry/react": "6.11.0",
Expand Down
352 changes: 352 additions & 0 deletions templates/automotive/resources.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,352 @@
{% extends "automotive/base_automotive.html" %}

{% block title %}Resources for digital transformation in automotive{% endblock %}
{% block meta_description %}Resources for driving digital transformation in your automotive business. From smart factories to software defined vehicles, unlock the benefits of digital transformation with open source.{% endblock meta_description %}
{% block meta_copydoc %}https://docs.google.com/document/d/17ofQfYbMlTsjdpB3JJru5mckGeLFXMAxRbHvIL4TrOE/edit{% endblock meta_copydoc %}

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

{% block content %}

<section class="p-strip--whitesuru is-shallow u-no-padding--bottom">
<div class="p-section">
<div class="row">
<div class="col-start-large-4 col-9">
<div class="p-section--shallow">
<h1 class="u-no-margin--bottom">Driving digital transformation in automotive</h1>
<p class="p-heading--2">Resources for technical and business teams</p>
</div>
<div class="p-section--shallow">
<p>Unlock the benefits of secure, supported open source solutions for your automotive company's digital transformation.</p>
</div>
<a class="p-button--positive js-invoke-modal" href="#newsletter-signup">Sign up to get automotive news</a>
</div>
</div>
</div>
</section>

<section class="p-section">
<div class="row">
<hr class="p-rule">
<div class="col-6 col-medium-3">
<div class="p-section--shallow">
<h2>Adopt open source securely <br class="u-hide--small u-hide--medium" />in automotive</h2>
</div>
</div>
<div class="col-6 col-medium-3">
<div class="p-section--shallow">
<p>Canonical is shaping the future of the automotive industry with open source technology and strong partnerships with leading companies in the sector.</p>
<p>We ensure that our products meet your strict requirements in safety, security and maintenance. Our goal is to enable you to focus on innovation and differentiation.</p>
<div class="u-embedded-media">
<iframe class="u-embedded-media__element" src="https://www.youtube.com/embed/_bHdUo_ZOEo?si=nG5LLt5Jt7m2fzy7" title="YouTube video player" frameborder="0" allow="clipboard-write; encrypted-media; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="row">
<hr class="p-rule col-9 col-start-large-4">
<div class="col-3 col-medium-2 col-start-large-4">
<div class="p-section--shallow">
<h3 class="p-heading--5">Protect against cyberattacks</h3>
<p>All of our products benefit from robust protection against cyberattacks by providing over-the-air CVE patches and state-of -the-art encryption.</p>
</div>
</div>
<div class="col-3 col-medium-2">
<div class="p-section--shallow">
<h3 class="p-heading--5">Maintenance and reliability</h3>
<p>With a track record of use in public clouds, our products are trusted by companies that require minimal downtime and seamless updates.</p>
</div>
</div>
<div class="col-3 col-medium-2">
<div class="p-section--shallow">
<h3 class="p-heading--5">Uphold the strictest safety standards</h3>
<p>We are actively working on functional safety compliance based on the ISO26262 standard's strict requirements.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-9 col-start-large-4 u-vertically-center u-align--center">
<div class="p-image-wrapper">
{{ image (
url="https://assets.ubuntu.com/v1/8b1151ab-Artboard [email protected]",
alt="",
width="1852",
height="1244",
hi_def=True,
loading="lazy"
) | safe
}}
</div>
</div>
</div>
</section>

<section class="p-section">
<div class="row--25-75 is-split-on-medium">
<hr class="p-rule">
<div class="col">
<div class="p-section--shallow">
<h2 class="p-text--small-caps u-no-margin--bottom">Whitepapers</h2>
</div>
</div>
<div class="col">
<div class="row p-section--shallow">
<div class="col-3 p-rule--highlight">
<h3 class="p-heading--4">
<strong><a href="/engage/automotive-leader-guide-2023-trends">The automotive leader's guide to 2023 trends</a></strong>
</h3>
<p>Dive deep into the latest trends shaping the automotive sector. From electric vehicles and connectivity to data security and mobility services, gain insights and actionable strategies to propel your company towards success.</p>
</div>
<div class="col-3 p-rule--highlight">
<h3 class="p-heading--4">
<strong><a href="/engage/software-defined-vehicles-whitepaper">A CTO's guide to software-defined vehicles</a></strong>
</h3>
<p>Explore solutions to SDV challenges such as increased cybersecurity risks, software fragmentation and costs. Learn how open source technologies can streamline operations, cut costs, enhance platforms and strengthen cybersecurity without sacrificing innovation.</p>
</div>
<div class="col-3 p-rule--highlight">
<h3 class="p-heading--4">
<strong><a href="/engage/consumer-trends-in-the-automotive-industry:-the-impact-of-new-ownership-habits-and-mobility-trends">The impact of new ownership habits and mobility trends</a></strong>
</h3>
<p>Get ready for a shift in vehicle ownership patterns, fuelled by digital natives who seek convenient and eco-friendly ways to travel. Find alternatives to traditional car ownership, unlock fresh revenue streams, and monetise advanced technology offerings for connected vehicles.</p>
</div>
</div>
</div>
</div>
</section>

<section class="p-section">
<div class="row--25-75 is-split-on-medium">
<hr class="p-rule"/>
<div class="col">
<div class="p-section--shallow">
<h2 class="p-text--small-caps">Webinar</h2>
</div>
</div>
<div class="col">
<h3 class="p-heading--2">Security and real-time Linux <br class="u-hide--small u-hide--medium" />in a shifting automotive world</h3>
<p>Watch the webinar about the best practices, emerging threats and innovative technologies that can be used to secure your future in-vehicle ECUs.</p>
<p>Learn how IT solutions and technologies can help bridge the gap between the traditional automotive industry approaches and the best software practices.</p>
<div class="u-embedded-media">
<iframe class="u-embedded-media__element" src="https://www.youtube.com/embed/IWdQETXN-0k?si=a-b0mizOnfgWeTnj" title="Security and real-time Linux in a shifting automotive world" frameborder="0" allow="clipboard-write; encrypted-media; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
</section>

<section class="p-section">
<div class="row--25-75 is-split-on-medium">
<hr class="p-rule"/>
<div class="col">
<div class="p-section--shallow">
<h2 class="p-text--small-caps">From our blog</h2>
</div>
</div>
<div class="col">
<div class="row p-section--shallow">
<div class="col-3">
<div class="u-crop--16-9">
<a href="https://canonical.com/blog/canonical-joins-the-eclipse-foundations-software-defined-vehicle-working-group" aria-hidden="true" tabindex="-1">
<div class="p-image-wrapper">
{{ image (
url="https://assets.ubuntu.com/v1/2e11c501-eclipse-foundations-software-defined-vehicle-working-group.png",
alt="",
width="1200",
height="628",
hi_def=True,
loading="lazy"
) | safe
}}
</div>
</a>
</div>
<h3 class="p-heading--5">
<a href="https://canonical.com/blog/canonical-joins-the-eclipse-foundations-software-defined-vehicle-working-group" aria-hidden="true" tabindex="-1">Canonical joins the Eclipse Foundation's Software Defined Vehicle working group</a>
</h3>
<p>Canonical is proud to join the Eclipse Foundation's Software Defined Vehicle working group.</p>
</div>
<div class="col-3">
<div class="u-crop--16-9">
<a href="/blog/canonical-joins-soafee-sig">
<div class="p-image-wrapper">
{{ image (
url="https://assets.ubuntu.com/v1/7b2df80b-SOAFEE-SIG-blog.png",
alt="",
width="1600",
height="900",
hi_def=True,
loading="lazy"
) | safe
}}
</div>
</a>
</div>
<h3 class="p-heading--5">
<a href="/blog/canonical-joins-soafee-sig">Canonical joins SOAFEE SIG</a>
</h3>
<p>Canonical is part of the Scalable Open Architecture for Embedded Edge (SOAFEE) Special Interest Group, which contributes to the development of a safe, secure and software-defined automotive future.</p>
</div>
<div class="col-3">
<div class="u-crop--16-9">
<a href="/blog/elektrobit-and-canonical-announce-eb-corbos-linux-built-on-ubuntu" aria-hidden="true" tabindex="-1">
<div class="p-image-wrapper">
{{ image (
url="https://assets.ubuntu.com/v1/ec3fe3cd-eb-corbos-linux-built-on-ubuntu-blog.jpg",
alt="",
width="1247",
height="748",
hi_def=True,
loading="lazy"
) | safe
}}
</div>
</a>
</div>
<h3 class="p-heading--5">
<a href="/blog/elektrobit-and-canonical-announce-eb-corbos-linux-built-on-ubuntu">Elektrobit and Canonical announce EB corbos Linux &ndash; built on Ubuntu</a>
</h3>
<p>Canonical and EB are thrilled to reveal EB corbos Linux &ndash; built on Ubuntu, a solution that is tailored specifically for demanding automotive applications.</p>
</div>
</div>
</div>
</div>
</section>

<section class="p-section">
<div class="row--25-75 is-split-on-medium">
<hr class="p-rule"/>
<div class="col">
<div class="p-section--shallow">
<h2 class="p-text--small-caps">Latest</h2>
<a href="/blog/tag/automotive">Read more about automotive and open source on our blog&nbsp;&rsaquo;</a>
</div>
</div>
<div class="col">
<div class="row p-section--shallow" id="automotive-resources-latest-articles">
</div>
</div>
</div>

<template style="display:none" id="automotive-resources-articles-template">
<div class="col-3">
<div class="u-crop--16-9">
<a class="article-link" aria-hidden="true" tabindex="-1">
<div class="article-image p-image-wrapper"></div>
</a>
</div>
<h3 class="p-heading--5"><a class="article-link article-title"></a></h3>
<p class="article-excerpt"></p>
</div>
</template>
</section>

<script src="{{ versioned_static('js/dist/latest-news.js') }}"></script>
<script>
canonicalLatestNews.fetchLatestNews(
{
articlesContainerSelector: "#automotive-resources-latest-articles",
articleTemplateSelector: "#automotive-resources-articles-template",
excerptLength: 100,
groupId: "4340",
}
)
</script>

<section class="p-section">
<div class="row--25-75 is-split-on-medium">
<hr class="p-rule">
<div class="col">
<div class="p-section--shallow">
<h2 class="p-text--small-caps">In the media</h2>
</div>
</div>
<div class="col">
<div class="row p-section--shallow">
<div class="col-3">
<h3 class="p-heading--5">Automotive World</h3>
<p class="p-heading--5">
<a href="https://www.automotiveworld.com/articles/driving-the-future-why-open-source-is-key-in-a-world-of-software-defined-cars/">Driving the future: Why open-source is key in a world of software-defined cars</a>
</p>
<p>Processing power requirements will require a seismic shift in the way OEMs work, writes Bertrand Boisseau.</p>
</div>
<div class="col-3">
<h3 class="p-heading--5">RTInsights</h3>
<p class="p-heading--5">
<a href="https://www.rtinsights.com/why-open-source-is-the-best-road-ahead-for-the-software-defined-car/">Why open source is the best road ahead for the software-defined car</a>
</p>
<p>Automakers need the flexibility and scalability that open-source collaboration is famous for to develop the software-defined cars of today and the future.</p>
</div>
<div class="col-3">
<h3 class="p-heading--5">BetaNews</h3>
<p class="p-heading--5">
<a href="https://betanews.com/2022/12/22/greater-cloud-adoption-better-security-and-connected-cars-5g-predictions-for-2023/">Greater cloud adoption, better security and connected cars &ndash; 5G predictions for 2023</a>
</p>
<p>The importance of 5G for internet infrastructure is widely recognised, but the effects of the pandemic have hindered progress in this area. What's in store for the future?</p>
</div>
</div>
</div>
</div>
</section>

<hr class="p-rule is-fixed-width">

<section class="p-strip is-deep">
<div class="u-fixed-width">
<h2><a href="/automotive">Power up your transformation with trusted open source&nbsp;&rsaquo;</a></h2>
</div>
</section>

<section class="p-section--deep" id="newsletter-signup">
<div class="row--50-50 is-split-on-medium">
<hr class="p-rule">
<div class="col">
<h2>Stay up to date with news from Canonical's Automotive Team</h2>
</div>
<div class="col">
<form action="/marketo/submit" method="post" id="mktoForm_4960">
<ul class="p-list">
<li class="p-list__item">
<label class="u-sv2" for="email">Email address:</label>
<input required id="email" name="email" maxlength="255" type="email" pattern="^[^ ]+@[^ ]+\.[a-z]{2,26}$" />
</li>
<li class="p-list__item u-sv2">
<label class="p-checkbox">
<input class="p-checkbox__input" value="yes" aria-labelledby="canonicalUpdatesOptIn" name="canonicalUpdatesOptIn" type="checkbox">
<span class="p-checkbox__label" id="canonicalUpdatesOptIn">I agree to receive information about Canonical's products and services.</span>
</label>
</li>
<li class="p-list__item u-sv2">In submitting this form, I confirm that I have read and agree to <a href="/legal/data-privacy/contact">Canonical's Privacy Notice</a> and <a href="/legal/data-privacy">Privacy Policy</a>.</li>
{# These are honey pot fields to catch bots #}
<li class="u-off-screen">
<label class="website" for="website">Website:</label>
<input name="website" type="text" class="website" autocomplete="off" value="" id="website" tabindex="-1" />
</li>
<li class="u-off-screen">
<label class="name" for="name">Name:</label>
<input name="name" type="text" class="name" autocomplete="off" value="" id="name" tabindex="-1" />
</li>
{# End of honey pots #}
<li class="p-list__item">
<button type="submit" class="p-button--positive" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Form', 'eventAction' : 'iot contact-us', 'eventLabel' : 'Automotive', 'eventValue' : undefined });">Sign up</button>
</li>
</ul>
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="formid" value="4960" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="returnURL" value="https://ubuntu.com/internet-of-things/thank-you?product=automotive" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="Consent_to_Processing__c" value="yes" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_campaign" id="utm_campaign" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_medium" id="utm_medium" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_source" id="utm_source" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_content" id="utm_content" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_term" id="utm_term" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="GCLID__c" id="GCLID__c" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="Facebook_Click_ID__c" id="Facebook_Click_ID__c" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" id="preferredLanguage" name="preferredLanguage" maxlength="255" value="" />
</form>
</div>
</div>
</section>


<!-- Set default Marketo information for contact form below-->
<div class="u-hide" id="contact-form-container" data-form-location="/shared/forms/interactive/newsletter-opt-in" data-form-id="4960" data-lp-id="2551" data-return-url="https://ubuntu.com/internet-of-things/thank-you?product=automotive" data-lp-url="https://pages.ubuntu.com/things-contact-us.html"></div>

{% endblock content %}
Loading

0 comments on commit cedb797

Please sign in to comment.