Org Root: add copy to translation file

* Add refactor: added in lines 96-103 within config/locales/en to and assigned them the string values that were originally in app/views/organizations/home/index which have been removed and now reference them within the en yml file.

* Add refactor: updated line 10 to use the newly added in value within the en yml file. Restructured the en yml file to have the new section home and subsection index which now contains the string values for the app/views/organizations/home/index file and removed their old values from the general section for the en yml file. Renamed the step_1-4 keys to something more appropriate. Added in an ordered list to the index file to allow for ordered numbering.

* Add refactor: removed the p tags/elements in app/views/organizations/home/index file for the cards section text as it was extraneous and unneeded. Also added in the style attribute for the ol on line 82 to actually center the text in question with consideration of the li elements' numbered listings to the left of each text.

app/views/organizations/home/index.html.erb

@@ -7,7 +7,7 @@
             <h1 class="display-2 fw-bold mb-1 text-primary "><%= Current.organization.name %></h1>
           </div>
           <div class="d-flex justify-content-center">
-            <p class="lead mb-4 text-black"><%= Current.organization.custom_page&.hero || "Where every paw finds a home" %></p>
+            <p class="lead mb-4 text-black"><%= Current.organization.custom_page&.hero || t('.every_paw') %></p>
           </div>
           <div class="d-flex justify-content-center">
             <% if user_signed_in? %>
@@ -37,7 +37,7 @@
     <!--//? section heading -->
     <div class="text-center mb-5">
       <h2 class="section-heading text-uppercase text-xl">
-        Adopt
+        <%= t('.adopt')%>
       </h2>
     </div>
     <!--//? bootstrap cards -->
@@ -50,7 +50,7 @@
               <div class="card-img-overlay p-0"></div>
               <div class="card-footer">
                 <p class="card-text text-black">
-                  Adopt <%= pet.name %>
+                  <%= t('.adopt')%> <%= pet.name %>
                 </p>
                 <svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" 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.-->
@@ -72,54 +72,56 @@
     <!--//? section header -->
     <div class="d-flex justify-content-start mb-2">
       <h2 class="section-heading text-uppercase text-xl">
-        How to apply for adoption
+        <%= t('.how_to_apply') %>
       </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 questionnaire") %>
-        </div>
-        <div>
-          <p class="text-black">
-            2. Complete Questionnaire
-          </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") %>
+      <ol class="d-flex flex-row justify-content-around align-items-start w-100 gap-4" style="list-style-position: inside;">
+        <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 an account") %>
+          </div>
+          <div>
+            <li class="text-black">
+              <%= t('.create_account') %>
+            </li>
+          </div>
         </div>
-        <div>
-          <p class="text-black">
-            3. Browse Pets
-          </p>
+        <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 questionnaire") %>
+          </div>
+          <div>
+            <li class="text-black">
+              <%= t('.complete_questionaire') %>
+            </li>
+          </div>
         </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 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>
+            <li class="text-black">
+              <%= t('.browse_pets') %>
+            </li>
+          </div>
         </div>
-        <div>
-          <p class="text-black">
-            4. Click Apply
-          </p>
+        <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>
+            <li class="text-black">
+              <%= t('.click_apply') %>
+            </li>
+          </div>
         </div>
-      </div>
 
+      </ol>
     </div>
 
   </div>
@@ -130,7 +132,7 @@
   <div class="container mb-md-5 mt-md-5">
     <div class="text-center mb-5">
       <h2 class="section-heading text-uppercase underline">
-        About us
+        <%= t("general.about_us") %>
       </h2>
     </div>
     <div class="row pb-3">
@@ -173,7 +175,7 @@
       <div class="row text-center">
         <div class="col-8 offset-2 border p-5 shadow-sm
                     rounded bg-white">
-          <h3 class='mb-4'>Become an adopter now!</h3>
+          <h3 class='mb-4'><%= t('.become_adopter_now') %></h3>
           <%= link_to 'Sign Up', new_user_registration_path ,
                       class: 'btn btn-primary' %>
         </div>

config/locales/en.yml

@@ -93,6 +93,7 @@ en:
     cats: "Cats"
     browse: "Browse"
     view: "View"
+    about_us: "About us"
   dashboard:
     index:
       header_title: Dashboard
@@ -349,6 +350,16 @@ en:
     authorization_error: "You are not authorized to perform this action."
     try_again: "Error. Please try again."
   organizations:
+    home:
+      index:
+        every_paw: "Where every paw finds a home"
+        adopt: "Adopt"
+        become_adopter_now: "Become an adopter now!"
+        how_to_apply: "How to apply for adoption"
+        create_account: "Create Account"
+        complete_questionaire: "Complete Questionnaire"
+        browse_pets: "Browse Pets"
+        click_apply: "Click Apply"
     adoptable_pets:
       index:
         header: "Up for adoption"