سلام دوستان

 من در  بخش جی کوئری این پروژه با یه ساختار متفاوت تونستم حجم کلاس‌های css ای که نوشتیم رو خیلی کم‌تر کنم و ساختار پروژه بهینه‌تر شد هم از لحاظ خوانایی بهینه‌تر شد  و هم حجم کد‌ها کم‌تر شد یه خورده. امیدوارم مفید باشه.

 <div class="splitPage">
            <div class="page leftSide">
                <h1>سلام</h1>
                <a class="ctaBTN" href="#">بزن بریم</a>
            </div>
            <div class="page rightSide">
                <h1>سلام دوباره</h1>
                <a class="ctaBTN" href="#">آماده ای ؟</a>
            </div>
        </div>

.activePage > h1::after {
  width: 100%;
}

$(document).ready( ()=> {
    $(".page").each(function (indexInArray, valueOfElement) { 
        $(this).mouseenter(()=> {
            $(this).addClass(" activePage").css("width", "80%");
            $(this).siblings(".page").css({
                "width": "20%",
                "opacity":".5"
            })
        }
        );
        $(this).mouseleave(() => {
            $(this).removeClass(" activePage").css("width","50%")
            $(this).siblings(".page").css({
                "width": "50%",
                "opacity":"1"
            })
        })
    });
});

بقیه استایل هایی که قرار ندادم مربوط به استایل‌های اولیه پروژه است که استاد کد نویسی کردند