const [descExpanded, setDescExpanded] = useState(false);
const [detailsExpanded, setDetailsExpanded] = useState(false);
<section
className={`rounded-xl space-y-5 text-gray-500 max-xs:text-xs relative transition-all duration-500 ease-in-out ${
descExpanded ? 'max-h-full' : 'max-h-[200px] overflow-hidden'
} sm:max-h-full`}
>
</section>
{/* Toggle Button */}
<div className="absolute bottom-0 left-0 w-full bg-gradient-to-t from-gray-400 via-gray-400/50 to-transparent
sm:hidden">
<div className="flex justify-center p-2">
<Button
onClick={() => setDescExpanded(prev => !prev)}
variant="outline"
className="bg-muted border-none font-bold text-gray-700 p-0 h-8 w-auto px-4 rounded-full text-xs shadow-none"
>
{descExpanded ? 'See Less' : 'See More'}
</Button>
</div>
</div>