Build a horizontal scroll website using:Next.js 14 with the App RouterTailwind CSS v4GSAP for animationsParticles.js for background effects🧩 Features Required:Horizontal Scroll LayoutAll sections scroll horizontally, not vertically.The layout must be fully responsive (desktop & mobile).Auto Snap / Section Reveal BehaviorAs the user scrolls, the next section snaps into view.When reaching Section 3, animate the first card image to appear from the top to its position (GSAP animation).AnimationsSmooth GSAP animations when sections or elements enter the viewport.Use ScrollTrigger to detect when a section is in view and trigger animations accordingly.Final Logo MovementOn the last section (e.g., Section 5), a logo moves or animates as the user scrolls past it.Auto Layout AdjustmentAll sections and elements should scale correctly across screen sizes (mobile, tablet, desktop).Particles BackgroundAdd Particles.js as a background effect for one or more sections.Next.js 14 App RouterTailwind CSS v4GSAP + ScrollTriggerParticles.jsFully Responsive & Mobile Firstuse the image for references added!
I'll create a horizontal scroll website based on the Sayyal Health Services design you've provided. This will feature smooth GSAP animations, particles background effects, and responsive design with Next.js 14 and Tailwind CSS v4.
I've created a comprehensive horizontal scroll website based on your Sayyal Health Services design with all the requested features:
The website captures the professional medical aesthetic from your reference images while providing a modern, interactive horizontal scrolling experience. Each section is carefully crafted to match the original designs with enhanced animations and responsiveness.