[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.9", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "shaders": "2.1.1" }, "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" }, "overrides": { "shaders": "2.1.1" } } [V0_FILE]typescriptreact:file="components/custom-cursor.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" export function CustomCursor() { const outerRef = useRef(null) const innerRef = useRef(null) const positionRef = useRef({ x: 0, y: 0 }) const targetPositionRef = useRef({ x: 0, y: 0 }) const isPointerRef = useRef(false) useEffect(() => { let animationFrameId: number const lerp = (start: number, end: number, factor: number) => { return start + (end - start) * factor } const updateCursor = () => { positionRef.current.x = lerp(positionRef.current.x, targetPositionRef.current.x, 0.15) positionRef.current.y = lerp(positionRef.current.y, targetPositionRef.current.y, 0.15) if (outerRef.current && innerRef.current) { const scale = isPointerRef.current ? 1.5 : 1 const innerScale = isPointerRef.current ? 0.5 : 1 outerRef.current.style.transform = `translate3d(${positionRef.current.x}px, ${positionRef.current.y}px, 0) translate(-50%, -50%) scale(${scale})` innerRef.current.style.transform = `translate3d(${positionRef.current.x}px, ${positionRef.current.y}px, 0) translate(-50%, -50%) scale(${innerScale})` } animationFrameId = requestAnimationFrame(updateCursor) } const handleMouseMove = (e: MouseEvent) => { targetPositionRef.current = { x: e.clientX, y: e.clientY } const target = e.target as HTMLElement isPointerRef.current = window.getComputedStyle(target).cursor === "pointer" || target.tagName === "BUTTON" || target.tagName === "A" } window.addEventListener("mousemove", handleMouseMove, { passive: true }) animationFrameId = requestAnimationFrame(updateCursor) return () => { window.removeEventListener("mousemove", handleMouseMove) cancelAnimationFrame(animationFrameId) } }, []) return ( <>

) } [V0_FILE]typescriptreact:file="components/grain-overlay.tsx" isMerged="true" export function GrainOverlay() { return (

) } [V0_FILE]typescriptreact:file="hooks/use-reveal.ts" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" export function useReveal(threshold = 0.3) { const ref = useRef(null) const [isVisible, setIsVisible] = useState(false) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) } }, { threshold, root: null, }, ) const currentRef = ref.current if (currentRef) { observer.observe(currentRef) } return () => { if (currentRef) { observer.unobserve(currentRef) } } }, [threshold]) return { ref, isVisible } } [V0_FILE]typescriptreact:file="components/magnetic-button.tsx" isMerged="true" "use client" import type React from "react" import { useRef } from "react" interface MagneticButtonProps { children: React.ReactNode className?: string variant?: "primary" | "secondary" | "ghost" size?: "default" | "lg" onClick?: () => void } export function MagneticButton({ children, className = "", variant = "primary", size = "default", onClick, }: MagneticButtonProps) { const ref = useRef(null) const positionRef = useRef({ x: 0, y: 0 }) const rafRef = useRef() const handleMouseMove = (e: React.MouseEvent) => { if (!ref.current) return const rect = ref.current.getBoundingClientRect() const x = e.clientX - rect.left - rect.width / 2 const y = e.clientY - rect.top - rect.height / 2 positionRef.current = { x: x * 0.15, y: y * 0.15 } if (rafRef.current) cancelAnimationFrame(rafRef.current) rafRef.current = requestAnimationFrame(() => { if (ref.current) { ref.current.style.transform = `translate3d(${positionRef.current.x}px, ${positionRef.current.y}px, 0)` } }) } const handleMouseLeave = () => { positionRef.current = { x: 0, y: 0 } if (rafRef.current) cancelAnimationFrame(rafRef.current) rafRef.current = requestAnimationFrame(() => { if (ref.current) { ref.current.style.transform = "translate3d(0px, 0px, 0)" } }) } const variants = { primary: "bg-foreground/95 text-background hover:bg-foreground backdrop-blur-md hover:scale-[1.02] active:scale-[0.98]", secondary: "bg-foreground/5 text-foreground hover:bg-foreground/10 backdrop-blur-xl border border-foreground/10 hover:border-foreground/20", ghost: "bg-transparent text-foreground hover:bg-foreground/5 backdrop-blur-sm", } const sizes = { default: "px-6 py-2.5 text-sm", lg: "px-8 py-3.5 text-base", } return ( ) } [V0_FILE]javascript:file="next.config.mjs" isQuickEdit="true" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.12 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.15 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.15 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.65 0.22 250); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.25 0 0); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.25 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.68 0.18 45); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.25 0 0); --input: oklch(0.25 0 0); --ring: oklch(0.65 0.22 250); --chart-1: oklch(0.65 0.22 250); --chart-2: oklch(0.68 0.18 45); --chart-3: oklch(0.6 0.15 280); --chart-4: oklch(0.7 0.2 30); --chart-5: oklch(0.55 0.18 200); --radius: 0.75rem; --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.12 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.15 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.15 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.65 0.22 250); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.25 0 0); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.25 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.68 0.18 45); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.25 0 0); --input: oklch(0.25 0 0); --ring: oklch(0.65 0.22 250); --chart-1: oklch(0.65 0.22 250); --chart-2: oklch(0.68 0.18 45); --chart-3: oklch(0.6 0.15 280); --chart-4: oklch(0.7 0.2 30); --chart-5: oklch(0.55 0.18 200); --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 */ --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; cursor: none; } body { @apply bg-background text-foreground; } [data-scroll-container] { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; transform: translateZ(0); backface-visibility: hidden; perspective: 1000px; } section { transform: translateZ(0); will-change: transform; contain: layout style paint; } button { transform: translateZ(0); backface-visibility: hidden; } } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" "use client" import { useLanguage } from "@/contexts/language-context" export function Footer() { const { t } = useLanguage() return ( ) } [V0_FILE]typescriptreact:file="components/sections/about-section.tsx" isEdit="true" isMerged="true" "use client" import { MagneticButton } from "@/components/magnetic-button" import { useReveal } from "@/hooks/use-reveal" import { useLanguage } from "@/contexts/language-context" export function AboutSection({ scrollToSection }: { scrollToSection?: (index: number) => void }) { const { ref, isVisible } = useReveal(0.3) const { t } = useLanguage() return (

{/* Left side - Story */}

{t("about.title1")}
{t("about.title2")}
{t("about.title3")}

{t("about.desc1")}

{t("about.desc2")}

{/* Right side - Stats with creative layout */}

{[ { value: t("about.stat1.value"), label: t("about.stat1.label"), sublabel: t("about.stat1.sublabel"), direction: "right", }, { value: t("about.stat2.value"), label: t("about.stat2.label"), sublabel: t("about.stat2.sublabel"), direction: "left", }, { value: t("about.stat3.value"), label: t("about.stat3.label"), sublabel: t("about.stat3.sublabel"), direction: "right", }, ].map((stat, i) => { const getRevealClass = () => { if (!isVisible) { return stat.direction === "left" ? "-translate-x-16 opacity-0" : "translate-x-16 opacity-0" } return "translate-x-0 opacity-100" } return (

{stat.value}

{stat.label}

{stat.sublabel}

) })}

scrollToSection?.(4)}> {t("about.cta")}

) } [V0_FILE]typescriptreact:file="components/sections/services-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useReveal } from "@/hooks/use-reveal" import { useLanguage } from "@/contexts/language-context" export function ServicesSection() { const { ref, isVisible } = useReveal(0.3) const { language } = useLanguage() const content = { ko: { title: "Service", subtitle: "What we bring to the table", }, en: { title: "Service", subtitle: "What we bring to the table", }, } const services = { ko: [ { title: "마이빈(MyVIN)", description: "차대 또는 차량번호 조회로 내 차에 필요한 부품을 찾아\n구매까지 연결하는 스마트 오픈마켓 플랫폼입니다.", features: [ "차대번호/차량번호 기반 정확한 부품 매칭", "상세한 부품 정보 및 호환성 확인", "다양한 판매 업체 가격 비교 및 선택", "간편한 온라인 주문 및 결제 시스템", ], direction: "left", }, { title: "구르미(Gurumi)", description: "내 차에 맞는 부품의 구매부터 정비까지 모든 과정을\n하나의 앱에서 완성하는 원스톱 차량 관리 서비스입니다.", features: [ "표준 OBD2 프로토콜 스마트 스캐너를 통한 차량 상태 모니터링 및 진단", "전국 공식 가맹 부품 유통망을 통한 투명하고 합리적인 가격", "위치 기반 주변 정비소 실시간 검색 및 간편 예약", "주행 거리, 차량 정비 이력 등 차계부 자동 관리 및 알림", ], direction: "right", }, ], en: [ { title: "마이빈(MyVIN)", description: "A smart open marketplace platform that finds parts for your vehicle\nthrough VIN or license plate lookup and connects to purchase.", features: [ "Accurate part matching based on VIN/license plate", "Detailed part information and compatibility verification", "Price comparison and selection from various sellers", "Simple online ordering and payment system", ], direction: "left", }, { title: "구르미(Gurumi)", description: "A one-stop vehicle management service that completes everything\nfrom parts purchase to maintenance in one app.", features: [ "Vehicle condition monitoring and diagnostics via standard OBD2 protocol smart scanner", "Transparent and reasonable prices through nationwide official parts distribution network", "Real-time location-based search for nearby repair shops and easy reservation", "Automatic vehicle logbook management and notifications for mileage and maintenance history", ], direction: "right", }, ], } const currentContent = content[language] const currentServices = services[language] return (

