From 77f271c7aa61f536c23fd6de906d5ed21551e254 Mon Sep 17 00:00:00 2001
From: Adam Mohammed <admohammed@equinix.com>
Date: Sat, 16 Nov 2024 20:35:46 -0500
Subject: [PATCH] Better layout

---
 app/views/home/index.html.erb | 71 +++++++++++++++++++++--------------
 1 file changed, 43 insertions(+), 28 deletions(-)

diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index 7f9fc3a..19f793d 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -4,14 +4,50 @@
   <!--- HERO START --->
   <div class="hero-bg h-3/4">
       <!-- Nav START -->
-    <nav class="flex items-center justify-between flex-wrap">
-      <div id="burger-menu" class="block lg:hidden">
-	<button class="flex items-center px-3 py-2 border rounded hover:text-white hover:border-white">
-	  <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
-	</button>
+      <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">
+	    <svg class="fill-current text-slate-300 h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+	  </button>
+	</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-md:hidden flex flex-col pl-4 lg:flex-row lg:mr-4">
+	      <a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Ceremony & Reception</a>
+	      <a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Accommodations</a>
+	      <a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Dress</a>
+	      <a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Registry</a>
+	      <a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white pb-4">RSVP</a>
+	    </div>
+	  </div>
+	</nav>
       </div>
-      <div class="w-full block flex-grow lg:hidden">
-	<div id="nav-links" class="text-xl max-md:hidden flex flex-col lg:flex-row lg:mr-4">
+  <!-- Nav END -->
+      <div class="container mx-auto">
+	<div class="pt-24 pb-8 flex flex-col items-center">
+	  <div class="fleur-de-leah-regular text-8xl basis-1/3">Jillian</div>
+	  <div class="fleur-de-leah-regular text-6xl basis-1/3">and</div>
+	  <div class="fleur-de-leah-regular text-8xl basis-1/3">Adam</div>
+	</div>
+      </div>
+
+      <div class="container mx-auto flex flex-col items-center py-4">
+	<button class="text-3xl rounded-lg bg-emerald-700 px-4 py-4 text-slate-300 hover:bg-emerald-600">RSVP</button>
+      </div>
+
+      <div class="container mx-auto flex flex-col items-center py-4">
+	<div class="text-2xl">June 7, 2025 • West Chester, PA</div>
+      </div>
+
+
+	  <!-- <div class="mx-auto items-center w-fit"> -->
+	  <!--   <div class="text-3xl py-4">June 7, 2025</div> -->
+	  <!-- </div> -->
+	  <!-- <div class="mx-auto items-center w-fit"> -->
+	  <!--   <div class="text-3xl py-4">207 DAYS TO GO!</div> -->
+	  <!-- </div> -->
+      <div class="w-full block flex-grow max-md:hidden lg:flex lg:w-auto  lg:justify-center">
+	<div id="nav-links-lg" class="text-xl  flex flex-col lg:flex-row lg:mr-4">
 	  <a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Ceremony & Reception</a>
 	  <a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Accommodations</a>
 	  <a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Dress</a>
@@ -19,27 +55,6 @@
 	  <a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white">RSVP</a>
 	</div>
       </div>
-    </nav>
-  <!-- Nav END -->
-
-    <div class="w-fit mx-auto py-56 sm:py-24">
-      <h1 class="fleur-de-leah-regular text-darkgreen-600 text-7xl">Jillian & Adam</h1>
-      <div class="mx-auto items-center w-fit">
-	<div class="text-3xl py-4">June 7, 2025</div>
-      </div>
-      <div class="mx-auto items-center w-fit">
-	<div class="text-3xl py-4">207 DAYS TO GO!</div>
-      </div>
-    </div>
-    <div class="w-full block flex-grow max-md:hidden lg:flex lg:w-auto  lg:justify-center">
-      <div id="nav-links-lg" class="text-xl  flex flex-col lg:flex-row lg:mr-4">
-	<a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Ceremony & Reception</a>
-	<a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Accommodations</a>
-	<a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Dress</a>
-	<a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Registry</a>
-	<a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white">RSVP</a>
-      </div>
-    </div>
   </div>
 </div>
 <div id="ceremony" class="w-screen bg-[#a99dab]">