Skip to content

Commit 02a01d2

Browse files
davidhammakerdavidhammaker
committed
WIP: Add Key Features and Our Process to solution page
1 parent e17e2c7 commit 02a01d2

11 files changed

Lines changed: 380 additions & 179 deletions

File tree

‎_includes/idea-to-reality.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<div id="idea-to-reality-box" class="row justify-content-between align-items-center">
2+
<div class="d-none d-md-flex col-md-1"></div>
3+
<div class="start-image-box order-1 col-12 col-md-5 text-center text-md-left">
4+
<img src="{{ "/assets/images/lego-stack.png" | relative_url }}" class="img-fluid" alt="A stack of bricks fitting nicely together">
5+
</div>
6+
<div class="content-box order-2 col-12 col-md-5">
7+
<p class="tagline">Our Process</p>
8+
<h2>From Idea to Reality</h2>
9+
<div class="process-accordion">
10+
<div id="process-accordion" class="accordion">
11+
<div class="accordion-item">
12+
<h2 class="accordion-header">
13+
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-one" aria-expanded="true" aria-controls="collapse-one">
14+
1 Initial Conversation
15+
</button>
16+
</h2>
17+
<div id="collapse-one" class="accordion-collapse collapse show" data-bs-parent="#process-accordion">
18+
<div class="accordion-body">
19+
We want to get to know you and your ministry context.
20+
</div>
21+
</div>
22+
</div>
23+
<div class="accordion-item">
24+
<h2 class="accordion-header">
25+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-two" aria-expanded="true" aria-controls="collapse-two">
26+
2 Clarify Requirements
27+
</button>
28+
</h2>
29+
<div id="collapse-two" class="accordion-collapse collapse" data-bs-parent="#process-accordion">
30+
<div class="accordion-body">
31+
Together with you, we hone in on project goals and what’s needed to get there.
32+
</div>
33+
</div>
34+
</div>
35+
<div class="accordion-item">
36+
<h2 class="accordion-header">
37+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-three" aria-expanded="true" aria-controls="collapse-three">
38+
3 Make Drafts
39+
</button>
40+
</h2>
41+
<div id="collapse-three" class="accordion-collapse collapse" data-bs-parent="#process-accordion">
42+
<div class="accordion-body">
43+
We produce designs of the app until they’re approved by you.
44+
</div>
45+
</div>
46+
</div>
47+
<div class="accordion-item">
48+
<h2 class="accordion-header">
49+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-four" aria-expanded="true" aria-controls="collapse-four">
50+
4 Build and Test
51+
</button>
52+
</h2>
53+
<div id="collapse-four" class="accordion-collapse collapse" data-bs-parent="#process-accordion">
54+
<div class="accordion-body">
55+
Our volunteer technologists start coding. We also test for any problems.
56+
</div>
57+
</div>
58+
</div>
59+
<div class="accordion-item">
60+
<h2 class="accordion-header">
61+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-five" aria-expanded="true" aria-controls="collapse-five">
62+
5 Launch
63+
</button>
64+
</h2>
65+
<div id="collapse-five" class="accordion-collapse collapse" data-bs-parent="#process-accordion">
66+
<div class="accordion-body">
67+
We celebrate, give thanks, and pray as the app is made available to the public.
68+
</div>
69+
</div>
70+
</div>
71+
<div class="accordion-item">
72+
<h2 class="accordion-header">
73+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-six" aria-expanded="true" aria-controls="collapse-six">
74+
6 Refine
75+
</button>
76+
</h2>
77+
<div id="collapse-six" class="accordion-collapse collapse" data-bs-parent="#process-accordion">
78+
<div class="accordion-body">
79+
Make adjustments based on user feedback and project goals.
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
<div class="d-none d-md-flex col-md-1"></div>
87+
</div>

‎_includes/nav.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
{% include nav-about.html class="dropdown-menu" %}
3838
</li>
3939
<li class="nav-item">
40-
<a class="nav-link" href="#">Our Solution</a>
40+
<a class="nav-link" href="/our-solution/">Our Solution</a>
4141
</li>
4242
<li class="nav-item">
4343
<a class="nav-link" href="/partner/">Partner</a>

‎_pages/our_solution.html‎

Lines changed: 165 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ <h2 class="text-center">A Common Need</h2>
117117
>
118118
<div class="col col-12 col-md-10 justify-content-center">
119119
<div class="row p-4">
120-
<div class="col col-12 col-md-5 align-self-center justify-self-center mb-4">
120+
<div class="col col-12 col-md-5 align-self-center justify-self-center">
121121
<div style="width: 100%">
122122
<div class="row flex-md-row justify-content-center">
123123
<div class="audio-bg">
@@ -132,43 +132,173 @@ <h2 class="text-center">A Common Need</h2>
132132
</div>
133133
</div>
134134
<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>
135+
<div class="d-flex col col-12 col-md-5">
136+
<div class="align-self-center">
137+
<p class="tagline mb-2">One For All</p>
138+
<h1 class="mt-1">Orality Platform</h1>
139+
<p>
140+
Our solution began to take shape as a concept in 2019 and 2020 as
141+
we were researching digital distribution needs and building
142+
prototype apps. We didn’t find existing solutions, mobile apps or
143+
otherwise, to be adequate (though some
144+
<a
145+
href="https://software.sil.org/scriptureappbuilder/"
146+
target="_blank"
147+
rel="noopener noreferrer"
148+
>fantastic solutions<img style="height: 15px;" src="{{
149+
"/assets/images/icons/arrows/in-line-arrow-external.svg" |
150+
relative_url }}" class="img-in-line"></a
151+
>
152+
already exist for
153+
<a
154+
href="https://software.sil.org/readingappbuilder/"
155+
target="_blank"
156+
rel="noopener noreferrer"
157+
>text-heavy content<img style="height: 15px;" src="{{
158+
"/assets/images/icons/arrows/in-line-arrow-external.svg" |
159+
relative_url }}" class="img-in-line"></a
160+
>). So in 2021 we began a more concentrated effort to build
161+
Orality Platform: a shared codebase from which multiple
162+
language-specific apps can be spun up.
163+
</p>
164+
<p>
165+
It's like using the same recipe to make different dishes. The
166+
shared codebase is our recipe, and each app is a unique dish we
167+
create from it.
168+
</p>
169+
</div>
168170
</div>
169171
</div>
170172
</div>
171173
</div>
172174

