From b9fca68b300c7c0008140774f8a8a8c34b4747e4 Mon Sep 17 00:00:00 2001
From: gitea <gitea@satoshinakamoto.win>
Date: Wed, 19 Nov 2025 23:48:28 +0100
Subject: [PATCH] formspree fix

---
 app/feedback/page.tsx  | 196 ++++++++++++++++++++++++++++++-----------
 components/Contact.tsx | 196 ++++++++++++++++++++++++++++++-----------
 2 files changed, 286 insertions(+), 106 deletions(-)

diff --git a/app/feedback/page.tsx b/app/feedback/page.tsx
index 5347e09..5a0a58a 100644
--- a/app/feedback/page.tsx
+++ b/app/feedback/page.tsx
@@ -21,12 +21,12 @@ export default function FeedbackPage() {
     setErrorMessage('');
 
     const form = e.currentTarget;
-    const data = new FormData(form);
+    const formDataObj = new FormData(form);
 
     try {
       const response = await fetch(form.action, {
         method: form.method,
-        body: data,
+        body: formDataObj,
         headers: {
           'Accept': 'application/json',
         },
@@ -41,21 +41,22 @@ export default function FeedbackPage() {
         });
         form.reset();
         
-        // Reset success message after 5 seconds
+        // Reset success message after 6 seconds
         setTimeout(() => {
           setStatus('idle');
-        }, 5000);
+        }, 6000);
       } else {
-        const data = await response.json();
-        if (data.errors) {
-          setErrorMessage(data.errors.map((error: { message: string }) => error.message).join(', '));
+        const responseData = await response.json();
+        if (responseData.errors) {
+          setErrorMessage(responseData.errors.map((error: { message: string }) => error.message).join(', '));
         } else {
-          setErrorMessage('Oops! There was a problem submitting your form.');
+          setErrorMessage('Oops! There was a problem submitting your form. Please try again.');
         }
         setStatus('error');
       }
     } catch (error) {
-      setErrorMessage('Oops! There was a problem submitting your form.');
+      console.error('Form submission error:', error);
+      setErrorMessage('Oops! There was a problem submitting your form. Please check your connection and try again.');
       setStatus('error');
     }
   };
