وجود مساحة زائدة في الصفحة في الشاشات الصغيرة

المشكلة لديك في ملف src\Components\Hero.tsx في سطر 8 .

حيث لاحظ أنك إستخدمت الكلاس الذي يسمى w-[700px] وهذا الأمر يقوم بجعل العنصر له عرض 700px وبما أن عرض الشاشة أقل من 640 ويصبح عرض هذا العنصر 700 تحدث تلك المشكلة.

لهذا يجب تحديد طول هذا العنصر في الشاشات الصغيرة ويجب ألا يتخطي حجم الشاشة .

او يمكنك إستخدام الكلاس .overflow-hidden على العنصر الأب له وهو في سطر 7 :

<div className="overflow-hidden hero max-w-[1200px] px-[2rem] mx-auto flex items-center justify-between">