507 org root part4 apply (#554)

* added line in gitignore to ignore bundle folder in vendor folder. removed ui code at bottom of registration/edit page to delete account. * added the bg-white css selector to the sections of org/root per figma file * modified Figma link in README to point to update * updated the figma link in README * updated the how to apply section per v2. Adopt and hero were updated to include images per v2. --------- Co-authored-by: Mason Roberts <[email protected]>
rubyforgood · Mar 17, 2024 · 82033e1 · 82033e1
1 parent 10f1182
commit 82033e1
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 7 deletions.
diff --git a/app/assets/images/paw-account.svg b/app/assets/images/paw-account.svg
diff --git a/app/assets/images/paw-browse.svg b/app/assets/images/paw-browse.svg
diff --git a/app/assets/images/paw-click.svg b/app/assets/images/paw-click.svg
diff --git a/app/assets/images/paw-profile.svg b/app/assets/images/paw-profile.svg
diff --git a/app/views/organizations/home/index.html.erb b/app/views/organizations/home/index.html.erb
@@ -1,4 +1,3 @@
-<!-- HERO  -->
 <section id="hero">
   <div class="bg-image" style="background-image: url('https://s3-alpha-sig.figma.com/img/63f3/6682/f3d01915a2694e2800941735ae233aea?Expires=1710115200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=NeEXnwv7fYMa0QoOK4BbY3E5pEm8wzMFUqP5EsyKHHwYhvf-beJe-IpoY3pjc0ZAQIjPRlHvNY6sLzO0tvptUfSkoYZ91tjhYoyw2YuJ18Qf2P2k8NM86NboAv6Js3Vl6Iu-2g9J7vkz~xoue6zWmaiYpvV0nAcQG-PtEWTn5IMuU60jvVhEUy3~J2W6FvC8x9T4VSkzDKj~hplKzJSQWhaW~2ou9GMdgmx0tJMffsVCG7vHmiYf1WGFcs1CRPHEBf4UYihBadnEJfDccIQ-bIL1qJU9Uv3eklX63z6PmVxyBlAZnNU0iSGi0s8LIqtTTbCl~4IAhVe~1qC4IBLCcA__'); background-position: center; background-size: cover;">
     <div class="mask py-lg-16 py-5" style="background-color: rgba(255, 255, 255, 0.8);">
@@ -24,17 +23,18 @@
   </div>
 </section>
 
-<!-- ADOPTION -->
+
+<!--//? ADOPTION -->
 <section class="pt-5 pb-5" id="adopt">
   <div class="container mb-md-5 mt-md-5">
 
-    <!--section heading-->
+    <!--//? section heading -->
     <div class="text-center mb-5">
       <h2 class="section-heading text-uppercase text-xl">
         Adopt
       </h2>
     </div>
-    <!-- bootstrap cards -->
+    <!--//? bootstrap cards -->
     <div class="d-flex justify-content-around align-items-center flex-wrap">
       <div class="card rounded-bottom-0 mb-2" style="width: 14rem;">
         <%= image_tag('dog.jpeg', width: '500px', alt: "Adorable Dog", class: "card-img-top rounded-top-1") %>
@@ -49,26 +49,86 @@
         </div>
       </div>
       <div class="card rounded-bottom-0 mb-2" style="width: 14rem;">
-        <%= image_tag('spider.jpeg', width: '500px', alt: "Adorable Dog", class: "card-img-top rounded-top-1") %>
+        <%= image_tag('spider.jpeg', width: '500px', alt: "Adorable Spider", class: "card-img-top rounded-top-1") %>
         <div class="card-body">
           <p class="card-text text-black ">Adoptable Spiders <svg xmlns="http://www.w3.org/2000/svg" height="14" width="12.25" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#5E3FCB" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg></p>
         </div>
       </div>
       <div class="card rounded-bottom-0 mb-2" style="width: 14rem;">
-        <%= image_tag('red-panda.jpeg', width: '500px', alt: "Adorable Dog", class: "card-img-top rounded-top-1") %>
+        <%= image_tag('red-panda.jpeg', width: '500px', alt: "Adorable Red Panda", class: "card-img-top rounded-top-1") %>
         <div class="card-body">
           <p class="card-text text-black ">Adoptable Red Pandas <svg xmlns="http://www.w3.org/2000/svg" height="14" width="12.25" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#5E3FCB" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg></p>
         </div>
       </div>
     </div>
-    <!-- Adopt all link -->
+    <!--//? Adopt all link -->
     <div class="d-flex justify-content-end align-items-center mt-3">
       <%= link_to "Browse All Pets", adoptable_pets_path, class: "text-primary fs-3 me-1" %>
       <svg xmlns="http://www.w3.org/2000/svg" height="14" width="12.25" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#5E3FCB" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
     </div>
   </div>
 </section>
 
+<!--//? how to apply section ?//-->
+<section id="how-to-apply">
+  <div class="container">
+
+    <!--//? section header -->
+    <div class="d-flex justify-content-start mb-2">
+      <h2 class="section-heading text-uppercase text-xl">
+        How to apply for adoption
+      </h2>
+    </div>
+
+    <!--//? cards section - info (not bootstrap card)  -->
+    <div class="d-flex flex-wrap justify-content-around align-items-center px-4">
+
+      <div class="d-flex flex-column justify-content-center align-items-center">
+        <div class="mb-3">
+          <%= image_tag('paw-account.svg', width: '150', alt: "Create and account") %>
+        </div>
+        <div>
+          <p class="text-black">
+            1. Create Account
+          </p>
+        </div>
+      </div>
+      <div class="d-flex flex-column justify-content-center align-items-center">
+        <div class="mb-3">
+          <%= image_tag('paw-profile.svg', width: '150', alt: "Complete the profile") %>
+        </div>
+        <div>
+          <p class="text-black">
+            2. Complete Profile
+          </p>
+        </div>
+      </div>
+      <div class="d-flex flex-column justify-content-center align-items-center">
+        <div class="mb-3">
+          <%= image_tag('paw-browse.svg', width: '150', alt: "Browse the pets") %>
+        </div>
+        <div>
+          <p class="text-black">
+            3. Browse Pets
+          </p>
+        </div>
+      </div>
+      <div class="d-flex flex-column justify-content-center align-items-center">
+        <div class="mb-3">
+          <%= image_tag('paw-click.svg', width: '150', alt: "Click apply") %>
+        </div>
+        <div>
+          <p class="text-black">
+            4. Click Apply
+          </p>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</section>
+
 
 <!-- ABOUT US-->
 <section class="bg-light pt-5 pb-5" id="about_us">