Skip to content

Commit afd184e

Browse files
compwroncompwron
authored
Merge pull request #6097 from jonathanmeneses/testimonial-updates
Add text testimonials, addressing #4407
2 parents 14c0f7d + 6476c21 commit afd184e

File tree

2 files changed

+183
-170
lines changed

2 files changed

+183
-170
lines changed

‎app/views/static/index.html.erb‎

Lines changed: 182 additions & 170 deletions
Original file line numberDiff line numberDiff line change
@@ -1,217 +1,229 @@
11
<!doctype html>
22
<html class="no-js" lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>CASA Volunteer Tracking</title>
7-
8-
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
9-
<script src="https://cdn.tailwindcss.com"></script>
10-
<%= stylesheet_link_tag "shared/noscript" %>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CASA Volunteer Tracking</title>
8+
9+
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
10+
<script src="https://cdn.tailwindcss.com"></script>
11+
<%= stylesheet_link_tag "shared/noscript" %>
1112
<style>
12-
.app-images {
13-
height: 400px;
14-
}
13+
.app-images {
14+
height: 400px;
15+
}
1516

16-
.org_logo {
17-
height: 200px;
18-
}
17+
.org_logo {
18+
height: 200px;
19+
}
1920
</style>
20-
</head>
21+
</head>
2122

22-
<body>
23-
<noscript>
24-
<div class="noscript alert alert-danger">
25-
<h2 class="alert-heading">
26-
Please enable javascript
27-
</h2>
28-
<p>
29-
This app requires javascript to work
30-
</p>
31-
</div>
32-
</noscript>
33-
<header class="pt-2" style="background: #0949D7">
34-
<div class="container max-w-7xl mx-auto pt-5 px-5">
35-
<nav>
36-
<div class="flex justify-between items-center">
37-
<div>
38-
<a class="text-lg lg:text-3xl lg:text-4xl font-bold text-white" href="/">CasaVolunteerTracking.org</a>
39-
</div>
23+
<body>
24+
<noscript>
25+
<div class="noscript alert alert-danger">
26+
<h2 class="alert-heading">
27+
Please enable javascript
28+
</h2>
29+
<p>
30+
This app requires javascript to work
31+
</p>
32+
</div>
33+
</noscript>
34+
<header class="pt-2" style="background: #0949D7">
35+
<div class="container max-w-7xl mx-auto pt-5 px-5">
36+
<nav>
37+
<div class="flex justify-between items-center">
38+
<div>
39+
<a class="text-lg lg:text-3xl lg:text-4xl font-bold text-white" href="/">CasaVolunteerTracking.org</a>
40+
</div>
4041

41-
<div class="flex" id="myNavbar">
42-
<div class="flex text-white space-x-4 md:space-x-10 text-md lg:text-2xl items-center">
43-
<a class="hidden md:block" href="#about">About</a>
44-
<a class="hidden md:block" href="#testimonials">Testimonials</a>
45-
<a class="hidden md:block" href="#contact">Contact</a>
46-
<a href="<%= new_user_session_path %>">
47-
<button class="flex flex-row items-center w-full px-4 py-2 bg-green-800 hover:bg-green-700 rounded-2xl text-md">
48-
<span class="text-lg">Login</span>
49-
</button>
50-
</a>
51-
</div>
42+
<div class="flex" id="myNavbar">
43+
<div class="flex text-white space-x-4 md:space-x-10 text-md lg:text-2xl items-center">
44+
<a class="hidden md:block" href="#about">About</a>
45+
<a class="hidden md:block" href="#testimonials">Testimonials</a>
46+
<a class="hidden md:block" href="#contact">Contact</a>
47+
<a href="<%= new_user_session_path %>">
48+
<button
49+
class="flex flex-row items-center w-full px-4 py-2 bg-green-800 hover:bg-green-700 rounded-2xl text-md">
50+
<span class="text-lg">Login</span>
51+
</button>
52+
</a>
5253
</div>
5354
</div>
54-
</nav>
55+
</div>
56+
</nav>
57+
</div>
58+
59+
<div class="container max-w-7xl mx-auto text-white font-bold flex px-5" style='height:60vh; min-height: 500px'>
60+
<div class="flex flex-col justify-center items-center mx-auto lg:mx-0 text-center lg:text-left">
61+
<div class="text-4xl">
62+
<div>
63+
<h1>Casa Volunteer Tracking removes<br>the complexity of managing your<br> CASA and tracking your
64+
volunteers.</h1>
65+
<p class="text-lg font-normal mb-3 mt-2">Ready to make yourself more efficient?</p>
66+
</div>
67+
</div>
68+
<div class="hidden lg:block absolute right-52 w-1/4">
69+
<%= image_tag("hero-image.svg", alt: "" ) %>
70+
</div>
5571
</div>
72+
</div>
73+
</header>
5674

