import React, { useState, useEffect, useRef, useMemo } from 'react'; /** * IMAGE URLS */ const HERO_IMAGE = 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_113640_ccf3cf97-d447-425b-a134-d7b09fc743fc.png&w=1280&q=85'; const SECTION2_IMAGE = 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_114219_414dfe80-f15c-4e25-bf52-b13721f4bd88.png&w=1280&q=85'; const SECTION3_IMG1 = 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_115253_c19ab167-8dd5-48b4-967d-b9f0d9d6e8fb.png&w=1280&q=85'; const SECTION3_IMG2 = 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_115237_fc519057-6e87-4abf-999a-9610b8b085b4.png&w=1280&q=85'; const SECTION3_BG = 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_114355_752ba9e6-0942-4abb-9047-5d9bb16632e9.png&w=1280&q=85'; /** * DATA CONSTANTS */ const featureBars = ['Advanced Dentistry', 'High Quality Equipment', 'Friendly Staff']; const services = [ { name: 'Dental\nVeneers', num: '01', active: true }, { name: 'Dental\nCrowns', num: '02', active: false }, { name: 'Teeth\nWhitening', num: '03', active: false }, { name: 'Dental\nImplants', num: null, active: false }, ]; /** * HOOKS */ const useIsMobile = () => { const [isMobile, setIsMobile] = useState(false); useEffect(() => { const mql = window.matchMedia('(max-width: 767px)'); const onChange = (e: MediaQueryListEvent | MediaQueryList) => setIsMobile(e.matches); onChange(mql); mql.addEventListener('change', onChange); return () => mql.removeEventListener('change', onChange); }, []); return isMobile; }; const useImageWidth = (bgImage: string, sectionHeight: number) => { const [renderWidth, setRenderWidth] = useState(0); useEffect(() => { if (!sectionHeight) return; const img = new Image(); img.src = bgImage; img.onload = () => { const width = img.naturalWidth * (sectionHeight / img.naturalHeight); setRenderWidth(width); }; }, [bgImage, sectionHeight]); return renderWidth; }; const useMaskPositions = (containerRef: React.RefObject, cardRefs: React.MutableRefObject<(HTMLElement | null)[]>) => { const [positions, setPositions] = useState<{ x: number; y: number; sw: number; sh: number }[]>([]); const [containerSize, setContainerSize] = useState({ w: 0, h: 0 }); useEffect(() => { if (!containerRef.current) return; const observer = new ResizeObserver((entries) => { for (const entry of entries) { const { width, height } = entry.contentRect; setContainerSize({ w: width, h: height }); const newPositions = cardRefs.current.map((card) => { if (!card || !containerRef.current) return { x: 0, y: 0, sw: width, sh: height }; const cRect = card.getBoundingClientRect(); const pRect = containerRef.current.getBoundingClientRect(); return { x: cRect.left - pRect.left, y: cRect.top - pRect.top, sw: width, sh: height, }; }); setPositions(newPositions); } }); observer.observe(containerRef.current); return () => observer.disconnect(); }, [containerRef, cardRefs]); return { positions, containerSize }; }; const useStaggeredReveal = (count: number, threshold = 0.15) => { const [visible, setVisible] = useState(false); const containerRef = useRef(null); useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setVisible(true); observer.disconnect(); } }, { threshold } ); if (containerRef.current) observer.observe(containerRef.current); return () => observer.disconnect(); }, [threshold]); const getAnimStyle = (index: number): React.CSSProperties => ({ opacity: visible ? 1 : 0, transform: visible ? 'translateY(0)' : 'translateY(24px)', transition: `opacity 0.6s cubic-bezier(0.16,1,0.3,1) ${index * 120}ms, transform 0.6s cubic-bezier(0.16,1,0.3,1) ${index * 120}ms`, }); return { containerRef, getAnimStyle }; }; /** * COMPONENTS */ interface MaskedCardProps { bgImage: string; position?: { x: number; y: number; sw: number; sh: number }; imageWidth: number; focalX: number; className?: string; children?: React.ReactNode; cardRef?: (el: HTMLElement | null) => void; style?: React.CSSProperties; } const MaskedCard: React.FC = ({ bgImage, position, imageWidth, focalX, className = '', children, cardRef, style = {}, }) => { const maskStyle = useMemo(() => { if (!position || !imageWidth) return {}; const overflow = imageWidth > position.sw ? imageWidth - position.sw : 0; const focalOffset = overflow * focalX; return { backgroundImage: `url(${bgImage})`, backgroundSize: `auto ${position.sh}px`, backgroundPosition: `-${position.x + focalOffset}px -${position.y}px`, backgroundRepeat: 'no-repeat', }; }, [bgImage, position, imageWidth, focalX]); return (

