[기술 스택 및 제약 사항]
단일 index.html 파일로 출력하세요. (CSS와 JS는 <style>, <script> 태그 안에 작성)
외부 라이브러리는 CDN만 사용하세요. (스타일링: Tailwind CSS, 아이콘: FontAwesome 또는 Lucide, 폰트: Google Fonts의 'Noto Sans KR')
절대 분할된 코드로 나누지 말고, 에러 없이 바로 브라우저에서 실행될 수 있는 완성된 코드를 한 번에 출력해야 합니다.
모바일, 태블릿, 데스크톱을 완벽하게 대응하는 반응형 디자인을 적용하세요.
[디자인 및 색상 가이드]
분위기: 깔끔하고 신뢰감을 주는 모던 인테리어 스타일
메인 컬러: #2C3E50 (딥 네이비/차콜)
서브 컬러: #F39C12 (고급스러운 골드/앰버 - 강조 버튼용)
배경색: #FFFFFF (메인), #F8F9FA (섹션 교차 배경)
이미지는 https://placehold.co/해상도x해상도/색상/흰색글자?text=설명 형식의 플레이스홀더를 사용하세요.
[필수 포함 섹션 (상단 → 하단 순서)]
Header: 좌측 로고(텍스트), 우측 메뉴(시공소개, 시공사례, 시공과정, 견적문의) 및 '무료 견적' 강조 버튼. 스크롤 시 배경이 불투명해지는 고정 헤더.
Hero Section: 시공 전후 비교(Before/After) 느낌을 주는 임팩트 있는 배경 이미지, "완벽한 타일 시공으로 공간의 가치를 높입니다"라는 메인 카피, 전화번호 및 견적 문의 CTA 버튼 2개.
Trust Indicators (신뢰 배너): 경력 00년, 시공 건수 000+건, 고객 만족도 99%, A/S 보증 등을 아이콘과 함께 가로 배치.
Services (시공 분야): 도배/장판 제외, 타일 전문 시공(욕실 타일, 거실 바닥 타일, 벽 타일, 줄눈 시공, 방수 시공 등) 4~6개 항목을 카드 그리드로 구성. 호버 시 살짝 올라가는 효과.
Portfolio (시공 사례): 최근 시공 사진 6장을 깔끔한 Masonry 또는 3x2 격자로 배치. 클릭하면 모달(팝업)로 크게 보이는 JS 기능 포함.
Process (시공 과정): '상담及견적 → 현장 실측 → 자재 선정 및 계약 → 본 시공 → 사후 관리(A/S)' 5단계를 타임라인 또는 스텝 아이콘으로 시각화.
Testimonials (고객 후기): 실제 고객 리뷰 3개를 슬라이더 형태가 아닌 세로 카드로 깔끔하게 나열 (이름, 평점 별표, 리뷰 텍스트).
FAQ: 자주 묻는 질문 4~5개 (아코디언 형태, 클릭 시 답변 열림/닫힘 JS 기능 필수).
Contact (견적 문의): 좌측에 회사 연락처, 영업시간, 간단한 지도(플레이스홀더), 우측에 폼(이름, 전화번호, 평수/면적, 시공 종류 셀렉트박스, 문의사항 textarea, 제출 버튼).
Footer: 회사명, 사업자등록번호, 대표자명, 주소, 저작권 표기.
[UX 및 인터랙션 지침]
모든 버튼은 호버(Hover) 시 색상이 밝아지거나 그림자가 생기는 트랜지션을 추가하세요.
스크롤 시 각 섹션이 부드럽게 나타나는(Fade-in up) CSS 또는 간단한 JS 인터랙션을 적용하세요.
모바일 환경에서는 Header 메뉴가 햄버거 버튼으로 변환되고, 클릭 시 전체 화면 메뉴(또는 슬라이드 메뉴)가 나타나게 하세요.
위 모든 조건을 충족하는 완벽한 단일 HTML 코드를 즉시 작성하여 출력하십시오.
https://chat.z.ai/c/86430de0-38b3-4c16-aa75-3ff9b27f6315