<aside> 💡 프로젝트 'Moduparking' 에서 구현한 기능들을 보여주는 페이지입니다. 서비스 소개 페이지, 제휴 협력 페이지에서 구현된 기능들을 보여줍니다. 기업 소개 페이지는 일괄적으로 적용된 반응형 그리드 이외엔 특별히 구현된 기능이 없어 제외했습니다.

</aside>

서비스 소개 페이지

렌더링했을 시 가장 처음에 나오는 페이지입니다. 메인 서비스의 핵심 가치와 정보들을 담고 있습니다.

ScrollAnimation을 사용하여 모바일 목업 이미지, 텍스트 등에 요소 애니메이션 효과를 부여했습니다. 이미지를 효과적으로 인식할 수 있도록 transition-delay를 사용했습니다.

기기별 반응형 그리드를 구현하기 위해 Sass를 사용했습니다. Vuetify의 그리드 breakpoint의 값을 모두컴퍼니가 요구하는 픽셀로 커스터마이징했습니다. 이후 v-container, v-row, v-col 등의 그리드 기능을 활용하여 일정 픽셀에서 화면을 원하는 비율로 나눴습니다. PC, 태블릿, 모바일 버전을 각각 구현하였고 그리드 시스템은 모든 페이지에 일괄적으로 적용되었습니다.