57-
<div class="container max-w-7xl mx-auto text-white font-bold flex px-5" style='height:60vh; min-height: 500px'>
58-
<div class="flex flex-col justify-center items-center mx-auto lg:mx-0 text-center lg:text-left">
59-
<div class="text-4xl">
60-
<div>
61-
<h1>Casa Volunteer Tracking removes<br>the complexity of managing your<br> CASA and tracking your volunteers.</h1>
62-
<p class="text-lg font-normal mb-3 mt-2">Ready to make yourself more efficient?</p>
63-
</div>
75+
<main>
76+
<div class="container max-w-7xl mx-auto pt-5" id="about">
77+
<div class="text-center mt-10">
78+
<h2 class="text-4xl text-gray-700">The Casa Volunteer Tracking app removes the <br> complexity from your day
79+
</h2>
80+
<p class="mt-1 text-gray-600">and lets you spend time helping those who need it.</p>
81+
<a href="mailto:casa@rubyforgood?Subject=CasaVolunteerTracking%20Interest"><button type="button"
82+
class="text-lg bg-green-800 text-white px-3 py-2 rounded-2xl mt-5">Get In Touch</button></a>
83+
</div>
84+
</div>
85+
86+
<div class="w-3/4 mx-auto py-24">
87+
<div class="flex flex-col md:flex-row justify-center">
88+
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
89+
<div class="pb-2">
90+
<%= image_tag("case-contact.svg", class: "app-images" , alt: "man reading a book to a girl" ) %>
6491
</div>
65-
<div class="hidden lg:block absolute right-52 w-1/4">
66-
<%= image_tag("hero-image.svg", alt: "") %>
92+
<div class="text-center">
93+
<h3 class="text-3xl">Case Contacts</h3>
94+
<p class="text-gray-600 mt-2">Volunteers can record case contacts and learning hours.</p>
6795
</div>
6896
</div>
69-
</div>
70-
</header>
71-
72-
<main>
73-
<div class="container max-w-7xl mx-auto pt-5" id="about">
74-
<div class="text-center mt-10">
75-
<h2 class="text-4xl text-gray-700">The Casa Volunteer Tracking app removes the <br> complexity from your day</h2>
76-
<p class="mt-1 text-gray-600">and lets you spend time helping those who need it.</p>
77-
<a href="mailto:casa@rubyforgood?Subject=CasaVolunteerTracking%20Interest"><button type="button" class="text-lg bg-green-800 text-white px-3 py-2 rounded-2xl mt-5">Get In Touch</button></a>
97+
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
98+
<div class="pb-2">
99+
<%= image_tag("court-report.svg", class: "app-images" , alt: "judge raising a gavel" ) %>
100+
</div>
101+
<div class="text-center">
102+
<h3 class="text-3xl">Court Reports</h3>
103+
<p class="text-gray-600 mt-2">Volunteers, supervisors, and admins can generate a court report for any case
104+
with all recorded case contacts pre-filled.</p>
105+
</div>
78106
</div>
79107
</div>
80108

81-
<div class="w-3/4 mx-auto py-24">
82-
<div class="flex flex-col md:flex-row justify-center">
83-
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
84-
<div class="pb-2">
85-
<%= image_tag("case-contact.svg", class: "app-images", alt: "man reading a book to a girl") %>
86-
</div>
87-
<div class="text-center">
88-
<h3 class="text-3xl">Case Contacts</h3>
89-
<p class="text-gray-600 mt-2">Volunteers can record case contacts and learning hours.</p>
90-
</div>
109+
<div class="flex flex-col md:flex-row justify-center">
110+
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
111+
<div class="pb-2">
112+
<%= image_tag("reimbursement.svg", class: "app-images" , alt: "car with two people" ) %>
91113
</div>
92-
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
93-
<div class="pb-2">
94-
<%= image_tag("court-report.svg", class: "app-images", alt: "judge raising a gavel") %>
95-
</div>
96-
<div class="text-center">
97-
<h3 class="text-3xl">Court Reports</h3>
98-
<p class="text-gray-600 mt-2">Volunteers, supervisors, and admins can generate a court report for any case with all recorded case contacts pre-filled.</p>
99-
</div>
114+
<div class="text-center">
115+
<h3 class="text-3xl">Reimbursements</h3>
116+
<p class="text-gray-600 mt-2">Volunteers can submit reimbursement requests and admins can generate reports.
117+
</p>
100118
</div>
101119
</div>
102120

