7 Commits

Author SHA1 Message Date
359183e7b9 fix color on how we met
Some checks failed
CI / scan_ruby (push) Has been cancelled
CI / scan_js (push) Has been cancelled
CI / lint (push) Has been cancelled
CI / test (push) Has been cancelled
2025-05-15 22:37:24 -04:00
6e6c13437a de-optimize 2025-05-15 22:33:31 -04:00
3985b9c93c Decompose into partials 2025-05-15 22:23:12 -04:00
b492c4e111 Reorganize
Some checks failed
CI / scan_ruby (push) Has been cancelled
CI / scan_js (push) Has been cancelled
CI / lint (push) Has been cancelled
CI / test (push) Has been cancelled
2025-05-15 21:09:43 -04:00
665e310e4f Remove RSVP and re-order 2025-05-15 20:44:55 -04:00
fc8dd82587 increase font for ceremony details
Some checks failed
CI / scan_ruby (push) Has been cancelled
CI / scan_js (push) Has been cancelled
CI / lint (push) Has been cancelled
CI / test (push) Has been cancelled
2025-04-26 16:16:22 -04:00
f95598dfb3 Add wedding party colors 2025-04-26 15:35:10 -04:00
8 changed files with 215 additions and 183 deletions

1
app/assets/images/dress.svg Executable file
View File

@@ -0,0 +1 @@
<svg class="svg-icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M846.1 787.9c-17.6-33.1-177.4-320.4-209.9-378.8 2-1.2 3.8-2.5 5.4-4.1 5.9-5.9 8.8-14.5 8.8-25.2 0-17.3-7.7-28.7-21.6-32.5 0.3-10.2 4.2-26.1 8.3-43 6.1-25.1 13-53.5 13-79.6v-68.3c0-0.6-0.1-1.2-0.2-1.7 0-0.4 0.1-0.8 0.1-1.2V99.3c0-19-15.5-34.5-34.5-34.5S581 80.3 581 99.3v48.5c-16.3 4.2-33.5 17.3-51.4 39.1-7 8.5-12.9 17-17.4 23.8-4.3-6.8-10.1-15.2-16.9-23.7-18-22.4-35.5-35.7-52.1-39.5V99.3c0-19-15.5-34.5-34.5-34.5s-34.5 15.5-34.5 34.5v54.1c0 0.4 0 0.8 0.1 1.2-0.1 0.6-0.2 1.1-0.2 1.7v68.3c0 26.1 6.9 54.5 13 79.6 4.1 16.8 8 32.8 8.3 43-13.8 3.8-21.5 15.2-21.5 32.5 0 14 5 24 14.2 29.4-32.6 58.6-192.4 345.7-210 378.8-11.5 21.7-13.9 41-6.9 57.4 7.1 16.7 23.1 28.7 47.7 35.7 39.5 11.3 120.7 18.1 141.5 19.7 5.1 6.9 16.7 21.2 35.1 35.4 23.2 17.8 62.3 39.1 116.5 39.1h0.4c54.3 0 93.3-21.3 116.5-39.1 18.5-14.2 30.1-28.4 35.1-35.4 20.8-1.6 101.9-8.4 141.5-19.7 24.5-7 40.6-19 47.7-35.7 6.7-16.4 4.4-35.7-7.1-57.4zM600.9 99.3c0-8 6.5-14.5 14.5-14.5s14.5 6.5 14.5 14.5v47h-29v-47z m-206.8 0c0-8 6.5-14.5 14.5-14.5s14.5 6.5 14.5 14.5v47h-29v-47z m-0.1 67h39c26.8 0 58.3 46.9 69.4 67 0.8 2.3 2.4 4.4 4.7 5.6 1.5 0.9 3.2 1.3 4.9 1.2 1.6 0 3.3-0.3 4.9-1.2 2.3-1.2 4-3.3 4.7-5.6 11.5-20.1 43.9-67.1 70.9-67.1H630v58.3c0 23.7-6.6 50.9-12.4 74.9-4.8 19.6-8.9 36.5-8.9 49v1c-10.7 6.1-46.8 24.5-97 24.5-50.1 0-86.1-18.5-96.5-24.6v-0.9c0-12.5-4.1-29.4-8.9-49-5.8-24-12.4-51.2-12.4-74.9v-58.2z m9.7 199.6c10.8 6.6 50.8 28.1 108 28.1 57.6 0 97.7-21.6 108.5-28.1 6.5 0.5 10 3.5 10 13.9 0 3.7-0.5 8.6-3 11.1-1.8 1.8-5.1 2.8-9.6 2.8-2 0-3.9 0.6-5.6 1.7-0.4 0.3-39.9 26.5-100 26.5-59.9 0-99.6-26.2-100-26.5-1.7-1.1-3.6-1.7-5.6-1.7-8.2 0-12.7-2.2-12.7-13.9 0.1-10.4 3.5-13.4 10-13.9z m430.8 471.6c-4.6 10.8-16.3 19-34.7 24.3-35.2 10.1-108.7 16.7-133.7 18.7l-80.5-361.3c-1.2-5.4-6.5-8.8-11.9-7.6-5.4 1.2-8.8 6.5-7.6 11.9l81.5 365.6c-10.2 13.8-54.3 66.1-135.4 66.1h-0.4c-38.8 0-73.7-11.6-103.7-34.5-16.9-12.9-27.4-25.9-31.8-31.7l81.4-365.5c1.2-5.4-2.2-10.7-7.6-11.9-5.4-1.2-10.7 2.2-11.9 7.6l-80.5 361.3c-25-2-98.4-8.6-133.6-18.7-18.4-5.3-30.1-13.4-34.7-24.3-4.5-10.6-2.4-24.1 6.1-40.2 17.9-33.6 183.5-331.2 211.6-381.6 14.4 8.1 52.4 26.1 104.9 26.1 52.5 0 90.5-18 104.9-26.1 28.1 50.4 193.6 348 211.5 381.6 8.6 16.1 10.6 29.6 6.1 40.2z" /></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@@ -19,9 +19,20 @@ class HomeController < ApplicationController
Person.new(name, image, role, relationship, extra)
end
Section = Struct.new(:id, :title)
SECTIONS = [
Section.new("ceremony", "Ceremony & Reception"),
Section.new("wedding-party", "Wedding Party"),
Section.new("accommodations", "Accommodations"),
Section.new("registry", "Registry"),
Section.new("our-story", "How We Met")
].freeze
def index
@rsvp_by_date = rsvp_by_date
@wedding_party = PARTY_MEMBERS
@sections = SECTIONS
end
def rsvp_by_date