{currentContent.title}

{currentContent.subtitle}

{currentServices.map((service, i) => ( ))}

) } function ServiceCard({ service, index, isVisible, }: { service: { title: string description: string features: string[] direction: string } index: number isVisible: boolean }) { const getRevealClass = () => { if (!isVisible) { switch (service.direction) { case "left": return "-translate-x-16 opacity-0" case "right": return "translate-x-16 opacity-0" case "top": return "-translate-y-16 opacity-0" case "bottom": return "translate-y-16 opacity-0" default: return "translate-y-12 opacity-0" } } return "translate-x-0 translate-y-0 opacity-100" } return (

0{index + 1}

{service.title}

Coming Soon

{service.description}

• {feature}

) } [V0_FILE]typescriptreact:file="components/sections/work-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useReveal } from "@/hooks/use-reveal" import { useLanguage } from "@/contexts/language-context" export function WorkSection() { const { ref, isVisible } = useReveal(0.3) const { language } = useLanguage() const content = { ko: { title: "Capability", subtitle: "Make complexity simple", projects: [ { number: "01", title: "혁신 기술 기반 부품 데이터베이스", category: "차대번호 기반 AI 부품 매칭과 국산/수입 전 차종 대상 빅데이터 분석 기술", direction: "left", }, { number: "02", title: "사용자 중심의 직관적인 UX/UI", category: "사용자 행동 패턴 분석을 통한 서비스 최적화로 누구나 쉽게 이용 가능한 플랫폼", direction: "right", }, { number: "03", title: "광범위 파트너 네트워크", category: "전국 단위 검증된 파트너사의 부품 재고, 가격, 정비소 예약 현황을 실시간으로 확인 가능", direction: "left", }, ], }, en: { title: "Capability", subtitle: "Make complexity simple", projects: [ { number: "01", title: "Parts Database Based on Innovative Technology", category: "VIN-based AI parts matching and big data analysis technology for all domestic/imported vehicle models", direction: "left", }, { number: "02", title: "User-Centered Intuitive UX/UI", category: "Platform optimized through user behavior pattern analysis, accessible to everyone", direction: "right", }, { number: "03", title: "Extensive Partner Network", category: "Real-time access to parts inventory, prices, and repair shop reservation status from verified nationwide partners", direction: "left", }, ], }, } const currentContent = content[language] return (

