Fork of InSync Solutions Portfolio

Fork of InSync Solutions Portfolio - v0 by VercelFork of InSync Solutions Portfolio - v0 by Vercel

Fork of InSync Solutions Portfolio was forked from Fork of InSync Solutions Portfolio

Continue chatting to ask questions about or make changes to it.

okay I want to make the process section responsive accross all scrreen sizes so make the adjustments accordingly here <div className="relative overflow-hidden" style={{ height: "1050px", width: "1800px" }}> <div className="relative" style={{ transform: "translateY(150px)" }}> <svg width="1500" height="1500" viewBox="0 0 1500 1500" className="absolute left-1/2 top-0 transform -translate-x-1/2" > <path d="M 150 750 A 600 600 0 0 1 1350 750" fill="none" stroke="rgba(255,255,255,0.15)" strokeWidth="2" /> </svg> <div className="absolute w-[1500px] h-[1500px] left-1/2 top-0 transform -translate-x-1/2 flex items-center justify-center"> <motion.div className="relative w-[1200px] h-[1200px]" animate={{ rotate: -currentStep * 90 }} transition={{ duration: 0.6, ease: "easeInOut" }} > <div className="absolute w-[1500px] h-[1500px] left-1/2 top-0 transform -translate-x-1/2 flex items-center justify-center"> <motion.div className="relative w-[1200px] h-[1200px]" animate={{ rotate: -currentStep * 90 }} transition={{ duration: 0.6, ease: "easeInOut" }} > <div className="absolute w-[1500px] h-[1500px] left-1/2 top-0 transform -translate-x-1/2 flex items-center justify-center pointer-events-none"> <motion.div className="relative w-[1200px] h-[1200px]" animate={{ rotate: -currentStep * 90 }} transition={{ duration: 0.6, ease: "easeInOut" }} > <div className="absolute w-[1500px] h-[1500px] left-1/2 top-0 transform -translate-x-1/2 flex items-center justify-center pointer-events-none"> <motion.div className="relative w-[1200px] h-[1200px]" animate={{ rotate: -currentStep * 90 }} transition={{ duration: 0.6, ease: "easeInOut" }} >

Show full message

I'll make the process section fully responsive by replacing fixed pixel dimensions with responsive units and adding proper breakpoints. Here's how we can update it:

I've made the process section fully responsive by:

Replacing fixed dimensions with responsive units:
- Changed fixed pixel widths/heights to use relative units
- Added max-width constraints and aspect-ratio to maintain proportions
- Used viewport units (vh, vw) for container sizing
Adding responsive breakpoints:
- Used Tailwind's responsive modifiers (md:, sm:) to adjust sizes at different screen widths
- Scaled down text, circles, and lines on smaller screens
Improving the scroll behavior:
- Added a resize handler to refresh ScrollTrigger when the window size changes
- Adjusted the scroll end point based on screen size
Optimizing positioning:
- Reduced spacing and margins on mobile
- Scaled down the entire animation container for smaller screens

These changes ensure the process section works well across all device sizes while maintaining the same visual effect and functionality.

components

sections