forked from hazem/yslootahrobotics
321 lines
13 KiB
TypeScript
321 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import { useScroll, useTransform, motion } from 'framer-motion';
|
|
import { ReactNode } from 'react';
|
|
import Link from 'next/link';
|
|
|
|
interface SectionProps {
|
|
children: ReactNode;
|
|
progress: any;
|
|
startAt: number;
|
|
peakAt: number;
|
|
endAt: number;
|
|
align: 'center' | 'left' | 'right';
|
|
verticalAlign?: 'top' | 'center' | 'bottom';
|
|
offsetY?: number;
|
|
className?: string;
|
|
}
|
|
|
|
function OverlaySection({
|
|
children,
|
|
progress,
|
|
startAt,
|
|
peakAt,
|
|
endAt,
|
|
align,
|
|
verticalAlign = 'center',
|
|
offsetY = 50,
|
|
className = '',
|
|
}: SectionProps) {
|
|
// Define a wide "plateau" zone where the text is fully readable and static.
|
|
// We use 30% of the travel distance for fading in, 30% for fading out.
|
|
const diffIn = peakAt - startAt;
|
|
const diffOut = endAt - peakAt;
|
|
|
|
const inStart = startAt;
|
|
const inEnd = startAt + diffIn * 0.4; // Fades in quickly
|
|
const outStart = endAt - diffOut * 0.6; // Holds for a long time
|
|
const outEnd = endAt;
|
|
|
|
// Smooth fade in and out mapping over a lengthy plateau
|
|
const opacity = useTransform(
|
|
progress,
|
|
[inStart, inEnd, outStart, outEnd],
|
|
[0, 1, 1, 0]
|
|
);
|
|
|
|
// Translate Y to slide in, pause entirely while reading, slide out
|
|
const y = useTransform(
|
|
progress,
|
|
[inStart, inEnd, outStart, outEnd],
|
|
[offsetY, 0, 0, -offsetY]
|
|
);
|
|
|
|
// Scale stays at 1.0 during reading mode
|
|
const scale = useTransform(
|
|
progress,
|
|
[inStart, inEnd, outStart, outEnd],
|
|
[0.95, 1, 1, 1.05]
|
|
);
|
|
|
|
const alignStyle: React.CSSProperties =
|
|
align === 'left'
|
|
? { alignItems: 'flex-start' }
|
|
: align === 'right'
|
|
? { alignItems: 'flex-end' }
|
|
: { left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };
|
|
|
|
const alignClass =
|
|
align === 'left'
|
|
? 'overlay-section-left'
|
|
: align === 'right'
|
|
? 'overlay-section-right'
|
|
: 'overlay-section-center';
|
|
|
|
const verticalStyle: React.CSSProperties =
|
|
verticalAlign === 'top'
|
|
? { top: '15vh' }
|
|
: verticalAlign === 'bottom'
|
|
? { bottom: '15vh', top: 'auto' }
|
|
: { top: '50%' };
|
|
|
|
// Glass panel appearance for side text to not clash with the robot
|
|
const isCenter = align === 'center';
|
|
const panelStyle: React.CSSProperties = isCenter
|
|
? { textAlign: 'center' }
|
|
: {
|
|
background: 'rgba(255, 255, 255, 0.92)',
|
|
backdropFilter: 'blur(20px)',
|
|
WebkitBackdropFilter: 'blur(20px)',
|
|
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.08)',
|
|
border: '1px solid rgba(255, 255, 255, 0.6)',
|
|
textAlign: align === 'left' ? 'left' : 'right',
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
className={`${alignClass} ${className}`.trim()}
|
|
style={{
|
|
position: 'absolute',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
opacity,
|
|
pointerEvents: 'none',
|
|
...verticalStyle,
|
|
...alignStyle,
|
|
}}
|
|
>
|
|
<motion.div
|
|
style={{
|
|
y,
|
|
scale,
|
|
...panelStyle,
|
|
}}
|
|
className={`will-change-transform ${isCenter ? '' : 'overlay-panel'}`}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
// Section timing definitions to match ScrollScene camera moves
|
|
const SECTION_CONFIGS = [
|
|
{ id: 'brand', startAt: 0, peakAt: 0.05, endAt: 0.15, align: 'center' as const, verticalAlign: 'top' as const },
|
|
{ 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.75, peakAt: 0.82, endAt: 0.90, align: 'right' as const, verticalAlign: 'center' as const },
|
|
];
|
|
|
|
export function ScrollOverlays() {
|
|
const { scrollYProgress } = useScroll();
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: 'fixed',
|
|
inset: 0,
|
|
zIndex: 10,
|
|
pointerEvents: 'none',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
{/* 1. Brand Intro */}
|
|
<OverlaySection progress={scrollYProgress} {...SECTION_CONFIGS[0]} className="overlay-brand">
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '1rem', marginBottom: '1rem' }}>
|
|
<div style={{ width: '30px', height: '1px', background: 'linear-gradient(90deg, transparent, #c4a265)' }} />
|
|
<span style={{ fontSize: '0.75rem', fontWeight: 600, color: '#c4a265', letterSpacing: '0.4em', textTransform: 'uppercase' }}>
|
|
YS Lootah Robotics
|
|
</span>
|
|
<div style={{ width: '30px', height: '1px', background: 'linear-gradient(90deg, #c4a265, transparent)' }} />
|
|
</div>
|
|
<p style={{ fontSize: '0.9rem', color: '#64748b', fontWeight: 400, letterSpacing: '0.15em', margin: 0 }}>
|
|
Pioneering Humanoid Robotics in the UAE
|
|
</p>
|
|
</OverlaySection>
|
|
|
|
{/* 2. Hero */}
|
|
<OverlaySection progress={scrollYProgress} {...SECTION_CONFIGS[1]}>
|
|
<motion.h1 className="overlay-hero-heading" style={{ fontWeight: 200, color: '#1a1a2e', lineHeight: 1.0, letterSpacing: '-0.04em', margin: 0 }}>
|
|
The Future
|
|
</motion.h1>
|
|
<motion.h1 className="overlay-hero-heading" style={{ fontWeight: 200, color: '#1a1a2e', lineHeight: 1.0, letterSpacing: '-0.04em', margin: '0.1em 0 0' }}>
|
|
of <span style={{ color: '#c4a265', fontWeight: 400 }}>Robotics</span>
|
|
</motion.h1>
|
|
<p style={{ fontSize: '1rem', color: '#475569', lineHeight: 1.7, margin: '1.5rem 0 0', fontWeight: 300 }}>
|
|
Meet the G1 Humanoid Robot. Fully customizable, enterprise-ready, designed for the world of tomorrow.
|
|
</p>
|
|
</OverlaySection>
|
|
|
|
{/* 3. Head Reveal */}
|
|
<OverlaySection progress={scrollYProgress} {...SECTION_CONFIGS[2]}>
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
|
|
<div style={{ width: '50px', height: '2px', background: '#c4a265', marginBottom: '1.5rem' }} />
|
|
<div style={{ fontSize: '0.65rem', fontWeight: 600, color: '#c4a265', letterSpacing: '0.3em', textTransform: 'uppercase', marginBottom: '1rem' }}>
|
|
Intelligent by Design
|
|
</div>
|
|
<h2 className="overlay-heading" style={{ fontWeight: 300, color: '#1a1a2e', lineHeight: 1.1, margin: '0 0 1rem', letterSpacing: '-0.03em' }}>
|
|
Vision That<br />Understands
|
|
</h2>
|
|
<p style={{ fontSize: '0.95rem', color: '#475569', lineHeight: 1.6, margin: 0, fontWeight: 300 }}>
|
|
Advanced computer vision and neural processing. The G1 sees, interprets, and responds to the world in real-time.
|
|
</p>
|
|
<div style={{ display: 'flex', gap: '2.5rem', marginTop: '2rem' }}>
|
|
<div style={{ textAlign: 'center' }}>
|
|
<div className="overlay-stat" style={{ fontWeight: 300, color: '#1a1a2e', fontFamily: 'monospace' }}>360°</div>
|
|
<div style={{ fontSize: '0.65rem', color: '#64748b', letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: '0.5rem' }}>Field of View</div>
|
|
</div>
|
|
<div style={{ textAlign: 'center' }}>
|
|
<div className="overlay-stat" style={{ fontWeight: 300, color: '#1a1a2e', fontFamily: 'monospace' }}>{'<'}50ms</div>
|
|
<div style={{ fontSize: '0.65rem', color: '#64748b', letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: '0.5rem' }}>Response Time</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</OverlaySection>
|
|
|
|
{/* 4. Customization */}
|
|
<OverlaySection progress={scrollYProgress} {...SECTION_CONFIGS[3]}>
|
|
<div style={{ width: '50px', height: '2px', background: '#c4a265', marginBottom: '1.5rem' }} />
|
|
<div style={{ fontSize: '0.65rem', fontWeight: 600, color: '#c4a265', letterSpacing: '0.3em', textTransform: 'uppercase', marginBottom: '1rem' }}>
|
|
Your Identity
|
|
</div>
|
|
<h2 className="overlay-heading" style={{ fontWeight: 300, color: '#1a1a2e', lineHeight: 1.1, margin: '0 0 1rem', letterSpacing: '-0.03em' }}>
|
|
Dress for Any<br />Mission
|
|
</h2>
|
|
<p style={{ fontSize: '0.95rem', color: '#475569', lineHeight: 1.6, margin: 0, fontWeight: 300 }}>
|
|
From traditional Emarati Kandura to industrial safety gear and professional business attire. Configure every detail to match your brand.
|
|
</p>
|
|
<div style={{ display: 'flex', gap: '1rem', marginTop: '2rem' }}>
|
|
{['Kandura', 'Vest', 'Suit'].map((label) => (
|
|
<div
|
|
key={label}
|
|
style={{
|
|
padding: '0.5rem 1rem',
|
|
borderRadius: '2rem',
|
|
background: 'rgba(196, 162, 101, 0.1)',
|
|
border: '1px solid rgba(196, 162, 101, 0.3)',
|
|
fontSize: '0.75rem',
|
|
color: '#c4a265',
|
|
letterSpacing: '0.1em',
|
|
fontWeight: 500
|
|
}}
|
|
>
|
|
{label}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</OverlaySection>
|
|
|
|
{/* 5. Mobility */}
|
|
<OverlaySection progress={scrollYProgress} {...SECTION_CONFIGS[4]}>
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
|
|
<div style={{ width: '50px', height: '2px', background: '#c4a265', marginBottom: '1.5rem' }} />
|
|
<div style={{ fontSize: '0.65rem', fontWeight: 600, color: '#c4a265', letterSpacing: '0.3em', textTransform: 'uppercase', marginBottom: '1rem' }}>
|
|
Advanced Mobility
|
|
</div>
|
|
<h2 className="overlay-heading" style={{ fontWeight: 300, color: '#1a1a2e', lineHeight: 1.1, margin: '0 0 1rem', letterSpacing: '-0.03em' }}>
|
|
23 Degrees of<br />Freedom
|
|
</h2>
|
|
<p style={{ fontSize: '0.95rem', color: '#475569', lineHeight: 1.6, margin: 0, fontWeight: 300 }}>
|
|
State-of-the-art locomotion enabling natural human-like movement, balance, and agility across any terrain.
|
|
</p>
|
|
<div style={{ display: 'flex', gap: '2.5rem', marginTop: '2rem' }}>
|
|
<div style={{ textAlign: 'center' }}>
|
|
<div className="overlay-stat" style={{ fontWeight: 300, color: '#1a1a2e', fontFamily: 'monospace' }}>2m/s</div>
|
|
<div style={{ fontSize: '0.65rem', color: '#64748b', letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: '0.5rem' }}>Max Speed</div>
|
|
</div>
|
|
<div style={{ textAlign: 'center' }}>
|
|
<div className="overlay-stat" style={{ fontWeight: 300, color: '#1a1a2e', fontFamily: 'monospace' }}>127kg</div>
|
|
<div style={{ fontSize: '0.65rem', color: '#64748b', letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: '0.5rem' }}>Payload</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</OverlaySection>
|
|
|
|
{/* Configure CTA — appears at the very end of scroll */}
|
|
<OverlaySection
|
|
progress={scrollYProgress}
|
|
startAt={0.90}
|
|
peakAt={0.95}
|
|
endAt={1.0}
|
|
align="center"
|
|
verticalAlign="center"
|
|
className="overlay-cta-section"
|
|
>
|
|
<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 & Order Your Robot
|
|
</span>
|
|
</div>
|
|
</OverlaySection>
|
|
|
|
{/* Scroll indicator mapped to vanish rapidly when scrolled */}
|
|
<motion.div
|
|
className="overlay-scroll-hint"
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: '2.5rem',
|
|
left: '50%',
|
|
x: '-50%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
opacity: useTransform(scrollYProgress, [0, 0.05], [1, 0]),
|
|
}}
|
|
>
|
|
<span style={{ fontSize: '0.65rem', fontWeight: 500, color: '#64748b', letterSpacing: '0.3em', textTransform: 'uppercase', marginBottom: '1rem' }}>
|
|
Scroll to Explore
|
|
</span>
|
|
<div className="scroll-indicator" />
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|