@@ -95,60 +96,149 @@ export default function FeedbackPage() {
               {status === 'success' ? (
                 <motion.div
                   key="success"
-                  initial={{ opacity: 0, scale: 0.8, y: 20 }}
-                  animate={{ opacity: 1, scale: 1, y: 0 }}
-                  exit={{ opacity: 0, scale: 0.8 }}
-                  transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
-                  className="text-center py-12 px-6 rounded-2xl"
-                  style={{ backgroundColor: '#FBF7F4' }}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  className="relative overflow-hidden"
                 >
+                  {/* Animated background circles */}
+                  <motion.div
+                    initial={{ scale: 0, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 0.1 }}
+                    transition={{ duration: 0.8, ease: 'easeOut' }}
+                    className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 rounded-full"
+                    style={{ backgroundColor: '#EED2CC' }}
+                  />
+                  <motion.div
+                    initial={{ scale: 0, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 0.15 }}
+                    transition={{ duration: 0.8, delay: 0.2, ease: 'easeOut' }}
+                    className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full"
+                    style={{ backgroundColor: '#7D6E5E' }}
+                  />
+                  
                   <motion.div
-                    initial={{ scale: 0 }}
-                    animate={{ scale: 1 }}
+                    initial={{ opacity: 0, scale: 0.5, y: 50 }}
+                    animate={{ opacity: 1, scale: 1, y: 0 }}
+                    exit={{ opacity: 0, scale: 0.8 }}
                     transition={{ 
                       type: 'spring',
                       stiffness: 200,
-                      damping: 15,
-                      delay: 0.2
+                      damping: 20,
+                      duration: 0.6
                     }}
-                    className="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center"
-                    style={{ backgroundColor: '#EED2CC' }}
+                    className="relative text-center py-16 px-6 rounded-2xl"
+                    style={{ backgroundColor: '#FBF7F4' }}
                   >
-                    <motion.svg
-                      initial={{ pathLength: 0 }}
-                      animate={{ pathLength: 1 }}
-                      transition={{ duration: 0.5, delay: 0.4 }}
-                      className="w-10 h-10"
-                      fill="none"
-                      stroke="#00171F"
-                      strokeWidth="3"
-                      viewBox="0 0 24 24"
+                    {/* Success icon with multiple animations */}
+                    <motion.div
+                      initial={{ scale: 0, rotate: -180 }}
+                      animate={{ scale: 1, rotate: 0 }}
+                      transition={{ 
+                        type: 'spring',
+                        stiffness: 200,
+                        damping: 15,
+                        delay: 0.2
+                      }}
+                      className="relative w-24 h-24 mx-auto mb-8"
                     >
-                      <motion.path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M5 13l4 4L19 7"
+                      <motion.div
+                        initial={{ scale: 0 }}
+                        animate={{ scale: [0, 1.2, 1] }}
+                        transition={{ duration: 0.6, delay: 0.3 }}
+                        className="absolute inset-0 rounded-full"
+                        style={{ backgroundColor: '#EED2CC' }}
                       />
-                    </motion.svg>
+                      <motion.div
+                        initial={{ scale: 0 }}
+                        animate={{ scale: 1 }}
+                        transition={{ duration: 0.4, delay: 0.5 }}
+                        className="absolute inset-0 flex items-center justify-center"
+                      >
+                        <motion.svg
+                          initial={{ pathLength: 0, opacity: 0 }}
+                          animate={{ pathLength: 1, opacity: 1 }}
+                          transition={{ duration: 0.6, delay: 0.6 }}
+                          className="w-12 h-12"
+                          fill="none"
+                          stroke="#00171F"
+                          strokeWidth="3"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          viewBox="0 0 24 24"
+                        >
+                          <motion.path
+                            d="M5 13l4 4L19 7"
+                            initial={{ pathLength: 0 }}
+                            animate={{ pathLength: 1 }}
+                            transition={{ duration: 0.5, delay: 0.7 }}
+                          />
+                        </motion.svg>
+                      </motion.div>
+                    </motion.div>
+
+                    {/* Confetti effect using dots */}
+                    {[...Array(12)].map((_, i) => (
+                      <motion.div
+                        key={i}
+                        initial={{ 
+                          opacity: 0,
+                          scale: 0,
+                          x: 0,
+                          y: 0,
+                        }}
+                        animate={{
+                          opacity: [0, 1, 0],
+                          scale: [0, 1, 0],
+                          x: Math.cos((i * Math.PI * 2) / 12) * 100,
+                          y: Math.sin((i * Math.PI * 2) / 12) * 100,
+                        }}
+                        transition={{
+                          duration: 1.5,
+                          delay: 0.8 + i * 0.05,
+                          ease: 'easeOut',
+                        }}
+                        className="absolute top-1/2 left-1/2 w-2 h-2 rounded-full"
+                        style={{ 
+                          backgroundColor: ['#EED2CC', '#7D6E5E', '#00171F'][i % 3]
+                        }}
+                      />
+                    ))}
+
+                    <motion.h3
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ delay: 0.9, type: 'spring', stiffness: 100 }}
+                      style={{ color: '#00171F' }}
+                      className="text-3xl md:text-4xl font-bold mb-4 relative z-10"
+                    >
+                      Thanks for your submission!
+                    </motion.h3>
+                    <motion.p
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ delay: 1.0 }}
+                      style={{ color: '#00171F' }}
+                      className="text-lg md:text-xl opacity-90 relative z-10"
+                    >
+                      Your feedback helps me improve my services.
+                    </motion.p>
+                    
+                    {/* Subtle pulse animation */}
+                    <motion.div
+                      animate={{ 
+                        scale: [1, 1.05, 1],
+                        opacity: [0.3, 0.5, 0.3]
+                      }}
+                      transition={{ 
+                        duration: 2,
+                        repeat: Infinity,
+                        ease: 'easeInOut'
+                      }}
+                      className="absolute inset-0 rounded-2xl pointer-events-none"
+                      style={{ backgroundColor: '#EED2CC' }}
+                    />
                   </motion.div>