103-
<div class="flex flex-col md:flex-row justify-center">
104-
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
105-
<div class="pb-2">
106-
<%= image_tag("reimbursement.svg", class: "app-images", alt: "car with two people") %>
107-
</div>
108-
<div class="text-center">
109-
<h3 class="text-3xl">Reimbursements</h3>
110-
<p class="text-gray-600 mt-2">Volunteers can submit reimbursement requests and admins can generate reports.</p>
111-
</div>
121+
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
122+
<div class="pb-2">
123+
<%= image_tag("add-case.svg", class: "app-images" , alt: "file folders and file cabinet" ) %>
112124
</div>
113-
114-
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
115-
<div class="pb-2">
116-
<%= image_tag("add-case.svg", class: "app-images", alt: "file folders and file cabinet") %>
117-
</div>
118-
<div class="text-center">
119-
<h3 class="text-3xl">Add Cases</h3>
120-
<p class="text-gray-600 mt-2">Supervisors and administrators can add cases and assign volunteers.</p>
121-
</div>
125+
<div class="text-center">
126+
<h3 class="text-3xl">Add Cases</h3>
127+
<p class="text-gray-600 mt-2">Supervisors and administrators can add cases and assign volunteers.</p>
122128
</div>
123129
</div>
130+
</div>
124131

125-
<div class="flex flex-col md:flex-row justify-center">
126-
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
127-
<div class="pb-2">
128-
<%= image_tag("spreadsheets.svg", class: "app-images", alt: "computer screen with graphs and charts") %>
129-
</div>
130-
<div class="text-center">
131-
<h3 class="text-3xl">Exportable Data</h3>
132-
<p class="text-gray-600 mt-2">All CASA data is easily exportable in CSV format.</p>
133-
</div>
132+
<div class="flex flex-col md:flex-row justify-center">
133+
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
134+
<div class="pb-2">
135+
<%= image_tag("spreadsheets.svg", class: "app-images" , alt: "computer screen with graphs and charts" ) %>
136+
</div>
137+
<div class="text-center">
138+
<h3 class="text-3xl">Exportable Data</h3>
139+
<p class="text-gray-600 mt-2">All CASA data is easily exportable in CSV format.</p>
134140
</div>
141+
</div>
135142

136-
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
137-
<div class="pb-2">
138-
<%= image_tag("communicate.svg", class: "app-images", alt: "woman holding a phone with a notification alert") %>
139-
</div>
140-
<div class="text-center">
141-
<h3 class="text-3xl">Communication</h3>
142-
<p class="text-gray-600 mt-2">Easily communicate with volunteers by email, SMS or both.</p>
143-
</div>
143+
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
144+
<div class="pb-2">
145+
<%= image_tag("communicate.svg", class: "app-images" ,
146+
alt: "woman holding a phone with a notification alert" ) %>
147+
</div>
148+
<div class="text-center">
149+
<h3 class="text-3xl">Communication</h3>
150+
<p class="text-gray-600 mt-2">Easily communicate with volunteers by email, SMS or both.</p>
144151
</div>
145152
</div>
146153
</div>
154+
</div>
147155

148-
<div class="py-5 px-0 bg-blue-600 text-white" id="testimonials">
149-
<div class="container max-w-7xl mx-auto flex flex-col md:flex-row py-5 justify-center items-center">
150-
<div class="w-1/2 flex justify-center">
151-
<%= image_tag("quote.svg", class: "quote-image", style: "width: 300px", alt: "Quote: No one is useless in this world who lightens the burdens of another - Charles Dickens") %>
152-
</div>
153-
<div class="pt-5 px-4 w-full sm:w-1/2">
154-
<h3 class="text-4xl">Testimonials</h3>
155-
<div class='mt-5'>
156-
<div class='space-y-12'>
157-
<div>
158-
<p>
159-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl nec aliquam aliquam, nunc nisl aliquam nisl, nec aliquam nisl nunc vel nunc. Sed euismod, nisl nec aliquam aliquam, nunc nisl aliquam nisl, nec aliquam nisl nunc vel nunc.
160-
Lorem.</p>
161-
<strong class='mt-2'> - Person, Some Casa</strong>
162-
</div>
163-
<div>
164-
<p class="text-testimonials">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl nec aliquam aliquam, nunc nisl aliquam nisl, nec aliquam nisl nunc vel nunc. Sed euismod, nisl nec aliquam aliquam, nunc nisl aliquam nisl, nec aliquam nisl nunc vel nunc.</p>
165-
<strong> - Person, Another Casa </strong>
166-
</div>
156+
<div class="py-5 px-0 bg-blue-600 text-white" id="testimonials">
157+
<div class="container max-w-7xl mx-auto flex flex-col md:flex-row py-5 justify-center items-center">
158+
<div class="w-1/2 flex justify-center">
159+
<%= image_tag("quote.svg", class: "quote-image" , style: "width: 300px" ,
160+
alt: "Quote: No one is useless in this world who lightens the burdens of another - Charles Dickens" ) %>
161+
</div>
162+
<div class="pt-5 px-4 w-full sm:w-1/2">
163+
<h3 class="text-4xl">Testimonials</h3>
164+
<div class='mt-5'>
165+
<div class='space-y-12'>
166+
<div>
167+
<p>The tracker has helped us streamline our processes, and we no longer have to worry about losing track
168+
of important documents.
169+
</p>
170+
<strong class='mt-2'> - Sarah B. | Program Manager</strong>
171+
</div>
172+
<div>
173+
<p class="text-testimonials">Thanks to the tracker, we can now make quicker decisions and effectively
174+
monitor our cases, resulting in a more pleasant experience for our volunteers.</p>
175+
<strong> - Nancy K. | Office Manager</strong>
167176
</div>
168177
</div>
169178
</div>
170179
</div>
171180
</div>
181+
</div>
172182