{currentContent.title}

{currentContent.subtitle}

{currentContent.projects.map((project, i) => ( ))}

) } function ProjectCard({ project, index, isVisible, }: { project: { number: string; title: string; category: string; direction: string } index: number isVisible: boolean }) { const getRevealClass = () => { if (!isVisible) { return project.direction === "left" ? "-translate-x-16 opacity-0" : "translate-x-16 opacity-0" } return "translate-x-0 opacity-100" } return (

{project.number}

{project.title}

{project.category}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { CustomCursor } from "@/components/custom-cursor" import { GrainOverlay } from "@/components/grain-overlay" import { WorkSection } from "@/components/sections/work-section" import { ServicesSection } from "@/components/sections/services-section" import { AboutSection } from "@/components/sections/about-section" import { ContactSection } from "@/components/sections/contact-section" import { Footer } from "@/components/footer" import { MagneticButton } from "@/components/magnetic-button" import { useRef, useEffect, useState } from "react" import { LanguageProvider, useLanguage } from "@/contexts/language-context" import dynamic from "next/dynamic" const Shader = dynamic(() => import("shaders/react").then((mod) => mod.Shader), { ssr: false }) const ChromaFlow = dynamic(() => import("shaders/react").then((mod) => mod.ChromaFlow), { ssr: false }) const Swirl = dynamic(() => import("shaders/react").then((mod) => mod.Swirl), { ssr: false }) function HomeContent() { const { language, toggleLanguage, t } = useLanguage() const scrollContainerRef = useRef(null) const [currentSection, setCurrentSection] = useState(0) const [isLoaded, setIsLoaded] = useState(false) const [webglSupported, setWebglSupported] = useState(null) const touchStartY = useRef(0) const touchStartX = useRef(0) const shaderContainerRef = useRef(null) const scrollThrottleRef = useRef() useEffect(() => { const checkWebGLSupport = () => { try { const canvas = document.createElement("canvas") const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl") if (!gl) { setWebglSupported(false) setIsLoaded(true) return false } setWebglSupported(true) return true } catch (e) { setWebglSupported(false) setIsLoaded(true) return false } } checkWebGLSupport() }, []) useEffect(() => { if (webglSupported === false) { setIsLoaded(true) return } if (webglSupported === null) { return } const checkShaderReady = () => { if (shaderContainerRef.current) { const canvas = shaderContainerRef.current.querySelector("canvas") if (canvas && canvas.width > 0 && canvas.height > 0) { setIsLoaded(true) return true } } return false } if (checkShaderReady()) return const intervalId = setInterval(() => { if (checkShaderReady()) { clearInterval(intervalId) } }, 100) const fallbackTimer = setTimeout(() => { setIsLoaded(true) }, 1500) return () => { clearInterval(intervalId) clearTimeout(fallbackTimer) } }, [webglSupported]) const scrollToSection = (index: number) => { if (scrollContainerRef.current) { const sectionWidth = scrollContainerRef.current.offsetWidth scrollContainerRef.current.scrollTo({ left: sectionWidth * index, behavior: "smooth", }) setCurrentSection(index) } } useEffect(() => { const handleTouchStart = (e: TouchEvent) => { touchStartY.current = e.touches[0].clientY touchStartX.current = e.touches[0].clientX } const handleTouchMove = (e: TouchEvent) => { if (Math.abs(e.touches[0].clientY - touchStartY.current) > 10) { e.preventDefault() } } const handleTouchEnd = (e: TouchEvent) => { const touchEndY = e.changedTouches[0].clientY const touchEndX = e.changedTouches[0].clientX const deltaY = touchStartY.current - touchEndY const deltaX = touchStartX.current - touchEndX if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 50) { if (deltaY > 0 && currentSection < 4) { scrollToSection(currentSection + 1) } else if (deltaY < 0 && currentSection > 0) { scrollToSection(currentSection - 1) } } } const container = scrollContainerRef.current if (container) { container.addEventListener("touchstart", handleTouchStart, { passive: true }) container.addEventListener("touchmove", handleTouchMove, { passive: false }) container.addEventListener("touchend", handleTouchEnd, { passive: true }) } return () => { if (container) { container.removeEventListener("touchstart", handleTouchStart) container.removeEventListener("touchmove", handleTouchMove) container.removeEventListener("touchend", handleTouchEnd) } } }, [currentSection]) useEffect(() => { const handleWheel = (e: WheelEvent) => { if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) { e.preventDefault() if (!scrollContainerRef.current) return scrollContainerRef.current.scrollBy({ left: e.deltaY, behavior: "instant", }) const sectionWidth = scrollContainerRef.current.offsetWidth const scrollLeft = scrollContainerRef.current.scrollLeft const newSection = Math.round(scrollLeft / sectionWidth) if (newSection !== currentSection && newSection >= 0 && newSection <= 4) { setCurrentSection(newSection) } } } const container = scrollContainerRef.current if (container) { container.addEventListener("wheel", handleWheel, { passive: false }) } return () => { if (container) { container.removeEventListener("wheel", handleWheel) } } }, [currentSection]) useEffect(() => { const handleScroll = () => { if (scrollThrottleRef.current) return scrollThrottleRef.current = requestAnimationFrame(() => { if (!scrollContainerRef.current) { scrollThrottleRef.current = undefined return } const sectionWidth = scrollContainerRef.current.offsetWidth const scrollLeft = scrollContainerRef.current.scrollLeft const newSection = Math.round(scrollLeft / sectionWidth) if (newSection !== currentSection && newSection >= 0 && newSection <= 4) { setCurrentSection(newSection) } scrollThrottleRef.current = undefined }) } const container = scrollContainerRef.current if (container) { container.addEventListener("scroll", handleScroll, { passive: true }) } return () => { if (container) { container.removeEventListener("scroll", handleScroll) } if (scrollThrottleRef.current) { cancelAnimationFrame(scrollThrottleRef.current) } } }, [currentSection]) return (

{webglSupported === true ? (

) : (

)}

{["Home", "About", "Capability", "Service", "Contact"].map((item, index) => ( ))}

{t("hero.title")}

{t("hero.description")} {t("hero.description2") && ( <>
{t("hero.description2")} )}

scrollToSection(3)}> {t("hero.cta1")} scrollToSection(4)}> {t("hero.cta2")}

{t("hero.scroll")}

) } export default function Home() { return ( ) } [V0_FILE]typescript:file="app/api/contact/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const body = await request.json() const { name, email, title, message } = body if (!name || !email || !title || !message) { return NextResponse.json({ error: "모든 필드를 입력해주세요." }, { status: 400 }) } const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(email)) { return NextResponse.json({ error: "올바른 이메일 주소를 입력해주세요." }, { status: 400 }) } const emailContent = ` 새로운 문의가 접수되었습니다. 보낸 사람: ${name} 이메일: ${email} 제목: ${title} 내용: ${message} --- 이 메시지는 Rebrit 웹사이트 문의 양식에서 전송되었습니다. `.trim() console.log("[v0] Contact form submission:", { name, email, title }) console.log("[v0] Email content:", emailContent) // Example integrations: // 1. Resend: https://resend.com/docs/send-with-nextjs // 2. SendGrid: https://www.twilio.com/docs/sendgrid/for-developers/sending-email/quickstart-nodejs // 3. Nodemailer with SMTP // For now, we'll simulate successful sending // In production, replace this with actual email service integration // Simulated delay for email sending await new Promise((resolve) => setTimeout(resolve, 1000)) return NextResponse.json({ success: true, message: "문의가 성공적으로 전송되었습니다!", }) } catch (error) { console.error("[v0] Contact form error:", error) return NextResponse.json({ error: "문의 전송 중 오류가 발생했습니다. 다시 시도해주세요." }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/sections/contact-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useReveal } from "@/hooks/use-reveal" import { useState, type FormEvent } from "react" import { MagneticButton } from "@/components/magnetic-button" import { useLanguage } from "@/contexts/language-context" export function ContactSection() { const { ref, isVisible } = useReveal(0.3) const { t, language } = useLanguage() const [formData, setFormData] = useState({ name: "", email: "", title: "", message: "" }) const [isSubmitting, setIsSubmitting] = useState(false) const [submitSuccess, setSubmitSuccess] = useState(false) const [submitError, setSubmitError] = useState("") const handleSubmit = async (e: FormEvent) => { e.preventDefault() if (!formData.name || !formData.email || !formData.title || !formData.message) { return } setIsSubmitting(true) setSubmitError("") try { const response = await fetch("/api/contact", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(formData), }) const data = await response.json() if (!response.ok) { throw new Error(data.error || "문의 전송에 실패했습니다.") } setIsSubmitting(false) setSubmitSuccess(true) setFormData({ name: "", email: "", title: "", message: "" }) setTimeout(() => setSubmitSuccess(false), 5000) } catch (error) { console.error("[v0] Form submission error:", error) setIsSubmitting(false) setSubmitError(error instanceof Error ? error.message : "문의 전송 중 오류가 발생했습니다.") setTimeout(() => setSubmitError(""), 5000) } } return (

{t("contact.title")}

{t("contact.desc1")}
{t("contact.desc2")}
{t("contact.desc3")}

{language === "ko" ? (

주식회사 리브릿 | 대표이사 나한용
서울시 금천구 시흥대로 281, 407호(새한벤처월드)

사업자 등록번호 : 839-86-03296

) : (

Company Name Rebrit Co., Ltd. CEO Na, Hanyong Address 407, 281, Siheung-daero, Geumcheon-gu, Seoul, Republic of Korea (08609) Business Number 839-86-03296 (Republic of Korea)

)}

{t("contact.form.name")} setFormData({ ...formData, name: e.target.value })} required className="w-full border-b border-foreground/30 bg-transparent py-1.5 text-sm text-foreground placeholder:text-foreground/40 focus:border-foreground/50 focus:outline-none md:py-2 md:text-base" placeholder={t("contact.form.namePlaceholder")} />

{t("contact.form.email")} setFormData({ ...formData, email: e.target.value })} required className="w-full border-b border-foreground/30 bg-transparent py-1.5 text-sm text-foreground placeholder:text-foreground/40 focus:border-foreground/50 focus:outline-none md:py-2 md:text-base" placeholder={t("contact.form.emailPlaceholder")} />

{t("contact.form.title")} setFormData({ ...formData, title: e.target.value })} required className="w-full border-b border-foreground/30 bg-transparent py-1.5 text-sm text-foreground placeholder:text-foreground/40 focus:border-foreground/50 focus:outline-none md:py-2 md:text-base" placeholder={t("contact.form.titlePlaceholder")} />

