[V0_FILE]plaintext:file=".gitignore" isMerged="true" node_modules/ .next/ .env [V0_FILE]markdown:file="README.md" isMerged="true" # 킹버스 랜딩페이지 *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/myeongayunsu-2801s-projects/v0-) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/y6HfRozHN3B) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/myeongayunsu-2801s-projects/v0-](https://vercel.com/myeongayunsu-2801s-projects/v0-)** ## Build your app Continue building your app on: **[https://v0.app/chat/y6HfRozHN3B](https://v0.app/chat/y6HfRozHN3B)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: #000000; --foreground: #ffffff; --card: #1a1a1a; --card-foreground: #ffffff; --popover: #1a1a1a; --popover-foreground: #ffffff; --primary: #cc0000; --primary-foreground: #ffffff; --secondary: #333333; --secondary-foreground: #ffffff; --muted: #333333; --muted-foreground: #999999; --accent: #cc0000; --accent-foreground: #ffffff; --destructive: #ff0000; --destructive-foreground: #ffffff; --border: #333333; --input: #1a1a1a; --ring: #cc0000; --radius: 0.625rem; --sidebar: #000000; --sidebar-foreground: #ffffff; --sidebar-primary: #cc0000; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #cc0000; --sidebar-accent-foreground: #ffffff; --sidebar-border: #333333; --sidebar-ring: #cc0000; --chart-1: #f97316; --chart-2: #06b6d4; --chart-3: #3b82f6; --chart-4: #eab308; --chart-5: #ec4899; } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } @keyframes slideInScale { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } @keyframes busSlide { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes scrollFadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-slide-in-scale { animation: slideInScale 1s ease-out forwards; } .animate-bus-slide { animation: busSlide 2s ease-out forwards; } .scroll-animate { animation: scrollFadeInUp 0.8s ease-out forwards; } .fade-in-up { animation: fadeInUp 0.6s ease-out forwards; } .hero-animation-text { font-size: clamp(2rem, 6vw, 4rem); color: white; font-weight: 800; line-height: 1.4; margin: 0; letter-spacing: -0.02em; animation: slideInScale 1.2s ease-out; text-align: center; max-width: 90%; } .bus-image-container { position: relative; width: 100%; max-width: 400px; height: 200px; display: flex; align-items: center; justify-content: center; } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import { Analytics } from "@vercel/analytics/next"; import "./globals.css"; import { FloatingBusButton } from "@/components/floating-bus-button"; const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: "ProBus - 버스 대절 서비스", description: "신뢰할 수 있는 버스 대절 서비스. 여행, 단체 모임, 특별한 행사를 위한 최고의 선택", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Header from "@/components/header" import Hero from "@/components/hero" import HowItWorks from "@/components/how-it-works" import Features from "@/components/features" import Testimonials from "@/components/testimonials" import FAQ from "@/components/faq" import Footer from "@/components/footer" import FeaturesScroll from "@/components/features-scroll" import BusCategories from "@/components/bus-categories" export default function Home() { return (

) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/booking.tsx" isMerged="true" 'use client' import { Button } from '@/components/ui/button' import { MapPin, Calendar, Users, Phone } from 'lucide-react' import { useState } from 'react' export default function Booking() { const [formData, setFormData] = useState({ departure: '', destination: '', date: '', passengers: '', }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() console.log('Booking submitted:', formData) } return (

지금 예약하세요

간단한 정보만 입력하면 최고의 버스 서비스를 경험하실 수 있습니다.

출발지

setFormData({ ...formData, departure: e.target.value })} />

목적지

setFormData({ ...formData, destination: e.target.value })} />

이동 날짜

setFormData({ ...formData, date: e.target.value })} />

탑승객 수

setFormData({ ...formData, passengers: e.target.value })} />

