Skip to content

Commit e17e2c7

Browse files
davidhammakerdavidhammaker
committed
WIP: Create 'Our Solution' page
1 parent 51da39a commit e17e2c7

6 files changed

Lines changed: 413 additions & 0 deletions

File tree

‎_pages/our_solution.html‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
---
2+
layout: default
3+
nav_state: transparent-light
4+
title: Our Solution
5+
heading: Our Solution
6+
permalink: /our-solution/
7+
---
8+
9+
<div id="our-solution-content" class="container-fluid">
10+
<div
11+
id="content-box-1"
12+
class="d-flex flex-column-reverse flex-md-row align-items-center justify-content-center justify-content-md-end"
13+
>
14+
<div class="start-box">
15+
<p class="tagline">Orality Platform</p>
16+
<h1>Our Solution</h1>
17+
<p>
18+
When it comes to Biblical content, many missionary teams face a
19+
distribution problem. We developed Orality Platform (OP) to partner with
20+
these teams in providing an adaptable and audio-driven solution for
21+
unreached language groups.
22+
</p>
23+
</div>
24+
<div class="end-box">
25+
<img src="{{ "/assets/images/our-solution-illustration-1.jpeg" |
26+
relative_url }}" class="img-fluid" alt="Four people working together on a
27+
web app">
28+
</div>
29+
</div>
30+
31+
<div id="content-box-2" class="row">
32+
<div class="d-none d-md-flex col-md-3"></div>
33+
<div class="col-12 col-md-6 px-4 px-md-0">
34+
<p class="text-justify lead">
35+
For several years on the field, Caleb managed a resource center in a
36+
closed country. It housed thousands of printed books and materials.
37+
Sadly, the majority of these resources remained on the shelves gathering
38+
dust.
39+
</p>
40+
</div>
41+
<div class="d-none d-md-flex col-md-1 col-lg-1"></div>
42+
</div>
43+
44+
<div
45+
id="content-box-3"
46+
class="row flex-md-row align-items-start align-items-md-center justify-content-start"
47+
>
48+
<div class="d-none d-md-flex col-md-1"></div>
49+
<div class="col-12 col-md-10 a-common-need">
50+
<div class="d-flex flex-column flex-lg-row gap-3">
51+
<div class="col d-flex flex-column align-items-start mb-2">
52+
<h2 class="text-center">A Common Need</h2>
53+
<p class="mb-4 fs-5">
54+
We’ve found that the problem for missionary teams is usually not
55+
content production, but rather content distribution. Furthermore,
56+
the reality that many ethnolinguistic groups are
57+
<a href="/articles/oral-preference-learners/"
58+
>oral preference learners</a
59+
>
60+
means that the solution ought to be audio-driven.
61+
</p>
62+
<p class="fs-5">
63+
A common need exists in many ministry contexts: simple, clear, and
64+
culturally appropriate ways for people to access scriptural content.
65+
</p>
66+
</div>
67+
<div class="col flex-column align-self-md-center">
68+
<div
69+
class="row flex-md-row align-items-md-start justify-content-start"
70+
>
71+
<div class="col col-12 col-md-6 my-3">
72+
<div class="d-flex align-items-center">
73+
<div style="width: 100%">
74+
<div class="row flex-md-row justify-content-center">
75+
<img class="icon" src="{{
76+
"/assets/images/icons/green-ear.svg" | relative_url }}"
77+
alt="Ear icon for oral preference learners">
78+
</div>
79+
<div class="row flex-md-row text-center">
80+
<p class="stat-label">4&nbsp;billion</p>
81+
</div>
82+
<div class="row flex-md-row text-center">
83+
<p>Oral Preference Communicators</p>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
<div class="col col-12 col-md-6 my-3">
89+
<div class="d-flex align-items-center">
90+
<div style="width: 100%">
91+
<div class="row flex-md-row justify-content-center">
92+
<img class="icon" src="{{ "/assets/images/icons/book.svg" |
93+
relative_url }}" alt="Book icon for Christian workers">
94+
</div>
95+
<div class="row flex-md-row text-center">
96+
<p class="stat-label">90%</p>
97+
</div>
98+
<div class="row flex-md-row text-center">
99+
<p>
100+
Christian Workers Presenting Gospel Through Primary
101+
Literate Styles
102+
</p>
103+
</div>
104+
</div>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
</div>
111+
<div class="d-none d-md-flex col-md-1"></div>
112+
</div>
113+
114+
<div
115+
id="content-box-4"
116+
class="d-flex flex-md-row align-items-center justify-content-center"
117+
>
118+
<div class="col col-12 col-md-10 justify-content-center">
119+
<div class="row p-4">
120+
<div class="col col-12 col-md-5 align-self-center justify-self-center mb-4">
121+
<div style="width: 100%">
122+
<div class="row flex-md-row justify-content-center">
123+
<div class="audio-bg">
124+
<div
125+
class="d-flex align-self-center justify-content-center audio-div"
126+
>
127+
<img src="{{ "/assets/images/icons/audio.svg" | relative_url
128+
}}" class="audio-icon" alt="Audio icon" >
129+
</div>
130+
</div>
131+
</div>
132+
</div>
133+
</div>
134+
<div class="d-none d-md-flex col col-md-1"></div>
135+
<div class="col col-12 col-md-5">
136+
<p class="tagline mb-2">One For All</p>
137+
<h1 class="mt-1">Orality Platform</h1>
138+
<p>
139+
Our solution began to take shape as a concept in 2019 and 2020 as we
140+
were researching digital distribution needs and building prototype
141+
apps. We didn’t find existing solutions, mobile apps or otherwise,
142+
to be adequate (though some
143+
<a
144+
href="https://software.sil.org/scriptureappbuilder/"
145+
target="_blank"
146+
rel="noopener noreferrer"
147+
>fantastic solutions<img style="height: 15px;" src="{{
148+
"/assets/images/icons/arrows/in-line-arrow-external.svg" |
149+
relative_url }}" class="img-in-line"></a
150+
>
151+
already exist for
152+
<a
153+
href="https://software.sil.org/readingappbuilder/"
154+
target="_blank"
155+
rel="noopener noreferrer"
156+
>text-heavy content<img style="height: 15px;" src="{{
157+
"/assets/images/icons/arrows/in-line-arrow-external.svg" |
158+
relative_url }}" class="img-in-line"></a
159+
>). So in 2021 we began a more concentrated effort to build Orality
160+
Platform: a shared codebase from which multiple language-specific
161+
apps can be spun up.
162+
</p>
163+
<p>
164+
It's like using the same recipe to make different dishes. The shared
165+
codebase is our recipe, and each app is a unique dish we create from
166+
it.
167+
</p>
168+
</div>
169+
</div>
170+
</div>
171+
</div>
172+
173+
{%- include testimonials.html -%}
174+
</div>

