238 lines
14 KiB
JavaScript
238 lines
14 KiB
JavaScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { FadeIn, SlideInLeft, SlideInRight, ScaleIn, StaggerContainer, StaggerItem, HoverScale, PageTransition } from "@/components/Motion";
|
|
|
|
export default function Contact() {
|
|
// Contact information from info.txt
|
|
const contactInfo = {
|
|
address: "Al Hashmi Street, Irbid City, 21110",
|
|
email: "contact@yznapps.com",
|
|
phone: "+962 (781) 881-280"
|
|
};
|
|
|
|
return (
|
|
<PageTransition>
|
|
<div className="flex flex-col w-full">
|
|
{/* Hero Section */}
|
|
<FadeIn>
|
|
<section className="relative bg-gray-900 text-white py-16 md:py-24">
|
|
<div className="absolute inset-0 z-0 opacity-30">
|
|
<Image
|
|
src="/images/forex2.jpg"
|
|
alt="Contact Us Background"
|
|
fill
|
|
style={{objectFit: 'cover'}}
|
|
priority
|
|
/>
|
|
</div>
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div className="max-w-3xl">
|
|
<SlideInLeft delay={0.2}>
|
|
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">Contact Us</h1>
|
|
</SlideInLeft>
|
|
<SlideInLeft delay={0.4}>
|
|
<p className="text-lg md:text-xl mb-8">Get in touch with our team to discuss your IT needs</p>
|
|
</SlideInLeft>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</FadeIn>
|
|
|
|
{/* Contact Section */}
|
|
<FadeIn delay={0.3}>
|
|
<section className="py-16 bg-white dark:bg-gray-900">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
{/* Contact Form */}
|
|
<SlideInLeft delay={0.4}>
|
|
<div className="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-md">
|
|
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-6">Send Us a Message</h2>
|
|
<form className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your Name</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
|
|
placeholder="John Doe"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your Email</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
|
|
placeholder="john@example.com"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="subject" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Subject</label>
|
|
<input
|
|
type="text"
|
|
id="subject"
|
|
name="subject"
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
|
|
placeholder="How can we help you?"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
rows="5"
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
|
|
placeholder="Tell us about your project..."
|
|
required
|
|
></textarea>
|
|
</div>
|
|
<div>
|
|
<HoverScale>
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-md transition duration-300"
|
|
>
|
|
Send Message
|
|
</button>
|
|
</HoverScale>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</SlideInLeft>
|
|
|
|
{/* Contact Information */}
|
|
<SlideInRight delay={0.4}>
|
|
<div className="flex flex-col justify-between">
|
|
<div>
|
|
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-6">Contact Information</h2>
|
|
<p className="text-gray-600 dark:text-gray-300 mb-8">
|
|
Have questions or need assistance? Our team is here to help. Reach out to us using any of the methods below.
|
|
</p>
|
|
|
|
<StaggerContainer className="space-y-6">
|
|
<StaggerItem>
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
|
|
<svg className="h-5 w-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
<div className="ml-4">
|
|
<h3 className="text-lg font-medium text-gray-900 dark:text-white">Address</h3>
|
|
<p className="mt-1 text-gray-600 dark:text-gray-300">{contactInfo.address}</p>
|
|
</div>
|
|
</div>
|
|
</StaggerItem>
|
|
|
|
<StaggerItem>
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
|
|
<svg className="h-5 w-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
<div className="ml-4">
|
|
<h3 className="text-lg font-medium text-gray-900 dark:text-white">Email</h3>
|
|
<p className="mt-1 text-gray-600 dark:text-gray-300">
|
|
<a href={`mailto:${contactInfo.email}`} className="hover:text-blue-600 dark:hover:text-blue-400">
|
|
{contactInfo.email}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</StaggerItem>
|
|
|
|
<StaggerItem>
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
|
|
<svg className="h-5 w-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
|
</svg>
|
|
</div>
|
|
<div className="ml-4">
|
|
<h3 className="text-lg font-medium text-gray-900 dark:text-white">Phone</h3>
|
|
<p className="mt-1 text-gray-600 dark:text-gray-300">
|
|
<a href={`tel:${contactInfo.phone}`} className="hover:text-blue-600 dark:hover:text-blue-400">
|
|
{contactInfo.phone}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</StaggerItem>
|
|
</StaggerContainer>
|
|
</div>
|
|
|
|
{/* Map or Image */}
|
|
<ScaleIn delay={0.6}>
|
|
<div className="mt-12 h-64 relative rounded-lg overflow-hidden shadow-lg">
|
|
<Image
|
|
src="/images/website.jpg"
|
|
alt="Office Location"
|
|
fill
|
|
style={{objectFit: 'cover'}}
|
|
/>
|
|
<div className="absolute inset-0 bg-blue-600 bg-opacity-20 flex items-center justify-center">
|
|
<span className="text-white text-lg font-semibold px-4 py-2 bg-black bg-opacity-50 rounded-md">Our Office Location</span>
|
|
</div>
|
|
</div>
|
|
</ScaleIn>
|
|
</div>
|
|
</SlideInRight>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</FadeIn>
|
|
|
|
{/* FAQ Section */}
|
|
<FadeIn delay={0.5}>
|
|
<section className="py-16 bg-gray-50 dark:bg-gray-800">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Frequently Asked Questions</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Find quick answers to common questions</p>
|
|
</div>
|
|
|
|
<div className="max-w-3xl mx-auto space-y-6">
|
|
<StaggerContainer className="space-y-6">
|
|
<StaggerItem>
|
|
<div className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow-md">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">What services do you offer?</h3>
|
|
<p className="text-gray-600 dark:text-gray-300">We offer a comprehensive range of IT services including web development, mobile app development, web hosting, CMS solutions, and managed VPS services.</p>
|
|
</div>
|
|
</StaggerItem>
|
|
<StaggerItem>
|
|
<div className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow-md">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">How much does a typical project cost?</h3>
|
|
<p className="text-gray-600 dark:text-gray-300">Project costs vary depending on requirements, complexity, and timeline. We provide detailed quotes after an initial consultation to understand your specific needs.</p>
|
|
</div>
|
|
</StaggerItem>
|
|
<StaggerItem>
|
|
<div className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow-md">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">How long does it take to complete a project?</h3>
|
|
<p className="text-gray-600 dark:text-gray-300">Project timelines depend on scope and complexity. A simple website might take 2-4 weeks, while complex web applications or mobile apps can take several months. We'll provide a timeline estimate during our initial discussions.</p>
|
|
</div>
|
|
</StaggerItem>
|
|
<StaggerItem>
|
|
<div className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow-md">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Do you provide ongoing support after project completion?</h3>
|
|
<p className="text-gray-600 dark:text-gray-300">Yes, we offer ongoing support and maintenance packages after project completion. Our support includes bug fixes, security updates, performance optimization, and technical assistance to ensure your solution continues to run smoothly.</p>
|
|
</div>
|
|
</StaggerItem>
|
|
</StaggerContainer>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</FadeIn>
|
|
</div>
|
|
</PageTransition>
|
|
);
|
|
} |