Ask Organizer storybook

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>

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:
+      titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",
-        "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%] 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
-          <div className={styles.titleContainer}>
+          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>

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?",
+    title: "Still have questions?",
-    subtitle: "Our organizers are here to support you",
+    subtitle: "Get answers from an experienced organizer",
-    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",
+    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),
   },
 };

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",
+  },
+};