From 9fb329dcd638a5aa9f4224a0ed2821a8d6d413e5 Mon Sep 17 00:00:00 2001 From: Vishva Date: Wed, 29 Jul 2026 17:13:22 +0530 Subject: [PATCH] Redesign Careers and Strategy Call modals to match ContactSection theme --- src/App.jsx | 1301 ++++++++++++++++++++++++++++++--------------------- 1 file changed, 772 insertions(+), 529 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 28eed90..677046d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,6 +9,7 @@ import FeaturedGallery from './components/FeaturedGallery'; import ProductCard from './components/ProductCard'; import ContactSection from './components/ContactSection'; import AboutUsPage from './components/AboutUsPage'; +import TurnstileCaptcha from './components/TurnstileCaptcha'; // Reusable Scroll Reveal Wrapper with Reduced Motion Support function Reveal({ children, delay = 0, style }) { @@ -412,6 +413,9 @@ export default function App({ previewMode = false }) { const [careersEmail, setCareersEmail] = useState(''); const [careersPhone, setCareersPhone] = useState(''); const [careersFile, setCareersFile] = useState(null); + const [careersTurnstileToken, setCareersTurnstileToken] = useState(''); + const [careersErrorMsg, setCareersErrorMsg] = useState(''); + const [isCareersSubmitting, setIsCareersSubmitting] = useState(false); // Strategy Form Fields const [strategyName, setStrategyName] = useState(''); @@ -427,6 +431,9 @@ export default function App({ previewMode = false }) { 'Cloud Engineering': false, 'Enterprise Software': false, }); + const [strategyTurnstileToken, setStrategyTurnstileToken] = useState(''); + const [strategyErrorMsg, setStrategyErrorMsg] = useState(''); + const [isStrategySubmitting, setIsStrategySubmitting] = useState(false); useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 1024); @@ -2388,22 +2395,25 @@ export default function App({ previewMode = false }) { backdropFilter: 'blur(10px)', zIndex: 100, display: 'flex', - alignItems: isMobile ? 'flex-start' : 'center', + alignItems: 'center', justifyContent: 'center', padding: isMobile ? '1rem' : '1.5rem', overflowY: 'auto', }}>
@@ -2412,6 +2422,8 @@ export default function App({ previewMode = false }) { onClick={() => { setIsCareersOpen(false); setShowCareersAcknowledgement(false); + setCareersTurnstileToken(''); + setCareersErrorMsg(''); }} style={{ position: 'absolute', @@ -2426,192 +2438,289 @@ export default function App({ previewMode = false }) { alignItems: 'center', justifyContent: 'center', transition: 'color 0.2s', + zIndex: 10, }} - onMouseEnter={e => e.currentTarget.style.color = '#ffaa00'} + onMouseEnter={e => e.currentTarget.style.color = '#38bdf8'} onMouseLeave={e => e.currentTarget.style.color = '#94a3b8'} > × - {!showCareersAcknowledgement ? ( -
{ - e.preventDefault(); - try { - const serviceId = import.meta.env.VITE_EMAILJS_SERVICE_ID || 'vishva_cavintest'; - const publicKey = import.meta.env.VITE_EMAILJS_PUBLIC_KEY || 'YOUR_EMAILJS_PUBLIC_KEY'; - const templateId = import.meta.env.VITE_EMAILJS_TEMPLATE_ID_CAREERS || 'YOUR_EMAILJS_TEMPLATE_ID_CAREERS'; - - if (publicKey === 'YOUR_EMAILJS_PUBLIC_KEY' || templateId === 'YOUR_EMAILJS_TEMPLATE_ID_CAREERS') { - console.warn('EmailJS Credentials not configured in .env. Please configure VITE_EMAILJS_PUBLIC_KEY and VITE_EMAILJS_TEMPLATE_ID_CAREERS'); - alert('EmailJS credentials are not configured in your .env file.'); - return; - } + {/* LEFT SIDE: "Join Our Team" Info */} +
+ {/* Blur asset overlay on left section */} + - const res = await fetch('https://api.emailjs.com/api/v1.0/email/send', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - service_id: serviceId, - template_id: templateId, - user_id: publicKey, - template_params: { - type: 'careers', - name: careersName, - email: careersEmail, - phone: careersPhone, - mobile: '', - designation: 'N/A', - dateTime: 'N/A', - interests: 'N/A', - resumeName: careersFile ? careersFile.name : 'None', - from_name: careersName, - reply_to: careersEmail, - message: `New Careers Application:\nName: ${careersName}\nEmail: ${careersEmail}\nPhone: ${careersPhone}\nResume File: ${careersFile ? careersFile.name : 'None'}` - } - }) - }); - - if (!res.ok) { - const errMsg = await res.text(); - console.error('EmailJS Error:', errMsg); - alert(`Failed to send email: ${errMsg}`); - return; - } - - setShowCareersAcknowledgement(true); - } catch (err) { - console.error('Error sending application:', err); - alert(`Error sending application: ${err.message}`); - } - }}> +

