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

Add text testimonials, addressing #4407 #6097

Merged
merged 2 commits into from
Dec 5, 2024
Merged

Add text testimonials, addressing #4407 #6097

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e30299c
Add text testimonials, addressing #4407
jonathanmeneses Nov 10, 2024
6476c21
update linting
jonathanmeneses Nov 10, 2024
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
352 changes: 182 additions & 170 deletions app/views/static/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,217 +1,229 @@
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CASA Volunteer Tracking</title>

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<script src="https://cdn.tailwindcss.com"></script>
<%= stylesheet_link_tag "shared/noscript" %>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CASA Volunteer Tracking</title>

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<script src="https://cdn.tailwindcss.com"></script>
<%= stylesheet_link_tag "shared/noscript" %>
<style>
.app-images {
height: 400px;
}
.app-images {
height: 400px;
}

.org_logo {
height: 200px;
}
.org_logo {
height: 200px;
}
</style>
</head>
</head>

<body>
<noscript>
<div class="noscript alert alert-danger">
<h2 class="alert-heading">
Please enable javascript
</h2>
<p>
This app requires javascript to work
</p>
</div>
</noscript>
<header class="pt-2" style="background: #0949D7">
<div class="container max-w-7xl mx-auto pt-5 px-5">
<nav>
<div class="flex justify-between items-center">
<div>
<a class="text-lg lg:text-3xl lg:text-4xl font-bold text-white" href="/">CasaVolunteerTracking.org</a>
</div>
<body>
<noscript>
<div class="noscript alert alert-danger">
<h2 class="alert-heading">
Please enable javascript
</h2>
<p>
This app requires javascript to work
</p>
</div>
</noscript>
<header class="pt-2" style="background: #0949D7">
<div class="container max-w-7xl mx-auto pt-5 px-5">
<nav>
<div class="flex justify-between items-center">
<div>
<a class="text-lg lg:text-3xl lg:text-4xl font-bold text-white" href="/">CasaVolunteerTracking.org</a>
</div>

<div class="flex" id="myNavbar">
<div class="flex text-white space-x-4 md:space-x-10 text-md lg:text-2xl items-center">
<a class="hidden md:block" href="#about">About</a>
<a class="hidden md:block" href="#testimonials">Testimonials</a>
<a class="hidden md:block" href="#contact">Contact</a>
<a href="<%= new_user_session_path %>">
<button class="flex flex-row items-center w-full px-4 py-2 bg-green-800 hover:bg-green-700 rounded-2xl text-md">
<span class="text-lg">Login</span>
</button>
</a>
</div>
<div class="flex" id="myNavbar">
<div class="flex text-white space-x-4 md:space-x-10 text-md lg:text-2xl items-center">
<a class="hidden md:block" href="#about">About</a>
<a class="hidden md:block" href="#testimonials">Testimonials</a>
<a class="hidden md:block" href="#contact">Contact</a>
<a href="<%= new_user_session_path %>">
<button
class="flex flex-row items-center w-full px-4 py-2 bg-green-800 hover:bg-green-700 rounded-2xl text-md">
<span class="text-lg">Login</span>
</button>
</a>
</div>
</div>
</nav>
</div>
</nav>
</div>

<div class="container max-w-7xl mx-auto text-white font-bold flex px-5" style='height:60vh; min-height: 500px'>
<div class="flex flex-col justify-center items-center mx-auto lg:mx-0 text-center lg:text-left">
<div class="text-4xl">
<div>
<h1>Casa Volunteer Tracking removes<br>the complexity of managing your<br> CASA and tracking your
volunteers.</h1>
<p class="text-lg font-normal mb-3 mt-2">Ready to make yourself more efficient?</p>
</div>
</div>
<div class="hidden lg:block absolute right-52 w-1/4">
<%= image_tag("hero-image.svg", alt: "" ) %>
</div>
</div>
</div>
</header>

<div class="container max-w-7xl mx-auto text-white font-bold flex px-5" style='height:60vh; min-height: 500px'>
<div class="flex flex-col justify-center items-center mx-auto lg:mx-0 text-center lg:text-left">
<div class="text-4xl">
<div>
<h1>Casa Volunteer Tracking removes<br>the complexity of managing your<br> CASA and tracking your volunteers.</h1>
<p class="text-lg font-normal mb-3 mt-2">Ready to make yourself more efficient?</p>
</div>
<main>
<div class="container max-w-7xl mx-auto pt-5" id="about">
<div class="text-center mt-10">
<h2 class="text-4xl text-gray-700">The Casa Volunteer Tracking app removes the <br> complexity from your day
</h2>
<p class="mt-1 text-gray-600">and lets you spend time helping those who need it.</p>
<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>
</div>
</div>

