강희태@gmlxo9917PLOT. 바뀌는 강조 단어와 워크스페이스 화면이 있는 히어로
히어로 블록가운데 정렬 큰 제목의 강조 단어가 명함, 홈페이지, 사업소개서, 사원증으로 바뀌고, 말풍선이 달린 주 버튼 아래에 제작물 4종을 보여 주는 워크스페이스 화면 목업이 있는 히어로입니다.
Claude Code · claude-opus-5-5 · React (TSX)
실제 서비스에서는 워크스페이스 화면을 실제 시안 컴포넌트로 그리는데, 블록에서는 Tailwind 목업으로 다시 그렸습니다. 스크롤할 때 아래에서 올라오는 효과는 전역 CSS가 필요해 뺐습니다.
결과 코드펼치기
"use client";
import { useEffect, useState } from "react";
const WORDS = ["명함", "홈페이지", "사업소개서", "사원증"];
/** 헤드라인의 강조 단어만 2.2초마다 바꾼다. 사라졌다가 아래에서 올라오며 나타난다. 동작 줄이기 설정이면 바꾸지 않는다. */
function Keyword() {
const [index, setIndex] = useState(0);
const [shown, setShown] = useState(true);
useEffect(() => {
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
let swap: number | undefined;
const id = window.setInterval(() => {
setShown(false);
swap = window.setTimeout(() => {
setIndex((i) => (i + 1) % WORDS.length);
setShown(true);
}, 180);
}, 2200);
return () => {
window.clearInterval(id);
window.clearTimeout(swap);
};
}, []);
return (
<span className={`inline-block pr-[0.04em] text-[#0055FF] transition-all duration-300 ease-out ${shown ? "translate-y-0 opacity-100" : "translate-y-[0.3em] opacity-0"}`}>
{WORDS[index]}
</span>
);
}
/** 브랜드 심볼: 둥근 사각형 안의 P 와 오른쪽 아래 잉크색 점. blue 는 블루 바탕에 흰 P, white 는 흰 바탕에 블루 P. */
function Symbol({ className = "", text = "text-[10px]", tone = "white" }: { className?: string; text?: string; tone?: "white" | "blue" }) {
return (
<span className={`relative grid shrink-0 place-items-center rounded-[22%] font-black ${tone === "blue" ? "bg-[#0055FF] text-white" : "bg-white text-[#0055FF]"} ${text} ${className}`}>
P
<span className="absolute right-[12%] bottom-[12%] size-[26%] rounded-full bg-[#020A22]" />
</span>
);
}
const RAIL = [
{ label: "홈", d: "M11.37 2.72a1 1 0 0 1 1.26 0l8 6.5a1 1 0 0 1-.63 1.78h-1v9a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-5h-2v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9H4a1 1 0 0 1-.63-1.78L11.37 2.72ZM12 4.78 6.8 9H7v10h2v-5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v5h2V9h.2Z" },
{ label: "브랜드", d: "M12 2a10 10 0 1 0 0 20h1a3.3 3.3 0 0 0 2.1-5.85.65.65 0 0 1 .42-1.15H18a4 4 0 0 0 4-4 10 10 0 0 0-10-9Zm0 2a8 8 0 0 0 0 16h1a1.3 1.3 0 0 0 .83-2.3A2.65 2.65 0 0 1 15.52 13H18a2 2 0 0 0 2-2 8 8 0 0 0-8-7Z" },
{ label: "제작물", d: "M8 7a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-8a3 3 0 0 1-3-3Zm3-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1ZM6 8a1 1 0 0 1-1 1H4v10h10v-1a1 1 0 1 1 2 0v1a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1a1 1 0 0 1 1 1Z", badge: 4 },
{ label: "견적", d: "M5 2h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1.55.83L16 20.2l-3.45 1.63a1 1 0 0 1-1.1 0L8 20.2l-2.45 1.63A1 1 0 0 1 4 21V3a1 1 0 0 1 1-1Zm1 2v15.13l1.45-.96a1 1 0 0 1 1.1 0L12 19.8l3.45-1.63a1 1 0 0 1 1.1 0l1.45.96V4ZM9 7h6a1 1 0 0 1 0 2H9a1 1 0 0 1 0-2Zm0 4h6a1 1 0 0 1 0 2H9a1 1 0 0 1 0-2Z" },
{ label: "호스팅", d: "M5 3h14a3 3 0 0 1 3 3v3a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3Zm0 2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1ZM5 12h14a3 3 0 0 1 3 3v3a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-3a3 3 0 0 1 3-3Zm0 2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1Z" },
];
/** 히어로 아래 워크스페이스 화면 그림(장식용). 왼쪽 아이콘 메뉴 + 제작물 4종 미리보기. */
function WorkspaceMock() {
return (
<div aria-hidden className="pointer-events-none overflow-hidden rounded-[28px] bg-[#EBF2FF] p-2 shadow-[0_30px_80px_rgba(2,10,34,0.10)] select-none md:p-3">
<div className="flex h-[300px] overflow-hidden rounded-[20px] bg-white sm:h-[420px] md:h-[500px]">
<div className="hidden w-[72px] shrink-0 flex-col items-center gap-3 border-r border-[#E6E9EF] py-4 sm:flex">
{RAIL.map((item) => {
const active = item.label === "제작물";
return (
<div key={item.label} className="flex flex-col items-center gap-1 text-[10px] font-medium text-[#8B95A1]">
<span className={`relative grid size-9 place-items-center rounded-xl ${active ? "bg-[#0055FF] text-white" : ""}`}>
<svg viewBox="0 0 24 24" className="size-5" fill="currentColor">
<path fillRule="evenodd" d={item.d} />
</svg>
{item.badge && (
<span className="absolute -top-1 -right-1.5 grid size-4 place-items-center rounded-full bg-[#0055FF] text-[9px] font-bold text-white ring-2 ring-white">{item.badge}</span>
)}
</span>
<span className={active ? "text-[#1B2233]" : ""}>{item.label}</span>
</div>
);
})}
</div>
<div className="min-w-0 flex-1 bg-[#F4F6F9] p-4 text-left md:p-6">
<div className="flex items-center justify-between">
<div>
<div className="text-[11px] font-semibold text-[#0055FF]">제작 관리</div>
<div className="text-lg font-bold text-[#1B2233]">제작물</div>
</div>
<div className="flex gap-1.5 text-[11px] font-semibold">
<span className="rounded-full bg-[#1B2233] px-3 py-1 text-white">전체</span>
<span className="rounded-full bg-white px-3 py-1 text-[#4E5968] ring-1 ring-[#E6E9EF]">인쇄물</span>
<span className="hidden rounded-full bg-white px-3 py-1 text-[#4E5968] ring-1 ring-[#E6E9EF] sm:inline">디지털</span>
</div>
</div>
<div className="mt-4 grid grid-cols-[1.5fr_1fr] gap-3 md:gap-4">
<div className="space-y-3 md:space-y-4">
{/* 홈페이지 */}
<div className="rounded-2xl bg-white p-2 ring-1 ring-[#E6E9EF]/70 md:p-3">
<div className="overflow-hidden rounded-lg ring-1 ring-[#E6E9EF]">
<div className="flex items-center gap-1 bg-[#F4F6F9] px-2 py-1.5">
<span className="size-1.5 rounded-full bg-[#FF5F57]" />
<span className="size-1.5 rounded-full bg-[#FEBC2E]" />
<span className="size-1.5 rounded-full bg-[#28C840]" />
<span className="ml-2 h-3 flex-1 rounded bg-white text-center text-[6px] leading-3 text-[#8B95A1]">https://plot.example</span>
</div>
<div className="flex items-center justify-between px-3 py-2">
<span className="flex items-center gap-1 text-[8px] font-bold text-[#020A22]">
<Symbol tone="blue" className="size-3.5" text="text-[7px]" />
PLOT
</span>
<span className="hidden gap-2 text-[6px] text-[#4E5968] sm:flex">
<span>회사소개</span>
<span>서비스</span>
<span>고객사례</span>
<span>문의하기</span>
</span>
</div>
<div className="flex items-center gap-3 px-3 pt-1 pb-3 md:px-5 md:pb-5">
<div className="flex-1 text-center">
<div className="text-[6px] font-semibold text-[#0055FF] md:text-[8px]">브랜딩 플랫폼</div>
<div className="mt-1 text-[11px] font-extrabold tracking-[-0.03em] text-[#020A22] md:text-[18px]">아이디어에서 가능성으로.</div>
<p className="mx-auto mt-1 hidden max-w-[260px] text-[7px] text-[#4E5968] md:block">명함, 홈페이지, 사업소개서, 사원증을 하나의 브랜드로 만들고 인쇄와 호스팅까지 이어 주는 브랜딩 플랫폼입니다.</p>
<div className="mt-2 flex justify-center gap-1">
<span className="rounded-full bg-[#0055FF] px-2 py-0.5 text-[6px] font-bold text-white md:text-[7px]">상담 신청하기</span>
<span className="rounded-full px-2 py-0.5 text-[6px] font-bold text-[#020A22] ring-1 ring-[#E6E9EF] md:text-[7px]">서비스 소개</span>
</div>
</div>
<div className="relative hidden aspect-square w-[28%] overflow-hidden rounded-xl bg-[#F4F6FA] sm:block">
<span className="absolute -top-[20%] -right-[20%] aspect-square w-[80%] rounded-full bg-[#0055FF]" />
<span className="absolute -bottom-[20%] -left-[15%] aspect-square w-[45%] rounded-full bg-[#8CB2FF]" />
<span className="absolute top-[20%] left-[18%] aspect-square w-[12%] rounded-full bg-[#020A22]" />
<span className="absolute inset-0 grid place-items-center">
<span className="grid size-[42%] place-items-center rounded-[22%] bg-white shadow-[0_6px_16px_rgba(2,10,34,0.12)]">
<Symbol tone="blue" className="size-[70%]" text="text-[14px]" />
</span>
</span>
</div>
</div>
</div>
</div>
{/* 사업소개서 표지 */}
<div className="rounded-2xl bg-white p-2 ring-1 ring-[#E6E9EF]/70 md:p-3">
<div className="relative aspect-[297/120] overflow-hidden rounded-lg bg-gradient-to-br from-[#0055FF] to-[#0039B3] p-3 text-white md:p-5">
<span className="flex items-center gap-1.5 text-[8px] font-bold md:text-[11px]">
<Symbol className="size-4 md:size-5" text="text-[8px]" />
PLOT
</span>
<span className="absolute top-[22%] right-[10%] aspect-square w-[6%] rounded-full bg-[#020A22]" />
<div className="absolute bottom-3 left-3 md:bottom-5 md:left-5">
<div className="text-[6px] tracking-wider text-white/70 md:text-[8px]">COMPANY PROFILE 2026</div>
<div className="text-[10px] font-extrabold md:text-[15px]">PLOT 회사소개서</div>
</div>
</div>
</div>
</div>
<div className="space-y-3 md:space-y-4">
{/* 명함 앞면 */}
<div className="rounded-2xl bg-white p-2 ring-1 ring-[#E6E9EF]/70 md:p-3">
<div className="relative grid aspect-[90/50] place-items-center overflow-hidden rounded-md bg-[#0055FF] text-white">
<span className="absolute -top-[45%] -right-[12%] aspect-square w-[55%] rounded-full bg-white/25" />
<div className="relative flex flex-col items-center">
<Symbol className="size-6 md:size-9" text="text-[11px] md:text-[16px]" />
<div className="mt-1 text-[10px] font-extrabold md:text-[15px]">PLOT</div>
<div className="text-[6px] text-white/80 md:text-[8px]">아이디어에서 가능성으로.</div>
</div>
</div>
</div>
{/* 사원증 */}
<div className="rounded-2xl bg-white p-2 ring-1 ring-[#E6E9EF]/70 md:p-3">
<div className="mx-auto w-1/2 overflow-hidden rounded-md bg-white shadow-[0_2px_8px_rgba(2,10,34,0.08)] ring-1 ring-[#E6E9EF]">
<div className="relative h-10 bg-[#0055FF] px-2 pt-1.5 md:h-16">
<span className="flex items-center gap-1 text-[6px] font-bold text-white md:text-[8px]">
<Symbol className="size-2.5 md:size-3.5" text="text-[5px]" />
PLOT
</span>
<span className="absolute -bottom-3 left-1/2 grid size-7 -translate-x-1/2 place-items-center overflow-hidden rounded-full bg-[#EBF2FF] ring-2 ring-white md:-bottom-5 md:size-11">
<svg viewBox="0 0 24 24" className="mt-1 size-[85%] text-[#0055FF]" fill="currentColor">
<circle cx="12" cy="9" r="4.5" />
<path d="M3 22a9 9 0 0 1 18 0Z" />
</svg>
</span>
</div>
<div className="px-1 pt-4 pb-2 text-center md:pt-7 md:pb-3">
<div className="text-[8px] font-extrabold text-[#020A22] md:text-[12px]">직원 이름</div>
<div className="text-[5px] font-semibold text-[#0055FF] md:text-[7px]">브랜드팀</div>
<div className="text-[5px] text-[#4E5968] md:text-[7px]">브랜드 디자이너</div>
</div>
<div className="bg-[#020A22] py-0.5 text-center text-[5px] font-bold tracking-wider text-white md:text-[7px]">PL-0001</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
/**
* PLOT. 히어로. 가운데 정렬 큰 제목(강조 단어가 바뀜), 말풍선이 달린 주 버튼과 외곽선 버튼, 아래에 워크스페이스 화면 그림.
*/
export default function Hero() {
return (
<section className="w-full overflow-hidden bg-white px-5 pt-16 pb-20 text-[#020A22] md:pt-24">
<div className="mx-auto max-w-6xl text-center">
<a href="#" className="inline-flex items-center gap-1.5 text-[15px] font-semibold text-[#020A22]/80 transition-colors hover:text-[#020A22]">
<svg viewBox="0 0 24 24" className="size-4 text-[#0055FF]" fill="currentColor" aria-hidden="true">
<path d="M10 3c.55 0 .8.35 1 .95l1.4 4.2a3 3 0 0 0 1.9 1.9l4.2 1.4c1.26.42 1.26 1.48 0 1.9l-4.2 1.4a3 3 0 0 0-1.9 1.9l-1.4 4.2c-.42 1.26-1.48 1.26-1.9 0l-1.4-4.2a3 3 0 0 0-1.9-1.9l-4.2-1.4c-1.26-.42-1.26-1.48 0-1.9l4.2-1.4a3 3 0 0 0 1.9-1.9l1.4-4.2C9.35 3.35 9.6 3 10 3Z" />
<path d="m19 1 1.2 3.8L24 6l-3.8 1.2L19 11l-1.2-3.8L14 6l3.8-1.2Z" />
</svg>
AI 리브랜딩 · CI 제안
<span aria-hidden>›</span>
</a>
<p className="mt-6 text-[30px] font-light tracking-[-0.04em] break-keep md:text-[48px]">브랜딩 올인원 플랫폼 PLOT</p>
<h1 className="mt-1 text-[34px] leading-tight font-extrabold tracking-[-0.05em] break-keep md:text-[64px]">
<Keyword />
까지, 한 번에.
</h1>
<div className="mt-12 flex flex-wrap items-center justify-center gap-4">
<div className="relative">
<span className="absolute -top-10 left-1/2 -translate-x-1/2 motion-safe:animate-bounce">
<span className="block rounded-lg bg-white px-3 py-1.5 text-[13px] font-semibold whitespace-nowrap shadow-[0_4px_16px_rgba(2,10,34,0.12)]">진단과 CI 제안은 무료</span>
</span>
<a href="#" className="block rounded-full bg-[#0055FF] px-12 py-4 text-lg font-bold text-white transition-colors hover:bg-[#0047D6]">
무료로 시작하기
</a>
</div>
<a href="#showcase" className="rounded-full px-12 py-[14px] text-lg font-bold ring-2 ring-[#020A22] ring-inset transition-colors hover:bg-[#020A22] hover:text-white">
제작 상품 보기
</a>
</div>
<div className="mx-auto mt-16 max-w-5xl">
<WorkspaceMock />
</div>
</div>
</section>
);
}
적용 사이트 0
이 블록이 실제로 쓰인 사이트입니다.
아직 등록된 사이트가 없습니다. 이 블록을 쓴 사이트가 있다면 알려 주세요.
재현 후기
v1 · 0개아직 이 버전의 프롬프트로 직접 만들어 본 사람이 없습니다. 첫 번째로 재현해 보세요.