Refactor gift registry UI to use InfoCard component

Simplified the gift registry section by replacing custom JSX with the reusable InfoCard component. This improves code maintainability and consistency in the UI while retaining the existing styles and functionality. Updated InfoCard styling to ensure compatibility with the new use case.

frontend/src/app/(public)/invite/[slug]/page.tsx

@@ -252,61 +252,27 @@ const InvitationPage = () => {
         )}
         {/* Gift Registry with Lion */}
         {event.gift_registry_enabled && (
-          <div className="mb-10 flex flex-col items-center md:flex-row md:items-center md:space-x-6">
+          <InfoCard
-            <div>
+            imageSrc={getAssetUrl("lion")}
-              <div
+            imageAlt="Lion"
-                className="flex h-24 w-24 items-center justify-center rounded-full border-2 md:h-28 md:w-28"
+            imagePosition="right"
-                style={{ borderColor: colors.accent3 }}
+            borderColor={colors.accent3}
-              >
+            backgroundColor="rgba(240, 233, 214, 0.7)"
-                {getAssetUrl("lion") ? (
+            boxShadow="0 2px 4px rgba(0, 0, 0, 0.05)"
-                  <div className="relative h-20 w-20 md:h-24 md:w-24">
+            headingText="Gift Registry"
-                    <Image
+            headingStyle={{
-                      src={getAssetUrl("lion") || ""}
+              fontFamily: eventTheme?.fonts?.heading || "sans-serif",
-                      alt="Lion"
+              color: colors.text,
-                      fill
+            }}
-                      className="object-contain"
+            bodyText="View Emma's Wishes"
-                    />
+            bodyTextColor={colors.text}
-                  </div>
+            buttonProps={{
-                ) : (
+              text: "View Gifts",
-                  <p className="text-center text-sm">Lion</p>
+              href: `/gifts/${event.slug}`,
-                )}
+              backgroundColor: colors.accent3,
-              </div>
+              textColor: "#ffffff",
-            </div>
+            }}
-            <Card
+          />
-              className="mt-4 flex-1 p-6 md:mt-0"
-              style={{
-                backgroundColor: "rgba(240, 233, 214, 0.7)",
-                borderColor: colors.accent3,
-                boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)",
-              }}
-            >
-              <h3
-                className="mb-2 text-center text-2xl font-bold md:text-left"
-                style={headingStyle}
-              >
-                Gift Registry
-              </h3>
-              <p
-                style={{ color: colors.text }}
-                className="text-center md:text-left"
-              >
-                View Emma's Wishes
-              </p>
-              <div className="mt-4 text-center md:text-left">
-                <Link href={`/gifts/${event.slug}`}>
-                  <Button
-                    className="rounded-full"
-                    style={{
-                      backgroundColor: colors.accent3,
-                      color: "white",
-                    }}
-                  >
-                    View Gifts
-                  </Button>
-                </Link>
-              </div>
-            </Card>
-          </div>
         )}
         {/* View Map Button */}
         {event.location_url && (

frontend/src/components/info-card.tsx

@@ -75,12 +75,13 @@ const InfoCard: React.FC<InfoCardProps> = ({
         imagePosition === "right"
           ? "md:flex-row-reverse md:space-x-reverse"
           : "md:flex-row",
+        "w-full",
       )}
     >
       {imageElement}
 
       <Card
-        className="flex-1 relative overflow-hidden p-6"
+        className="flex-1 relative overflow-hidden p-6 w-full"
         style={{ backgroundColor, borderColor, boxShadow }}
       >
         {imageSrc && (