<div class="w-3/4 mx-auto py-24">
<div class="flex flex-col md:flex-row justify-center">
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
<div class="pb-2">
<%= image_tag("case-contact.svg", class: "app-images" , alt: "man reading a book to a girl" ) %>
</div>
<div class="hidden lg:block absolute right-52 w-1/4">
<%= image_tag("hero-image.svg", alt: "") %>
<div class="text-center">
<h3 class="text-3xl">Case Contacts</h3>
<p class="text-gray-600 mt-2">Volunteers can record case contacts and learning hours.</p>
</div>
</div>
</div>
</header>

<main>
<div class="container max-w-7xl mx-auto pt-5" id="about">
<div class="text-center mt-10">
<h2 class="text-4xl text-gray-700">The Casa Volunteer Tracking app removes the <br> complexity from your day</h2>
<p class="mt-1 text-gray-600">and lets you spend time helping those who need it.</p>
<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>
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
<div class="pb-2">
<%= image_tag("court-report.svg", class: "app-images" , alt: "judge raising a gavel" ) %>
</div>
<div class="text-center">
<h3 class="text-3xl">Court Reports</h3>
<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>
</div>
</div>
</div>

<div class="w-3/4 mx-auto py-24">
<div class="flex flex-col md:flex-row justify-center">
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
<div class="pb-2">
<%= image_tag("case-contact.svg", class: "app-images", alt: "man reading a book to a girl") %>
</div>
<div class="text-center">
<h3 class="text-3xl">Case Contacts</h3>
<p class="text-gray-600 mt-2">Volunteers can record case contacts and learning hours.</p>
</div>
<div class="flex flex-col md:flex-row justify-center">
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
<div class="pb-2">
<%= image_tag("reimbursement.svg", class: "app-images" , alt: "car with two people" ) %>
</div>
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
<div class="pb-2">
<%= image_tag("court-report.svg", class: "app-images", alt: "judge raising a gavel") %>
</div>
<div class="text-center">
<h3 class="text-3xl">Court Reports</h3>
<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>
</div>
<div class="text-center">
<h3 class="text-3xl">Reimbursements</h3>
<p class="text-gray-600 mt-2">Volunteers can submit reimbursement requests and admins can generate reports.
</p>
</div>
</div>

<div class="flex flex-col md:flex-row justify-center">
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
<div class="pb-2">
<%= image_tag("reimbursement.svg", class: "app-images", alt: "car with two people") %>
</div>
<div class="text-center">
<h3 class="text-3xl">Reimbursements</h3>
<p class="text-gray-600 mt-2">Volunteers can submit reimbursement requests and admins can generate reports.</p>
</div>
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
<div class="pb-2">
<%= image_tag("add-case.svg", class: "app-images" , alt: "file folders and file cabinet" ) %>
</div>

<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
<div class="pb-2">
<%= image_tag("add-case.svg", class: "app-images", alt: "file folders and file cabinet") %>
</div>
<div class="text-center">
<h3 class="text-3xl">Add Cases</h3>
<p class="text-gray-600 mt-2">Supervisors and administrators can add cases and assign volunteers.</p>
</div>
<div class="text-center">
<h3 class="text-3xl">Add Cases</h3>
<p class="text-gray-600 mt-2">Supervisors and administrators can add cases and assign volunteers.</p>
</div>
</div>
</div>

<div class="flex flex-col md:flex-row justify-center">
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
<div class="pb-2">
<%= image_tag("spreadsheets.svg", class: "app-images", alt: "computer screen with graphs and charts") %>
</div>
<div class="text-center">
<h3 class="text-3xl">Exportable Data</h3>
<p class="text-gray-600 mt-2">All CASA data is easily exportable in CSV format.</p>
</div>
<div class="flex flex-col md:flex-row justify-center">
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
<div class="pb-2">
<%= image_tag("spreadsheets.svg", class: "app-images" , alt: "computer screen with graphs and charts" ) %>
</div>
<div class="text-center">
<h3 class="text-3xl">Exportable Data</h3>
<p class="text-gray-600 mt-2">All CASA data is easily exportable in CSV format.</p>
</div>
</div>

<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
<div class="pb-2">
<%= image_tag("communicate.svg", class: "app-images", alt: "woman holding a phone with a notification alert") %>
</div>
<div class="text-center">
<h3 class="text-3xl">Communication</h3>
<p class="text-gray-600 mt-2">Easily communicate with volunteers by email, SMS or both.</p>
</div>
<div class="flex flex-col justify-center items-center w-full sm:w-1/2">
<div class="pb-2">
<%= image_tag("communicate.svg", class: "app-images" ,
alt: "woman holding a phone with a notification alert" ) %>
</div>
<div class="text-center">
<h3 class="text-3xl">Communication</h3>
<p class="text-gray-600 mt-2">Easily communicate with volunteers by email, SMS or both.</p>
</div>
</div>
</div>
</div>

