Logo update
This commit is contained in:
mukesh13
@ -12,6 +12,8 @@ export default function Careerform() {
|
||||
resume: null
|
||||
});
|
||||
const [uploadStatus, setUploadStatus] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submitStatus, setSubmitStatus] = useState(null);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { id, value } = e.target;
|
||||
@ -39,15 +41,25 @@ export default function Careerform() {
|
||||
return;
|
||||
}
|
||||
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
resume: file
|
||||
}));
|
||||
setUploadStatus(`${file.name} uploaded successfully`);
|
||||
// Convert file to base64
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const base64 = reader.result.split(',')[1]; // Remove data:mime;base64, prefix
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
resume: {
|
||||
name: file.name,
|
||||
data: base64,
|
||||
type: file.type
|
||||
}
|
||||
}));
|
||||
setUploadStatus(`${file.name} uploaded successfully`);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Basic form validation
|
||||
@ -61,40 +73,47 @@ export default function Careerform() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Here you would typically send the form data to your backend
|
||||
console.log('Form submitted:', formData);
|
||||
|
||||
// Example of how you might handle the form submission
|
||||
const submitData = new FormData();
|
||||
submitData.append('fullName', formData.fullName);
|
||||
submitData.append('email', formData.email);
|
||||
submitData.append('phone', formData.phone);
|
||||
submitData.append('roles', formData.roles);
|
||||
submitData.append('resume', formData.resume);
|
||||
setIsSubmitting(true);
|
||||
setSubmitStatus(null);
|
||||
|
||||
// Replace with your actual API endpoint
|
||||
// fetch('/api/submit-application', {
|
||||
// method: 'POST',
|
||||
// body: submitData
|
||||
// }).then(response => {
|
||||
// // Handle response
|
||||
// });
|
||||
try {
|
||||
const response = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: 'career',
|
||||
...formData,
|
||||
}),
|
||||
});
|
||||
|
||||
alert('Application submitted successfully!');
|
||||
|
||||
// Reset form
|
||||
setFormData({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
roles: '',
|
||||
resume: null
|
||||
});
|
||||
setUploadStatus('');
|
||||
|
||||
// Reset file input
|
||||
const fileInput = document.getElementById('resume-upload');
|
||||
if (fileInput) fileInput.value = '';
|
||||
if (response.ok) {
|
||||
setSubmitStatus('success');
|
||||
|
||||
// Reset form
|
||||
setFormData({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
roles: '',
|
||||
resume: null
|
||||
});
|
||||
setUploadStatus('');
|
||||
|
||||
// Reset file input
|
||||
const fileInput = document.getElementById('resume-upload');
|
||||
if (fileInput) fileInput.value = '';
|
||||
} else {
|
||||
setSubmitStatus('error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
setSubmitStatus('error');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
setTimeout(() => setSubmitStatus(null), 5000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@ -120,6 +139,20 @@ export default function Careerform() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
{submitStatus && (
|
||||
<div className={`alert mb-3 ${submitStatus === 'success' ? 'alert-success' : 'alert-danger'}`} style={{
|
||||
padding: '10px 15px',
|
||||
borderRadius: '5px',
|
||||
marginBottom: '20px',
|
||||
backgroundColor: submitStatus === 'success' ? '#d4edda' : '#f8d7da',
|
||||
color: submitStatus === 'success' ? '#155724' : '#721c24',
|
||||
border: `1px solid ${submitStatus === 'success' ? '#c3e6cb' : '#f5c6cb'}`
|
||||
}}>
|
||||
{submitStatus === 'success'
|
||||
? 'Application submitted successfully! We will review your application and get back to you soon.'
|
||||
: 'Failed to submit application. Please try again.'}
|
||||
</div>
|
||||
)}
|
||||
<form className="form-contact" onSubmit={handleSubmit}>
|
||||
<fieldset>
|
||||
<label className="mb_15" htmlFor="fullName">
|
||||
@ -200,22 +233,22 @@ export default function Careerform() {
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="tf-btn btn-primary2 mt_22">
|
||||
<span>Submit Application</span>
|
||||
<button
|
||||
type="submit"
|
||||
className="tf-btn btn-primary2 mt_22"
|
||||
disabled={isSubmitting}
|
||||
style={{
|
||||
opacity: isSubmitting ? 0.7 : 1,
|
||||
cursor: isSubmitting ? 'not-allowed' : 'pointer'
|
||||
}}
|
||||
>
|
||||
<span>{isSubmitting ? 'Submitting...' : 'Submit Application'}</span>
|
||||
<span className="bg-effect" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="shape position-absolute">
|
||||
<Image
|
||||
alt="item"
|
||||
src="/images/item/shape-5.png"
|
||||
width={1105}
|
||||
height={720}
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,9 +1,63 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Contact() {
|
||||
const [formData, setFormData] = useState({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
message: ''
|
||||
});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submitStatus, setSubmitStatus] = useState(null);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { id, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[id]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setSubmitStatus(null);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: 'contact',
|
||||
...formData,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setSubmitStatus('success');
|
||||
setFormData({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
message: ''
|
||||
});
|
||||
} else {
|
||||
setSubmitStatus('error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
setSubmitStatus('error');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
setTimeout(() => setSubmitStatus(null), 5000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="section-contact style-default position-relative" style={{ paddingLeft: "30px", paddingRight: "30px" }}>
|
||||
<div className="tf-container-2" style={{ padding:"30px", background: "linear-gradient(89.8deg, #ff3a2d -0.43%, #ffa13f 100.84%)", borderRadius: "26px" }}>
|
||||
@ -22,30 +76,37 @@ export default function Contact() {
|
||||
Call us for urgent Inquiry
|
||||
</p>
|
||||
</div>
|
||||
{/* <Link
|
||||
href="https://maps.app.goo.gl/pznAE2GE6p3YUhrE7?g_st=com.google.maps.preview.copy"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="tf-btn btn-primary2 h36"
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
color: 'black',
|
||||
border: '1px solid #ddd'
|
||||
}}
|
||||
>
|
||||
<span className="text-caption" style={{ color: 'black' }}>Get Direction</span>
|
||||
<span className="bg-effect" />
|
||||
</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<form onSubmit={(e) => e.preventDefault()} className="form-contact" style={{ gap: "10px !important" }}>
|
||||
{submitStatus && (
|
||||
<div className={`alert mb-3 ${submitStatus === 'success' ? 'alert-success' : 'alert-danger'}`} style={{
|
||||
padding: '10px 15px',
|
||||
borderRadius: '5px',
|
||||
marginBottom: '20px',
|
||||
backgroundColor: submitStatus === 'success' ? '#d4edda' : '#f8d7da',
|
||||
color: submitStatus === 'success' ? '#155724' : '#721c24',
|
||||
border: `1px solid ${submitStatus === 'success' ? '#c3e6cb' : '#f5c6cb'}`
|
||||
}}>
|
||||
{submitStatus === 'success'
|
||||
? 'Message sent successfully! We will get back to you soon.'
|
||||
: 'Failed to send message. Please try again.'}
|
||||
</div>
|
||||
)}
|
||||
<form onSubmit={handleSubmit} className="form-contact" style={{ gap: "10px !important" }}>
|
||||
<fieldset style={{ marginBottom: "5px !important" }}>
|
||||
<label htmlFor="name" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
|
||||
<label htmlFor="fullName" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
|
||||
Full Name*
|
||||
</label>
|
||||
<input type="text" placeholder="Full Name" id="name" required />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Full Name"
|
||||
id="fullName"
|
||||
value={formData.fullName}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
<div className="grid-2 gap_24" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "5px !important", marginBottom: "5px !important" }}>
|
||||
<fieldset style={{ marginBottom: "0px !important" }}>
|
||||
@ -56,6 +117,8 @@ export default function Contact() {
|
||||
type="email"
|
||||
placeholder="Your email address*"
|
||||
id="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
@ -68,6 +131,8 @@ export default function Contact() {
|
||||
type="text"
|
||||
placeholder="Your phone number"
|
||||
id="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
@ -79,29 +144,26 @@ export default function Contact() {
|
||||
className="message"
|
||||
placeholder="Write your message here..."
|
||||
id="message"
|
||||
defaultValue={""}
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</fieldset>
|
||||
<a href="#" className="link attachment text-dark" style={{ marginBottom: "5px !important", display: "inline-block" }}>
|
||||
<i className="icon-paperclip-solid" />
|
||||
Add an attachment
|
||||
</a>
|
||||
<button type="submit" className="tf-btn btn-primary2">
|
||||
<span>Send Message</span>
|
||||
<button
|
||||
type="submit"
|
||||
className="tf-btn btn-primary2"
|
||||
disabled={isSubmitting}
|
||||
style={{
|
||||
opacity: isSubmitting ? 0.7 : 1,
|
||||
cursor: isSubmitting ? 'not-allowed' : 'pointer'
|
||||
}}
|
||||
>
|
||||
<span>{isSubmitting ? 'Sending...' : 'Send Message'}</span>
|
||||
<span className="bg-effect" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="shape position-absolute">
|
||||
<Image
|
||||
alt="item"
|
||||
src="/images/item/shape-5.png"
|
||||
width={1105}
|
||||
height={720}
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,5 @@
|
||||
"use client";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
@ -16,30 +15,34 @@ export default function Footer3() {
|
||||
};
|
||||
|
||||
const sendEmail = async (e) => {
|
||||
e.preventDefault(); // Prevent default form submission behavior
|
||||
e.preventDefault();
|
||||
const email = e.target.email.value;
|
||||
|
||||
try {
|
||||
const response = await axios.post(
|
||||
"https://express-brevomail.vercel.app/api/contacts",
|
||||
{
|
||||
const response = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: 'newsletter',
|
||||
email,
|
||||
}
|
||||
);
|
||||
}),
|
||||
});
|
||||
|
||||
if ([200, 201].includes(response.status)) {
|
||||
e.target.reset(); // Reset the form
|
||||
setSuccess(true); // Set success state
|
||||
if (response.ok) {
|
||||
e.target.reset();
|
||||
setSuccess(true);
|
||||
handleShowMessage();
|
||||
} else {
|
||||
setSuccess(false); // Handle unexpected responses
|
||||
setSuccess(false);
|
||||
handleShowMessage();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error:", error.response?.data || "An error occurred");
|
||||
setSuccess(false); // Set error state
|
||||
console.error('Error:', error);
|
||||
setSuccess(false);
|
||||
handleShowMessage();
|
||||
e.target.reset(); // Reset the form
|
||||
e.target.reset();
|
||||
}
|
||||
};
|
||||
|
||||
@ -63,13 +66,12 @@ export default function Footer3() {
|
||||
heading.addEventListener("click", toggleOpen);
|
||||
});
|
||||
|
||||
// Clean up event listeners when the component unmounts
|
||||
return () => {
|
||||
headings.forEach((heading) => {
|
||||
heading.removeEventListener("click", toggleOpen);
|
||||
});
|
||||
};
|
||||
}, []); // Empty dependency array means this will run only once on mount
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<footer id="footer" className="footer style-2" style={{ backgroundColor: '#272727' }}>
|
||||
@ -80,30 +82,19 @@ export default function Footer3() {
|
||||
<div className="col-lg-4">
|
||||
<div className="footer-about">
|
||||
<Link href={`/`} className="footer-logo">
|
||||
<svg
|
||||
width="139.5"
|
||||
<Image
|
||||
src="/images/logo/keystonesolution_white.png"
|
||||
alt="Keystone Logo"
|
||||
width={100}
|
||||
height={40}
|
||||
viewBox="0 0 140 40"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M18.2183 15.7033L29.395 34.7289C29.4936 34.8967 29.6741 34.9994 29.8687 34.9985L41.1397 34.9463C41.3308 34.9455 41.5075 34.8448 41.6058 34.6809L47.5 24.8527L35.944 24.8365C35.7518 24.8362 35.5738 24.7349 35.4754 24.5698L23.9713 5.2667C23.8727 5.10131 23.6944 5 23.5019 5L12.3005 5C12.1083 5 11.9302 5.10099 11.8315 5.26594L5.91087 15.1639L0.167756 24.7208C0.0644005 24.8928 0.0636223 25.1076 0.165723 25.2804L5.75222 34.7316C5.85055 34.8979 6.02941 35 6.22264 35L16.7708 35C17.1948 35 17.4573 34.538 17.2402 34.1738L5.91087 15.1639L17.276 15.1639C17.6635 15.1639 18.022 15.3691 18.2183 15.7033Z"
|
||||
fill="white"
|
||||
/>
|
||||
<text
|
||||
x="55"
|
||||
y="30"
|
||||
fontFamily="Arial, sans-serif"
|
||||
fontSize="20"
|
||||
fill="white"
|
||||
>
|
||||
Keystone
|
||||
</text>
|
||||
</svg>
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
height: 'auto'
|
||||
}}
|
||||
/>
|
||||
</Link>
|
||||
<div className="footer-info mb_51">
|
||||
<a href="#" className="link text-body-2" style={{ color: 'white' }}>
|
||||
<a href="mailto:koushik@keystonesolution.in" className="link text-body-2" style={{ color: 'white' }}>
|
||||
koushik@keystonesolution.in
|
||||
</a>
|
||||
<div className="text-body-2" style={{ color: 'white' }}>
|
||||
@ -143,22 +134,11 @@ export default function Footer3() {
|
||||
Contact us
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="text-body-2">
|
||||
<Link href={`/career`} className="link footer-menu_item" style={{ color: 'white' }}>
|
||||
Careers
|
||||
</Link>
|
||||
</li>
|
||||
{/* <li className="text-body-2">
|
||||
<Link
|
||||
href={`/#`}
|
||||
className="link footer-menu_item"
|
||||
style={{ color: 'white' }}
|
||||
>
|
||||
Career
|
||||
</Link>
|
||||
</li> */}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -191,10 +171,7 @@ export default function Footer3() {
|
||||
)}
|
||||
</div>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
sendEmail(e);
|
||||
}}
|
||||
onSubmit={sendEmail}
|
||||
id="subscribe-form"
|
||||
className="form-newsletter style-1 subscribe-form mb_18"
|
||||
>
|
||||
@ -225,7 +202,7 @@ export default function Footer3() {
|
||||
</button>
|
||||
</div>
|
||||
<div className="icon">
|
||||
<i className="icon-envelope-solid" style={{ color: 'white' }} />
|
||||
<i className="icon-envelope-solid" style={{ color: 'black' }} />
|
||||
</div>
|
||||
</div>
|
||||
<div id="subscribe-msg" className="subscribe-msg" />
|
||||
@ -248,7 +225,7 @@ export default function Footer3() {
|
||||
<div className="tf-container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="wrapper d-flex align-items-center flex-wrap gap_12">
|
||||
<div className="wrapper d-flex align-items-center justify-content-between flex-wrap gap_12">
|
||||
<p className="text-body-2 m-0" style={{ color: 'white' }}>
|
||||
© {new Date().getFullYear()} Copyright by{" "}
|
||||
<a href="#" className="link-black text-body-3" style={{ color: 'white', fontWeight: '600' }}>
|
||||
@ -256,6 +233,18 @@ export default function Footer3() {
|
||||
</a>{" "}
|
||||
. All Rights Reserved.
|
||||
</p>
|
||||
<p className="text-body-2 m-0" style={{ color: 'rgba(255,255,255,0.7)' }}>
|
||||
Designed by{" "}
|
||||
<a
|
||||
href="https://rootxwire.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="link text-body-3"
|
||||
style={{ color: 'white', fontWeight: '600', textDecoration: 'none' }}
|
||||
>
|
||||
Rootxwire
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,30 +71,17 @@ export default function Header4() {
|
||||
<div className="header-left d-flex align-items-center">
|
||||
<div className="header-logo" style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Link href={`/`} className="site-logo" style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<svg
|
||||
width="160"
|
||||
<Image
|
||||
src="/images/logo/keystonesolution.png" // Update this path to match your PNG file location
|
||||
alt="Keystone Logo"
|
||||
width={90}
|
||||
height={40}
|
||||
viewBox="0 0 150 40"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
<path
|
||||
d="M18.2183 15.7033L29.395 34.7289C29.4936 34.8967 29.6741 34.9994 29.8687 34.9985L41.1397 34.9463C41.3308 34.9455 41.5075 34.8448 41.6058 34.6809L47.5 24.8527L35.944 24.8365C35.7518 24.8362 35.5738 24.7349 35.4754 24.5698L23.9713 5.2667C23.8727 5.10131 23.6944 5 23.5019 5L12.3005 5C12.1083 5 11.9302 5.10099 11.8315 5.26594L5.91087 15.1639L0.167756 24.7208C0.0644005 24.8928 0.0636223 25.1076 0.165723 25.2804L5.75222 34.7316C5.85055 34.8979 6.02941 35 6.22264 35L16.7708 35C17.1948 35 17.4573 34.538 17.2402 34.1738L5.91087 15.1639L17.276 15.1639C17.6635 15.1639 18.022 15.3691 18.2183 15.7033Z"
|
||||
fill="#28285B"
|
||||
/>
|
||||
<text
|
||||
x="55"
|
||||
y="20"
|
||||
fontFamily="Arial, sans-serif"
|
||||
fontSize="22"
|
||||
fontWeight="600"
|
||||
fill="#121416"
|
||||
dominantBaseline="central"
|
||||
>
|
||||
Keystone
|
||||
</text>
|
||||
</svg>
|
||||
priority
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
height: 'auto'
|
||||
}}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<nav className="main-menu style-3">
|
||||
@ -110,7 +97,7 @@ export default function Header4() {
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '4px',
|
||||
gap: '6px',
|
||||
textDecoration: 'none',
|
||||
color: '#333333',
|
||||
transition: 'color 0.3s ease'
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { usePathname } from "next/navigation";
|
||||
import React from "react";
|
||||
|
||||
@ -25,31 +26,17 @@ export default function Mobilemenu() {
|
||||
<div className="offcanvas offcanvas-start canvas-mb" id="menu-mobile">
|
||||
<div className="offcanvas-header top-nav-mobile justify-content-between">
|
||||
<Link href={`/`} className="logo">
|
||||
{/* Updated logo to match Header4 SVG logo */}
|
||||
<svg
|
||||
width="140"
|
||||
<Image
|
||||
src="/images/logo/keystonesolution.png" // Update this path to match your PNG file location
|
||||
alt="Keystone Logo"
|
||||
width={100}
|
||||
height={35}
|
||||
viewBox="0 0 150 40"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
<path
|
||||
d="M18.2183 15.7033L29.395 34.7289C29.4936 34.8967 29.6741 34.9994 29.8687 34.9985L41.1397 34.9463C41.3308 34.9455 41.5075 34.8448 41.6058 34.6809L47.5 24.8527L35.944 24.8365C35.7518 24.8362 35.5738 24.7349 35.4754 24.5698L23.9713 5.2667C23.8727 5.10131 23.6944 5 23.5019 5L12.3005 5C12.1083 5 11.9302 5.10099 11.8315 5.26594L5.91087 15.1639L0.167756 24.7208C0.0644005 24.8928 0.0636223 25.1076 0.165723 25.2804L5.75222 34.7316C5.85055 34.8979 6.02941 35 6.22264 35L16.7708 35C17.1948 35 17.4573 34.538 17.2402 34.1738L5.91087 15.1639L17.276 15.1639C17.6635 15.1639 18.022 15.3691 18.2183 15.7033Z"
|
||||
fill="#28285B"
|
||||
/>
|
||||
<text
|
||||
x="55"
|
||||
y="20"
|
||||
fontFamily="Arial, sans-serif"
|
||||
fontSize="20"
|
||||
fontWeight="600"
|
||||
fill="#121416"
|
||||
dominantBaseline="central"
|
||||
>
|
||||
Keystone
|
||||
</text>
|
||||
</svg>
|
||||
priority
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
height: 'auto'
|
||||
}}
|
||||
/>
|
||||
</Link>
|
||||
<div className="close-menu" data-bs-dismiss="offcanvas">
|
||||
<i className="icon-times-solid" />
|
||||
|
||||
@ -1,9 +1,70 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Contact() {
|
||||
export default function Contactother() {
|
||||
const [formData, setFormData] = useState({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
message: ''
|
||||
});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submitStatus, setSubmitStatus] = useState(null);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { id, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[id]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Basic validation
|
||||
if (!formData.fullName || !formData.email) {
|
||||
alert('Please fill in all required fields');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
setSubmitStatus(null);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: 'contact',
|
||||
...formData,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setSubmitStatus('success');
|
||||
setFormData({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
message: ''
|
||||
});
|
||||
} else {
|
||||
setSubmitStatus('error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
setSubmitStatus('error');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
setTimeout(() => setSubmitStatus(null), 5000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-title style-default -mb_11">
|
||||
<div className="section-contact style-default position-relative py-0">
|
||||
@ -28,25 +89,41 @@ export default function Contact() {
|
||||
<div className="content mb-0 ">
|
||||
<h6 className="text_primary">+91 90954 50005</h6>
|
||||
<p className="text-body-2 text_primary">
|
||||
Call us for urgent
|
||||
Call us for urgent inquiry
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
{submitStatus && (
|
||||
<div className={`alert mb-3 ${submitStatus === 'success' ? 'alert-success' : 'alert-danger'}`} style={{
|
||||
padding: '10px 15px',
|
||||
borderRadius: '5px',
|
||||
marginBottom: '20px',
|
||||
backgroundColor: submitStatus === 'success' ? '#d4edda' : '#f8d7da',
|
||||
color: submitStatus === 'success' ? '#155724' : '#721c24',
|
||||
border: `1px solid ${submitStatus === 'success' ? '#c3e6cb' : '#f5c6cb'}`
|
||||
}}>
|
||||
{submitStatus === 'success'
|
||||
? 'Message sent successfully! We will get back to you soon.'
|
||||
: 'Failed to send message. Please try again.'}
|
||||
</div>
|
||||
)}
|
||||
<form
|
||||
className="form-contact"
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<fieldset>
|
||||
<label className="mb_15" htmlFor="name">
|
||||
<label className="mb_15" htmlFor="fullName">
|
||||
Full Name*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Full Name"
|
||||
id="name"
|
||||
id="fullName"
|
||||
value={formData.fullName}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
@ -59,19 +136,22 @@ export default function Contact() {
|
||||
type="email"
|
||||
placeholder="Your email address*"
|
||||
id="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label className="mb_15" htmlFor="phone">
|
||||
Phone Number
|
||||
<span className="text_mono-gray-5">(Optional)</span>
|
||||
<span className="text_mono-gray-5"> (Optional)</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Your phone number"
|
||||
id="phone"
|
||||
required
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
@ -83,15 +163,20 @@ export default function Contact() {
|
||||
className="message"
|
||||
placeholder="Write your message here..."
|
||||
id="message"
|
||||
defaultValue={""}
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</fieldset>
|
||||
<a href="#" className="link attachment">
|
||||
<i className="icon-paperclip-solid" />
|
||||
Add an attachment
|
||||
</a>
|
||||
<button type="submit" className="tf-btn btn-primary2 mt_22">
|
||||
<span>Send Message</span>
|
||||
<button
|
||||
type="submit"
|
||||
className="tf-btn btn-primary2 mt_22"
|
||||
disabled={isSubmitting}
|
||||
style={{
|
||||
opacity: isSubmitting ? 0.7 : 1,
|
||||
cursor: isSubmitting ? 'not-allowed' : 'pointer'
|
||||
}}
|
||||
>
|
||||
<span>{isSubmitting ? 'Sending...' : 'Send Message'}</span>
|
||||
<span className="bg-effect" />
|
||||
</button>
|
||||
</form>
|
||||
@ -109,4 +194,4 @@ export default function Contact() {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user