예약 후 24시간 이내에 확인 전화를 드리겠습니다.

) } [V0_FILE]typescriptreact:file="components/bus-categories.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import Image from "next/image" const categories = [ { id: 1, name: "결혼식", image: "/images/mary-poppins-review.jpg", description: "행복한 결혼식을 위한 하객 버스", }, { id: 2, name: "워크샵", image: "/images/gemini-generated-image-sqhadksqhadksqha.png", description: "팀빌딩과 워크샵을 위한 단체 버스", }, { id: 3, name: "산악회", image: "/images/disney-20castle2.jpg", description: "등산 모임을 위한 편안한 버스", }, { id: 4, name: "MT/현장학습", image: "/images/gemini-generated-image-4krx5o4krx5o4krx.png", description: "대학 MT, 초중고 현장학습 버스", }, { id: 5, name: "콘서트", image: "/images/gemini-generated-image-dq86r4dq86r4dq86.png", description: "콘서트와 공연 관람을 위한 버스", }, { id: 6, name: "골프", image: "/images/mary-poppins-review.jpg", description: "골프 라운딩을 위한 프리미엄 버스", }, { id: 7, name: "낚시", image: "/images/disney-20castle2.jpg", description: "낚시 동호회를 위한 편안한 버스", }, { id: 8, name: "통근/셔틀", image: "/images/gemini-generated-image-sqhadksqhadksqha.png", description: "출퇴근 및 정기 셔틀 버스", }, { id: 9, name: "어린이집", image: "/images/gemini-generated-image-4krx5o4krx5o4krx.png", description: "어린이집 소풍 및 행사 버스", }, ] export default function BusCategories() { const [currentIndex, setCurrentIndex] = useState(0) useEffect(() => { const interval = setInterval(() => { setCurrentIndex((prev) => (prev === categories.length - 1 ? 0 : prev + 1)) }, 3000) return () => clearInterval(interval) }, []) const goToPrevious = () => { setCurrentIndex((prev) => (prev === 0 ? categories.length - 1 : prev - 1)) } const goToNext = () => { setCurrentIndex((prev) => (prev === categories.length - 1 ? 0 : prev + 1)) } const goToSlide = (index: number) => { setCurrentIndex(index) } return (

{/* 타이틀 */}

킹버스가 추천하는 버스대절!

다양한 목적에 맞는 최적의 버스를 찾아보세요

{/* 왼쪽 화살표 */} {/* 메인 이미지 슬라이드 */}

{categories.map((category, index) => (

{/* 그라데이션 오버레이 */}

{/* 텍스트 콘텐츠 */}

{category.name}

{category.description}

))}

{/* 오른쪽 화살표 */}

