Skip to content

Commit

Permalink
add reviews section with basic styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisgeek07
chrisgeek07 committed Oct 28, 2023
1 parent f969864 commit 23459d9
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 0 deletions.
1 change: 1 addition & 0 deletions app/assets/stylesheets/components/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@
@import "navbar";
@import "particles";
@import "footer";
@import "reviews";
11 changes: 11 additions & 0 deletions app/assets/stylesheets/components/_reviews.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.carousel-indicators {
border-radius: 80%;
width: 10px;
height: 10px;
}

.gradient-custom {
.card {
border-radius: 10px !important;
}
}
2 changes: 2 additions & 0 deletions app/views/pages/home.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,5 +77,7 @@
<p>Access essential resources, guides, and links to empower yourself and your community in the face of natural disasters. Stay informed, prepared, and resilient with our carefully curated collection.</p>
<%= link_to "Start Exploring", resources_path, class: "btn main-cta-color" %>
</section>
<%= render "shared/reviews" %>
</main>

88 changes: 88 additions & 0 deletions app/views/shared/_reviews.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<section class="gradient-custom">
<div class="my-5 py-5">
<div class="row d-flex justify-content-center">
<div class="col-md-12">
<div class="card rounded-10">
<div class="card-body px-4 py-5 rounded">
<!-- Carousel wrapper -->
<div id="carouselExampleControls" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row d-flex justify-content-center">
<div class="col-lg-10 col-xl-8">
<div class="row">
<div class="col-lg-4 d-flex justify-content-center">
<img src="https://randomuser.me/api/portraits/women/52.jpg"
class="rounded-circle shadow-1 mb-4 mb-lg-0" alt="woman avatar" width="150"
height="150" />
</div>
<div
class="col-9 col-md-9 col-lg-7 col-xl-8 text-center text-lg-start text-black mx-auto mx-lg-0">
<h4 class="mb-4">Karen, Concerned Parent</h4>
<p class="mb-0 pb-3">
Being a parent, my family's safety is my top priority. This website has been an invaluable resource. Last year, when a severe storm was approaching our area, the real-time alerts provided by the predictive AI gave us crucial time to prepare. We ensured our kids were safe and had all the necessary supplies. I'm grateful for the peace of mind it offers, and I highly recommend it to all parents and families.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="row d-flex justify-content-center">
<div class="col-lg-10 col-xl-8">
<div class="row">
<div class="col-lg-4 d-flex justify-content-center">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
class="rounded-circle shadow-1 mb-4 mb-lg-0" alt="woman avatar" width="150"
height="150" />
</div>
<div
class="col-9 col-md-9 col-lg-7 col-xl-8 text-center text-lg-start text-black mx-auto mx-lg-0">
<h4 class="mb-4">Maria, Small Business Owner</h4>
<p class="mb-0 pb-3">
As a small business owner, any disruption can be a big challenge. This website has been a game-changer for me. It helped me understand the risks my business faces and develop a robust disaster recovery plan. When a flash flood hit our area, I was able to act swiftly, minimizing losses. The predictive algorithm is a lifeline for my business, and I'm thankful for the valuable insights and early warnings it provides.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="row d-flex justify-content-center">
<div class="col-lg-10 col-xl-8">
<div class="row">
<div class="col-lg-4 d-flex justify-content-center">
<img src="https://randomuser.me/api/portraits/men/21.jpg"
class="rounded-circle shadow-1 mb-4 mb-lg-0" alt="woman avatar" width="150"
height="150" />
</div>
<div
class="col-9 col-md-9 col-lg-7 col-xl-8 text-center text-lg-start text-black mx-auto mx-lg-0">
<h4 class="mb-4">John, Disaster Preparedness Enthusiast</h4>
<p class="mb-0 pb-3">
As someone passionate about disaster preparedness, this website is a goldmine of information. The resources section is particularly impressive. I've found comprehensive guides, government agency links, and the latest research that have enriched my knowledge. The real-time alerts also give me the advantage of staying ahead of potential disasters. It's an indispensable tool for anyone serious about disaster management.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Carousel wrapper -->
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

0 comments on commit 23459d9

Please sign in to comment.