<div class="py-5 px-0 bg-blue-600 text-white" id="testimonials">
<div class="container max-w-7xl mx-auto flex flex-col md:flex-row py-5 justify-center items-center">
<div class="w-1/2 flex justify-center">
<%= 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") %>
</div>
<div class="pt-5 px-4 w-full sm:w-1/2">
<h3 class="text-4xl">Testimonials</h3>
<div class='mt-5'>
<div class='space-y-12'>
<div>
<p>
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.
Lorem.</p>
<strong class='mt-2'> - Person, Some Casa</strong>
</div>
<div>
<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>
<strong> - Person, Another Casa </strong>
</div>
<div class="py-5 px-0 bg-blue-600 text-white" id="testimonials">
<div class="container max-w-7xl mx-auto flex flex-col md:flex-row py-5 justify-center items-center">
<div class="w-1/2 flex justify-center">
<%= 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" ) %>
</div>
<div class="pt-5 px-4 w-full sm:w-1/2">
<h3 class="text-4xl">Testimonials</h3>
<div class='mt-5'>
<div class='space-y-12'>
<div>
<p>The tracker has helped us streamline our processes, and we no longer have to worry about losing track
of important documents.
</p>
<strong class='mt-2'> - Sarah B. | Program Manager</strong>
</div>
<div>
<p class="text-testimonials">Thanks to the tracker, we can now make quicker decisions and effectively
monitor our cases, resulting in a more pleasant experience for our volunteers.</p>
<strong> - Nancy K. | Office Manager</strong>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="w-3/4 mx-auto py-24" id="organizations">
<div class="text-center">
<h2 class="text-4xl"> CASA Organizations Powered by Our App </h2>
</div>
<div class="flex flex-col flex-wrap md:flex-row justify-center py-14">
<% @casa_logos.each do |org| %>
<div class="flex flex-col justify-center items-center w-full sm:w-1/3">
<div class="py-8">
<%= image_tag org.logo, class: "org_logo" %>
</div>
<%= org.display_name %>
<div class="w-3/4 mx-auto py-24" id="organizations">
<div class="text-center">
<h2 class="text-4xl"> CASA Organizations Powered by Our App </h2>
</div>
<div class="flex flex-col flex-wrap md:flex-row justify-center py-14">
<% @casa_logos.each do |org| %>
<div class="flex flex-col justify-center items-center w-full sm:w-1/3">
<div class="py-8">
<%= image_tag org.logo, class: "org_logo" %>
</div>
<%= org.display_name %>
</div>
<% end %>
</div>
</div>
</div>

<div class="py-5 px-0 bg-blue-600 text-white">
<div class="container max-w-7xl mx-auto py-32 bg-blue-600 text-white" id="contact">
<div class="text-center">
<h2 class="text-4xl">Want to use the CASA Volunteer Tracking App?</h2>
<br><br>
<p>Have questions? Email us at <a class="text-green-400" href="mailto:[email protected]?Subject=CASA%20Interest" target="_top">[email protected]</a></p>
</div>
<div class="py-5 px-0 bg-blue-600 text-white">
<div class="container max-w-7xl mx-auto py-32 bg-blue-600 text-white" id="contact">
<div class="text-center">
<h2 class="text-4xl">Want to use the CASA Volunteer Tracking App?</h2>
<br><br>
<p>Have questions? Email us at <a class="text-green-400"
href="mailto:[email protected]?Subject=CASA%20Interest" target="_top">[email protected]</a></p>
</div>
</div>
</main>
</div>
</main>

<footer class="bg-gray-200">
<div class="container max-w-7xl mx-auto py-32 text-white">
<div class="flex flex-col mx-auto text-center sm:text-left sm:flex-row space-y-10 sm:space-y-0">
<div class="w-full sm:w-1/2 text-3xl text-gray-700">
casavolunteertracking.org
</div>
<div class="w-full sm:w-1/2">
<strong class="text-gray-700">The CASA Volunteer Tracking app was lovingly built by:</strong>
<br>
<a class="text-blue-800" href="http://rubyforgood.org/">Ruby for Good</a>
<br><br>
<a class="text-gray-700" href="https://storyset.com/data">Data illustrations by Storyset</a>
</div>
<footer class="bg-gray-200">
<div class="container max-w-7xl mx-auto py-32 text-white">
<div class="flex flex-col mx-auto text-center sm:text-left sm:flex-row space-y-10 sm:space-y-0">
<div class="w-full sm:w-1/2 text-3xl text-gray-700">
casavolunteertracking.org
</div>
<div class="w-full sm:w-1/2">
<strong class="text-gray-700">The CASA Volunteer Tracking app was lovingly built by:</strong>
<br>
<a class="text-blue-800" href="http://rubyforgood.org/">Ruby for Good</a>
<br><br>
<a class="text-gray-700" href="https://storyset.com/data">Data illustrations by Storyset</a>
</div>
</div>
</footer>
</body>
</div>
</footer>
</body>

</html>
Loading
Loading