add wedding party

app/controllers/home_controller.rb

@@ -1,9 +1,30 @@
 class HomeController < ApplicationController
+
+  Person = Struct.new(:name, :image, :role, :relationship, :extra_attrs)
+
+  PARTY_MEMBERS = [
+    [ "Gemma", true, "Matron of Honor", "Childhood Friend" ],
+    [ "Meghan", true, "Maid of Honor", "Rock Climbing Friend" ],
+    [ "Christine", true, "Bridesmaid", "Childhood Friend" ],
+    [ "Jennie", true, "Bridesmaid", "Rock Climbing Friend" ],
+    [ "Julia", true, "Bridesmaid", "Sister-in-law" ],
+    [ "DeAnna", true, "Bridesmaid", "Rock Climbing Friend", "object-left-top" ],
+    [ "Emil", true, "Best Man",  "Adam's Brother", "object-left-top" ],
+    [ "Ridge", true, "Best Man", "Childhood Friend", "object-left-top" ],
+    [ "Tom", true, "Groomsman", "Childhood Friend" ],
+    [ "Eric", true, "Groomsman", "Childhood Friend", "object-top" ],
+    [ "Toby", true, "Groomsman", "Rock Climbing Friend", "object-top" ],
+    [ "Zack", true, "Groomsman", "Jillian's Brother" , "object-bottom"]
+  ].map do |name, image, role, relationship, extra|
+    Person.new(name, image, role, relationship, extra)
+  end
+
   def index
     @rsvp_by_date = rsvp_by_date
+    @wedding_party = PARTY_MEMBERS
   end
 
   def rsvp_by_date
-    ENV["RSVP_DATE"] || "April 20, 2025"
+    ENV["RSVP_DATE"] || "May 1, 2025"
   end
 end

app/views/home/index.html.erb

@@ -15,8 +15,8 @@
 	    <a href="#ceremony"       class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Ceremony & Reception</a>
 	    <a href="#accommodations" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Accommodations</a>
 	    <a href="#registry" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Registry</a>
+	    <a href="#wedding-party" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Meet the Wedding Party</a>
 	    <a href="#our-story"      class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">How We Met</a>
-	    <a href="#more-info"      class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">More Info</a>
 	    <a href="/rsvp" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white pb-4">RSVP</a>
 	  </div>
 	</div>
@@ -39,6 +39,7 @@
 
     <div class="container mx-auto flex flex-col items-center text-center py-4">
       <a href="/rsvp" class="text-xl rounded-lg bg-emerald-600 px-4 py-4 mb-4 lg:mr-4 w-1/4 text-slate-100 hover:bg-emerald-500">RSVP</a>
+      <div class="text-xl px-4 lg:text-2xl">Please RSVP by <%= @rsvp_by_date %></div>
     </div>
 
     <div class="container mx-auto flex flex-col items-center pt-4 pb-8">
@@ -50,8 +51,8 @@
 	<a href="#ceremony"       class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 px-12">Ceremony & Reception</a>
 	<a href="#accommodations" class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 px-12">Accommodations</a>
 	<a href="#registry"       class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 px-12">Registry</a>
+	<a href="#wedding-party"  class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 px-12">Wedding Party</a>
 	<a href="#our-story"      class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 px-12">How We Met</a>
-	<a href="#more-info"      class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 px-12">More Info</a>
       </div>
     </div>
   </div>
@@ -141,8 +142,51 @@
     </div>
   </div>
 </div>
-<div id="our-story" class="w-screen bg-[#ddd3be] lg:bg-[#fdfefe] lg:my-8">
+<div id="wedding-party" class="w-screen bg-[#ddd3be] lg:bg-[#fdfefe] lg:my-8">
-  <div class="container mx-auto lg:h-fit text-slate-900 lg:rounded-2xl lg:bg-[#ddd3be] lg:shadow-2xl px-8 py-8">
+  <div class="container mx-auto lg:h-fit text-slate-900 lg:rounded-2xl lg:bg-[#ddd3be] lg:shadow-2xl px-4 lg:px-8 py-8">
+    <div class="w-fit mx-auto">
+      <h1 class="text-5xl rogue-script lg:text-7xl">Wedding Party</h1>
+    </div>
+    <!--- Wedding party for large screens --->
+    <% @wedding_party.each_slice(3) do |r| %>
+    <div class="max-lg:hidden flex flex-row py-4 px-4">
+      <% r.each do |person| %>
+      <div id="wp-card" class="w-1/3">
+	<% if person.image %>
+	  <img src="<%= image_path(person.name.downcase + '.jpg') %>" class="w-80 h-80 mx-auto rounded-full aspect-square object-cover shadow-xl <%= person.extra_attrs || '' %>">
+        <% else %>
+	  <div class="bg-red-500 w-80 h-80 mx-auto rounded-full aspect-square object-cover"></div>
+	<% end %>
+        <div id="wp-name" class="w-fit mx-auto text-xl pt-2"><%= person.name %></div>
+        <div id="wp-role" class="w-fit mx-auto text-md pb-2 text-slate-600"><%= person.role %></div>
+        <div id="wp-relation" class="w-fit mx-auto text-md pb-2 text-slate-600"><%= person.relationship %></div>
+      </div>
+      <% end %>
+    </div>
+    <% end %>
+    <!--- End wedding party for large screens ---->
+    <!--- Wedding party for small screens --->
+    <% @wedding_party.each_slice(1) do |r| %>
+    <div class="lg:hidden flex py-4 px-2">
+      <% r.each do |person| %>
+      <div id="wp-card" class="w-fit px-2 mx-auto">
+	<% if person.image %>
+	    <img src="<%= image_path(person.name.downcase + '.jpg') %>" class="mx-auto w-60 h-60 md:w-80 md:h-80 rounded-full aspect-square object-cover shadow-xl <%= person.extra_attrs || '' %>">
+          <% else %>
+	  <div class="bg-red-500 w-60 h-60 md:w-80 md:h-80 mx-auto rounded-full aspect-square object-cover"></div>
+	<% end %>
+        <div id="wp-name" class="w-fit mx-auto text-xl pt-2"><%= person.name %></div>
+        <div id="wp-role" class="w-fit mx-auto text-md text-slate-600"><%= person.role %></div>
+        <div id="wp-relation" class="w-fit mx-auto text-md pb-2 text-slate-600"><%= person.relationship %></div>
+      </div>
+      <% end %>
+    </div>
+    <% end %>
+    <!---------End WP for small screens --->
+  </div>
+</div>
+<div id="our-story" class="w-screen bg-[#b2c0b2] lg:bg-[#fdfefe] lg:my-8">
+  <div class="container mx-auto lg:h-fit text-slate-900 lg:rounded-2xl lg:bg-[#b2c0b2] lg:shadow-2xl px-8 py-8">
     <div class="w-fit mx-auto">
       <h1 class="text-5xl rogue-script lg:text-7xl">How we met</h1>
     </div>
@@ -175,4 +219,5 @@
     </ol>
   </div>
 </div>
+<div class="hidden object-left-top object-top object-center object-bottom object-left-bottom object-[0%_0%] object[100%_100%] object-[50%_0%] object-[0%-50%] object-[0%_100%] object-[100%_0%]"></div>
 </div>