WIGTN Homepage

와 이게 되네? (Wow, this works?) - AI Agent 개발 회사 소개 홈페이지

🚀 Features

• Modern Tech Stack: Next.js 15 + React 19 + TypeScript + Tailwind CSS
• Smooth Animations: Framer Motion으로 구현된 부드러운 인터랙션
• Responsive Design: 모든 디바이스에서 완벽한 반응형 디자인
• Dark Mode: 세련된 다크 테마
• Glassmorphism UI: 트렌디한 글래스모피즘 디자인
• Distinctive Typography: Syne + DM Sans 폰트 조합

🎨 Design Philosophy

"Precision Magic" - 기술적 정밀함과 AI의 마법이 만나는 곳

• Electric Cyan/Amber 컬러로 에너지 표현
• 유동적인 애니메이션과 기하학적 정밀함의 조화
• 해외 트렌디한 디자인 (Vercel, Linear 스타일)

🛠️ Getting Started

Installation

npm install

Development

npm run dev

Open http://localhost:3000 to view it in your browser.

Build

npm run build
npm start

📁 Project Structure

wigtn-homepage/
├── app/
│   ├── layout.tsx          # Root layout with fonts
│   ├── page.tsx            # Main page
│   └── globals.css         # Global styles
├── components/
│   ├── navigation.tsx      # Header navigation
│   ├── hero.tsx           # Hero section with video bg
│   ├── how-it-works.tsx   # Workflow visualization
│   └── contact.tsx        # Contact form
├── lib/
│   └── utils.ts           # Utility functions
└── public/
    └── placeholder-video.mp4  # Background video

🎯 Sections

1. Hero: 비디오 배경과 스크롤 애니메이션이 있는 히어로 섹션
2. How It Works: 5단계 워크플로우 시각화
3. Contact: 글래스모피즘 스타일의 문의 폼

🎨 Color Palette

• Background: Rich dark blue-gray (#0A0A0F)
• Primary: Electric Cyan (#00F0FF)
• Secondary: Electric Amber (#FF9500)
• Accent: Electric Blue (#0066FF)

📝 License

© 2024 WIGTN. All rights reserved.