"use client"; import { motion, AnimatePresence, useScroll, useMotionValueEvent } from 'framer-motion'; import React, { useRef, useState } from 'react'; import { Check } from 'lucide-react'; const PEREDI_FONT_STYLE_ID = 'peredi-section-fonts'; function ensurePerediFonts() { if (typeof document === 'undefined' || document.getElementById(PEREDI_FONT_STYLE_ID)) return; const oswald = document.createElement('link'); oswald.rel = 'stylesheet'; oswald.href = 'https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;700&display=swap'; const cabinet = document.createElement('link'); cabinet.rel = 'stylesheet'; cabinet.href = 'https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400;500;700;800&display=swap'; const helpers = document.createElement('style'); helpers.id = PEREDI_FONT_STYLE_ID; helpers.textContent = ".font-oswald{font-family:'Oswald',sans-serif}.font-cabinet{font-family:'Cabinet Grotesk',sans-serif}"; document.head.append(oswald, cabinet, helpers); } ensurePerediFonts(); const BULLET_REVEAL_TIME = 8; const SCRUB_PORTION = 0.7; export default function AgencyHomePage() { const menuItems = ['Features', 'Technology', 'Gallery', 'Flavours']; const containerRef = useRef(null); const videoRef = useRef(null); const [showToast, setShowToast] = useState(false); const [toastMessage, setToastMessage] = useState(''); const [showBullets, setShowBullets] = useState(false); const [videoDuration, setVideoDuration] = useState(10); const { scrollYProgress } = useScroll({ target: containerRef, offset: ['start start', 'end end'], }); useMotionValueEvent(scrollYProgress, 'change', (progress) => { const video = videoRef.current; if (!video || video.readyState < 1) return; const duration = video.duration || videoDuration; const scrubProgress = Math.min(progress / SCRUB_PORTION, 1); const target = scrubProgress * duration; if (Math.abs(video.currentTime - target) > 0.04) { try { video.currentTime = target; } catch { } } const revealAt = Math.min(BULLET_REVEAL_TIME, duration) - 0.05; setShowBullets(target >= revealAt); }); const handleLoadedMetadata = (e: React.SyntheticEvent) => { const video = e.currentTarget; setVideoDuration(video.duration); video.pause(); video.currentTime = 0; }; const triggerToast = (message: string) => { setToastMessage(message); setShowToast(true); setTimeout(() => { setShowToast(false); }, 2800); }; return (

{showToast && ( {toastMessage} )} { e.preventDefault(); triggerToast('Navigating back to Home'); }} className="hover:opacity-80 active:scale-95 transition-all duration-200" style={{ display: 'inline-flex', alignItems: 'center', gap: '7px' }} id="logo-link" >

{ e.preventDefault(); const element = document.getElementById('workspace-form'); if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'center' }); triggerToast('Navigating to Project Form'); } else { triggerToast('Opening Project Form...'); } }} className="flex items-center hover:text-neutral-300 active:scale-95 transition-all duration-200 group cursor-pointer" id="start-project-link" > Start Your Project

{showBullets && ( <> e.stopPropagation()} >

Brand identity in just 14 days

e.stopPropagation()} >

Stand out and earn trust

e.stopPropagation()} >

Launch faster & save capital

)}

Move with confidence.

); }