mukeshs/operify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Docker config

Browse Source
This commit is contained in:
mukesh13
2025-06-16 15:53:12 +05:30
commit da3df17022
411 changed files with 24117 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
app/components/ContactPage/ContactForm.js Normal file
View File

@ -0,0 +1,246 @@
"use client"
import React, { useState } from 'react';
const CustomSelect = ({ options, value, onChange, placeholder, required }) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="relative">
<button
type="button"
onClick={() => setIsOpen(!isOpen)}
className="w-full px-5 py-4 bg-white border border-teal-400 rounded-full text-left focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent appearance-none text-gray-600"
required={required}
>
<span className={value ? 'text-gray-800' : 'text-gray-500'}>
{value || placeholder}
</span>
<svg
className={`absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
{isOpen && (
<div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg">
{options.map((option, index) => (
<button
key={index}
type="button"
disabled={option.disabled}
onClick={() => {
if (!option.disabled) {
onChange(option.value);
setIsOpen(false);
}
}}
className={`w-full px-4 py-3 text-left hover:bg-gray-50 first:rounded-t-lg last:rounded-b-lg ${option.disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-700'}`}
>
{option.label}
</button>
))}
</div>
)}
</div>
);
};
const ContactForm = () => {
const [formData, setFormData] = useState({
name: '',
phone: '',
email: '',
Organisation: '', // Changed to match API field name
service_interest: '',
message: ''
});
const [isSubmitting, setIsSubmitting] = useState(false);
const serviceOptions = [
{ value: '', label: 'Service and Product of Interest', disabled: true },
{ value: 'DNA Sequencing', label: 'DNA Sequencing' },
{ value: 'RNA Sequencing', label: 'RNA Sequencing' },
{ value: 'Genotyping', label: 'Genotyping' },
{ value: 'Bioinformatics', label: 'Bioinformatics' },
{ value: 'Other', label: 'Other' }
];
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};
const handleSelectChange = (name, value) => {
setFormData(prev => ({
...prev,
[name]: value
}));
};
const handleSubmit = async (e) => {
e.preventDefault();
setIsSubmitting(true);
try {
const formDataToSend = new FormData();
Object.keys(formData).forEach(key => {
if (formData[key]) {
formDataToSend.append(key, formData[key]);
}
});
formDataToSend.append('form_type', 'contact');
const response = await fetch('/api/forms', {
method: 'POST',
body: formDataToSend,
});
const result = await response.json();
if (response.ok) {
alert(result.message);
// Reset form
setFormData({
name: '',
phone: '',
email: '',
Organisation: '',
service_interest: '',
message: ''
});
} else {
alert(result.error);
}
} catch (error) {
console.error('Error submitting form:', error);
alert('Error sending message. Please try again.');
} finally {
setIsSubmitting(false);
}
};
return (
<div className="lg:w-7/12">
<div className="p-6 md:p-8 lg:p-10 rounded-3xl" style={{ backgroundColor: '#f2fcfc' }}>
<div className="mb-8">
<h2 className="text-2xl md:text-3xl font-normal text-teal-700 mb-2">
Send a message
</h2>
</div>
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<input
type="text"
name="name"
value={formData.name}
onChange={handleInputChange}
placeholder="Your Name"
required
className="w-full px-5 py-4 bg-white border border-teal-400 rounded-full focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent placeholder-gray-500"
/>
</div>
<div>
<input
type="tel"
name="phone"
value={formData.phone}
onChange={handleInputChange}
placeholder="Your Phone"
required
className="w-full px-5 py-4 bg-white border border-teal-400 rounded-full focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent placeholder-gray-500"
/>
</div>
</div>
<div>
<CustomSelect
options={serviceOptions}
value={formData.service_interest}
onChange={(value) => handleSelectChange('service_interest', value)}
placeholder="Service and Product of Interest"
required
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<input
type="email"
name="email"
value={formData.email}
onChange={handleInputChange}
placeholder="Your Email"
required
className="w-full px-5 py-4 bg-white border border-teal-400 rounded-full focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent placeholder-gray-500"
/>
</div>
<div>
<input
type="text"
name="Organisation"
value={formData.Organisation}
onChange={handleInputChange}
placeholder="Organisation"
required
className="w-full px-5 py-4 bg-white border border-teal-400 rounded-full focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent placeholder-gray-500"
/>
</div>
</div>
<div>
<textarea
name="message"
value={formData.message}
onChange={handleInputChange}
rows={3}
placeholder="Project description"
required
className="w-full px-5 py-4 bg-white border border-teal-400 rounded-2xl focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent resize-vertical placeholder-gray-500"
/>
</div>
<div className="pt-4 flex justify-end">
<button
type="submit"
disabled={isSubmitting}
className="inline-flex items-center justify-center px-8 py-3 bg-teal-600 text-white font-medium rounded-full hover:bg-teal-700 transition-all duration-300 group disabled:opacity-50 disabled:cursor-not-allowed"
>
{isSubmitting ? (
<div className="flex items-center space-x-2">
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-current"></div>
<span>Sending...</span>
</div>
) : (
<>
<span className="mr-2">Submit</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300"
fill="none"
stroke="currentColor"
strokeWidth={2}
>
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</>
)}
</button>
</div>
</form>
</div>
</div>
);
};
export default ContactForm;

