using scope

app/controllers/cities_controller.rb

 class CitiesController < ApplicationController
 class CitiesController < ApplicationController
   def index
   def index
-    @cities = City.all
+    @vn_cities = City.vn_cities
+    @inter_cities = City.inter_cities
   end
   end
 end
 end

app/controllers/static_pages_controller.rb

 class StaticPagesController < ApplicationController
 class StaticPagesController < ApplicationController
   def index
   def index
-    @cities = City.all
+    @vn_cities = City.vn_cities
     @industries  = Industry.all
     @industries  = Industry.all
     @jobs = Job.page(params[:page]).per(Settings.job.per_page)
     @jobs = Job.page(params[:page]).per(Settings.job.per_page)
   end
   end

app/models/city.rb

@@ -14,4 +14,6 @@
 #
 #
 
 
 class City < ApplicationRecord
 class City < ApplicationRecord
+  scope :vn_cities, -> {where region: "Việt Nam"}
+  scope :inter_cities, -> {where region: "International"}
 end
 end

app/views/cities/_city.html.erb

-<div class="col-show"><%= city.name %></div>
+<div class="col-md-3">
+  <div class="col-show">
+    <%= city.name %>
+  </div>
+</div>

app/views/cities/index.html.erb

@@ -16,11 +16,14 @@
 
 
 <div class="container-fluid">
 <div class="container-fluid">
   <div class="tag text-center" id="vietnam">Vietnam</div>
   <div class="tag text-center" id="vietnam">Vietnam</div>
-  <div class="row row-cols-5">
-    <%= render partial: "cities/city", collection: @cities %>
+  <div class="row row-cols-4">
+    <%= render partial: "cities/city", collection: @vn_cities %>
   </div>
   </div>
 </div>
 </div>
 
 
 <div class="container-fluid">
 <div class="container-fluid">
   <div class="tag text-center" id="interational">International</div>
   <div class="tag text-center" id="interational">International</div>
+  <div class="row row-cols-4">
+    <%= render partial: "cities/city", collection: @inter_cities %>
+  </div>
 </div>
 </div>

app/views/static_pages/index.html.erb

@@ -20,11 +20,10 @@
     <h3>Top cities</h3>
     <h3>Top cities</h3>
 
 
     <div class="container">
     <div class="container">
-      <div class="row row-cols-5">
-        <%= render partial: "cities/city", collection: @cities %>
+      <div class="row row-cols-4">
+        <%= render partial: "cities/city", collection: @vn_cities %>
       </div>
       </div>
     </div>
     </div>
-    <%= paginate @cities %>
   </div>
   </div>
 
 
   <div class="top_industries">
   <div class="top_industries">