From 455daf6090a1cb6cbb6147e2ad28814f4554de5b Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Fri, 16 May 2025 15:36:31 -0600
Subject: [PATCH] update ad banner

---
 src/pages/parts/home/HeroPart.tsx | 124 +++++++++++++++++++++++-------
 1 file changed, 96 insertions(+), 28 deletions(-)

diff --git a/src/pages/parts/home/HeroPart.tsx b/src/pages/parts/home/HeroPart.tsx
index 56717a67..3d7469a2 100644
--- a/src/pages/parts/home/HeroPart.tsx
+++ b/src/pages/parts/home/HeroPart.tsx
@@ -130,34 +130,102 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
 
       {/* Optional ad */}
       {conf().SHOW_AD && !isAdDismissed ? (
-        <div className="-mb-10 md:-mb-20 w-fit max-w-[16rem] mx-auto relative group pb-4">
-          <button
-            onClick={dismissAd}
-            type="button"
-            className="absolute -top-2 -right-2 w-6 h-6 bg-mediaCard-hoverBackground rounded-full flex items-center justify-center md:opacity-0 group-hover:opacity-100 transition-opacity duration-300"
-            aria-label="Dismiss ad"
-          >
-            <Icon
-              className="text-xs font-semibold text-type-secondary"
-              icon={Icons.X}
-            />
-          </button>
-          {conf().AD_CONTENT_URL.length !== 0 ? (
-            <div>
-              <a href={conf().AD_CONTENT_URL[0]}>
-                <img src={conf().AD_CONTENT_URL[1]} alt="ad banner" />
-              </a>
-            </div>
-          ) : null}
-          <p className="text-xs text-type-dimmed text-center pt-2 mx-4">
-            <a
-              href="https://discord.gg/mcjnJK98Gd"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Your ad here (づ ᴗ _ᴗ)づ♡
-            </a>
-          </p>
+        <div className="-mb-10 md:-mb-20 w-fit max-w-[32rem] mx-auto relative group pb-4">
+          {(() => {
+            const adContentUrl = conf().AD_CONTENT_URL;
+
+            // VITE_AD_CONTENT_URL=default message (null will be nothing),referal link,image link, card message
+            // Ensure adContentUrl is an array. If not, render nothing for ads.
+            if (!Array.isArray(adContentUrl)) {
+              return null;
+            }
+
+            const ad1LinkIsValid =
+              typeof adContentUrl[1] === "string" && adContentUrl[1].length > 0;
+            const ad1ImageIsProvided = typeof adContentUrl[2] === "string";
+            const showAd1 =
+              adContentUrl.length >= 2 && ad1LinkIsValid && ad1ImageIsProvided;
+
+            const ad2LinkIsValid =
+              typeof adContentUrl[3] === "string" && adContentUrl[3].length > 0;
+            const ad2ImageIsProvided = typeof adContentUrl[4] === "string";
+            const showAd2 =
+              adContentUrl.length >= 5 && ad2LinkIsValid && ad2ImageIsProvided;
+
+            return (
+              <>
+                <div className="flex flex-col md:flex-row md:space-x-4 space-y-4 md:space-y-0 justify-center w-full items-center md:items-start">
+                  {showAd1 ? (
+                    <div className="hover:scale-[1.02] max-w-[16rem] bg-opacity-10 bg-buttons-purple backdrop-blur-sm rounded-xl border-2 border-buttons-purple border-opacity-30 transition-all duration-300 hover:border-opacity-70 hover:shadow-lg hover:shadow-buttons-purple/20 md:flex-1 relative group">
+                      <button
+                        onClick={dismissAd}
+                        type="button"
+                        className="absolute z-50 -top-2 -right-2 w-6 h-6 bg-mediaCard-hoverBackground rounded-full flex items-center justify-center md:opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+                        aria-label="Dismiss ad"
+                      >
+                        <Icon
+                          className="text-xs font-semibold text-type-secondary"
+                          icon={Icons.X}
+                        />
+                      </button>
+                      <a href={adContentUrl[1]} className="block">
+                        <div className="overflow-hidden rounded-t-xl">
+                          <img
+                            src={adContentUrl[2]}
+                            alt="ad banner"
+                            className="w-full h-auto transition-transform duration-300"
+                          />
+                        </div>
+                        <p className="text-xs text-type-dimmed text-center py-2 transition-colors duration-300 group-hover:text-type-secondary">
+                          <span>{adContentUrl[3]}</span>
+                        </p>
+                      </a>
+                    </div>
+                  ) : null}
+                  {showAd2 ? (
+                    <div className="hover:scale-[1.02] max-w-[16rem] bg-opacity-10 bg-buttons-purple backdrop-blur-sm rounded-xl border-2 border-buttons-purple border-opacity-30 transition-all duration-300 hover:border-opacity-70 hover:shadow-lg hover:shadow-buttons-purple/20 md:flex-1 relative group">
+                      <button
+                        onClick={dismissAd}
+                        type="button"
+                        className="absolute z-50 -top-2 -right-2 w-6 h-6 bg-mediaCard-hoverBackground rounded-full flex items-center justify-center md:opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+                        aria-label="Dismiss ad"
+                      >
+                        <Icon
+                          className="text-xs font-semibold text-type-secondary"
+                          icon={Icons.X}
+                        />
+                      </button>
+                      <a href={adContentUrl[4]} className="block">
+                        <div className="overflow-hidden rounded-t-xl">
+                          <img
+                            src={adContentUrl[5]}
+                            alt="ad banner"
+                            className="w-full h-auto transition-transform duration-300"
+                          />
+                        </div>
+                        <p className="text-xs text-type-dimmed text-center py-2 transition-colors duration-300 group-hover:text-type-secondary">
+                          <span>{adContentUrl[6]}</span>
+                        </p>
+                      </a>
+                    </div>
+                  ) : null}
+                </div>
+                {adContentUrl[0] !== "null" && (
+                  <div>
+                    <p className="text-xs text-type-dimmed text-center pt-2 mx-4">
+                      <a
+                        href="https://discord.gg/mcjnJK98Gd"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {adContentUrl[0]}
+                      </a>
+                    </p>
+                  </div>
+                )}
+              </>
+            );
+          })()}
         </div>
       ) : null}
       {/* End of ad */}