31
app/components/ContactPage/ContactInfo.js Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import Image from 'next/image';
const ContactInfo = () => {
return (
<div className="lg:w-5/12 relative">
<div className="p-6 md:p-8 lg:p-8 text-center lg:text-left">
<div className="mb-6">
<h2 className="text-gray-700 text-2xl md:text-3xl lg:text-4xl font-semibold leading-tight mb-4">
Reach out to our team
</h2>
<p className="text-gray-600 text-sm md:text-base leading-relaxed mb-6">
We&apos;re here here to help with your research and innovation needs.
</p>
<div className="flex justify-center lg:justify-start">
<div className="relative w-full max-w-lg h-80 md:h-96 lg:h-[28rem]">
<Image
src="/images/Contact_us.png"
alt="Contact Us"
fill
className="object-contain"
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default ContactInfo;

22
app/components/ContactPage/ContactMap.js Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
const ContactMap = () => {
return (
<section className="contact-iframe-section mb-8">
<div className="w-full p-4">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4153.06833268994!2d77.14586737601705!3d28.65493368306228!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d03c0d9e73225%3A0xfd48e79d8462e401!2soperifytech!5e1!3m2!1sen!2sin!4v1728660015382!5m2!1sen!2sin"
width="100%"
height="500"
style={{ border: 0 }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
className="w-full h-64 md:h-80 lg:h-96 rounded-3xl"
/>
</div>
</section>
);
};
export default ContactMap;

17
app/components/ContactPage/ContactPage.js Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
import PageTitle from './PageTitle';
import ContactSection from './ContactSection';
import ContactMap from './ContactMap';
const ContactPage = () => {
return (
<div className="page-content contact-us">
<PageTitle />
<div className="h-6"></div>
<ContactSection />
<ContactMap />
</div>
);
};
export default ContactPage;

18
app/components/ContactPage/ContactSection.js Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
import ContactForm from './ContactForm';
import ContactInfo from './ContactInfo';
const ContactSection = () => {
return (
<section className="py-10 md:py-16 lg:py-6">
<div className="container mx-auto max-w-none px-4">
<div className="flex flex-col lg:flex-row gap-6">
<ContactInfo />
<ContactForm />
</div>
</div>
</section>
);
};
export default ContactSection;

104
app/components/ContactPage/CustomSelect.js Normal file
View File

@ -0,0 +1,104 @@
'use client';
import React, { useState, useRef, useEffect } from 'react';
const CustomSelect = ({
options,
value,
onChange,
placeholder,
required = false
}) => {
const [isOpen, setIsOpen] = useState(false);
const [selectedLabel, setSelectedLabel] = useState(placeholder);
const dropdownRef = useRef(null);
useEffect(() => {
const selectedOption = options.find(option => option.value === value);
if (selectedOption && !selectedOption.disabled) {
setSelectedLabel(selectedOption.label);
} else {
setSelectedLabel(placeholder);
}
}, [value, options, placeholder]);
useEffect(() => {
const handleClickOutside = (event) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
setIsOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
const handleSelect = (option) => {
if (!option.disabled) {
onChange(option.value);
setIsOpen(false);
}
};
return (
<div className="relative w-full" ref={dropdownRef}>
<div
className={`w-full px-5 py-4 border border-gray-300 rounded-full cursor-pointer flex items-center justify-between bg-white focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-transparent ${
isOpen ? 'ring-2 ring-blue-500 border-transparent' : ''
}`}
onClick={() => setIsOpen(!isOpen)}
>
<span className={`${value ? 'text-gray-800' : 'text-gray-500'} pr-4`}>
{selectedLabel}
</span>
<span className={`transform transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}>
<svg
width="16"
height="12"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="text-gray-600"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M6 8l4 4 4-4"
/>
</svg>
</span>
</div>
{isOpen && (
<div className="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 max-h-48 overflow-y-auto">
{options.map((option, index) => {
if (option.disabled) return null;
return (
<div
key={index}
className="px-6 py-3 cursor-pointer hover:bg-gray-50 text-gray-800 transition-colors duration-150"
onClick={() => handleSelect(option)}
>
{option.label}
</div>
);
})}
</div>
)}
{/* Hidden input for form validation */}
<input
type="hidden"
name="service_interest"
value={value}
required={required}
/>
</div>
);
};
export default CustomSelect;

36
app/components/ContactPage/PageTitle.js Normal file
View File

@ -0,0 +1,36 @@
import Link from 'next/link';
import React from 'react';
const PageTitle = () => {
return (
<section
className="relative bg-cover bg-center py-6 h-24"
style={{ backgroundImage: "url('images/bredcrumb.jpg')" }}
>
{/* Breadcrumb */}
<div className="relative z-10 mb-1 -mt-3">
<div className="container mx-auto max-w-none px-6">
<nav className="flex items-center space-x-2 text-sm">
<Link href="/" className="text-white hover:text-yellow-400 underline">Home</Link>
<span className="text-white">
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
</svg>
</span>
<span className="text-white">Contact Us</span>
</nav>
</div>
</div>
{/* Page Title */}
<div className="relative z-10 text-center -mt-2">
<h1 className="text-4xl md:text-4xl font-bold text-white mb-2">
Contact Us
</h1>
<div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
</div>
</section>
);
};
export default PageTitle;