{t("contact.form.message")}

setFormData({ ...formData, message: e.target.value })}
                  required
                  className="w-full border-b border-foreground/30 bg-transparent py-1.5 text-sm text-foreground placeholder:text-foreground/40 focus:border-foreground/50 focus:outline-none md:py-2 md:text-base"
                  placeholder={t("contact.form.messagePlaceholder")}
                />
              </div>

<div
                className={`transition-all duration-700 ${
                  isVisible ? "translate-y-0 opacity-100" : "translate-y-12 opacity-0"
                }`}
                style={{ transitionDelay: "650ms" }}
              >
                <MagneticButton
                  variant="primary"
                  size="lg"
                  className="w-full disabled:opacity-50"
                  onClick={isSubmitting ? undefined : undefined}
                  disabled={isSubmitting}
                >
                  {isSubmitting ? t("contact.form.sending") : t("contact.form.submit")}
                </MagneticButton>
                {submitSuccess && (
                  <p className="mt-3 text-center font-mono text-sm text-foreground/80">{t("contact.form.success")}</p>
                )}
                {submitError && <p className="mt-3 text-center font-mono text-sm text-red-500">{submitError}</p>}
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescript:file="contexts/language-context.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { createContext, useContext, useState, type ReactNode } from "react"

type Language = "ko" | "en"

