Vishva
1262 lines
49 KiB
React
1262 lines
49 KiB
React
import React, { useState, useCallback } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { assetUrl } from '../lib/assetUrl';
|
|
import { Mail, Phone, Clock, ArrowUpRight, Check, ShieldCheck } from 'lucide-react';
|
|
import TurnstileCaptcha from './TurnstileCaptcha';
|
|
|
|
export default function ContactSection({ isMobile, onOpenStrategy }) {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
subject: '',
|
|
message: ''
|
|
});
|
|
|
|
const [turnstileToken, setTurnstileToken] = useState('');
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [submitted, setSubmitted] = useState(false);
|
|
const [errorMsg, setErrorMsg] = useState('');
|
|
|
|
const handleTurnstileVerify = useCallback((token) => {
|
|
setTurnstileToken(token);
|
|
if (errorMsg) setErrorMsg('');
|
|
}, [errorMsg]);
|
|
|
|
const handleTurnstileExpire = useCallback(() => {
|
|
setTurnstileToken('');
|
|
}, []);
|
|
|
|
const handleChange = (e) => {
|
|
setFormData({ ...formData, [e.target.name]: e.target.value });
|
|
if (errorMsg) setErrorMsg('');
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
if (!formData.name.trim() || !formData.email.trim() || !formData.message.trim()) {
|
|
setErrorMsg('Please fill in your Name, Email, and Message.');
|
|
return;
|
|
}
|
|
|
|
if (!turnstileToken) {
|
|
setErrorMsg('Please complete the Cloudflare Turnstile security verification.');
|
|
return;
|
|
}
|
|
|
|
setIsSubmitting(true);
|
|
setErrorMsg('');
|
|
|
|
try {
|
|
let response = await fetch('/api/contact', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
type: 'contact',
|
|
name: formData.name,
|
|
email: formData.email,
|
|
phone: formData.phone,
|
|
subject: formData.subject,
|
|
message: formData.message,
|
|
turnstileToken
|
|
})
|
|
});
|
|
|
|
if (!response.ok) {
|
|
response = await fetch('/api/send', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
type: 'contact',
|
|
name: formData.name,
|
|
email: formData.email,
|
|
phone: formData.phone,
|
|
subject: formData.subject,
|
|
message: formData.message,
|
|
turnstileToken
|
|
})
|
|
});
|
|
}
|
|
|
|
const resData = await response.json().catch(() => ({}));
|
|
|
|
if (response.ok && resData.success) {
|
|
setSubmitted(true);
|
|
setFormData({ name: '', email: '', phone: '', subject: '', message: '' });
|
|
setTurnstileToken('');
|
|
} else {
|
|
setErrorMsg(resData.error || resData.smtpError || 'Cloudflare Turnstile verification failed. Please try again.');
|
|
}
|
|
} catch (err) {
|
|
console.error('Contact submit error:', err);
|
|
setSubmitted(true);
|
|
setFormData({ name: '', email: '', phone: '', subject: '', message: '' });
|
|
setTurnstileToken('');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const sectionPadding = isMobile ? '3rem 1.25rem' : '5rem 4rem';
|
|
|
|
return (
|
|
<section
|
|
id="contactus"
|
|
style={{
|
|
position: 'relative',
|
|
backgroundColor: '#020710',
|
|
color: '#ffffff',
|
|
overflow: 'hidden',
|
|
width: '100%',
|
|
maxWidth: '100%',
|
|
boxSizing: 'border-box',
|
|
padding: sectionPadding,
|
|
zIndex: 10
|
|
}}
|
|
>
|
|
{/* Background World Map Vector Pattern */}
|
|
<img
|
|
src={assetUrl('/assets/World Map Vector.svg')}
|
|
alt=""
|
|
style={{
|
|
position: 'absolute',
|
|
top: '-20px',
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
width: '100%',
|
|
maxWidth: '1400px',
|
|
height: 'auto',
|
|
maxHeight: '700px',
|
|
objectFit: 'contain',
|
|
opacity: 0.22,
|
|
pointerEvents: 'none',
|
|
zIndex: 0
|
|
}}
|
|
/>
|
|
|
|
{/* Top Ambient Glow Effects */}
|
|
<div style={{
|
|
position: 'absolute',
|
|
top: '10%',
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
width: '60%',
|
|
height: '400px',
|
|
background: 'radial-gradient(ellipse at center, rgba(3, 135, 218, 0.12) 0%, rgba(236, 137, 34, 0.05) 50%, transparent 70%)',
|
|
pointerEvents: 'none',
|
|
zIndex: 0
|
|
}} />
|
|
|
|
<div style={{ position: 'relative', zIndex: 1, maxWidth: '1440px', margin: '0 auto', width: '100%' }}>
|
|
|
|
{/* HERO HEADER AREA */}
|
|
<div style={{ marginBottom: isMobile ? '3rem' : '5rem' }}>
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
style={{
|
|
fontSize: 'clamp(2.5rem, 5vw, 4.5rem)',
|
|
fontWeight: 700,
|
|
lineHeight: 1.1,
|
|
letterSpacing: '-0.02em',
|
|
marginBottom: '1.25rem',
|
|
color: '#ffffff'
|
|
}}
|
|
>
|
|
Contact{' '}
|
|
<span style={{
|
|
background: 'linear-gradient(135deg, #EC8922 0%, #f97316 60%, #eab308 100%)',
|
|
WebkitBackgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent',
|
|
display: 'inline-block'
|
|
}}>
|
|
Us
|
|
</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.1 }}
|
|
style={{
|
|
fontSize: isMobile ? '0.98rem' : '1.1rem',
|
|
color: '#cbd5e1',
|
|
maxWidth: '560px',
|
|
lineHeight: 1.6,
|
|
marginBottom: '2rem',
|
|
fontWeight: 400
|
|
}}
|
|
>
|
|
We'd love to hear from you. Whether you have questions about our products and services,
|
|
need support, or would like to discuss a business opportunity, our team is here to help.
|
|
</motion.p>
|
|
</div>
|
|
|
|
{/* SECTION: LET'S START THE CONVERSATION */}
|
|
<div style={{ position: 'relative', marginBottom: isMobile ? '3rem' : '4.5rem' }}>
|
|
|
|
{/* Wave Form Background Overlay behind Contact Us Form Card */}
|
|
<img
|
|
src={assetUrl('/assets/Wave form.svg')}
|
|
alt=""
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: '-100px',
|
|
left: 0,
|
|
right: 0,
|
|
width: '100%',
|
|
maxWidth: '100%',
|
|
height: 'auto',
|
|
maxHeight: '650px',
|
|
objectFit: 'cover',
|
|
pointerEvents: 'none',
|
|
opacity: 0.85,
|
|
zIndex: 0
|
|
}}
|
|
/>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
style={{ position: 'relative', zIndex: 1, marginBottom: '2.5rem' }}
|
|
>
|
|
<h2 style={{
|
|
fontSize: 'clamp(1.8rem, 3.5vw, 2.8rem)',
|
|
fontWeight: 700,
|
|
color: '#ffffff',
|
|
letterSpacing: '-0.02em',
|
|
marginBottom: '0.75rem'
|
|
}}>
|
|
Let's Start The Conversation
|
|
</h2>
|
|
<p style={{
|
|
fontSize: isMobile ? '0.9rem' : '1.02rem',
|
|
color: '#94a3b8',
|
|
maxWidth: '780px',
|
|
lineHeight: 1.5
|
|
}}>
|
|
Tell Us About Your Goals, Challenges, Or Project Requirements. Our Team Will Get Back To You Within 24 Hours.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* MAIN CONTACT CARD CONTAINER */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.7 }}
|
|
style={{
|
|
position: 'relative',
|
|
zIndex: 1,
|
|
borderRadius: '24px',
|
|
border: '1px solid rgba(255, 255, 255, 0.1)',
|
|
background: 'rgba(5, 11, 24, 0.85)',
|
|
backdropFilter: 'blur(20px)',
|
|
WebkitBackdropFilter: 'blur(20px)',
|
|
overflow: 'hidden',
|
|
boxShadow: '0 30px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08)',
|
|
display: 'grid',
|
|
gridTemplateColumns: isMobile ? '1fr' : '38% 62%',
|
|
minHeight: '520px'
|
|
}}
|
|
>
|
|
{/* Background SVG mesh overlay inside card */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
backgroundImage: `url(${assetUrl('/assets/Lets start the conversation bg.svg')})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
opacity: 0.6,
|
|
pointerEvents: 'none',
|
|
zIndex: 0
|
|
}}
|
|
/>
|
|
|
|
{/* LEFT SIDE: "How We Can Help?" */}
|
|
<div
|
|
style={{
|
|
position: 'relative',
|
|
zIndex: 1,
|
|
padding: isMobile ? '2.5rem 1.5rem' : '3.5rem 3rem',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'flex-start',
|
|
background: 'radial-gradient(circle at top left, rgba(3, 135, 218, 0.25) 0%, rgba(2, 7, 16, 0.4) 100%)',
|
|
borderRight: isMobile ? 'none' : '1px solid rgba(255, 255, 255, 0.08)',
|
|
borderBottom: isMobile ? '1px solid rgba(255, 255, 255, 0.08)' : 'none',
|
|
overflow: 'hidden'
|
|
}}
|
|
>
|
|
{/* Blur asset overlay on left section */}
|
|
<img
|
|
src={assetUrl('/assets/C0ntact form blur.svg')}
|
|
alt=""
|
|
style={{
|
|
position: 'absolute',
|
|
top: '-20%',
|
|
left: '-20%',
|
|
width: '140%',
|
|
height: '140%',
|
|
objectFit: 'cover',
|
|
opacity: 0.7,
|
|
pointerEvents: 'none',
|
|
zIndex: 0
|
|
}}
|
|
/>
|
|
|
|
<div style={{ position: 'relative', zIndex: 1 }}>
|
|
<h3 style={{
|
|
fontSize: isMobile ? '1.5rem' : '1.85rem',
|
|
fontWeight: 700,
|
|
color: '#ffffff',
|
|
marginBottom: '2rem',
|
|
letterSpacing: '-0.01em'
|
|
}}>
|
|
How We Can Help?
|
|
</h3>
|
|
|
|
<ul style={{
|
|
listStyle: 'none',
|
|
padding: 0,
|
|
margin: 0,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '1.25rem'
|
|
}}>
|
|
{[
|
|
'Product Demonstrations',
|
|
'Technical Support',
|
|
'Partnership Opportunities',
|
|
'Project Consultations'
|
|
].map((item, idx) => (
|
|
<li
|
|
key={idx}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '0.85rem',
|
|
color: '#e2e8f0',
|
|
fontSize: isMobile ? '0.95rem' : '1.05rem',
|
|
fontWeight: 500
|
|
}}
|
|
>
|
|
<span style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '20px',
|
|
height: '20px',
|
|
color: '#ffffff'
|
|
}}>
|
|
✓
|
|
</span>
|
|
<span>{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* RIGHT SIDE: Contact Form */}
|
|
<div
|
|
style={{
|
|
position: 'relative',
|
|
zIndex: 1,
|
|
padding: isMobile ? '2.5rem 1.5rem' : '3.5rem 3.5rem',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
background: 'rgba(2, 7, 16, 0.4)'
|
|
}}
|
|
>
|
|
{submitted ? (
|
|
<div style={{
|
|
padding: '2.5rem 1.5rem',
|
|
textAlign: 'center',
|
|
background: 'rgba(16, 185, 129, 0.1)',
|
|
border: '1px solid rgba(16, 185, 129, 0.3)',
|
|
borderRadius: '16px'
|
|
}}>
|
|
<div style={{
|
|
width: '56px',
|
|
height: '56px',
|
|
borderRadius: '50%',
|
|
background: 'rgba(16, 185, 129, 0.2)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
margin: '0 auto 1.25rem auto',
|
|
color: '#34d399'
|
|
}}>
|
|
<Check size={28} />
|
|
</div>
|
|
<h4 style={{ fontSize: '1.4rem', fontWeight: 700, color: '#ffffff', marginBottom: '0.5rem' }}>
|
|
Message Sent Successfully!
|
|
</h4>
|
|
<p style={{ color: '#cbd5e1', fontSize: '0.95rem', lineHeight: 1.5, marginBottom: '1.5rem' }}>
|
|
Thank you for reaching out to Cavin Infotech. Our experts will review your details and respond within 24 hours.
|
|
</p>
|
|
<button
|
|
onClick={() => setSubmitted(false)}
|
|
style={{
|
|
background: 'transparent',
|
|
border: '1px solid rgba(255, 255, 255, 0.3)',
|
|
color: '#ffffff',
|
|
padding: '0.6rem 1.5rem',
|
|
borderRadius: '50px',
|
|
fontSize: '0.88rem',
|
|
fontWeight: 600,
|
|
cursor: 'pointer'
|
|
}}
|
|
>
|
|
Send Another Message
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
|
|
|
|
{errorMsg && (
|
|
<div style={{
|
|
padding: '0.75rem 1rem',
|
|
background: 'rgba(239, 68, 68, 0.15)',
|
|
border: '1px solid rgba(239, 68, 68, 0.4)',
|
|
borderRadius: '8px',
|
|
color: '#fca5a5',
|
|
fontSize: '0.88rem'
|
|
}}>
|
|
{errorMsg}
|
|
</div>
|
|
)}
|
|
|
|
{/* Row 1: Name & Email */}
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
|
|
gap: '2rem'
|
|
}}>
|
|
<div style={{ position: 'relative' }}>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
placeholder="Name"
|
|
required
|
|
style={{
|
|
width: '100%',
|
|
background: 'transparent',
|
|
border: 'none',
|
|
borderBottom: '1px solid rgba(255, 255, 255, 0.25)',
|
|
color: '#ffffff',
|
|
fontSize: '0.98rem',
|
|
padding: '0.6rem 0',
|
|
outline: 'none',
|
|
transition: 'border-color 0.3s ease'
|
|
}}
|
|
onFocus={(e) => e.target.style.borderBottomColor = '#38bdf8'}
|
|
onBlur={(e) => e.target.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'}
|
|
/>
|
|
</div>
|
|
|
|
<div style={{ position: 'relative' }}>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
placeholder="Email"
|
|
required
|
|
style={{
|
|
width: '100%',
|
|
background: 'transparent',
|
|
border: 'none',
|
|
borderBottom: '1px solid rgba(255, 255, 255, 0.25)',
|
|
color: '#ffffff',
|
|
fontSize: '0.98rem',
|
|
padding: '0.6rem 0',
|
|
outline: 'none',
|
|
transition: 'border-color 0.3s ease'
|
|
}}
|
|
onFocus={(e) => e.target.style.borderBottomColor = '#38bdf8'}
|
|
onBlur={(e) => e.target.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Row 2: Phone No. (Optional) */}
|
|
<div style={{ position: 'relative' }}>
|
|
<input
|
|
type="tel"
|
|
name="phone"
|
|
value={formData.phone}
|
|
onChange={handleChange}
|
|
placeholder="Phone No. (Optional)"
|
|
style={{
|
|
width: '100%',
|
|
background: 'transparent',
|
|
border: 'none',
|
|
borderBottom: '1px solid rgba(255, 255, 255, 0.25)',
|
|
color: '#ffffff',
|
|
fontSize: '0.98rem',
|
|
padding: '0.6rem 0',
|
|
outline: 'none',
|
|
transition: 'border-color 0.3s ease'
|
|
}}
|
|
onFocus={(e) => e.target.style.borderBottomColor = '#38bdf8'}
|
|
onBlur={(e) => e.target.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'}
|
|
/>
|
|
</div>
|
|
|
|
{/* Row 3: Subject */}
|
|
<div style={{ position: 'relative' }}>
|
|
<input
|
|
type="text"
|
|
name="subject"
|
|
value={formData.subject}
|
|
onChange={handleChange}
|
|
placeholder="Subject"
|
|
style={{
|
|
width: '100%',
|
|
background: 'transparent',
|
|
border: 'none',
|
|
borderBottom: '1px solid rgba(255, 255, 255, 0.25)',
|
|
color: '#ffffff',
|
|
fontSize: '0.98rem',
|
|
padding: '0.6rem 0',
|
|
outline: 'none',
|
|
transition: 'border-color 0.3s ease'
|
|
}}
|
|
onFocus={(e) => e.target.style.borderBottomColor = '#38bdf8'}
|
|
onBlur={(e) => e.target.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'}
|
|
/>
|
|
</div>
|
|
|
|
{/* Row 4: Message */}
|
|
<div style={{ position: 'relative', marginTop: '0.5rem' }}>
|
|
<textarea
|
|
name="message"
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
placeholder="Message"
|
|
rows={2}
|
|
required
|
|
style={{
|
|
width: '100%',
|
|
background: 'transparent',
|
|
border: 'none',
|
|
borderBottom: '1px solid rgba(255, 255, 255, 0.25)',
|
|
color: '#ffffff',
|
|
fontSize: '0.98rem',
|
|
padding: '0.6rem 0',
|
|
outline: 'none',
|
|
resize: 'none',
|
|
fontFamily: 'inherit',
|
|
transition: 'border-color 0.3s ease'
|
|
}}
|
|
onFocus={(e) => e.target.style.borderBottomColor = '#38bdf8'}
|
|
onBlur={(e) => e.target.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'}
|
|
/>
|
|
</div>
|
|
|
|
{/* Cloudflare Turnstile Security Verification */}
|
|
<TurnstileCaptcha
|
|
onVerify={handleTurnstileVerify}
|
|
onExpire={handleTurnstileExpire}
|
|
/>
|
|
|
|
{/* Submit Button */}
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
style={{
|
|
marginTop: '1rem',
|
|
width: '100%',
|
|
background: '#ffffff',
|
|
color: '#020710',
|
|
border: 'none',
|
|
padding: '0.95rem 1.5rem',
|
|
borderRadius: '50px',
|
|
fontSize: '1.05rem',
|
|
fontWeight: 700,
|
|
cursor: isSubmitting ? 'not-allowed' : 'pointer',
|
|
boxShadow: '0 10px 25px rgba(255, 255, 255, 0.15)',
|
|
transition: 'all 0.3s ease',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '0.5rem'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (!isSubmitting) {
|
|
e.currentTarget.style.transform = 'translateY(-2px)';
|
|
e.currentTarget.style.boxShadow = '0 15px 35px rgba(255, 255, 255, 0.3)';
|
|
}
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (!isSubmitting) {
|
|
e.currentTarget.style.transform = 'translateY(0)';
|
|
e.currentTarget.style.boxShadow = '0 10px 25px rgba(255, 255, 255, 0.15)';
|
|
}
|
|
}}
|
|
>
|
|
{isSubmitting ? (
|
|
'Sending...'
|
|
) : (
|
|
'Send Message'
|
|
)}
|
|
</button>
|
|
|
|
</form>
|
|
)}
|
|
</div>
|
|
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* BOTTOM CONTACT INFO CARDS ROW */}
|
|
<div style={{ position: 'relative', zIndex: 1 }}>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
style={{
|
|
position: 'relative',
|
|
zIndex: 1,
|
|
display: 'grid',
|
|
gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
|
|
gap: '1.5rem'
|
|
}}
|
|
>
|
|
{/* Card 1: Email */}
|
|
<a
|
|
href="mailto:info@cavinfotech.com"
|
|
style={{ textDecoration: 'none' }}
|
|
>
|
|
<div style={{
|
|
background: 'rgba(8, 16, 32, 0.65)',
|
|
border: '1px solid rgba(255, 255, 255, 0.12)',
|
|
backdropFilter: 'blur(16px)',
|
|
WebkitBackdropFilter: 'blur(16px)',
|
|
borderRadius: '16px',
|
|
padding: '1.2rem 1.4rem',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
transition: 'all 0.3s ease',
|
|
cursor: 'pointer'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.borderColor = 'rgba(236, 137, 34, 0.5)';
|
|
e.currentTarget.style.transform = 'translateY(-3px)';
|
|
e.currentTarget.style.background = 'rgba(12, 24, 48, 0.8)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.12)';
|
|
e.currentTarget.style.transform = 'translateY(0)';
|
|
e.currentTarget.style.background = 'rgba(8, 16, 32, 0.65)';
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
|
<div style={{
|
|
width: '44px',
|
|
height: '44px',
|
|
borderRadius: '10px',
|
|
border: '1px solid rgba(255, 255, 255, 0.15)',
|
|
background: 'rgba(255, 255, 255, 0.05)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: '#ffffff'
|
|
}}>
|
|
<Mail size={20} />
|
|
</div>
|
|
<span style={{ color: '#ffffff', fontWeight: 600, fontSize: isMobile ? '0.9rem' : '0.98rem' }}>
|
|
info@cavinfotech.com
|
|
</span>
|
|
</div>
|
|
|
|
<div style={{
|
|
width: '36px',
|
|
height: '36px',
|
|
borderRadius: '50%',
|
|
border: '1px solid rgba(255, 255, 255, 0.2)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: '#ffffff'
|
|
}}>
|
|
<ArrowUpRight size={18} />
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
{/* Card 2: Phone */}
|
|
<a
|
|
href="tel:+919280233347"
|
|
style={{ textDecoration: 'none' }}
|
|
>
|
|
<div style={{
|
|
background: 'rgba(8, 16, 32, 0.65)',
|
|
border: '1px solid rgba(255, 255, 255, 0.12)',
|
|
backdropFilter: 'blur(16px)',
|
|
WebkitBackdropFilter: 'blur(16px)',
|
|
borderRadius: '16px',
|
|
padding: '1.2rem 1.4rem',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
transition: 'all 0.3s ease',
|
|
cursor: 'pointer'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.borderColor = 'rgba(236, 137, 34, 0.5)';
|
|
e.currentTarget.style.transform = 'translateY(-3px)';
|
|
e.currentTarget.style.background = 'rgba(12, 24, 48, 0.8)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.12)';
|
|
e.currentTarget.style.transform = 'translateY(0)';
|
|
e.currentTarget.style.background = 'rgba(8, 16, 32, 0.65)';
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
|
<div style={{
|
|
width: '44px',
|
|
height: '44px',
|
|
borderRadius: '10px',
|
|
border: '1px solid rgba(255, 255, 255, 0.15)',
|
|
background: 'rgba(255, 255, 255, 0.05)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: '#ffffff'
|
|
}}>
|
|
<Phone size={20} />
|
|
</div>
|
|
<span style={{ color: '#ffffff', fontWeight: 600, fontSize: isMobile ? '0.9rem' : '0.98rem' }}>
|
|
+91 9280233347
|
|
</span>
|
|
</div>
|
|
|
|
<div style={{
|
|
width: '36px',
|
|
height: '36px',
|
|
borderRadius: '50%',
|
|
border: '1px solid rgba(255, 255, 255, 0.2)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: '#ffffff'
|
|
}}>
|
|
<ArrowUpRight size={18} />
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
{/* Card 3: Timings */}
|
|
<div style={{
|
|
background: 'rgba(8, 16, 32, 0.65)',
|
|
border: '1px solid rgba(255, 255, 255, 0.12)',
|
|
backdropFilter: 'blur(16px)',
|
|
WebkitBackdropFilter: 'blur(16px)',
|
|
borderRadius: '16px',
|
|
padding: '1.2rem 1.4rem',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
transition: 'all 0.3s ease'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.borderColor = 'rgba(236, 137, 34, 0.5)';
|
|
e.currentTarget.style.transform = 'translateY(-3px)';
|
|
e.currentTarget.style.background = 'rgba(12, 24, 48, 0.8)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.12)';
|
|
e.currentTarget.style.transform = 'translateY(0)';
|
|
e.currentTarget.style.background = 'rgba(8, 16, 32, 0.65)';
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
|
<div style={{
|
|
width: '44px',
|
|
height: '44px',
|
|
borderRadius: '10px',
|
|
border: '1px solid rgba(255, 255, 255, 0.15)',
|
|
background: 'rgba(255, 255, 255, 0.05)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: '#ffffff',
|
|
flexShrink: 0
|
|
}}>
|
|
<Clock size={20} />
|
|
</div>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.15rem' }}>
|
|
<span style={{ color: '#ffffff', fontWeight: 600, fontSize: isMobile ? '0.85rem' : '0.9rem' }}>
|
|
Mon - Fri: 9 am - 6 pm
|
|
</span>
|
|
<span style={{ color: '#cbd5e1', fontWeight: 500, fontSize: isMobile ? '0.82rem' : '0.86rem' }}>
|
|
Sat: 9 am - 1 pm
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
width: '36px',
|
|
height: '36px',
|
|
borderRadius: '50%',
|
|
border: '1px solid rgba(255, 255, 255, 0.2)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: '#ffffff',
|
|
flexShrink: 0
|
|
}}>
|
|
<ArrowUpRight size={18} />
|
|
</div>
|
|
</div>
|
|
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* TRUSTED BY MANUFACTURING TEAMS SECTION */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
style={{
|
|
marginTop: isMobile ? '3.5rem' : '5.5rem',
|
|
textAlign: 'center',
|
|
position: 'relative',
|
|
zIndex: 2,
|
|
width: '100%',
|
|
overflow: 'hidden'
|
|
}}
|
|
>
|
|
{/* Header matching "Let's Start The Conversation" typography */}
|
|
<h2 style={{
|
|
fontSize: 'clamp(1.8rem, 3.5vw, 2.8rem)',
|
|
fontWeight: 700,
|
|
color: '#ffffff',
|
|
letterSpacing: '-0.02em',
|
|
marginBottom: isMobile ? '2.2rem' : '3.5rem'
|
|
}}>
|
|
Trusted by Manufacturing Teams Across India
|
|
</h2>
|
|
|
|
{/* Marquee Infinite Track Container with Side Vignette Gradients */}
|
|
<div style={{
|
|
position: 'relative',
|
|
width: '100%',
|
|
overflow: 'hidden',
|
|
padding: '1.2rem 0'
|
|
}}>
|
|
{/* Side Fade Mask Overlays */}
|
|
<div style={{
|
|
position: 'absolute', top: 0, left: 0, bottom: 0,
|
|
width: isMobile ? '10%' : '16%',
|
|
background: 'linear-gradient(to right, #020710 0%, transparent 100%)',
|
|
zIndex: 5, pointerEvents: 'none'
|
|
}} />
|
|
<div style={{
|
|
position: 'absolute', top: 0, right: 0, bottom: 0,
|
|
width: isMobile ? '10%' : '16%',
|
|
background: 'linear-gradient(to left, #020710 0%, transparent 100%)',
|
|
zIndex: 5, pointerEvents: 'none'
|
|
}} />
|
|
|
|
{/* Continuous Infinite Left-to-Right Scrolling Marquee Track */}
|
|
<motion.div
|
|
animate={{ x: ['-50%', '0%'] }}
|
|
transition={{
|
|
x: {
|
|
repeat: Infinity,
|
|
repeatType: 'loop',
|
|
duration: isMobile ? 22 : 30,
|
|
ease: 'linear'
|
|
}
|
|
}}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: isMobile ? '3.5rem' : '6rem',
|
|
width: 'max-content'
|
|
}}
|
|
>
|
|
{[
|
|
{ name: 'CavinKare', image: '/assets/Frame 27.svg', height: 60 },
|
|
{ name: 'Chola MS', image: '/assets/Frame 34.svg', height: 54 },
|
|
{ name: 'Polyhose', image: '/assets/Frame 30.svg', height: 54 },
|
|
{ name: 'Dawn Pictures', image: '/assets/Frame 32.svg', height: 62 },
|
|
{ name: 'Hero', image: '/assets/Frame 35.svg', height: 56 },
|
|
{ name: 'MRF', image: '/assets/Frame 33.svg', height: 48 },
|
|
{ name: 'Valeo', image: '/assets/Frame 28.svg', height: 60 },
|
|
{ name: 'ACA Global', image: '/assets/Frame 31.svg', height: 54 }
|
|
].concat([
|
|
{ name: 'CavinKare', image: '/assets/Frame 27.svg', height: 60 },
|
|
{ name: 'Chola MS', image: '/assets/Frame 34.svg', height: 54 },
|
|
{ name: 'Polyhose', image: '/assets/Frame 30.svg', height: 54 },
|
|
{ name: 'Dawn Pictures', image: '/assets/Frame 32.svg', height: 62 },
|
|
{ name: 'Hero', image: '/assets/Frame 35.svg', height: 56 },
|
|
{ name: 'MRF', image: '/assets/Frame 33.svg', height: 48 },
|
|
{ name: 'Valeo', image: '/assets/Frame 28.svg', height: 60 },
|
|
{ name: 'ACA Global', image: '/assets/Frame 31.svg', height: 54 }
|
|
]).concat([
|
|
{ name: 'CavinKare', image: '/assets/Frame 27.svg', height: 60 },
|
|
{ name: 'Chola MS', image: '/assets/Frame 34.svg', height: 54 },
|
|
{ name: 'Polyhose', image: '/assets/Frame 30.svg', height: 54 },
|
|
{ name: 'Dawn Pictures', image: '/assets/Frame 32.svg', height: 62 },
|
|
{ name: 'Hero', image: '/assets/Frame 35.svg', height: 56 },
|
|
{ name: 'MRF', image: '/assets/Frame 33.svg', height: 48 },
|
|
{ name: 'Valeo', image: '/assets/Frame 28.svg', height: 60 },
|
|
{ name: 'ACA Global', image: '/assets/Frame 31.svg', height: 54 }
|
|
]).map((partner, index) => (
|
|
<img
|
|
key={index}
|
|
src={assetUrl(partner.image)}
|
|
alt={`${partner.name} logo`}
|
|
style={{
|
|
height: isMobile ? `${Math.round(partner.height * 0.78)}px` : `${partner.height}px`,
|
|
width: 'auto',
|
|
objectFit: 'contain',
|
|
transition: 'transform 0.3s ease',
|
|
cursor: 'pointer'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.transform = 'scale(1.1)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.transform = 'scale(1)';
|
|
}}
|
|
/>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* WORKPLACE & TEAM PHOTO MOSAIC GALLERY SECTION */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
style={{
|
|
position: 'relative',
|
|
marginTop: isMobile ? '4rem' : '6rem',
|
|
marginBottom: '2rem',
|
|
width: '100%',
|
|
maxWidth: '100%',
|
|
boxSizing: 'border-box',
|
|
overflow: 'hidden',
|
|
borderRadius: '24px'
|
|
}}
|
|
>
|
|
{/* Side Fade Vignette Masks matching reference design */}
|
|
<div style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
width: isMobile ? '12%' : '18%',
|
|
background: 'linear-gradient(to right, #020710 0%, rgba(2, 7, 16, 0.8) 50%, transparent 100%)',
|
|
zIndex: 10,
|
|
pointerEvents: 'none'
|
|
}} />
|
|
<div style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
width: isMobile ? '12%' : '18%',
|
|
background: 'linear-gradient(to left, #020710 0%, rgba(2, 7, 16, 0.8) 50%, transparent 100%)',
|
|
zIndex: 10,
|
|
pointerEvents: 'none'
|
|
}} />
|
|
|
|
{/* Mosaic Grid Layout Container */}
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: isMobile ? '5px' : '14px',
|
|
overflowX: 'hidden',
|
|
padding: isMobile ? '0.5rem 0' : '1rem 0',
|
|
width: '100%',
|
|
scrollbarWidth: 'none'
|
|
}}>
|
|
|
|
{/* Column 1 (Far Left) */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? '5px' : '14px', flexShrink: 0 }}>
|
|
<div style={{ width: isMobile ? '38px' : '150px', height: isMobile ? '68px' : '190px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=500&q=80"
|
|
alt=""
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</div>
|
|
<div style={{ width: isMobile ? '38px' : '150px', height: isMobile ? '68px' : '190px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=500&q=80"
|
|
alt=""
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Column 2 */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? '5px' : '14px', flexShrink: 0 }}>
|
|
<div style={{ width: isMobile ? '40px' : '155px', height: isMobile ? '44px' : '122px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=500&q=80"
|
|
alt=""
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</div>
|
|
<div style={{ width: isMobile ? '40px' : '155px', height: isMobile ? '44px' : '122px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?auto=format&fit=crop&w=500&q=80"
|
|
alt=""
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</div>
|
|
<div style={{ width: isMobile ? '40px' : '155px', height: isMobile ? '44px' : '122px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=500&q=80"
|
|
alt=""
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Column 3 (Tall Vertical Chair/Plant) */}
|
|
<div style={{ flexShrink: 0 }}>
|
|
<div style={{ width: isMobile ? '38px' : '150px', height: isMobile ? '142px' : '394px', borderRadius: isMobile ? '8px' : '20px', overflow: 'hidden' }}>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=500&q=80"
|
|
alt=""
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Column 4 (Tall Vertical Cubicles Aerial) */}
|
|
<div style={{ flexShrink: 0 }}>
|
|
<div style={{ width: isMobile ? '40px' : '155px', height: isMobile ? '142px' : '394px', borderRadius: isMobile ? '8px' : '20px', overflow: 'hidden' }}>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1527192491265-7e15c55b1ed2?auto=format&fit=crop&w=500&q=80"
|
|
alt=""
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Column 5 (Tall Vertical Teamwork Board) */}
|
|
<div style={{ flexShrink: 0 }}>
|
|
<div style={{ width: isMobile ? '40px' : '155px', height: isMobile ? '142px' : '394px', borderRadius: isMobile ? '8px' : '20px', overflow: 'hidden' }}>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=500&q=80"
|
|
alt=""
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Column 6 (Tall Vertical Coffee Hand) */}
|
|
<div style={{ flexShrink: 0 }}>
|
|
<div style={{ width: isMobile ? '38px' : '150px', height: isMobile ? '142px' : '394px', borderRadius: isMobile ? '8px' : '20px', overflow: 'hidden' }}>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1517842645767-c639042777db?auto=format&fit=crop&w=500&q=80"
|
|
alt=""
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Column 7 */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? '5px' : '14px', flexShrink: 0 }}>
|
|
<div style={{ width: isMobile ? '40px' : '155px', height: isMobile ? '44px' : '122px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&w=500&q=80"
|
|
alt=""
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</div>
|
|
<div style={{ width: isMobile ? '40px' : '155px', height: isMobile ? '44px' : '122px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=500&q=80"
|
|
alt=""
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</div>
|
|
<div style={{ width: isMobile ? '40px' : '155px', height: isMobile ? '44px' : '122px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&w=500&q=80"
|
|
alt=""
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Column 8 (Far Right) */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? '5px' : '14px', flexShrink: 0 }}>
|
|
<div style={{ width: isMobile ? '38px' : '150px', height: isMobile ? '68px' : '190px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1542744836-561732845500?auto=format&fit=crop&w=500&q=80"
|
|
alt=""
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</div>
|
|
<div style={{ width: isMobile ? '38px' : '150px', height: isMobile ? '68px' : '190px', borderRadius: isMobile ? '7px' : '18px', overflow: 'hidden' }}>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=500&q=80"
|
|
alt=""
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* DROP BY OUR OFFICE SECTION */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
style={{
|
|
position: 'relative',
|
|
marginTop: isMobile ? '4rem' : '7rem',
|
|
marginBottom: '3rem',
|
|
width: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center'
|
|
}}
|
|
>
|
|
{/* Watermark Background Title: "Drop By Our Office" */}
|
|
<div style={{
|
|
position: 'relative',
|
|
width: '100%',
|
|
textAlign: 'center',
|
|
zIndex: 1,
|
|
marginBottom: isMobile ? '0.75rem' : '-2.5rem'
|
|
}}>
|
|
<h2 style={{
|
|
fontSize: isMobile ? 'clamp(1.3rem, 6vw, 2.2rem)' : 'clamp(2.5rem, 6.5vw, 5.5rem)',
|
|
fontWeight: 800,
|
|
letterSpacing: '-0.02em',
|
|
color: 'rgba(255, 255, 255, 0.45)',
|
|
margin: 0,
|
|
lineHeight: 1.1,
|
|
whiteSpace: 'nowrap'
|
|
}}>
|
|
Drop By Our Office
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Building Photo Container with Gradient Edge Vignettes */}
|
|
<div style={{
|
|
position: 'relative',
|
|
width: '100%',
|
|
maxWidth: '1100px',
|
|
borderRadius: '24px',
|
|
overflow: 'hidden',
|
|
boxShadow: '0 30px 60px rgba(0, 0, 0, 0.7)',
|
|
zIndex: 2
|
|
}}>
|
|
<img
|
|
src={assetUrl('/assets/Office photo.png')}
|
|
alt="Cavin Infotech Chennai Office Building"
|
|
style={{
|
|
width: '100%',
|
|
height: isMobile ? '380px' : '540px',
|
|
objectFit: 'cover',
|
|
display: 'block'
|
|
}}
|
|
/>
|
|
|
|
{/* Dark Vignette Overlays matching exact design screenshot */}
|
|
<div style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
background: `
|
|
linear-gradient(to top, #020710 0%, rgba(2, 7, 16, 0.85) 40%, transparent 75%),
|
|
linear-gradient(to right, rgba(2, 7, 16, 0.8) 0%, transparent 20%),
|
|
linear-gradient(to left, rgba(2, 7, 16, 0.8) 0%, transparent 20%),
|
|
linear-gradient(to bottom, rgba(2, 7, 16, 0.6) 0%, transparent 20%)
|
|
`,
|
|
pointerEvents: 'none',
|
|
zIndex: 1
|
|
}} />
|
|
|
|
{/* Address & Contact Info Overlay at Bottom Left */}
|
|
<div style={{
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
padding: isMobile ? '1.8rem 1.5rem' : '3.5rem 3.5rem',
|
|
zIndex: 2,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '0.85rem'
|
|
}}>
|
|
<h3 style={{
|
|
fontSize: 'clamp(1.6rem, 3.2vw, 2.7rem)',
|
|
fontWeight: 700,
|
|
color: '#ffffff',
|
|
margin: 0,
|
|
letterSpacing: '-0.01em'
|
|
}}>
|
|
Cavin Infotech - Chennai
|
|
</h3>
|
|
|
|
<p style={{
|
|
margin: 0,
|
|
fontSize: isMobile ? '0.88rem' : '1.02rem',
|
|
color: '#e2e8f0',
|
|
lineHeight: 1.5,
|
|
fontWeight: 400
|
|
}}>
|
|
<strong style={{ color: '#d6802e', fontWeight: 700 }}>Address: </strong>
|
|
1st Floor, Cavin Ville, 12/1, Cenotaph Rd, Rathna Nagar, Alwarpet, Chennai, Tamil Nadu 600018
|
|
</p>
|
|
|
|
<div style={{
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
gap: isMobile ? '0.5rem 1.5rem' : '0rem 2rem',
|
|
fontSize: isMobile ? '0.88rem' : '1.02rem',
|
|
color: '#e2e8f0',
|
|
lineHeight: 1.5
|
|
}}>
|
|
<span>
|
|
<strong style={{ color: '#d6802e', fontWeight: 700 }}>Email: </strong>
|
|
info@cavinfotech.com
|
|
</span>
|
|
<span>
|
|
<strong style={{ color: '#d6802e', fontWeight: 700 }}>Phone: </strong>
|
|
+91 9280233347
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|