{categories.map((_, index) => (

) } [V0_FILE]typescriptreact:file="components/cta.tsx" isMerged="true" import { Button } from '@/components/ui/button' import { ArrowRight } from 'lucide-react' export default function CTA() { return (

지금 바로 시작하세요

특별한 할인과 프리미엄 서비스를 지금 체험해보세요. 믿을 수 있는 버스 대절 파트너, ProBus입니다.

) } [V0_FILE]typescriptreact:file="components/faq.tsx" isMerged="true" 'use client' import { useState, useEffect, useRef } from 'react' import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion' export default function FAQ() { const [isVisible, setIsVisible] = useState(false) const sectionRef = useRef(null) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) } }, { threshold: 0.1 } ) if (sectionRef.current) { observer.observe(sectionRef.current) } return () => observer.disconnect() }, []) const faqs = [ { question: '운행 후 추가로 붙는 금액이 있나요?', answer: '기본 요금에는 모든 비용이 포함되어 있습니다. 단, 심야 할증이나 톨게이트 비용 등은 추가로 발생할 수 있습니다. 예약 시 상세한 안내를 받으실 수 있습니다.' }, { question: '인승 및 차량 정보를 바꿀 수 있나요?', answer: '예약 후에도 출발 3일 전까지는 인승 및 차량 정보 변경이 가능합니다. 고객센터를 통해 문의해 주시면 신속하게 처리해 드립니다.' }, { question: '예약금은 얼마인가요?', answer: '예약금은 총 요금의 30%이며, 예약 확정 후 24시간 이내에 입금하셔야 합니다. 잔금은 운행 당일 현금 또는 카드로 결제하실 수 있습니다.' }, { question: '운행 전 준비사항이 있나요?', answer: '특별한 준비사항은 없습니다. 다만, 출발 시간 10분 전에는 탑승 장소에 대기해 주시고, 승차 인원을 정확히 확인해 주세요.' }, { question: '꼭 어플을 다운로드해야 하나요?', answer: '어플이 없어도 웹사이트를 통해 예약과 관리가 가능합니다. 하지만 어플을 이용하시면 실시간 차량 위치 확인, 푸시 알림 등 더 편리한 서비스를 이용하실 수 있습니다.' } ] return (

자주 묻는 질문

{faqs.map((faq, index) => (

{faq.question}

{faq.answer}

))}

) } [V0_FILE]typescriptreact:file="components/features-scroll.tsx" isMerged="true" 'use client' import { ChevronLeft, ChevronRight, DollarSign, Phone, Settings, Users, X } from 'lucide-react' import { useEffect, useRef, useState } from 'react' export default function FeaturesScroll() { const [isVisible, setIsVisible] = useState(false) const [activeTab, setActiveTab] = useState<'price' | 'booking' | 'bus'>('price') const [hoveredStep, setHoveredStep] = useState(null) const [hoveredPriceItem, setHoveredPriceItem] = useState(null) const [currentIndex, setCurrentIndex] = useState(0) const [showBusModal, setShowBusModal] = useState(false) const [selectedBusIndex, setSelectedBusIndex] = useState(null) const sectionRef = useRef(null) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) observer.unobserve(entry.target) } }, { threshold: 0.3 } ) if (sectionRef.current) { observer.observe(sectionRef.current) } return () => observer.disconnect() }, []) const features = [ { id: 'price', icon: DollarSign, title: '합리적인 가격', description: '여러 견적을 받아보고\n최저가로 예약하세요' }, { id: 'booking', icon: Settings, title: '간편한 예약', description: '필터를 이용해 상황별\n견적을 비교해 보세요' }, { id: 'bus', icon: Users, title: '인원에 따른 버스 추천', description: '인원에 맞는 대수와\n인승을 추천드립니다' } ] const busItems = [ { name: '디즈니 성', image: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/01-VlLPEsY6J0N6RwKcmXIFaKpf8K1oSO.jpg' }, { name: '겨울왕국', image: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2019_Ugly_Sweater_1920x1080-iSKM1TBay6FC2avSpxqXJ12wDyhsoU.jpg' }, { name: '디즈니 성2', image: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Disney%20Castle2-OBg6FyTzxmQZKrFwtMivhdGo7ggfST.jpg' }, { name: '메리 포핀스', image: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/mary-poppins-review-yUOLAWPMby6kwQcovHm1AkmDwpBkWH.jpg' }, { name: '라푼젤', image: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Rapunzel-T80qz39VvVkhBvUnK9f9UldQHLkEH3.jpg' }, { name: '홀리데이', image: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2020_HolidayWrappingPaper_1920x1080-pxgyn3aIy8kiurLYsAtznkqqvcUoQF.jpg' }, { name: '토이스토리', image: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%ED%86%A0%EC%9D%B4%EC%8A%A4%ED%86%A0%EB%A6%AC-6cNYFRf3s3EPf3SpnX1pGzvLK1bWoh.jpg' }, { name: '주먹왕 랄프', image: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Wreck%20it%20Ralph-Y4drh1nHoBmLZ9Ry26PGwLPQZHuXu9.jpg' }, { name: '이스터', image: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2019_Easter_Wallpaper-1920x1080-JDCIYkhLXF7ulFyA7L1ZRctUSvg2hc.jpg' }, { name: '미키마우스', image: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/wallpaperflare.com_wallpaper-86VR53x3kmGj3gWC4YVFoRvS8NpHhW.jpg' } ] const pricingItems = [ { key: 'people', label: '인원수', shortDesc: '탑승 인원에 따라', fullDesc: '탑승인원에 따라 최적의 버스를 선택해줍니다.' }, { key: 'day', label: '요일', shortDesc: '원하는 요일 선택', fullDesc: '원하시는 요일을 자유롭게 선택하실 수 있습니다.' }, { key: 'driver', label: '기사 통행', shortDesc: '기사 동행 유무', fullDesc: '기사님의 동행 여부를 선택하실 수 있습니다.' }, { key: 'busType', label: '버스 종류', shortDesc: '버스 종류', fullDesc: '다양한 버스 종류 중에서 선택하실 수 있습니다.' } ] const tabContent = { booking: { title: '킹버스에서 견적 받기', steps: [ { number: 1, title: '운행 방법 선택', desc: '왕복 운행 편도 운행 중 하나를 선택해 주세요' }, { number: 2, title: '대절 정보 입력', desc: '출발지, 도착지, 인원, 인원 정보를 입력해 주세요 인원 수가 정해지지 않은 경우 및 금' }, { number: 3, title: '예약자 정보 입력', desc: '예약자 정보를 입력한 뒤 가경정에 대한 결제 방식을 선택해 주세요' }, { number: 4, title: '예약 완료', desc: '예약에 대한 문의사항은 1544-1919로 연락 주세요' } ] } } const getBoxColor = (stepNumber: number) => { const colors = ['bg-white', 'bg-yellow-400', 'bg-green-500', 'bg-blue-500'] return colors[stepNumber - 1] } const handlePrev = () => { setCurrentIndex((prev) => (prev === 0 ? busItems.length - 1 : prev - 1)) } const handleNext = () => { setCurrentIndex((prev) => (prev === busItems.length - 1 ? 0 : prev + 1)) } const getItemIndex = (offset: number) => { const index = currentIndex + offset if (index < 0) return busItems.length + index if (index >= busItems.length) return index - busItems.length return index } const handleCenterImageClick = () => { setSelectedBusIndex(currentIndex) setShowBusModal(true) } return ( <>

빠르고 간편한 킹버스

5분안에 원하는 내용에 따른 견적을 확인하고
예약까지 한번에!

{features.map((feature, index) => { const Icon = feature.icon return (

{ if (feature.id === 'price' || feature.id === 'booking' || feature.id === 'bus') { setActiveTab(feature.id as 'price' | 'booking' | 'bus') setTimeout(() => { document.getElementById('tab-content')?.scrollIntoView({ behavior: 'smooth' }) }, 100) } }} className={`bg-gray-900 border border-gray-800 rounded-lg p-8 text-center transition-all duration-300 hover:shadow-2xl hover:border-red-600 hover:-translate-y-2 ${ (feature.id === 'price' || feature.id === 'booking' || feature.id === 'bus') ? 'cursor-pointer' : '' } ${ isVisible ? 'opacity-100 translate-y-0 shadow-lg' : 'opacity-0 translate-y-10 shadow-none' }`} style={{ transitionDelay: isVisible ? `${200 + index * 200}ms` : '0ms' }} >

{feature.title}

{feature.description}

) })}