interface LanguageContextType {
  language: Language
  toggleLanguage: () => void
  t: (key: string) => string
}

const LanguageContext = createContext<LanguageContextType | undefined>(undefined)

const translations = {
  ko: {
    // Navigation
    "nav.home": "Home",
    "nav.about": "About",
    "nav.capability": "Capability",
    "nav.service": "Service",
    "nav.contact": "Contact",
    "nav.getStarted": "Get Started",

// Hero Section
    "hero.badge": "Rebrit",
    "hero.title": "Bridging Real Life and Information Technology",
    "hero.description": "리브릿은 자동차 애프터마켓의 디지털 트랜스포메이션을 선도하는",
    "hero.description2": "모빌리티 플랫폼 기업입니다.",
    "hero.cta1": "서비스 둘러보기",
    "hero.cta2": "문의하기",
    "hero.scroll": "Scroll to explore",

// About Section
    "about.title1": "Building the",
    "about.title2": "future of",
    "about.title3": "Mobility",
    "about.desc1":
      "리브릿은 차량 소유자, 부품 공급업체, 정비소를 하나로 연결하는 종합 모빌리티 플랫폼을 통해 자동차 관리의 패러다임을 혁신합니다.",
    "about.desc2":
      "데이터 기반의 정확한 부품 매칭 기술과 전국 단위 유통 및 정비 네트워크를 바탕으로, 누구나 쉽고 투명하게 차량을 관리할 수 있는 생태계를 구축하고 있습니다.",
    "about.stat1.value": "100+",
    "about.stat1.label": "유통 대리점",
    "about.stat1.sublabel": "전국 공식 자동차 부품 가맹 유통망",
    "about.stat2.value": "12,000+",
    "about.stat2.label": "제휴 정비소",
    "about.stat2.sublabel": "전국 협력 정비소 네트워크",
    "about.stat3.value": "40+",
    "about.stat3.label": "자동차 브랜드",
    "about.stat3.sublabel": "2천만 개 이상의 자동차 부품 데이터베이스",
    "about.cta": "부품 유통 및 정비소 제휴 문의",

// Work Section
    "work.title": "Featured",
    "work.subtitle": "/ Recent explorations",
    "work.project1.title": "Kinetic Typography",
    "work.project1.category": "Interactive Experience",
    "work.project2.title": "Generative Patterns",
    "work.project2.category": "Visual System",
    "work.project3.title": "Spatial Interface",
    "work.project3.category": "3D Navigation",

// Services Section
    "services.title": "Capabilities",
    "services.subtitle": "/ What we bring to the table",
    "services.service1.title": "Creative Development",
    "services.service1.desc": "Pushing the boundaries of what's possible on the web",
    "services.service2.title": "Visual Design",
    "services.service2.desc": "Crafting memorable experiences through thoughtful aesthetics",
    "services.service3.title": "Motion & Animation",
    "services.service3.desc": "Bringing interfaces to life with purposeful movement",
    "services.service4.title": "Technical Strategy",
    "services.service4.desc": "Building scalable solutions that perform beautifully",

// Contact Section
    "contact.title": "Contact",
    "contact.desc1": "부품 유통 대리점 가맹, 정비소 제휴 등",
    "contact.desc2": "서비스 관련 문의사항이 있으실 경우",
    "contact.desc3": "언제든지 연락주세요.",
    "contact.form.name": "이름",
    "contact.form.namePlaceholder": "이름을 입력해주세요.",
    "contact.form.email": "이메일",
    "contact.form.emailPlaceholder": "email@example.com",
    "contact.form.title": "제목",
    "contact.form.titlePlaceholder": "제목을 입력해주세요.",
    "contact.form.message": "상세내용",
    "contact.form.messagePlaceholder": "문의 내용을 입력해주세요.",
    "contact.form.submit": "문의 보내기",
    "contact.form.sending": "전송 중...",
    "contact.form.success": "문의가 성공적으로 전송되었습니다!",
    "contact.form.error": "문의 전송 중 오류가 발생했습니다.",
  },
  en: {
    // Navigation
    "nav.home": "Home",
    "nav.about": "About",
    "nav.capability": "Capability",
    "nav.service": "Service",
    "nav.contact": "Contact",
    "nav.getStarted": "Get Started",

// Hero Section
    "hero.badge": "Rebrit",
    "hero.title": "Bridging Real Life and Information Technology",
    "hero.description":
      "Rebrit is a mobility platform company leading the digital transformation of the automotive aftermarket.",
    "hero.description2": "",
    "hero.cta1": "Explore Services",
    "hero.cta2": "Contact Us",
    "hero.scroll": "Scroll to explore",

// About Section
    "about.title1": "Building the",
    "about.title2": "future of",
    "about.title3": "Mobility",
    "about.desc1":
      "Rebrit is revolutionizing the paradigm of vehicle management through a comprehensive mobility platform that connects vehicle owners, parts suppliers, and repair shops.",
    "about.desc2":
      "Based on data-driven accurate parts matching technology and nationwide distribution and maintenance networks, we are building an ecosystem where anyone can easily and transparently manage their vehicles.",
    "about.stat1.value": "100+",
    "about.stat1.label": "Distribution Dealers",
    "about.stat1.sublabel": "Nationwide Official Auto Parts Distribution Network",
    "about.stat2.value": "12,000+",
    "about.stat2.label": "Partner Repair Shops",
    "about.stat2.sublabel": "Nationwide Repair Shop Network",
    "about.stat3.value": "40+",
    "about.stat3.label": "Car Brands",
    "about.stat3.sublabel": "Over 20 Million Auto Parts Database",
    "about.cta": "Parts Distribution & Repair Shop Partnership Inquiry",

// Contact Section
    "contact.title": "Contact",
    "contact.desc1": "For parts distribution franchise, repair shop partnership,",
    "contact.desc2": "and service-related inquiries,",
    "contact.desc3": "please feel free to contact us anytime.",
    "contact.form.name": "Name",
    "contact.form.namePlaceholder": "Please enter your name",
    "contact.form.email": "Email",
    "contact.form.emailPlaceholder": "email@example.com",
    "contact.form.title": "Title",
    "contact.form.titlePlaceholder": "Please enter a title",
    "contact.form.message": "Message",
    "contact.form.messagePlaceholder": "Please tell us the details",
    "contact.form.submit": "Send Inquiry",
    "contact.form.sending": "Sending...",
    "contact.form.success": "Your inquiry has been sent successfully!",
    "contact.form.error": "An error occurred while sending your inquiry.",
  },
}

