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

Adjust navigation flow, clean up JSX markup and defaults in App.jsx

Browse Source
This commit is contained in:
Vishva
2026-07-30 10:23:14 +05:30
parent 9a00c2805b
commit 80ae755825
2 changed files with 2452 additions and 2510 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.jsx
+60 -78
View File
@@ -379,12 +379,7 @@ 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 : '';
if (hash === '#contact' || hash === '#contactus') return 'contact';
if (hash === '#about' || hash === '#aboutus') return 'about';
return 'home';
});
const [currentPage, setCurrentPage] = useState('home');
useEffect(() => {
const syncPageFromHash = () => {
@@ -550,23 +545,15 @@ export default function App({ previewMode = false }) {
const NAV_OFFSET = isMobile ? 72 : 88;
const scrollToSection = (sectionId) => {
if (sectionId === 'contactus') {
const footer = document.getElementById('contactus');
if (footer) {
const top = footer.getBoundingClientRect().top + window.scrollY - NAV_OFFSET;
window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
} else {
window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
}
setActiveSection('contactus');
return;
}
const el = document.getElementById(sectionId);
if (!el) return;
if (el) {
const top = el.getBoundingClientRect().top + window.scrollY - NAV_OFFSET;
window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
window.scrollTo({ top, behavior: 'smooth' });
setActiveSection(sectionId);
} else if (sectionId === 'contactus') {
window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
setActiveSection('contactus');
}
};
const handleNavClick = (item) => {
@@ -594,28 +581,33 @@ export default function App({ previewMode = false }) {
const sectionMap = {
Home: 'home',
'About Us': 'aboutus',
Products: 'products',
};
const id = sectionMap[item];
const doScroll = (sectionId) => {
if (!sectionId || sectionId === 'home') {
window.scrollTo({ top: 0, behavior: 'smooth' });
return;
}
requestAnimationFrame(() => {
const el = document.getElementById(sectionId);
if (el) {
const top = el.getBoundingClientRect().top + window.scrollY - NAV_OFFSET;
window.scrollTo({ top, behavior: 'smooth' });
setActiveSection(sectionId);
}
});
};
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);
setTimeout(() => doScroll(id), 350);
return;
}
if (!id) return;
window.location.hash = id;
setTimeout(() => scrollToSection(id), isMobile ? 150 : 0);
doScroll(id);
};
useEffect(() => {
@@ -738,7 +730,7 @@ export default function App({ previewMode = false }) {
return (
<a
key={item}
href={item === 'Careers' ? undefined : `#${item.toLowerCase().replace(' ', '')}`}
href={(item === 'Careers' || item === 'Products') ? undefined : `#${item.toLowerCase().replace(' ', '')}`}
onClick={(e) => {
e.preventDefault();
handleNavClick(item);
@@ -1385,7 +1377,8 @@ export default function App({ previewMode = false }) {
backgroundColor: '#070d18',
position: 'relative',
overflow: 'hidden',
borderBottom: '1px solid rgba(255, 255, 255, 0.04)'
borderBottom: '1px solid rgba(255, 255, 255, 0.04)',
scrollMarginTop: `${NAV_OFFSET}px`
}}>
{/* Background Ambient Glow matching screenshot */}
<div style={{
@@ -1824,7 +1817,8 @@ export default function App({ previewMode = false }) {
padding: isMobile ? '4rem 1.25rem' : '6rem 4rem',
background: 'linear-gradient(180deg, #2791a5 0%, #0f4652 35%, #020710 100%)',
position: 'relative',
overflow: 'hidden'
overflow: 'hidden',
scrollMarginTop: `${NAV_OFFSET}px`
}}>
{/* Wave Pattern Overlay */}
<img
@@ -1891,42 +1885,7 @@ export default function App({ previewMode = false }) {
Plus many more specialized solutions: LiveWire, Nucleus, Digital Meeting Agenda, SEC, XR Workbench, TMS, and others - purpose-built for manufacturing and enterprise excellence.
</p>
{/* Bottom CTA Button */}
<div style={{ display: 'flex', justifyContent: 'center' }}>
<button
type="button"
onClick={() => scrollToSection('contactus')}
style={{
display: 'inline-flex',
alignItems: 'center',
gap: '0.6rem',
background: 'rgba(255, 255, 255, 0.05)',
border: '1.5px solid rgba(255, 255, 255, 0.35)',
boxShadow: '0 8px 25px rgba(0, 0, 0, 0.3)',
borderRadius: '50px',
color: '#ffffff',
padding: '0.75rem 2rem',
fontSize: '0.92rem',
fontWeight: 600,
cursor: 'pointer',
transition: 'all 0.25s ease',
backdropFilter: 'blur(10px)'
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.12)';
e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.6)';
e.currentTarget.style.transform = 'translateY(-2px)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)';
e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.35)';
e.currentTarget.style.transform = 'translateY(0)';
}}
>
<span>Explore Our Full Product Suite</span>
<ArrowRight size={16} />
</button>
</div>
</div>
</section>
@@ -2110,6 +2069,7 @@ export default function App({ previewMode = false }) {
</Reveal>
</div>
</section>
</>
)}
@@ -2295,9 +2255,9 @@ export default function App({ previewMode = false }) {
onMouseLeave={e => e.currentTarget.style.color = '#475569'}>Home</a>
</li>
<li>
<a href="#certifications" onClick={e => {
<a href="#aboutus" onClick={e => {
e.preventDefault();
scrollToSection('certifications');
handleNavClick('About Us');
}} style={{ color: '#475569', textDecoration: 'none', fontSize: '0.85rem', transition: 'color 0.2s' }}
onMouseEnter={e => e.currentTarget.style.color = '#1e40af'}
onMouseLeave={e => e.currentTarget.style.color = '#475569'}>About Us</a>
@@ -2305,11 +2265,24 @@ export default function App({ previewMode = false }) {
<li>
<a href="#services" onClick={e => {
e.preventDefault();
if (currentPage !== 'home') {
setCurrentPage('home');
setTimeout(() => scrollToSection('services'), 300);
} else {
scrollToSection('services');
}
}} style={{ color: '#475569', textDecoration: 'none', fontSize: '0.85rem', transition: 'color 0.2s' }}
onMouseEnter={e => e.currentTarget.style.color = '#1e40af'}
onMouseLeave={e => e.currentTarget.style.color = '#475569'}>Our Services</a>
</li>
<li>
<a href="#contactus" onClick={e => {
e.preventDefault();
handleNavClick('Contact Us');
}} style={{ color: '#475569', textDecoration: 'none', fontSize: '0.85rem', transition: 'color 0.2s' }}
onMouseEnter={e => e.currentTarget.style.color = '#1e40af'}
onMouseLeave={e => e.currentTarget.style.color = '#475569'}>Contact Us</a>
</li>
</ul>
</div>
@@ -2317,10 +2290,15 @@ export default function App({ previewMode = false }) {
<div>
<h5 style={{ fontSize: '0.75rem', fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#1e293b', marginBottom: '1rem' }}>Products</h5>
<ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.45rem', padding: 0, margin: 0 }}>
{(footer.productLinks && footer.productLinks.length ? footer.productLinks.map(p => p.label) : ['Nebula AI platform', 'Prodmax', 'Budgie']).map(l => (
{(footer.productLinks && footer.productLinks.length ? footer.productLinks.map(p => p.label) : ['Nebula AI Platform', 'Prodmax', 'Budgie']).map(l => (
<li key={l}><a href="#products" onClick={e => {
e.preventDefault();
if (currentPage !== 'home') {
setCurrentPage('home');
setTimeout(() => scrollToSection('products'), 300);
} else {
scrollToSection('products');
}
}} style={{ color: '#475569', textDecoration: 'none', fontSize: '0.85rem', transition: 'color 0.2s' }}
onMouseEnter={e => e.currentTarget.style.color = '#1e40af'}
onMouseLeave={e => e.currentTarget.style.color = '#475569'}>{l}</a></li>
@@ -2396,7 +2374,8 @@ export default function App({ previewMode = false }) {
</footer >
{/* Careers Modal Popup */ }
{isCareersOpen && !previewMode && (
{
isCareersOpen && !previewMode && (
<div style={{
position: 'fixed',
inset: 0,
@@ -2863,10 +2842,12 @@ export default function App({ previewMode = false }) {
</div>
</div>
</div>
)}
)
}
{/* Book a Strategy Call Modal Popup */ }
{isStrategyOpen && !previewMode && (
{
isStrategyOpen && !previewMode && (
<div style={{
position: 'fixed',
inset: 0,
@@ -3425,7 +3406,8 @@ export default function App({ previewMode = false }) {
</div>
</div>
</div>
)}
)
}
</div >
);
}
src/components/FeaturedGallery.jsx
+1 -41
View File
@@ -52,47 +52,7 @@ export default function FeaturedGallery({ gallery }) {
setActiveIdx={setActiveGalleryIndex}
/>
{/* Bottom CTA Button matching design screenshot */}
<div style={{ display: 'flex', justifyContent: 'center', marginTop: '3rem' }}>
<button
type="button"
onClick={() => {
const footer = document.getElementById('contactus');
if (footer) {
footer.scrollIntoView({ behavior: 'smooth' });
}
}}
style={{
display: 'inline-flex',
alignItems: 'center',
gap: '0.6rem',
background: 'rgba(255, 255, 255, 0.05)',
border: '1.5px solid rgba(255, 255, 255, 0.35)',
boxShadow: '0 8px 25px rgba(0, 0, 0, 0.3)',
borderRadius: '50px',
color: '#ffffff',
padding: '0.75rem 2rem',
fontSize: '0.92rem',
fontWeight: 600,
cursor: 'pointer',
transition: 'all 0.25s ease',
backdropFilter: 'blur(10px)'
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.12)';
e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.6)';
e.currentTarget.style.transform = 'translateY(-2px)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)';
e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.35)';
e.currentTarget.style.transform = 'translateY(0)';
}}
>
<span>Explore Success Stories</span>
<ArrowRight size={16} />
</button>
</div>
</div>
</section>
);