고품질 3D 인터랙티브 제품 소개 및 쇼룸 웹 애플리케이션을 프론트/백엔드 포함 구축할 때 사용합니다.
Build a production-ready, premium TVS Motor digital showroom website. This is a real product, not a demo or a mockup. Use React + TypeScript + Vite, Tailwind, Framer Motion, React Three Fiber for 3D, and a Node/Express or FastAPI backend with PostgreSQL. No placeholder text or lorem ipsum anywhere.
DESIGN LANGUAGE
- Cinematic premium automotive style. Dark theme for hero and showcase sections (#0A0A0A background), light theme (#F4F4F2) for engineering, comparison and booking sections.
- Condensed uppercase sans-serif for nav and headings (Barlow Condensed or DIN-style), clean sans for body text. Thin 1px divider lines, generous whitespace, sharp corners.
- Accent: TVS red used sparingly for CTAs and active states.
- Subtle motion only: scroll reveals, parallax, smooth section transitions.
GLOBAL NAVBAR
- Sticky, transparent over the hero, and solid on scroll.
- Left: TVS logo. Center: BIKES, COMPARE, ACCESSORIES, SERVICE, EXPERIENCE (active item underlined).
- Right: Search, Location, Account, Cart.
- Collapses into a full-screen menu on mobile.
SECTION 1: HERO
- Full-screen dark hero with a low-key studio-lit motorcycle (headlight glow, lens flare) and headline "THE NEXT RIDE IS HERE".
- Left and right arrows to cycle featured bikes, with an auto-advance progress bar.
- CTA button "EXPLORE BIKES".
- Preload the first image. Use a video or WebP fallback.
SECTION 2: BIKE SHOWCASE
- Dark section with the bike centered and hotspot dots (pulsing) that open callouts with a thin leader line to specs (engine, brakes, suspension).
- Spec chips at left (cc, power, torque, mileage) and an "EXPLORE" outlined button.
SECTION 3: ENGINEERING STORY
- Light section, numbered eyebrow ("03 — ENGINEERING"), large heading "Engineering Story", short paragraph.
- Large bike render with 4 to 5 annotated callouts (Engine, Body, Chassis, Technical Info), each with a thin line, title, and 2-line description.
- Callouts animate in one by one on scroll.
SECTION 4: COMPARISON
- Compare up to 3 bikes side by side. Cards show the image, wishlist heart, and variant selector.
- Spec rows for engine, power, torque, weight, mileage, price. Highlight the better value in each row.
- Pull all specs and pricing from the database, not hardcoded.
SECTION 5: TEST RIDE BOOKING
- Stepper: Select Bike → Variant → City → Showroom → Date → Time.
- Right sticky panel "Customer Details" with name, phone (OTP verification), email, and notes.
- Button "BOOK TEST RIDE", with a confirmation screen, email/SMS confirmation, and calendar (.ics) download.
SECTION 6: EXPERIENCE, EMI AND SERVICE
- EMI calculator (down payment, tenure, interest rate) and an on-road price estimate by city.
- Accessories catalogue, service booking, support and FAQ.
ADMIN AND DATA
- Admin panel to upload the pricing Excel workbook. Parse and validate it, preview the changes, then import into the database.
- CRUD for bikes, variants, colors, accessories, showrooms and bookings.
- 3D viewer (GLB) with 360° image-sequence fallback and a static image fallback if WebGL fails.
MOBILE
- Mobile-first responsive layout. Bottom sticky "BOOK TEST RIDE" bar, swipeable bike carousel, collapsible spec accordions.
- Navigation with breadcrumbs.
QUALITY BAR
- Lighthouse 90+ on performance, accessibility and SEO. Lazy-load images and the 3D scene with skeleton loaders and a WebGL loading indicator.
- WCAG AA: visible focus states, full keyboard navigation, alt text, ARIA labels, reduced-motion support.
- Form validation, error states, empty states, loading states.
- Clean folder structure, reusable components, .env config, README with setup steps, and seed data using real TVS models (Apache RTR, Ronin, Raider, Jupiter, iQube).
OUTPUT
Build it phase by phase. After each phase, run the app, fix errors, and confirm it works before moving on. Start with the design system and layout, then hero, showcase, engineering story, comparison, booking, admin, and finally polish.상용 서비스가 가능한 프리미엄 [TVS Motor] 디지털 쇼룸 웹사이트를 제작하세요. 단순 데모나 목업이 아닌 실제 제품입니다. React + TypeScript + Vite, Tailwind, Framer Motion, 3D 구현용 React Three Fiber, 그리고 PostgreSQL DB를 갖춘 Node/Express 또는 FastAPI 백엔드를 사용하세요. 더미 텍스트나 로렘 딥섬은 절대 금지합니다. 디자인 언어 - 시네마틱 프리미엄 모터스포츠 스타일. 히어로 및 제품 소개 섹션은 다크 테마(#0A0A0A), 엔지니어링/비교/예약 섹션은 라이트 테마(#F4F4F2). - 내비게이션 및 헤드라인용 응축된 대문자 고딕체, 본문용 깔끔한 무세리프체. 얇은 1px 구분선과 넓은 여백. - 강조색: CTA 버튼 및 활성 상태에 브랜드 레드 포인트 컬러 최소한으로 사용. 글로벌 내비게이션 바 - 스티키 형태, 히어로 영역 위에서는 투명하며 스크롤 시 불투명 전환. - 좌측: 브랜드 로고. 중앙: BIKES, COMPARE, ACCESSORIES, SERVICE, EXPERIENCE. - 우측: 검색, 위치, 계정, 장바구니. - 모바일에서는 전체 화면 메뉴로 축소. 섹션 1: 히어로 - 스튜디오 조명 연출이 적용된 풀스크린 다크 히어로 영역과 "THE NEXT RIDE IS HERE" 헤드라인. - featured 바이크 전환 화살표 및 자동 진행 프로그레스 바. - "EXPLORE BIKES" CTA 버튼. 섹션 2: 바이크 쇼케이스 - 바이크 중앙 배치 및 클릭 가능한 핫스팟 노드(펄스 효과)로 제원 팝업 표시. 섹션 3: 엔지니어링 스토리 - 라이트 테마 섹션, 주석이 달린 바이크 렌더링 이미지와 스크롤 시 하나씩 등장하는 애니메이션. 섹션 4: 제원 비교 - 최대 3대 바이크의 제원 및 가격을 Side-by-side 카드 형태로 비교하고 더 우수한 스펙 강조. 섹션 5: 시승 예약 시스템 - 스텝별 프로세스: 바이크 선택 → 트림 → 도시 → 지점 → 날짜 → 시간. - 우측 고객 정보 입력 폼 및 OTP 인증, 예약 완료 확인 창 및 캘린더(.ics) 다운로드 제공. 어드민 및 데이터 - 가격 정보 엑셀 업로드/파싱/미리보기 기능이 포함된 관리자 패널. 품질 기준 - Lighthouse 성능/접근성 90점 이상 달성, 반응형 웹, 예외 처리 완료. 출력 방식 단계별로 구현하세요. 각 단계를 마친 후 실행하고 오류를 수정한 뒤 다음 단계로 진행하세요.
출처 · prompts.chat · Premium TVS Motor Digital Showroom Website — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
원문과 같은 언어로 보완한 프롬프트입니다. 점수는 명확성 · 구체성 · 출력 형식 · 재사용성 기준의 AI 평가입니다.
Act as a Senior Full-Stack Architect. Build a production-ready, premium TVS Motor digital showroom website using [Tech Stack: React + TypeScript + Vite, Tailwind CSS, Framer Motion, React Three Fiber] and [Backend: Node/Express or FastAPI] with [Database: PostgreSQL]. No placeholder text or lorem ipsum anywhere.
[DESIGN SYSTEM & STYLING]
- Style: Cinematic automotive premium aesthetic. Hero & Showcase (#0A0A0A dark theme); Engineering, Comparison & Booking (#F4F4F2 light theme).
- Typography: Barlow Condensed or DIN-style uppercase headers, clean sans body text. 1px thin dividers, generous whitespace, sharp corners, TVS red (#E31E24) accents for CTAs.
- Motion: Subtle scroll-reveals, parallax, smooth transitions, full reduced-motion support.
[FEATURE SPECIFICATIONS]
- Global Navbar: Sticky (transparent to solid), brand logo, section navigation (BIKES, COMPARE, ACCESSORIES, SERVICE, EXPERIENCE), Search, Location, Account, Cart, full-screen mobile drawer.
- Section 1 (Hero): Dark studio-lit motorcycle showcase, auto-advance progress bar, cycle arrows, 'THE NEXT RIDE IS HERE' headline, preloaded fallback asset.
- Section 2 (Bike Showcase): Interactive pulsing hotspot dots with leader lines to specs, spec chips (cc, power, torque, mileage).
- Section 3 (Engineering): Numbered layout ('03 — ENGINEERING'), 3D/render with scroll-triggered animated callout cards.
- Section 4 (Comparison): Dynamic side-by-side spec & pricing comparison for up to 3 bikes powered by DB data, highlighting optimal specs.
- Section 5 (Test Ride Booking): Stepper (Bike → Variant → City → Showroom → Date → Time), OTP phone verification, sticky customer detail form, .ics calendar export.
- Section 6 (Finance & Support): Interactive EMI calculator, dynamic on-road price by city, accessories store, service scheduler, FAQ.
- Admin & Data: Excel pricing import parser with preview, CRUD panel for bikes/variants/bookings, WebGL 3D viewer (GLB) with 360° image sequence & static fallbacks.
- Mobile Optimization: Sticky bottom booking bar, touch-swipe carousels, collapsible accordions.
[NON-FUNCTIONAL REQUIREMENTS & WORKFLOW]
- Performance & Accessibility: Lighthouse score 90+, WCAG AA compliance (keyboard nav, ARIA labels, focus states), skeleton loaders.
- Data Seed: Real TVS models ([Seed Models: Apache RTR, Ronin, Raider, Jupiter, iQube]).
- Execution Plan: Build sequentially in phases (1. Design System → 2. Hero & Nav → 3. Showcase & Engineering → 4. Comparison & Booking → 5. Admin & API → 6. Optimization). Verify and test after each phase before proceeding.