mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 13:24:27 +00:00
66e20d25a7
- Integrate @formbricks/js for future surveys (FormbricksProvider) - Add WebhookForm component for unified form submission (contact/franchise/membership) - Update contact form with reason dropdown field - Update franchise form with new fields: estado, ciudad, socios checkbox - Update franchise benefits: manuals, training platform, RH system, investment $100k - Add Contacto link to desktop/mobile nav and footer - Update membership form to use WebhookForm with membership_id select - Update hero buttons to use #3E352E color consistently - Refactor contact/franchise pages to use new hero layout and components - Add webhook utility (lib/webhook.ts) for parallel submission to test+prod - Add email receipt hooks to booking endpoints - Update globals.css with new color variables and navigation styles - Docker configuration for deployment
68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import React from 'react'
|
|
|
|
interface PatternOverlayProps {
|
|
variant?: 'diagonal' | 'circles' | 'waves' | 'hexagons'
|
|
opacity?: number
|
|
className?: string
|
|
}
|
|
|
|
/** @description Elegant pattern overlay component */
|
|
export function PatternOverlay({
|
|
variant = 'diagonal',
|
|
opacity = 0.1,
|
|
className = ''
|
|
}: PatternOverlayProps) {
|
|
const getPatternStyle = () => {
|
|
switch (variant) {
|
|
case 'diagonal':
|
|
return {
|
|
backgroundImage: `
|
|
linear-gradient(45deg, currentColor 1px, transparent 1px),
|
|
linear-gradient(-45deg, currentColor 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: '20px 20px'
|
|
}
|
|
case 'circles':
|
|
return {
|
|
backgroundImage: 'radial-gradient(circle, currentColor 1px, transparent 1px)',
|
|
backgroundSize: '30px 30px'
|
|
}
|
|
case 'waves':
|
|
return {
|
|
backgroundImage: `
|
|
radial-gradient(ellipse 60% 40%, currentColor 1px, transparent 1px),
|
|
radial-gradient(ellipse 40% 60%, currentColor 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: '40px 40px'
|
|
}
|
|
case 'hexagons':
|
|
return {
|
|
backgroundImage: `
|
|
linear-gradient(60deg, currentColor 1px, transparent 1px),
|
|
linear-gradient(-60deg, currentColor 1px, transparent 1px),
|
|
linear-gradient(120deg, currentColor 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: '25px 43px'
|
|
}
|
|
default:
|
|
return {}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`pattern-overlay ${className}`}
|
|
style={{
|
|
...getPatternStyle(),
|
|
opacity,
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
pointerEvents: 'none',
|
|
zIndex: 0
|
|
}}
|
|
/>
|
|
)
|
|
} |