Design System
미니멀하고 세련된 디자인 시스템입니다. Light/Dark 모드를 모두 지원합니다.
Colors
Primary (Indigo)
Accent (Blue)
Secondary (Gray)
Status Colors
Typography
AIGEO Score
AI 시대의 검색 최적화
핵심 서비스
섹션 제목
카드 제목 및 강조 텍스트
본문 텍스트입니다. Team HAI는 SEO를 넘어 AEO와 GEO까지 아우르는 AI 시대 종합 검색 최적화 플랫폼입니다.
보조 텍스트 및 캡션에 사용됩니다.
라벨, 태그, 메타 정보에 사용됩니다.
Buttons
Variants
Sizes
With Icons
States
Inputs
Variants
Sizes
With Icons
Error State
This field is required
Select
Please select an option
Checkbox & Toggle
Checkbox
Toggle
Cards
Default Card
Basic card with header
카드 컨텐츠 영역입니다. 다양한 정보를 표시할 수 있습니다.
Elevated Card
Card with shadow
그림자가 있는 카드입니다.
Highlight Card
NewEmphasized card style
강조가 필요한 콘텐츠에 사용됩니다.
Top Accent Card
Card with colored top border accent
상단에 컬러 액센트 보더가 있는 카드입니다. borderTopColor를 style로 지정하여 원하는 색상을 사용합니다.
Interactive Card
Clickable card with hover effect
호버 시 테두리 색상이 변경되는 인터랙티브 카드입니다.
87
AIGEO Score
Image Cards
AI Analytics Dashboard
실시간 AI 검색 트렌드 분석과 인사이트를 확인하세요.
SEO Performance
월간 SEO 성과 리포트와 개선 추천사항입니다.
GEO Strategy Guide
AI 시대 검색 최적화 전략 가이드북
Horizontal Layout (Left Image)
Enterprise Plan
대규모 팀을 위한 맞춤형 AI 검색 최적화 솔루션입니다. 전담 매니저와 함께 브랜드 성장을 가속화하세요.
Background Image with Overlay
Next-Gen AI Platform
더 강력해진 AI 분석 엔진으로 검색 최적화의 새로운 기준을 제시합니다.
Video Card Style
AIGEO 시작하기
Carousel
Basic Carousel
Multi-Slide Carousel
Image Card Carousel
Analytics
실시간 분석 대시보드
Reports
상세 리포트 생성
Insights
AI 인사이트 도출
Team
협업 기능
Autoplay Carousel
Hashtag
Variants
Sizes
Interactive & Removable
Hashtag Input
현재 태그: SEO, AEO, GEO
Hashtag Group (Selectable)
선택됨: SEO
MultiSelect
Basic MultiSelect
선택됨: 0개
Grouped MultiSelect
Limited Selection (Max 3)
With Error State
최소 1개 이상 선택해주세요
Sizes
Badges
Variants
Sizes
With Dot
Dismissible
Avatar
Sizes
With Image & Fallback
CNJDAvatar Group
Tabs
Default Tabs
Overview content goes here.
Line Tabs
Details content.
Pills Tabs
All items.
Skeleton
Basic
Avatar Skeleton
Text Skeleton
Card Skeleton
Gradients & Effects
Text Gradient
AI가 추천하지 않으면, 브랜드는 존재하지 않는다.
Glow Effects
Primary Glow
Glass Effect
Glass Morphism
Backdrop blur effect
Navbar
Default Navbar
Solid Navbar
Blur (Glass) Navbar
Scroll to see glass effect
Footer
Default Footer
Footer with Newsletter
Minimal Footer
Centered Footer
Hero
Default Hero (Fade In)
AI 시대의 검색 최적화
Slide Up Hero
AI가 추천하지 않으면,
브랜드는 존재하지 않는다
Stagger Animation Hero
AIGEO Score로 시작하는
검색 최적화 여정
Gradient Animation Hero
The Future of Search Optimization
Particles Hero
Real-time AI Search Analytics
Split Layout Hero (with Image)
Complete Search Optimization Suite
AIGEO Score
Floating Components
Floating Action Button (FAB)
Variants
Sizes
With Badge
Extended FAB
With Pulse Animation
FAB Group
Scroll Progress
스크롤 진행률을 표시하는 프로그레스 바입니다. 이 페이지 상단에서 실제 동작을 확인할 수 있습니다.
ScrollProgress 컴포넌트는 페이지 상단/하단에 고정되어 현재 스크롤 위치를 표시합니다.
Back to Top
페이지를 아래로 스크롤하면 우측 하단에 "위로 가기" 버튼이 나타납니다.
Fixed Position Demo
FloatingButton은 다양한 position으로 화면에 고정할 수 있습니다:
position="relative"로 설정하면 flow 레이아웃에서 사용 가능합니다.
Modal
Basic Modal
Sizes
Overlay Darkness
Usage Code
import { Modal, ModalContent, ModalHeader, ModalTitle,
ModalDescription, ModalBody, ModalFooter } from "@/components/ui";
<Modal open={isOpen} onOpenChange={setIsOpen}>
<ModalContent size="lg" rounded="md">
<ModalHeader>
<ModalTitle>제목</ModalTitle>
<ModalDescription>설명</ModalDescription>
</ModalHeader>
<ModalBody>내용</ModalBody>
<ModalFooter>
<Button>확인</Button>
</ModalFooter>
</ModalContent>
</Modal>Stat
Basic Stats
Stats with Icons
Stats with Trends
Stat Variants
Value Colors
ProgressBar
Basic Progress
Sizes
Colors
Auto Color (threshold-based)
With Labels
SentimentBadge
Sentiment Variants
With Score Display
Custom Thresholds
ScoreDisplay
Basic Score
Sizes
With Change Indicator
Without Max / Custom Suffix
Manual Color
Full Width Layout Demo
Navbar, Hero, Footer는 전체 너비 레이아웃에서 사용됩니다. 아래 버튼을 클릭하면 실제 전체 너비 데모를 볼 수 있습니다.
실제 랜딩 페이지에서는 container를 사용하지 않고 전체 너비로 렌더링됩니다. Hero, Navbar, Footer 컴포넌트는 내부적으로 container를 관리합니다.