Join Our Team

-

- Submit your details and resume below. Our recruitment team will review your application. -

-
+
    + {[ + 'Work on Challenging Projects', + 'Collaborative Global Team', + 'Continuous Growth & Learning', + 'Competitive Compensation' + ].map((item, idx) => ( +
  • + + ✓ + + {item} +
    • + ))} +
+
+
+ + {/* RIGHT SIDE: Careers Form */} +
+ {!showCareersAcknowledgement ? ( + { + e.preventDefault(); + if (!careersName.trim() || !careersEmail.trim() || !careersPhone.trim()) { + setCareersErrorMsg('Please fill in Name, Email, and Phone fields.'); + return; + } + if (!careersFile) { + setCareersErrorMsg('Please upload your resume file.'); + return; + } + if (!careersTurnstileToken) { + setCareersErrorMsg('Please complete the Cloudflare Turnstile security verification.'); + return; + } + + setIsCareersSubmitting(true); + setCareersErrorMsg(''); + + try { + const serviceId = import.meta.env.VITE_EMAILJS_SERVICE_ID || 'vishva_cavintest'; + const publicKey = import.meta.env.VITE_EMAILJS_PUBLIC_KEY || 'YOUR_EMAILJS_PUBLIC_KEY'; + const templateId = import.meta.env.VITE_EMAILJS_TEMPLATE_ID_CAREERS || 'YOUR_EMAILJS_TEMPLATE_ID_CAREERS'; + + const res = await fetch('https://api.emailjs.com/api/v1.0/email/send', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + service_id: serviceId, + template_id: templateId, + user_id: publicKey, + template_params: { + type: 'careers', + name: careersName, + email: careersEmail, + phone: careersPhone, + mobile: '', + designation: 'N/A', + dateTime: 'N/A', + interests: 'N/A', + resumeName: careersFile ? careersFile.name : 'None', + from_name: careersName, + reply_to: careersEmail, + message: `New Careers Application:\nName: ${careersName}\nEmail: ${careersEmail}\nPhone: ${careersPhone}\nResume File: ${careersFile ? careersFile.name : 'None'}` + } + }) + }); + + if (!res.ok) { + const errMsg = await res.text(); + console.error('EmailJS Error:', errMsg); + setCareersErrorMsg(`Failed to send email: ${errMsg}`); + return; + } + + setShowCareersAcknowledgement(true); + } catch (err) { + console.error('Error sending application:', err); + setCareersErrorMsg(`Error sending application: ${err.message}`); + } finally { + setIsCareersSubmitting(false); + } + }} + style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }} + > + {careersErrorMsg && ( +
+ {careersErrorMsg} +
+ )} + {/* Name Input */} -
- +
setCareersName(e.target.value)} - placeholder="John Doe" + onChange={e => { + setCareersName(e.target.value); + if (careersErrorMsg) setCareersErrorMsg(''); + }} + placeholder="Name" style={{ - background: 'rgba(255, 255, 255, 0.03)', - border: '1px solid rgba(255, 255, 255, 0.08)', - borderRadius: '8px', - padding: '0.75rem 1rem', + width: '100%', + background: 'transparent', + border: 'none', + borderBottom: '1px solid rgba(255, 255, 255, 0.25)', color: '#ffffff', - fontSize: '0.9rem', + fontSize: '0.98rem', + padding: '0.6rem 0', outline: 'none', - transition: 'all 0.3s ease', - }} - onFocus={e => { - e.currentTarget.style.borderColor = '#ffaa00'; - e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)'; - }} - onBlur={e => { - e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; - e.currentTarget.style.boxShadow = 'none'; + transition: 'border-color 0.3s ease', }} + onFocus={e => e.currentTarget.style.borderBottomColor = '#38bdf8'} + onBlur={e => e.currentTarget.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'} />
{/* Email Input */} -
- +
setCareersEmail(e.target.value)} - placeholder="john@example.com" + onChange={e => { + setCareersEmail(e.target.value); + if (careersErrorMsg) setCareersErrorMsg(''); + }} + placeholder="Email" style={{ - background: 'rgba(255, 255, 255, 0.03)', - border: '1px solid rgba(255, 255, 255, 0.08)', - borderRadius: '8px', - padding: '0.75rem 1rem', + width: '100%', + background: 'transparent', + border: 'none', + borderBottom: '1px solid rgba(255, 255, 255, 0.25)', color: '#ffffff', - fontSize: '0.9rem', + fontSize: '0.98rem', + padding: '0.6rem 0', outline: 'none', - transition: 'all 0.3s ease', - }} - onFocus={e => { - e.currentTarget.style.borderColor = '#ffaa00'; - e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)'; - }} - onBlur={e => { - e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; - e.currentTarget.style.boxShadow = 'none'; + transition: 'border-color 0.3s ease', }} + onFocus={e => e.currentTarget.style.borderBottomColor = '#38bdf8'} + onBlur={e => e.currentTarget.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'} />
{/* Phone Input */} -
- +
setCareersPhone(e.target.value)} - placeholder="+91 00000 00000" + onChange={e => { + setCareersPhone(e.target.value); + if (careersErrorMsg) setCareersErrorMsg(''); + }} + placeholder="Phone" style={{ - background: 'rgba(255, 255, 255, 0.03)', - border: '1px solid rgba(255, 255, 255, 0.08)', - borderRadius: '8px', - padding: '0.75rem 1rem', + width: '100%', + background: 'transparent', + border: 'none', + borderBottom: '1px solid rgba(255, 255, 255, 0.25)', color: '#ffffff', - fontSize: '0.9rem', + fontSize: '0.98rem', + padding: '0.6rem 0', outline: 'none', - transition: 'all 0.3s ease', - }} - onFocus={e => { - e.currentTarget.style.borderColor = '#ffaa00'; - e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)'; - }} - onBlur={e => { - e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; - e.currentTarget.style.boxShadow = 'none'; + transition: 'border-color 0.3s ease', }} + onFocus={e => e.currentTarget.style.borderBottomColor = '#38bdf8'} + onBlur={e => e.currentTarget.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'} />
{/* File Attachment Input */} -
- +
{ - e.currentTarget.style.borderColor = '#ffaa00'; - e.currentTarget.style.background = 'rgba(255, 170, 0, 0.05)'; + e.currentTarget.style.borderColor = '#38bdf8'; + e.currentTarget.style.background = 'rgba(56, 189, 248, 0.05)'; }} onMouseLeave={e => { - e.currentTarget.style.borderColor = 'rgba(255, 170, 0, 0.3)'; - e.currentTarget.style.background = 'rgba(255, 170, 0, 0.02)'; + e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.15)'; + e.currentTarget.style.background = 'rgba(255, 255, 255, 0.01)'; }} > { const file = e.target.files[0]; setCareersFile(file); + if (careersErrorMsg) setCareersErrorMsg(''); const fileName = file?.name; const labelEl = document.getElementById('file-upload-label'); if (labelEl && fileName) { @@ -2636,106 +2746,116 @@ export default function App({ previewMode = false }) { } }} /> - + Click to upload your Resume (.pdf, .doc, .docx)
-
- {/* Submit Button */} - + + ) : ( + /* Acknowledgement Panel */ +
+
+ + + +
+

{ - e.currentTarget.style.background = 'rgba(255, 170, 0, 0.2)'; - e.currentTarget.style.boxShadow = '0 0 25px rgba(255, 170, 0, 0.5)'; - }} - onMouseLeave={e => { - e.currentTarget.style.background = 'rgba(255, 170, 0, 0.1)'; - e.currentTarget.style.boxShadow = '0 0 15px rgba(255, 170, 0, 0.3)'; - }} - > - Submit Application - - - ) : ( - /* Acknowledgement Panel */ -
-
- - - + letterSpacing: '-0.02em', + }}> + Application Received! +

