Vishva/citpl_cms_react_express_postgres
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update ContactSection, FeaturedGallery and new assets

Browse Source
This commit is contained in:
Vishva
2026-07-28 11:54:13 +05:30
parent 6c3e52ae61
commit ff9795e4c9
23 changed files with 22985 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.jsx
+257 -106
View File
@@ -7,6 +7,7 @@ import { usePreviewMode } from './context/PreviewContext';
import ServiceDial from './components/ServiceDial';
import FeaturedGallery from './components/FeaturedGallery';
import ProductCard from './components/ProductCard';
import ContactSection from './components/ContactSection';
// Reusable Scroll Reveal Wrapper with Reduced Motion Support
function Reveal({ children, delay = 0, style }) {
@@ -126,12 +127,32 @@ const OrbitalLogo = ({ src, alt, radiusX, radiusY, startAngle, duration, clockwi
};
function ServiceCard({ service, isMobile, index = 0 }) {
const IconComponent = iconMap[service.icon] || Sparkles;
const shouldReduceMotion = useReducedMotion();
const titleParts = service.title.split(' ');
const lastWord = titleParts.length > 1 ? titleParts.pop() : '';
const firstPart = titleParts.join(' ');
const service3dImages = [
'/assets/image 179.png',
'/assets/image 180.png',
'/assets/image 181.png',
'/assets/image 182.png',
'/assets/image 184.png'
];
const cardBackgrounds = [
'radial-gradient(circle at 85% 15%, rgba(150, 45, 30, 0.45) 0%, rgba(22, 10, 11, 0.98) 55%)',
'radial-gradient(circle at 85% 15%, rgba(20, 100, 140, 0.45) 0%, rgba(10, 18, 25, 0.98) 55%)',
'radial-gradient(circle at 85% 15%, rgba(140, 50, 30, 0.4) 0%, rgba(20, 12, 12, 0.98) 55%)',
'radial-gradient(circle at 85% 15%, rgba(15, 115, 140, 0.45) 0%, rgba(10, 19, 26, 0.98) 55%)',
'radial-gradient(circle at 85% 15%, rgba(30, 90, 140, 0.45) 0%, rgba(12, 18, 28, 0.98) 55%)'
];
const formatTitle = (title) => {
if (title.includes('AI & Data')) return <>AI & Data<br/>Services</>;
if (title.includes('Enterprise')) return <>Enterprise<br/>Software</>;
if (title.includes('SAP')) return <>SAP Managed<br/>Services</>;
if (title.includes('Smart')) return <>Smart<br/>Factory</>;
if (title.includes('AR/VR')) return <>AR/VR &<br/>Immersive<br/>Technologies</>;
return title;
};
const revealProps = shouldReduceMotion ? {} : {
initial: { opacity: 0, y: 40 },
@@ -143,27 +164,20 @@ function ServiceCard({ service, isMobile, index = 0 }) {
}
};
// Card specific glow gradient overrides matching screenshot
const cardGlows = [
'radial-gradient(circle at 90% 90%, rgba(160, 45, 35, 0.28) 0%, rgba(16, 18, 22, 0.98) 70%)',
'radial-gradient(circle at 90% 90%, rgba(0, 130, 165, 0.28) 0%, rgba(14, 22, 28, 0.98) 70%)',
'radial-gradient(circle at 90% 90%, rgba(40, 50, 70, 0.25) 0%, rgba(15, 19, 26, 0.98) 70%)',
'radial-gradient(circle at 90% 90%, rgba(170, 90, 20, 0.25) 0%, rgba(20, 18, 24, 0.98) 70%)',
'radial-gradient(circle at 90% 90%, rgba(110, 60, 170, 0.25) 0%, rgba(18, 16, 26, 0.98) 70%)'
];
const current3dImg = service.image || service3dImages[index % service3dImages.length];
return (
<motion.div
whileHover={isMobile ? {} : { y: -6, borderColor: 'rgba(255, 255, 255, 0.25)', boxShadow: '0 20px 40px rgba(0, 0, 0, 0.5)' }}
whileHover={isMobile ? {} : { y: -6, borderColor: 'rgba(255, 255, 255, 0.25)', boxShadow: '0 20px 40px rgba(0, 0, 0, 0.6)' }}
{...revealProps}
style={{
flex: '0 0 auto',
scrollSnapAlign: 'start',
width: isMobile ? '290px' : '390px',
minHeight: isMobile ? '460px' : '530px',
background: cardGlows[index % cardGlows.length] || 'rgba(16, 20, 28, 0.98)',
width: isMobile ? '300px' : '390px',
minHeight: isMobile ? '560px' : '630px',
background: cardBackgrounds[index % cardBackgrounds.length],
backdropFilter: 'blur(16px)',
borderRadius: '14px',
borderRadius: '16px',
border: '1px solid rgba(255, 255, 255, 0.12)',
padding: isMobile ? '1.8rem 1.4rem' : '2.2rem 2rem',
position: 'relative',
@@ -171,18 +185,18 @@ function ServiceCard({ service, isMobile, index = 0 }) {
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
boxShadow: '0 10px 30px rgba(0, 0, 0, 0.3)',
transition: 'border-color 0.3s ease, box-shadow 0.3s ease'
boxShadow: '0 10px 30px rgba(0, 0, 0, 0.4)',
transition: 'all 0.3s ease'
}}
>
{/* Background Watermark Number */}
<div style={{
position: 'absolute',
bottom: '-20px',
bottom: '-25px',
right: '15px',
fontSize: isMobile ? '120px' : '160px',
fontSize: isMobile ? '130px' : '170px',
fontWeight: 900,
color: 'rgba(255, 255, 255, 0.018)',
color: 'rgba(255, 255, 255, 0.025)',
lineHeight: '1',
pointerEvents: 'none',
userSelect: 'none',
@@ -191,24 +205,49 @@ function ServiceCard({ service, isMobile, index = 0 }) {
{service.number}
</div>
<div style={{ position: 'relative', zIndex: 1 }}>
{/* Title */}
<h3 style={{
fontSize: isMobile ? '1.6rem' : '2.1rem',
fontWeight: 500,
color: '#ffffff',
marginBottom: isMobile ? '1.5rem' : '2.2rem',
letterSpacing: '-0.02em',
lineHeight: '1.2'
}}>
{firstPart && <>{firstPart}<br/></>}{lastWord || firstPart}
</h3>
<div style={{ position: 'relative', zIndex: 2 }}>
{/* Top Header Row with Title and 3D Graphic */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '1.8rem', minHeight: '120px' }}>
<h3 style={{
fontSize: isMobile ? '1.6rem' : '2.1rem',
fontWeight: 500,
color: '#ffffff',
letterSpacing: '-0.02em',
lineHeight: '1.18',
margin: 0,
maxWidth: '220px'
}}>
{formatTitle(service.title)}
</h3>
{/* Bold Statement with left border/line */}
{/* 3D Graphic Image */}
<div style={{
width: isMobile ? '140px' : '185px',
height: isMobile ? '140px' : '185px',
flexShrink: 0,
position: 'absolute',
top: '-15px',
right: '-15px',
pointerEvents: 'none',
}}>
<img
src={assetUrl(current3dImg)}
alt={`${service.title} 3D Illustration`}
style={{
width: '100%',
height: '100%',
objectFit: 'contain',
filter: 'drop-shadow(0 12px 25px rgba(0, 0, 0, 0.6))'
}}
/>
</div>
</div>
{/* Sub-text Section: Bold Statement + Description with Left Vertical Line */}
<div style={{
display: 'flex',
gap: '0.8rem',
marginBottom: '0.8rem'
gap: '0.85rem',
marginBottom: '1.6rem'
}}>
<div style={{
width: '3px',
@@ -216,37 +255,36 @@ function ServiceCard({ service, isMobile, index = 0 }) {
borderRadius: '2px',
flexShrink: 0
}} />
<h4 style={{
fontSize: isMobile ? '0.9rem' : '0.98rem',
fontWeight: 700,
color: '#ffffff',
lineHeight: '1.45',
margin: 0
}}>
{service.boldStatement}
</h4>
<div>
<h4 style={{
fontSize: isMobile ? '0.88rem' : '0.94rem',
fontWeight: 700,
color: '#ffffff',
lineHeight: '1.4',
margin: '0 0 0.5rem 0'
}}>
{service.boldStatement}
</h4>
<p style={{
color: '#94a3b8',
fontSize: isMobile ? '0.8rem' : '0.85rem',
lineHeight: '1.5',
margin: 0,
fontWeight: 400
}}>
{service.description}
</p>
</div>
</div>
{/* Description */}
<p style={{
color: '#8c9ba5',
fontSize: isMobile ? '0.82rem' : '0.87rem',
lineHeight: '1.55',
marginBottom: isMobile ? '1.2rem' : '1.6rem',
fontWeight: 400,
paddingLeft: '0.8rem'
}}>
{service.description}
</p>
{/* Capabilities bullet list */}
{/* Capabilities Bullet List */}
<ul style={{
listStyle: 'none',
padding: 0,
margin: 0,
display: 'flex',
flexDirection: 'column',
gap: '0.75rem'
gap: '0.7rem'
}}>
{service.capabilities.map((capability, idx) => {
const parts = capability.split(/\s[–-]\s/);
@@ -254,23 +292,63 @@ function ServiceCard({ service, isMobile, index = 0 }) {
const restText = parts.length > 1 ? parts.slice(1).join(' - ') : capability;
return (
<li key={idx} style={{
display: 'flex',
alignItems: 'flex-start',
gap: '0.6rem',
fontSize: isMobile ? '0.82rem' : '0.88rem',
fontWeight: 400,
color: '#8c9ba5',
lineHeight: '1.45'
}}>
<span style={{ color: '#ffffff', opacity: 0.9, fontSize: '0.95rem', marginTop: '0.05rem', fontWeight: 'bold' }}>»</span>
<div>
{boldText ? <><strong style={{ color: '#ffffff', fontWeight: 600 }}>{boldText}</strong> – {restText}</> : restText}
</div>
</li>
)})}
<li key={idx} style={{
display: 'flex',
alignItems: 'flex-start',
gap: '0.55rem',
fontSize: isMobile ? '0.8rem' : '0.85rem',
fontWeight: 400,
color: '#94a3b8',
lineHeight: '1.45'
}}>
<span style={{ color: '#ffffff', opacity: 0.9, fontSize: '0.95rem', marginTop: '0.05rem', fontWeight: 'bold' }}>»</span>
<div>
{boldText ? <><strong style={{ color: '#ffffff', fontWeight: 600 }}>{boldText}</strong> – {restText}</> : restText}
</div>
</li>
);
})}
</ul>
</div>
{/* Bottom Link CTA - commented out per user request
<div style={{ position: 'relative', zIndex: 2, marginTop: '2rem' }}>
<button
type="button"
onClick={() => {
const footer = document.getElementById('contactus');
if (footer) {
footer.scrollIntoView({ behavior: 'smooth' });
}
}}
style={{
display: 'inline-flex',
alignItems: 'center',
gap: '0.4rem',
color: '#ffffff',
fontSize: isMobile ? '0.85rem' : '0.9rem',
fontWeight: 600,
background: 'none',
border: 'none',
padding: 0,
cursor: 'pointer',
transition: 'all 0.25s ease',
opacity: 0.95
}}
onMouseEnter={(e) => {
e.currentTarget.style.gap = '0.7rem';
e.currentTarget.style.opacity = '1';
}}
onMouseLeave={(e) => {
e.currentTarget.style.gap = '0.4rem';
e.currentTarget.style.opacity = '0.95';
}}
>
<span>{service.cta || 'Explore Solutions'}</span>
<ArrowRight size={16} />
</button>
</div>
*/}
</motion.div>
);
}
@@ -297,6 +375,25 @@ export default function App({ previewMode = false }) {
const [isMobile, setIsMobile] = useState(false);
const [isCareersOpen, setIsCareersOpen] = useState(false);
const [activeSection, setActiveSection] = useState('home');
const [currentPage, setCurrentPage] = useState(() => {
const hash = typeof window !== 'undefined' ? window.location.hash : '';
return hash === '#contact' || hash === '#contactus' ? 'contact' : 'home';
});
useEffect(() => {
const syncPageFromHash = () => {
const hash = window.location.hash;
if (hash === '#contact' || hash === '#contactus') {
setCurrentPage('contact');
setActiveSection('contactus');
window.scrollTo({ top: 0, behavior: 'smooth' });
} else if (hash === '#home' || hash === '') {
setCurrentPage('home');
}
};
window.addEventListener('hashchange', syncPageFromHash);
return () => window.removeEventListener('hashchange', syncPageFromHash);
}, []);
const [hoveredItem, setHoveredItem] = useState(null);
const [showCareersAcknowledgement, setShowCareersAcknowledgement] = useState(false);
const [isStrategyOpen, setIsStrategyOpen] = useState(false);
@@ -352,7 +449,7 @@ export default function App({ previewMode = false }) {
}, []);
useEffect(() => {
if (previewMode) return;
if (previewMode || currentPage === 'contact') return;
const handleScroll = () => {
const sections = ['home', 'aboutus', 'services', 'whyus', 'products', 'insights', 'contactus'];
@@ -383,6 +480,7 @@ export default function App({ previewMode = false }) {
}, [previewMode]);
const getActiveNavItem = () => {
if (currentPage === 'contact') return 'Contact Us';
switch (activeSection) {
case 'home':
return 'Home';
@@ -423,7 +521,7 @@ export default function App({ previewMode = false }) {
}
};
const sectionX = isMobile ? '1.25rem' : '8%';
const sectionX = isMobile ? '1.25rem' : '4rem';
const navItems = ['Home', 'About Us', 'Products', 'Careers', 'Contact Us'];
const NAV_OFFSET = isMobile ? 72 : 88;
@@ -453,14 +551,38 @@ export default function App({ previewMode = false }) {
setIsCareersOpen(true);
return;
}
if (item === 'Contact Us') {
setCurrentPage('contact');
setActiveSection('contactus');
window.location.hash = 'contact';
window.scrollTo({ top: 0, behavior: 'smooth' });
return;
}
const sectionMap = {
Home: 'home',
'About Us': 'aboutus',
Products: 'products',
'Contact Us': 'contactus',
};
const id = sectionMap[item];
if (currentPage !== 'home') {
setCurrentPage('home');
setActiveSection(id || 'home');
window.location.hash = id || 'home';
setTimeout(() => {
if (id && id !== 'home') {
scrollToSection(id);
} else {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}, 100);
return;
}
if (!id) return;
window.location.hash = id;
setTimeout(() => scrollToSection(id), isMobile ? 150 : 0);
};
@@ -525,10 +647,10 @@ export default function App({ previewMode = false }) {
}
return (
<div style={{ backgroundColor: '#020710', color: '#ffffff', minHeight: '100vh', position: 'relative', display: 'flex', flexDirection: 'column' }}>
<div style={{ backgroundColor: '#020710', color: '#ffffff', minHeight: '100vh', position: 'relative', display: 'flex', flexDirection: 'column', width: '100%' }}>
{/* Main Content Wrapper with solid background and higher z-index for sticky footer parallax reveal */}
<div style={{ position: 'relative', zIndex: 10, backgroundColor: '#020710', width: '100%' }}>
<div style={{ position: 'relative', zIndex: 10, backgroundColor: '#020710', width: '100%', overflow: 'hidden' }}>
{/* Background Glows */}
<div style={{
@@ -550,11 +672,19 @@ export default function App({ previewMode = false }) {
{/* Navigation Bar */}
<nav className="glass site-nav" style={{
position: 'sticky', top: 0, zIndex: 50,
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
padding: isMobile ? '0.85rem 1.25rem' : '1.2rem 8%',
padding: isMobile ? '0.85rem 1.25rem' : '1.2rem 4rem',
borderBottom: activeSection === 'products' ? '1px solid rgba(15, 23, 42, 0.08)' : '1px solid rgba(255, 255, 255, 0.05)'
}}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div
style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}
onClick={() => {
setCurrentPage('home');
setActiveSection('home');
window.location.hash = 'home';
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
>
<img src={assetUrl('/assets/cavin_logo.svg')} alt="Cavin Infotech Logo" style={{ height: isMobile ? '38px' : '50px', display: 'block' }} />
</div>
@@ -626,6 +756,7 @@ export default function App({ previewMode = false }) {
{mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
</button>
)}
</div>
</nav>
{isMobile && mobileMenuOpen && (
@@ -687,10 +818,13 @@ export default function App({ previewMode = false }) {
</div>
</div>
)}
{/* Hero Section */}
{currentPage === 'contact' ? (
<ContactSection isMobile={isMobile} onOpenStrategy={() => setIsStrategyOpen(true)} />
) : (
<>
{/* Main Homepage Content */}
<section id="home" style={{
padding: isMobile ? '5.5rem 1.25rem 2rem' : '7.5rem 8% 2.5rem 8%',
padding: isMobile ? '5.5rem 1.25rem 2rem' : '7.5rem 4rem 2.5rem 4rem',
textAlign: 'center',
position: 'relative',
zIndex: 10,
@@ -703,6 +837,8 @@ export default function App({ previewMode = false }) {
justifyContent: 'flex-start',
overflow: 'hidden'
}}>
<div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%' }}>
{/* Background Video */}
<video
autoPlay
@@ -790,9 +926,7 @@ export default function App({ previewMode = false }) {
<button
type="button"
className="btn-talk"
onClick={() => {
document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' });
}}
onClick={() => scrollToSection('services')}
style={{
display: 'inline-flex',
alignItems: 'center',
@@ -842,12 +976,13 @@ export default function App({ previewMode = false }) {
</button>
</div>
</Reveal>
</div>
</section>
{/* Metrics Section */}
<section style={{
padding: isMobile ? '3rem 1.5rem' : '4rem 8% 2rem 8%',
padding: isMobile ? '3rem 1.25rem' : '4rem 4rem 2rem 4rem',
backgroundColor: '#020710',
position: 'relative',
zIndex: 10,
@@ -901,7 +1036,7 @@ export default function App({ previewMode = false }) {
{/* Frost & Sullivan Alliance Section */}
<section id="aboutus" style={{
padding: isMobile ? '3.5rem 1.25rem' : '6.5rem 8% 5.5rem 8%',
padding: isMobile ? '3.5rem 1.25rem' : '6.5rem 4rem 5.5rem 4rem',
backgroundColor: '#020710',
backgroundImage: `url('${assetUrl(about.backgroundImage)}')`,
backgroundSize: 'cover',
@@ -914,7 +1049,8 @@ export default function App({ previewMode = false }) {
borderBottom: '1px solid rgba(255, 255, 255, 0.02)',
position: 'relative'
}}>
<Reveal style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }}>
<div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<Reveal style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }}>
{/* Subtle center spotlight lighting effect behind badge */}
<div style={{
position: 'absolute',
@@ -964,12 +1100,13 @@ export default function App({ previewMode = false }) {
/>
</div>
</Reveal>
</div>
</section>
{/* Redesigned Trusted Brands Section */}
<section style={{
padding: isMobile ? '4rem 8%' : '2rem 0',
padding: isMobile ? '4rem 1.25rem' : '4rem 4rem',
borderTop: '1px solid rgba(255, 255, 255, 0.03)',
borderBottom: '1px solid rgba(255, 255, 255, 0.03)',
background: '#020710',
@@ -1002,7 +1139,8 @@ export default function App({ previewMode = false }) {
zIndex: 0,
}} />
<Reveal style={{ width: '100%' }}>
<div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%', position: 'relative', zIndex: 2 }}>
<Reveal style={{ width: '100%' }}>
{isMobile ? (
/* Mobile Layout: Clean vertical hierarchy */
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '3rem', position: 'relative', zIndex: 2 }}>
@@ -1145,12 +1283,13 @@ export default function App({ previewMode = false }) {
</div>
)}
</Reveal>
</div>
</section>
{/* Certifications Section */}
<section id="certifications" style={{
padding: isMobile ? '3rem 1.25rem' : '5rem 8%',
padding: isMobile ? '3rem 1.25rem' : '5rem 4rem',
backgroundColor: '#020710',
display: 'flex',
flexDirection: 'column',
@@ -1158,6 +1297,7 @@ export default function App({ previewMode = false }) {
textAlign: 'center',
borderBottom: '1px solid rgba(255, 255, 255, 0.03)'
}}>
<div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<Reveal>
<h2 style={{
fontSize: 'clamp(1.8rem, 3.2vw, 2.5rem)',
@@ -1203,6 +1343,7 @@ export default function App({ previewMode = false }) {
</Reveal>
))}
</div>
</div>
</section>
{/* Services Section */}
<section id="services" style={{
@@ -1227,7 +1368,7 @@ export default function App({ previewMode = false }) {
<div style={{
maxWidth: '1440px',
margin: '0 auto',
padding: isMobile ? '0 1.5rem' : '0 3.5rem',
padding: isMobile ? '0 1.25rem' : '0 4rem',
display: 'flex',
flexDirection: isMobile ? 'column' : 'row',
alignItems: 'stretch',
@@ -1382,8 +1523,8 @@ export default function App({ previewMode = false }) {
{/* Why Cavin Infotech Section */}
{/* Why Cavin Infotech Section */}
<section id="whyus" style={{ padding: isMobile ? '4rem 1.25rem' : '6rem 8%', background: 'rgba(5, 16, 34, 0.3)', position: 'relative' }}>
<div style={{ maxWidth: '1400px', margin: '0 auto', position: 'relative', zIndex: 10 }}>
<section id="whyus" style={{ padding: isMobile ? '4rem 1.25rem' : '6rem 4rem', background: 'rgba(5, 16, 34, 0.3)', position: 'relative' }}>
<div style={{ maxWidth: '1440px', margin: '0 auto', position: 'relative', zIndex: 10 }}>
{/* Section Header - Left Aligned */}
<div style={{ textAlign: 'left', marginBottom: '3rem' }}>
<Reveal>
@@ -1646,7 +1787,7 @@ export default function App({ previewMode = false }) {
{/* Products Suite */}
<section id="products" style={{
padding: isMobile ? '4rem 1.25rem' : '6rem 8%',
padding: isMobile ? '4rem 1.25rem' : '6rem 4rem',
backgroundImage: `url(${assetUrl('/assets/products_bg.svg')})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
@@ -1665,6 +1806,7 @@ export default function App({ previewMode = false }) {
pointerEvents: 'none',
zIndex: 1
}} />
<div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%', position: 'relative', zIndex: 10 }}>
{/* Header - Left Aligned matching screenshot */}
<Reveal>
<div style={{ textAlign: 'left', marginBottom: '3.5rem', position: 'relative', zIndex: 10 }}>
@@ -1697,13 +1839,15 @@ export default function App({ previewMode = false }) {
/>
))}
</div>
</div>
</section>
{/* Insights Section */}
<section id="insights" style={{ padding: isMobile ? '3.5rem 0 4rem' : '5rem 0 6rem 0', background: '#020c1e' }}>
<div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%' }}>
{/* Header */}
<Reveal style={{
padding: isMobile ? '0 1.25rem' : '0 8%',
padding: isMobile ? '0 1.25rem' : '0 4rem',
display: 'flex',
flexDirection: isMobile ? 'column' : 'row',
justifyContent: 'space-between',
@@ -1761,9 +1905,9 @@ export default function App({ previewMode = false }) {
overflowX: 'auto',
overflowY: 'hidden',
scrollSnapType: 'x mandatory',
scrollPaddingLeft: isMobile ? '1.25rem' : '8%',
paddingLeft: isMobile ? '1.25rem' : '8%',
paddingRight: isMobile ? '1.25rem' : '8%',
scrollPaddingLeft: isMobile ? '1.25rem' : '4rem',
paddingLeft: isMobile ? '1.25rem' : '4rem',
paddingRight: isMobile ? '1.25rem' : '4rem',
paddingBottom: '1.5rem',
paddingTop: '0.5rem',
scrollbarWidth: 'none',
@@ -1876,7 +2020,10 @@ export default function App({ previewMode = false }) {
))}
</div>
</Reveal>
</div>
</section>
</>
)}
{/* Brand Logo Divider Section */}
<section style={{
@@ -1902,7 +2049,7 @@ export default function App({ previewMode = false }) {
</div> {/* Close Content Wrapper */}
{/* Sticky Parallax Reveal Footer */}
<footer id="contactus" style={{
<footer id="footer" style={{
position: 'sticky',
bottom: 0,
zIndex: 1,
@@ -1914,7 +2061,7 @@ export default function App({ previewMode = false }) {
}}>
{/* Footer Container Padded Content */}
<div style={{ padding: `0 ${sectionX}` }}>
<div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%', padding: `0 ${sectionX}` }}>
{/* CTA Banner Section */}
{isMobile ? (
@@ -1955,6 +2102,7 @@ export default function App({ previewMode = false }) {
>
{footer.cta.primaryButton}
</button>
{/* Secondary button commented out per user request
<button
onClick={() => setIsStrategyOpen(true)}
style={{
@@ -1970,6 +2118,7 @@ export default function App({ previewMode = false }) {
>
{footer.cta.secondaryButton}
</button>
*/}
</div>
</div>
@@ -2060,6 +2209,7 @@ export default function App({ previewMode = false }) {
>
{footer.cta.primaryButton}
</button>
{/* Secondary button commented out per user request
<button
onClick={() => setIsStrategyOpen(true)}
style={{
@@ -2086,6 +2236,7 @@ export default function App({ previewMode = false }) {
>
{footer.cta.secondaryButton}
</button>
*/}
</div>
</div>
</div>
src/assets/C0ntact form blur.svg
+16
View File
@@ -0,0 +1,16 @@
<svg width="615" height="565" viewBox="0 0 615 565" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f_120_14849)">
<rect x="63" y="-134" width="352" height="499" fill="url(#paint0_linear_120_14849)"/>
</g>
<defs>
<filter id="filter0_f_120_14849" x="-137" y="-334" width="752" height="899" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_120_14849"/>
</filter>
<linearGradient id="paint0_linear_120_14849" x1="239" y1="-134" x2="239" y2="365" gradientUnits="userSpaceOnUse">
<stop stop-color="#184BFF" stop-opacity="0"/>
<stop offset="1" stop-color="#0387DA"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 841 B

src/assets/Lets start the conversation bg.svg
+49
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

src/assets/Office photo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

src/assets/Wave form.svg
+9
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

src/assets/World Map Vector.svg
+10671
View File
File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 747 KiB

src/assets/image 179.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

src/assets/image 180.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

src/assets/image 181.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

src/assets/image 182.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

src/assets/image 184.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

src/components/ContactSection.jsx
+1219
View File
File diff suppressed because it is too large Load Diff
src/components/FeaturedGallery.jsx
+19 -17
View File
@@ -27,24 +27,26 @@ export default function FeaturedGallery({ gallery }) {
}, [activeGalleryIndex, galleryData.length]);
return (
<section id="featured-gallery" style={{ padding: isMobile ? '4rem 1.25rem' : '6rem 8%', background: '#020710', position: 'relative' }}>
<div style={{ marginBottom: '3.5rem', position: 'relative', zIndex: 10 }}>
<span style={{ color: '#ffaa00', fontSize: '0.9rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em' }}>
{header.eyebrow}
</span>
<h2 style={{ fontSize: 'clamp(2rem, 3vw, 2.5rem)', fontWeight: 800, marginTop: '0.5rem', color: '#ffffff' }}>
{header.title}
</h2>
<p style={{ color: '#94a3b8', fontSize: '1rem', marginTop: '0.75rem', maxWidth: '600px', lineHeight: '1.5' }}>
{header.subtitle}
</p>
</div>
<section id="featured-gallery" style={{ padding: isMobile ? '4rem 1.25rem' : '6rem 4rem', background: '#020710', position: 'relative' }}>
<div style={{ maxWidth: '1440px', margin: '0 auto', width: '100%', position: 'relative', zIndex: 10 }}>
<div style={{ marginBottom: '3.5rem' }}>
<span style={{ color: '#ffaa00', fontSize: '0.9rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em' }}>
{header.eyebrow}
</span>
<h2 style={{ fontSize: 'clamp(2rem, 3vw, 2.5rem)', fontWeight: 800, marginTop: '0.5rem', color: '#ffffff' }}>
{header.title}
</h2>
<p style={{ color: '#94a3b8', fontSize: '1rem', marginTop: '0.75rem', maxWidth: '600px', lineHeight: '1.5' }}>
{header.subtitle}
</p>
</div>
<ResponsiveGalleryWrapper
galleryData={galleryData}
activeIdx={activeGalleryIndex}
setActiveIdx={setActiveGalleryIndex}
/>
<ResponsiveGalleryWrapper
galleryData={galleryData}
activeIdx={activeGalleryIndex}
setActiveIdx={setActiveGalleryIndex}
/>
</div>
</section>
);
}