kassam/yslootahrobotics
1
1
Fork 0
forked from hazem/yslootahrobotics
Code Pull Requests Activity

feat: update overlay positioning and styles for improved CTA visibility

Browse Source
This commit is contained in:
Najjar\NajjarV02 2026-04-17 16:24:20 +04:00
parent 1788df79e1
commit 90a43c4312
3 changed files with 51 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/configure/page.tsx
View File

@ -12,7 +12,7 @@ export default function ConfigurePage() {
style={{
position: 'fixed',
top: '1rem',
left: '1rem',
right: '1rem',
zIndex: 100,
display: 'inline-flex',
alignItems: 'center',

10
src/app/globals.css
View File

@ -468,6 +468,16 @@ html {
.overlay-scroll-hint {
bottom: 1.5rem !important;
}
.overlay-cta-section {
bottom: 3vh !important;
top: auto !important;
}
.overlay-cta-btn {
padding: 0.85rem 2rem !important;
font-size: 0.85rem !important;
}
}
/* Small phones */

83
src/components/ScrollOverlays.tsx
View File

@ -126,7 +126,7 @@ const SECTION_CONFIGS = [
{ id: 'hero', startAt: 0.10, peakAt: 0.22, endAt: 0.35, align: 'left' as const, verticalAlign: 'center' as const },
{ id: 'headReveal', startAt: 0.35, peakAt: 0.46, endAt: 0.53, align: 'right' as const, verticalAlign: 'center' as const },
{ id: 'customization', startAt: 0.55, peakAt: 0.66, endAt: 0.77, align: 'left' as const, verticalAlign: 'center' as const },
{ id: 'mobility', startAt: 0.80, peakAt: 0.90, endAt: 1.0, align: 'right' as const, verticalAlign: 'center' as const },
{ id: 'mobility', startAt: 0.75, peakAt: 0.82, endAt: 0.90, align: 'right' as const, verticalAlign: 'center' as const },
];
export function ScrollOverlays() {
@ -255,49 +255,46 @@ export function ScrollOverlays() {
</OverlaySection>
{/* Configure CTA — appears at the very end of scroll */}
<motion.div
style={{
position: 'absolute',
bottom: '8vh',
left: '50%',
transform: 'translateX(-50%)',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '1rem',
opacity: useTransform(scrollYProgress, [0.88, 0.95], [0, 1]),
pointerEvents: 'auto',
zIndex: 20,
}}
<OverlaySection
progress={scrollYProgress}
startAt={0.90}
peakAt={0.95}
endAt={1.0}
align="center"
verticalAlign="center"
className="overlay-cta-section"
>
<Link
href="/configure/"
style={{
display: 'inline-flex',
alignItems: 'center',
gap: '0.75rem',
padding: '1rem 2.5rem',
borderRadius: '3rem',
background: 'linear-gradient(135deg, #c4a265, #d4b47a)',
color: '#ffffff',
fontSize: '0.95rem',
fontWeight: 600,
letterSpacing: '0.1em',
textTransform: 'uppercase',
textDecoration: 'none',
boxShadow: '0 8px 32px rgba(196, 162, 101, 0.3)',
transition: 'all 0.3s ease',
}}
>
Configure Your G1
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
</svg>
</Link>
<span style={{ fontSize: '0.7rem', color: '#94a3b8', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
Build &amp; Order Your Robot
</span>
</motion.div>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.75rem', pointerEvents: 'auto' }}>
<Link
href="/configure/"
className="overlay-cta-btn"
style={{
display: 'inline-flex',
alignItems: 'center',
gap: '0.75rem',
padding: '1rem 2.5rem',
borderRadius: '3rem',
background: 'linear-gradient(135deg, #c4a265, #d4b47a)',
color: '#ffffff',
fontSize: '0.95rem',
fontWeight: 600,
letterSpacing: '0.1em',
textTransform: 'uppercase',
textDecoration: 'none',
boxShadow: '0 8px 32px rgba(196, 162, 101, 0.3)',
transition: 'all 0.3s ease',
}}
>
Configure Your G1
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
</svg>
</Link>
<span style={{ fontSize: '0.7rem', color: '#94a3b8', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
Build &amp; Order Your Robot
</span>
</div>
</OverlaySection>
{/* Scroll indicator mapped to vanish rapidly when scrolled */}
<motion.div