adam/weddingplan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add registry mockup

Browse Source
This commit is contained in:
Adam Mohammed
2025-02-05 22:58:48 -05:00
parent 308000ca72
commit 45379ae891
1 changed files with 57 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
app/views/home/index.html.erb
View File

@@ -12,11 +12,13 @@
<nav class="flex items-center justify-between flex-wrap pt-12 z-30"> <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 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"> <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="#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="#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="#more-info" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">More Info</a>
<a href="#accommodations" class="block my-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="#rsvp" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white pb-4">RSVP</a> -->
</div> </div>
</div> </div>
@@ -47,9 +49,10 @@
<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 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"> <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="#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="#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="#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> <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="#registry" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Registry</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="#rsvp" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white">RSVP</a> -->
@@ -60,40 +63,6 @@
<div class="container mx-auto flex flex-row justify-center md:hidden lg:hidden"> <div class="container mx-auto flex flex-row justify-center md:hidden lg:hidden">
<img src="<%= image_path 'love-park-small.png' %>"> <img src="<%= image_path 'love-park-small.png' %>">
</div> </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 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 id="ceremony" class="w-screen bg-[#b2c0b2] lg:bg-[#fdfefe] lg:my-8"> <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="container mx-auto lg:h-fit text-slate-900 lg:rounded-2xl bg-[#b2c0b2] lg:shadow-2xl">
<div class="w-fit mx-auto"> <div class="w-fit mx-auto">
@@ -104,7 +73,7 @@
<img src="<%= image_path 'love-park-small.png' %>" class="lg:scale(0.7) lg:rounded-bl-2xl md:mx-auto" /> <img src="<%= image_path 'love-park-small.png' %>" class="lg:scale(0.7) lg:rounded-bl-2xl md:mx-auto" />
</div> </div>
<div class="basis-2/3"> <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-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 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> <p class="text-xl px-4 py-2" >We are looking forward to seeing you there!</p>
@@ -143,8 +112,8 @@
<span class="text-5xl pl-4 lg:pt-4 rogue-script lg:text-7xl">Accommodations</span> <span class="text-5xl pl-4 lg:pt-4 rogue-script lg:text-7xl">Accommodations</span>
</div> </div>
<div class="lg:w-fit px-8"> <div class="lg:w-2/3 px-8 lg:mx-auto">
<p class="text-lg">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> <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>
<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-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"> <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">
@@ -159,21 +128,56 @@
</div> </div>
</div> </div>
</div> </div>
<div id="more-info" class="w-screen text-slate-900 bg-[#ddd3be] lg:bg-[#fdfefe]"> <div id="registry" class="w-screen text-slate-900 lg:my-8 bg-[#b2c0b2] 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="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"> <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> <span class="text-5xl pl-4 lg:pt-4 rogue-script lg:text-7xl">Registry & Gifts</span>
</div> </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 my-4 lg:flex-row lg:w-1/3 lg:mx-auto lg:my-12 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="#">Macy's</a>
<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="#">Amazon</a>
</div>
</div>
</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"> <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> <h1 class="text-5xl rogue-script lg:text-7xl">How we met</h1>
<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>Bridal Party Colors</li>
<li>Registry</li>
</ul>
</div> </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> </div>
</div> </div>