)
}
// Background STACK (cobalt + orange + cyan + grid + particles) - NO fade layer
// Each variant composes its own transition on top
const BackgroundStack = ({ children }) => (
{children}
)
const NAV_ITEMS = [
{ label: 'Özellikler', target: 'intro' },
{ label: 'Pazaryerleri', target: 'unified' },
{ label: 'Fiyatlandırma', target: 'pricing' },
]
const MOBILE_BREAKPOINT = 768 // Below this: hamburger menu
const LandingNav = () => {
const [scrolled, setScrolled] = React.useState(false)
const [isMobile, setIsMobile] = React.useState(
typeof window !== 'undefined' && window.innerWidth < MOBILE_BREAKPOINT,
)
// Scroll-event detection (replaces IntersectionObserver which had an iOS
// Safari bug: sentinel at top:0 + rootMargin -60px meant NOT-intersecting
// from the start, so scrolled was permanently true → header never transparent).
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 20)
onScroll()
window.addEventListener('scroll', onScroll, { passive: true })
return () => window.removeEventListener('scroll', onScroll)
}, [])
// Viewport width tracker — mobile detection
React.useEffect(() => {
const onResize = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
onResize()
window.addEventListener('resize', onResize)
return () => window.removeEventListener('resize', onResize)
}, [])
const scrollTo = (target) => {
const el = document.getElementById(target)
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })
}
// Navigate PARENT window (escapes iframe). Same-origin so allowed.
const goTo = (path) => {
try {
window.top.location.href = path
} catch {
window.location.href = path
}
}
// Logo click: back to landing root (scroll-top + reload effect)
const onLogoClick = () => goTo('/')
// Primary CTA click: waitlist
const onStartClick = () => goTo('/waitlist')
// Login link (added 2026-05-04 — fix for "no visible way back to dashboard
// after cookie expires"). Routes/index.tsx now also auto-revives via
// refreshSession(); this link is the visible fallback for the 5% where
// the refresh-token is also dead.
const onLoginClick = () => goTo('/login')
return (
)
}
const HeroBody = () => (
E-Ticaret Yeniden Tasarlandı
Birleşik e-ticaretin
gücünü{' '}
serbest bırakın
Trendyol, Shopify, Hepsiburada ve n11 hesaplarınızı tek bir kokpite bağlayın. Siparişleri
onaylayın, stokları yönetin, fiyatları otomatikleştirin — hepsini Genius AI eşliğinde.
)
// ========== Mockups stage (scroll-scale-fade, independent per mockup) ==========
// Mimics framer-motion useScroll({target, offset:["start 90%","end start"]}).
// Progress is 0 when the element's top is 90% down the viewport, 1 when its
// bottom crosses the viewport top. Each mockup has its own progress so the
// scale curves differ (monitor grows more dramatically than phone).
const useScrollProgress = (ref) => {
const [progress, setProgress] = React.useState(0)
React.useEffect(() => {
if (!ref.current) return
let raf = 0
let last = -1
const tick = () => {
if (!ref.current) {
raf = requestAnimationFrame(tick)
return
}
const rect = ref.current.getBoundingClientRect()
const vh = window.innerHeight || 800
const startY = 0.9 * vh
const endY = -rect.height
const p = (startY - rect.top) / (startY - endY)
const clamped = Math.max(0, Math.min(1, p))
if (Math.abs(clamped - last) > 0.002) {
last = clamped
setProgress(clamped)
}
raf = requestAnimationFrame(tick)
}
tick()
return () => cancelAnimationFrame(raf)
}, [])
return progress
}
const interp = (p, inputs, outputs) => {
if (p <= inputs[0]) return outputs[0]
if (p >= inputs[inputs.length - 1]) return outputs[outputs.length - 1]
for (let i = 0; i < inputs.length - 1; i++) {
if (p >= inputs[i] && p <= inputs[i + 1]) {
const t = (p - inputs[i]) / (inputs[i + 1] - inputs[i])
return outputs[i] + t * (outputs[i + 1] - outputs[i])
}
}
return outputs[0]
}
const MockupsStage = () => {
const monitorRef = React.useRef(null)
const phoneRef = React.useRef(null)
const monitorProgress = useScrollProgress(monitorRef)
const phoneProgress = useScrollProgress(phoneRef)
// Mobile detection — auf Mobile keine negativen Overlaps + kleinere Scale
const [isMobile, setIsMobile] = React.useState(
typeof window !== 'undefined' && window.innerWidth < 768,
)
React.useEffect(() => {
const onResize = () => setIsMobile(window.innerWidth < 768)
window.addEventListener('resize', onResize)
return () => window.removeEventListener('resize', onResize)
}, [])
const monitorScale = isMobile
? interp(monitorProgress, [0, 0.4, 1], [1, 1.05, 1.15])
: interp(monitorProgress, [0, 0.4, 1], [1.2, 1.38, 1.68])
// Full opacity while mockup sits in lower viewport, gentle fade as it scrolls up
// End opacity ~0.25 so it's visible but "receding" when leaving the screen
const monitorOpacity = interp(monitorProgress, [0, 0.4, 0.9], [1, 1, 0.25])
const phoneScale = isMobile
? interp(phoneProgress, [0, 0.4, 1], [0.9, 0.95, 1.0])
: interp(phoneProgress, [0, 0.4, 1], [1, 1.1, 1.3])
const phoneOpacity = interp(phoneProgress, [0, 0.4, 0.9], [1, 1, 0.25])
return (