first commit

components/forms/ContactoForm.tsx

@@ -0,0 +1,86 @@
+"use client";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ContactoSchema, ContactoFormData } from "@/utils/validations";
+import { useFormSubmit } from "@/hooks/useForm";
+import { Input } from "../ui/Input";
+import { Button } from "../ui/Button";
+import { Checkbox } from "../ui/Checkbox";
+import { Textarea } from "../ui/Textarea";
+import { motion, AnimatePresence } from "framer-motion";
+import { useLanguage } from "@/context/LanguageContext";
+
+export const ContactoForm = () => {
+  const { t, locale } = useLanguage();
+  const { submit, isSubmitting, success, error } = useFormSubmit("contactos");
+  
+  const { register, handleSubmit, formState: { errors }, reset } = useForm<ContactoFormData>({
+    resolver: zodResolver(ContactoSchema),
+  });
+
+  const onSubmit = async (data: ContactoFormData) => {
+    await submit(data);
+    if (!error) reset();
+  };
+
+  return (
+    <div className="w-full">
+      <AnimatePresence mode="wait">
+        {success ? (
+          <motion.div 
+            initial={{ opacity: 0 }} 
+            animate={{ opacity: 1 }} 
+            className="p-10 border border-ocean rounded-[24px] text-center bg-ice/10"
+          >
+            <h3 className="text-xl font-bold text-navy mb-2">
+              {t.contacto.success.title}
+            </h3>
+            <p className="text-navy/60">
+              {t.contacto.success.desc}
+            </p>
+          </motion.div>
+        ) : (
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <Input 
+              label={t.contacto.form.name} 
+              placeholder={locale === 'en' ? "Your name" : locale === 'ca' ? "El teu nom" : "Tu nombre"}
+              {...register("nombre")} 
+              error={errors.nombre?.message} 
+            />
+            
+            <Input 
+              label={t.contacto.form.email} 
+              placeholder="tu@email.com"
+              {...register("email")} 
+              error={errors.email?.message} 
+            />
+
+            <Textarea 
+              label={t.contacto.form.message} 
+              placeholder={locale === 'en' ? "Write your message here..." : locale === 'ca' ? "Escriu aquí el teu missatge..." : "Escribe aquí tu mensaje..."}
+              rows={5}
+              {...register("mensaje")} 
+              error={errors.mensaje?.message}
+            />
+
+            <Checkbox 
+              label={t.contacto.form.privacy} 
+              {...register("privacidad")} 
+              error={errors.privacidad?.message} 
+            />
+
+            {error && <p className="text-red-600 font-bold text-sm">{error}</p>}
+
+            <div className="pt-4">
+              <Button type="submit" disabled={isSubmitting} className="w-full">
+                {isSubmitting 
+                  ? (locale === 'en' ? "Sending..." : locale === 'ca' ? "Enviant..." : "Enviando...") 
+                  : t.contacto.form.submit}
+              </Button>
+            </div>
+          </form>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};