+

+ Thank you for applying to Cavin Infotech. We have received your resume and details successfully. Our recruitment team will review your application and contact you if your qualifications match our current needs. +

+
-

- Application Received! -

-

- Thank you for applying to Cavin Infotech. We have received your resume and details successfully. Our recruitment team will review your application and contact you if your qualifications match our current needs. -

- -
- )} + )} +
)} @@ -2749,22 +2869,25 @@ export default function App({ previewMode = false }) { backdropFilter: 'blur(10px)', zIndex: 100, display: 'flex', - alignItems: isMobile ? 'flex-start' : 'center', + alignItems: 'center', justifyContent: 'center', padding: isMobile ? '1rem' : '1.5rem', overflowY: 'auto', }}>
@@ -2773,6 +2896,8 @@ export default function App({ previewMode = false }) { onClick={() => { setIsStrategyOpen(false); setShowStrategyAcknowledgement(false); + setStrategyTurnstileToken(''); + setStrategyErrorMsg(''); }} style={{ position: 'absolute', @@ -2787,243 +2912,342 @@ export default function App({ previewMode = false }) { alignItems: 'center', justifyContent: 'center', transition: 'color 0.2s', + zIndex: 10, }} - onMouseEnter={e => e.currentTarget.style.color = '#ffaa00'} + onMouseEnter={e => e.currentTarget.style.color = '#38bdf8'} onMouseLeave={e => e.currentTarget.style.color = '#94a3b8'} > × - {!showStrategyAcknowledgement ? ( -
{ - e.preventDefault(); - const selectedInterests = Object.keys(strategyInterests).filter(key => strategyInterests[key]).join(', '); - try { - const serviceId = import.meta.env.VITE_EMAILJS_SERVICE_ID || 'vishva_cavintest'; - const publicKey = import.meta.env.VITE_EMAILJS_PUBLIC_KEY || 'YOUR_EMAILJS_PUBLIC_KEY'; - const templateId = import.meta.env.VITE_EMAILJS_TEMPLATE_ID_STRATEGY || 'YOUR_EMAILJS_TEMPLATE_ID_STRATEGY'; - - if (publicKey === 'YOUR_EMAILJS_PUBLIC_KEY' || templateId === 'YOUR_EMAILJS_TEMPLATE_ID_STRATEGY') { - console.warn('EmailJS Credentials not configured in .env. Please configure VITE_EMAILJS_PUBLIC_KEY and VITE_EMAILJS_TEMPLATE_ID_STRATEGY'); - alert('EmailJS credentials are not configured in your .env file.'); - return; - } + {/* LEFT SIDE: "How We Can Help?" Info */} +
+ {/* Blur asset overlay on left section */} + - const res = await fetch('https://api.emailjs.com/api/v1.0/email/send', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - service_id: serviceId, - template_id: templateId, - user_id: publicKey, - template_params: { - type: 'strategy', - name: strategyName, - email: strategyEmail, - phone: strategyMobile, - mobile: strategyMobile, - designation: strategyDesignation, - dateTime: strategyDateTime, - interests: selectedInterests || 'None', - resumeName: 'None', - from_name: strategyName, - reply_to: strategyEmail, - message: `New Strategy Session Booking:\nName: ${strategyName}\nEmail: ${strategyEmail}\nMobile: ${strategyMobile}\nDesignation: ${strategyDesignation}\nPreferred Date & Time: ${strategyDateTime}\nAreas of Interest: ${selectedInterests || 'None'}` - } - }) - }); - - if (!res.ok) { - const errMsg = await res.text(); - console.error('EmailJS Error:', errMsg); - alert(`Failed to send email: ${errMsg}`); - return; - } - - setShowStrategyAcknowledgement(true); - } catch (err) { - console.error('Error scheduling strategy session:', err); - alert(`Error scheduling strategy session: ${err.message}`); - } - }}> +