-                  <motion.h3
-                    initial={{ opacity: 0, y: 10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ delay: 0.3 }}
-                    style={{ color: '#00171F' }}
-                    className="text-2xl md:text-3xl font-bold mb-3"
-                  >
-                    Thanks for your submission!
-                  </motion.h3>
-                  <motion.p
-                    initial={{ opacity: 0, y: 10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ delay: 0.4 }}
-                    style={{ color: '#00171F' }}
-                    className="text-lg opacity-90"
-                  >
-                    Your feedback helps me improve my services.
-                  </motion.p>
                 </motion.div>
               ) : (
                 <motion.form
diff --git a/components/Contact.tsx b/components/Contact.tsx
index dff3574..3427c23 100644
--- a/components/Contact.tsx
+++ b/components/Contact.tsx
@@ -21,12 +21,12 @@ export default function Contact() {
     setErrorMessage('');
 
     const form = e.currentTarget;
-    const data = new FormData(form);
+    const formDataObj = new FormData(form);
 
     try {
       const response = await fetch(form.action, {
         method: form.method,
-        body: data,
+        body: formDataObj,
         headers: {
           'Accept': 'application/json',
         },
@@ -43,21 +43,22 @@ export default function Contact() {
         });
         form.reset();
         
-        // Reset success message after 5 seconds
+        // Reset success message after 6 seconds
         setTimeout(() => {
           setStatus('idle');
-        }, 5000);
+        }, 6000);
       } else {
-        const data = await response.json();
-        if (data.errors) {
-          setErrorMessage(data.errors.map((error: { message: string }) => error.message).join(', '));
+        const responseData = await response.json();
+        if (responseData.errors) {
+          setErrorMessage(responseData.errors.map((error: { message: string }) => error.message).join(', '));
         } else {
-          setErrorMessage('Oops! There was a problem submitting your form.');
+          setErrorMessage('Oops! There was a problem submitting your form. Please try again.');
         }
         setStatus('error');
       }
     } catch (error) {
-      setErrorMessage('Oops! There was a problem submitting your form.');
+      console.error('Form submission error:', error);
+      setErrorMessage('Oops! There was a problem submitting your form. Please check your connection and try again.');
       setStatus('error');
     }
   };
