update
This commit is contained in:
Iliyan Angelov
602
frontEnd/components/pages/contact/ContactSection.tsx
Normal file
602
frontEnd/components/pages/contact/ContactSection.tsx
Normal file
@@ -0,0 +1,602 @@
|
||||
"use client";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import Image from "next/legacy/image";
|
||||
import thumb from "@/public/images/contact-thumb.png";
|
||||
import { contactApiService, ContactFormData } from "@/lib/api/contactService";
|
||||
|
||||
const ContactSection = () => {
|
||||
const pathname = usePathname();
|
||||
const isServiceSingle = pathname === "/service-single" || pathname === "/about-us";
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
company: '',
|
||||
jobTitle: '',
|
||||
industry: '',
|
||||
companySize: '',
|
||||
budget: '',
|
||||
timeline: '',
|
||||
projectType: '',
|
||||
message: '',
|
||||
newsletter: false,
|
||||
privacy: false
|
||||
});
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submitStatus, setSubmitStatus] = useState<{
|
||||
type: 'success' | 'error' | null;
|
||||
message: string;
|
||||
}>({ type: null, message: '' });
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
const { name, value, type } = e.target;
|
||||
if (type === 'checkbox') {
|
||||
const checked = (e.target as HTMLInputElement).checked;
|
||||
setFormData(prev => ({ ...prev, [name]: checked }));
|
||||
} else {
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setSubmitStatus({ type: null, message: '' });
|
||||
|
||||
try {
|
||||
// Transform form data to match API requirements
|
||||
const apiData: ContactFormData = {
|
||||
first_name: formData.firstName,
|
||||
last_name: formData.lastName,
|
||||
email: formData.email,
|
||||
phone: formData.phone || undefined,
|
||||
company: formData.company,
|
||||
job_title: formData.jobTitle,
|
||||
industry: formData.industry || undefined,
|
||||
company_size: formData.companySize || undefined,
|
||||
project_type: formData.projectType || undefined,
|
||||
timeline: formData.timeline || undefined,
|
||||
budget: formData.budget || undefined,
|
||||
message: formData.message,
|
||||
newsletter_subscription: formData.newsletter,
|
||||
privacy_consent: formData.privacy
|
||||
};
|
||||
|
||||
// Submit to Django API
|
||||
const response = await contactApiService.submitContactForm(apiData);
|
||||
|
||||
setSubmitStatus({
|
||||
type: 'success',
|
||||
message: response.message || 'Thank you! We\'ll contact you within 24 hours.'
|
||||
});
|
||||
|
||||
// Reset form on success
|
||||
setFormData({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
company: '',
|
||||
jobTitle: '',
|
||||
industry: '',
|
||||
companySize: '',
|
||||
budget: '',
|
||||
timeline: '',
|
||||
projectType: '',
|
||||
message: '',
|
||||
newsletter: false,
|
||||
privacy: false
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
setSubmitStatus({
|
||||
type: 'error',
|
||||
message: error instanceof Error ? error.message : 'Failed to submit form. Please try again.'
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
className={
|
||||
"tp-contact pb-120 fade-wrapper" +
|
||||
(isServiceSingle ? " pt-120" : " fix-top")
|
||||
}
|
||||
>
|
||||
<div className="container">
|
||||
{/* Contact Information Cards */}
|
||||
<div className="row mb-40">
|
||||
<div className="col-12 col-md-4">
|
||||
<div className="contact-info-card">
|
||||
<div className="contact-info-icon">
|
||||
<i className="fa-solid fa-phone"></i>
|
||||
</div>
|
||||
<h4>Phone Support</h4>
|
||||
<p>Main Contact & Emergency</p>
|
||||
<a href="tel:+359897338147">+359 897 338 147</a>
|
||||
<a href="tel:+359896138030">Emergency: +359 896 13 80 30</a>
|
||||
<span className="contact-hours">Available 24/7</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-4">
|
||||
<div className="contact-info-card">
|
||||
<div className="contact-info-icon">
|
||||
<i className="fa-solid fa-envelope"></i>
|
||||
</div>
|
||||
<h4>Email Support</h4>
|
||||
<p>Software Solutions</p>
|
||||
<a href="mailto:info@gnxsoft.com">info@gnxsoft.com</a>
|
||||
<a href="mailto:contact@gnxsoft.com">contact@gnxsoft.com</a>
|
||||
<span className="contact-hours">24/7 Response Time</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-4">
|
||||
<div className="contact-info-card">
|
||||
<div className="contact-info-icon">
|
||||
<i className="fa-solid fa-map-marker-alt"></i>
|
||||
</div>
|
||||
<h4>Office Locations</h4>
|
||||
<p>Our Location</p>
|
||||
<address>
|
||||
GNX Soft Ltd.<br />
|
||||
Tsar Simeon I, 56<br />
|
||||
Burgas, Burgas 8000, Bulgaria
|
||||
</address>
|
||||
<span className="contact-hours">Schedule a Visit</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row vertical-column-gap-md justify-content-between mt-40">
|
||||
<div className="col-12 col-lg-7">
|
||||
<div className="tp-contact__content">
|
||||
|
||||
<div className="contact-form mt-40">
|
||||
<form onSubmit={handleSubmit} className="enterprise-form">
|
||||
<div className="form-section">
|
||||
<h4 className="form-section-title">
|
||||
<i className="fa-solid fa-user"></i>
|
||||
Personal Information
|
||||
</h4>
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="input-single">
|
||||
<label htmlFor="firstName">First Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstName"
|
||||
id="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={handleInputChange}
|
||||
placeholder="John"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="input-single">
|
||||
<label htmlFor="lastName">Last Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="lastName"
|
||||
id="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Smith"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="input-single">
|
||||
<label htmlFor="email">Business Email *</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
placeholder="john.smith@company.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="input-single">
|
||||
<label htmlFor="phone">Phone Number</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
id="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
placeholder="+1 (555) 123-4567"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-section">
|
||||
<h4 className="form-section-title">
|
||||
<i className="fa-solid fa-building"></i>
|
||||
Company Information
|
||||
</h4>
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="input-single">
|
||||
<label htmlFor="company">Company Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="company"
|
||||
id="company"
|
||||
value={formData.company}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Acme Corporation"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="input-single">
|
||||
<label htmlFor="jobTitle">Job Title *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="jobTitle"
|
||||
id="jobTitle"
|
||||
value={formData.jobTitle}
|
||||
onChange={handleInputChange}
|
||||
placeholder="CTO, IT Director, etc."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="input-single">
|
||||
<label htmlFor="industry">Industry</label>
|
||||
<select
|
||||
name="industry"
|
||||
id="industry"
|
||||
value={formData.industry}
|
||||
onChange={handleInputChange}
|
||||
>
|
||||
<option value="">Select Industry</option>
|
||||
<option value="technology">Technology</option>
|
||||
<option value="finance">Finance</option>
|
||||
<option value="healthcare">Healthcare</option>
|
||||
<option value="manufacturing">Manufacturing</option>
|
||||
<option value="retail">Retail</option>
|
||||
<option value="education">Education</option>
|
||||
<option value="government">Government</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="input-single">
|
||||
<label htmlFor="companySize">Company Size</label>
|
||||
<select
|
||||
name="companySize"
|
||||
id="companySize"
|
||||
value={formData.companySize}
|
||||
onChange={handleInputChange}
|
||||
>
|
||||
<option value="">Select Company Size</option>
|
||||
<option value="1-10">1-10 employees</option>
|
||||
<option value="11-50">11-50 employees</option>
|
||||
<option value="51-200">51-200 employees</option>
|
||||
<option value="201-1000">201-1000 employees</option>
|
||||
<option value="1000+">1000+ employees</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-section">
|
||||
<h4 className="form-section-title">
|
||||
<i className="fa-solid fa-project-diagram"></i>
|
||||
Project Details
|
||||
</h4>
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="input-single">
|
||||
<label htmlFor="projectType">Project Type</label>
|
||||
<select
|
||||
name="projectType"
|
||||
id="projectType"
|
||||
value={formData.projectType}
|
||||
onChange={handleInputChange}
|
||||
>
|
||||
<option value="">Select Project Type</option>
|
||||
<option value="software-development">Software Development</option>
|
||||
<option value="cloud-migration">Cloud Migration</option>
|
||||
<option value="digital-transformation">Digital Transformation</option>
|
||||
<option value="data-analytics">Data Analytics</option>
|
||||
<option value="security-compliance">Security & Compliance</option>
|
||||
<option value="integration">System Integration</option>
|
||||
<option value="consulting">Consulting Services</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="input-single">
|
||||
<label htmlFor="timeline">Project Timeline</label>
|
||||
<select
|
||||
name="timeline"
|
||||
id="timeline"
|
||||
value={formData.timeline}
|
||||
onChange={handleInputChange}
|
||||
>
|
||||
<option value="">Select Timeline</option>
|
||||
<option value="immediate">Immediate (0-3 months)</option>
|
||||
<option value="short">Short-term (3-6 months)</option>
|
||||
<option value="medium">Medium-term (6-12 months)</option>
|
||||
<option value="long">Long-term (12+ months)</option>
|
||||
<option value="planning">Still planning</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="input-single">
|
||||
<label htmlFor="budget">Project Budget Range</label>
|
||||
<select
|
||||
name="budget"
|
||||
id="budget"
|
||||
value={formData.budget}
|
||||
onChange={handleInputChange}
|
||||
>
|
||||
<option value="">Select Budget Range</option>
|
||||
<option value="under-50k">Under €50,000</option>
|
||||
<option value="50k-100k">€50,000 - €100,000</option>
|
||||
<option value="100k-250k">€100,000 - €250,000</option>
|
||||
<option value="250k-500k">€250,000 - €500,000</option>
|
||||
<option value="500k-1m">€500,000 - €1,000,000</option>
|
||||
<option value="over-1m">Over €1,000,000</option>
|
||||
<option value="discuss">Prefer to discuss</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-single">
|
||||
<label htmlFor="message">Project Description *</label>
|
||||
<textarea
|
||||
name="message"
|
||||
id="message"
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Please describe your project requirements, current challenges, and expected outcomes..."
|
||||
rows={5}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-section">
|
||||
<h4 className="form-section-title">
|
||||
<i className="fa-solid fa-shield-halved"></i>
|
||||
Privacy & Communication
|
||||
</h4>
|
||||
<div className="checkbox-group">
|
||||
<div className="checkbox-single">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="newsletter"
|
||||
id="newsletter"
|
||||
checked={formData.newsletter}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
<label htmlFor="newsletter">
|
||||
Subscribe to our newsletter for industry insights and product updates
|
||||
</label>
|
||||
</div>
|
||||
<div className="checkbox-single">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="privacy"
|
||||
id="privacy"
|
||||
checked={formData.privacy}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
<label htmlFor="privacy">
|
||||
I agree to the <a href="/policy?type=privacy">Privacy Policy</a> and consent to being contacted by our team *
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Message */}
|
||||
{submitStatus.type && (
|
||||
<div className={`form-status mt-30 ${submitStatus.type === 'success' ? 'success' : 'error'}`}>
|
||||
<div className="status-content">
|
||||
<i className={`fa-solid ${submitStatus.type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}`}></i>
|
||||
<span>{submitStatus.message}</span>
|
||||
{submitStatus.type === 'error' && (
|
||||
<div className="error-details mt-10">
|
||||
<small>
|
||||
If the problem persists, please contact us directly at{' '}
|
||||
<a href="mailto:info@gnxsoft.com" className="text-primary">info@gnxsoft.com</a>
|
||||
</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-actions mt-40">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary enterprise-btn"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<span>Sending...</span>
|
||||
<i className="fa-solid fa-spinner fa-spin"></i>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>Request Software Consultation</span>
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<p className="form-disclaimer">
|
||||
<i className="fa-solid fa-lock"></i>
|
||||
Your information is secure and will only be used to provide you with relevant software solutions.
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-lg-5">
|
||||
<div className="tp-contact__sidebar">
|
||||
<div className="contact-sidebar-card">
|
||||
<div className="sidebar-header">
|
||||
<h3>Why Choose Our Software Solutions?</h3>
|
||||
<div className="enterprise-badge">
|
||||
<i className="fa-solid fa-award"></i>
|
||||
<span>Enterprise Grade</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sidebar-features">
|
||||
<div className="feature-item">
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-shield-halved"></i>
|
||||
</div>
|
||||
<div className="feature-content">
|
||||
<h4>Incident Management</h4>
|
||||
<p>Advanced incident management software with real-time monitoring and automated response capabilities.</p>
|
||||
<div className="feature-tags">
|
||||
<span className="tag">Real-time</span>
|
||||
<span className="tag">Automated</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="feature-item">
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-users"></i>
|
||||
</div>
|
||||
<div className="feature-content">
|
||||
<h4>Custom Development</h4>
|
||||
<p>Tailored software solutions built to your exact specifications with dedicated development teams.</p>
|
||||
<div className="feature-tags">
|
||||
<span className="tag">Dedicated Teams</span>
|
||||
<span className="tag">Custom</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="feature-item">
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-chart-line"></i>
|
||||
</div>
|
||||
<div className="feature-content">
|
||||
<h4>System Integrations & APIs</h4>
|
||||
<p>Seamless integration with your existing systems and third-party applications through robust APIs for unified workflows.</p>
|
||||
<div className="feature-tags">
|
||||
<span className="tag">API-First</span>
|
||||
<span className="tag">Seamless</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="feature-item">
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-cogs"></i>
|
||||
</div>
|
||||
<div className="feature-content">
|
||||
<h4>Data Replication</h4>
|
||||
<p>Reliable data replication and synchronization solutions to ensure data consistency across systems.</p>
|
||||
<div className="feature-tags">
|
||||
<span className="tag">Reliable</span>
|
||||
<span className="tag">Sync</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="contact-sidebar-card">
|
||||
<h3>Next Steps</h3>
|
||||
<div className="next-steps">
|
||||
<div className="step-item">
|
||||
<div className="step-number">1</div>
|
||||
<div className="step-content">
|
||||
<h4>Initial Consultation</h4>
|
||||
<p>We'll review your requirements and provide initial recommendations within 24 hours.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="step-item">
|
||||
<div className="step-number">2</div>
|
||||
<div className="step-content">
|
||||
<h4>Custom Demo</h4>
|
||||
<p>Schedule a personalized demonstration tailored to your specific use case.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="step-item">
|
||||
<div className="step-number">3</div>
|
||||
<div className="step-content">
|
||||
<h4>Proposal & Pricing</h4>
|
||||
<p>Receive a detailed proposal with custom pricing and implementation timeline.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="contact-sidebar-card">
|
||||
<h3>Find Us</h3>
|
||||
<div className="company-map">
|
||||
<div className="map-container">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2933.123456789!2d27.4758968970689!3d42.496781103070504!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40a6b8c9d1234567%3A0x1234567890abcdef!2sBurgas%2C%20Bulgaria!5e0!3m2!1sen!2sbg!4v1234567890123!5m2!1sen!2sbg"
|
||||
width="100%"
|
||||
height="200"
|
||||
style={{ border: 0, borderRadius: '8px' }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="Company Location"
|
||||
/>
|
||||
</div>
|
||||
<div className="map-info">
|
||||
<div className="location-details">
|
||||
<div className="location-icon">
|
||||
<i className="fa-solid fa-map-marker-alt"></i>
|
||||
</div>
|
||||
<div className="location-text">
|
||||
<h4>GNX Soft Ltd.</h4>
|
||||
<p>Tsar Simeon I, 56<br />Burgas, Burgas 8000, Bulgaria</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="location-actions">
|
||||
<a href="https://maps.google.com/?q=Tsar+Simeon+I+56+Burgas+Bulgaria" target="_blank" rel="noopener noreferrer" className="map-link">
|
||||
<i className="fa-solid fa-directions"></i>
|
||||
Get Directions
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactSection;
|
||||
Reference in New Issue
Block a user