From f1214167e690b7fca868c2e34a8c19aaf27077e2 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Fri, 12 Sep 2025 08:55:21 -0600
Subject: [PATCH] Ask Organizer variant added

---
 app/blog/[slug]/page.js         | 17 +++++++++--------
 app/components/AskOrganizer.js  |  8 ++++++--
 app/components/ContentLockup.js | 14 +++++++++++++-
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/app/blog/[slug]/page.js b/app/blog/[slug]/page.js
index af1a95b..886deda 100644
--- a/app/blog/[slug]/page.js
+++ b/app/blog/[slug]/page.js
@@ -6,6 +6,14 @@ import RelatedArticles from "../../components/RelatedArticles";
 import AskOrganizer from "../../components/AskOrganizer";
 import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
 
+// AskOrganizer data - same as index page
+const askOrganizerData = {
+  title: "Still have questions?",
+  subtitle: "Get answers from an experienced organizer",
+  buttonText: "Ask an organizer",
+  buttonHref: "#contact",
+};
+
 /**
  * Generate static params for all blog posts
  * This enables static generation for all blog posts at build time
@@ -130,14 +138,7 @@ export default async function BlogPostPage({ params }) {
       />
 
       {/* Ask Organizer Section */}
-      <AskOrganizer
-        title="Have questions about this topic?"
-        subtitle="Get help from experienced organizers"
-        description="Our community organizers are here to help you implement these strategies in your own community. Reach out for personalized guidance and support."
-        buttonText="Ask an organizer"
-        buttonHref="/contact"
-        variant="centered"
-      />
+      <AskOrganizer {...askOrganizerData} variant="inverse" />
     </div>
   );
 }
diff --git a/app/components/AskOrganizer.js b/app/components/AskOrganizer.js
index 0e3244d..0063608 100644
--- a/app/components/AskOrganizer.js
+++ b/app/components/AskOrganizer.js
@@ -52,6 +52,10 @@ const AskOrganizer = ({
       container: "text-center",
       buttonContainer: "flex justify-center",
     },
+    inverse: {
+      container: "text-center",
+      buttonContainer: "flex justify-center",
+    },
   };
 
   const styles = variantStyles[variant] || variantStyles.centered;
@@ -81,7 +85,7 @@ const AskOrganizer = ({
           title={title}
           subtitle={subtitle}
           description={description}
-          variant="ask"
+          variant={variant === "inverse" ? "ask-inverse" : "ask"}
           alignment={variant === "left-aligned" ? "left" : "center"}
         />
 
@@ -90,7 +94,7 @@ const AskOrganizer = ({
           <Button
             href={buttonHref}
             size="large"
-            variant="default"
+            variant={variant === "inverse" ? "primary" : "default"}
             className="xl:!px-[var(--spacing-scale-020)] xl:!py-[var(--spacing-scale-012)] xl:!text-[24px] xl:!leading-[28px]"
             onClick={handleContactClick}
             aria-label={`${buttonText} - Contact an organizer for help`}
diff --git a/app/components/ContentLockup.js b/app/components/ContentLockup.js
index f6056c9..fbff962 100644
--- a/app/components/ContentLockup.js
+++ b/app/components/ContentLockup.js
@@ -59,13 +59,25 @@ const ContentLockup = ({
       shape:
         "w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]",
     },
+    "ask-inverse": {
+      container: "flex flex-col gap-[var(--spacing-scale-008)] relative z-10",
+      textContainer: "flex flex-col gap-[var(--spacing-scale-008)]",
+      titleGroup: "flex flex-col gap-[var(--spacing-scale-008)]",
+      titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",
+      title:
+        "font-bricolage-grotesque font-medium text-[36px] leading-[110%] tracking-[0] md:text-[44px] md:leading-[110%] xl:text-[52px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]",
+      subtitle:
+        "font-inter font-normal text-[18px] leading-[130%] tracking-[0] md:text-[24px] md:leading-[32px] text-[var(--color-content-inverse-primary)]",
+      shape:
+        "w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]",
+    },
   };
 
   const styles = variantStyles[variant] || variantStyles.hero;
 
   return (
     <div className={styles.container}>
-      {variant === "ask" ? (
+      {variant === "ask" || variant === "ask-inverse" ? (
         /* Simplified structure for ask variant */
         <div
           className={`${styles.titleGroup} ${