DMleadgen
46d973904b
Next.js website for Rocky Mountain Vending company featuring: - Product catalog with Stripe integration - Service areas and parts pages - Admin dashboard with Clerk authentication - SEO optimized pages with JSON-LD structured data Co-authored-by: Cursor <cursoragent@cursor.com>
52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
import { ReactNode } from "react"
|
|
|
|
interface PageWrapperProps {
|
|
children: ReactNode;
|
|
maxWidth?: "4xl" | "5xl" | "6xl" | "7xl" | "full";
|
|
className?: string;
|
|
}
|
|
|
|
export function PageWrapper({ children, maxWidth = "4xl", className = "" }: PageWrapperProps) {
|
|
const maxWidthClass = {
|
|
"4xl": "max-w-4xl",
|
|
"5xl": "max-w-5xl",
|
|
"6xl": "max-w-6xl",
|
|
"7xl": "max-w-7xl",
|
|
"full": "max-w-full",
|
|
}[maxWidth];
|
|
|
|
return (
|
|
<div className={`container mx-auto px-4 py-8 md:py-12 ${maxWidthClass} ${className}`}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface PageHeaderProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function PageHeader({ title, subtitle, className = "" }: PageHeaderProps) {
|
|
return (
|
|
<div className={`mb-8 md:mb-12 text-center ${className}`}>
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 tracking-tight text-balance">
|
|
{title}
|
|
</h1>
|
|
{subtitle && (
|
|
<p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto text-balance">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|