import { Head, useForm, usePage } from '@inertiajs/react'; import Layout from '@/Components/Layout'; import { Card, CardContent } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Textarea } from '@/components/ui/textarea'; import { Label } from '@/components/ui/label'; import { Mail, Phone, MapPin, Send, CheckCircle2, MessageCircleHeart } from 'lucide-react'; import { FormEventHandler, useEffect } from 'react'; interface Settings { site_name?: string; support_phone?: string; support_email?: string; address?: string; } interface Props { settings: Settings; } export default function Contact({ settings }: Props) { const { flash } = usePage().props as any; const { data, setData, post, processing, errors, wasSuccessful, reset } = useForm({ name: '', email: '', phone: '', subject: '', message: '', }); const handleSubmit: FormEventHandler = (e) => { e.preventDefault(); post('/contact', { preserveScroll: true, }); }; // Reset form on successful submission useEffect(() => { if (wasSuccessful) { reset(); } }, [wasSuccessful]); return ( {/* Hero Section - Light Modern Style (compact) */}
{/* Subtle Mesh Gradient Background */}
{/* Grid Pattern - very subtle */}
We Reply Within 24 Hours

Get in{' '} Touch

Have a question or want to work together? We'd love to hear from you.

{/* Contact Form & Info */}
{/* Contact Information */}

Contact Information

Feel free to reach out to us through any of these channels.

{/* Contact Cards */}
{settings.support_email && (
)} {settings.support_phone && (
)} {settings.address && (

Address

{settings.address}

)}
{/* Contact Form */}

Send us a Message

{/* Success Message */} {flash?.success && (

{flash.success}

)}
{/* Name */}
setData('name', e.target.value)} className={`mt-1 ${errors.name ? 'border-red-500' : ''}`} placeholder="Your name" /> {errors.name && (

{errors.name}

)}
{/* Email and Phone */}
setData('email', e.target.value)} className={`mt-1 ${errors.email ? 'border-red-500' : ''}`} placeholder="your.email@example.com" /> {errors.email && (

{errors.email}

)}
setData('phone', e.target.value)} className={`mt-1 ${errors.phone ? 'border-red-500' : ''}`} placeholder="+880 1234 567890" /> {errors.phone && (

{errors.phone}

)}
{/* Subject */}
setData('subject', e.target.value)} className={`mt-1 ${errors.subject ? 'border-red-500' : ''}`} placeholder="How can we help?" /> {errors.subject && (

{errors.subject}

)}
{/* Message */}