@@ -100,60 +101,149 @@ export default function Contact() {
             {status === 'success' ? (
               <motion.div
                 key="success"
-                initial={{ opacity: 0, scale: 0.8, y: 20 }}
-                animate={{ opacity: 1, scale: 1, y: 0 }}
-                exit={{ opacity: 0, scale: 0.8 }}
-                transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
-                className="text-center py-12 px-6 rounded-2xl"
-                style={{ backgroundColor: '#FBF7F4' }}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="relative overflow-hidden"
               >
+                {/* Animated background circles */}
+                <motion.div
+                  initial={{ scale: 0, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 0.1 }}
+                  transition={{ duration: 0.8, ease: 'easeOut' }}
+                  className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 rounded-full"
+                  style={{ backgroundColor: '#EED2CC' }}
+                />
+                <motion.div
+                  initial={{ scale: 0, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 0.15 }}
+                  transition={{ duration: 0.8, delay: 0.2, ease: 'easeOut' }}
+                  className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full"
+                  style={{ backgroundColor: '#7D6E5E' }}
+                />
+                
                 <motion.div
-                  initial={{ scale: 0 }}
-                  animate={{ scale: 1 }}
+                  initial={{ opacity: 0, scale: 0.5, y: 50 }}
+                  animate={{ opacity: 1, scale: 1, y: 0 }}
+                  exit={{ opacity: 0, scale: 0.8 }}
                   transition={{ 
                     type: 'spring',
                     stiffness: 200,
-                    damping: 15,
-                    delay: 0.2
+                    damping: 20,
+                    duration: 0.6
                   }}
-                  className="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center"
-                  style={{ backgroundColor: '#EED2CC' }}
+                  className="relative text-center py-16 px-6 rounded-2xl"
+                  style={{ backgroundColor: '#FBF7F4' }}
                 >
-                  <motion.svg
-                    initial={{ pathLength: 0 }}
-                    animate={{ pathLength: 1 }}
-                    transition={{ duration: 0.5, delay: 0.4 }}
-                    className="w-10 h-10"
-                    fill="none"
-                    stroke="#00171F"
-                    strokeWidth="3"
-                    viewBox="0 0 24 24"
+                  {/* Success icon with multiple animations */}
+                  <motion.div
+                    initial={{ scale: 0, rotate: -180 }}
+                    animate={{ scale: 1, rotate: 0 }}
+                    transition={{ 
+                      type: 'spring',
+                      stiffness: 200,
+                      damping: 15,
+                      delay: 0.2
+                    }}
+                    className="relative w-24 h-24 mx-auto mb-8"
                   >
-                    <motion.path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      d="M5 13l4 4L19 7"
+                    <motion.div
+                      initial={{ scale: 0 }}
+                      animate={{ scale: [0, 1.2, 1] }}
+                      transition={{ duration: 0.6, delay: 0.3 }}
+                      className="absolute inset-0 rounded-full"
+                      style={{ backgroundColor: '#EED2CC' }}
                     />
-                  </motion.svg>
+                    <motion.div
+                      initial={{ scale: 0 }}
+                      animate={{ scale: 1 }}
+                      transition={{ duration: 0.4, delay: 0.5 }}
+                      className="absolute inset-0 flex items-center justify-center"
+                    >
+                      <motion.svg
+                        initial={{ pathLength: 0, opacity: 0 }}
+                        animate={{ pathLength: 1, opacity: 1 }}
+                        transition={{ duration: 0.6, delay: 0.6 }}
+                        className="w-12 h-12"
+                        fill="none"
+                        stroke="#00171F"
+                        strokeWidth="3"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        viewBox="0 0 24 24"
+                      >
+                        <motion.path
+                          d="M5 13l4 4L19 7"
+                          initial={{ pathLength: 0 }}
+                          animate={{ pathLength: 1 }}
+                          transition={{ duration: 0.5, delay: 0.7 }}
+                        />
+                      </motion.svg>
+                    </motion.div>
+                  </motion.div>
+
+                  {/* Confetti effect using dots */}
+                  {[...Array(12)].map((_, i) => (
+                    <motion.div
+                      key={i}
+                      initial={{ 
+                        opacity: 0,
+                        scale: 0,
+                        x: 0,
+                        y: 0,
+                      }}
+                      animate={{
+                        opacity: [0, 1, 0],
+                        scale: [0, 1, 0],
+                        x: Math.cos((i * Math.PI * 2) / 12) * 100,
+                        y: Math.sin((i * Math.PI * 2) / 12) * 100,
+                      }}
+                      transition={{
+                        duration: 1.5,
+                        delay: 0.8 + i * 0.05,
+                        ease: 'easeOut',
+                      }}
+                      className="absolute top-1/2 left-1/2 w-2 h-2 rounded-full"
+                      style={{ 
+                        backgroundColor: ['#EED2CC', '#7D6E5E', '#00171F'][i % 3]
+                      }}
+                    />
+                  ))}
+
+                  <motion.h3
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.9, type: 'spring', stiffness: 100 }}
+                    style={{ color: '#00171F' }}
+                    className="text-3xl md:text-4xl font-bold mb-4 relative z-10"
+                  >
+                    Thank you for your message!
+                  </motion.h3>
+                  <motion.p
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 1.0 }}
+                    style={{ color: '#00171F' }}
+                    className="text-lg md:text-xl opacity-90 relative z-10"
+                  >
+                    I&apos;ll get back to you soon.
+                  </motion.p>
+                  
+                  {/* Subtle pulse animation */}
+                  <motion.div
+                    animate={{ 
+                      scale: [1, 1.05, 1],
+                      opacity: [0.3, 0.5, 0.3]
+                    }}
+                    transition={{ 
+                      duration: 2,
+                      repeat: Infinity,
+                      ease: 'easeInOut'
+                    }}
+                    className="absolute inset-0 rounded-2xl pointer-events-none"
+                    style={{ backgroundColor: '#EED2CC' }}
+                  />
                 </motion.div>
-                <motion.h3
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.3 }}
-                  style={{ color: '#00171F' }}
-                  className="text-2xl md:text-3xl font-bold mb-3"
-                >
-                  Thank you for your message!
-                </motion.h3>
-                <motion.p
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.4 }}
-                  style={{ color: '#00171F' }}
-                  className="text-lg opacity-90"
-                >
-                  I&apos;ll get back to you soon.
-                </motion.p>
               </motion.div>
             ) : (
               <motion.form