@olwiba/ui 0.0.36 → 0.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "private": false,
   "type": "module",
   "sideEffects": false,

package/src/index.ts

@@ -57,8 +57,8 @@ export { TestimonialsSection, type TestimonialsSectionProps } from './marketing/
 export { TeamSection } from './marketing/TeamSection';
 export { FaqSection, type FaqSectionProps } from './marketing/FaqSection';
 export { StatsSection, type StatsSectionProps } from './marketing/StatsSection';
-export { NewsletterSection } from './marketing/NewsletterSection';
-export { ContactSection } from './marketing/ContactSection';
+export { NewsletterSection, type NewsletterSectionProps } from './marketing/NewsletterSection';
+export { ContactSection, type ContactSectionProps, type ContactInfoItem } from './marketing/ContactSection';
 
 // ─── Marketing — elements ─────────────────────────────────────────────────────
 export { Navbar, type NavbarProps } from './marketing/Navbar';

package/src/marketing/ContactSection.tsx

@@ -1,44 +1,81 @@
 'use client';
 
 import * as React from 'react';
-import { Mail, MapPin, MessageSquare, Phone, Send } from 'lucide-react';
+import { Mail, MapPin, MessageSquare, Phone, Send, type LucideIcon } from 'lucide-react';
 import { Badge, Button, Input, Label, Separator, Textarea } from '@olwiba/cn';
 
