From 689198b7ca841f0378f8f2e9167a4fd01b1dbb3e Mon Sep 17 00:00:00 2001
From: Ricardo Castro <soyricardodev@proton.me>
Date: Sun, 30 Jun 2024 04:37:56 +0200
Subject: [PATCH] feat: add dark styles to 404 gift, add instructions and set
 gift at the top

---
 apps/gifting-concierge/README.md              |  2 +-
 .../src/app/confirm/[giftId]/page.tsx         | 39 ++++++++++++++-----
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/apps/gifting-concierge/README.md b/apps/gifting-concierge/README.md
index d913ac1f..833239a5 100644
--- a/apps/gifting-concierge/README.md
+++ b/apps/gifting-concierge/README.md
@@ -1,7 +1,7 @@
 Tasks:
 
 Confirm Gift Tasks:
-- [ ] put the gif up top as the first thing people see.
+- [x] put the gif up top as the first thing people see.
 
 Header:
 - [ ] Let’s clean up the menu header. We don’t need the cart, AI, or get started button up there.
diff --git a/apps/gifting-concierge/src/app/confirm/[giftId]/page.tsx b/apps/gifting-concierge/src/app/confirm/[giftId]/page.tsx
index cdbd874c..17778527 100644
--- a/apps/gifting-concierge/src/app/confirm/[giftId]/page.tsx
+++ b/apps/gifting-concierge/src/app/confirm/[giftId]/page.tsx
@@ -5,6 +5,8 @@ import { ConfirmGift } from "./confirm-gift";
 import { ChevronRightIcon } from "lucide-react";
 import ShippingForm from "./details/shipping-form";
 import giftboxGIF from "~/assets/giftbox2.gif";
+import { cn } from "@theliaison/ui";
+import { buttonVariants } from "@theliaison/ui/button";
 
 export default async function Confirm({
 	params: { giftId },
@@ -21,9 +23,17 @@ export default async function Confirm({
 
 	if (error) {
 		return (
-			<div>
+			<div className="flex flex-col items-center justify-center">
 				<h1>This gift does not exist anymore.</h1>
-				<Link href="/gifts">Go back to the list of gifts</Link>
+				<Link
+					href="/gifts"
+					className={cn(
+						buttonVariants(),
+						"bg-white text-black hover:text-black hover:bg-white/90",
+					)}
+				>
+					Go back to the list of gifts
+				</Link>
 			</div>
 		);
 	}
@@ -31,15 +41,21 @@ export default async function Confirm({
 	return (
 		<div className="flex flex-col relative z-20">
 			<section className="w-full py-12 md:py-24 lg:py-32">
+				<Image
+					src={giftboxGIF}
+					alt="Giftbox"
+					className="mx-auto w-full max-w-xl hover:scale-105 transition-all hover:[filter:drop-shadow(0_0_8px_#f0f0f0)]"
+				/>
 				<div className="relative mx-auto flex max-w-2xl flex-col items-center">
 					<h1 className="text-center text-gray-50 font-medium tracking-tighter text-4xl/none sm:text-6xl/none">
-						Hey, someone special
+						Someone Special
 						<span className="inline-flex animate-background-shine bg-[linear-gradient(110deg,#939393,45%,#DBD0C5,55%,#939393)] bg-[length:250%_100%] bg-clip-text text-transparent leading-tight">
-							wants to send you a gift.
+							Wants to Send You a Gift!
 						</span>
 					</h1>
 					<p className="mt-6 text-center text-lg leading-6 text-gray-200">
-						The Liaison Gifting concierge manages the gift sending.
+						Enter Your Address Securely to Receive Your Gift! The Liaison will
+						handle the rest.
 					</p>
 					<div className="w-full mx-auto flex items-center justify-center gap-6 mt-12">
 						<ConfirmGift>
@@ -59,12 +75,15 @@ export default async function Confirm({
 						</Link>
 					</div>
 				</div>
-				<Image
-					src={giftboxGIF}
-					alt="Giftbox"
-					className="mx-auto w-full max-w-xl lg:order-last hover:scale-105 transition-all hover:[filter:drop-shadow(0_0_8px_#f0f0f0)]"
-				/>
 			</section>
 		</div>
 	);
 }
+
+/**
+ * Intructions:
+ * 1. Rest assured, your address will only be used to deliver your gift and will remain private. The sender will not know your address.
+ * 2. The gift sender wanted to keep this gift a surprise, so enjoy the anticipation.
+ * 3. Fast and Secure Delivery. Once you provide your address, we'll take care of the rest and deliver your gift promptly.
+ * CTA Button: Submit Address Securely
+ */