migration wip

components/ContactForm.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { usePathname } from 'next/navigation';
 import { getDictionary } from '@/lib/i18n';
 import { Card, CardBody, CardHeader, Button } from '@/components/ui';
+import { FormField, FormInput, FormTextarea, FormError, FormSuccess } from '@/components/forms';
 
 interface FormData {
   name: string;
@@ -140,116 +141,68 @@ export function ContactForm() {
         subtitle={t('contact.subtitle')}
       />
       <CardBody>
-        {status === 'success' && (
-          <div className="p-4 bg-green-50 border border-green-200 rounded-lg text-green-800 mb-4">
-            {t('contact.success')}
-          </div>
-        )}
-        
-        {status === 'error' && (
-          <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-800 mb-4">
-            {t('contact.error')}
-          </div>
-        )}
-        
+        <FormSuccess message={status === 'success' ? t('contact.success') : undefined} />
+        <FormError errors={status === 'error' ? t('contact.error') : undefined} />
+
         <form onSubmit={handleSubmit} className="space-y-6">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
-                {t('contact.name')} *
-              </label>
-              <input
-                type="text"
-                id="name"
-                name="name"
-                value={formData.name}
-                onChange={handleChange}
-                className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all ${
-                  errors.name ? 'border-red-500 bg-red-50' : 'border-gray-300'
-                }`}
-                disabled={status === 'loading'}
-                aria-invalid={!!errors.name}
-                aria-describedby={errors.name ? 'name-error' : undefined}
-              />
-              {errors.name && (
-                <p id="name-error" className="mt-1 text-sm text-red-600">{errors.name}</p>
-              )}
-            </div>
-            
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
-                {t('contact.email')} *
-              </label>
-              <input
-                type="email"
-                id="email"
-                name="email"
-                value={formData.email}
-                onChange={handleChange}
-                className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all ${
-                  errors.email ? 'border-red-500 bg-red-50' : 'border-gray-300'
-                }`}
-                disabled={status === 'loading'}
-                aria-invalid={!!errors.email}
-                aria-describedby={errors.email ? 'email-error' : undefined}
-              />
-              {errors.email && (
-                <p id="email-error" className="mt-1 text-sm text-red-600">{errors.email}</p>
-              )}
-            </div>
-          </div>
-          
-          <div>
-            <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
-              {t('contact.phone')}
-            </label>
-            <input
-              type="tel"
-              id="phone"
-              name="phone"
-              value={formData.phone}
-              onChange={handleChange}
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
-              disabled={status === 'loading'}
-            />
-          </div>
-          
-          <div>
-            <label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-2">
-              {t('contact.subject')}
-            </label>
-            <input
+            <FormField
+              name="name"
+              label={t('contact.name')}
+              required
+              error={errors.name}
               type="text"
-              id="subject"
-              name="subject"
-              value={formData.subject}
-              onChange={handleChange}
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
+              value={formData.name}
+              onChange={(value) => setFormData(prev => ({ ...prev, name: value }))}
               disabled={status === 'loading'}
+              placeholder={t('contact.name')}
+            />
+
+            <FormField
+              name="email"
+              label={t('contact.email')}
+              required
+              error={errors.email}
+              type="email"
+              value={formData.email}
+              onChange={(value) => setFormData(prev => ({ ...prev, email: value }))}
+              disabled={status === 'loading'}
+              placeholder={t('contact.email')}
             />
           </div>
-          
-          <div>
-            <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
-              {t('contact.message')} *
-            </label>
-            <textarea
-              id="message"
-              name="message"
-              rows={6}
-              value={formData.message}
-              onChange={handleChange}
-              className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all ${
-                errors.message ? 'border-red-500 bg-red-50' : 'border-gray-300'
-              }`}
-              disabled={status === 'loading'}
-              aria-invalid={!!errors.message}
-              aria-describedby={errors.message ? 'message-error' : undefined}
-            />
-            {errors.message && (
-              <p id="message-error" className="mt-1 text-sm text-red-600">{errors.message}</p>
-            )}
-          </div>
+
+          <FormField
+            name="phone"
+            label={t('contact.phone')}
+            type="tel"
+            value={formData.phone}
+            onChange={(value) => setFormData(prev => ({ ...prev, phone: value }))}
+            disabled={status === 'loading'}
+            placeholder={t('contact.phone')}
+          />
+
+          <FormField
+            name="subject"
+            label={t('contact.subject')}
+            type="text"
+            value={formData.subject}
+            onChange={(value) => setFormData(prev => ({ ...prev, subject: value }))}
+            disabled={status === 'loading'}
+            placeholder={t('contact.subject')}
+          />
+
+          <FormField
+            name="message"
+            label={t('contact.message')}
+            required
+            error={errors.message}
+            type="textarea"
+            value={formData.message}
+            onChange={(value) => setFormData(prev => ({ ...prev, message: value }))}
+            disabled={status === 'loading'}
+            placeholder={t('contact.message')}
+            rows={6}
+          />
           
           <div className="flex items-center justify-between gap-4">
             <p className="text-sm text-gray-500">

components/content/ContentRenderer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { cn } from '../../lib/utils';
-import { processHTML } from '../../lib/html-compat';
+import { processHTML, processShortcodes } from '../../lib/html-compat';
 import { getMediaByUrl, getMediaById, getAssetMap } from '../../lib/data';
 
 interface ContentRendererProps {
@@ -35,19 +35,25 @@ export const ContentRenderer: React.FC<ContentRendererProps> = ({
   // Process the HTML content
   const processedContent = React.useMemo(() => {
     let html = content;
-    
+
+    // Check for raw shortcodes and force processing if detected
+    const shortcodeRegex = /\[[^\]]*\]/;
+    if (shortcodeRegex.test(html)) {
+      html = processShortcodes(html);
+    }
+
     if (sanitize) {
       html = processHTML(html);
     }
-    
+
     if (processAssets) {
       html = replaceWordPressAssets(html);
     }
-    
+
     if (convertClasses) {
       html = convertWordPressClasses(html);
     }
-    
+
     return html;
   }, [content, sanitize, processAssets, convertClasses]);
 

components/layout/MobileMenu.tsx

@@ -5,7 +5,6 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Button } from '@/components/ui/Button';
 import { LocaleSwitcher } from '@/components/LocaleSwitcher';
-import { getLocaleFromPath } from '@/lib/i18n';
 
 interface MobileMenuProps {
   locale: string;
@@ -15,8 +14,14 @@ interface MobileMenuProps {
 
 export function MobileMenu({ locale, siteName, onClose }: MobileMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
   const pathname = usePathname();
-  const currentLocale = getLocaleFromPath(pathname);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  // Close menu when route changes
 
   // Main navigation menu
   const mainMenu = [