{activeTab === 'price' ? (

{hoveredPriceItem ? pricingItems.find(item => item.key === hoveredPriceItem)?.label : '합리적인 가격'}

{hoveredPriceItem ? pricingItems.find(item => item.key === hoveredPriceItem)?.fullDesc : '궁금한 칸에 마우스를 올려보세요!'}

{pricingItems.map((item, idx) => (

setHoveredPriceItem(item.key)} onMouseLeave={() => setHoveredPriceItem(null)} className={`bg-gray-900 rounded-lg p-6 text-center hover:shadow-lg transition-all duration-300 transform cursor-pointer hover:scale-105 ${ activeTab === 'price' ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10' }`} style={{ transitionDelay: `${idx * 100}ms` }} >

{idx % 2 === 0 ? ( ) : ( )}

{item.label}

{item.shortDesc}

))}

) : activeTab === 'booking' ? (

{tabContent.booking.title}

{tabContent.booking.steps.map((step, idx) => (

setHoveredStep(step.number)} onMouseLeave={() => setHoveredStep(null)} className={`flex gap-6 transition-all duration-300 transform cursor-pointer hover:scale-105 ${ activeTab === 'booking' ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10' }`} style={{ transitionDelay: `${idx * 150}ms` }} >

{step.number}

{step.title}

{step.desc}

))}

