feat: add dark styles to 404 gift, add instructions and set gift at t…

…he top

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.

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,25 +23,39 @@ 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>
 		);
 	}
 
 	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
+ */