Claude Code · claude-opus-5-5 · React (TSX)
원본 일러스트(3D 택배 상자 포함)는 공개 주소가 없어 Tailwind 목업으로 다시 그렸습니다.
결과 코드펼치기
/** PLOT. 워드마크(크기는 className 으로) */
function Wordmark({ className = "", color = "#020A22" }: { className?: string; color?: string }) {
return (
<svg viewBox="159 428 718 164" className={className} aria-hidden="true">
<path
fill={color}
fillRule="evenodd"
d="M178.5 430.5H263A46.5 46.5 0 0 1 263 523.5H197A7 7 0 0 0 190 530.5V578.5A11.5 11.5 0 0 1 167 578.5V531A30.5 30.5 0 0 1 197.5 500.5H263A23.5 23.5 0 0 0 263 453.5H178.5A11.5 11.5 0 0 1 178.5 430.5ZM354.5 442A11.5 11.5 0 0 1 377.5 442V548.5A18 18 0 0 0 395.5 566.5H469.5A11.5 11.5 0 0 1 469.5 589.5H395.5A41 41 0 0 1 354.5 548.5ZM505 509.5a81.5 81.5 0 1 0 163 0a81.5 81.5 0 1 0 -163 0ZM528 509.5a58.5 58.5 0 1 0 117 0a58.5 58.5 0 1 0 -117 0ZM712.5 430.5H843.5A11.5 11.5 0 0 1 843.5 453.5H789.5V578A11.5 11.5 0 0 1 766.5 578V453.5H712.5A11.5 11.5 0 0 1 712.5 430.5Z"
/>
<circle cx="851.5" cy="572.5" r="16.5" fill="#0055FF" />
</svg>
);
}
/** 제작물 4종 묶음: 블루 소개서, 홈페이지 창, 명함, 사원증이 겹쳐 놓인 그림 */
function UnifiedArt() {
return (
<div aria-hidden className="relative h-[170px] w-full max-w-[280px]">
<div className="absolute top-6 left-0 h-[110px] w-[80px] -rotate-6 rounded-md bg-[#0055FF] p-2 shadow-[0_8px_20px_rgba(2,10,34,0.18)]">
<Wordmark className="w-12" color="#FFFFFF" />
</div>
<div className="absolute top-0 left-[60px] w-[150px] overflow-hidden rounded-md bg-white shadow-[0_8px_20px_rgba(2,10,34,0.12)]">
<div className="flex gap-0.5 bg-[#F4F6F9] px-1.5 py-1">
<span className="size-1 rounded-full bg-[#8B95A1]" />
<span className="size-1 rounded-full bg-[#8B95A1]" />
<span className="size-1 rounded-full bg-[#8B95A1]" />
</div>
<div className="p-2">
<Wordmark className="w-10" />
<div className="mt-1 text-[9px] leading-tight font-extrabold text-[#020A22]">
아이디어에서
<br />
가능성으로.
</div>
<span className="mt-1 inline-block rounded-full bg-[#0055FF] px-1.5 py-0.5 text-[6px] font-bold text-white">서비스 알아보기</span>
</div>
</div>
<div className="absolute top-[86px] left-[44px] h-[58px] w-[110px] rotate-[-3deg] rounded-md bg-white p-2 shadow-[0_8px_20px_rgba(2,10,34,0.14)]">
<Wordmark className="w-12" />
<div className="mt-1.5 text-[8px] font-bold text-[#020A22]">직원 이름</div>
<div className="text-[6px] text-[#8B95A1]">Brand Designer</div>
<span className="absolute top-1.5 right-2 h-[44px] w-3 rounded-sm bg-[#0055FF]" />
</div>
<div className="absolute top-[70px] right-1 h-[82px] w-[58px] rotate-6 overflow-hidden rounded-md bg-white shadow-[0_8px_20px_rgba(2,10,34,0.14)]">
<div className="px-1.5 pt-1.5">
<Wordmark className="w-9" />
</div>
<span className="mx-auto mt-1.5 block size-6 rounded-full bg-[#EBF2FF] ring-2 ring-[#0055FF]/30" />
<div className="mt-1 text-center text-[6px] font-bold text-[#020A22]">직원 이름</div>
</div>
</div>
);
}
/** AI CI 제안 대화: 사용자 말풍선과 "이런 브랜드는 어때요?" 답 카드(컬러, 서체, 슬로건) */
function AiArt() {
return (
<div aria-hidden className="w-full max-w-[280px] space-y-2.5 text-left">
<div className="ml-auto flex w-fit items-center gap-2 rounded-xl bg-white px-3 py-2 text-[11px] font-semibold text-[#020A22] shadow-[0_4px_14px_rgba(2,10,34,0.08)]">
<span className="grid size-4 place-items-center rounded-full bg-[#EBF2FF] text-[#0055FF]">
<svg viewBox="0 0 24 24" className="size-3" fill="currentColor">
<circle cx="12" cy="8" r="4" />
<path d="M4 21a8 8 0 0 1 16 0Z" />
</svg>
</span>
따뜻하고 신뢰감 있는 IT 회사
</div>
<div className="rounded-xl bg-white p-3 shadow-[0_8px_24px_rgba(2,10,34,0.10)]">
<div className="flex items-center gap-1.5 text-[11px] font-bold text-[#020A22]">
<span className="grid size-4 place-items-center rounded bg-[#0055FF] text-[9px] text-white">+</span>
이런 브랜드는 어때요?
</div>
<dl className="mt-2 space-y-1.5 text-[10px]">
<div className="flex items-center gap-3">
<dt className="w-8 text-[#8B95A1]">컬러</dt>
<dd className="flex gap-1">
<span className="h-3 w-6 rounded bg-[#5B8CFF]" />
<span className="h-3 w-6 rounded bg-[#0055FF]" />
<span className="h-3 w-6 rounded bg-[#A9C2FF]" />
<span className="h-3 w-6 rounded bg-[#020A22]" />
</dd>
</div>
<div className="flex items-center gap-3 border-t border-[#E6E9EF] pt-1.5">
<dt className="w-8 text-[#8B95A1]">서체</dt>
<dd className="font-bold text-[#020A22]">Pretendard</dd>
</div>
<div className="flex items-center gap-3">
<dt className="w-8 text-[#8B95A1]">슬로건</dt>
<dd className="font-semibold text-[#020A22]">신뢰로 연결하는 더 나은 내일</dd>
</div>
</dl>
</div>
</div>
);
}
/** 인쇄 · 배송: 부채꼴로 펼친 종이 3장, 로고가 찍힌 명함 묶음, 블루 테이프를 붙인 택배 상자 */
function PrintArt() {
return (
<div aria-hidden className="relative h-[150px] w-full max-w-[260px]">
<span className="absolute bottom-3 left-2 h-[70px] w-[110px] -rotate-12 rounded-md bg-[#F3E9D2] shadow-sm" />
<span className="absolute bottom-4 left-5 h-[70px] w-[110px] -rotate-6 rounded-md bg-[#8CB2FF] shadow-sm" />
<span className="absolute bottom-5 left-8 h-[70px] w-[110px] -rotate-3 rounded-md bg-[#5B8CFF] shadow-sm" />
<div className="absolute bottom-6 left-12 grid h-[70px] w-[110px] place-items-center rounded-md bg-white shadow-[0_8px_18px_rgba(2,10,34,0.15)]">
<span className="text-[22px] font-black text-[#020A22]">
P<span className="text-[#0055FF]">.</span>
</span>
</div>
<div className="absolute right-1 bottom-10 h-[80px] w-[96px] rounded-md bg-[#C99B66] shadow-[0_10px_22px_rgba(2,10,34,0.18)]">
<span className="absolute top-0 left-1/2 h-full w-4 -translate-x-1/2 bg-[#0055FF]/85" />
<span className="absolute inset-x-0 top-0 h-3 rounded-t-md bg-[#D9B07F]" />
</div>
</div>
);
}
/** 홈페이지 호스팅: 자물쇠가 달린 주소창, 워드마크, 큰 제목과 버튼, 오른쪽 연블루 칸의 P 심볼 */
function HostingArt() {
return (
<div aria-hidden className="w-full max-w-[240px] overflow-hidden rounded-xl bg-white text-left shadow-[0_10px_28px_rgba(2,10,34,0.10)]">
<div className="flex items-center gap-1 bg-[#F4F6F9] px-2 py-1.5">
<span className="size-1 rounded-full bg-[#8B95A1]" />
<span className="size-1 rounded-full bg-[#8B95A1]" />
<span className="size-1 rounded-full bg-[#8B95A1]" />
<span className="ml-1.5 flex flex-1 items-center gap-1 rounded bg-white px-1.5 text-[7px] text-[#4E5968]">
<svg viewBox="0 0 24 24" className="size-2 text-[#0055FF]" fill="currentColor">
<path d="M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1Zm2 0h6V7a3 3 0 0 0-6 0Z" />
</svg>
plot.example
</span>
</div>
<div className="flex items-center gap-2 p-3">
<div className="flex-1">
<Wordmark className="w-11" />
<div className="mt-1.5 text-[11px] leading-tight font-extrabold text-[#020A22]">
아이디어에서
<br />
가능성으로.
</div>
<span className="mt-1.5 inline-block rounded-full bg-[#020A22] px-2 py-0.5 text-[6px] font-bold text-white">서비스 알아보기</span>
</div>
<div className="grid size-16 place-items-center rounded-lg bg-[#EBF2FF] text-[30px] font-black text-[#020A22]">
<span>
P<span className="text-[#0055FF]">.</span>
</span>
</div>
</div>
</div>
);
}
const CARDS = [
{ title: "제작물 4종을\n하나의 브랜드로", body: "컬러, 서체, 로고 규칙이 모든 제작물에 똑같이 적용돼요.", Art: UnifiedArt },
{ title: "AI가 제안하는\n새 CI", body: "지금 브랜드를 진단해 로고, 컬러, 서체, 슬로건을 한 벌로 제안하고, 고칠 점을 적으면 다시 만들어요.", Art: AiArt },
{ title: "인쇄부터 배송까지\n한 번에", body: "확정하면 인쇄용 PDF를 점검해 인쇄하고, 송장번호로 배송을 확인할 수 있어요.", Art: PrintArt },
{ title: "홈페이지 호스팅까지\n이어서", body: "만든 홈페이지를 바로 공개하고, 월 호스팅은 등록한 카드로 매달 자동 결제해요.", Art: HostingArt },
];
/** PLOT. 핵심 기능: 왼쪽 정렬 소제목 + 2줄 제목, 연회색 큰 카드 4개(데스크톱 2x2). 카드 위에 제목 · 설명, 오른쪽 아래에 그림. */
export default function CoreFeatures() {
return (
<section id="core" className="w-full scroll-mt-24 bg-white px-5 pb-28 text-[#020A22]">
<div className="mx-auto max-w-6xl">
<p className="text-lg font-medium text-[#0055FF]">우선 핵심부터.</p>
<h2 className="mt-3 text-[30px] leading-tight font-semibold tracking-[-0.04em] break-keep text-[#1B2233] md:text-[46px]">
흩어져 있던 브랜딩 작업
<br />
PLOT에서 한 번에 끝내세요
</h2>
<div className="mt-12 grid gap-5 md:grid-cols-2">
{CARDS.map(({ title, body, Art }) => (
<article key={title} className="flex min-h-[300px] flex-col justify-between gap-8 rounded-[28px] bg-[#F4F6FA] p-8 md:p-10">
<div>
<h3 className="text-[24px] leading-snug font-semibold tracking-[-0.03em] whitespace-pre-line text-[#1B2233]">{title}</h3>
<p className="mt-3 text-[15px] break-keep text-[#020A22]/60">{body}</p>
</div>
<div className="flex justify-end">
<Art />
</div>
</article>
))}
</div>
</div>
</section>
);
}
적용 사이트 0
이 블록이 실제로 쓰인 사이트입니다.
아직 등록된 사이트가 없습니다. 이 블록을 쓴 사이트가 있다면 알려 주세요.
재현 후기
v1 · 0개아직 이 버전의 프롬프트로 직접 만들어 본 사람이 없습니다. 첫 번째로 재현해 보세요.