{hoveredStep && (

{hoveredStep}

)}

) : (

인원에 따른 버스 추천

화살표를 눌러 다양한 버스를 확인해보세요

{[-2, -1, 0, 1, 2].map((offset) => { const itemIndex = getItemIndex(offset) const item = busItems[itemIndex] const isCentered = offset === 0 return (

{isCentered && (

{item.name}

)}

) })}

)}

{showBusModal && selectedBusIndex !== null && (

setShowBusModal(false)} >

e.stopPropagation()} >

)} ) } [V0_FILE]typescriptreact:file="components/features.tsx" isMerged="true" 'use client' import { Zap, DollarSign, Shield, Clock, Users, Smartphone } from 'lucide-react' import { useState, useEffect, useRef } from 'react' const features = [ { icon: Zap, title: '5분 안에 견적', description: '간단한 정보 입력만으로 즉시 견적을 확인할 수 있습니다.' }, { icon: DollarSign, title: '합리적인 가격', description: '여러 견적을 비교하고 최저가를 선택할 수 있습니다.' }, { icon: Shield, title: '안전 보장', description: '정기점검 차량과 숙련된 운전사가 안전을 책임집니다.' }, { icon: Clock, title: '정확한 시간 약속', description: '정시 출발, 정시 도착으로 신뢰할 수 있는 서비스입니다.' }, { icon: Users, title: '전담 담당자', description: '예약부터 운행까지 전담 담당자가 케어합니다.' }, { icon: Smartphone, title: '모바일 앱', description: '앱을 통한 편리한 자동 견적 및 예약 기능을 제공합니다.' } ] export default function Features() { const [isVisible, setIsVisible] = useState(false) const sectionRef = useRef(null) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) observer.unobserve(entry.target) } }, { threshold: 0.2 } ) if (sectionRef.current) { observer.observe(sectionRef.current) } return () => observer.disconnect() }, []) return (

킹버스만의 장점

빠르고 안전하며 합리적인 버스 대절 서비스

{features.map((feature, index) => { const Icon = feature.icon return (

{feature.title}

{feature.description}

) })}

) } [V0_FILE]typescriptreact:file="components/floating-bus-button.tsx" isMerged="true" "use client" import { Bus, X } from 'lucide-react' import { useState } from 'react' export function FloatingBusButton() { const [isOpen, setIsOpen] = useState(false) return ( <> {isOpen && (

setIsOpen(false)} >

e.stopPropagation()} > {/* 닫기 버튼 */} {/* 제목 */}

앱 다운로드

QR코드를 스캔하거나 버튼을 클릭하세요

{/* QR코드 영역 */}

{/* 애플 스토어와 구글 플레이 스토어 버튼 추가 */}

App Store Google Play

)} ) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import { MapPin, Phone, Mail, Facebook, Instagram, Linkedin } from 'lucide-react' export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true" "use client" import { Menu, X, ChevronDown, Heart } from "lucide-react" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" const categories = [ { id: "wedding", name: "결혼식", icon: "💒" }, { id: "workshop", name: "워크샵", icon: "💼" }, { id: "hiking", name: "산악회", icon: "⛰️" }, { id: "mt", name: "MT/현장학습", icon: "🎒" }, { id: "concert", name: "콘서트", icon: "🎤" }, { id: "golf", name: "골프", icon: "⛳" }, { id: "fishing", name: "낚시", icon: "🎣" }, { id: "commute", name: "통근/셔틀", icon: "🏢" }, { id: "kindergarten", name: "어린이집", icon: "👶" }, ] export default function Header() { const [isMenuOpen, setIsMenuOpen] = useState(false) const [isCustomerServiceOpen, setIsCustomerServiceOpen] = useState(false) const [isInterestModalOpen, setIsInterestModalOpen] = useState(false) const [selectedInterest, setSelectedInterest] = useState(null) const closeTimeoutRef = useRef(null) const handleMouseEnter = () => { if (closeTimeoutRef.current) { clearTimeout(closeTimeoutRef.current) closeTimeoutRef.current = null } setIsCustomerServiceOpen(true) } const handleMouseLeave = () => { closeTimeoutRef.current = setTimeout(() => { setIsCustomerServiceOpen(false) }, 300) } const handleSelectInterest = (categoryId: string) => { setSelectedInterest(categoryId) setIsInterestModalOpen(false) } return ( <>

🚌

킹버스

{/* Desktop Navigation */} {/* Desktop CTA */}

{isCustomerServiceOpen && (

전화상담 1:1상담

)}

{/* Mobile Menu Button */}

{/* Mobile Navigation */} {isMenuOpen && (

)}

{isInterestModalOpen && (

setIsInterestModalOpen(false)} > {/* 하얀색 불투명 배경 */}

{/* 모달 컨텐츠 */}

e.stopPropagation()} >

관심있는 분야를 선택하세요

선택한 분야에 맞는 맞춤 정보를 제공해 드립니다

{categories.map((category) => ( ))}

화면 바깥을 클릭하면 닫힙니다

)} ) } [V0_FILE]typescriptreact:file="components/how-it-works.tsx" isMerged="true" 'use client' import { CheckCircle, MapPin, CreditCard, Phone } from 'lucide-react' import { useEffect, useRef, useState } from 'react' export default function HowItWorks() { const [isVisible, setIsVisible] = useState(false) const sectionRef = useRef(null) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) observer.unobserve(entry.target) } }, { threshold: 0.2 } ) if (sectionRef.current) { observer.observe(sectionRef.current) } return () => observer.disconnect() }, []) const steps = [ { number: '1', title: '정보 입력', description: '출발지, 도착지, 인원, 날짜를 입력하세요', icon: MapPin }, { number: '2', title: '견적 확인', description: '맞춤형 버스 견적을 5분 안에 확인', icon: CheckCircle }, { number: '3', title: '결제', description: '안전한 결제로 예약을 완료하세요', icon: CreditCard }, { number: '4', title: '운행 확정', description: '전담 담당자가 상세한 내용을 안내합니다', icon: Phone } ] return (

예약 방법

간단한 4단계로 버스를 대절할 수 있습니다

{steps.map((step, index) => { const Icon = step.icon return (

{index < steps.length - 1 && (

)}

{step.title}

{step.description}

{step.number}

) })}

) } [V0_FILE]typescriptreact:file="components/services.tsx" isMerged="true" import { Users, Calendar, Building2, Gift } from 'lucide-react' const services = [ { icon: Users, title: '여행 투어', description: '관광지 방문, 야외 활동, 단체 여행 등 모든 여행 관련 이동을 지원합니다.' }, { icon: Calendar, title: '이벤트 대절', description: '결혼식, 피로연, 컨퍼런스 등 특별한 행사를 위한 버스 대절 서비스입니다.' }, { icon: Building2, title: '기업 운송', description: '직원 이동, 워크숍, 출장 등 기업의 모든 운송 필요를 충족시킵니다.' }, { icon: Gift, title: '학교 단체 이동', description: '수학여행, 현장학습, 학교 행사 등 학생들의 안전한 이동을 보장합니다.' } ] export default function Services() { return (

다양한 서비스

여러분의 필요에 맞게 선택할 수 있는 다양한 버스 대절 서비스를 제공합니다.

{services.map((service, index) => { const Icon = service.icon return (

{service.title}

{service.description}

) })}

) } [V0_FILE]typescriptreact:file="components/testimonials.tsx" isMerged="true" 'use client' import { Star, Quote } from 'lucide-react' import { useEffect, useRef, useState } from 'react' const testimonials = [ { name: '김민수', role: '개인 여행객', comment: '여행을 가는데 버스 대절이 필요했는데, 킹버스를 통해 정말 편하게 예약했어요. 5분 만에 견적이 나와서 깜짝 놀랐습니다!', rating: 5 }, { name: '박은정', role: '회사 담당자', comment: '직원 워크샵을 위해 이용했는데 가격도 합리적이고 운전사분도 정말 친절하셨어요. 다음에도 꼭 이용하겠습니다.', rating: 5 }, { name: '이준호', role: '학교 교사', comment: '수학여행 버스 대절로 킹버스를 선택했는데 안전성과 서비스 모두 만족합니다. 강력 추천합니다!', rating: 5 } ] export default function Testimonials() { const [isVisible, setIsVisible] = useState(false) const sectionRef = useRef(null) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) observer.unobserve(entry.target) } }, { threshold: 0.2 } ) if (sectionRef.current) { observer.observe(sectionRef.current) } return () => observer.disconnect() }, []) return (

고객 만족도 98%

3,000+ 예약 고객들이 킹버스를 신뢰합니다

{testimonials.map((testimonial, index) => (

{Array(testimonial.rating).fill(0).map((_, i) => ( ))}

"{testimonial.comment}"

{testimonial.name}

{testimonial.role}

))}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" isMerged="true" 'use client' import * as React from 'react' import * as AccordionPrimitive from '@radix-ui/react-accordion' import { ChevronDownIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Accordion({ ...props }: React.ComponentProps) { return } function AccordionItem({ className, ...props }: React.ComponentProps) { return ( ) } function AccordionTrigger({ className, children, ...props }: React.ComponentProps) { return ( svg]:rotate-180', className, )} {...props} > {children} ) } function AccordionContent({ className, children, ...props }: React.ComponentProps) { return (

{children}

) } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-9 px-4 py-2 has-[>svg]:px-3', sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', icon: 'size-9', 'icon-sm': 'size-8', 'icon-lg': 'size-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<'button'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescript:file="next-env.d.ts" isMerged="true" /// /// import "./.next/dev/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. [V0_FILE]javascript:file="next.config.mjs" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "eslint .", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "latest", "@radix-ui/react-alert-dialog": "latest", "@radix-ui/react-aspect-ratio": "latest", "@radix-ui/react-avatar": "latest", "@radix-ui/react-checkbox": "latest", "@radix-ui/react-collapsible": "latest", "@radix-ui/react-context-menu": "latest", "@radix-ui/react-dialog": "latest", "@radix-ui/react-dropdown-menu": "latest", "@radix-ui/react-hover-card": "latest", "@radix-ui/react-label": "latest", "@radix-ui/react-menubar": "latest", "@radix-ui/react-navigation-menu": "latest", "@radix-ui/react-popover": "latest", "@radix-ui/react-progress": "latest", "@radix-ui/react-radio-group": "latest", "@radix-ui/react-scroll-area": "latest", "@radix-ui/react-select": "latest", "@radix-ui/react-separator": "latest", "@radix-ui/react-slider": "latest", "@radix-ui/react-slot": "latest", "@radix-ui/react-switch": "latest", "@radix-ui/react-tabs": "latest", "@radix-ui/react-toast": "latest", "@radix-ui/react-toggle": "latest", "@radix-ui/react-toggle-group": "latest", "@radix-ui/react-tooltip": "latest", "@vercel/analytics": "latest", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "latest", "date-fns": "4.1.0", "embla-carousel-react": "latest", "framer-motion": "^12.23.26", "input-otp": "latest", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "latest", "react": "19.2.0", "react-day-picker": "latest", "react-dom": "19.2.0", "react-hook-form": "latest", "react-resizable-panels": "latest", "recharts": "latest", "sonner": "latest", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "latest", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" isMerged="true" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]css:file="styles/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="tsconfig.json" isMerged="true" { "compilerOptions": { "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "react-jsx", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": [ "./*" ] } }, "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts" ], "exclude": [ "node_modules" ] } [V0_FILE]png:file="public/app-download-qr-code.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/mb2om2xwGpe2eVJX6yW5Si/public/app-download-qr-code.png" isMerged="true" [V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png" isMerged="true" [V0_FILE]png:file="public/bus-main.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/sTv--ApzUcMomc0sHYVRUG/public/bus-main.png" isMerged="true" [V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png" isMerged="true" [V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png" isMerged="true" [V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg" isMerged="true" [V0_FILE]jpg:file="public/images/01.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/yJRElb-j2giEr7O4fAF9I5/public/images/01.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/2019-easter-wallpaper-1920x1080.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/80c1CXKq-Qrt61chg_I97w/public/images/2019-easter-wallpaper-1920x1080.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/2019-ugly-sweater-1920x1080.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/hxo3zWikapWvzpZxI9Zz6G/public/images/2019-ugly-sweater-1920x1080.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/2020-holidaywrappingpaper-1920x1080.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/l_xHbwy_55H96b-zlW5bhP/public/images/2020-holidaywrappingpaper-1920x1080.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/disney-20castle2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/Nlf_mzcSVXzu1xZMUzVN2v/public/images/disney-20castle2.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/ed-86-a0-ec-9d-b4-ec-8a-a4-ed-86-a0-eb-a6-ac.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/AjyDNi0rfA6PZi4rHlZwGU/public/images/ed-86-a0-ec-9d-b4-ec-8a-a4-ed-86-a0-eb-a6-ac.jpg" isMerged="true" [V0_FILE]png:file="public/images/gemini-generated-image-4krx5o4krx5o4krx.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/H1YKWMGd260HkzZS20ERwy/public/images/gemini-generated-image-4krx5o4krx5o4krx.png" isMerged="true" [V0_FILE]png:file="public/images/gemini-generated-image-dq86r4dq86r4dq86.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/DkMGZZYIr78f_o-91CTBSa/public/images/gemini-generated-image-dq86r4dq86r4dq86.png" isMerged="true" [V0_FILE]png:file="public/images/gemini-generated-image-sqhadksqhadksqha.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/35gK68UzxoKJ9k4UR4kP8_/public/images/gemini-generated-image-sqhadksqhadksqha.png" isMerged="true" [V0_FILE]jpg:file="public/images/mary-poppins-review.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/4LHtR8OD5eK8DBM82w3ing/public/images/mary-poppins-review.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/rapunzel.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/sAwMrCRlZy9AggAVfmsO4n/public/images/rapunzel.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/wallpaperflare.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/6nTXPXkvqvhHQW0JdFf9eb/public/images/wallpaperflare.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/wreck-20it-20ralph.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/B3pjLD-D9qqc5C6EkHI7pn/public/images/wreck-20it-20ralph.jpg" isMerged="true" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_v9e2LWbydhYhNCpLbW3ImvrmDIhI/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true" [V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" "use client" import { useEffect, useRef, useState } from "react" import Image from "next/image" import { motion } from "framer-motion" export default function Hero() { const [isVisible, setIsVisible] = useState(false) const sectionRef = useRef(null) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) observer.unobserve(entry.target) } }, { threshold: 0.1 }, ) if (sectionRef.current) { observer.observe(sectionRef.current) } return () => observer.disconnect() }, []) return (

{/* 1. 배경 이미지: 어두운 도심 도로 (Night City Road) */}

{/* 배경을 어둡게 눌러주는 그라데이션 */}

{/* 2. 텍스트 영역: 깔끔한 두 줄 처리 */}

쉽고 빠른 견적, 버스 대절은 킹버스

{/* 버스 크기 제어: 비율 강제(aspect-ratio) 제거하고 max-width만 설정 */}

{/* [버스 본체 모션] 오른쪽 화면 밖 -> 왼쪽으로 진입 */} {/* 정차 후 엔진 진동 (Idling) */} 성화투어 킹버스

{/* [바닥 그림자] 버스 바로 아래에 위치 */}

) }