173-
<div class="w-3/4 mx-auto py-24" id="organizations">
174-
<div class="text-center">
175-
<h2 class="text-4xl"> CASA Organizations Powered by Our App </h2>
176-
</div>
177-
<div class="flex flex-col flex-wrap md:flex-row justify-center py-14">
178-
<% @casa_logos.each do |org| %>
179-
<div class="flex flex-col justify-center items-center w-full sm:w-1/3">
180-
<div class="py-8">
181-
<%= image_tag org.logo, class: "org_logo" %>
182-
</div>
183-
<%= org.display_name %>
183+
<div class="w-3/4 mx-auto py-24" id="organizations">
184+
<div class="text-center">
185+
<h2 class="text-4xl"> CASA Organizations Powered by Our App </h2>
186+
</div>
187+
<div class="flex flex-col flex-wrap md:flex-row justify-center py-14">
188+
<% @casa_logos.each do |org| %>
189+
<div class="flex flex-col justify-center items-center w-full sm:w-1/3">
190+
<div class="py-8">
191+
<%= image_tag org.logo, class: "org_logo" %>
184192
</div>
193+
<%= org.display_name %>
194+
</div>
185195
<% end %>
186-
</div>
187196
</div>
197+
</div>
188198

189-
<div class="py-5 px-0 bg-blue-600 text-white">
190-
<div class="container max-w-7xl mx-auto py-32 bg-blue-600 text-white" id="contact">
191-
<div class="text-center">
192-
<h2 class="text-4xl">Want to use the CASA Volunteer Tracking App?</h2>
193-
<br><br>
194-
<p>Have questions? Email us at <a class="text-green-400" href="mailto:[email protected]?Subject=CASA%20Interest" target="_top">[email protected]</a></p>
195-
</div>
199+
<div class="py-5 px-0 bg-blue-600 text-white">
200+
<div class="container max-w-7xl mx-auto py-32 bg-blue-600 text-white" id="contact">
201+
<div class="text-center">
202+
<h2 class="text-4xl">Want to use the CASA Volunteer Tracking App?</h2>
203+
<br><br>
204+
<p>Have questions? Email us at <a class="text-green-400"
205+
href="mailto:[email protected]?Subject=CASA%20Interest" target="_top">[email protected]</a></p>
196206
</div>
197207
</div>
198-
</main>
208+
</div>
209+
</main>
199210

200-
<footer class="bg-gray-200">
201-
<div class="container max-w-7xl mx-auto py-32 text-white">
202-
<div class="flex flex-col mx-auto text-center sm:text-left sm:flex-row space-y-10 sm:space-y-0">
203-
<div class="w-full sm:w-1/2 text-3xl text-gray-700">
204-
casavolunteertracking.org
205-
</div>
206-
<div class="w-full sm:w-1/2">
207-
<strong class="text-gray-700">The CASA Volunteer Tracking app was lovingly built by:</strong>
208-
<br>
209-
<a class="text-blue-800" href="http://rubyforgood.org/">Ruby for Good</a>
210-
<br><br>
211-
<a class="text-gray-700" href="https://storyset.com/data">Data illustrations by Storyset</a>
212-
</div>
211+
<footer class="bg-gray-200">
212+
<div class="container max-w-7xl mx-auto py-32 text-white">
213+
<div class="flex flex-col mx-auto text-center sm:text-left sm:flex-row space-y-10 sm:space-y-0">
214+
<div class="w-full sm:w-1/2 text-3xl text-gray-700">
215+
casavolunteertracking.org
216+
</div>
217+
<div class="w-full sm:w-1/2">
218+
<strong class="text-gray-700">The CASA Volunteer Tracking app was lovingly built by:</strong>
219+
<br>
220+
<a class="text-blue-800" href="http://rubyforgood.org/">Ruby for Good</a>
221+
<br><br>
222+
<a class="text-gray-700" href="https://storyset.com/data">Data illustrations by Storyset</a>
213223
</div>
214224
</div>
215-
</footer>
216-
</body>
225+
</div>
226+
</footer>
227+
</body>
228+
217229
</html>

0 commit comments

Comments
 (0)