Microsoft Fluent Design

https://design.microsoft.com/ 웹사이트의 디자인을 상세히 분석해주세요. 다음 항목들을 포함해서 분석해주세요: 1. **전체적인 디자인 철학과 브랜드 아이덴티티** - 사이트가 전달하고자 하는 핵심 메시지와 감성 - 타겟 사용자와 그들에게 어필하는 방식 2. **색상 팔레트 (Color Palette)** - 주요 색상 (Primary colors) - 보조 색상 (Secondary colors) - 배경색, 텍스트 색상 - 색상의 HEX/RGB 코드 추출 3. **타이포그래피 (Typography)** - 사용된 폰트 패밀리 - 제목, 본문, 버튼 등의 폰트 크기와 굵기 - 행간(line-height), 자간(letter-spacing) 4. **레이아웃 구조 (Layout Structure)** - 그리드 시스템과 간격(spacing) - 섹션 구성 방식 - 반응형 디자인 전략 (모바일, 태블릿, 데스크톱) 5. **주요 UI 컴포넌트** - 네비게이션 바 - 버튼 스타일 - 카드 컴포넌트 - 폼 요소 - 기타 특징적인 UI 요소 6. **시각적 요소** - 이미지 사용 방식 (크기, 비율, 처리 방법) - 아이콘 스타일 - 그래픽 요소와 일러스트레이션 - 애니메이션과 마이크로 인터랙션 7. **사용자 경험 (UX) 패턴** - 네비게이션 흐름 - 콜투액션(CTA) 배치와 디자인 - 스크롤 경험과 페이지 전환 - 로딩 상태와 피드백 8. **기술적 구현 추정** - 사용된 것으로 보이는 프레임워크/라이브러리 - CSS 기법 (Flexbox, Grid, 등) - 애니메이션 기술 - 성능 최적화 기법 9. **차별화 포인트** - 다른 사이트와 구별되는 독특한 디자인 요소 - 혁신적인 UX 패턴 - 기억에 남는 브랜딩 요소 분석 후, 이 디자인 스타일을 활용한 랜딩 페이지를 만드는 실용적인 구현 가이드를 제공해주세요.

https://design.microsoft.com/의 히어로 섹션 스타일을 참고하여, 다음 요구사항을 만족하는 히어로 섹션을 만들어주세요: - 반응형 디자인 (모바일, 태블릿, 데스크톱 대응) - 매력적인 제목과 부제목 - 명확한 CTA 버튼 - 배경 이미지 또는 그라데이션 - 부드러운 스크롤 애니메이션 HTML, CSS, JavaScript로 구현해주세요.

https://design.microsoft.com/의 네비게이션 바 디자인을 참고하여, 다음 기능을 가진 네비게이션 바를 구현해주세요: - 로고와 메뉴 항목 - 스크롤 시 배경색 변화 - 모바일 햄버거 메뉴 - 부드러운 트랜지션 효과 - 현재 페이지 하이라이트 React 또는 Vanilla JavaScript로 구현해주세요.

https://design.microsoft.com/의 카드 디자인을 참고하여, 반응형 카드 그리드를 만들어주세요: - CSS Grid 또는 Flexbox 사용 - 호버 시 애니메이션 효과 - 이미지, 제목, 설명, CTA 버튼 포함 - 다크 모드 지원 - 3단 그리드 (데스크톱), 2단 (태블릿), 1단 (모바일) CSS와 HTML로 구현해주세요.