‎_sass/base.scss‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1344,6 +1344,216 @@ main {
13441344
}
13451345
}
13461346

1347+
/**
1348+
* Our Solution Page
1349+
*/
1350+
#our-solution-content {
1351+
background-color: map-get($primary-colors, 'cream');
1352+
1353+
#content-box-1 {
1354+
margin-top: 72px;
1355+
gap: 144px;
1356+
1357+
@include media-breakpoint-down(lg) {
1358+
gap: 40px;
1359+
}
1360+
1361+
@include media-breakpoint-down(md) {
1362+
gap: 0px;
1363+
margin-top: 80px;
1364+
}
1365+
1366+
.start-box {
1367+
max-width: 50%;
1368+
padding-left: 140px;
1369+
1370+
@include media-breakpoint-down(lg) {
1371+
padding-left: 20px;
1372+
}
1373+
1374+
@include media-breakpoint-down(md) {
1375+
margin-top: 36px;
1376+
max-width: none;
1377+
padding-right: 20px;
1378+
}
1379+
1380+
p {
1381+
margin-top: 24px;
1382+
1383+
&.tagline {
1384+
margin-top: 0px;
1385+
margin-bottom: 8px;
1386+
}
1387+
}
1388+
1389+
h1 {
1390+
margin-top: 0px;
1391+
}
1392+
1393+
}
1394+
1395+
.end-box img {
1396+
border-bottom-left-radius: 80px;
1397+
max-height: 830px;
1398+
1399+
@include media-breakpoint-down(md) {
1400+
border-bottom-left-radius: 0px;
1401+
max-height: none;
1402+
width: 100%;
1403+
}
1404+
}
1405+
}
1406+
1407+
#content-box-2 p {
1408+
font-family: Gilroy, sans-serif;
1409+
font-size: 32px;
1410+
font-style: normal;
1411+
font-weight: 600;
1412+
letter-spacing: -0.3px;
1413+
line-height: 40px;
1414+
padding: 48px 0 48px 0;
1415+
1416+
@include media-breakpoint-down(md) {
1417+
font-size: 24px;
1418+
line-height: 36px;
1419+
width: auto;
1420+
}
1421+
}
1422+
1423+
#content-box-3 {
1424+
margin-bottom: 72px;
1425+
1426+
@include media-breakpoint-down(md) {
1427+
background-color: map-get($primary-colors, 'black');
1428+
margin-bottom: 0px;
1429+
}
1430+
1431+
.a-common-need {
1432+
background-color: map-get($primary-colors, 'black');
1433+
border-radius: 40px;
1434+
padding: 128px 80px;
1435+
1436+
@include media-breakpoint-down(md) {
1437+
padding: 88px $px-4-size 96px $px-4-size;
1438+
}
1439+
1440+
h2 {
1441+
color: map-get($primary-colors, 'white');
1442+
margin-top: 0px;
1443+
1444+
@include media-breakpoint-down(md) {
1445+
margin-bottom: 48px;
1446+
}
1447+
}
1448+
1449+
p {
1450+
color: map-get($primary-colors, 'white');
1451+
font-family: 'Noto Sans', sans-serif;
1452+
font-size: 16px;
1453+
font-style: normal;
1454+
font-weight: 400;
1455+
line-height: 24px;
1456+
margin-bottom: 0px;
1457+
margin-top: 0px;
1458+
1459+
&.stat-label {
1460+
color: map-get($secondary-colors, 'light-green');
1461+
font-family: Gilroy, sans-serif;
1462+
font-weight: 600;
1463+
font-size: 48px;
1464+
line-height: 64px;
1465+
}
1466+
1467+
&.title {
1468+
font-family: Gilroy, sans-serif;
1469+
font-size: 18px;
1470+
font-style: normal;
1471+
font-weight: 700;
1472+
line-height: 24px;
1473+
margin-top: 16px;
1474+
}
1475+
}
1476+
1477+
.icon {
1478+
height: 72px;
1479+
width: 72px;
1480+
}
1481+
1482+
.call-to-action {
1483+
margin-top: 80px;
1484+
1485+
@include media-breakpoint-down(md) {
1486+
margin-top: 48px;
1487+
}
1488+
}
1489+
1490+
.m-margin-top {
1491+
@include media-breakpoint-down(md) {
1492+
margin-top: 48px;
1493+
}
1494+
}
1495+
}
1496+
}
1497+
1498+
#content-box-4 {
1499+
margin-bottom: 72px;
1500+
1501+
.audio-bg {
1502+
background-color: map-get($primary-colors, 'white');
1503+
border-radius: 40px;
1504+
width: 40vw;
1505+
height: 40vw;
1506+
max-width: inherit!important;
1507+
1508+
@include media-breakpoint-down(md) {
1509+
width: 80vw;
1510+
height: 80vw;
1511+
}
1512+
}
1513+
1514+
.audio-div {
1515+
height: 100%;
1516+
}
1517+
1518+
.audio-icon {
1519+
max-width: 230px;
1520+
}
1521+
}
1522+
1523+
#question-hero {
1524+
padding: 80px;
1525+
1526+
@include media-breakpoint-down(md) {
1527+
min-height: 400px;
1528+
}
1529+
1530+
h2 {
1531+
color: map-get($primary-colors, 'white');
1532+
margin-top: 0px;
1533+
}
1534+
1535+
p {
1536+
color: map-get($primary-colors, 'white');
1537+
1538+
&.tagline {
1539+
color: map-get($secondary-colors, 'light-green');
1540+
margin-bottom: 8px;
1541+
}
1542+
}
1543+
1544+
.hero-content {
1545+
border-left: 1px solid map-get($secondary-colors, 'grey');
1546+
max-width: 600px;
1547+
padding-left: 30px;
1548+
1549+
@include media-breakpoint-down(md) {
1550+
border-left: none;
1551+
padding-left: 0px;
1552+
}
1553+
}
1554+
}
1555+
}
1556+
13471557
/**
13481558
* Partner Page
13491559
*/

0 commit comments

Comments
 (0)