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:
-        "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>