애드리절트 웹사이트 클론

애드리절트(ADRESULT) 공식 웹사이트를 완벽하게 재현한 프로젝트입니다.

🌟 주요 특징

• 반응형 디자인: 모바일, 태블릿, 데스크톱 모든 기기에서 최적화
• 스크롤 애니메이션: 부드러운 페이드인, 슬라이드, 스케일 애니메이션 효과
• 인터랙티브 요소: 통계 카운터, 차트, 슬라이더 등 다양한 동적 요소
• 현대적 UI/UX: 애드리절트 브랜드 컬러와 디자인 언어 완벽 재현

🚀 기술 스택

• HTML5: 시맨틱 마크업
• CSS3: Flexbox, Grid, 애니메이션, 반응형 디자인
• JavaScript (ES6+): DOM 조작, Intersection Observer API, Canvas API
• Google Fonts: Noto Sans KR 폰트
• Font Awesome: 아이콘

📱 구현된 섹션

1. 헤더 네비게이션

   • 고정 헤더 (스크롤 시 투명도 변화)
   • 드롭다운 메뉴
   • 모바일 햄버거 메뉴

2. 히어로 섹션

   • 회사 소개 및 브랜딩

3. 통계 섹션

   • 132개월 최장수 고객 계약기간
   • 150+ 병원 고객 수
   • 1,272곳 누적 고객 수
   • 15,000+ 월간 콘텐츠 발행량
   • 애니메이션 카운터 효과

4. 고객 후기 슬라이더

   • 무한 스크롤 효과
   • 6개 고객 후기 자동 롤링

5. 맞춤 전략 섹션

   • 양방향 슬라이드 애니메이션

6. 성공 사례

   • 4개 병원 사례
   • 인터랙티브 차트
   • 성과 지표 시각화

7. 커스터마이제이션 전략

   • Canvas 기반 파이 차트
   • 비교 분석 시각화

8. 결과 중심 관리

   • 원형 다이어그램
   • 중앙 집중식 관리 체계 시각화

9. 유튜브 섹션

   • 고객 인터뷰 비디오 그리드
   • 플레이 버튼 오버레이

10. 푸터

    • 회사 정보
    • CTA 버튼
    • 연락처 정보

🎨 애니메이션 효과

• fade-in: 아래에서 위로 떠오르는 효과
• fade-in-left: 왼쪽에서 슬라이드인
• fade-in-right: 오른쪽에서 슬라이드인
• scale-in: 확대되며 나타나는 효과
• slide-up: 큰 거리에서 위로 슬라이드
• 시차 효과: 순차적 애니메이션 (0.1초 딜레이)

🔧 인터랙티브 기능

• 플로팅 버튼: 채팅(녹색), 전화(파란색), 이메일(노란색)
• 스크롤 헤더: 스크롤 시 배경 투명도 변화
• 호버 효과: 모든 버튼과 카드에 호버 애니메이션
• 통계 카운터: 뷰포트 진입 시 숫자 카운트업 애니메이션
• 무한 슬라이더: 고객 후기 자동 롤링 (호버 시 일시정지)

📞 연락처 정보

• 회사명: 애드리절트 (ADRESULT)
• 대표자: 이승민
• 전화: 02-1661-4829
• 주소: 서울시 강남구 헌릉로618길 9 (세곡동)
• 사업자등록번호: 889-88-00231

🚀 실행 방법

1. 저장소 클론

   git clone [repository-url]
   cd adresult-website

2. 로컬 서버 실행

   python -m http.server 8000

3. 브라우저에서 확인

   http://localhost:8000
   

📁 파일 구조

adresult-website/
├── index.html          # 메인 HTML 파일
├── styles.css          # CSS 스타일시트
├── script.js           # JavaScript 로직
└── README.md           # 프로젝트 문서

🎯 호환성

• 브라우저: Chrome, Firefox, Safari, Edge (최신 버전)
• 모바일: iOS Safari, Chrome Mobile
• 해상도: 320px ~ 1920px+ 반응형 지원

📝 라이선스

이 프로젝트는 애드리절트 공식 웹사이트를 학습 목적으로 클론한 것입니다.

---

Copyright© 2025 애드리절트 클론 프로젝트. All Rights reserved.