@promakeai/cli 0.4.7 → 0.5.0

package/dist/registry/contact-page-centered.json

@@ -25,7 +25,7 @@
       "path": "contact-page-centered/contact-page-centered.tsx",
       "type": "registry:component",
       "target": "$modules$/contact-page-centered/contact-page-centered.tsx",
-      "content": "import React, { useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Mail, Phone, MapPin } from \"lucide-react\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Card, CardContent } from \"@/components/ui/card\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { FormFileInput } from \"@/components/FormFileInput\";\r\nimport { FormField } from \"@/components/FormField\";\r\n\r\ninterface ContactPageCenteredProps {\r\n  className?: string;\r\n}\r\n\r\nexport function ContactPageCentered({ className }: ContactPageCenteredProps) {\r\n  const { t } = useTranslation(\"contact-page-centered\");\r\n  usePageTitle({ title: t(\"title\", \"Contact Us\") });\r\n  const apiService = useApiService();\r\n  const fileMaxFiles = constants.file?.maxFiles || 5;\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    message: \"\",\r\n    attachments: [] as File[]\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\"idle\" | \"success\" | \"error\">(\"idle\");\r\n\r\n  const contactCards = [\r\n    {\r\n      icon: Mail,\r\n      title: t(\"emailTitle\", \"Email\"),\r\n      value: constants.email || \"hello@example.com\",\r\n      href: `mailto:${constants.email || \"hello@example.com\"}`,\r\n    },\r\n    {\r\n      icon: Phone,\r\n      title: t(\"phoneTitle\", \"Phone\"),\r\n      value: constants.phone || \"+1 234 567 890\",\r\n      href: `tel:${constants.phone || \"+1234567890\"}`,\r\n    },\r\n    {\r\n      icon: MapPin,\r\n      title: t(\"addressTitle\", \"Address\"),\r\n      value: constants.address?.city || \"New York, USA\",\r\n      href: \"#\",\r\n    },\r\n  ];\r\n  const handleFileUploadChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const selectedFiles = Array.from(e.target.files || []) as File[];\r\n\r\n    const remainingSlots = fileMaxFiles - formData.attachments.length;\r\n\r\n    // If the limit is exceeded, alert and do not add any files\r\n    if (selectedFiles.length > remainingSlots) {\r\n      alert(t(\"maxFilesLimit\", { max: fileMaxFiles }));\r\n      e.target.value = ''; // Clear the input\r\n      return;\r\n    }\r\n\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: [...prev.attachments, ...selectedFiles]\r\n    }));\r\n\r\n    e.target.value = ''; // Clear the input\r\n  }\r\n  const handleRemoveFile = (index: number) => {\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: prev.attachments.filter((_, i) => i !== index)\r\n    }));\r\n  };\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n\r\n    try {\r\n      await apiService.submitFormWithFile(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"message\", required: true },\r\n            { name: \"attachments\", required: false },\r\n          ],\r\n        },\r\n        constants.site.defaultLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({ name: \"\", email: \"\", message: \"\", attachments: [] });\r\n      setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    } catch {\r\n      setSubmitStatus(\"error\");\r\n      setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));\r\n  };\r\n\r\n  return (\r\n    <Layout>\r\n      <div className={cn(\"min-h-screen bg-muted/30 py-16 md:py-24\", className)}>\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 max-w-4xl\">\r\n          {/* Header */}\r\n          <div className=\"text-center mb-12\">\r\n            <h1 className=\"text-4xl font-bold mb-4\">{t(\"title\", \"Contact Us\")}</h1>\r\n            <p className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\r\n              {t(\"subtitle\", \"We'd love to hear from you. Send us a message and we'll respond as soon as possible.\")}\r\n            </p>\r\n          </div>\r\n\r\n          {/* Contact Cards */}\r\n          <div className=\"grid sm:grid-cols-3 gap-4 mb-12\">\r\n            {contactCards.map((card, index) => (\r\n              <Card key={index} className=\"text-center\">\r\n                <CardContent className=\"pt-6\">\r\n                  <div className=\"mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4\">\r\n                    <card.icon className=\"h-6 w-6 text-primary\" />\r\n                  </div>\r\n                  <h3 className=\"font-semibold mb-1\">{card.title}</h3>\r\n                  <a\r\n                    href={card.href}\r\n                    className=\"text-sm text-muted-foreground hover:text-primary transition-colors\"\r\n                  >\r\n                    {card.value}\r\n                  </a>\r\n                </CardContent>\r\n              </Card>\r\n            ))}\r\n          </div>\r\n\r\n          {/* Form */}\r\n          <Card>\r\n            <CardContent className=\"pt-6\">\r\n              <form onSubmit={handleSubmit} className=\"space-y-6\">\r\n                <div className=\"grid sm:grid-cols-2 gap-4\">\r\n                  <FormField label={t(\"nameLabel\", \"Name\")} htmlFor=\"name\" required>\r\n                    <Input\r\n                      id=\"name\"\r\n                      name=\"name\"\r\n                      value={formData.name}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"namePlaceholder\", \"Your name\")}\r\n                      required\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </FormField>\r\n                  <FormField label={t(\"emailLabel\", \"Email\")} htmlFor=\"email\" required>\r\n                    <Input\r\n                      id=\"email\"\r\n                      name=\"email\"\r\n                      type=\"email\"\r\n                      value={formData.email}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"emailPlaceholder\", \"your@email.com\")}\r\n                      required\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </FormField>\r\n                </div>\r\n                <FormField label={t(\"messageLabel\", \"Message\")} htmlFor=\"message\" required>\r\n                  <Textarea\r\n                    id=\"message\"\r\n                    name=\"message\"\r\n                    value={formData.message}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"messagePlaceholder\", \"How can we help you?\")}\r\n                    required\r\n                    rows={6}\r\n                    className=\"mt-1 resize-none\"\r\n                  />\r\n                </FormField>\r\n                <FormFileInput\r\n                  files={formData.attachments}\r\n                  onFilesChange={handleFileUploadChange}\r\n                  handleRemoveFile={handleRemoveFile}\r\n                  maxFiles={constants.file?.maxFiles || 5}\r\n                  accept={constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\"}\r\n                  disabled={isSubmitting}\r\n                  uploadButtonText={t(\"addFiles\")}\r\n                  maxFilesReachedText={t(\"maxFilesReached\")}\r\n                />\r\n                {submitStatus === \"success\" && (\r\n                  <div className=\"p-4 bg-green-500/10 border border-green-500/30 rounded-lg\">\r\n                    <p className=\"text-green-600 dark:text-green-400 text-sm font-medium\">\r\n                      {t(\"success\", \"Message sent successfully! We'll get back to you soon.\")}\r\n                    </p>\r\n                  </div>\r\n                )}\r\n\r\n                {submitStatus === \"error\" && (\r\n                  <div className=\"p-4 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                    <p className=\"text-destructive text-sm font-medium\">\r\n                      {t(\"error\", \"Something went wrong. Please try again.\")}\r\n                    </p>\r\n                  </div>\r\n                )}\r\n\r\n                <Button type=\"submit\" size=\"lg\" className=\"w-full\" disabled={isSubmitting}>\r\n                  {isSubmitting ? t(\"sending\", \"Sending...\") : t(\"submit\", \"Send Message\")}\r\n                </Button>\r\n              </form>\r\n            </CardContent>\r\n          </Card>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPageCentered;\r\n"
+      "content": "import React, { useRef, useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Mail, Phone, MapPin, Upload } from \"lucide-react\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { Card, CardContent } from \"@/components/ui/card\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { FormFileInput } from \"@/components/FormFileInput\";\r\n\r\ninterface ContactPageCenteredProps {\r\n  className?: string;\r\n}\r\n\r\nexport function ContactPageCentered({ className }: ContactPageCenteredProps) {\r\n  const { t } = useTranslation(\"contact-page-centered\");\r\n  usePageTitle({ title: t(\"title\", \"Contact Us\") });\r\n  const apiService = useApiService();\r\n  const fileAcceptTypes = constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\";\r\n  const fileMaxFiles = constants.file?.maxFiles || 5;\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    message: \"\",\r\n    attachments: [] as File[]\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\"idle\" | \"success\" | \"error\">(\"idle\");\r\n  const fileInputRef = useRef<HTMLInputElement>(null);\r\n\r\n  const contactCards = [\r\n    {\r\n      icon: Mail,\r\n      title: t(\"emailTitle\", \"Email\"),\r\n      value: constants.email || \"hello@example.com\",\r\n      href: `mailto:${constants.email || \"hello@example.com\"}`,\r\n    },\r\n    {\r\n      icon: Phone,\r\n      title: t(\"phoneTitle\", \"Phone\"),\r\n      value: constants.phone || \"+1 234 567 890\",\r\n      href: `tel:${constants.phone || \"+1234567890\"}`,\r\n    },\r\n    {\r\n      icon: MapPin,\r\n      title: t(\"addressTitle\", \"Address\"),\r\n      value: constants.address?.city || \"New York, USA\",\r\n      href: \"#\",\r\n    },\r\n  ];\r\n  const handleFileUploadChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const selectedFiles = Array.from(e.target.files || []) as File[];\r\n\r\n    const remainingSlots = fileMaxFiles - formData.attachments.length;\r\n\r\n    // If the limit is exceeded, alert and do not add any files\r\n    if (selectedFiles.length > remainingSlots) {\r\n      alert(t(\"maxFilesLimit\", { max: fileMaxFiles }));\r\n      e.target.value = ''; // Clear the input\r\n      return;\r\n    }\r\n\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: [...prev.attachments, ...selectedFiles]\r\n    }));\r\n\r\n    e.target.value = ''; // Clear the input\r\n  }\r\n  const handleRemoveFile = (index: number) => {\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: prev.attachments.filter((_, i) => i !== index)\r\n    }));\r\n  };\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n\r\n    try {\r\n      await apiService.submitFormWithFile(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"message\", required: true },\r\n            { name: \"attachments\", required: false },\r\n          ],\r\n        },\r\n        constants.site.defaultLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({ name: \"\", email: \"\", message: \"\", attachments: [] });\r\n      setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    } catch {\r\n      setSubmitStatus(\"error\");\r\n      setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));\r\n  };\r\n\r\n  return (\r\n    <Layout>\r\n      <div className={cn(\"min-h-screen bg-muted/30 py-16 md:py-24\", className)}>\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 max-w-4xl\">\r\n          {/* Header */}\r\n          <div className=\"text-center mb-12\">\r\n            <h1 className=\"text-4xl font-bold mb-4\">{t(\"title\", \"Contact Us\")}</h1>\r\n            <p className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\r\n              {t(\"subtitle\", \"We'd love to hear from you. Send us a message and we'll respond as soon as possible.\")}\r\n            </p>\r\n          </div>\r\n\r\n          {/* Contact Cards */}\r\n          <div className=\"grid sm:grid-cols-3 gap-4 mb-12\">\r\n            {contactCards.map((card, index) => (\r\n              <Card key={index} className=\"text-center\">\r\n                <CardContent className=\"pt-6\">\r\n                  <div className=\"mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4\">\r\n                    <card.icon className=\"h-6 w-6 text-primary\" />\r\n                  </div>\r\n                  <h3 className=\"font-semibold mb-1\">{card.title}</h3>\r\n                  <a\r\n                    href={card.href}\r\n                    className=\"text-sm text-muted-foreground hover:text-primary transition-colors\"\r\n                  >\r\n                    {card.value}\r\n                  </a>\r\n                </CardContent>\r\n              </Card>\r\n            ))}\r\n          </div>\r\n\r\n          {/* Form */}\r\n          <Card>\r\n            <CardContent className=\"pt-6\">\r\n              <form onSubmit={handleSubmit} className=\"space-y-6\">\r\n                <div className=\"grid sm:grid-cols-2 gap-4\">\r\n                  <div>\r\n                    <Label htmlFor=\"name\">{t(\"nameLabel\", \"Name\")} *</Label>\r\n                    <Input\r\n                      id=\"name\"\r\n                      name=\"name\"\r\n                      value={formData.name}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"namePlaceholder\", \"Your name\")}\r\n                      required\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </div>\r\n                  <div>\r\n                    <Label htmlFor=\"email\">{t(\"emailLabel\", \"Email\")} *</Label>\r\n                    <Input\r\n                      id=\"email\"\r\n                      name=\"email\"\r\n                      type=\"email\"\r\n                      value={formData.email}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"emailPlaceholder\", \"your@email.com\")}\r\n                      required\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n\r\n                <div>\r\n                  <Label htmlFor=\"message\">{t(\"messageLabel\", \"Message\")} *</Label>\r\n                  <Textarea\r\n                    id=\"message\"\r\n                    name=\"message\"\r\n                    value={formData.message}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"messagePlaceholder\", \"How can we help you?\")}\r\n                    required\r\n                    rows={6}\r\n                    className=\"mt-1 resize-none\"\r\n                  />\r\n                </div>\r\n                <FormFileInput\r\n                    files={formData.attachments}\r\n                    onFilesChange={handleFileUploadChange}\r\n                    handleRemoveFile={handleRemoveFile}\r\n                    maxFiles={constants.file?.maxFiles || 5}\r\n                    accept={constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\"}\r\n                    disabled={isSubmitting}\r\n                    uploadButtonText={t(\"addFiles\")}\r\n                    maxFilesReachedText={t(\"maxFilesReached\")}\r\n                  />\r\n                {submitStatus === \"success\" && (\r\n                  <div className=\"p-4 bg-green-500/10 border border-green-500/30 rounded-lg\">\r\n                    <p className=\"text-green-600 dark:text-green-400 text-sm font-medium\">\r\n                      {t(\"success\", \"Message sent successfully! We'll get back to you soon.\")}\r\n                    </p>\r\n                  </div>\r\n                )}\r\n\r\n                {submitStatus === \"error\" && (\r\n                  <div className=\"p-4 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                    <p className=\"text-destructive text-sm font-medium\">\r\n                      {t(\"error\", \"Something went wrong. Please try again.\")}\r\n                    </p>\r\n                  </div>\r\n                )}\r\n\r\n                <Button type=\"submit\" size=\"lg\" className=\"w-full\" disabled={isSubmitting}>\r\n                  {isSubmitting ? t(\"sending\", \"Sending...\") : t(\"submit\", \"Send Message\")}\r\n                </Button>\r\n              </form>\r\n            </CardContent>\r\n          </Card>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPageCentered;\r\n"
     },
     {
       "path": "contact-page-centered/lang/en.json",

package/dist/registry/contact-page-map-overlay.json

@@ -30,7 +30,7 @@
       "path": "contact-page-map-overlay/contact-page-map-overlay.tsx",
       "type": "registry:component",
       "target": "$modules$/contact-page-map-overlay/contact-page-map-overlay.tsx",
-      "content": "import React, { useState, useMemo, useEffect } from \"react\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\r\nimport {\r\n  Mail,\r\n  Phone,\r\n  MapPin,\r\n  Facebook,\r\n  Twitter,\r\n  Instagram,\r\n  Linkedin,\r\n  Send,\r\n  ExternalLink,\r\n} from \"lucide-react\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { GoogleMap } from \"@/modules/google-map\";\r\nimport { FormFileInput } from \"@/components/FormFileInput\";\r\nimport { FormField } from \"@/components/FormField\";\r\n\r\nconst socialIcons: Record<string, React.ElementType> = {\r\n  facebook: Facebook,\r\n  twitter: Twitter,\r\n  instagram: Instagram,\r\n  linkedin: Linkedin,\r\n};\r\n\r\nexport function ContactPageMapOverlay() {\r\n  const { t } = useTranslation(\"contact-page-map-overlay\");\r\n  usePageTitle({ title: t(\"title\") });\r\n\r\n  const apiService = useApiService();\r\n\r\n  const socialLinks = useMemo(() => {\r\n    const socialMedia = constants.socialMedia as\r\n      | Record<string, string>\r\n      | undefined;\r\n    if (!socialMedia) return [];\r\n    return Object.entries(socialMedia)\r\n      .filter(([platform, url]) => url && socialIcons[platform])\r\n      .map(([platform, url]) => ({\r\n        platform,\r\n        url,\r\n        Icon: socialIcons[platform],\r\n      }));\r\n  }, []);\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    message: \"\",\r\n    attachments: [] as File[]\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\r\n    \"idle\" | \"success\" | \"error\"\r\n  >(\"idle\");\r\n  const handleFileUploadChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const selectedFiles = Array.from(e.target.files || []) as File[];\r\n    const maxFiles = constants.file?.maxFiles || 5;\r\n\r\n    const remainingSlots = maxFiles - formData.attachments.length;\r\n\r\n    // If the limit is exceeded, alert and do not add any files\r\n    if (selectedFiles.length > remainingSlots) {\r\n      alert(t(\"maxFilesLimit\", { max: maxFiles }));\r\n      e.target.value = ''; // Clear the input\r\n      return;\r\n    }\r\n\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: [...prev.attachments, ...selectedFiles]\r\n    }));\r\n\r\n    e.target.value = ''; // Clear the input\r\n  }\r\n\r\n  const handleRemoveFile = (index: number) => {\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: prev.attachments.filter((_, i) => i !== index)\r\n    }));\r\n  };\r\n\r\n  // Auto-reset status after 5 seconds with proper cleanup\r\n  useEffect(() => {\r\n    if (submitStatus === \"idle\") return;\r\n    const timer = setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    return () => clearTimeout(timer);\r\n  }, [submitStatus]);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n    try {\r\n      const currentLanguage = constants.site.defaultLanguage;\r\n\r\n      await apiService.submitFormWithFile(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"message\", required: true },\r\n            { name: \"attachments\", required: false },\r\n          ],\r\n        },\r\n        currentLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({\r\n        name: \"\",\r\n        email: \"\",\r\n        message: \"\",\r\n        attachments: []\r\n      });\r\n    } catch (error: unknown) {\r\n      console.error(\"Form submission failed:\", error);\r\n      setSubmitStatus(\"error\");\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleChange = (\r\n    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\r\n  ) => {\r\n    setFormData((prev) => ({\r\n      ...prev,\r\n      [e.target.name]: e.target.value,\r\n    }));\r\n  };\r\n\r\n  // Default coordinates (can be customized via constants)\r\n  const mapLatitude = (constants as any).location?.latitude || 41.0082;\r\n  const mapLongitude = (constants as any).location?.longitude || 28.9784;\r\n\r\n  return (\r\n    <Layout>\r\n      <div className=\"relative min-h-[calc(100vh-4rem)]\">\r\n        {/* Full-screen Map Background */}\r\n        <div className=\"absolute inset-0\">\r\n          <GoogleMap\r\n            latitude={mapLatitude}\r\n            longitude={mapLongitude}\r\n            zoom={14}\r\n            height=\"100%\"\r\n            className=\"rounded-none border-0 h-full\"\r\n            title={t(\"mapTitle\")}\r\n          />\r\n          {/* Dark overlay for better readability */}\r\n          <div className=\"absolute inset-0 bg-black/30 pointer-events-none\" />\r\n        </div>\r\n\r\n        {/* Content Overlay */}\r\n        <div className=\"relative z-10 min-h-[calc(100vh-4rem)] flex items-center py-12 px-4\">\r\n          <div className=\"w-full max-w-[var(--container-max-width)] mx-auto\">\r\n            <div className=\"grid lg:grid-cols-2 gap-8 items-stretch\">\r\n              {/* Form Card - Glassmorphism */}\r\n              <Card className=\"backdrop-blur-xl bg-background/85 dark:bg-background/90 border-white/20 shadow-2xl\">\r\n                <CardHeader>\r\n                  <CardTitle className=\"text-2xl lg:text-3xl\">\r\n                    {t(\"title\")}\r\n                  </CardTitle>\r\n                  <p className=\"text-muted-foreground mt-2\">\r\n                    {t(\"description\")}\r\n                  </p>\r\n                </CardHeader>\r\n                <CardContent>\r\n                  <form onSubmit={handleSubmit} className=\"space-y-5\">\r\n                    <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n                      <FormField label={t(\"fullName\")} htmlFor=\"name\" required>\r\n                      <Input\r\n                          id=\"name\"\r\n                          name=\"name\"\r\n                          type=\"text\"\r\n                          value={formData.name}\r\n                          onChange={handleChange}\r\n                          placeholder={t(\"fullNamePlaceholder\")}\r\n                          required\r\n                          className=\"mt-1.5 bg-background/50\"\r\n                        />\r\n                      </FormField>\r\n                      <FormField label={t(\"emailAddress\")} htmlFor=\"email\" required>\r\n                      <Input\r\n                          id=\"email\"\r\n                          name=\"email\"\r\n                          type=\"email\"\r\n                          value={formData.email}\r\n                          onChange={handleChange}\r\n                          placeholder={t(\"emailPlaceholder\")}\r\n                          required\r\n                          className=\"mt-1.5 bg-background/50\"\r\n                        />\r\n                      </FormField>\r\n                    </div>\r\n\r\n                    <FormField label={t(\"message\")} htmlFor=\"message\" required>\r\n                    <Textarea\r\n                        id=\"message\"\r\n                        name=\"message\"\r\n                        value={formData.message}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"messagePlaceholder\")}\r\n                        required\r\n                        rows={4}\r\n                        className=\"mt-1.5 resize-none bg-background/50\"\r\n                      />\r\n                    </FormField>\r\n                    <FormFileInput\r\n                    files={formData.attachments}\r\n                    onFilesChange={handleFileUploadChange}\r\n                    handleRemoveFile={handleRemoveFile}\r\n                    maxFiles={constants.file?.maxFiles || 5}\r\n                    accept={constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\"}\r\n                    disabled={isSubmitting}\r\n                    uploadButtonText={t(\"addFiles\")}\r\n                    maxFilesReachedText={t(\"maxFilesReached\")}\r\n                  />\r\n                    {submitStatus === \"success\" && (\r\n                      <div className=\"p-3 bg-green-500/10 border border-green-500/30 rounded-lg\">\r\n                        <p className=\"text-green-600 dark:text-green-400 text-sm\">\r\n                          {t(\"success\")}\r\n                        </p>\r\n                      </div>\r\n                    )}\r\n\r\n                    {submitStatus === \"error\" && (\r\n                      <div className=\"p-3 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                        <p className=\"text-destructive text-sm\">{t(\"error\")}</p>\r\n                      </div>\r\n                    )}\r\n\r\n                    <Button\r\n                      type=\"submit\"\r\n                      size=\"lg\"\r\n                      className=\"w-full\"\r\n                      disabled={isSubmitting}\r\n                    >\r\n                      {isSubmitting ? (\r\n                        <>\r\n                          <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                          {t(\"sending\")}\r\n                        </>\r\n                      ) : (\r\n                        <>\r\n                          <Send className=\"w-4 h-4 mr-2\" />\r\n                          {t(\"submit\")}\r\n                        </>\r\n                      )}\r\n                    </Button>\r\n                  </form>\r\n                </CardContent>\r\n              </Card>\r\n\r\n              {/* Contact Info Card - Glassmorphism */}\r\n              <Card className=\"backdrop-blur-xl bg-background/85 dark:bg-background/90 border-white/20 shadow-2xl\">\r\n                <CardHeader>\r\n                  <CardTitle>{t(\"contactInfo\")}</CardTitle>\r\n                </CardHeader>\r\n                <CardContent className=\"space-y-5\">\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0\">\r\n                      <Mail className=\"w-5 h-5 text-primary\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"text-sm text-muted-foreground\">{t(\"email\")}</p>\r\n                      <a\r\n                        href={`mailto:${constants.email}`}\r\n                        className=\"font-medium hover:text-primary transition-colors\"\r\n                      >\r\n                        {constants.email}\r\n                      </a>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0\">\r\n                      <Phone className=\"w-5 h-5 text-primary\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"text-sm text-muted-foreground\">{t(\"phone\")}</p>\r\n                      <a\r\n                        href={`tel:${constants.phone}`}\r\n                        className=\"font-medium hover:text-primary transition-colors\"\r\n                      >\r\n                        {constants.phone}\r\n                      </a>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0\">\r\n                      <MapPin className=\"w-5 h-5 text-primary\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"text-sm text-muted-foreground\">{t(\"address\")}</p>\r\n                      <p className=\"font-medium\">\r\n                        {constants.address.line1}\r\n                        <br />\r\n                        {constants.address.city}, {constants.address.state} {constants.address.postalCode}\r\n                      </p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  {/* Open in Maps Link */}\r\n                  <a\r\n                    href={`https://www.google.com/maps?q=${mapLatitude},${mapLongitude}`}\r\n                    target=\"_blank\"\r\n                    rel=\"noopener noreferrer\"\r\n                    className=\"inline-flex items-center gap-2 text-sm text-primary hover:underline mt-2\"\r\n                  >\r\n                    <ExternalLink className=\"w-4 h-4\" />\r\n                    {t(\"openInMaps\")}\r\n                  </a>\r\n\r\n                  {/* Social Links */}\r\n                  {socialLinks.length > 0 && (\r\n                    <div className=\"pt-4 border-t\">\r\n                      <p className=\"text-sm text-muted-foreground mb-3\">\r\n                        {t(\"followUs\")}\r\n                      </p>\r\n                      <div className=\"flex gap-2\">\r\n                        {socialLinks.map(({ platform, url, Icon }) => (\r\n                          <a\r\n                            key={platform}\r\n                            href={url}\r\n                            target=\"_blank\"\r\n                            rel=\"noopener noreferrer\"\r\n                            className=\"h-10 w-10 flex items-center justify-center rounded-full border text-muted-foreground hover:text-primary hover:border-primary transition-colors\"\r\n                          >\r\n                            <Icon className=\"h-4 w-4\" />\r\n                          </a>\r\n                        ))}\r\n                      </div>\r\n                    </div>\r\n                  )}\r\n                </CardContent>\r\n              </Card>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPageMapOverlay;\r\n"
+      "content": "import React, { useState, useMemo, useEffect, useRef } from \"react\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\r\nimport {\r\n  Mail,\r\n  Phone,\r\n  MapPin,\r\n  Facebook,\r\n  Twitter,\r\n  Instagram,\r\n  Linkedin,\r\n  Send,\r\n  ExternalLink,\r\n  Upload,\r\n} from \"lucide-react\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { GoogleMap } from \"@/modules/google-map\";\r\nimport { FormFileInput } from \"@/components/FormFileInput\";\r\n\r\nconst socialIcons: Record<string, React.ElementType> = {\r\n  facebook: Facebook,\r\n  twitter: Twitter,\r\n  instagram: Instagram,\r\n  linkedin: Linkedin,\r\n};\r\n\r\nexport function ContactPageMapOverlay() {\r\n  const { t } = useTranslation(\"contact-page-map-overlay\");\r\n  usePageTitle({ title: t(\"title\") });\r\n\r\n  const apiService = useApiService();\r\n\r\n  const socialLinks = useMemo(() => {\r\n    const socialMedia = constants.socialMedia as\r\n      | Record<string, string>\r\n      | undefined;\r\n    if (!socialMedia) return [];\r\n    return Object.entries(socialMedia)\r\n      .filter(([platform, url]) => url && socialIcons[platform])\r\n      .map(([platform, url]) => ({\r\n        platform,\r\n        url,\r\n        Icon: socialIcons[platform],\r\n      }));\r\n  }, []);\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    message: \"\",\r\n    attachments: [] as File[]\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\r\n    \"idle\" | \"success\" | \"error\"\r\n  >(\"idle\");\r\n  const fileInputRef = useRef<HTMLInputElement>(null);\r\n  const handleFileUploadChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const selectedFiles = Array.from(e.target.files || []) as File[];\r\n    const maxFiles = constants.file?.maxFiles || 5;\r\n\r\n    const remainingSlots = maxFiles - formData.attachments.length;\r\n\r\n    // If the limit is exceeded, alert and do not add any files\r\n    if (selectedFiles.length > remainingSlots) {\r\n      alert(t(\"maxFilesLimit\", { max: maxFiles }));\r\n      e.target.value = ''; // Clear the input\r\n      return;\r\n    }\r\n\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: [...prev.attachments, ...selectedFiles]\r\n    }));\r\n\r\n    e.target.value = ''; // Clear the input\r\n  }\r\n\r\n  const handleRemoveFile = (index: number) => {\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: prev.attachments.filter((_, i) => i !== index)\r\n    }));\r\n  };\r\n\r\n  // Auto-reset status after 5 seconds with proper cleanup\r\n  useEffect(() => {\r\n    if (submitStatus === \"idle\") return;\r\n    const timer = setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    return () => clearTimeout(timer);\r\n  }, [submitStatus]);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n    try {\r\n      const currentLanguage = constants.site.defaultLanguage;\r\n\r\n      await apiService.submitFormWithFile(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"message\", required: true },\r\n            { name: \"attachments\", required: false },\r\n          ],\r\n        },\r\n        currentLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({\r\n        name: \"\",\r\n        email: \"\",\r\n        message: \"\",\r\n        attachments: []\r\n      });\r\n    } catch (error: unknown) {\r\n      console.error(\"Form submission failed:\", error);\r\n      setSubmitStatus(\"error\");\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleChange = (\r\n    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\r\n  ) => {\r\n    setFormData((prev) => ({\r\n      ...prev,\r\n      [e.target.name]: e.target.value,\r\n    }));\r\n  };\r\n\r\n  // Default coordinates (can be customized via constants)\r\n  const mapLatitude = (constants as any).location?.latitude || 41.0082;\r\n  const mapLongitude = (constants as any).location?.longitude || 28.9784;\r\n\r\n  return (\r\n    <Layout>\r\n      <div className=\"relative min-h-[calc(100vh-4rem)]\">\r\n        {/* Full-screen Map Background */}\r\n        <div className=\"absolute inset-0\">\r\n          <GoogleMap\r\n            latitude={mapLatitude}\r\n            longitude={mapLongitude}\r\n            zoom={14}\r\n            height=\"100%\"\r\n            className=\"rounded-none border-0 h-full\"\r\n            title={t(\"mapTitle\")}\r\n          />\r\n          {/* Dark overlay for better readability */}\r\n          <div className=\"absolute inset-0 bg-black/30 pointer-events-none\" />\r\n        </div>\r\n\r\n        {/* Content Overlay */}\r\n        <div className=\"relative z-10 min-h-[calc(100vh-4rem)] flex items-center py-12 px-4\">\r\n          <div className=\"w-full max-w-[var(--container-max-width)] mx-auto\">\r\n            <div className=\"grid lg:grid-cols-2 gap-8 items-stretch\">\r\n              {/* Form Card - Glassmorphism */}\r\n              <Card className=\"backdrop-blur-xl bg-background/85 dark:bg-background/90 border-white/20 shadow-2xl\">\r\n                <CardHeader>\r\n                  <CardTitle className=\"text-2xl lg:text-3xl\">\r\n                    {t(\"title\")}\r\n                  </CardTitle>\r\n                  <p className=\"text-muted-foreground mt-2\">\r\n                    {t(\"description\")}\r\n                  </p>\r\n                </CardHeader>\r\n                <CardContent>\r\n                  <form onSubmit={handleSubmit} className=\"space-y-5\">\r\n                    <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n                      <div>\r\n                        <Label htmlFor=\"name\" className=\"text-sm font-medium\">\r\n                          {t(\"fullName\")} *\r\n                        </Label>\r\n                        <Input\r\n                          id=\"name\"\r\n                          name=\"name\"\r\n                          type=\"text\"\r\n                          value={formData.name}\r\n                          onChange={handleChange}\r\n                          placeholder={t(\"fullNamePlaceholder\")}\r\n                          required\r\n                          className=\"mt-1.5 bg-background/50\"\r\n                        />\r\n                      </div>\r\n                      <div>\r\n                        <Label htmlFor=\"email\" className=\"text-sm font-medium\">\r\n                          {t(\"emailAddress\")} *\r\n                        </Label>\r\n                        <Input\r\n                          id=\"email\"\r\n                          name=\"email\"\r\n                          type=\"email\"\r\n                          value={formData.email}\r\n                          onChange={handleChange}\r\n                          placeholder={t(\"emailPlaceholder\")}\r\n                          required\r\n                          className=\"mt-1.5 bg-background/50\"\r\n                        />\r\n                      </div>\r\n                    </div>\r\n\r\n                    <div>\r\n                      <Label htmlFor=\"message\" className=\"text-sm font-medium\">\r\n                        {t(\"message\")} *\r\n                      </Label>\r\n                      <Textarea\r\n                        id=\"message\"\r\n                        name=\"message\"\r\n                        value={formData.message}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"messagePlaceholder\")}\r\n                        required\r\n                        rows={4}\r\n                        className=\"mt-1.5 resize-none bg-background/50\"\r\n                      />\r\n                    </div>\r\n                    <FormFileInput\r\n                    files={formData.attachments}\r\n                    onFilesChange={handleFileUploadChange}\r\n                    handleRemoveFile={handleRemoveFile}\r\n                    maxFiles={constants.file?.maxFiles || 5}\r\n                    accept={constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\"}\r\n                    disabled={isSubmitting}\r\n                    uploadButtonText={t(\"addFiles\")}\r\n                    maxFilesReachedText={t(\"maxFilesReached\")}\r\n                  />\r\n                    {submitStatus === \"success\" && (\r\n                      <div className=\"p-3 bg-green-500/10 border border-green-500/30 rounded-lg\">\r\n                        <p className=\"text-green-600 dark:text-green-400 text-sm\">\r\n                          {t(\"success\")}\r\n                        </p>\r\n                      </div>\r\n                    )}\r\n\r\n                    {submitStatus === \"error\" && (\r\n                      <div className=\"p-3 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                        <p className=\"text-destructive text-sm\">{t(\"error\")}</p>\r\n                      </div>\r\n                    )}\r\n\r\n                    <Button\r\n                      type=\"submit\"\r\n                      size=\"lg\"\r\n                      className=\"w-full\"\r\n                      disabled={isSubmitting}\r\n                    >\r\n                      {isSubmitting ? (\r\n                        <>\r\n                          <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                          {t(\"sending\")}\r\n                        </>\r\n                      ) : (\r\n                        <>\r\n                          <Send className=\"w-4 h-4 mr-2\" />\r\n                          {t(\"submit\")}\r\n                        </>\r\n                      )}\r\n                    </Button>\r\n                  </form>\r\n                </CardContent>\r\n              </Card>\r\n\r\n              {/* Contact Info Card - Glassmorphism */}\r\n              <Card className=\"backdrop-blur-xl bg-background/85 dark:bg-background/90 border-white/20 shadow-2xl\">\r\n                <CardHeader>\r\n                  <CardTitle>{t(\"contactInfo\")}</CardTitle>\r\n                </CardHeader>\r\n                <CardContent className=\"space-y-5\">\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0\">\r\n                      <Mail className=\"w-5 h-5 text-primary\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"text-sm text-muted-foreground\">{t(\"email\")}</p>\r\n                      <a\r\n                        href={`mailto:${constants.email}`}\r\n                        className=\"font-medium hover:text-primary transition-colors\"\r\n                      >\r\n                        {constants.email}\r\n                      </a>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0\">\r\n                      <Phone className=\"w-5 h-5 text-primary\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"text-sm text-muted-foreground\">{t(\"phone\")}</p>\r\n                      <a\r\n                        href={`tel:${constants.phone}`}\r\n                        className=\"font-medium hover:text-primary transition-colors\"\r\n                      >\r\n                        {constants.phone}\r\n                      </a>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0\">\r\n                      <MapPin className=\"w-5 h-5 text-primary\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"text-sm text-muted-foreground\">{t(\"address\")}</p>\r\n                      <p className=\"font-medium\">\r\n                        {constants.address.line1}\r\n                        <br />\r\n                        {constants.address.city}, {constants.address.state} {constants.address.postalCode}\r\n                      </p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  {/* Open in Maps Link */}\r\n                  <a\r\n                    href={`https://www.google.com/maps?q=${mapLatitude},${mapLongitude}`}\r\n                    target=\"_blank\"\r\n                    rel=\"noopener noreferrer\"\r\n                    className=\"inline-flex items-center gap-2 text-sm text-primary hover:underline mt-2\"\r\n                  >\r\n                    <ExternalLink className=\"w-4 h-4\" />\r\n                    {t(\"openInMaps\")}\r\n                  </a>\r\n\r\n                  {/* Social Links */}\r\n                  {socialLinks.length > 0 && (\r\n                    <div className=\"pt-4 border-t\">\r\n                      <p className=\"text-sm text-muted-foreground mb-3\">\r\n                        {t(\"followUs\")}\r\n                      </p>\r\n                      <div className=\"flex gap-2\">\r\n                        {socialLinks.map(({ platform, url, Icon }) => (\r\n                          <a\r\n                            key={platform}\r\n                            href={url}\r\n                            target=\"_blank\"\r\n                            rel=\"noopener noreferrer\"\r\n                            className=\"h-10 w-10 flex items-center justify-center rounded-full border text-muted-foreground hover:text-primary hover:border-primary transition-colors\"\r\n                          >\r\n                            <Icon className=\"h-4 w-4\" />\r\n                          </a>\r\n                        ))}\r\n                      </div>\r\n                    </div>\r\n                  )}\r\n                </CardContent>\r\n              </Card>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPageMapOverlay;\r\n"
     },
     {
       "path": "contact-page-map-overlay/lang/en.json",

package/dist/registry/contact-page-map-split.json

@@ -30,7 +30,7 @@
       "path": "contact-page-map-split/contact-page-map-split.tsx",
       "type": "registry:component",
       "target": "$modules$/contact-page-map-split/contact-page-map-split.tsx",
-      "content": "import React, { useState, useMemo, useEffect } from \"react\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport {  \r\n  Mail,\r\n  Phone,\r\n  MapPin,\r\n  Facebook,\r\n  Twitter,\r\n  Instagram,\r\n  Linkedin,\r\n  Send,\r\n} from \"lucide-react\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { GoogleMap } from \"@/modules/google-map\";\r\nimport { FormFileInput } from \"@/components/FormFileInput\";\r\nimport { FormField } from \"@/components/FormField\";\r\n\r\nconst socialIcons: Record<string, React.ElementType> = {\r\n  facebook: Facebook,\r\n  twitter: Twitter,\r\n  instagram: Instagram,\r\n  linkedin: Linkedin,\r\n};\r\n\r\nexport function ContactPageMapSplit() {\r\n  const { t } = useTranslation(\"contact-page-map-split\");\r\n  usePageTitle({ title: t(\"title\") });\r\n\r\n  const apiService = useApiService();\r\n\r\n  const socialLinks = useMemo(() => {\r\n    const socialMedia = constants.socialMedia as\r\n      | Record<string, string>\r\n      | undefined;\r\n    if (!socialMedia) return [];\r\n    return Object.entries(socialMedia)\r\n      .filter(([platform, url]) => url && socialIcons[platform])\r\n      .map(([platform, url]) => ({\r\n        platform,\r\n        url,\r\n        Icon: socialIcons[platform],\r\n      }));\r\n  }, []);\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    phone: \"\",\r\n    message: \"\",\r\n    attachments: [] as File[]\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\r\n    \"idle\" | \"success\" | \"error\"\r\n  >(\"idle\");\r\n\r\n\r\n  const handleFileUploadChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const selectedFiles = Array.from(e.target.files || []) as File[];\r\n    const maxFiles = constants.file?.maxFiles || 5;\r\n\r\n    const remainingSlots = maxFiles - formData.attachments.length;\r\n\r\n    // If the limit is exceeded, alert and do not add any files\r\n    if (selectedFiles.length > remainingSlots) {\r\n      alert(t(\"maxFilesLimit\", { max: maxFiles }));\r\n      e.target.value = ''; // Clear the input\r\n      return;\r\n    }\r\n\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: [...prev.attachments, ...selectedFiles]\r\n    }));\r\n\r\n    e.target.value = ''; // Clear the input\r\n  }\r\n\r\n  const handleRemoveFile = (index: number) => {\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: prev.attachments.filter((_, i) => i !== index)\r\n    }));\r\n  };\r\n\r\n  // Auto-reset status after 5 seconds with proper cleanup\r\n  useEffect(() => {\r\n    if (submitStatus === \"idle\") return;\r\n    const timer = setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    return () => clearTimeout(timer);\r\n  }, [submitStatus]);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n\r\n    try {\r\n      const currentLanguage = constants.site.defaultLanguage;\r\n\r\n      await apiService.submitFormWithFile(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"phone\", required: false },\r\n            { name: \"message\", required: true },\r\n            { name: \"attachments\", required: false },\r\n          ],\r\n        },\r\n        currentLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({\r\n        name: \"\",\r\n        email: \"\",\r\n        phone: \"\",\r\n        message: \"\",\r\n        attachments: []\r\n      });\r\n    } catch (error: unknown) {\r\n      console.error(\"Form submission failed:\", error);\r\n      setSubmitStatus(\"error\");\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleChange = (\r\n    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\r\n  ) => {\r\n    setFormData((prev) => ({\r\n      ...prev,\r\n      [e.target.name]: e.target.value,\r\n    }));\r\n  };\r\n\r\n  // Default coordinates (can be customized via constants)\r\n  const mapLatitude = (constants as any).location?.latitude || 41.0082;\r\n  const mapLongitude = (constants as any).location?.longitude || 28.9784;\r\n\r\n  return (\r\n    <Layout>\r\n      <div className=\"min-h-screen flex flex-col lg:flex-row\">\r\n        {/* Left Side - Form & Info */}\r\n        <div className=\"w-full lg:w-1/2 bg-background py-12 lg:py-16 px-6 lg:px-12 flex flex-col justify-center\">\r\n          <div className=\"max-w-lg mx-auto w-full\">\r\n            {/* Header */}\r\n            <div className=\"mb-10\">\r\n              <h1 className=\"text-3xl lg:text-4xl font-bold text-foreground mb-3\">\r\n                {t(\"title\")}\r\n              </h1>\r\n              <p className=\"text-muted-foreground\">\r\n                {t(\"description\")}\r\n              </p>\r\n            </div>\r\n\r\n            {/* Contact Info Cards */}\r\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mb-10\">\r\n              <div className=\"flex items-center gap-3 p-4 rounded-xl bg-muted/50\">\r\n                <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center\">\r\n                  <Mail className=\"w-5 h-5 text-primary\" />\r\n                </div>\r\n                <div className=\"min-w-0\">\r\n                  <p className=\"text-xs text-muted-foreground\">{t(\"email\")}</p>\r\n                  <p className=\"text-sm font-medium truncate\">{constants.email}</p>\r\n                </div>\r\n              </div>\r\n\r\n              <div className=\"flex items-center gap-3 p-4 rounded-xl bg-muted/50\">\r\n                <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center\">\r\n                  <Phone className=\"w-5 h-5 text-primary\" />\r\n                </div>\r\n                <div className=\"min-w-0\">\r\n                  <p className=\"text-xs text-muted-foreground\">{t(\"phone\")}</p>\r\n                  <p className=\"text-sm font-medium truncate\">{constants.phone}</p>\r\n                </div>\r\n              </div>\r\n\r\n              <div className=\"flex items-center gap-3 p-4 rounded-xl bg-muted/50 sm:col-span-2\">\r\n                <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0\">\r\n                  <MapPin className=\"w-5 h-5 text-primary\" />\r\n                </div>\r\n                <div className=\"min-w-0\">\r\n                  <p className=\"text-xs text-muted-foreground\">{t(\"address\")}</p>\r\n                  <p className=\"text-sm font-medium\">\r\n                    {constants.address.line1}, {constants.address.city}\r\n                  </p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            {/* Contact Form */}\r\n            <form onSubmit={handleSubmit} className=\"space-y-5\">\r\n              <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n                <FormField label={t(\"fullName\")} htmlFor=\"name\" required>\r\n                <Input\r\n                    id=\"name\"\r\n                    name=\"name\"\r\n                    type=\"text\"\r\n                    value={formData.name}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"fullNamePlaceholder\")}\r\n                    required\r\n                    className=\"mt-1.5\"\r\n                  />\r\n                </FormField>\r\n                <FormField label={t(\"emailAddress\")} htmlFor=\"email\" required>\r\n                <Input\r\n                    id=\"email\"\r\n                    name=\"email\"\r\n                    type=\"email\"\r\n                    value={formData.email}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"emailPlaceholder\")}\r\n                    required\r\n                    className=\"mt-1.5\"\r\n                  />\r\n                  </FormField>\r\n              </div>\r\n\r\n              <FormField label={t(\"phoneNumber\")} htmlFor=\"phone\">\r\n              <Input\r\n                  id=\"phone\"\r\n                  name=\"phone\"\r\n                  type=\"tel\"\r\n                  value={formData.phone}\r\n                  onChange={handleChange}\r\n                  placeholder={t(\"phonePlaceholder\")}\r\n                  className=\"mt-1.5\"\r\n                />\r\n              </FormField>\r\n              <FormField label={t(\"message\")} htmlFor=\"message\" required>\r\n              <Textarea\r\n                  id=\"message\"\r\n                  name=\"message\"\r\n                  value={formData.message}\r\n                  onChange={handleChange}\r\n                  placeholder={t(\"messagePlaceholder\")}\r\n                  required\r\n                  rows={4}\r\n                  className=\"mt-1.5 resize-none\"\r\n                />\r\n              </FormField>\r\n              <FormFileInput\r\n                files={formData.attachments}\r\n                onFilesChange={handleFileUploadChange}\r\n                handleRemoveFile={handleRemoveFile}\r\n                maxFiles={constants.file?.maxFiles || 5}\r\n                accept={constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\"}\r\n                disabled={isSubmitting}\r\n                uploadButtonText={t(\"addFiles\")}\r\n                maxFilesReachedText={t(\"maxFilesReached\")}\r\n              />\r\n              {submitStatus === \"success\" && (\r\n                <div className=\"p-3 bg-green-500/10 border border-green-500/30 rounded-lg\">\r\n                  <p className=\"text-green-600 dark:text-green-400 text-sm\">\r\n                    {t(\"success\")}\r\n                  </p>\r\n                </div>\r\n              )}\r\n\r\n              {submitStatus === \"error\" && (\r\n                <div className=\"p-3 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                  <p className=\"text-destructive text-sm\">{t(\"error\")}</p>\r\n                </div>\r\n              )}\r\n\r\n              <Button\r\n                type=\"submit\"\r\n                size=\"lg\"\r\n                className=\"w-full\"\r\n                disabled={isSubmitting}\r\n              >\r\n                {isSubmitting ? (\r\n                  <>\r\n                    <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                    {t(\"sending\")}\r\n                  </>\r\n                ) : (\r\n                  <>\r\n                    <Send className=\"w-4 h-4 mr-2\" />\r\n                    {t(\"submit\")}\r\n                  </>\r\n                )}\r\n              </Button>\r\n            </form>\r\n\r\n            {/* Social Links */}\r\n            {socialLinks.length > 0 && (\r\n              <div className=\"mt-10 pt-6 border-t\">\r\n                <p className=\"text-sm text-muted-foreground mb-3\">\r\n                  {t(\"followUs\")}\r\n                </p>\r\n                <div className=\"flex gap-2\">\r\n                  {socialLinks.map(({ platform, url, Icon }) => (\r\n                    <a\r\n                      key={platform}\r\n                      href={url}\r\n                      target=\"_blank\"\r\n                      rel=\"noopener noreferrer\"\r\n                      className=\"h-10 w-10 flex items-center justify-center rounded-full border text-muted-foreground hover:text-primary hover:border-primary transition-colors\"\r\n                    >\r\n                      <Icon className=\"h-4 w-4\" />\r\n                    </a>\r\n                  ))}\r\n                </div>\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n\r\n        {/* Right Side - Map */}\r\n        <div className=\"w-full lg:w-1/2 h-[400px] lg:h-[calc(100vh-4rem)] relative\">\r\n          <GoogleMap\r\n            latitude={mapLatitude}\r\n            longitude={mapLongitude}\r\n            zoom={14}\r\n            height=\"100%\"\r\n            className=\"rounded-none border-0 h-full\"\r\n            title={t(\"mapTitle\")}\r\n          />\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPageMapSplit;\r\n"
+      "content": "import React, { useState, useMemo, useEffect, useRef } from \"react\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport {\r\n  Mail,\r\n  Phone,\r\n  MapPin,\r\n  Facebook,\r\n  Twitter,\r\n  Instagram,\r\n  Linkedin,\r\n  Send,\r\n  Upload,\r\n} from \"lucide-react\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { GoogleMap } from \"@/modules/google-map\";\r\nimport { FormFileInput } from \"@/components/FormFileInput\";\r\n\r\nconst socialIcons: Record<string, React.ElementType> = {\r\n  facebook: Facebook,\r\n  twitter: Twitter,\r\n  instagram: Instagram,\r\n  linkedin: Linkedin,\r\n};\r\n\r\nexport function ContactPageMapSplit() {\r\n  const { t } = useTranslation(\"contact-page-map-split\");\r\n  usePageTitle({ title: t(\"title\") });\r\n\r\n  const apiService = useApiService();\r\n\r\n  const socialLinks = useMemo(() => {\r\n    const socialMedia = constants.socialMedia as\r\n      | Record<string, string>\r\n      | undefined;\r\n    if (!socialMedia) return [];\r\n    return Object.entries(socialMedia)\r\n      .filter(([platform, url]) => url && socialIcons[platform])\r\n      .map(([platform, url]) => ({\r\n        platform,\r\n        url,\r\n        Icon: socialIcons[platform],\r\n      }));\r\n  }, []);\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    phone: \"\",\r\n    message: \"\",\r\n    attachments: [] as File[]\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\r\n    \"idle\" | \"success\" | \"error\"\r\n  >(\"idle\");\r\n  const fileInputRef = useRef<HTMLInputElement>(null);\r\n\r\n  const handleFileUploadChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const selectedFiles = Array.from(e.target.files || []) as File[];\r\n    const maxFiles = constants.file?.maxFiles || 5;\r\n\r\n    const remainingSlots = maxFiles - formData.attachments.length;\r\n\r\n    // If the limit is exceeded, alert and do not add any files\r\n    if (selectedFiles.length > remainingSlots) {\r\n      alert(t(\"maxFilesLimit\", { max: maxFiles }));\r\n      e.target.value = ''; // Clear the input\r\n      return;\r\n    }\r\n\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: [...prev.attachments, ...selectedFiles]\r\n    }));\r\n\r\n    e.target.value = ''; // Clear the input\r\n  }\r\n\r\n  const handleRemoveFile = (index: number) => {\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: prev.attachments.filter((_, i) => i !== index)\r\n    }));\r\n  };\r\n\r\n  // Auto-reset status after 5 seconds with proper cleanup\r\n  useEffect(() => {\r\n    if (submitStatus === \"idle\") return;\r\n    const timer = setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    return () => clearTimeout(timer);\r\n  }, [submitStatus]);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n\r\n    try {\r\n      const currentLanguage = constants.site.defaultLanguage;\r\n\r\n      await apiService.submitFormWithFile(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"phone\", required: false },\r\n            { name: \"message\", required: true },\r\n            { name: \"attachments\", required: false },\r\n          ],\r\n        },\r\n        currentLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({\r\n        name: \"\",\r\n        email: \"\",\r\n        phone: \"\",\r\n        message: \"\",\r\n        attachments: []\r\n      });\r\n    } catch (error: unknown) {\r\n      console.error(\"Form submission failed:\", error);\r\n      setSubmitStatus(\"error\");\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleChange = (\r\n    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\r\n  ) => {\r\n    setFormData((prev) => ({\r\n      ...prev,\r\n      [e.target.name]: e.target.value,\r\n    }));\r\n  };\r\n\r\n  // Default coordinates (can be customized via constants)\r\n  const mapLatitude = (constants as any).location?.latitude || 41.0082;\r\n  const mapLongitude = (constants as any).location?.longitude || 28.9784;\r\n\r\n  return (\r\n    <Layout>\r\n      <div className=\"min-h-screen flex flex-col lg:flex-row\">\r\n        {/* Left Side - Form & Info */}\r\n        <div className=\"w-full lg:w-1/2 bg-background py-12 lg:py-16 px-6 lg:px-12 flex flex-col justify-center\">\r\n          <div className=\"max-w-lg mx-auto w-full\">\r\n            {/* Header */}\r\n            <div className=\"mb-10\">\r\n              <h1 className=\"text-3xl lg:text-4xl font-bold text-foreground mb-3\">\r\n                {t(\"title\")}\r\n              </h1>\r\n              <p className=\"text-muted-foreground\">\r\n                {t(\"description\")}\r\n              </p>\r\n            </div>\r\n\r\n            {/* Contact Info Cards */}\r\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mb-10\">\r\n              <div className=\"flex items-center gap-3 p-4 rounded-xl bg-muted/50\">\r\n                <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center\">\r\n                  <Mail className=\"w-5 h-5 text-primary\" />\r\n                </div>\r\n                <div className=\"min-w-0\">\r\n                  <p className=\"text-xs text-muted-foreground\">{t(\"email\")}</p>\r\n                  <p className=\"text-sm font-medium truncate\">{constants.email}</p>\r\n                </div>\r\n              </div>\r\n\r\n              <div className=\"flex items-center gap-3 p-4 rounded-xl bg-muted/50\">\r\n                <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center\">\r\n                  <Phone className=\"w-5 h-5 text-primary\" />\r\n                </div>\r\n                <div className=\"min-w-0\">\r\n                  <p className=\"text-xs text-muted-foreground\">{t(\"phone\")}</p>\r\n                  <p className=\"text-sm font-medium truncate\">{constants.phone}</p>\r\n                </div>\r\n              </div>\r\n\r\n              <div className=\"flex items-center gap-3 p-4 rounded-xl bg-muted/50 sm:col-span-2\">\r\n                <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0\">\r\n                  <MapPin className=\"w-5 h-5 text-primary\" />\r\n                </div>\r\n                <div className=\"min-w-0\">\r\n                  <p className=\"text-xs text-muted-foreground\">{t(\"address\")}</p>\r\n                  <p className=\"text-sm font-medium\">\r\n                    {constants.address.line1}, {constants.address.city}\r\n                  </p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            {/* Contact Form */}\r\n            <form onSubmit={handleSubmit} className=\"space-y-5\">\r\n              <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n                <div>\r\n                  <Label htmlFor=\"name\" className=\"text-sm font-medium\">\r\n                    {t(\"fullName\")} *\r\n                  </Label>\r\n                  <Input\r\n                    id=\"name\"\r\n                    name=\"name\"\r\n                    type=\"text\"\r\n                    value={formData.name}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"fullNamePlaceholder\")}\r\n                    required\r\n                    className=\"mt-1.5\"\r\n                  />\r\n                </div>\r\n                <div>\r\n                  <Label htmlFor=\"email\" className=\"text-sm font-medium\">\r\n                    {t(\"emailAddress\")} *\r\n                  </Label>\r\n                  <Input\r\n                    id=\"email\"\r\n                    name=\"email\"\r\n                    type=\"email\"\r\n                    value={formData.email}\r\n                    onChange={handleChange}\r\n                    placeholder={t(\"emailPlaceholder\")}\r\n                    required\r\n                    className=\"mt-1.5\"\r\n                  />\r\n                </div>\r\n              </div>\r\n\r\n              <div>\r\n                <Label htmlFor=\"phone\" className=\"text-sm font-medium\">\r\n                  {t(\"phoneNumber\")}\r\n                </Label>\r\n                <Input\r\n                  id=\"phone\"\r\n                  name=\"phone\"\r\n                  type=\"tel\"\r\n                  value={formData.phone}\r\n                  onChange={handleChange}\r\n                  placeholder={t(\"phonePlaceholder\")}\r\n                  className=\"mt-1.5\"\r\n                />\r\n              </div>\r\n\r\n              <div>\r\n                <Label htmlFor=\"message\" className=\"text-sm font-medium\">\r\n                  {t(\"message\")} *\r\n                </Label>\r\n                <Textarea\r\n                  id=\"message\"\r\n                  name=\"message\"\r\n                  value={formData.message}\r\n                  onChange={handleChange}\r\n                  placeholder={t(\"messagePlaceholder\")}\r\n                  required\r\n                  rows={4}\r\n                  className=\"mt-1.5 resize-none\"\r\n                />\r\n              </div>\r\n              <FormFileInput\r\n                files={formData.attachments}\r\n                onFilesChange={handleFileUploadChange}\r\n                handleRemoveFile={handleRemoveFile}\r\n                maxFiles={constants.file?.maxFiles || 5}\r\n                accept={constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\"}\r\n                disabled={isSubmitting}\r\n                uploadButtonText={t(\"addFiles\")}\r\n                maxFilesReachedText={t(\"maxFilesReached\")}\r\n              />\r\n              {submitStatus === \"success\" && (\r\n                <div className=\"p-3 bg-green-500/10 border border-green-500/30 rounded-lg\">\r\n                  <p className=\"text-green-600 dark:text-green-400 text-sm\">\r\n                    {t(\"success\")}\r\n                  </p>\r\n                </div>\r\n              )}\r\n\r\n              {submitStatus === \"error\" && (\r\n                <div className=\"p-3 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                  <p className=\"text-destructive text-sm\">{t(\"error\")}</p>\r\n                </div>\r\n              )}\r\n\r\n              <Button\r\n                type=\"submit\"\r\n                size=\"lg\"\r\n                className=\"w-full\"\r\n                disabled={isSubmitting}\r\n              >\r\n                {isSubmitting ? (\r\n                  <>\r\n                    <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                    {t(\"sending\")}\r\n                  </>\r\n                ) : (\r\n                  <>\r\n                    <Send className=\"w-4 h-4 mr-2\" />\r\n                    {t(\"submit\")}\r\n                  </>\r\n                )}\r\n              </Button>\r\n            </form>\r\n\r\n            {/* Social Links */}\r\n            {socialLinks.length > 0 && (\r\n              <div className=\"mt-10 pt-6 border-t\">\r\n                <p className=\"text-sm text-muted-foreground mb-3\">\r\n                  {t(\"followUs\")}\r\n                </p>\r\n                <div className=\"flex gap-2\">\r\n                  {socialLinks.map(({ platform, url, Icon }) => (\r\n                    <a\r\n                      key={platform}\r\n                      href={url}\r\n                      target=\"_blank\"\r\n                      rel=\"noopener noreferrer\"\r\n                      className=\"h-10 w-10 flex items-center justify-center rounded-full border text-muted-foreground hover:text-primary hover:border-primary transition-colors\"\r\n                    >\r\n                      <Icon className=\"h-4 w-4\" />\r\n                    </a>\r\n                  ))}\r\n                </div>\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n\r\n        {/* Right Side - Map */}\r\n        <div className=\"w-full lg:w-1/2 h-[400px] lg:h-[calc(100vh-4rem)] relative\">\r\n          <GoogleMap\r\n            latitude={mapLatitude}\r\n            longitude={mapLongitude}\r\n            zoom={14}\r\n            height=\"100%\"\r\n            className=\"rounded-none border-0 h-full\"\r\n            title={t(\"mapTitle\")}\r\n          />\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPageMapSplit;\r\n"
     },
     {
       "path": "contact-page-map-split/lang/en.json",

package/dist/registry/contact-page-split.json

@@ -24,7 +24,7 @@
       "path": "contact-page-split/contact-page-split.tsx",
       "type": "registry:component",
       "target": "$modules$/contact-page-split/contact-page-split.tsx",
-      "content": "import React, { useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Mail, Phone, MapPin, Clock } from \"lucide-react\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { FormFileInput } from \"@/components/FormFileInput\";\r\nimport { FormField } from \"@/components/FormField\";\r\n\r\ninterface ContactPageSplitProps {\r\n  className?: string;\r\n}\r\n\r\nexport function ContactPageSplit({ className }: ContactPageSplitProps) {\r\n  const { t } = useTranslation(\"contact-page-split\");\r\n  usePageTitle({ title: t(\"pageTitle\", \"Contact Us\") });\r\n  const apiService = useApiService();\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    phone: \"\",\r\n    message: \"\",\r\n    attachments: [] as File[]\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\"idle\" | \"success\" | \"error\">(\"idle\");\r\n\r\n\r\n  const handleFileUploadChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const selectedFiles = Array.from(e.target.files || []) as File[];\r\n    const fileMaxFiles = constants.file?.maxFiles || 5;\r\n\r\n    const remainingSlots = fileMaxFiles - formData.attachments.length;\r\n\r\n    // If the limit is exceeded, alert and do not add any files\r\n    if (selectedFiles.length > remainingSlots) {\r\n      alert(t(\"maxFilesLimit\", { max: fileMaxFiles }));\r\n      e.target.value = ''; // Clear the input\r\n      return;\r\n    }\r\n\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: [...prev.attachments, ...selectedFiles]\r\n    }));\r\n\r\n    e.target.value = ''; // Clear the input\r\n  }\r\n\r\n  const handleRemoveFile = (index: number) => {\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: prev.attachments.filter((_, i) => i !== index)\r\n    }));\r\n  };\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n\r\n    try {\r\n      await apiService.submitFormWithFile(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"phone\", required: false },\r\n            { name: \"message\", required: true },\r\n            { name: \"attachments\", required: false },\r\n          ],\r\n        },\r\n        constants.site.defaultLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({ name: \"\", email: \"\", phone: \"\", message: \"\", attachments: [] });\r\n      setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    } catch {\r\n      setSubmitStatus(\"error\");\r\n      setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));\r\n  };\r\n\r\n  return (\r\n    <Layout>\r\n      <div className={cn(\"min-h-[calc(100vh-200px)] py-8 md:py-12\", className)}>\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\r\n          <div className=\"grid lg:grid-cols-2 h-full rounded-xl overflow-hidden shadow-lg\">\r\n            {/* Left Side - Info & Image */}\r\n            <div className=\"relative bg-primary text-primary-foreground p-8 lg:p-12 flex flex-col justify-center\">\r\n              {/* Background Pattern */}\r\n              <div className=\"absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.1)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[size:4rem_4rem]\" />\r\n\r\n              <div className=\"relative z-10 max-w-lg\">\r\n                <h1 className=\"text-3xl lg:text-4xl font-bold mb-4\">\r\n                  {t(\"title\", \"Let's Start a Conversation\")}\r\n                </h1>\r\n                <p className=\"text-primary-foreground/80 mb-8\">\r\n                  {t(\"subtitle\", \"Have a project in mind? We'd love to hear about it. Get in touch and let's create something amazing together.\")}\r\n                </p>\r\n\r\n                <div className=\"space-y-6\">\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary-foreground/10 flex items-center justify-center flex-shrink-0\">\r\n                      <Mail className=\"h-5 w-5\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"font-semibold\">{t(\"emailLabel\", \"Email\")}</p>\r\n                      <p className=\"text-primary-foreground/70\">{constants.email || \"hello@example.com\"}</p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary-foreground/10 flex items-center justify-center flex-shrink-0\">\r\n                      <Phone className=\"h-5 w-5\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"font-semibold\">{t(\"phoneLabel\", \"Phone\")}</p>\r\n                      <p className=\"text-primary-foreground/70\">{constants.phone || \"+1 234 567 890\"}</p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary-foreground/10 flex items-center justify-center flex-shrink-0\">\r\n                      <MapPin className=\"h-5 w-5\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"font-semibold\">{t(\"addressLabel\", \"Address\")}</p>\r\n                      <p className=\"text-primary-foreground/70\">\r\n                        {constants.address?.line1 || \"123 Main Street\"}<br />\r\n                        {constants.address?.city || \"New York\"}, {constants.address?.country || \"USA\"}\r\n                      </p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary-foreground/10 flex items-center justify-center flex-shrink-0\">\r\n                      <Clock className=\"h-5 w-5\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"font-semibold\">{t(\"hoursLabel\", \"Business Hours\")}</p>\r\n                      <p className=\"text-primary-foreground/70\">{t(\"hours\", \"Mon - Fri: 9:00 AM - 6:00 PM\")}</p>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            {/* Right Side - Form */}\r\n            <div className=\"p-8 lg:p-12 flex items-center justify-center bg-background\">\r\n              <div className=\"w-full max-w-md\">\r\n                <h2 className=\"text-2xl font-bold mb-2\">{t(\"formTitle\", \"Send us a message\")}</h2>\r\n                <p className=\"text-muted-foreground mb-8\">\r\n                  {t(\"formSubtitle\", \"Fill out the form below and we'll get back to you as soon as possible.\")}\r\n                </p>\r\n\r\n                <form onSubmit={handleSubmit} className=\"space-y-5\">\r\n                  <FormField label={t(\"nameLabel\", \"Full Name\")} htmlFor=\"name\" required>\r\n                    <Input\r\n                      id=\"name\"\r\n                      name=\"name\"\r\n                      value={formData.name}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"namePlaceholder\", \"John Doe\")}\r\n                      required\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </FormField>\r\n\r\n                  <FormField label={t(\"emailInputLabel\", \"Email\")} htmlFor=\"email\" required>\r\n                    <Input\r\n                      id=\"email\"\r\n                      name=\"email\"\r\n                      type=\"email\"\r\n                      value={formData.email}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"emailPlaceholder\", \"john@example.com\")}\r\n                      required\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </FormField>\r\n\r\n                  <FormField label={t(\"phoneInputLabel\", \"Phone\")} htmlFor=\"phone\">\r\n                    <Input\r\n                      id=\"phone\"\r\n                      name=\"phone\"\r\n                      type=\"tel\"\r\n                      value={formData.phone}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"phonePlaceholder\", \"+1 234 567 890\")}\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </FormField>\r\n                  <FormField label={t(\"messageLabel\", \"Message\")} htmlFor=\"message\" required>\r\n                    <Textarea\r\n                      id=\"message\"\r\n                      name=\"message\"\r\n                      value={formData.message}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"messagePlaceholder\", \"Tell us about your project...\")}\r\n                      required\r\n                      rows={5}\r\n                      className=\"mt-1 resize-none\"\r\n                    />\r\n                  </FormField>\r\n                  <FormFileInput\r\n                    files={formData.attachments}\r\n                    onFilesChange={handleFileUploadChange}\r\n                    handleRemoveFile={handleRemoveFile}\r\n                    maxFiles={constants.file?.maxFiles || 5}\r\n                    accept={constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\"}\r\n                    disabled={isSubmitting}\r\n                    uploadButtonText={t(\"addFiles\")}\r\n                    maxFilesReachedText={t(\"maxFilesReached\")}\r\n                  />\r\n                  {submitStatus === \"success\" && (\r\n                    <div className=\"p-4 bg-green-500/10 border border-green-500/30 rounded-lg\">\r\n                      <p className=\"text-green-600 dark:text-green-400 text-sm font-medium\">\r\n                        {t(\"success\", \"Message sent! We'll be in touch soon.\")}\r\n                      </p>\r\n                    </div>\r\n                  )}\r\n\r\n                  {submitStatus === \"error\" && (\r\n                    <div className=\"p-4 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                      <p className=\"text-destructive text-sm font-medium\">\r\n                        {t(\"error\", \"Something went wrong. Please try again.\")}\r\n                      </p>\r\n                    </div>\r\n                  )}\r\n\r\n                  <Button type=\"submit\" size=\"lg\" className=\"w-full\" disabled={isSubmitting}>\r\n                    {isSubmitting ? t(\"sending\", \"Sending...\") : t(\"submit\", \"Send Message\")}\r\n                  </Button>\r\n                </form>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPageSplit;\r\n"
+      "content": "import React, { useRef, useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Mail, Phone, MapPin, Clock } from \"lucide-react\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { FormFileInput } from \"@/components/FormFileInput\";\r\n\r\ninterface ContactPageSplitProps {\r\n  className?: string;\r\n}\r\n\r\nexport function ContactPageSplit({ className }: ContactPageSplitProps) {\r\n  const { t } = useTranslation(\"contact-page-split\");\r\n  usePageTitle({ title: t(\"pageTitle\", \"Contact Us\") });\r\n  const apiService = useApiService();\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    phone: \"\",\r\n    message: \"\",\r\n    attachments: [] as File[]\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\"idle\" | \"success\" | \"error\">(\"idle\");\r\n\r\n\r\n  const handleFileUploadChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const selectedFiles = Array.from(e.target.files || []) as File[];\r\n    const fileMaxFiles = constants.file?.maxFiles || 5;\r\n\r\n    const remainingSlots = fileMaxFiles - formData.attachments.length;\r\n\r\n    // If the limit is exceeded, alert and do not add any files\r\n    if (selectedFiles.length > remainingSlots) {\r\n      alert(t(\"maxFilesLimit\", { max: fileMaxFiles }));\r\n      e.target.value = ''; // Clear the input\r\n      return;\r\n    }\r\n\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: [...prev.attachments, ...selectedFiles]\r\n    }));\r\n\r\n    e.target.value = ''; // Clear the input\r\n  }\r\n\r\n  const handleRemoveFile = (index: number) => {\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: prev.attachments.filter((_, i) => i !== index)\r\n    }));\r\n  };\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n\r\n    try {\r\n      await apiService.submitFormWithFile(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"phone\", required: false },\r\n            { name: \"message\", required: true },\r\n            { name: \"attachments\", required: false },\r\n          ],\r\n        },\r\n        constants.site.defaultLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({ name: \"\", email: \"\", phone: \"\", message: \"\", attachments: [] });\r\n      setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    } catch {\r\n      setSubmitStatus(\"error\");\r\n      setTimeout(() => setSubmitStatus(\"idle\"), 5000);\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));\r\n  };\r\n\r\n  return (\r\n    <Layout>\r\n      <div className={cn(\"min-h-[calc(100vh-200px)] py-8 md:py-12\", className)}>\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\r\n          <div className=\"grid lg:grid-cols-2 h-full rounded-xl overflow-hidden shadow-lg\">\r\n            {/* Left Side - Info & Image */}\r\n            <div className=\"relative bg-primary text-primary-foreground p-8 lg:p-12 flex flex-col justify-center\">\r\n              {/* Background Pattern */}\r\n              <div className=\"absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.1)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[size:4rem_4rem]\" />\r\n\r\n              <div className=\"relative z-10 max-w-lg\">\r\n                <h1 className=\"text-3xl lg:text-4xl font-bold mb-4\">\r\n                  {t(\"title\", \"Let's Start a Conversation\")}\r\n                </h1>\r\n                <p className=\"text-primary-foreground/80 mb-8\">\r\n                  {t(\"subtitle\", \"Have a project in mind? We'd love to hear about it. Get in touch and let's create something amazing together.\")}\r\n                </p>\r\n\r\n                <div className=\"space-y-6\">\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary-foreground/10 flex items-center justify-center flex-shrink-0\">\r\n                      <Mail className=\"h-5 w-5\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"font-semibold\">{t(\"emailLabel\", \"Email\")}</p>\r\n                      <p className=\"text-primary-foreground/70\">{constants.email || \"hello@example.com\"}</p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary-foreground/10 flex items-center justify-center flex-shrink-0\">\r\n                      <Phone className=\"h-5 w-5\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"font-semibold\">{t(\"phoneLabel\", \"Phone\")}</p>\r\n                      <p className=\"text-primary-foreground/70\">{constants.phone || \"+1 234 567 890\"}</p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary-foreground/10 flex items-center justify-center flex-shrink-0\">\r\n                      <MapPin className=\"h-5 w-5\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"font-semibold\">{t(\"addressLabel\", \"Address\")}</p>\r\n                      <p className=\"text-primary-foreground/70\">\r\n                        {constants.address?.line1 || \"123 Main Street\"}<br />\r\n                        {constants.address?.city || \"New York\"}, {constants.address?.country || \"USA\"}\r\n                      </p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-4\">\r\n                    <div className=\"w-10 h-10 rounded-full bg-primary-foreground/10 flex items-center justify-center flex-shrink-0\">\r\n                      <Clock className=\"h-5 w-5\" />\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"font-semibold\">{t(\"hoursLabel\", \"Business Hours\")}</p>\r\n                      <p className=\"text-primary-foreground/70\">{t(\"hours\", \"Mon - Fri: 9:00 AM - 6:00 PM\")}</p>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            {/* Right Side - Form */}\r\n            <div className=\"p-8 lg:p-12 flex items-center justify-center bg-background\">\r\n              <div className=\"w-full max-w-md\">\r\n                <h2 className=\"text-2xl font-bold mb-2\">{t(\"formTitle\", \"Send us a message\")}</h2>\r\n                <p className=\"text-muted-foreground mb-8\">\r\n                  {t(\"formSubtitle\", \"Fill out the form below and we'll get back to you as soon as possible.\")}\r\n                </p>\r\n\r\n                <form onSubmit={handleSubmit} className=\"space-y-5\">\r\n                  <div>\r\n                    <Label htmlFor=\"name\">{t(\"nameLabel\", \"Full Name\")} *</Label>\r\n                    <Input\r\n                      id=\"name\"\r\n                      name=\"name\"\r\n                      value={formData.name}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"namePlaceholder\", \"John Doe\")}\r\n                      required\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </div>\r\n\r\n                  <div>\r\n                    <Label htmlFor=\"email\">{t(\"emailInputLabel\", \"Email\")} *</Label>\r\n                    <Input\r\n                      id=\"email\"\r\n                      name=\"email\"\r\n                      type=\"email\"\r\n                      value={formData.email}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"emailPlaceholder\", \"john@example.com\")}\r\n                      required\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </div>\r\n\r\n                  <div>\r\n                    <Label htmlFor=\"phone\">{t(\"phoneInputLabel\", \"Phone\")}</Label>\r\n                    <Input\r\n                      id=\"phone\"\r\n                      name=\"phone\"\r\n                      type=\"tel\"\r\n                      value={formData.phone}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"phonePlaceholder\", \"+1 234 567 890\")}\r\n                      className=\"mt-1\"\r\n                    />\r\n                  </div>\r\n\r\n                  <div>\r\n                    <Label htmlFor=\"message\">{t(\"messageLabel\", \"Message\")} *</Label>\r\n                    <Textarea\r\n                      id=\"message\"\r\n                      name=\"message\"\r\n                      value={formData.message}\r\n                      onChange={handleChange}\r\n                      placeholder={t(\"messagePlaceholder\", \"Tell us about your project...\")}\r\n                      required\r\n                      rows={5}\r\n                      className=\"mt-1 resize-none\"\r\n                    />\r\n                  </div>\r\n                  <FormFileInput\r\n                    files={formData.attachments}\r\n                    onFilesChange={handleFileUploadChange}\r\n                    handleRemoveFile={handleRemoveFile}\r\n                    maxFiles={constants.file?.maxFiles || 5}\r\n                    accept={constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\"}\r\n                    disabled={isSubmitting}\r\n                    uploadButtonText={t(\"addFiles\")}\r\n                    maxFilesReachedText={t(\"maxFilesReached\")}\r\n                  />\r\n                  {submitStatus === \"success\" && (\r\n                    <div className=\"p-4 bg-green-500/10 border border-green-500/30 rounded-lg\">\r\n                      <p className=\"text-green-600 dark:text-green-400 text-sm font-medium\">\r\n                        {t(\"success\", \"Message sent! We'll be in touch soon.\")}\r\n                      </p>\r\n                    </div>\r\n                  )}\r\n\r\n                  {submitStatus === \"error\" && (\r\n                    <div className=\"p-4 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                      <p className=\"text-destructive text-sm font-medium\">\r\n                        {t(\"error\", \"Something went wrong. Please try again.\")}\r\n                      </p>\r\n                    </div>\r\n                  )}\r\n\r\n                  <Button type=\"submit\" size=\"lg\" className=\"w-full\" disabled={isSubmitting}>\r\n                    {isSubmitting ? t(\"sending\", \"Sending...\") : t(\"submit\", \"Send Message\")}\r\n                  </Button>\r\n                </form>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPageSplit;\r\n"
     },
     {
       "path": "contact-page-split/lang/en.json",

package/dist/registry/contact-page.json

@@ -22,7 +22,7 @@
       "path": "contact-page/contact-page.tsx",
       "type": "registry:page",
       "target": "$modules$/contact-page/contact-page.tsx",
-      "content": "import React, { useState, useMemo } from \"react\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\r\nimport {\r\n  Mail,\r\n  Phone,\r\n  MapPin,\r\n  MessageSquare,\r\n  Facebook,\r\n  Twitter,\r\n  Instagram,\r\n  Linkedin,\r\n} from \"lucide-react\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { FadeIn, SlideInLeft, SlideInRight } from \"@/modules/animations\";\r\nimport { FormFileInput } from \"@/components/FormFileInput\";\r\nimport { FormField } from \"@/components/FormField\";\r\n\r\nconst socialIcons: Record<string, React.ElementType> = {\r\n  facebook: Facebook,\r\n  twitter: Twitter,\r\n  instagram: Instagram,\r\n  linkedin: Linkedin,\r\n};\r\n\r\nexport function ContactPage() {\r\n  const { t } = useTranslation(\"contact-page\");\r\n  usePageTitle({ title: t(\"title\") });\r\n\r\n  const apiService = useApiService();\r\n\r\n  const socialLinks = useMemo(() => {\r\n    const socialMedia = constants.socialMedia as\r\n      | Record<string, string>\r\n      | undefined;\r\n    if (!socialMedia) return [];\r\n    return Object.entries(socialMedia)\r\n      .filter(([platform, url]) => url && socialIcons[platform])\r\n      .map(([platform, url]) => ({\r\n        platform,\r\n        url,\r\n        Icon: socialIcons[platform],\r\n      }));\r\n  }, []);\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    phone: \"\",\r\n    subject: \"\",\r\n    message: \"\",\r\n    attachments: [] as File[],\r\n  });\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\r\n    \"idle\" | \"success\" | \"error\"\r\n  >(\"idle\");\r\n  const fileMaxFiles = constants.file?.maxFiles || 5;\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n    try {\r\n      const currentLanguage = constants.site.defaultLanguage;\r\n\r\n      await apiService.submitFormWithFile(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"phone\", required: false },\r\n            { name: \"subject\", required: false },\r\n            { name: \"message\", required: true },\r\n            { name: \"attachments\", required: false },\r\n          ],\r\n        },\r\n        currentLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({\r\n        name: \"\",\r\n        email: \"\",\r\n        phone: \"\",\r\n        subject: \"\",\r\n        message: \"\",\r\n        attachments: [],\r\n      });\r\n\r\n      setTimeout(() => {\r\n        setSubmitStatus(\"idle\");\r\n      }, 5000);\r\n    } catch (error: unknown) {\r\n      console.error(\"Form submission failed:\", error);\r\n      setSubmitStatus(\"error\");\r\n\r\n      setTimeout(() => {\r\n        setSubmitStatus(\"idle\");\r\n      }, 5000);\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n  const handleFileUploadChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const selectedFiles = Array.from(e.target.files || []) as File[];\r\n    const remainingSlots = fileMaxFiles - formData.attachments.length;\r\n\r\n    if (selectedFiles.length > remainingSlots) {\r\n      alert(t(\"maxFilesLimit\", { max: fileMaxFiles }));\r\n      e.target.value = ''; // Clear the input value\r\n      return;\r\n    }\r\n\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: [...prev.attachments, ...selectedFiles]\r\n    }));\r\n\r\n    e.target.value = ''; // Clear the input\r\n  }\r\n  const handleRemoveFile = (index: number) => {\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: prev.attachments.filter((_, i) => i !== index)\r\n    }));\r\n  };\r\n  const handleChange = (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\r\n    >\r\n  ) => {\r\n    setFormData((prev) => ({\r\n      ...prev,\r\n      [e.target.name]: e.target.value,\r\n    }));\r\n  };\r\n\r\n  return (\r\n    <Layout>\r\n      <div className=\"min-h-screen bg-muted/30 py-12\">\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 max-w-6xl\">\r\n          {/* Hero Section */}\r\n          <FadeIn className=\"text-center mb-12\">\r\n            <h1 className=\"text-4xl font-bold text-foreground mb-4\">\r\n              {t(\"title\")}\r\n            </h1>\r\n            <div className=\"w-16 h-1 bg-primary mx-auto mb-6\"></div>\r\n            <p className=\"text-lg text-muted-foreground max-w-3xl mx-auto\">\r\n              {t(\"description\")}\r\n            </p>\r\n          </FadeIn>\r\n\r\n          <div className=\"grid lg:grid-cols-3 gap-8\">\r\n            {/* Contact Information */}\r\n            <SlideInLeft className=\"lg:col-span-1 space-y-6\">\r\n              {/* Company Info */}\r\n              <Card>\r\n                <CardHeader>\r\n                  <CardTitle className=\"flex items-center gap-2\">\r\n                    <MessageSquare className=\"w-5 h-5 text-primary\" />\r\n                    {t(\"getInTouch\")}\r\n                  </CardTitle>\r\n                </CardHeader>\r\n                <CardContent className=\"space-y-4\">\r\n                  <div className=\"flex items-start gap-3\">\r\n                    <Mail className=\"w-5 h-5 text-primary mt-1\" />\r\n                    <div>\r\n                      <p className=\"font-medium text-foreground\">\r\n                        {t(\"email\")}\r\n                      </p>\r\n                      <p className=\"text-muted-foreground\">{constants.email}</p>\r\n                      <p className=\"text-sm text-muted-foreground mt-1\">\r\n                        {t(\"emailResponse\")}\r\n                      </p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-3\">\r\n                    <Phone className=\"w-5 h-5 text-primary mt-1\" />\r\n                    <div>\r\n                      <p className=\"font-medium text-foreground\">\r\n                        {t(\"phone\")}\r\n                      </p>\r\n                      <p className=\"text-muted-foreground\">{constants.phone}</p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-3\">\r\n                    <MapPin className=\"w-5 h-5 text-primary mt-1\" />\r\n                    <div>\r\n                      <p className=\"font-medium text-foreground\">\r\n                        {t(\"address\")}\r\n                      </p>\r\n                      <div className=\"text-muted-foreground\">\r\n                        <p>{constants.address.line1}</p>\r\n                        {constants.address.line2 && (\r\n                          <p>{constants.address.line2}</p>\r\n                        )}\r\n                        <p>\r\n                          {constants.address.city}, {constants.address.state}{\" \"}\r\n                          {constants.address.postalCode}\r\n                        </p>\r\n                        {constants.address.country && (\r\n                          <p>{constants.address.country}</p>\r\n                        )}\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n\r\n                  {/* Social Media Links */}\r\n                  {socialLinks.length > 0 && (\r\n                    <div className=\"pt-4 border-t\">\r\n                      <p className=\"font-medium text-foreground mb-3\">\r\n                        {t(\"followUs\")}\r\n                      </p>\r\n                      <div className=\"flex gap-2\">\r\n                        {socialLinks.map(({ platform, url, Icon }) => (\r\n                          <a\r\n                            key={platform}\r\n                            href={url}\r\n                            target=\"_blank\"\r\n                            rel=\"noopener noreferrer\"\r\n                            className=\"h-10 w-10 flex items-center justify-center rounded-md border text-muted-foreground hover:text-primary hover:border-primary transition-colors\"\r\n                          >\r\n                            <Icon className=\"h-5 w-5\" />\r\n                          </a>\r\n                        ))}\r\n                      </div>\r\n                    </div>\r\n                  )}\r\n                </CardContent>\r\n              </Card>\r\n\r\n              {/* Support Info */}\r\n              <Card>\r\n                <CardHeader>\r\n                  <CardTitle>{t(\"needSupport\")}</CardTitle>\r\n                </CardHeader>\r\n                <CardContent>\r\n                  <p className=\"text-muted-foreground mb-4\">\r\n                    {t(\"supportDescription\")}\r\n                  </p>\r\n                  <div className=\"space-y-2\">\r\n                    <p className=\"font-medium text-foreground\">\r\n                      {t(\"supportEmail\")}\r\n                    </p>\r\n                    <p className=\"text-muted-foreground\">{constants.email}</p>\r\n                  </div>\r\n                </CardContent>\r\n              </Card>\r\n            </SlideInLeft>\r\n\r\n            {/* Contact Form */}\r\n            <SlideInRight className=\"lg:col-span-2\">\r\n              <Card>\r\n                <CardHeader>\r\n                  <CardTitle>{t(\"sendMessage\")}</CardTitle>\r\n                </CardHeader>\r\n                <CardContent>\r\n                  <form onSubmit={handleSubmit} className=\"space-y-6\">\r\n                    {/* Full Name */}\r\n                    <FormField label={t(\"fullName\")} htmlFor=\"name\" required>\r\n                      <Input\r\n                        id=\"name\"\r\n                        name=\"name\"\r\n                        type=\"text\"\r\n                        value={formData.name}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"fullNamePlaceholder\")}\r\n                        required\r\n                        className=\"mt-1\"\r\n                      />\r\n                    </FormField>\r\n                    {/* Email */}\r\n                    <FormField label={t(\"emailAddress\")} htmlFor=\"email\" required>\r\n                      <Input\r\n                        id=\"email\"\r\n                        name=\"email\"\r\n                        type=\"email\"\r\n                        value={formData.email}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"emailPlaceholder\")}\r\n                        required\r\n                        className=\"mt-1\"\r\n                      />\r\n                    </FormField>\r\n                    {/* Phone */}\r\n                    <FormField label={t(\"phoneNumber\")} htmlFor=\"phone\">\r\n                      <Input\r\n                        id=\"phone\"\r\n                        name=\"phone\"\r\n                        type=\"tel\"\r\n                        value={formData.phone}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"phonePlaceholder\")}\r\n                        className=\"mt-1\"\r\n                      />\r\n                    </FormField>\r\n                    {/* Subject */}\r\n                    <FormField label={t(\"subject\")} htmlFor=\"subject\" >\r\n                      <Input\r\n                        id=\"subject\"\r\n                        name=\"subject\"\r\n                        type=\"text\"\r\n                        value={formData.subject}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"subjectPlaceholder\")}\r\n                        className=\"mt-1\"\r\n                      />\r\n                    </FormField>\r\n                    {/* Message */}\r\n                    <FormField label={t(\"message\")} htmlFor=\"message\" required>\r\n                    <Textarea\r\n                        id=\"message\"\r\n                        name=\"message\"\r\n                        value={formData.message}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"messagePlaceholder\")}\r\n                        required\r\n                        rows={6}\r\n                        className=\"mt-1 resize-none\"\r\n                      />\r\n                    </FormField>\r\n                    <FormFileInput\r\n                      files={formData.attachments}\r\n                      onFilesChange={handleFileUploadChange}\r\n                      handleRemoveFile={handleRemoveFile}\r\n                      maxFiles={constants.file?.maxFiles || 5}\r\n                      accept={constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\"}\r\n                      disabled={isSubmitting}\r\n                      uploadButtonText={t(\"addFiles\")}\r\n                      maxFilesReachedText={t(\"maxFilesReached\")}\r\n                    />\r\n\r\n                    {submitStatus === \"success\" && (\r\n                      <div className=\"p-4 bg-green-500/10 dark:bg-green-500/20 border border-green-500/30 rounded-lg\">\r\n                        <p className=\"text-green-600 dark:text-green-400 text-sm font-medium\">\r\n                          {t(\"success\")}\r\n                        </p>\r\n                      </div>\r\n                    )}\r\n\r\n                    {submitStatus === \"error\" && (\r\n                      <div className=\"p-4 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                        <p className=\"text-destructive text-sm font-medium\">\r\n                          {t(\"error\")}\r\n                        </p>\r\n                      </div>\r\n                    )}\r\n\r\n                    <Button\r\n                      type=\"submit\"\r\n                      size=\"lg\"\r\n                      className=\"w-full\"\r\n                      disabled={isSubmitting}\r\n                    >\r\n                      {isSubmitting ? (\r\n                        <>\r\n                          <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                          {t(\"sending\")}\r\n                        </>\r\n                      ) : (\r\n                        t(\"submit\")\r\n                      )}\r\n                    </Button>\r\n                  </form>\r\n                </CardContent>\r\n              </Card>\r\n            </SlideInRight>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPage;\r\n"
+      "content": "import React, { useState, useMemo, useRef } from \"react\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Layout } from \"@/components/Layout\";\r\nimport { useApiService } from \"@/lib/api\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\r\nimport {\r\n  Mail,\r\n  Phone,\r\n  MapPin,\r\n  MessageSquare,\r\n  Facebook,\r\n  Twitter,\r\n  Instagram,\r\n  Linkedin,\r\n  Upload,\r\n} from \"lucide-react\";\r\nimport constants from \"@/constants/constants.json\";\r\nimport { FadeIn, SlideInLeft, SlideInRight } from \"@/modules/animations\";\r\nimport { FormFileInput } from \"@/components/FormFileInput\";\r\n\r\nconst socialIcons: Record<string, React.ElementType> = {\r\n  facebook: Facebook,\r\n  twitter: Twitter,\r\n  instagram: Instagram,\r\n  linkedin: Linkedin,\r\n};\r\n\r\nexport function ContactPage() {\r\n  const { t } = useTranslation(\"contact-page\");\r\n  usePageTitle({ title: t(\"title\") });\r\n\r\n  const apiService = useApiService();\r\n\r\n  const socialLinks = useMemo(() => {\r\n    const socialMedia = constants.socialMedia as\r\n      | Record<string, string>\r\n      | undefined;\r\n    if (!socialMedia) return [];\r\n    return Object.entries(socialMedia)\r\n      .filter(([platform, url]) => url && socialIcons[platform])\r\n      .map(([platform, url]) => ({\r\n        platform,\r\n        url,\r\n        Icon: socialIcons[platform],\r\n      }));\r\n  }, []);\r\n\r\n  const [formData, setFormData] = useState({\r\n    name: \"\",\r\n    email: \"\",\r\n    phone: \"\",\r\n    subject: \"\",\r\n    message: \"\",\r\n    attachments: [] as File[],\r\n  });\r\n  const fileInputRef = useRef<HTMLInputElement>(null);\r\n  const [isSubmitting, setIsSubmitting] = useState(false);\r\n  const [submitStatus, setSubmitStatus] = useState<\r\n    \"idle\" | \"success\" | \"error\"\r\n  >(\"idle\");\r\n  const fileAcceptTypes = constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\";\r\n  const fileMaxFiles = constants.file?.maxFiles || 5;\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setIsSubmitting(true);\r\n    setSubmitStatus(\"idle\");\r\n    setIsSubmitting(false);\r\n    try {\r\n      const currentLanguage = constants.site.defaultLanguage;\r\n\r\n      await apiService.submitFormWithFile(\r\n        formData,\r\n        {\r\n          email_subject1: \"Thank you for contacting us\",\r\n          email_subject2: \"New Contact Form Submission\",\r\n          fields: [\r\n            { name: \"name\", required: true },\r\n            { name: \"email\", required: true },\r\n            { name: \"phone\", required: false },\r\n            { name: \"subject\", required: false },\r\n            { name: \"message\", required: true },\r\n            { name: \"attachments\", required: false },\r\n          ],\r\n        },\r\n        currentLanguage\r\n      );\r\n\r\n      setSubmitStatus(\"success\");\r\n      setFormData({\r\n        name: \"\",\r\n        email: \"\",\r\n        phone: \"\",\r\n        subject: \"\",\r\n        message: \"\",\r\n        attachments: [],\r\n      });\r\n\r\n      setTimeout(() => {\r\n        setSubmitStatus(\"idle\");\r\n      }, 5000);\r\n    } catch (error: unknown) {\r\n      console.error(\"Form submission failed:\", error);\r\n      setSubmitStatus(\"error\");\r\n\r\n      setTimeout(() => {\r\n        setSubmitStatus(\"idle\");\r\n      }, 5000);\r\n    } finally {\r\n      setIsSubmitting(false);\r\n    }\r\n  };\r\n  const handleFileUploadChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const selectedFiles = Array.from(e.target.files || []) as File[];\r\n    const remainingSlots = fileMaxFiles - formData.attachments.length;\r\n\r\n    if (selectedFiles.length > remainingSlots) {\r\n      alert(t(\"maxFilesLimit\", { max: fileMaxFiles }));\r\n      e.target.value = ''; // Clear the input value\r\n      return;\r\n    }\r\n\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: [...prev.attachments, ...selectedFiles]\r\n    }));\r\n\r\n    e.target.value = ''; // Clear the input\r\n  }\r\n  const handleRemoveFile = (index: number) => {\r\n    setFormData(prev => ({\r\n      ...prev,\r\n      attachments: prev.attachments.filter((_, i) => i !== index)\r\n    }));\r\n  };\r\n  const handleChange = (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\r\n    >\r\n  ) => {\r\n    setFormData((prev) => ({\r\n      ...prev,\r\n      [e.target.name]: e.target.value,\r\n    }));\r\n  };\r\n\r\n  return (\r\n    <Layout>\r\n      <div className=\"min-h-screen bg-muted/30 py-12\">\r\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4 max-w-6xl\">\r\n          {/* Hero Section */}\r\n          <FadeIn className=\"text-center mb-12\">\r\n            <h1 className=\"text-4xl font-bold text-foreground mb-4\">\r\n              {t(\"title\")}\r\n            </h1>\r\n            <div className=\"w-16 h-1 bg-primary mx-auto mb-6\"></div>\r\n            <p className=\"text-lg text-muted-foreground max-w-3xl mx-auto\">\r\n              {t(\"description\")}\r\n            </p>\r\n          </FadeIn>\r\n\r\n          <div className=\"grid lg:grid-cols-3 gap-8\">\r\n            {/* Contact Information */}\r\n            <SlideInLeft className=\"lg:col-span-1 space-y-6\">\r\n              {/* Company Info */}\r\n              <Card>\r\n                <CardHeader>\r\n                  <CardTitle className=\"flex items-center gap-2\">\r\n                    <MessageSquare className=\"w-5 h-5 text-primary\" />\r\n                    {t(\"getInTouch\")}\r\n                  </CardTitle>\r\n                </CardHeader>\r\n                <CardContent className=\"space-y-4\">\r\n                  <div className=\"flex items-start gap-3\">\r\n                    <Mail className=\"w-5 h-5 text-primary mt-1\" />\r\n                    <div>\r\n                      <p className=\"font-medium text-foreground\">\r\n                        {t(\"email\")}\r\n                      </p>\r\n                      <p className=\"text-muted-foreground\">{constants.email}</p>\r\n                      <p className=\"text-sm text-muted-foreground mt-1\">\r\n                        {t(\"emailResponse\")}\r\n                      </p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-3\">\r\n                    <Phone className=\"w-5 h-5 text-primary mt-1\" />\r\n                    <div>\r\n                      <p className=\"font-medium text-foreground\">\r\n                        {t(\"phone\")}\r\n                      </p>\r\n                      <p className=\"text-muted-foreground\">{constants.phone}</p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"flex items-start gap-3\">\r\n                    <MapPin className=\"w-5 h-5 text-primary mt-1\" />\r\n                    <div>\r\n                      <p className=\"font-medium text-foreground\">\r\n                        {t(\"address\")}\r\n                      </p>\r\n                      <div className=\"text-muted-foreground\">\r\n                        <p>{constants.address.line1}</p>\r\n                        {constants.address.line2 && (\r\n                          <p>{constants.address.line2}</p>\r\n                        )}\r\n                        <p>\r\n                          {constants.address.city}, {constants.address.state}{\" \"}\r\n                          {constants.address.postalCode}\r\n                        </p>\r\n                        {constants.address.country && (\r\n                          <p>{constants.address.country}</p>\r\n                        )}\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n\r\n                  {/* Social Media Links */}\r\n                  {socialLinks.length > 0 && (\r\n                    <div className=\"pt-4 border-t\">\r\n                      <p className=\"font-medium text-foreground mb-3\">\r\n                        {t(\"followUs\")}\r\n                      </p>\r\n                      <div className=\"flex gap-2\">\r\n                        {socialLinks.map(({ platform, url, Icon }) => (\r\n                          <a\r\n                            key={platform}\r\n                            href={url}\r\n                            target=\"_blank\"\r\n                            rel=\"noopener noreferrer\"\r\n                            className=\"h-10 w-10 flex items-center justify-center rounded-md border text-muted-foreground hover:text-primary hover:border-primary transition-colors\"\r\n                          >\r\n                            <Icon className=\"h-5 w-5\" />\r\n                          </a>\r\n                        ))}\r\n                      </div>\r\n                    </div>\r\n                  )}\r\n                </CardContent>\r\n              </Card>\r\n\r\n              {/* Support Info */}\r\n              <Card>\r\n                <CardHeader>\r\n                  <CardTitle>{t(\"needSupport\")}</CardTitle>\r\n                </CardHeader>\r\n                <CardContent>\r\n                  <p className=\"text-muted-foreground mb-4\">\r\n                    {t(\"supportDescription\")}\r\n                  </p>\r\n                  <div className=\"space-y-2\">\r\n                    <p className=\"font-medium text-foreground\">\r\n                      {t(\"supportEmail\")}\r\n                    </p>\r\n                    <p className=\"text-muted-foreground\">{constants.email}</p>\r\n                  </div>\r\n                </CardContent>\r\n              </Card>\r\n            </SlideInLeft>\r\n\r\n            {/* Contact Form */}\r\n            <SlideInRight className=\"lg:col-span-2\">\r\n              <Card>\r\n                <CardHeader>\r\n                  <CardTitle>{t(\"sendMessage\")}</CardTitle>\r\n                </CardHeader>\r\n                <CardContent>\r\n                  <form onSubmit={handleSubmit} className=\"space-y-6\">\r\n                    {/* Full Name */}\r\n                    <div>\r\n                      <Label htmlFor=\"name\">{t(\"fullName\")} *</Label>\r\n                      <Input\r\n                        id=\"name\"\r\n                        name=\"name\"\r\n                        type=\"text\"\r\n                        value={formData.name}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"fullNamePlaceholder\")}\r\n                        required\r\n                        className=\"mt-1\"\r\n                      />\r\n                    </div>\r\n\r\n                    {/* Email */}\r\n                    <div>\r\n                      <Label htmlFor=\"email\">{t(\"emailAddress\")} *</Label>\r\n                      <Input\r\n                        id=\"email\"\r\n                        name=\"email\"\r\n                        type=\"email\"\r\n                        value={formData.email}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"emailPlaceholder\")}\r\n                        required\r\n                        className=\"mt-1\"\r\n                      />\r\n                    </div>\r\n\r\n                    {/* Phone */}\r\n                    <div>\r\n                      <Label htmlFor=\"phone\">{t(\"phoneNumber\")}</Label>\r\n                      <Input\r\n                        id=\"phone\"\r\n                        name=\"phone\"\r\n                        type=\"tel\"\r\n                        value={formData.phone}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"phonePlaceholder\")}\r\n                        className=\"mt-1\"\r\n                      />\r\n                    </div>\r\n\r\n                    {/* Subject */}\r\n                    <div>\r\n                      <Label htmlFor=\"subject\">{t(\"subject\")}</Label>\r\n                      <Input\r\n                        id=\"subject\"\r\n                        name=\"subject\"\r\n                        type=\"text\"\r\n                        value={formData.subject}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"subjectPlaceholder\")}\r\n                        className=\"mt-1\"\r\n                      />\r\n                    </div>\r\n\r\n                    {/* Message */}\r\n                    <div>\r\n                      <Label htmlFor=\"message\">{t(\"message\")} *</Label>\r\n                      <Textarea\r\n                        id=\"message\"\r\n                        name=\"message\"\r\n                        value={formData.message}\r\n                        onChange={handleChange}\r\n                        placeholder={t(\"messagePlaceholder\")}\r\n                        required\r\n                        rows={6}\r\n                        className=\"mt-1 resize-none\"\r\n                      />\r\n                    </div>\r\n                    <FormFileInput\r\n                      files={formData.attachments}\r\n                      onFilesChange={handleFileUploadChange}\r\n                      handleRemoveFile={handleRemoveFile}\r\n                      maxFiles={constants.file?.maxFiles || 5}\r\n                      accept={constants.file?.accept || \".pdf,.doc,.docx,.jpg,.jpeg,.png\"}\r\n                      disabled={isSubmitting}\r\n                      uploadButtonText={t(\"addFiles\")}\r\n                      maxFilesReachedText={t(\"maxFilesReached\")}\r\n                    />\r\n\r\n                    {submitStatus === \"success\" && (\r\n                      <div className=\"p-4 bg-green-500/10 dark:bg-green-500/20 border border-green-500/30 rounded-lg\">\r\n                        <p className=\"text-green-600 dark:text-green-400 text-sm font-medium\">\r\n                          {t(\"success\")}\r\n                        </p>\r\n                      </div>\r\n                    )}\r\n\r\n                    {submitStatus === \"error\" && (\r\n                      <div className=\"p-4 bg-destructive/10 border border-destructive/30 rounded-lg\">\r\n                        <p className=\"text-destructive text-sm font-medium\">\r\n                          {t(\"error\")}\r\n                        </p>\r\n                      </div>\r\n                    )}\r\n\r\n                    <Button\r\n                      type=\"submit\"\r\n                      size=\"lg\"\r\n                      className=\"w-full\"\r\n                      disabled={isSubmitting}\r\n                    >\r\n                      {isSubmitting ? (\r\n                        <>\r\n                          <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                          {t(\"sending\")}\r\n                        </>\r\n                      ) : (\r\n                        t(\"submit\")\r\n                      )}\r\n                    </Button>\r\n                  </form>\r\n                </CardContent>\r\n              </Card>\r\n            </SlideInRight>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport default ContactPage;\r\n"
     },
     {
       "path": "contact-page/lang/en.json",

package/dist/registry/docs/blog-core.md

@@ -1,6 +1,6 @@
 # Blog Core
 
-Complete blog state management with Zustand. Includes useBlogStore for saved/favorite posts functionality, useDbPosts hook for fetching posts with category filtering, search, and pagination. TypeScript types for Post, Category, and Author. No provider wrapping needed.
+Complete blog state management with Zustand. Includes useBlogStore for saved/favorite posts functionality. TypeScript types for Post, Category, and Author. No provider wrapping needed. Data fetching uses useDbList/useDbGet from @/db.
 
 ## Files
 
@@ -9,34 +9,33 @@ Complete blog state management with Zustand. Includes useBlogStore for saved/fav
 | `$modules$/blog-core/index.ts` | index |
 | `$modules$/blog-core/types.ts` | type |
 | `$modules$/blog-core/stores/blog-store.ts` | store |
-| `$modules$/blog-core/useDbPosts.ts` | hook |
 | `$modules$/blog-core/lang/en.json` | lang |
 | `$modules$/blog-core/lang/tr.json` | lang |
 
 ## Exports
 
-**Types:** `Author`, `BlogCategory`, `BlogContextType`, `BlogSettings`, `Comment`, `Post`, `PostCategory`
+**Types:** `Author`, `BlogCategory`, `BlogContextType`, `BlogSettings`, `Comment`, `Post`
 
-**Components/Functions:** `useBlog`, `useBlogStore`, `useDbBlogCategories`, `useDbFeaturedPosts`, `useDbPopularPosts`, `useDbPostBySlug`, `useDbPostSearch`, `useDbPostStats`, `useDbPosts`, `useDbPostsByCategory`, `useDbPostsByTag`, `useDbRecentPosts`
+**Components/Functions:** `useBlog`, `useBlogStore`
 
 ```typescript
-import { useBlog, useBlogStore, useDbBlogCategories, ... } from '@/modules/blog-core';
+import { useBlog, useBlogStore, Author, ... } from '@/modules/blog-core';
 ```
 
 ## Usage
 
 ```
-import { useBlog, useDbPosts, useDbPostBySlug } from '@/modules/blog-core';
+import { useBlog } from '@/modules/blog-core';
+import { useDbList, useDbGet } from '@/db';
+import type { Post } from '@/modules/blog-core';
 
-// No provider needed - just use the hooks:
+// Blog store (favorites, saved posts):
 const { favorites, addToFavorites, isFavorite } = useBlog();
-const { posts, loading } = useDbPosts();
+
+// Data fetching via @/db hooks:
+const { data: posts } = useDbList<Post>('posts');
+const { data: post } = useDbGet<Post>('posts', { where: { slug } });
 
 // Or use store directly with selectors:
 const favorites = useBlogStore((s) => s.favorites);
 ```
-
-## Dependencies
-
-This component requires:
-- `db`

package/dist/registry/docs/blog-list-page.md

@@ -26,7 +26,7 @@ import { BlogListPage } from '@/modules/blog-list-page';
 
 <Route path="/blog" element={<BlogListPage />} />
 
-• Uses useDbPosts() from blog-core (Zustand)
+• Uses useDbList() from @/db for post fetching
 • Features: category tabs, search, grid/list view
 • Sidebar: popular posts, categories, newsletter
 ```

package/dist/registry/docs/ecommerce-core.md

@@ -1,6 +1,6 @@
 # E-commerce Core
 
-Complete e-commerce state management with Zustand. Includes useCartStore for shopping cart operations (add/remove/update items, totals), useFavoritesStore for wishlist, useDbProducts hook for product fetching with filtering/sorting/pagination, and useDbSearch hook. No provider wrapping needed.
+Complete e-commerce state management with Zustand. Includes useCartStore for shopping cart operations (add/remove/update items, totals), useFavoritesStore for wishlist, formatPrice utility, and payment config. No provider wrapping needed. Data fetching uses useDbList/useDbGet from @/db.
 
 ## Files
 
@@ -10,8 +10,6 @@ Complete e-commerce state management with Zustand. Includes useCartStore for sho
 | `$modules$/ecommerce-core/types.ts` | type |
 | `$modules$/ecommerce-core/stores/cart-store.ts` | store |
 | `$modules$/ecommerce-core/stores/favorites-store.ts` | store |
-| `$modules$/ecommerce-core/useDbProducts.ts` | hook |
-| `$modules$/ecommerce-core/useDbSearch.ts` | hook |
 | `$modules$/ecommerce-core/format-price.ts` | lib |
 | `$modules$/ecommerce-core/payment-config.ts` | lib |
 | `$modules$/ecommerce-core/lang/en.json` | lang |
@@ -19,9 +17,9 @@ Complete e-commerce state management with Zustand. Includes useCartStore for sho
 
 ## Exports
 
-**Types:** `Address`, `CartContextType`, `CartItem`, `CartState`, `Category`, `FavoritesContextType`, `OnlinePaymentProvider`, `Order`, `OrderItem`, `PaymentMethod`, `PaymentMethodConfig`, `Product`, `ProductCategory`, `ProductVariant`, `User`
+**Types:** `Address`, `CartContextType`, `CartItem`, `CartState`, `Category`, `FavoritesContextType`, `OnlinePaymentProvider`, `Order`, `OrderItem`, `PaymentMethod`, `PaymentMethodConfig`, `Product`, `ProductVariant`, `User`
 
-**Components/Functions:** `ONLINE_PROVIDER_CONFIGS`, `PAYMENT_METHOD_CONFIGS`, `formatPrice`, `getAvailablePaymentMethods`, `getFilteredPaymentMethodConfigs`, `getOnlinePaymentProviders`, `isOnlineProviderAvailable`, `isPaymentMethodAvailable`, `useCart`, `useCartStore`, `useDbCategories`, `useDbFeaturedProducts`, `useDbProductBySlug`, `useDbProducts`, `useDbSearch`, `useFavorites`, `useFavoritesStore`
+**Components/Functions:** `ONLINE_PROVIDER_CONFIGS`, `PAYMENT_METHOD_CONFIGS`, `formatPrice`, `getAvailablePaymentMethods`, `getFilteredPaymentMethodConfigs`, `getOnlinePaymentProviders`, `isOnlineProviderAvailable`, `isPaymentMethodAvailable`, `useCart`, `useCartStore`, `useFavorites`, `useFavoritesStore`
 
 ```typescript
 import { ONLINE_PROVIDER_CONFIGS, PAYMENT_METHOD_CONFIGS, formatPrice, ... } from '@/modules/ecommerce-core';
@@ -30,18 +28,17 @@ import { ONLINE_PROVIDER_CONFIGS, PAYMENT_METHOD_CONFIGS, formatPrice, ... } fro
 ## Usage
 
 ```
-import { useCart, useFavorites, useDbProducts } from '@/modules/ecommerce-core';
+import { useCart, useFavorites } from '@/modules/ecommerce-core';
+import { useDbList } from '@/db';
+import type { Product } from '@/modules/ecommerce-core';
 
-// No provider needed - just use the hooks:
+// Cart & favorites stores:
 const { addItem, removeItem, state, itemCount } = useCart();
 const { addToFavorites, isFavorite } = useFavorites();
-const { products, loading } = useDbProducts();
+
+// Data fetching via @/db hooks:
+const { data: products } = useDbList<Product>('products');
 
 // Or use stores directly with selectors:
 const itemCount = useCartStore((s) => s.itemCount);
 ```
-
-## Dependencies
-
-This component requires:
-- `db`

package/dist/registry/docs/featured-products.md

@@ -28,7 +28,7 @@ import { FeaturedProducts } from '@/modules/featured-products';
 
 • Installed at: src/modules/featured-products/
 • Customize content: src/modules/featured-products/lang/*.json
-• Products auto-loaded via useDbProducts hook
+• Products auto-loaded via useDbList from @/db
 ```
 
 ## Dependencies

package/dist/registry/docs/post-detail-page.md

@@ -1,6 +1,6 @@
 # Post Detail Page
 
-Blog post detail page that fetches post data by slug from URL params. Uses useDbPostBySlug hook from blog-core and renders PostDetailBlock. Includes loading skeleton, error handling for not found posts, and automatic page title.
+Blog post detail page that fetches post data by slug from URL params. Uses useDbGet from @/db and renders PostDetailBlock. Includes loading skeleton, error handling for not found posts, and automatic page title.
 
 ## Files
 
@@ -26,7 +26,7 @@ import { PostDetailPage } from '@/modules/post-detail-page';
 
 <Route path="/blog/:slug" element={<PostDetailPage />} />
 
-• Uses useDbPostBySlug() from blog-core
+• Uses useDbGet() from @/db to fetch post by slug
 • Fetches post by slug from URL params
 • Shows loading skeleton while fetching
 • Handles post not found state

package/dist/registry/docs/product-detail-page.md

@@ -1,6 +1,6 @@
 # Product Detail Page
 
-Product detail page that fetches product data by slug from URL params. Uses useDbProductBySlug hook from ecommerce-core and renders ProductDetailBlock. Includes loading skeleton, error handling for not found products, and automatic page title.
+Product detail page that fetches product data by slug from URL params. Uses useDbGet from @/db and renders ProductDetailBlock. Includes loading skeleton, error handling for not found products, and automatic page title.
 
 ## Files
 
@@ -26,7 +26,7 @@ import { ProductDetailPage } from '@/modules/product-detail-page';
 
 <Route path="/products/:slug" element={<ProductDetailPage />} />
 
-• Uses useDbProductBySlug() from ecommerce-core
+• Uses useDbGet() from @/db to fetch product by slug
 • Fetches product by slug from URL params
 • Shows loading skeleton while fetching
 • Handles product not found state

package/dist/registry/docs/products-page.md

@@ -29,7 +29,7 @@ import ProductsPage from '@/modules/products-page';
 • Installed at: src/modules/products-page/
 • Add link: <Link to="/products">Browse Products</Link>
 • Supports filters, sorting, grid/list view, pagination
-• Uses useDbProducts hook for data fetching
+• Uses useDbList from @/db for data fetching
 ```
 
 ## Dependencies