AndrewTaras/profpak-landing

HTML 모듈 생성

사용 시기

사용자가 랜딩 페이지의 새 모듈(Header, Hero, Problems, Products, Offer, Stats, Process, About, FAQ, ContactForm, Footer 또는 ChatWidget) 생성을 요청합니다.

프로세스

1. 사용자로부터 모듈 계약(Data In → HTML Out 블록)을 받습니다.
2. 계약에 사용된 모든 Tailwind 클래스가 디자인 시스템에 존재하는지 확인합니다 (AGENTS.md 참조).
3. 계약에서 색상을 참조하는 경우, 오직 디자인 시스템의 클래스만 사용합니다:
   • bg-industrial-blue, bg-industrial-orange, bg-stretch-cyan, bg-polymer-silver
   • bg-blue-500, bg-orange-500 등 표준 Tailwind 팔레트는 사용할 수 없습니다.
4. 계약을 엄격히 준수하여 HTML 코드를 생성합니다.
5. HTML만 반환합니다. 마크다운 래퍼나 설명 없이 순수 코드만 반환합니다.

생성 규칙

플레이스홀더 이미지

계약에 '배경 이미지 - 플레이스홀더'가 명시된 경우 다음을 사용합니다:

• 히어로 배경: https://placehold.co/1920x1080/0B3C5D/FFFFFF?text=Hero+Image
• 상품 카드: https://placehold.co/800x600/328CC1/FFFFFF?text=Product
• '제조사 소개' 갤러리: https://placehold.co/800x800/0B3C5D/FFFFFF?text=Factory

아이콘

모든 아이콘은 Lucide를 통해 사용합니다:

<i data-lucide="shield" class="h-5 w-5 text-stretch-cyan"></i>

프로젝트에서 자주 사용되는 아이콘: shield, truck, package, droplet, zap, check-circle-2, phone, message-circle, map-pin, factory, microscope, globe-2, leaf, apple, pill, settings-2, hand.

CTA 버튼 (주요)

<a href="#" class="inline-flex items-center gap-2 rounded-lg bg-industrial-orange px-7 py-3.5 text-sm font-bold text-white shadow-cta transition hover:bg-orange-600 hover:-translate-y-0.5">
  텍스트 <i data-lucide="arrow-right" class="h-4 w-4"></i>
</a>

보조 버튼

<a href="#" class="inline-flex items-center gap-2 rounded-lg border border-white/30 bg-white/5 px-7 py-3.5 text-sm font-bold text-white backdrop-blur-sm transition hover:bg-white/10">
  텍스트
</a>

상품 카드

<article class="group overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-100 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
  <div class="h-48 overflow-hidden">
    <img src="..." alt="..." class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" />
  </div>
  <div class="p-7">
    <p class="text-xs font-bold text-stretch-cyan mb-1">01 / CATEGORY</p>
    <h3 class="text-xl font-extrabold text-slate-900">이름</h3>
    <p class="mt-2 text-sm leading-6 text-slate-500">설명</p>
  </div>
</article>

섹션 (래퍼)

<section id="이름" class="px-6 py-20 lg:px-8 lg:py-24 bg-polymer-silver">
  <div class="mx-auto max-w-7xl">
    <!-- 콘텐츠 -->
  </div>
</section>

그리드

• 상품: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8
• 통계: grid grid-cols-2 md:grid-cols-4 gap-6
• 프로세스: grid grid-cols-1 md:grid-cols-5 gap-6
• FAQ: grid grid-cols-1 md:grid-cols-2 gap-4
• 문제점: grid grid-cols-1 md:grid-cols-3 gap-8

출력 전 체크리스트

• 계약의 모든 클래스가 사용되었습니다
• 디자인 시스템의 클래스만 사용되었습니다 (bg-blue-500 등 사용 금지)
• 반응형 접두사(sm:, md:, lg:)가 포함되었습니다
• 이미지에 alt 및 loading="lazy" 속성이 포함되었습니다
• 인터랙티브 요소에 aria-label 또는 의미 있는 텍스트가 포함되었습니다
• 인라인 스타일이 없습니다
• HTML 주변에 마크다운 래퍼가 없습니다
• 코드 전후에 설명이 없습니다

호출 예시

사용자:

다음 계약에 따라 Hero 컴포넌트를 생성해 줘: bgImage — 플레이스홀더, headline — '스트레치 필름 - 화물의 안전한 보호', bullets — [shield: 안정적인 고정, droplet: 습기 보호, zap: 높은 인장 강도, package: 경제적인 사용], ctaPrimary — '배치 계산하기' → https://wa.me/79064680377

당신:

<section id="home" class="relative min-h-screen flex items-center overflow-hidden bg-slate-950">
  ...
</section>

(설명 없이 HTML만 출력)