feat: add reduced motion support across various components

backend/src/http/mod.rs

@@ -1,3 +1,4 @@
+pub mod auth_handler;
 pub mod health;
 pub mod idempotency;
 pub mod idempotency_examples;

frontend/src/app/contact/ContactForm.tsx

@@ -1,12 +1,19 @@
 "use client";
 
 import { useState } from "react";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/Card";
 import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
 import { FormError } from "@/components/ui/FormError";
 import { motion } from "framer-motion";
 import { Send } from "lucide-react";
+import { useReducedMotion } from "@/hooks/useReducedMotion";
 
 export function ContactForm() {
   const [formData, setFormData] = useState({
@@ -17,6 +24,7 @@ export function ContactForm() {
   });
   const [formError, setFormError] = useState("");
   const [submitted, setSubmitted] = useState(false);
+  const prefersReducedMotion = useReducedMotion();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -49,22 +57,29 @@ export function ContactForm() {
           Send us a Message
         </CardTitle>
         <CardDescription>
-          Fill out the form below and we&apos;ll get back to you within 24 hours.
+          Fill out the form below and we&apos;ll get back to you within 24
+          hours.
         </CardDescription>
       </CardHeader>
       <CardContent>
         {submitted ? (
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
+            initial={
+              prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }
+            }
+            animate={
+              prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+            }
+            transition={prefersReducedMotion ? { duration: 0 } : undefined}
             className="text-center py-8"
           >
             <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-success-muted dark:bg-success-muted mb-4">
               <Send className="h-8 w-8 text-success dark:text-success/80" />
             </div>
             <h3 className="text-xl font-bold mb-2">Message Sent!</h3>
             <p className="text-muted-foreground">
-              Thank you for reaching out. We&apos;ll respond to your inquiry soon.
+              Thank you for reaching out. We&apos;ll respond to your inquiry
+              soon.
             </p>
           </motion.div>
         ) : (

frontend/src/app/contact/FAQSection.tsx

@@ -1,47 +1,63 @@
 "use client";
 
 import { useState } from "react";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/Card";
 import { motion, AnimatePresence } from "framer-motion";
 import { ChevronDown, ChevronUp, HelpCircle } from "lucide-react";
+import { useReducedMotion } from "@/hooks/useReducedMotion";
 
 const faqs = [
   {
     question: "How do I create an account?",
-    answer: "Simply click the 'Register' button on our homepage and fill in your email and desired password. You can also sign up using your Google or Discord account for faster registration.",
+    answer:
+      "Simply click the 'Register' button on our homepage and fill in your email and desired password. You can also sign up using your Google or Discord account for faster registration.",
   },
   {
     question: "How do I join a tournament?",
-    answer: "Navigate to the Tournaments page, browse available events, and click 'Join Tournament' on any event with open registration. You'll need to pay the entry fee (if any) to secure your spot.",
+    answer:
+      "Navigate to the Tournaments page, browse available events, and click 'Join Tournament' on any event with open registration. You'll need to pay the entry fee (if any) to secure your spot.",
   },
   {
     question: "How are match results verified?",
-    answer: "We use a combination of AI-powered anti-cheat systems and on-chain verification. All match results are recorded on the Stellar blockchain for complete transparency.",
+    answer:
+      "We use a combination of AI-powered anti-cheat systems and on-chain verification. All match results are recorded on the Stellar blockchain for complete transparency.",
   },
   {
     question: "How do I withdraw my winnings?",
-    answer: "Go to your Wallet page, click 'Withdraw', and enter your Stellar wallet address or select a supported payment method. Withdrawals are processed instantly thanks to Stellar's fast transaction finality.",
+    answer:
+      "Go to your Wallet page, click 'Withdraw', and enter your Stellar wallet address or select a supported payment method. Withdrawals are processed instantly thanks to Stellar's fast transaction finality.",
   },
   {
     question: "What games are supported?",
-    answer: "We currently support major titles including Counter-Strike 2, Valorant, League of Legends, Dota 2, Fortnite, Overwatch 2, and many more. We're constantly adding new games based on community demand.",
+    answer:
+      "We currently support major titles including Counter-Strike 2, Valorant, League of Legends, Dota 2, Fortnite, Overwatch 2, and many more. We're constantly adding new games based on community demand.",
   },
   {
     question: "How do I report a cheater?",
-    answer: "If you suspect another player of cheating, you can report them directly from the match results page or contact our support team with evidence. We take all reports seriously and investigate promptly.",
+    answer:
+      "If you suspect another player of cheating, you can report them directly from the match results page or contact our support team with evidence. We take all reports seriously and investigate promptly.",
   },
   {
     question: "Is ArenaX available in my country?",
-    answer: "ArenaX is available in over 150 countries worldwide. Some features may be restricted based on local regulations. Check our Terms of Service for more information about regional availability.",
+    answer:
+      "ArenaX is available in over 150 countries worldwide. Some features may be restricted based on local regulations. Check our Terms of Service for more information about regional availability.",
   },
   {
     question: "How can I partner with ArenaX?",
-    answer: "We're always looking for brand partnerships, tournament organizers, and content creators. Contact our partnerships team through this form by selecting 'Partnership' as the category.",
+    answer:
+      "We're always looking for brand partnerships, tournament organizers, and content creators. Contact our partnerships team through this form by selecting 'Partnership' as the category.",
   },
 ];
 
 export function FAQSection() {
   const [openFaq, setOpenFaq] = useState<number | null>(null);
+  const prefersReducedMotion = useReducedMotion();
 
   return (
     <Card>
@@ -56,10 +72,7 @@ export function FAQSection() {
       </CardHeader>
       <CardContent className="space-y-2">
         {faqs.map((faq, index) => (
-          <div
-            key={index}
-            className="border rounded-lg overflow-hidden"
-          >
+          <div key={index} className="border rounded-lg overflow-hidden">
             <button
               onClick={() => setOpenFaq(openFaq === index ? null : index)}
               className="flex items-center justify-between w-full p-4 text-left hover:bg-muted/50 transition-colors"
@@ -74,10 +87,24 @@ export function FAQSection() {
             <AnimatePresence>
               {openFaq === index && (
                 <motion.div
-                  initial={{ height: 0, opacity: 0 }}
-                  animate={{ height: "auto", opacity: 1 }}
-                  exit={{ height: 0, opacity: 0 }}
-                  transition={{ duration: 0.2 }}
+                  initial={
+                    prefersReducedMotion
+                      ? { height: "auto", opacity: 1 }
+                      : { height: 0, opacity: 0 }
+                  }
+                  animate={
+                    prefersReducedMotion
+                      ? { height: "auto", opacity: 1 }
+                      : { height: "auto", opacity: 1 }
+                  }
+                  exit={
+                    prefersReducedMotion
+                      ? { height: "auto", opacity: 1 }
+                      : { height: 0, opacity: 0 }
+                  }
+                  transition={
+                    prefersReducedMotion ? { duration: 0 } : { duration: 0.2 }
+                  }
                 >
                   <div className="px-4 pb-4 text-sm text-muted-foreground">
                     {faq.answer}