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

Reorganize the Learn & Discover page #215

Merged
merged 1 commit into from
Mar 6, 2024
Merged

Reorganize the Learn & Discover page #215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
66 changes: 39 additions & 27 deletions about/index.md
100755 → 100644
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ sitemapPriority: 0.9
---
<style>
@media (min-width: 30rem) {
#wpe-in-action {
#wpe-in-action-table {
display:grid;
grid-template-columns: 1fr 1fr;
justify-items:center;
Expand All @@ -18,7 +18,7 @@ sitemapPriority: 0.9
}
}
@media (min-width: 60rem) {
#wpe-in-action {
#wpe-in-action-table {
grid-template-columns: 1fr 1fr 1fr;
}
}
Expand Down Expand Up @@ -167,41 +167,45 @@ lazy-youtube a > span {

<header class="page">

# Explore Embedded Browsers
# Learn & Discover

We understand that WPE is interesting from many perspectives, and to people of potentially vastly different backgrounds. Let's help you find what you're looking for.

## Maybe you're…
You might be wondering how a web browser may be used in an embedded device, or
why WPE could be a good choice for your product. If you are an engineer, you
might want to know if your target architecture is supported. Read below to
answer these and more questions.

</header>
<section class="full-bleed c2">

<div>
<div class="arrow-lists">

### New to WPE
### WPE as a Solution

* [What is an embedded browser?](/about/what-is-embedded.html)
* [Why choose WPE?](#why-choose-wpe%3F)
* [Success stories](/#success-stories)
* [See WPE in action](#wpe-in-action)

<ul class="arrows">
<li>Interested in seeing <a href="#wpe-in-action">WPE in action</a></li>
<li>A web developer who is looking to understand <a href="what-is-embedded.html">the basics about what an embedded browser is?</a></li>
</ul>
</div>
<div>

### An embedded developer
<div class="arrow-lists">

<ul class="arrows">
<li>Wondering if WPE is <a href="/about/supported-hardware.html">currently available for your device?</a></li>
<li>Wondering <a href="/about/a-good-choice.html">what makes WPE a good choice</a></li>
<li>Interested in learning more about <a href="/about/architecture.html">the architecture of WPE</a></li>
<li>Ready to explore the different ways to <a href="get-wpe.html">get WPE</a></li>
</ul>
### WPE For Developers

* [Supported Hardware](/about/supported-hardware.html)
* [Architecture](/about/architecture.html)
* [Release Schedule](/release/schedule)
* [Frequently Asked Questions](/about/faq.html)

</div>
</section>

<div>
<h3><a href="/about/supported-hardware.html">Supported Hardware</a></h3>
<p>WPE is currently running on a wide range of hardware, including devices made by:</p>
<div class="dotsep">

### Supported Hardware

WPE runs on [a wide range of hardware](/about/supported-hardware.html), including devices made by Broadcom, Nvidia, NXP, Qualcomm, or Rockchip.

<ul class="gallery c4">
<li><img src="/assets/img/[email protected]" alt=""></li>
<li><img src="/assets/img/[email protected]" alt=""></li>
Expand All @@ -211,15 +215,23 @@ We understand that WPE is interesting from many perspectives, and to people of p
</div>

<div class="dotsep">
<h3><a href="/about/a-good-choice.html">Why Choose WPE?</a></h3>
<p>WPE WebKit is widely adopted by many industries, including digital signage, professional audio, home appliances, set-top-boxes, automotive, and inflight infotainment. Countless devices deployed around the globe are already using WPE WebKit as their web runtime platform, and use is growing rapidly.</p>

### Why Choose WPE?

WPE WebKit is widely adopted by many industries, including digital signage,
professional audio, home appliances, set-top-boxes, automotive, and inflight
infotainment. Countless devices deployed around the globe are already using
WPE WebKit as their web runtime platform, and use is growing rapidly. [Read
more about why you should choose WPE](/about/a-good-choice.html).

<img src="/assets/img/WhyChooseWPE-ExploreLand.png" alt="">
</div>

<div class="dotsep">

## See WPE In Action…
<div class="container text-center my-auto" id="wpe-in-action">
### WPE In Action

<div class="container text-center my-auto" id="wpe-in-action-table">
<div class="item">
<lazy-youtube hash="bg6yCx7VdPY" title="WPE WebGL performance demos">
<div>
Expand Down
11 changes: 6 additions & 5 deletions css/v2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,21 +128,22 @@ h3 {font-size: 1.6em; line-height: 1.2;}
p > big, p.leadin {
font-size: 1.67em;
}
ul.arrows {
div.arrow-lists > ul {
font-size: 130%;
margin: 0;
padding: 0;
padding-inline-start: 2em;
list-style: none;
padding-inline-start: 3em;
}
ul.arrows li {
div.arrow-lists > ul > li {
text-indent: -2em;
}
ul.arrows li::before {
div.arrow-lists > ul > li::before {
display: inline-block;
content: url(../assets/img/list-arrow.svg);
width: 1em;
margin-inline-end: 1em;
text-indent: 0;
margin-inline-end: 1em;
}

.cta.btn {
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,7 @@ <h3><a href="/about/a-good-choice.html">Why Choose WPE?</a></h3>

<div>
<img src="/assets/img/Metrological-hero.jpg" alt="" class="hero">
<div class="spotlight"><h2>Success Story</h2>
<div class="spotlight"><h2 id="success-stories">Success Story</h2>
<h3><a href="/blog/2022-success-metrological.html"><img src="/assets/img/[email protected]" alt="Metrological"></a></h3>
<p>WPE WebKit brought RDK, a modern, performant web browser, to millions of screens. It enables operators to manage devices and easily customize their UIs and apps and provides analytics to improve the customer experience and drive business results.</p>
<p><a href="/blog/2022-success-metrological.html" class="cta btn large">Read More</a></p>
Expand Down
Loading