Fix spacing on large screens

app/controllers/home_controller.rb

@@ -1,4 +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"] || "May 1, 2025"
   end
 end

app/views/home/index.html.erb

@@ -12,12 +12,12 @@
       <nav class="flex items-center justify-between flex-wrap pt-12 z-30">
 	<div class="bg-[#a99dab] w-full block flex-grow lg:hidden">
 	  <div id="nav-links" class="text-xl max-lg:hidden flex flex-col pl-4 lg:flex-row lg:mr-4">
-	    <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="#ceremony"       class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Ceremony & Reception</a>
-	    <a href="#more-info" class="block my-4 lg:inline-block lg:mt-0 hover:text-white mr-24">More Info</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="#rsvp" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white pb-4">RSVP</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="/rsvp" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white pb-4">RSVP</a>
 	  </div>
 	</div>
       </nav>
@@ -37,8 +37,9 @@
       </div>
     </div>
 
-    <div class="container mx-auto flex flex-col items-center py-4 hidden">
-      <button class="text-3xl rounded-lg bg-emerald-700 px-4 py-4 text-slate-300 hover:bg-emerald-600">RSVP</button>
+    <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">
@@ -47,12 +48,11 @@
 
     <div class="w-full block flex-grow max-lg:hidden lg:flex lg:w-auto lg:justify-center lg:pb-4 lg:pt-4 lg:border-t lg:border-b">
       <div id="nav-links-lg" class="text-xl  flex flex-col lg:flex-row">
-	<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="#ceremony"       class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 px-12">Ceremony & Reception</a>
-	<a href="#more-info" class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 px-12">More Info</a>
-	<!-- <a href="#accommodations" class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 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="#rsvp" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white">RSVP</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>
       </div>
     </div>
   </div>
@@ -60,40 +60,6 @@
 <div class="container mx-auto flex flex-row justify-center md:hidden lg:hidden">
   <img src="<%= image_path 'love-park-small.png' %>">
 </div>