{children}

); }; const SplashScreen: React.FC<{ onComplete: () => void }> = ({ onComplete }) => { const [count, setCount] = useState(0); const [exiting, setExiting] = useState(false); useEffect(() => { const duration = 2000; const steps = 100; const interval = duration / steps; const timer = setInterval(() => { setCount((prev) => { if (prev >= 100) { clearInterval(timer); setTimeout(() => setExiting(true), 200); setTimeout(onComplete, 1100); return 100; } return prev + 1; }); }, interval); return () => clearInterval(timer); }, [onComplete]); return (

{count}

); }; const Navbar: React.FC = () => { const [isOpen, setIsOpen] = useState(false); const isMobile = useIsMobile(); useEffect(() => { if (isOpen) document.body.style.overflow = 'hidden'; else document.body.style.overflow = ''; return () => { document.body.style.overflow = ''; }; }, [isOpen]); return ( <> {/* Mobile Menu Overlay */}

setIsOpen(false)} />

{['Home', 'Services', 'About', 'Gallery', 'Contact'].map((link, i) => ( {link} ))}

Dental Emergency

); }; export default function App() { const [showSplash, setShowSplash] = useState(true); const isMobile = useIsMobile(); // Section 1 Refs & Hooks const section1Ref = useRef(null); const s1CardsRef = useRef<(HTMLElement | null)[]>([]); const { positions: s1Positions, containerSize: s1Size } = useMaskPositions(section1Ref, s1CardsRef); const s1ImageWidth = useImageWidth(HERO_IMAGE, s1Size.h); const s1Reveal = useStaggeredReveal(4); // Section 2 Refs & Hooks const section2Ref = useRef(null); const s2CardsRef = useRef<(HTMLElement | null)[]>([]); const { positions: s2Positions, containerSize: s2Size } = useMaskPositions(section2Ref, s2CardsRef); const s2ImageWidth = useImageWidth(SECTION2_IMAGE, s2Size.h); const s2Reveal = useStaggeredReveal(4); // Section 3 Reveal const s3Reveal = useStaggeredReveal(4); return (

{showSplash && setShowSplash(false)} />} {/* SECTION 1 - HERO */}

{ (section1Ref as any).current = el; (s1Reveal.containerRef as any).current = el; }} className="h-screen w-full overflow-hidden flex flex-col pt-24 md:pt-24 px-3 md:px-5 pb-1.5 md:pb-2 gap-1.5 md:gap-2" > {featureBars.map((text, i) => ( (s1CardsRef.current[i] = el)} bgImage={HERO_IMAGE} position={s1Positions[i]} imageWidth={s1ImageWidth} focalX={isMobile ? 0.7 : 0.8} className="w-full h-14 md:h-20 shrink-0 rounded-xl md:rounded-2xl overflow-hidden relative" style={s1Reveal.getAnimStyle(i)} > {text} ))} (s1CardsRef.current[3] = el)} bgImage={HERO_IMAGE} position={s1Positions[3]} imageWidth={s1ImageWidth} focalX={isMobile ? 0.7 : 0.8} className="w-full flex-1 min-h-0 rounded-xl md:rounded-2xl overflow-hidden relative" style={s1Reveal.getAnimStyle(3)} >

We wish to provide professional dental services
that match the current technologies

Trusted Dentist in West New York

Dental
Care

Free Consultation

{/* SECTION 2 - SMILE GALLERY */}

{ (section2Ref as any).current = el; (s2Reveal.containerRef as any).current = el; }} className="min-h-screen md:h-screen w-full overflow-hidden flex flex-col pt-1.5 md:pt-2 px-3 md:px-5 pb-1.5 md:pb-2 gap-1.5 md:gap-2" >

{/* Card 0 */} (s2CardsRef.current[0] = el)} bgImage={SECTION2_IMAGE} position={s2Positions[0]} imageWidth={s2ImageWidth} focalX={isMobile ? 0.65 : 0.8} className="rounded-xl md:rounded-2xl overflow-hidden relative min-h-[160px] md:min-h-0" style={s2Reveal.getAnimStyle(0)} >

Smile Gallery

Our cosmetic dental work

{/* Card 1 */} (s2CardsRef.current[1] = el)} bgImage={SECTION2_IMAGE} position={s2Positions[1]} imageWidth={s2ImageWidth} focalX={isMobile ? 0.65 : 0.8} className="md:row-span-2 rounded-xl md:rounded-2xl overflow-hidden relative min-h-[200px] md:min-h-0" style={s2Reveal.getAnimStyle(1)} >

If you want a gorgeous smile,
call us to ask about a smile makeover.

{/* Card 2 */} (s2CardsRef.current[2] = el)} bgImage={SECTION2_IMAGE} position={s2Positions[2]} imageWidth={s2ImageWidth} focalX={isMobile ? 0.65 : 0.8} className="rounded-xl md:rounded-2xl overflow-hidden relative min-h-[160px] md:min-h-0" style={s2Reveal.getAnimStyle(2)} >

Smile
makeover

{/* Card 3 - Services */} (s2CardsRef.current[3] = el)} bgImage={SECTION2_IMAGE} position={s2Positions[3]} imageWidth={s2ImageWidth} focalX={isMobile ? 0.65 : 0.8} className="col-span-1 md:col-span-2 rounded-xl md:rounded-2xl overflow-hidden relative min-h-[200px] md:min-h-0" style={s2Reveal.getAnimStyle(3)} >

{services.map((svc, i) => (

{svc.name}

{svc.num && (

{svc.num}

)}

))}

{/* SECTION 3 - IMPLANT DENTISTRY */}

{ (s3Reveal.containerRef as any).current = el; }} className="min-h-screen md:h-screen w-full overflow-hidden flex flex-col pt-1.5 md:pt-2 px-3 md:px-5 pb-1.5 md:pb-2 gap-1.5 md:gap-2" >

{/* Left Column */}

Implant
Dentistry

Restore Missing Teeth

Consultation

Dental
Restoration
Services

{/* Right Column */}

The Process
of Installing
Implants

Caring
for Dental
Implants

); }

DentalCare

Smile Gallery

Smilemakeover

{svc.name}

ImplantDentistry

DentalRestorationServices