Build a CLEAN, LIGHT, easy-to-read web UI for "영상 팩토리" — a tool that turns a farm's field photos/recordings into short marketing videos for 단비팜몰 (Korean agricultural brand). ALL TEXT IN KOREAN. Next.js + Tailwind.
TOP PRIORITY = READABILITY & SIMPLICITY (the previous dark version was rejected for being too dark, low-contrast, and too cluttered). So:
#FFFFFF, cards on very light gray #F7F7F5. NO dark backgrounds anywhere.#18181B, HIGH CONTRAST, SHARP. Body text >= 15px, headings large. Secondary text #52525B (still clearly readable, never faint gray).#2E7D52 (for primary button + active state). Use sparingly.#E4E4E7, subtle shadow. Clean sans font (Pretendard/Inter).PURPOSE MUST BE OBVIOUS AT A GLANCE. At the very top, a clear one-line explainer: "현장에서 찍은 사진·영상·녹음으로 농산물 홍보 영상을 자동으로 만듭니다." Right next to it, a single large primary button: "＋ 새 영상 만들기" (green).
Keep it to ONE simple main screen (a left sidebar nav with 3 items only: 홈 / 영상 / 만들기). The home screen shows, simply and spaciously:
Now let me read the existing files and build the UI:
Now I have everything I need. Let me build all the files:
Now update the layout.tsx:
Now let me build the components:
Now update the main page:
The UI is complete. Here's a summary of what was built:
영상 팩토리 is a pure-light, Korean-language dashboard with:
#F7F7F5 background with a green logo mark, 3 nav items (홈 / 영상 / 만들기), active state highlighted in #EBF5EF / #2E7D52, and a user footer#FFFFFF, surface gray #F7F7F5, near-black #18181B, one accent #2E7D52 — no dark backgrounds anywhere, hairline #E4E4E7 borders, 12px radii, Pretendard font loaded via CDN빌드 에러로 화면이 안 보입니다. v0 프리뷰에 "Import Error — The file "tailwindcss" cannot be found" 가 뜹니다. CSS/Tailwind 설정을 고쳐서 프리뷰에서 정상 빌드·렌더되게 해주세요. globals.css의 @import "tailwindcss" 가 원인이면 제거하고, v0 프리뷰에서 확실히 작동하는 표준 Tailwind 설정을 쓰거나 그게 어려우면 일반 CSS/인라인 스타일로 바꿔주세요. 디자인(밝은 흰 배경·진한 고대비 글씨·큰 글자·단순한 레이아웃)은 100% 그대로 유지. 빌드만 고치면 됩니다.
No files exist yet in this project. I'll build the entire UI from scratch using only inline styles and standard CSS — no Tailwind imports that could fail in the v0 preview environment.
Good, now let me read all the existing files in parallel to understand the full picture.
Now let me read the page.tsx and any component files:
The project only has layout.tsx and globals.css. The root cause of the build error is @import 'tailwindcss' and @import 'tw-animate-css' at the top of globals.css — these can't resolve in the v0 preview runtime. I'll fix globals.css to remove those broken imports and keep only the CSS custom properties and base styles, then build the full page as a single page.tsx using only inline styles (zero Tailwind class dependencies).
Now fix layout.tsx to remove the Tailwind class usage that depends on the broken CSS setup, and use a Google Fonts link for Pretendard/Inter instead:
Now build the full page — sidebar + home content — entirely with inline styles so there's zero dependency on Tailwind resolving correctly:
세 가지를 수정했습니다.
globals.css — @import 'tailwindcss'와 @import 'tw-animate-css'(v0 프리뷰에서 resolve 불가)를 제거하고, @tailwind base/components/utilities 지시어와 표준 @layer base CSS로 교체했습니다. @theme inline 블록도 제거했습니다.layout.tsx — next/font, @vercel/analytics 의존성을 제거하고 Google Fonts + Pretendard CDN 링크로 대체했으며, Tailwind 클래스 대신 인라인 스타일을 사용했습니다.page.tsx — 사이드바, 상태 스트립, 최근 영상 목록을 포함한 전체 홈 화면을 100% 인라인 스타일로 새로 작성하여 Tailwind 의존성을 완전히 제거했습니다. 디자인(흰 배경, 고대비 텍스트, 그린 액센트, 여백 중심 레이아웃)은 요청하신 그대로 유지됩니다.