@djangocfg/layouts 1.4.20 → 1.4.21

package/README.md

@@ -1,140 +1,103 @@
 # @djangocfg/layouts
 
-> Pre-built dashboard layouts, authentication pages, and admin templates for Next.js applications with Tailwind CSS
+Pre-built layouts, auth, and snippets for Next.js + Tailwind CSS.
 
-[![npm version](https://img.shields.io/npm/v/@djangocfg/layouts.svg)](https://www.npmjs.com/package/@djangocfg/layouts)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+**Part of [DjangoCFG](https://djangocfg.com)** — modern Django framework for production-ready SaaS applications.
 
-**Part of [DjangoCFG](https://djangocfg.com)** — a modern Django framework for building production-ready SaaS applications. All `@djangocfg/*` packages are designed to work together, providing type-safe configuration, real-time features, and beautiful admin interfaces out of the box.
+## Install
 
----
+```bash
+pnpm add @djangocfg/layouts
+```
 
-## Overview
+## Layouts
 
-`@djangocfg/layouts` provides production-ready layout components for building admin dashboards, authentication flows, and application shells. Built with Next.js App Router and Tailwind CSS.
+```tsx
+import { AppLayout } from '@djangocfg/layouts/layouts';
 
-## Features
+<AppLayout config={config}>{children}</AppLayout>
+```
 
-- **Dashboard Layouts** - Sidebar, header, and content area components
-- **Auth Pages** - Login, register, forgot password templates
-- **Auto Route Detection** - Automatically applies correct layout
-- **Responsive Design** - Mobile-first responsive layouts
-- **Authentication Context** - Built-in auth state management
-- **Video Player** - Integrated Vidstack player components
-- **SEO Component** - OG image generation, meta tags
-- **TypeScript** - Full type safety
+| Layout | Description |
+|--------|-------------|
+| `AppLayout` | Main app shell with sidebar, header, footer |
+| `ProfileLayout` | User profile pages |
+| `SupportLayout` | Support/help pages |
+| `PaymentsLayout` | Payment flows |
+| `UILayout` | UI showcase |
+| `ErrorLayout` | Error pages (404, 500) |
 
-## Installation
+## Auth
 
-```bash
-npm install @djangocfg/layouts
-# or
-pnpm add @djangocfg/layouts
-# or
-yarn add @djangocfg/layouts
+```tsx
+import { AuthProvider, useAuth } from '@djangocfg/layouts/auth';
+import { AuthDialog } from '@djangocfg/layouts/snippets';
+
+<AuthProvider>
+  <AuthDialog trigger={<Button>Sign In</Button>} />
+</AuthProvider>
 ```
 
-## Quick Start
+| Export | Description |
+|--------|-------------|
+| `AuthProvider` | Auth context provider |
+| `useAuth` | Auth hook (user, login, logout) |
+| `useAuthGuard` | Route protection hook |
+| `authMiddleware` | Next.js middleware |
 
-### Basic Setup
+## Snippets
 
 ```tsx
-// app/layout.tsx
-import { AppLayout } from '@djangocfg/layouts';
-import { appLayoutConfig } from '@/core';
-
-export default function RootLayout({ children }) {
-  return (
-    <AppLayout config={appLayoutConfig}>
-      {children}
-    </AppLayout>
-  );
-}
+import { ContactPage, VideoPlayer, Breadcrumbs } from '@djangocfg/layouts/snippets';
 ```
 
-### Configuration
+| Snippet | Description |
+|---------|-------------|
+| `ContactPage` | Ready-to-use contact page with form |
+| `ContactForm` | Contact form with API integration |
+| `ContactInfo` | Contact details card |
+| `AuthDialog` | Auth modal (login/register) |
+| `VideoPlayer` | Vidstack video player |
+| `Breadcrumbs` | Navigation breadcrumbs |
+| `Chat` | Chat widget |
+
+### ContactPage
 
 ```tsx
-// core/appLayoutConfig.ts
-import type { AppLayoutConfig } from '@djangocfg/layouts';
-
-export const appLayoutConfig: AppLayoutConfig = {
-  app: {
-    name: 'Your App',
-    description: 'App description',
-    logoPath: '/logo.svg',
-    siteUrl: process.env.NEXT_PUBLIC_SITE_URL,
-  },
-  api: {
-    baseUrl: process.env.NEXT_PUBLIC_API_URL,
-  },
-  routes: {
-    // Route detection functions
-  },
-  publicLayout: {
-    // Public layout config
-  },
-  privateLayout: {
-    // Private layout config
-  },
-};
+// Minimal - all defaults configured
+<ContactPage />
+
+// Custom
+<ContactPage
+  apiUrl="https://api.example.com"
+  email="hello@example.com"
+  calendlyUrl="https://calendly.com/..."
+/>
 ```
 
-### Authentication
+**Defaults:**
+- API: `http://localhost:8000` (dev) / `https://api.reforms.ai` (prod)
+- Email: `markolofsen@gmail.com`
+- Calendly: `https://calendly.com/markolofsen/meeting`
 
-```tsx
-import { AuthProvider, useAuth } from '@djangocfg/layouts/auth';
-import { LoginForm } from '@djangocfg/layouts/auth';
-
-function App() {
-  return (
-    <AuthProvider>
-      <LoginForm onSuccess={handleLogin} />
-    </AuthProvider>
-  );
-}
-```
+**Features:**
+- localStorage draft saving
+- Success state with icon
+- Zod validation from `@djangocfg/api`
 
 ## Exports
 
-| Path | Description |
-|------|-------------|
+| Path | Content |
+|------|---------|
 | `@djangocfg/layouts` | Main exports |
 | `@djangocfg/layouts/layouts` | Layout components |
-| `@djangocfg/layouts/auth` | Auth components and context |
-| `@djangocfg/layouts/auth/hooks` | Auth hooks |
-| `@djangocfg/layouts/snippets` | Reusable code snippets |
-| `@djangocfg/layouts/utils` | Utility functions |
-| `@djangocfg/layouts/styles` | CSS stylesheets |
-
-## Available Layouts
-
-- **PublicLayout** - For public pages (landing, docs)
-- **PrivateLayout** - For authenticated pages (dashboard)
-- **AuthLayout** - For auth pages (login, signup)
-
-## Components
-
-- `Seo` - SEO meta tags with OG image
-- `PageProgress` - Loading progress bar
-- `Footer` - Configurable footer
-- `Sidebar` - Dashboard sidebar
-- `Navigation` - Header navigation
+| `@djangocfg/layouts/auth` | Auth context & hooks |
+| `@djangocfg/layouts/snippets` | Reusable components |
+| `@djangocfg/layouts/utils` | Utilities |
+| `@djangocfg/layouts/styles` | CSS |
 
 ## Requirements
 
-- Next.js >= 15.4.4
-- React >= 19.1.0
-- Tailwind CSS >= 4.0.0
-
-## Documentation
-
-Full documentation available at [djangocfg.com](https://djangocfg.com)
-
-## Contributing
-
-Issues and pull requests are welcome at [GitHub](https://github.com/markolofsen/django-cfg)
-
-## License
-
-MIT - see [LICENSE](./LICENSE) for details
+- Next.js >= 15
+- React >= 19
+- Tailwind CSS >= 4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.4.20",
+  "version": "1.4.21",
   "description": "Pre-built dashboard layouts, authentication pages, and admin templates for Next.js applications with Tailwind CSS",
   "keywords": [
     "layouts",
@@ -85,9 +85,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.4.20",
-    "@djangocfg/og-image": "^1.4.20",
-    "@djangocfg/ui": "^1.4.20",
+    "@djangocfg/api": "^1.4.21",
+    "@djangocfg/og-image": "^1.4.21",
+    "@djangocfg/ui": "^1.4.21",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -108,7 +108,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.4.20",
+    "@djangocfg/typescript-config": "^1.4.21",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/snippets/ContactForm/ContactForm.tsx

@@ -0,0 +1,282 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Schemas, type Schemas as SchemaTypes } from '@djangocfg/api';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Textarea,
+  Button,
+  useToast,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  cn,
+  useLocalStorage,
+} from '@djangocfg/ui';
+import { Send, CheckCircle2, ArrowLeft } from 'lucide-react';
+import type { ContactFormTexts, LeadSubmissionResult } from './types';
+import { DEFAULT_FORM_TEXTS } from './types';
+import { ContactFormProvider, useContactForm } from './ContactFormProvider';
+
+type FormData = SchemaTypes.LeadSubmissionRequest;
+
+// ============================================================================
+// Props
+// ============================================================================
+
+export interface ContactFormProps {
+  /** API base URL for lead submission */
+  apiUrl: string;
+  /** Customizable texts */
+  texts?: Partial<ContactFormTexts>;
+  /** Show card wrapper (default: true) */
+  showCard?: boolean;
+  /** Submit button icon */
+  submitIcon?: React.ReactNode;
+  /** Additional className for form */
+  className?: string;
+  /** Reset form after successful submit (default: true) */
+  resetOnSuccess?: boolean;
+  /** Callback after successful submit */
+  onSuccess?: (result: LeadSubmissionResult) => void;
+  /** Callback on error */
+  onError?: (error: Error) => void;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * ContactForm - Contact form using Django-CFG Lead API
+ *
+ * @example
+ * ```tsx
+ * <ContactForm
+ *   apiUrl="https://api.example.com"
+ *   onSuccess={(result) => console.log('Lead ID:', result.lead_id)}
+ * />
+ * ```
+ */
+export function ContactForm({ apiUrl, ...props }: ContactFormProps) {
+  return (
+    <ContactFormProvider apiUrl={apiUrl}>
+      <ContactFormInner {...props} />
+    </ContactFormProvider>
+  );
+}
+
+// ============================================================================
+// Inner Form Component
+// ============================================================================
+
+const STORAGE_KEY = 'contact-form-draft';
+
+type FormDraft = {
+  name: string;
+  email: string;
+  company: string;
+  subject: string;
+  message: string;
+};
+
+const emptyDraft: FormDraft = {
+  name: '',
+  email: '',
+  company: '',
+  subject: '',
+  message: '',
+};
+
+function ContactFormInner({
+  texts = {},
+  showCard = true,
+  submitIcon,
+  className,
+  resetOnSuccess = true,
+  onSuccess,
+  onError,
+}: Omit<ContactFormProps, 'apiUrl'>) {
+  const { toast } = useToast();
+  const { submit, isSubmitting } = useContactForm();
+  const t = { ...DEFAULT_FORM_TEXTS, ...texts };
+  const [draft, setDraft, clearDraft] = useLocalStorage<FormDraft>(STORAGE_KEY, emptyDraft);
+  const [isSuccess, setIsSuccess] = useState(false);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(Schemas.LeadSubmissionRequestSchema),
+    defaultValues: {
+      ...emptyDraft,
+      ...draft,
+      site_url: typeof window !== 'undefined' ? window.location.href : '',
+    },
+  });
+
+  // Watch form values and save to localStorage
+  const watchedValues = useWatch({ control: form.control });
+
+  useEffect(() => {
+    const { name, email, company, subject, message } = watchedValues;
+    if (name || email || company || subject || message) {
+      setDraft({
+        name: name || '',
+        email: email || '',
+        company: company || '',
+        subject: subject || '',
+        message: message || '',
+      });
+    }
+  }, [watchedValues, setDraft]);
+
+  const handleSubmit = async (data: FormData) => {
+    try {
+      const result = await submit(data);
+      if (resetOnSuccess) {
+        form.reset();
+        clearDraft();
+      }
+      setIsSuccess(true);
+      onSuccess?.(result);
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      toast({ title: t.errorTitle, description: err.message || t.errorMessage, variant: 'destructive' });
+      onError?.(err);
+    }
+  };
+
+  const handleReset = () => {
+    setIsSuccess(false);
+    form.reset();
+  };
+
+  // Success state
+  if (isSuccess) {
+    const successContent = (
+      <div className="flex flex-col items-center justify-center py-12 text-center">
+        <div className="rounded-full bg-green-100 p-4 mb-6">
+          <CheckCircle2 className="h-12 w-12 text-green-600" />
+        </div>
+        <h3 className="text-2xl font-semibold mb-2">{t.successTitle}</h3>
+        <p className="text-muted-foreground mb-6 max-w-sm">{t.successMessage}</p>
+        <Button variant="outline" onClick={handleReset}>
+          <ArrowLeft className="mr-2 h-4 w-4" />
+          Send another message
+        </Button>
+      </div>
+    );
+
+    if (!showCard) return successContent;
+
+    return (
+      <Card>
+        <CardContent className="pt-6">{successContent}</CardContent>
+      </Card>
+    );
+  }
+
+  // Form
+  const formContent = (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(handleSubmit)} className={cn('space-y-4', className)}>
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name *</FormLabel>
+              <FormControl>
+                <Input placeholder="Your name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email *</FormLabel>
+              <FormControl>
+                <Input type="email" placeholder="your@email.com" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="company"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Company</FormLabel>
+              <FormControl>
+                <Input placeholder="Your company (optional)" {...field} value={field.value ?? ''} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="subject"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Subject</FormLabel>
+              <FormControl>
+                <Input placeholder="What is this about?" {...field} value={field.value ?? ''} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="message"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Message *</FormLabel>
+              <FormControl>
+                <Textarea placeholder="Your message..." style={{ minHeight: '120px' }} {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <input type="hidden" {...form.register('site_url')} />
+
+        <Button type="submit" className="w-full" disabled={isSubmitting}>
+          {isSubmitting ? t.loadingText : t.submitText}
+          {!isSubmitting && (submitIcon || <Send className="ml-2 h-4 w-4" />)}
+        </Button>
+      </form>
+    </Form>
+  );
+
+  if (!showCard) return formContent;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t.title}</CardTitle>
+        <CardDescription>{t.description}</CardDescription>
+      </CardHeader>
+      <CardContent>{formContent}</CardContent>
+    </Card>
+  );
+}

package/src/snippets/ContactForm/ContactFormProvider.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import { configureAPI, createLeadsSubmitCreate, Enums } from '@djangocfg/api';
+import type {
+  ContactFormContextValue,
+  ContactFormProviderProps,
+  LeadSubmissionData,
+  LeadSubmissionResult,
+} from './types';
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const ContactFormContext = createContext<ContactFormContextValue | undefined>(undefined);
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+const CONTACT_TYPE_MAP: Record<string, Enums.LeadSubmissionRequestContactType> = {
+  email: Enums.LeadSubmissionRequestContactType.EMAIL,
+  telegram: Enums.LeadSubmissionRequestContactType.TELEGRAM,
+  whatsapp: Enums.LeadSubmissionRequestContactType.WHATSAPP,
+  phone: Enums.LeadSubmissionRequestContactType.PHONE,
+  other: Enums.LeadSubmissionRequestContactType.OTHER,
+};
+
+// ============================================================================
+// Provider
+// ============================================================================
+
+/**
+ * ContactFormProvider - Configures API and provides submit functionality
+ *
+ * Uses the generated Django-CFG API client for lead submission.
+ *
+ * @example
+ * ```tsx
+ * import { ContactFormProvider, ContactForm } from '@djangocfg/layouts';
+ *
+ * <ContactFormProvider apiUrl="https://api.example.com">
+ *   <ContactForm fields={fields} />
+ * </ContactFormProvider>
+ * ```
+ */
+export function ContactFormProvider({ children, apiUrl }: ContactFormProviderProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [lastResponse, setLastResponse] = useState<LeadSubmissionResult | null>(null);
+
+  // Configure API on mount
+  useEffect(() => {
+    configureAPI({ baseUrl: apiUrl });
+  }, [apiUrl]);
+
+  // Submit function using generated fetcher
+  const submit = useCallback(async (data: LeadSubmissionData): Promise<LeadSubmissionResult> => {
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      // Use the generated fetcher which handles Zod validation
+      const response = await createLeadsSubmitCreate({
+        name: data.name,
+        email: data.email,
+        message: data.message,
+        company: data.company ?? undefined,
+        company_site: data.company_site ?? undefined,
+        contact_type: data.contact_type ? CONTACT_TYPE_MAP[data.contact_type] : undefined,
+        contact_value: data.contact_value ?? undefined,
+        subject: data.subject ?? undefined,
+        extra: data.extra ?? undefined,
+        site_url: data.site_url,
+      });
+
+      const result: LeadSubmissionResult = {
+        success: response.success,
+        message: response.message,
+        lead_id: response.lead_id,
+      };
+
+      setLastResponse(result);
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setError(error);
+      throw error;
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, []);
+
+  // Reset error state
+  const resetError = useCallback(() => {
+    setError(null);
+  }, []);
+
+  const value: ContactFormContextValue = {
+    apiUrl,
+    submit,
+    isSubmitting,
+    error,
+    lastResponse,
+    resetError,
+  };
+
+  return (
+    <ContactFormContext.Provider value={value}>
+      {children}
+    </ContactFormContext.Provider>
+  );
+}
+
+// ============================================================================
+// Hooks
+// ============================================================================
+
+/**
+ * useContactForm - Access contact form context
+ *
+ * Must be used within ContactFormProvider
+ */
+export function useContactForm(): ContactFormContextValue {
+  const context = useContext(ContactFormContext);
+  if (!context) {
+    throw new Error('useContactForm must be used within ContactFormProvider');
+  }
+  return context;
+}
+
+/**
+ * useContactFormOptional - Access contact form context (optional)
+ *
+ * Returns null if not within ContactFormProvider
+ */
+export function useContactFormOptional(): ContactFormContextValue | null {
+  return useContext(ContactFormContext) ?? null;
+}

package/src/snippets/ContactForm/ContactInfo.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Button,
+  cn,
+} from '@djangocfg/ui';
+import type { ContactInfoProps, ContactDetail } from './types';
+import { DEFAULT_INFO_TITLE } from './types';
+
+/**
+ * ContactInfo - Display contact information with optional action card
+ *
+ * @example
+ * ```tsx
+ * import { ContactInfo } from '@djangocfg/layouts';
+ * import { Mail, Phone, MapPin, Calendar } from 'lucide-react';
+ *
+ * const details = [
+ *   { icon: <Mail />, label: 'Email', value: 'hello@example.com', href: 'mailto:hello@example.com' },
+ *   { icon: <Phone />, label: 'Phone', value: '+1 234 567 890', href: 'tel:+1234567890' },
+ *   { icon: <MapPin />, label: 'Address', value: '123 Main St, City' },
+ * ];
+ *
+ * <ContactInfo
+ *   details={details}
+ *   action={{
+ *     title: 'Schedule a Meeting',
+ *     description: 'Book a 30-minute call',
+ *     button: {
+ *       icon: <Calendar />,
+ *       label: 'Book Now',
+ *       href: 'https://calendly.com/...',
+ *     },
+ *   }}
+ * />
+ * ```
+ */
+export function ContactInfo({
+  details,
+  title = DEFAULT_INFO_TITLE,
+  action,
+  className,
+}: ContactInfoProps) {
+  const renderDetail = (detail: ContactDetail, index: number) => {
+    const content = (
+      <div className="flex items-start gap-3">
+        <div className="text-muted-foreground mt-0.5">{detail.icon}</div>
+        <div>
+          <p className="text-sm text-muted-foreground">{detail.label}</p>
+          <p className="font-medium">{detail.value}</p>
+        </div>
+      </div>
+    );
+
+    if (detail.href) {
+      return (
+        <a
+          key={index}
+          href={detail.href}
+          target={detail.external !== false ? '_blank' : undefined}
+          rel={detail.external !== false ? 'noopener noreferrer' : undefined}
+          className="block hover:bg-muted/50 rounded-lg p-2 -m-2 transition-colors"
+        >
+          {content}
+        </a>
+      );
+    }
+
+    return <div key={index}>{content}</div>;
+  };
+
+  return (
+    <div className={cn('space-y-6', className)}>
+      {/* Contact Details Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle>{title}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {details.map(renderDetail)}
+        </CardContent>
+      </Card>
+
+      {/* Action Card */}
+      {action && (
+        <Card className="bg-primary/5 border-primary/20">
+          <CardContent className="pt-6">
+            <h3 className="font-semibold mb-2">{action.title}</h3>
+            {action.description && (
+              <p className="text-sm text-muted-foreground mb-4">
+                {action.description}
+              </p>
+            )}
+            <Button asChild className="w-full">
+              <a
+                href={action.button.href}
+                target={action.button.external !== false ? '_blank' : undefined}
+                rel={action.button.external !== false ? 'noopener noreferrer' : undefined}
+              >
+                {action.button.icon}
+                <span className="ml-2">{action.button.label}</span>
+              </a>
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

package/src/snippets/ContactForm/ContactPage.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import React from 'react';
+import { Mail, MapPin, Calendar } from 'lucide-react';
+import { ContactForm } from './ContactForm';
+import { ContactInfo } from './ContactInfo';
+import type { ContactDetail, LeadSubmissionResult } from './types';
+
+// ============================================================================
+// Config
+// ============================================================================
+
+const isDev = process.env.NODE_ENV === 'development';
+
+const DEFAULT_CONFIG = {
+  apiUrl: isDev ? 'http://localhost:8000' : 'https://api.reforms.ai',
+  email: 'markolofsen@gmail.com',
+  calendly: 'https://calendly.com/markolofsen/meeting',
+};
+
+// ============================================================================
+// Props
+// ============================================================================
+
+export interface ContactPageProps {
+  /** Override API URL */
+  apiUrl?: string;
+  /** Override email */
+  email?: string;
+  /** Override calendly link */
+  calendlyUrl?: string;
+  /** Page title */
+  title?: React.ReactNode;
+  /** Page subtitle */
+  subtitle?: string;
+  /** Location text */
+  location?: string;
+  /** Hide calendly action card */
+  hideCalendly?: boolean;
+  /** Additional className */
+  className?: string;
+  /** Callback after successful submit */
+  onSuccess?: (result: LeadSubmissionResult) => void;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * ContactPage - Pre-configured contact page component
+ *
+ * Ready to use in any project with sensible defaults.
+ *
+ * @example
+ * ```tsx
+ * // Minimal usage - just drop it in
+ * <ContactPage />
+ *
+ * // With custom title
+ * <ContactPage
+ *   title={<>Contact <span className="text-primary">Us</span></>}
+ *   subtitle="We'd love to hear from you"
+ * />
+ *
+ * // Override defaults
+ * <ContactPage
+ *   apiUrl="https://api.myproject.com"
+ *   email="hello@myproject.com"
+ * />
+ * ```
+ */
+export function ContactPage({
+  apiUrl = DEFAULT_CONFIG.apiUrl,
+  email = DEFAULT_CONFIG.email,
+  calendlyUrl = DEFAULT_CONFIG.calendly,
+  title = 'Get in Touch',
+  subtitle = "Have a question or want to work together? We'd love to hear from you.",
+  location = 'Remote-first team',
+  hideCalendly = false,
+  className,
+  onSuccess,
+}: ContactPageProps) {
+  const contactDetails: ContactDetail[] = [
+    {
+      icon: <Mail className="h-5 w-5" />,
+      label: 'Email',
+      value: email,
+      href: `mailto:${email}`,
+    },
+    {
+      icon: <MapPin className="h-5 w-5" />,
+      label: 'Location',
+      value: location,
+    },
+  ];
+
+  return (
+    <div className={className}>
+      {/* Header */}
+      <div className="text-center mb-12">
+        <h1 className="text-4xl md:text-5xl font-bold mb-4">
+          {typeof title === 'string' ? (
+            title
+          ) : (
+            title
+          )}
+        </h1>
+        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+          {subtitle}
+        </p>
+      </div>
+
+      {/* Content Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Contact Form */}
+        <div className="lg:col-span-2">
+          <ContactForm apiUrl={apiUrl} onSuccess={onSuccess} />
+        </div>
+
+        {/* Contact Info */}
+        <div>
+          <ContactInfo
+            details={contactDetails}
+            action={hideCalendly ? undefined : {
+              title: 'Schedule a Meeting',
+              description: 'Book a time that works for you',
+              button: {
+                icon: <Calendar className="h-4 w-4" />,
+                label: 'Book a Call',
+                href: calendlyUrl,
+              },
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/snippets/ContactForm/index.ts

@@ -0,0 +1,31 @@
+// ============================================================================
+// ContactForm - Contact form using Django-CFG Lead API
+// ============================================================================
+
+// Components
+export { ContactForm, type ContactFormProps } from './ContactForm';
+export { ContactInfo } from './ContactInfo';
+export { ContactPage, type ContactPageProps } from './ContactPage';
+
+// Provider & Hooks
+export {
+  ContactFormProvider,
+  useContactForm,
+  useContactFormOptional,
+} from './ContactFormProvider';
+
+// Types
+export type {
+  ContactFormProviderProps,
+  ContactFormContextValue,
+  LeadSubmissionData,
+  LeadSubmissionResult,
+  UseContactFormReturn,
+  ContactFormTexts,
+  ContactDetail,
+  ContactAction,
+  ContactInfoProps,
+} from './types';
+
+// Constants
+export { DEFAULT_FORM_TEXTS, DEFAULT_INFO_TITLE } from './types';

package/src/snippets/ContactForm/types.ts

@@ -0,0 +1,109 @@
+import type { ReactNode } from 'react';
+import type { Schemas } from '@djangocfg/api';
+
+// ============================================================================
+// Re-export API Types
+// ============================================================================
+
+/** Lead submission request data - uses generated API type */
+export type LeadSubmissionData = Schemas.LeadSubmissionRequest;
+
+/** Lead submission response - uses generated API type */
+export type LeadSubmissionResult = Schemas.LeadSubmissionResponse;
+
+// ============================================================================
+// Provider Types
+// ============================================================================
+
+export interface ContactFormProviderProps {
+  children: ReactNode;
+  /**
+   * API base URL for lead submission
+   * @example "https://api.example.com"
+   */
+  apiUrl: string;
+}
+
+// ============================================================================
+// Hook Types
+// ============================================================================
+
+export interface UseContactFormReturn {
+  /** Submit lead data */
+  submit: (data: LeadSubmissionData) => Promise<LeadSubmissionResult>;
+  /** Is currently submitting */
+  isSubmitting: boolean;
+  /** Last error */
+  error: Error | null;
+  /** Last successful response */
+  lastResponse: LeadSubmissionResult | null;
+  /** Reset error state */
+  resetError: () => void;
+}
+
+// ============================================================================
+// Context Types
+// ============================================================================
+
+export interface ContactFormContextValue extends UseContactFormReturn {
+  /** API base URL */
+  apiUrl: string;
+}
+
+// ============================================================================
+// Form Texts
+// ============================================================================
+
+export interface ContactFormTexts {
+  title?: string;
+  description?: string;
+  submitText?: string;
+  loadingText?: string;
+  successTitle?: string;
+  successMessage?: string;
+  errorTitle?: string;
+  errorMessage?: string;
+}
+
+export const DEFAULT_FORM_TEXTS: Required<ContactFormTexts> = {
+  title: 'Send us a message',
+  description: "Fill out the form below and we'll get back to you as soon as possible",
+  submitText: 'Send Message',
+  loadingText: 'Sending...',
+  successTitle: 'Message Sent!',
+  successMessage: "We'll get back to you within 24 hours.",
+  errorTitle: 'Error',
+  errorMessage: 'Failed to send message. Please try again.',
+};
+
+// ============================================================================
+// Contact Info Types
+// ============================================================================
+
+export interface ContactDetail {
+  icon: ReactNode;
+  label: string;
+  value: string;
+  href?: string;
+  external?: boolean;
+}
+
+export interface ContactAction {
+  icon: ReactNode;
+  label: string;
+  href: string;
+  external?: boolean;
+}
+
+export interface ContactInfoProps {
+  details: ContactDetail[];
+  title?: string;
+  action?: {
+    title: string;
+    description?: string;
+    button: ContactAction;
+  };
+  className?: string;
+}
+
+export const DEFAULT_INFO_TITLE = 'Contact Information';

package/src/snippets/index.ts

@@ -8,3 +8,4 @@ export type { ChatWidgetProps, ChatUIState } from './Chat';
 export * from './Breadcrumbs';
 export * from './AuthDialog';
 export * from './VideoPlayer';
+export * from './ContactForm';