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 ( +
+
+ {/* Content Lockup */} + + + {/* Button */} +
+ +
+
+
+ ); +}; + +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 (
- {/* Text content container */} -
- {/* Title and subtitle group */} + {variant === "ask" ? ( + /* Simplified structure for ask variant */
- {/* Title container */}

{title}

- {variant === "hero" && ( - Decorative shapes - )}
- - {/* Subtitle */}

{subtitle}

+ ) : ( + /* Full structure for other variants */ +
+ {/* Title and subtitle group */} +
+ {/* Title container */} +
+

{title}

+ {variant === "hero" && ( + Decorative shapes + )} +
- {/* Description */} - {description &&

{description}

} -
+ {/* Subtitle */} +

{subtitle}

+
+ + {/* Description */} + {description &&

{description}

} +
+ )} {/* 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 (
@@ -51,6 +59,7 @@ export default function Page() { +
); } 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", + }, +};