- Book a Strategy Call + How We Can Help?

-

- Fill in the details below to schedule a session with our experts. -

- -
- {/* Name Input */} -
- - setStrategyName(e.target.value)} - placeholder="John Doe" + {[ + 'Tailored Strategy Session', + 'Expert Guidance', + 'Technical Architecture Review', + 'Value-Added Partnership' + ].map((item, idx) => ( +
  • { - e.currentTarget.style.borderColor = '#ffaa00'; - e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)'; - }} - onBlur={e => { - e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; - e.currentTarget.style.boxShadow = 'none'; - }} - /> + > + + ✓ + + {item} +
    • + ))} + +
    +
    + + {/* RIGHT SIDE: Strategy call Form */} +
    + {!showStrategyAcknowledgement ? ( + { + e.preventDefault(); + if (!strategyName.trim() || !strategyEmail.trim() || !strategyMobile.trim() || !strategyDesignation.trim() || !strategyDateTime.trim()) { + setStrategyErrorMsg('Please fill in all required fields.'); + return; + } + if (!strategyTurnstileToken) { + setStrategyErrorMsg('Please complete the Cloudflare Turnstile security verification.'); + return; + } + + setIsStrategySubmitting(true); + setStrategyErrorMsg(''); + + const selectedInterests = Object.keys(strategyInterests).filter(key => strategyInterests[key]).join(', '); + + try { + const serviceId = import.meta.env.VITE_EMAILJS_SERVICE_ID || 'vishva_cavintest'; + const publicKey = import.meta.env.VITE_EMAILJS_PUBLIC_KEY || 'YOUR_EMAILJS_PUBLIC_KEY'; + const templateId = import.meta.env.VITE_EMAILJS_TEMPLATE_ID_STRATEGY || 'YOUR_EMAILJS_TEMPLATE_ID_STRATEGY'; + + const res = await fetch('https://api.emailjs.com/api/v1.0/email/send', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + service_id: serviceId, + template_id: templateId, + user_id: publicKey, + template_params: { + type: 'strategy', + name: strategyName, + email: strategyEmail, + phone: strategyMobile, + mobile: strategyMobile, + designation: strategyDesignation, + dateTime: strategyDateTime, + interests: selectedInterests || 'None', + resumeName: 'None', + from_name: strategyName, + reply_to: strategyEmail, + message: `New Strategy Session Booking:\nName: ${strategyName}\nEmail: ${strategyEmail}\nMobile: ${strategyMobile}\nDesignation: ${strategyDesignation}\nPreferred Date & Time: ${strategyDateTime}\nAreas of Interest: ${selectedInterests || 'None'}` + } + }) + }); + + if (!res.ok) { + const errMsg = await res.text(); + console.error('EmailJS Error:', errMsg); + setStrategyErrorMsg(`Failed to send email: ${errMsg}`); + return; + } + + setShowStrategyAcknowledgement(true); + } catch (err) { + console.error('Error scheduling strategy session:', err); + setStrategyErrorMsg(`Error scheduling strategy session: ${err.message}`); + } finally { + setIsStrategySubmitting(false); + } + }} + style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }} + > + {strategyErrorMsg && ( +
    + {strategyErrorMsg} +
    + )} + + {/* Name & Email Group */} +
    +
    + { + setStrategyName(e.target.value); + if (strategyErrorMsg) setStrategyErrorMsg(''); + }} + placeholder="Name" + style={{ + width: '100%', + background: 'transparent', + border: 'none', + borderBottom: '1px solid rgba(255, 255, 255, 0.25)', + color: '#ffffff', + fontSize: '0.98rem', + padding: '0.5rem 0', + outline: 'none', + transition: 'border-color 0.3s ease', + }} + onFocus={e => e.currentTarget.style.borderBottomColor = '#38bdf8'} + onBlur={e => e.currentTarget.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'} + /> +
    + +
    + { + setStrategyEmail(e.target.value); + if (strategyErrorMsg) setStrategyErrorMsg(''); + }} + placeholder="Email" + style={{ + width: '100%', + background: 'transparent', + border: 'none', + borderBottom: '1px solid rgba(255, 255, 255, 0.25)', + color: '#ffffff', + fontSize: '0.98rem', + padding: '0.5rem 0', + outline: 'none', + transition: 'border-color 0.3s ease', + }} + onFocus={e => e.currentTarget.style.borderBottomColor = '#38bdf8'} + onBlur={e => e.currentTarget.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'} + /> +
    - {/* Email Input */} -
    - - setStrategyEmail(e.target.value)} - placeholder="john@example.com" - style={{ - background: 'rgba(255, 255, 255, 0.03)', - border: '1px solid rgba(255, 255, 255, 0.08)', - borderRadius: '8px', - padding: '0.7rem 0.9rem', - color: '#ffffff', - fontSize: '0.88rem', - outline: 'none', - transition: 'all 0.3s ease', - }} - onFocus={e => { - e.currentTarget.style.borderColor = '#ffaa00'; - e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)'; - }} - onBlur={e => { - e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; - e.currentTarget.style.boxShadow = 'none'; - }} - /> + {/* Phone & Designation Group */} +
    +
    + { + setStrategyMobile(e.target.value); + if (strategyErrorMsg) setStrategyErrorMsg(''); + }} + placeholder="Mobile" + style={{ + width: '100%', + background: 'transparent', + border: 'none', + borderBottom: '1px solid rgba(255, 255, 255, 0.25)', + color: '#ffffff', + fontSize: '0.98rem', + padding: '0.5rem 0', + outline: 'none', + transition: 'border-color 0.3s ease', + }} + onFocus={e => e.currentTarget.style.borderBottomColor = '#38bdf8'} + onBlur={e => e.currentTarget.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'} + /> +
    + +
    + { + setStrategyDesignation(e.target.value); + if (strategyErrorMsg) setStrategyErrorMsg(''); + }} + placeholder="Designation" + style={{ + width: '100%', + background: 'transparent', + border: 'none', + borderBottom: '1px solid rgba(255, 255, 255, 0.25)', + color: '#ffffff', + fontSize: '0.98rem', + padding: '0.5rem 0', + outline: 'none', + transition: 'border-color 0.3s ease', + }} + onFocus={e => e.currentTarget.style.borderBottomColor = '#38bdf8'} + onBlur={e => e.currentTarget.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'} + /> +
    - {/* Mobile Input */} -
    - - setStrategyMobile(e.target.value)} - placeholder="+91 00000 00000" - style={{ - background: 'rgba(255, 255, 255, 0.03)', - border: '1px solid rgba(255, 255, 255, 0.08)', - borderRadius: '8px', - padding: '0.7rem 0.9rem', - color: '#ffffff', - fontSize: '0.88rem', - outline: 'none', - transition: 'all 0.3s ease', - }} - onFocus={e => { - e.currentTarget.style.borderColor = '#ffaa00'; - e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)'; - }} - onBlur={e => { - e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; - e.currentTarget.style.boxShadow = 'none'; - }} - /> -
    - - {/* Designation Input */} -
    - - setStrategyDesignation(e.target.value)} - placeholder="e.g. Chief Technology Officer" - style={{ - background: 'rgba(255, 255, 255, 0.03)', - border: '1px solid rgba(255, 255, 255, 0.08)', - borderRadius: '8px', - padding: '0.7rem 0.9rem', - color: '#ffffff', - fontSize: '0.88rem', - outline: 'none', - transition: 'all 0.3s ease', - }} - onFocus={e => { - e.currentTarget.style.borderColor = '#ffaa00'; - e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)'; - }} - onBlur={e => { - e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; - e.currentTarget.style.boxShadow = 'none'; - }} - /> -
    - - {/* Preferred Date & Time Input */} -
    - + {/* Date & Time Picker */} +
    setStrategyDateTime(e.target.value)} + onChange={e => { + setStrategyDateTime(e.target.value); + if (strategyErrorMsg) setStrategyErrorMsg(''); + }} style={{ - background: 'rgba(255, 255, 255, 0.03)', - border: '1px solid rgba(255, 255, 255, 0.08)', - borderRadius: '8px', - padding: '0.7rem 0.9rem', + width: '100%', + background: 'transparent', + border: 'none', + borderBottom: '1px solid rgba(255, 255, 255, 0.25)', color: '#ffffff', - fontSize: '0.88rem', + fontSize: '0.98rem', + padding: '0.5rem 0', outline: 'none', - transition: 'all 0.3s ease', - }} - onFocus={e => { - e.currentTarget.style.borderColor = '#ffaa00'; - e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)'; - }} - onBlur={e => { - e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; - e.currentTarget.style.boxShadow = 'none'; + transition: 'border-color 0.3s ease', }} + onFocus={e => e.currentTarget.style.borderBottomColor = '#38bdf8'} + onBlur={e => e.currentTarget.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'} />
    {/* Areas of Interest Checkboxes */} -
    +
    {[ 'AI & Analytics', @@ -3047,7 +3271,7 @@ export default function App({ previewMode = false }) { checked={strategyInterests[interest]} onChange={e => setStrategyInterests(prev => ({ ...prev, [interest]: e.target.checked }))} style={{ - accentColor: '#ffaa00', + accentColor: '#38bdf8', cursor: 'pointer', width: '16px', height: '16px', @@ -3058,101 +3282,120 @@ export default function App({ previewMode = false }) { ))}
    -
    - {/* Submit Button */} - + + ) : ( + /* Acknowledgement Panel */ +
    +
    + + + +
    +

    { - e.currentTarget.style.background = 'rgba(255, 170, 0, 0.2)'; - e.currentTarget.style.boxShadow = '0 0 25px rgba(255, 170, 0, 0.5)'; - }} - onMouseLeave={e => { - e.currentTarget.style.background = 'rgba(255, 170, 0, 0.1)'; - e.currentTarget.style.boxShadow = '0 0 15px rgba(255, 170, 0, 0.3)'; - }} - > - Book Session - - - ) : ( - /* Acknowledgement Panel */ -
    -
    - - - + letterSpacing: '-0.02em', + }}> + Strategy Session Scheduled! +

    +

    + Thank you for booking a Strategy Call. We have successfully received your information and areas of interest. A technology consultant from Cavin Infotech will reach out to you within 24 hours with an invitation link and slot confirmation. +

    +
    -

    - Strategy Session Scheduled! -

    -

    - Thank you for booking a Strategy Call. We have successfully received your information and areas of interest. A technology consultant from Cavin Infotech will reach out to you within 24 hours with an invitation link and slot confirmation. -

    - -
    - )} + )} +
    )}