From 0f996889d29bb52b51c74e690f2e1b4c4c8acffc Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 27 Aug 2025 10:50:05 -0600
Subject: [PATCH 1/5] Ask Organizer default breakpoint

---
 app/components/AskOrganizer.js  | 42 +++++++++++++++++++++++++
 app/components/ContentLockup.js | 55 +++++++++++++++++++++++----------
 app/page.js                     |  9 ++++++
 stories/AskOrganizer.stories.js | 47 ++++++++++++++++++++++++++++
 4 files changed, 137 insertions(+), 16 deletions(-)
 create mode 100644 app/components/AskOrganizer.js
 create mode 100644 stories/AskOrganizer.stories.js

diff --git a/app/components/AskOrganizer.js b/app/components/AskOrganizer.js
new file mode 100644
index 0000000..924bd98
--- /dev/null
+++ b/app/components/AskOrganizer.js
@@ -0,0 +1,42 @@
+"use client";
+
+import React from "react";
+import ContentLockup from "./ContentLockup";
+import Button from "./Button";
+
+const AskOrganizer = ({
+  title,
+  subtitle,
+  description,
+  buttonText = "Ask an organizer",
+  buttonHref = "#",
+  className = "",
+}) => {
+  return (
+    <section
+      className={`py-[var(--spacing-scale-032)] px-[var(--spacing-scale-032)] ${className}`}
+      aria-labelledby="ask-organizer-headline"
+      role="region"
+      tabIndex={-1}
+    >
+      <div className="flex flex-col gap-[var(--spacing-scale-040)]">
+        {/* Content Lockup */}
+        <ContentLockup
+          title={title}
+          subtitle={subtitle}
+          description={description}
+          variant="ask"
+        />
+
+        {/* Button */}
+        <div className="flex justify-center">
+          <Button href={buttonHref} size="small" variant="default">
+            {buttonText}
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AskOrganizer;
diff --git a/app/components/ContentLockup.js b/app/components/ContentLockup.js
index 2474f8c..e540be1 100644
--- a/app/components/ContentLockup.js
+++ b/app/components/ContentLockup.js
@@ -46,35 +46,58 @@ const ContentLockup = ({
       shape:
         "w-[20px] h-[20px] md:w-[24px] md:h-[24px] lg:w-[28px] lg:h-[28px]",
     },
+    ask: {
+      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 justify-center",
+      title:
+        "font-bricolage-grotesque font-medium text-[36px] leading-[110%] tracking-[0] text-[var(--color-content-default-brand-primary)] text-center",
+      subtitle:
+        "font-inter font-normal text-[18px] leading-[130%] tracking-[0] text-[var(--color-content-default-primary)] text-center",
+      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}>
-      {/* Text content container */}
-      <div className={styles.textContainer}>
-        {/* Title and subtitle group */}
+      {variant === "ask" ? (
+        /* Simplified structure for ask variant */
         <div className={styles.titleGroup}>
-          {/* Title container */}
           <div className={styles.titleContainer}>
             <h1 className={styles.title}>{title}</h1>
-            {variant === "hero" && (
-              <img
-                src="assets/Shapes_1.svg"
-                alt="Decorative shapes"
-                className={styles.shape}
-              />
-            )}
           </div>
-
-          {/* Subtitle */}
           <h2 className={styles.subtitle}>{subtitle}</h2>
         </div>
+      ) : (
+        /* Full structure for other variants */
+        <div className={styles.textContainer}>
+          {/* Title and subtitle group */}
+          <div className={styles.titleGroup}>
+            {/* Title container */}
+            <div className={styles.titleContainer}>
+              <h1 className={styles.title}>{title}</h1>
+              {variant === "hero" && (
+                <img
+                  src="assets/Shapes_1.svg"
+                  alt="Decorative shapes"
+                  className={styles.shape}
+                />
+              )}
+            </div>
 
-        {/* Description */}
-        {description && <p className={styles.description}>{description}</p>}
-      </div>
+            {/* Subtitle */}
+            <h2 className={styles.subtitle}>{subtitle}</h2>
+          </div>
+
+          {/* Description */}
+          {description && <p className={styles.description}>{description}</p>}
+        </div>
+      )}
 
       {/* Link for feature variant */}
       {variant === "feature" && linkText && (
diff --git a/app/page.js b/app/page.js
index 484966f..41d2fd0 100644
--- a/app/page.js
+++ b/app/page.js
@@ -4,6 +4,7 @@ import LogoWall from "./components/LogoWall";
 import RuleStack from "./components/RuleStack";
 import QuoteBlock from "./components/QuoteBlock";
 import FeatureGrid from "./components/FeatureGrid";
+import AskOrganizer from "./components/AskOrganizer";
 
 export default function Page() {
   const heroBannerData = {
@@ -43,6 +44,13 @@ export default function Page() {
       "Use our toolkit to improve, document, and evolve your organization.",
   };
 
+  const askOrganizerData = {
+    title: "Still have questions?",
+    subtitle: "Get answers from an experienced organizer",
+    buttonText: "Ask an organizer",
+    buttonHref: "#contact",
+  };
+
   return (
     <div>
       <HeroBanner {...heroBannerData} />
@@ -51,6 +59,7 @@ export default function Page() {
       <RuleStack />
       <FeatureGrid {...featureGridData} />
       <QuoteBlock />
+      <AskOrganizer {...askOrganizerData} />
     </div>
   );
 }
diff --git a/stories/AskOrganizer.stories.js b/stories/AskOrganizer.stories.js
new file mode 100644
index 0000000..1cb5bc5
--- /dev/null
+++ b/stories/AskOrganizer.stories.js
@@ -0,0 +1,47 @@
+import AskOrganizer from "../app/components/AskOrganizer";
+
+export default {
+  title: "Components/AskOrganizer",
+  component: AskOrganizer,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The AskOrganizer component provides clear pathways for user inquiries. This component serves as a conversion point throughout the platform.",
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: "text",
+      description: "The main title for the ask organizer section",
+    },
+    subtitle: {
+      control: "text",
+      description: "The subtitle text",
+    },
+    description: {
+      control: "text",
+      description: "Additional description text",
+    },
+    buttonText: {
+      control: "text",
+      description: "Text for the call-to-action button",
+    },
+    buttonHref: {
+      control: "text",
+      description: "URL for the button link",
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    title: "Need help getting started?",
+    subtitle: "Our organizers are here to support you",
+    description:
+      "Whether you're forming a new community or improving an existing one, our experienced organizers can provide guidance tailored to your specific needs.",
+    buttonText: "Ask an organizer",
+    buttonHref: "#contact",
+  },
+};

From 50d4bf6a0f30185792559d93af8d7a3c90a6e47c Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 27 Aug 2025 10:53:16 -0600
Subject: [PATCH 2/5] Ask Organizer md breakpoint

---
 app/components/AskOrganizer.js  | 4 ++--
 app/components/ContentLockup.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/AskOrganizer.js b/app/components/AskOrganizer.js
index 924bd98..0660f66 100644
--- a/app/components/AskOrganizer.js
+++ b/app/components/AskOrganizer.js
@@ -14,7 +14,7 @@ const AskOrganizer = ({
 }) => {
   return (
     <section
-      className={`py-[var(--spacing-scale-032)] px-[var(--spacing-scale-032)] ${className}`}
+      className={`py-[var(--spacing-scale-032)] px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-096)] md:px-[var(--spacing-scale-064)] ${className}`}
       aria-labelledby="ask-organizer-headline"
       role="region"
       tabIndex={-1}
@@ -30,7 +30,7 @@ const AskOrganizer = ({
 
         {/* Button */}
         <div className="flex justify-center">
-          <Button href={buttonHref} size="small" variant="default">
+          <Button href={buttonHref} size="large" variant="default">
             {buttonText}
           </Button>
         </div>
diff --git a/app/components/ContentLockup.js b/app/components/ContentLockup.js
index e540be1..be061e2 100644
--- a/app/components/ContentLockup.js
+++ b/app/components/ContentLockup.js
@@ -53,9 +53,9 @@ const ContentLockup = ({
       titleContainer:
         "flex gap-[var(--spacing-scale-008)] items-center justify-center",
       title:
-        "font-bricolage-grotesque font-medium text-[36px] leading-[110%] tracking-[0] text-[var(--color-content-default-brand-primary)] text-center",
+        "font-bricolage-grotesque font-medium text-[36px] leading-[110%] tracking-[0] md:text-[44px] md:leading-[110%] text-[var(--color-content-default-brand-primary)] text-center",
       subtitle:
-        "font-inter font-normal text-[18px] leading-[130%] tracking-[0] text-[var(--color-content-default-primary)] text-center",
+        "font-inter font-normal text-[18px] leading-[130%] tracking-[0] md:text-[24px] md:leading-[32px] text-[var(--color-content-default-primary)] text-center",
       shape:
         "w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]",
     },

From d0ce6f16f2d8f090e26047068a3678d5ee80e197 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 27 Aug 2025 10:55:58 -0600
Subject: [PATCH 3/5] Ask Organizer xl breakpoint

---
 app/components/AskOrganizer.js  | 7 ++++++-
 app/components/ContentLockup.js | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/components/AskOrganizer.js b/app/components/AskOrganizer.js
index 0660f66..000c217 100644
--- a/app/components/AskOrganizer.js
+++ b/app/components/AskOrganizer.js
@@ -30,7 +30,12 @@ const AskOrganizer = ({
 
         {/* Button */}
         <div className="flex justify-center">
-          <Button href={buttonHref} size="large" variant="default">
+          <Button
+            href={buttonHref}
+            size="large"
+            variant="default"
+            className="xl:!px-[var(--spacing-scale-020)] xl:!py-[var(--spacing-scale-012)] xl:!text-[24px] xl:!leading-[28px]"
+          >
             {buttonText}
           </Button>
         </div>
diff --git a/app/components/ContentLockup.js b/app/components/ContentLockup.js
index be061e2..fc9ed41 100644
--- a/app/components/ContentLockup.js
+++ b/app/components/ContentLockup.js
@@ -53,7 +53,7 @@ const ContentLockup = ({
       titleContainer:
         "flex gap-[var(--spacing-scale-008)] items-center justify-center",
       title:
-        "font-bricolage-grotesque font-medium text-[36px] leading-[110%] tracking-[0] md:text-[44px] md:leading-[110%] text-[var(--color-content-default-brand-primary)] text-center",
+        "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-default-brand-primary)] text-center",
       subtitle:
         "font-inter font-normal text-[18px] leading-[130%] tracking-[0] md:text-[24px] md:leading-[32px] text-[var(--color-content-default-primary)] text-center",
       shape:

From 6a66f5f61fbc83c4338c64bfb6611fad5593a31f Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 27 Aug 2025 11:03:56 -0600
Subject: [PATCH 4/5] Ask Organizer storybook

---
 app/components/AskOrganizer.js   | 65 ++++++++++++++++++++++++++++++--
 app/components/ContentLockup.js  | 20 +++++++---
 stories/AskOrganizer.stories.js  | 39 +++++++++++++++++--
 stories/ContentLockup.stories.js | 10 ++++-
 4 files changed, 120 insertions(+), 14 deletions(-)

diff --git a/app/components/AskOrganizer.js b/app/components/AskOrganizer.js
index 000c217..0e3244d 100644
--- a/app/components/AskOrganizer.js
+++ b/app/components/AskOrganizer.js
@@ -11,30 +11,89 @@ const AskOrganizer = ({
   buttonText = "Ask an organizer",
   buttonHref = "#",
   className = "",
+  variant = "centered", // centered, left-aligned, compact
+  onContactClick, // Analytics callback
 }) => {
+  // Analytics tracking for contact button clicks
+  const handleContactClick = (event) => {
+    // Track contact button interaction
+    if (onContactClick) {
+      onContactClick({
+        event: "contact_button_click",
+        component: "AskOrganizer",
+        variant,
+        buttonText,
+        buttonHref,
+        timestamp: new Date().toISOString(),
+      });
+    }
+
+    // Additional analytics tracking (can be expanded)
+    if (typeof window !== "undefined" && window.gtag) {
+      window.gtag("event", "contact_button_click", {
+        event_category: "engagement",
+        event_label: "ask_organizer",
+        value: 1,
+      });
+    }
+  };
+
+  // Variant-specific styling
+  const variantStyles = {
+    centered: {
+      container: "text-center",
+      buttonContainer: "flex justify-center",
+    },
+    "left-aligned": {
+      container: "text-left",
+      buttonContainer: "flex justify-start",
+    },
+    compact: {
+      container: "text-center",
+      buttonContainer: "flex justify-center",
+    },
+  };
+
+  const styles = variantStyles[variant] || variantStyles.centered;
+
+  // Section padding based on variant
+  const sectionPadding =
+    variant === "compact"
+      ? "py-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)] md:py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-032)]"
+      : "py-[var(--spacing-scale-032)] px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-096)] md:px-[var(--spacing-scale-064)]";
+
+  // Gap between content and button based on variant
+  const contentGap =
+    variant === "compact"
+      ? "gap-[var(--spacing-scale-020)]"
+      : "gap-[var(--spacing-scale-040)]";
+
   return (
     <section
-      className={`py-[var(--spacing-scale-032)] px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-096)] md:px-[var(--spacing-scale-064)] ${className}`}
+      className={`${sectionPadding} ${className}`}
       aria-labelledby="ask-organizer-headline"
       role="region"
       tabIndex={-1}
     >
-      <div className="flex flex-col gap-[var(--spacing-scale-040)]">
+      <div className={`flex flex-col ${contentGap} ${styles.container}`}>
         {/* Content Lockup */}
         <ContentLockup
           title={title}
           subtitle={subtitle}
           description={description}
           variant="ask"
+          alignment={variant === "left-aligned" ? "left" : "center"}
         />
 
         {/* Button */}
-        <div className="flex justify-center">
+        <div className={styles.buttonContainer}>
           <Button
             href={buttonHref}
             size="large"
             variant="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`}
           >
             {buttonText}
           </Button>
diff --git a/app/components/ContentLockup.js b/app/components/ContentLockup.js
index fc9ed41..f6056c9 100644
--- a/app/components/ContentLockup.js
+++ b/app/components/ContentLockup.js
@@ -12,6 +12,7 @@ const ContentLockup = ({
   variant = "hero",
   linkText,
   linkHref,
+  alignment = "center", // center, left
 }) => {
   // Variant-specific styling
   const variantStyles = {
@@ -50,12 +51,11 @@ const ContentLockup = ({
       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 justify-center",
+      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-default-brand-primary)] text-center",
+        "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-default-brand-primary)]",
       subtitle:
-        "font-inter font-normal text-[18px] leading-[130%] tracking-[0] md:text-[24px] md:leading-[32px] text-[var(--color-content-default-primary)] text-center",
+        "font-inter font-normal text-[18px] leading-[130%] tracking-[0] md:text-[24px] md:leading-[32px] text-[var(--color-content-default-primary)]",
       shape:
         "w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]",
     },
@@ -67,8 +67,16 @@ const ContentLockup = ({
     <div className={styles.container}>
       {variant === "ask" ? (
         /* Simplified structure for ask variant */
-        <div className={styles.titleGroup}>
-          <div className={styles.titleContainer}>
+        <div
+          className={`${styles.titleGroup} ${
+            alignment === "left" ? "text-left" : "text-center"
+          }`}
+        >
+          <div
+            className={`${styles.titleContainer} ${
+              alignment === "left" ? "justify-start" : "justify-center"
+            }`}
+          >
             <h1 className={styles.title}>{title}</h1>
           </div>
           <h2 className={styles.subtitle}>{subtitle}</h2>
diff --git a/stories/AskOrganizer.stories.js b/stories/AskOrganizer.stories.js
index 1cb5bc5..7dc0e03 100644
--- a/stories/AskOrganizer.stories.js
+++ b/stories/AskOrganizer.stories.js
@@ -32,16 +32,47 @@ export default {
       control: "text",
       description: "URL for the button link",
     },
+    variant: {
+      control: { type: "select" },
+      options: ["centered", "left-aligned", "compact"],
+      description: "Layout variant for the component",
+    },
+    onContactClick: {
+      action: "contact clicked",
+      description: "Analytics callback for contact button clicks",
+    },
   },
 };
 
 export const Default = {
   args: {
-    title: "Need help getting started?",
-    subtitle: "Our organizers are here to support you",
-    description:
-      "Whether you're forming a new community or improving an existing one, our experienced organizers can provide guidance tailored to your specific needs.",
+    title: "Still have questions?",
+    subtitle: "Get answers from an experienced organizer",
     buttonText: "Ask an organizer",
     buttonHref: "#contact",
+    variant: "centered",
+    onContactClick: (data) => console.log("Contact clicked:", data),
+  },
+};
+
+export const LeftAligned = {
+  args: {
+    title: "Still have questions?",
+    subtitle: "Get answers from an experienced organizer",
+    buttonText: "Ask an organizer",
+    buttonHref: "#contact",
+    variant: "left-aligned",
+    onContactClick: (data) => console.log("Contact clicked:", data),
+  },
+};
+
+export const Compact = {
+  args: {
+    title: "Still have questions?",
+    subtitle: "Get answers from an experienced organizer",
+    buttonText: "Ask an organizer",
+    buttonHref: "#contact",
+    variant: "compact",
+    onContactClick: (data) => console.log("Contact clicked:", data),
   },
 };
diff --git a/stories/ContentLockup.stories.js b/stories/ContentLockup.stories.js
index 2c89d30..387d4ad 100644
--- a/stories/ContentLockup.stories.js
+++ b/stories/ContentLockup.stories.js
@@ -15,7 +15,7 @@ export default {
     buttonClassName: { control: { type: "text" } },
     variant: {
       control: { type: "select" },
-      options: ["hero", "feature"],
+      options: ["hero", "feature", "ask"],
     },
     linkText: { control: { type: "text" } },
     linkHref: { control: { type: "text" } },
@@ -56,3 +56,11 @@ export const FeatureWithLink = {
     linkHref: "#",
   },
 };
+
+export const Ask = {
+  args: {
+    title: "Still have questions?",
+    subtitle: "Get answers from an experienced organizer",
+    variant: "ask",
+  },
+};

From 4d8e735398aa9debc693536a234a333e63cc71b8 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Thu, 28 Aug 2025 14:29:04 -0600
Subject: [PATCH 5/5] Storybook Image fixes

---
 app/components/FeatureGrid.js | 1 +
 app/components/MiniCard.js    | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/components/FeatureGrid.js b/app/components/FeatureGrid.js
index fe91bb3..ecda70e 100644
--- a/app/components/FeatureGrid.js
+++ b/app/components/FeatureGrid.js
@@ -3,6 +3,7 @@
 import React from "react";
 import ContentLockup from "./ContentLockup";
 import MiniCard from "./MiniCard";
+import Image from "next/image";
 
 const FeatureGrid = ({ title, subtitle, className = "" }) => {
   return (
diff --git a/app/components/MiniCard.js b/app/components/MiniCard.js
index 9b5abf5..a1e2b3a 100644
--- a/app/components/MiniCard.js
+++ b/app/components/MiniCard.js
@@ -1,6 +1,7 @@
 "use client";
 
 import React from "react";
+import Image from "next/image";
 
 const MiniCard = ({
   children,
@@ -23,7 +24,7 @@ const MiniCard = ({
         {/* Content for the inner panel */}
         {panelContent && (
           <div className="flex items-center justify-center w-full h-full">
-            <img
+            <Image
               src={panelContent}
               alt={
                 ariaLabel ||
@@ -32,6 +33,10 @@ const MiniCard = ({
                 "Feature icon"
               }
               className="max-w-[58px] max-h-[58px] w-auto h-auto object-contain"
+              unoptimized
+              width={0}
+              height={0}
+              sizes="100vw"
             />
           </div>
         )}