-<div id="our-story" 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="w-fit mx-auto">
-      <h1 class="text-5xl rogue-script lg:text-7xl">How we met</h1>
-    </div>
-    <ol class="relative border-l border-slate-900">
-      <li class="mb-10 ms-4">
-        <div class="absolute w-3 h-3 bg-slate-600 rounded-full mt-1.5 -start-1.5 border border-slate-900"></div>
-        <time class="mb-1 text-sm font-normal leading-none text-gray-600">June 2019</time>
-        <h3 class="text-lg font-semibold text-slate-900">Met Rock Climbing</h3>
-      </li>
-      <li class="mb-10 ms-4">
-        <div class="absolute w-3 h-3 bg-slate-600 rounded-full mt-1.5 -start-1.5 border border-slate-900"></div>
-        <time class="mb-1 text-sm font-normal leading-none text-gray-600">October 2019</time>
-        <h3 class="text-lg font-semibold text-slate-900">Adam asked out Jillian (after climbing many stairs)</h3>
-      </li>
-      <li class="mb-10 ms-4">
-        <div class="absolute w-3 h-3 bg-slate-600 rounded-full mt-1.5 -start-1.5 border border-slate-900"></div>
-        <time class="mb-1 text-sm font-normal leading-none text-gray-600">August 2020</time>
-        <h3 class="text-lg font-semibold text-slate-900">Moved to Philadelphia</h3>
-      </li>
-      <li class="mb-10 ms-4">
-        <div class="absolute w-3 h-3 bg-slate-600 rounded-full mt-1.5 -start-1.5 border border-slate-900"></div>
-        <time class="mb-1 text-sm font-normal leading-none text-gray-600">September 2021</time>
-        <h3 class="text-lg font-semibold text-slate-900">Bought a house in Chalfont</h3>
-      </li>
-      <li class="mb-10 ms-4">
-        <div class="absolute w-3 h-3 bg-slate-600 rounded-full mt-1.5 -start-1.5 border border-slate-900"></div>
-        <time class="mb-1 text-sm font-normal leading-none text-gray-600">October 2024</time>
-        <h3 class="text-lg font-semibold text-slate-900">5 year anniversary date and Proposal</h3>
-      </li>
-    </ol>
-  </div>
-</div>
 <div id="ceremony" 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 bg-[#b2c0b2] lg:shadow-2xl">
     <div class="w-fit mx-auto">
@@ -105,7 +71,7 @@
       </div>
       <div class="basis-2/3">
 	<p class="text-xl px-5 pt-2">We're getting married! Come join us for our Ceremony at Penn Oaks Golf Club at 5:00pm June 7, 2025.</p>
-	<p class="text-xl px-4 pt-2">After, we will enjoy drinks and hors d'ourves on the Patio for Cocktail hour before moving into the Ballroom to eat and dance for the Reception until 11:00 pm.</p>
+	<p class="text-xl px-4 pt-2">After, we will enjoy drinks and hors d'oeuvres on the patio for cocktail hour before moving into the ballroom to eat and dance for the reception until 11:00 pm.</p>
 	<p class="text-xl px-4 py-2" >We are looking forward to seeing you there!</p>
 
 	<div class="pb-4">
@@ -136,62 +102,122 @@
     </div>
   </div>
 </div>
-<div id="more-info" class="w-screen text-slate-900 bg-[#ddd3be] lg:bg-[#fdfefe]">
-  <div class="container mx-auto bg-[#ddd3be] lg:rounded-2xl pt-4 lg:mt-4 lg:pb-2 lg:shadow-2xl lg:mb-4">
-    <div class="w-fit mx-auto lg:flex lg:flex-row lg:justify-center lg:items-center">
-      <span class="text-5xl pl-4 lg:pt-4 rogue-script lg:text-7xl">More Info</span>
-    </div>
-    <div class="w-fit mx-auto">
-      <p class="text-xl px-4 pt-2">Check back soon, we will be adding more details as our wedding gets closer!</p>
-      <p class="text-xl px-4 pt-2">Don't hesitate to reach out if you have any questions.</p>
-      <p class="text-xl px-4 pt-2">We will update the website with details about:</P>
-      <ul class="list-disc text-xl pl-16 py-4">
-	<li>Wedding Block & Guest Accommodations</li>
-	<li>Bridal Party Colors</li>
-	<li>Registry</li>
-      </ul>
-    </div>
-  </div>
-</div>
-
-</div>
-<div id="accommodations" class="w-screen text-slate-900 lg:my-8 bg-[#92a084] lg:bg-[#fdfefe] hidden">
-  <div class="container mx-auto bg-[#92a084] lg:rounded-2xl pt-4 lg:mt-4 lg:pb-2 lg:shadow-2xl lg:mb-4">
+<div id="accommodations" class="w-screen text-slate-900 lg:my-8 bg-[#92a084] lg:bg-[#fdfefe]">
+  <div class="container mx-auto bg-[#92a084] lg:rounded-2xl py-4 lg:mt-4 lg:pb-2 lg:shadow-2xl lg:mb-4">
     <div class="w-fit mx-auto lg:flex lg:flex-row lg:justify-center lg:items-center">
       <!-- <span class="text-7xl pl-4">🛏️</span> -->
       <span class="text-5xl pl-4 lg:pt-4 rogue-script lg:text-7xl">Accommodations</span>
     </div>
-    <div class="flex flex-col my-4 lg:flex-row lg:w-fit lg:mx-auto lg:my-12">
-      <div class="flex flex-row bg-[#fdfefe] rounded-lg mx-4 mt-4 px-4 py-4 items-center lg:p-12">
-	<img src="<%= image_path 'home2.svg' %>" class="w-16 h-16" />
+
+    <div class="lg:w-2/3 px-8 lg:mx-auto">
+      <p class="text-lg text-justify">We have a wedding block for our guests at the Holiday Inn Express, which is a few minutes away from the venue. Please use the link below when booking your stay.</p>
+    </div>
+    <div class="flex flex-col my-4 lg:flex-row lg:w-96 lg:mx-auto lg:my-12 items-center">
+      <div class="flex flex-row bg-[#fdfefe] rounded-lg mx-4 mt-4 lg:mb-0 px-4 py-4 items-center lg:p-12">
+	<img src="<%= image_path 'hiexpress.svg' %>" class="w-24 h-16" />
 	<div class="flex flex-col pl-2">
-	  <a href="" class="text-3xl">Home2 Suites</a>
-	  <span>484-354-2985</span>
-	  <span class="text-xl">7 minutes away</span>
-	</div>
-      </div>
-      <div class="flex flex-row bg-[#fdfefe] rounded-lg mx-4 mt-4 px-4 py-4 items-center lg:p-12">
-	<img src="<%= image_path 'residence-inn.svg' %>" class="w-16 h-16" />
-	<div class="flex flex-col pl-2">
-	  <a href="#" class="text-3xl">Residence Inn</a>
-	  <span class="text-xl">12 minutes away</span>
-	  <span>610-459-1190</span>
-	</div>
-      </div>
-      <div class="flex flex-row bg-[#fdfefe] rounded-lg mx-4 mt-4 px-4 py-4 items-center lg:p-12">
-	<img src="<%= image_path 'hotel-warner.png' %>" class="w-16 h-16 scale-y-50" />
-	<div class="flex flex-col pl-2">
-	  <span class="text-3xl">Hotel Warner</span>
-	  <span class="text-xl">15 minutes away</span>
-	  <span>610-6922-6920</span>
-	</div>
-      </div>
-      <div class="flex flex-row bg-[#fdfefe] rounded-lg mx-4 mt-4 mb-4 lg:mb-0 px-4 py-4 items-center lg:p-12">
-	<div class="flex flex-col pl-2">
-	  <span class="text-3xl">Wedding Block</span>
-	  <span class="text-xl">Details coming soon</span>
+	  <span class="text-3xl">Holiday Inn</span>
+	  <span class="text-xl">3 minutes away</span>
+	  <span>610-399-4600</span>
+	  <a class="text-xl rounded-lg bg-emerald-600 px-4 py-4 text-slate-100 hover:bg-emerald-500" href="https://www.hiexpress.com/redirect?path=rates&brandCode=EX&localeCode=en%C2%AEionCode=1&hotelCode=PHLWP&checkInDate=06&checkInMonthYear=052025&checkOutDate=08&checkOutMonthYear=052025&numberOfAdults=1&numberOfChildren=1&numberOfRooms=1&_PMID=99801505&GPC=MOH&cn=no&viewfullsite=true">Book Here</a>
 	</div>
       </div>
     </div>
   </div>
 </div>
+<div id="registry" class="w-screen text-slate-900 lg:my-8 bg-[#b2c0b2] lg:bg-[#fdfefe]">
+  <div class="container mx-auto bg-[#b2c0b2] lg:rounded-2xl pt-4 lg:mt-4 lg:pb-2 lg:shadow-2xl lg:mb-4">
+    <div class="w-fit mx-auto lg:flex lg:flex-row lg:justify-center lg:items-center">
+      <span class="text-5xl pl-4 lg:pt-4 rogue-script lg:text-7xl">Registry & Gifts</span>
+    </div>
+    <div class="w-fit mx-auto px-8 pt-4 lg:w-2/3">
+      <p class="text-lg text-justify text-slate-900 px-6 lg:px-0">
+	Your presence is the best gift, but if you’d like to help us start our next chapter,
+	we’ve put together a registry with some things we love. Feel free to browse or
+	choose something meaningful to you!
+      </p>
+    </div>
+    <div class="flex flex-col pt-4 lg:flex-row lg:w-1/3 lg:mx-auto lg:my-12 text-center items-center justify-center">
+      <a class="text-xl rounded-lg bg-emerald-600 px-4 py-4 mb-4 lg:mr-4 w-1/3 text-slate-100 hover:bg-emerald-500" href="/registry">Registry</a>
+    </div>
+  </div>
+</div>
+<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-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 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>
+    <ol class="relative border-l border-slate-900">
+      <li class="mb-10 ms-4">
+        <div class="absolute w-3 h-3 bg-slate-600 rounded-full mt-1.5 -start-1.5 border border-slate-900"></div>
+        <time class="mb-1 text-sm font-normal leading-none text-gray-600">June 2019</time>
+        <h3 class="text-lg font-semibold text-slate-900">Met Rock Climbing</h3>
+      </li>
+      <li class="mb-10 ms-4">
+        <div class="absolute w-3 h-3 bg-slate-600 rounded-full mt-1.5 -start-1.5 border border-slate-900"></div>
+        <time class="mb-1 text-sm font-normal leading-none text-gray-600">October 2019</time>
+        <h3 class="text-lg font-semibold text-slate-900">Adam asked out Jillian in Italy (after climbing many stairs)</h3>
+      </li>
+      <li class="mb-10 ms-4">
+        <div class="absolute w-3 h-3 bg-slate-600 rounded-full mt-1.5 -start-1.5 border border-slate-900"></div>
+        <time class="mb-1 text-sm font-normal leading-none text-gray-600">August 2020</time>
+        <h3 class="text-lg font-semibold text-slate-900">Moved to Philadelphia</h3>
+      </li>
+      <li class="mb-10 ms-4">
+        <div class="absolute w-3 h-3 bg-slate-600 rounded-full mt-1.5 -start-1.5 border border-slate-900"></div>
+        <time class="mb-1 text-sm font-normal leading-none text-gray-600">September 2021</time>
+        <h3 class="text-lg font-semibold text-slate-900">Bought a house in Chalfont</h3>
+      </li>
+      <li class="mb-10 ms-4">
+        <div class="absolute w-3 h-3 bg-slate-600 rounded-full mt-1.5 -start-1.5 border border-slate-900"></div>
+        <time class="mb-1 text-sm font-normal leading-none text-gray-600">October 2024</time>
+        <h3 class="text-lg font-semibold text-slate-900">5 year anniversary date and Proposal</h3>
+      </li>
+    </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>

config/routes.rb

@@ -12,6 +12,9 @@ Rails.application.routes.draw do
   get "service-worker" => "rails/pwa#service_worker", as: :pwa_service_worker
   get "manifest" => "rails/pwa#manifest", as: :pwa_manifest
 
+  get "/rsvp" => redirect("https://withjoy.com/adam-and-jillian-jun-25/rsvp")
+  get "/registry" => redirect("https://withjoy.com/adam-and-jillian-jun-25/registry")
+  get "*path" => redirect("/")
   # Defines the root path route ("/")
   # root "posts#index"
 end