Fix CloudFront routing and TypeScript type safety

- Update CloudFront Function to handle Next.js static export .html files
- Fix TypeScript interface for color request service (add required user_phone field)
- Update ColorRequestForm component to include phone field

src/components/ColorRequestForm.tsx

@@ -14,6 +14,7 @@ export default function ColorRequestForm({ onSuccess }: ColorRequestFormProps) {
     finish_type: 'Basic',
     user_name: '',
     user_email: '',
+    user_phone: '',
     description: '',
     reference_url: ''
   });
@@ -37,6 +38,7 @@ export default function ColorRequestForm({ onSuccess }: ColorRequestFormProps) {
         finish_type: 'Basic',
         user_name: '',
         user_email: '',
+        user_phone: '',
         description: '',
         reference_url: ''
       });
@@ -136,12 +138,13 @@ export default function ColorRequestForm({ onSuccess }: ColorRequestFormProps) {
 
           <div>
             <label htmlFor="user_email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-              Email (opciono)
+              Email *
             </label>
             <input
               type="email"
               id="user_email"
               name="user_email"
+              required
               value={formData.user_email}
               onChange={handleChange}
               className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"
@@ -150,6 +153,23 @@ export default function ColorRequestForm({ onSuccess }: ColorRequestFormProps) {
           </div>
         </div>
 
+        <div className="grid md:grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="user_phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Telefon *
+            </label>
+            <input
+              type="tel"
+              id="user_phone"
+              name="user_phone"
+              required
+              value={formData.user_phone}
+              onChange={handleChange}
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"
+              placeholder="063 123 4567"
+            />
+          </div>
+        </div>
 
         <div className="flex justify-end">
           <button

src/services/api.ts

@@ -111,7 +111,8 @@ export const colorRequestService = {
     color_name: string;
     material_type: string;
     finish_type?: string;
-    user_email?: string;
+    user_email: string;
+    user_phone: string;
     user_name?: string;
     description?: string;
     reference_url?: string;

terraform/cloudfront-function.js

@@ -8,8 +8,9 @@ function handler(event) {
         if (uri.endsWith('/')) {
             request.uri += 'index.html';
         } else {
-            // Add /index.html to directory paths
+            // For Next.js static export, try .html first
-            request.uri += '/index.html';
+            // CloudFront will handle 404s via custom error response
+            request.uri += '.html';
         }
     }