Stylize dogs#index page to match style

app/controllers/dogs_controller.rb

@@ -1,6 +1,31 @@
 class DogsController < ApplicationController
 
   def index
+    @dogs = fetch_mock_dog_data
+  end
+
+  private
+
+  #
+  # Returns an array of mock dog data
+  # @return [Array]
+  def fetch_mock_dog_data
+    names = [ "Bella", "Buddy", "Buster", "Cali", "Charlie", "Max", "Oliver", "Oscar", "Penny", "Riley", "Shadow", "Sophie", "Toby", "Tucker", "Winston" ]
+    ages = [ 'Puppy', 'Adult', 'Senior' ]
+    breeds = [ 'Labrador', 'Poodle', 'German Shepherd', 'Golden Retriever', 'Pug' ]
+    weights = [ 'Small', 'Medium', 'Large' ]
+    sexs = [ 'Male', 'Female' ]
+
+    12.times.map do |i|
+      name = names.sample
+      age = ages.sample
+      breed = breeds.sample
+      weight = weights.sample
+      sex = sexs.sample
+
+      dog_photo = "https://placedog.net/500/280?id=#{rand(1..100)}"
+      OpenStruct.new(image_src: dog_photo, name: name, age: age, breed: breed, weight: weight, sex: sex)
+    end
   end
 
 end 

app/views/components/_container.html.erb

@@ -1,5 +1,5 @@
 <div class="fixed h-full w-full -z-10">
-  <div class="inset-0 bg-blue-200 h-full"></div>
+  <div class="inset-0 bg-teal h-full"></div>
 </div>
 
 <div class="relative w-full h-full">
@@ -8,6 +8,8 @@
       <%= partial.yield :header %>
     </div>
 
-    <%= partial.yield :content %>
+    <div class='px-0 lg:px-16'>
+      <%= partial.yield :content %>
+    </div>
   </div>
 </div>

app/views/components/_header.html.erb

@@ -0,0 +1 @@
+<h1 class='text-4xl'> <%= local_assigns[:text] %></h1>

app/views/components/_textbody.html.erb

@@ -0,0 +1,3 @@
+<div class='text-xl text-gray-400'>
+  <%= yield %>
+</div>

app/views/dogs/_dog.html.erb

@@ -0,0 +1,35 @@
+<div class='shadow-2xl w-[300px] flex-grow mx-2 my-2 p-6 bg-white'>
+  <div class='h-62'>
+    <%= image_tag dog.image_src, class: 'object-cover w-full h-[325px]' %>
+  </div>
+
+  <div class='text-center text-4xl font-bold uppercase my-2'>
+    <%= dog.name %>
+  </div>
+
+  <div class='space-y-2'>
+    <div class='flex'>
+      <div class='w-1/2'>
+        <label class='text-gray-500'>Breed:</label>
+        <div class='text-[15px] font-medium'><%= dog.breed %></div>
+      </div>
+
+      <div class='w-1/2'>
+        <label class='text-gray-500'>Age:</label>
+        <div class='text-[15px] font-medium'><%= dog.age %></div>
+      </div>
+    </div>
+
+    <div class='flex'>
+      <div class='w-1/2'>
+        <label class='text-gray-500'>Sex:</label>
+        <div class='text-[15px] font-medium'><%= dog.sex %></div>
+      </div>
+
+      <div class='w-1/2'>
+        <label class='text-gray-500'>Weight (lbs):</label>
+        <div class='text-[15px] font-medium'><%= dog.weight %></div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/dogs/index.html.erb

@@ -0,0 +1,13 @@
+<div>
+  <%= render 'components/header', text: 'Fosterable Dogs' %>
+
+  <%= render 'components/textbody' do %>
+    <p> Thinking about fostering? These adorable dogs from local rescues need someone to foster them while they await their furever home. Click on a dog below to see more information about each dog. </p>
+  <% end %>
+
+  <div class='flex flex-wrap justify-center mt-6 content-between'>
+    <% @dogs.each do |dog| %>
+      <%= render 'dogs/dog', dog: dog %>
+    <% end %>
+  </div>
+</div>

tailwind.config.js

@@ -10,6 +10,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        'teal': '#4FADBE',
         'landing': '#13C2C2',
       }
     }