export function LanguageProvider({ children }: { children: ReactNode }) {
  const [language, setLanguage] = useState<Language>("ko")

const toggleLanguage = () => {
    setLanguage((prev) => (prev === "ko" ? "en" : "ko"))
  }

const t = (key: string): string => {
    return translations[language][key as keyof (typeof translations)["ko"]] || key
  }

return <LanguageContext.Provider value={{ language, toggleLanguage, t }}>{children}</LanguageContext.Provider>
}

export function useLanguage() {
  const context = useContext(LanguageContext)
  if (context === undefined) {
    throw new Error("useLanguage must be used within a LanguageProvider")
  }
  return context
}
[V0_FILE]xml:file="app/favicon.svg" isMerged="true"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" fill="#1e293b"/>
  <text x="50" y="72" font-family="Arial, sans-serif" font-size="70" font-weight="bold" fill="#ffffff" text-anchor="middle">R</text>
</svg>
[V0_FILE]xml:file="app/icon.svg"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" fill="#1a1a1a" rx="6"/>
  <text x="16" y="24" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#ffffff" text-anchor="middle">R</text>
</svg>
[V0_FILE]typescript:file="app/layout.tsx" isEdit="true" isQuickEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Rebrit, building the future of Mobility",
  description: "리브릿은 자동차 애프터마켓의 디지털 트랜스포메이션을 선도하는 모빌리티 플랫폼 기업입니다.",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans antialiased`}>
        {children}
        <Analytics />
      </body>
    </html>
  )
}</article></body></html>

{t("about.title1")} {t("about.title2")} {t("about.title3")}

{currentContent.title}

{service.title}

{currentContent.title}

{project.title}

{t("hero.title")}

{t("contact.title")}

{t("about.title1")}
{t("about.title2")}
{t("about.title3")}