173-
{%- include testimonials.html -%}
175+
<div id="content-box-5">
176+
<div class="row">
177+
<div class="d-flex col col-12 justify-content-center">
178+
<h2>Key Features</h2>
179+
</div>
180+
</div>
181+
<div class="row feature-row">
182+
<div class="col col-12 col-md-4 justify-content-center">
183+
<div class="row">
184+
<div class="col col-12 p-4">
185+
<img src="{{ "/assets/images/icons/phone.svg" | relative_url }}">
186+
</div>
187+
</div>
188+
<div class="row">
189+
<div class="col col-12 feature-box">
190+
<p class="feature-label">Clean Interface</p>
191+
</div>
192+
</div>
193+
<div class="row">
194+
<div class="col col-12 feature-box">
195+
<p class="feature-description">
196+
Our interface is easy to use and navigate.
197+
</p>
198+
</div>
199+
</div>
200+
</div>
201+
<div class="col col-12 col-md-4 justify-content-center">
202+
<div class="row">
203+
<div class="col col-12 p-4">
204+
<img src="{{ "/assets/images/icons/volume.svg" | relative_url }}">
205+
</div>
206+
</div>
207+
<div class="row">
208+
<div class="col col-12 feature-box">
209+
<p class="feature-label">Audio-Based Navigation</p>
210+
</div>
211+
</div>
212+
<div class="row">
213+
<div class="col col-12 feature-box">
214+
<p class="feature-description">
215+
When navigating content, users can press a button to hear the
216+
title of each story or chapter.
217+
</p>
218+
</div>
219+
</div>
220+
</div>
221+
<div class="col col-12 col-md-4 justify-content-center">
222+
<div class="row">
223+
<div class="col col-12 p-4">
224+
<img src="{{ "/assets/images/icons/blue-ear.svg" | relative_url }}">
225+
</div>
226+
</div>
227+
<div class="row">
228+
<div class="col col-12 feature-box">
229+
<p class="feature-label">Listen Anywhere</p>
230+
</div>
231+
</div>
232+
<div class="row">
233+
<div class="col col-12 feature-box">
234+
<p class="feature-description">
235+
Users can download and listen to audio files offline, wherever
236+
they are.
237+
</p>
238+
</div>
239+
</div>
240+
</div>
241+
</div>
242+
<div class="row feature-row">
243+
<div class="col col-12 col-md-4 justify-content-center">
244+
<div class="row">
245+
<div class="col col-12 p-4">
246+
<img src="{{ "/assets/images/icons/globe.svg" | relative_url }}">
247+
</div>
248+
</div>
249+
<div class="row">
250+
<div class="col col-12 feature-box">
251+
<p class="feature-label">Multilingual Support</p>
252+
</div>
253+
</div>
254+
<div class="row">
255+
<div class="col col-12 feature-box">
256+
<p class="feature-description">
257+
Users can switch languages for audio and/or text.
258+
</p>
259+
</div>
260+
</div>
261+
</div>
262+
<div class="col col-12 col-md-4 justify-content-center">
263+
<div class="row">
264+
<div class="col col-12 p-4">
265+
<img src="{{ "/assets/images/icons/image.svg" | relative_url }}">
266+
</div>
267+
</div>
268+
<div class="row">
269+
<div class="col col-12 feature-box">
270+
<p class="feature-label">Audio, Text, and Image</p>
271+
</div>
272+
</div>
273+
<div class="row">
274+
<div class="col col-12 feature-box">
275+
<p class="feature-description">
276+
OP supports any combination of audio, text, and image.
277+
</p>
278+
</div>
279+
</div>
280+
</div>
281+
<div class="col col-12 col-md-4 justify-content-center">
282+
<div class="row">
283+
<div class="col col-12 p-4">
284+
<img src="{{ "/assets/images/icons/piece.svg" | relative_url }}">
285+
</div>
286+
</div>
287+
<div class="row">
288+
<div class="col col-12 feature-box">
289+
<p class="feature-label">Customizable</p>
290+
</div>
291+
</div>
292+
<div class="row">
293+
<div class="col col-12 feature-box">
294+
<p class="feature-description">
295+
Teams can choose which features they want in order to suit the
296+
needs of their language group.
297+
</p>
298+
</div>
299+
</div>
300+
</div>
301+
</div>
302+
</div>
303+
{%- include idea-to-reality.html -%} {%- include testimonials.html -%}
174304
</div>

0 commit comments

Comments
 (0)