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