-const contactInfo = [
-  { Icon: Mail, label: 'Email', value: 'hello@olwiba.com' },
-  { Icon: Phone, label: 'Phone', value: '+1 (555) 000-0000' },
-  { Icon: MapPin, label: 'Office', value: 'San Francisco, CA' },
+export type ContactInfoItem = {
+  label: string;
+  value: string;
+  icon?: LucideIcon;
+};
+
+export interface ContactSectionProps {
+  badge?: string;
+  title?: string;
+  description?: string;
+  contactInfo?: ContactInfoItem[];
+  successTitle?: string;
+  successDescription?: string;
+  sendAnotherLabel?: string;
+  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
+}
+
+const defaultContactInfoResolved: ContactInfoItem[] = [
+  { icon: Mail, label: 'Email', value: 'hello@olwiba.com' },
+  { icon: Phone, label: 'Phone', value: '+1 (555) 000-0000' },
+  { icon: MapPin, label: 'Office', value: 'San Francisco, CA' },
 ];
 
-export function ContactSection() {
+const defaults = {
+  badge: 'Contact us',
+  title: "Let's talk",
+  description:
+    "Have a question or want to work together? Fill in the form and we'll get back to you within one business day.",
+  successTitle: 'Message sent',
+  successDescription: "Thanks for reaching out. We'll get back to you within one business day.",
+  sendAnotherLabel: 'Send another',
+};
+
+export function ContactSection({
+  badge = defaults.badge,
+  title = defaults.title,
+  description = defaults.description,
+  contactInfo = defaultContactInfoResolved,
+  successTitle = defaults.successTitle,
+  successDescription = defaults.successDescription,
+  sendAnotherLabel = defaults.sendAnotherLabel,
+  onSubmit,
+}: ContactSectionProps = {}) {
   const [submitted, setSubmitted] = React.useState(false);
 
-  function handleSubmit(e: React.FormEvent) {
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
+    await onSubmit?.(e);
     setSubmitted(true);
   }
 
   return (
     <section className="overflow-hidden rounded-2xl border bg-card">
       <div className="grid lg:grid-cols-[1fr_1.4fr]">
-        {/* Left panel */}
         <div className="relative overflow-hidden bg-primary px-8 py-12 text-primary-foreground">
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,hsl(var(--primary-foreground)/0.1),transparent_60%)]" />
           <div className="relative space-y-6">
             <div>
-              <Badge variant="secondary" className="mb-3 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/20">
-                Contact us
+              <Badge
+                variant="secondary"
+                className="mb-3 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/20"
+              >
+                {badge}
               </Badge>
-              <h2 className="text-2xl font-semibold">Let's talk</h2>
-              <p className="mt-2 text-sm text-primary-foreground/70">
-                Have a question or want to work together? Fill in the form and we'll get back to you within one business day.
-              </p>
+              <h2 className="text-2xl font-semibold">{title}</h2>
+              <p className="mt-2 text-sm text-primary-foreground/70">{description}</p>
             </div>
 
             <Separator className="bg-primary-foreground/20" />
 
             <div className="space-y-4">
-              {contactInfo.map(({ Icon, label, value }) => (
+              {contactInfo.map(({ icon: Icon = Mail, label, value }) => (
                 <div key={label} className="flex items-center gap-3">
                   <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-foreground/10">
                     <Icon className="size-4" />
@@ -53,7 +90,6 @@ export function ContactSection() {
           </div>
         </div>
 
-        {/* Form */}
         <div className="p-8">
           {submitted ? (
             <div className="flex h-full min-h-[320px] flex-col items-center justify-center gap-4 text-center">
@@ -61,12 +97,12 @@ export function ContactSection() {
                 <MessageSquare className="size-6" />
               </div>
               <div>
-                <h3 className="font-semibold">Message sent</h3>
-                <p className="mt-1 text-sm text-muted-foreground">
-                  Thanks for reaching out. We'll get back to you within one business day.
-                </p>
+                <h3 className="font-semibold">{successTitle}</h3>
+                <p className="mt-1 text-sm text-muted-foreground">{successDescription}</p>
               </div>
-              <Button variant="outline" onClick={() => setSubmitted(false)}>Send another</Button>
+              <Button variant="outline" onClick={() => setSubmitted(false)}>
+                {sendAnotherLabel}
+              </Button>
             </div>
           ) : (
             <form onSubmit={handleSubmit} className="space-y-5">

package/src/marketing/NewsletterSection.tsx

@@ -4,13 +4,51 @@ import * as React from 'react';
 import { ArrowRight, Mail } from 'lucide-react';
 import { Badge, Button, Input } from '@olwiba/cn';
 
-export function NewsletterSection() {
+export interface NewsletterSectionProps {
+  badge?: string;
+  title?: string;
+  description?: string;
+  placeholder?: string;
+  submitLabel?: string;
+  privacyHref?: string;
+  privacyLabel?: string;
+  successTitle?: string;
+  successDescription?: string;
+  onSubscribe?: (email: string) => void | Promise<void>;
+}
+
+const defaults = {
+  badge: 'Newsletter',
+  title: 'Stay in the loop',
+  description:
+    'New components, release notes, and product tips — straight to your inbox. No spam, unsubscribe any time.',
+  placeholder: 'you@company.com',
+  submitLabel: 'Subscribe',
+  privacyHref: '#',
+  privacyLabel: 'Privacy Policy',
+  successTitle: "You're on the list.",
+  successDescription: "We'll be in touch soon.",
+};
+
+export function NewsletterSection({
+  badge = defaults.badge,
+  title = defaults.title,
+  description = defaults.description,
+  placeholder = defaults.placeholder,
+  submitLabel = defaults.submitLabel,
+  privacyHref = defaults.privacyHref,
+  privacyLabel = defaults.privacyLabel,
+  successTitle = defaults.successTitle,
+  successDescription = defaults.successDescription,
+  onSubscribe,
+}: NewsletterSectionProps = {}) {
   const [email, setEmail] = React.useState('');
   const [submitted, setSubmitted] = React.useState(false);
 
-  function handleSubmit(e: React.FormEvent) {
+  async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (!email) return;
+    await onSubscribe?.(email);
     setSubmitted(true);
   }
 
@@ -23,31 +61,29 @@ export function NewsletterSection() {
             <Mail className="size-5" />
           </div>
 
-          <Badge variant="secondary" className="mb-3">Newsletter</Badge>
-          <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
-            Stay in the loop
-          </h2>
-          <p className="mx-auto mt-4 max-w-sm text-pretty text-muted-foreground">
-            New components, release notes, and product tips — straight to your inbox. No spam, unsubscribe any time.
-          </p>
+          <Badge variant="secondary" className="mb-3">
+            {badge}
+          </Badge>
+          <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">{title}</h2>
+          <p className="mx-auto mt-4 max-w-sm text-pretty text-muted-foreground">{description}</p>
 
           {submitted ? (
             <div className="mt-8 rounded-2xl border bg-muted/50 px-6 py-5 text-sm">
-              <span className="font-medium">You're on the list.</span>{' '}
-              <span className="text-muted-foreground">We'll be in touch soon.</span>
+              <span className="font-medium">{successTitle}</span>{' '}
+              <span className="text-muted-foreground">{successDescription}</span>
             </div>
           ) : (
             <form onSubmit={handleSubmit} className="mt-8 flex flex-col gap-3 sm:flex-row">
               <Input
                 type="email"
-                placeholder="you@company.com"
+                placeholder={placeholder}
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 required
                 className="flex-1"
               />
               <Button type="submit">
-                Subscribe
+                {submitLabel}
                 <ArrowRight className="ml-2 size-4" />
               </Button>
             </form>
@@ -55,7 +91,10 @@ export function NewsletterSection() {
 
           <p className="mt-4 text-xs text-muted-foreground">
             By subscribing you agree to our{' '}
-            <a href="#" className="underline underline-offset-4 hover:text-foreground">Privacy Policy</a>.
+            <a href={privacyHref} className="underline underline-offset-4 hover:text-foreground">
+              {privacyLabel}
+            </a>
+            .
           </p>
         </div>
       </div>