View File

@@ -0,0 +1,39 @@
<div id="accommodations" class="w-screen text-slate-900 lg:my-8 bg-[<%= color %>] lg:bg-[#fdfefe]">
<div class="container mx-auto bg-[<%= color %>] lg:rounded-2xl py-4 px-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="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. The block is booked now, but there are other hotels close by.</p>
</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 basis-1/3 bg-[#fdfefe] rounded-lg mx-4 mt-4 px-4 py-4 items-center lg:p-12">
<img src="<%= image_path 'hiexpress.svg' %>" class="w-16 h-16" />
<div class="flex flex-col pl-2">
<a href="" class="text-3xl">Holiday Inn</a>
<span class="text-xl">3 minutes away</span>
<span>610-399-4600</span>
</div>
</div>
<div class="flex flex-row basis-1/3 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="flex flex-col pl-2">
<a href="" class="text-3xl">Home2 Suites</a>
<span class="text-xl">7 minutes away</span>
<span>484-354-2985</span>
</div>
</div>
<div class="flex flex-row basis-1/3 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>
</div>
</div>

View File

@@ -0,0 +1,55 @@
<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="ceremony" class="w-screen bg-[<%= color %>] lg:bg-[#fdfefe] lg:my-8">
<div class="container mx-auto lg:h-fit text-slate-900 lg:rounded-2xl bg-[<%= color %>] lg:shadow-2xl">
<div class="w-fit mx-auto">
<h1 class="text-5xl px-4 pt-8 pb-4 rogue-script lg:text-7xl">Ceremony & Reception</h1>
</div>
<div class="flex flex-col lg:flex-row lg:space-x-4">
<div class="basis-1/3 max-md:hidden lg:rounded-bl-2xl lg:content-center">
<img src="<%= image_path 'love-park-small.png' %>" class="lg:scale(0.7) lg:rounded-bl-2xl md:mx-auto" />
</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'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">
<div class="flex flex-row px-8 items-center">
<svg width="30" height="30" viewbox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.02 7.207c.26-.457.915-.734 1.565-.55.64.18.93.697.851 1.141-.085.464-.576.898-1.268.895a.604.604 0 0 0-.08.005.6.6 0 0 0-.687.594v1.613l-5.246 2.963-.002.001-3.064 1.716-.004.002c-.538.307-.779.94-.651 1.519v.002c.132.586.632 1.054 1.268 1.063H20.28c.64 0 1.147-.465 1.283-1.055v-.002c.132-.582-.11-1.217-.647-1.526l-.003-.002-3.02-1.716-2.747-1.556a.6.6 0 0 0-.591 1.045l2.746 1.554 3.017 1.715c.046.027.1.11.075.22-.024.103-.091.123-.113.123H3.717c-.024 0-.089-.024-.112-.125-.023-.109.031-.19.073-.215l3.063-1.716.002-.001 5.535-3.127a.598.598 0 0 0 .287-.376.599.599 0 0 0 .035-.204V9.86c.985-.158 1.836-.851 2.017-1.848.209-1.16-.583-2.194-1.706-2.51-1.11-.313-2.366.113-2.934 1.11a.6.6 0 1 0 1.043.595z" fill="currentColor"></path>
</svg>
<span class="text-lg px-4">Formal Attire</span>
</div>
</div>
<div class="pb-4">
<div class="flex flex-row px-8 items-center">
<svg width="30" height="30" viewbox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.437 9.041c0-3.73 2.886-6.81 6.52-6.835A.61.61 0 0 1 12 2.204c3.653 0 6.563 3.091 6.563 6.837 0 5.975-3.986 10.694-5.527 12.298a1.401 1.401 0 0 1-1.036.456c-.393 0-.772-.165-1.036-.456-1.54-1.605-5.527-6.34-5.527-12.298zM12 3.406c.013 0 .026 0 .039-.002 2.921.022 5.324 2.516 5.324 5.637 0 5.489-3.702 9.916-5.199 11.474a.597.597 0 0 0-.015.016.202.202 0 0 1-.149.064.202.202 0 0 1-.149-.064.388.388 0 0 0-.015-.016C10.34 18.957 6.637 14.513 6.637 9.04c0-3.134 2.423-5.635 5.363-5.635zM9.332 8.729A2.67 2.67 0 1 1 12 11.4a2.67 2.67 0 0 1-2.668-2.67zM12 4.86a3.87 3.87 0 0 0-3.868 3.87A3.87 3.87 0 1 0 12 4.86z" fill="currentColor"></path>
</svg>
<span class="text-lg px-4">150 Penn Oaks Dr, West Chester, PA 19382</span>
</div>
</div>
<div class="pb-4">
<div class="flex flex-row px-8 items-center">
<svg class="svg-icon" width="30" height="30" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M846.1 787.9c-17.6-33.1-177.4-320.4-209.9-378.8 2-1.2 3.8-2.5 5.4-4.1 5.9-5.9 8.8-14.5 8.8-25.2 0-17.3-7.7-28.7-21.6-32.5 0.3-10.2 4.2-26.1 8.3-43 6.1-25.1 13-53.5 13-79.6v-68.3c0-0.6-0.1-1.2-0.2-1.7 0-0.4 0.1-0.8 0.1-1.2V99.3c0-19-15.5-34.5-34.5-34.5S581 80.3 581 99.3v48.5c-16.3 4.2-33.5 17.3-51.4 39.1-7 8.5-12.9 17-17.4 23.8-4.3-6.8-10.1-15.2-16.9-23.7-18-22.4-35.5-35.7-52.1-39.5V99.3c0-19-15.5-34.5-34.5-34.5s-34.5 15.5-34.5 34.5v54.1c0 0.4 0 0.8 0.1 1.2-0.1 0.6-0.2 1.1-0.2 1.7v68.3c0 26.1 6.9 54.5 13 79.6 4.1 16.8 8 32.8 8.3 43-13.8 3.8-21.5 15.2-21.5 32.5 0 14 5 24 14.2 29.4-32.6 58.6-192.4 345.7-210 378.8-11.5 21.7-13.9 41-6.9 57.4 7.1 16.7 23.1 28.7 47.7 35.7 39.5 11.3 120.7 18.1 141.5 19.7 5.1 6.9 16.7 21.2 35.1 35.4 23.2 17.8 62.3 39.1 116.5 39.1h0.4c54.3 0 93.3-21.3 116.5-39.1 18.5-14.2 30.1-28.4 35.1-35.4 20.8-1.6 101.9-8.4 141.5-19.7 24.5-7 40.6-19 47.7-35.7 6.7-16.4 4.4-35.7-7.1-57.4zM600.9 99.3c0-8 6.5-14.5 14.5-14.5s14.5 6.5 14.5 14.5v47h-29v-47z m-206.8 0c0-8 6.5-14.5 14.5-14.5s14.5 6.5 14.5 14.5v47h-29v-47z m-0.1 67h39c26.8 0 58.3 46.9 69.4 67 0.8 2.3 2.4 4.4 4.7 5.6 1.5 0.9 3.2 1.3 4.9 1.2 1.6 0 3.3-0.3 4.9-1.2 2.3-1.2 4-3.3 4.7-5.6 11.5-20.1 43.9-67.1 70.9-67.1H630v58.3c0 23.7-6.6 50.9-12.4 74.9-4.8 19.6-8.9 36.5-8.9 49v1c-10.7 6.1-46.8 24.5-97 24.5-50.1 0-86.1-18.5-96.5-24.6v-0.9c0-12.5-4.1-29.4-8.9-49-5.8-24-12.4-51.2-12.4-74.9v-58.2z m9.7 199.6c10.8 6.6 50.8 28.1 108 28.1 57.6 0 97.7-21.6 108.5-28.1 6.5 0.5 10 3.5 10 13.9 0 3.7-0.5 8.6-3 11.1-1.8 1.8-5.1 2.8-9.6 2.8-2 0-3.9 0.6-5.6 1.7-0.4 0.3-39.9 26.5-100 26.5-59.9 0-99.6-26.2-100-26.5-1.7-1.1-3.6-1.7-5.6-1.7-8.2 0-12.7-2.2-12.7-13.9 0.1-10.4 3.5-13.4 10-13.9z m430.8 471.6c-4.6 10.8-16.3 19-34.7 24.3-35.2 10.1-108.7 16.7-133.7 18.7l-80.5-361.3c-1.2-5.4-6.5-8.8-11.9-7.6-5.4 1.2-8.8 6.5-7.6 11.9l81.5 365.6c-10.2 13.8-54.3 66.1-135.4 66.1h-0.4c-38.8 0-73.7-11.6-103.7-34.5-16.9-12.9-27.4-25.9-31.8-31.7l81.4-365.5c1.2-5.4-2.2-10.7-7.6-11.9-5.4-1.2-10.7 2.2-11.9 7.6l-80.5 361.3c-25-2-98.4-8.6-133.6-18.7-18.4-5.3-30.1-13.4-34.7-24.3-4.5-10.6-2.4-24.1 6.1-40.2 17.9-33.6 183.5-331.2 211.6-381.6 14.4 8.1 52.4 26.1 104.9 26.1 52.5 0 90.5-18 104.9-26.1 28.1 50.4 193.6 348 211.5 381.6 8.6 16.1 10.6 29.6 6.1 40.2z" /></svg>
<span class="text-lg px-4">Wedding Party Color</span>
<span class="aspect-1/1 w-12 h-6 outline outline-black/10 bg-[#b3c0a7]"></span>
<span class="text-lg pl-4">(Dusty Sage)</span>
</div>
</div>
<div class="max-md:hidden md:w-fit md:mx-auto ">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6120.924192987885!2d-75.56311592187585!3d39.908673971526014!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c6f042ac27b4e9%3A0xc4a8ba245e1ee29d!2sPenn%20Oaks%20Golf%20Club!5e0!3m2!1sen!2sus!4v1731812607168!5m2!1sen!2sus" width="570" height="500" style="border:0;" allowfullscreen="" loading="lazy" class="lg:rounded-xl lg:mb-4" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<div class="basis-1/3 overflow-hidden mx-auto md:hidden lg:hidden">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6120.924192987885!2d-75.56311592187585!3d39.908673971526014!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c6f042ac27b4e9%3A0xc4a8ba245e1ee29d!2sPenn%20Oaks%20Golf%20Club!5e0!3m2!1sen!2sus!4v1731812607168!5m2!1sen!2sus" width="370" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,34 @@
<div id="our-story" class="w-screen bg-[<%= color %>] lg:bg-[#fdfefe] lg:my-8">
<div class="container mx-auto lg:h-fit text-slate-900 lg:rounded-2xl bg-[<%= color %>] 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>

View File

@@ -0,0 +1,17 @@
<div id="registry" class="w-screen text-slate-900 lg:my-8 bg-[<%= color %>] lg:bg-[#fdfefe]">
<div class="container mx-auto bg-[<%= color %>] 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 youd like to help us start our next chapter,
weve 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>

View File

@@ -0,0 +1,43 @@
<div id="wedding-party" class="w-screen text-slate-900 lg:my-8 bg-[<%= color %>] lg:bg-[#fdfefe]">
<div class="container mx-auto bg-[<%= color %>] lg:rounded-2xl pt-4 lg:mt-4 lg:pb-2 lg:shadow-2xl lg:mb-4">
<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>

View File

@@ -1,8 +1,5 @@
<!-- options: #a99dab #dfebde -->
<div class="bg-[#a99dab] w-screen">
<!--- HERO START --->
<div class="hero-bg h-3/4">
<!-- Nav START -->
<div class="relative h-12 z-30">
<div id="burger-menu" class="absolute right-0 pr-4 pt-4 block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded hover:text-white hover:border-white">
@@ -11,13 +8,11 @@
</div>
<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="#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="/rsvp" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white pb-4">RSVP</a>
<div id="nav-links" class="text-xl max-lg:hidden flex flex-col pl-4 lg:flex-row lg:mr-4 mb-4">
<% @sections.each do |s| %>
<a href="#<%= s.id %>" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24"><%= s.title %></a>
<% end %>
</div>
</div>
</nav>
@@ -28,7 +23,6 @@
<img src="<%= image_path 'lavender-wisp.png' %>" class="basis-1/2 max-w-40 lg:max-w-80" style="transform: scaleX(-1)"/>
</div>
</div>
<!-- Nav END -->
<div class="container mx-auto">
<div class="pt-12 pb-8 flex flex-col items-center">
<span class="fleur-de-leah-regular text-8xl basis-1/3">Jillian</span>
@@ -37,187 +31,25 @@
</div>
</div>
<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">
<div class="text-xl px-4 lg:text-2xl">June 7, 2025 • West Chester, PA</div>
<div class="text-2xl px-4 lg:text-2xl">June 7, 2025 </div>
<div class="text-xl px-4 lg:text-xl">Penn Oaks Golf Club, West Chester, PA</div>
</div>
<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="#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>
</div>
</div>
</div>
</div>
<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="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">
<h1 class="text-5xl px-4 pt-8 pb-4 rogue-script lg:text-7xl">Ceremony & Reception</h1>
</div>
<div class="flex flex-col lg:flex-row lg:space-x-4">
<div class="basis-1/3 max-md:hidden lg:rounded-bl-2xl lg:content-center">
<img src="<%= image_path 'love-park-small.png' %>" class="lg:scale(0.7) lg:rounded-bl-2xl md:mx-auto" />
</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'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>
<% @sections.each do |s| %>
<a href="#<%= s.id %>" class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 px-12"><%= s.title %></a>
<div class="pb-4">
<div class="flex flex-row px-8 items-center">
<svg width="30" height="30" viewbox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.02 7.207c.26-.457.915-.734 1.565-.55.64.18.93.697.851 1.141-.085.464-.576.898-1.268.895a.604.604 0 0 0-.08.005.6.6 0 0 0-.687.594v1.613l-5.246 2.963-.002.001-3.064 1.716-.004.002c-.538.307-.779.94-.651 1.519v.002c.132.586.632 1.054 1.268 1.063H20.28c.64 0 1.147-.465 1.283-1.055v-.002c.132-.582-.11-1.217-.647-1.526l-.003-.002-3.02-1.716-2.747-1.556a.6.6 0 0 0-.591 1.045l2.746 1.554 3.017 1.715c.046.027.1.11.075.22-.024.103-.091.123-.113.123H3.717c-.024 0-.089-.024-.112-.125-.023-.109.031-.19.073-.215l3.063-1.716.002-.001 5.535-3.127a.598.598 0 0 0 .287-.376.599.599 0 0 0 .035-.204V9.86c.985-.158 1.836-.851 2.017-1.848.209-1.16-.583-2.194-1.706-2.51-1.11-.313-2.366.113-2.934 1.11a.6.6 0 1 0 1.043.595z" fill="currentColor"></path>
</svg>
<span class="text-md px-4">Formal Attire</span>
</div>
</div>
<div class="pb-4">
<div class="flex flex-row px-8 items-center">
<svg width="30" height="30" viewbox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.437 9.041c0-3.73 2.886-6.81 6.52-6.835A.61.61 0 0 1 12 2.204c3.653 0 6.563 3.091 6.563 6.837 0 5.975-3.986 10.694-5.527 12.298a1.401 1.401 0 0 1-1.036.456c-.393 0-.772-.165-1.036-.456-1.54-1.605-5.527-6.34-5.527-12.298zM12 3.406c.013 0 .026 0 .039-.002 2.921.022 5.324 2.516 5.324 5.637 0 5.489-3.702 9.916-5.199 11.474a.597.597 0 0 0-.015.016.202.202 0 0 1-.149.064.202.202 0 0 1-.149-.064.388.388 0 0 0-.015-.016C10.34 18.957 6.637 14.513 6.637 9.04c0-3.134 2.423-5.635 5.363-5.635zM9.332 8.729A2.67 2.67 0 1 1 12 11.4a2.67 2.67 0 0 1-2.668-2.67zM12 4.86a3.87 3.87 0 0 0-3.868 3.87A3.87 3.87 0 1 0 12 4.86z" fill="currentColor"></path>
</svg>
<span class="text-md px-4">150 Penn Oaks Dr, West Chester, PA 19382</span>
</div>
</div>
<div class="max-md:hidden md:w-fit md:mx-auto ">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6120.924192987885!2d-75.56311592187585!3d39.908673971526014!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c6f042ac27b4e9%3A0xc4a8ba245e1ee29d!2sPenn%20Oaks%20Golf%20Club!5e0!3m2!1sen!2sus!4v1731812607168!5m2!1sen!2sus" width="570" height="500" style="border:0;" allowfullscreen="" loading="lazy" class="lg:rounded-xl lg:mb-4" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<div class="basis-1/3 overflow-hidden mx-auto md:hidden lg:hidden">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6120.924192987885!2d-75.56311592187585!3d39.908673971526014!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c6f042ac27b4e9%3A0xc4a8ba245e1ee29d!2sPenn%20Oaks%20Golf%20Club!5e0!3m2!1sen!2sus!4v1731812607168!5m2!1sen!2sus" width="370" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</div>
<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="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">
<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 youd like to help us start our next chapter,
weve 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>
<% @sections.each do |section| %>
<%= render section.id, color: cycle("#ddd3be", "#b2c0b2") %>
<% end %>
<!-- stuff a bunch of classes in here so they don't get optimized out -->
<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%] bg-[#ddd3be] bg-[#b2c0b2]"></div>
</div>