> ## Documentation Index
> Fetch the complete documentation index at: https://intro.codebucket.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 코드버킷 소개

> 직접 만들고, 직접 운영합니다. 24년차 풀스택 대표 개발자가 직접 만들고 운영하는 외주 전문 웹 개발 사업체.

export const ProcessGrid = () => {
  const processSteps = [{
    id: 1,
    title: '문의',
    desc: '프로젝트 의뢰 접수. 사업·기술 요건을 RFP로 정리해 초기 검토합니다.',
    deliverables: [{
      code: 'RFP',
      name: '개발 제안서',
      required: true
    }]
  }, {
    id: 2,
    title: '제안',
    desc: '24년차 풀스택 대표가 기능 범위·견적을 직접 검토해 제안합니다.',
    deliverables: [{
      code: 'SOW',
      name: '기능 범위 정의서',
      required: true
    }, {
      code: 'QUO',
      name: '개발 견적서',
      required: true
    }]
  }, {
    id: 3,
    title: '계약',
    desc: 'SRS 합의 + NDA·IPA·표준계약서. 에스크로로 안전하게 결제.',
    deliverables: [{
      code: 'SRS',
      name: '기능 요구 정의서',
      required: true
    }, {
      code: 'CTR',
      name: '계약서',
      required: true
    }, {
      code: 'IPA',
      name: '지적재산권 귀속 확인서',
      required: true
    }, {
      code: 'NDA',
      name: '비밀유지협약서',
      required: true
    }]
  }, {
    id: 4,
    title: '개발',
    desc: '와이어프레임부터 코드까지. 실시간 동작 환경에서 진행 상황 공유.',
    deliverables: [{
      code: 'SCH',
      name: '개발 일정표',
      required: true
    }, {
      code: 'MSR',
      name: '중간 업무 보고서',
      required: true
    }, {
      code: '',
      name: '와이어프레임',
      required: true
    }, {
      code: '',
      name: '디자인/시안',
      required: true
    }, {
      code: '',
      name: 'DB ERD/DDL',
      required: false
    }, {
      code: '',
      name: '기술 스택 및 라이브러리 정의서',
      required: true
    }, {
      code: '',
      name: '시스템 아키텍처 다이어그램',
      required: false
    }, {
      code: '',
      name: '핵심 기능 플로우차트/시퀀스 다이어그램',
      required: false
    }, {
      code: '',
      name: 'API 명세서',
      required: false
    }, {
      code: '',
      name: '원본 소스코드',
      required: true
    }, {
      code: '',
      name: '코드 구조 정의서',
      required: true
    }, {
      code: '',
      name: '환경 설정 문서',
      required: true
    }, {
      code: '',
      name: 'Git 브랜치 / 버전 관리 정책',
      required: false
    }]
  }, {
    id: 5,
    title: '검수',
    desc: '단위·통합·시나리오 테스트로 결과물을 확정합니다.',
    deliverables: [{
      code: 'TST',
      name: '테스트 시트',
      required: true
    }, {
      code: 'ACC',
      name: '검수 완료 보고서',
      required: true
    }]
  }, {
    id: 6,
    title: '배포',
    desc: '소스 전체 인계 + 프로젝트 완료 보고 + 서비스 런칭.',
    deliverables: [{
      code: 'CMP',
      name: '프로젝트 완료 보고서',
      required: true
    }, {
      code: '',
      name: '운영 매뉴얼',
      required: false
    }]
  }, {
    id: 7,
    title: '운영',
    desc: '하자•유지보수 및 시스템 운영 + 버킷플러스로 장기 운영 가능.',
    deliverables: [{
      code: 'BPT',
      name: '버킷플러스 서비스 이용 약관',
      required: true
    }, {
      code: 'BPC',
      name: '버킷플러스 계약서',
      required: true
    }, {
      code: 'HOT',
      name: '호스팅 서비스 이용 약관',
      required: true
    }, {
      code: '',
      name: '버그 트래킹 로그',
      required: false
    }]
  }];
  const extraDeliverables = [{
    code: 'TRN',
    name: '거래명세서',
    required: true
  }];
  const [hoveredStep, setHoveredStep] = useState(null);
  const totalCount = processSteps.reduce((sum, s) => sum + s.deliverables.length, 0) + extraDeliverables.length;
  const scrollContainerRef = useRef(null);
  const groupRefs = useRef({});
  useEffect(() => {
    if (hoveredStep && scrollContainerRef.current && groupRefs.current[hoveredStep]) {
      const container = scrollContainerRef.current;
      const target = groupRefs.current[hoveredStep];
      const containerRect = container.getBoundingClientRect();
      const targetRect = target.getBoundingClientRect();
      const offset = targetRect.top - containerRect.top + container.scrollTop - 8;
      container.scrollTo({
        top: offset,
        behavior: 'smooth'
      });
    }
  }, [hoveredStep]);
  return <div className="not-prose grid grid-cols-1 lg:grid-cols-2 gap-6">
      <div className="space-y-2">
        {processSteps.map(step => {
    const isActive = hoveredStep === step.id;
    return <div key={step.id} onMouseEnter={() => setHoveredStep(step.id)} onMouseLeave={() => setHoveredStep(null)} className={`px-4 py-3 rounded-xl border transition-all cursor-default ${isActive ? 'border-primary bg-primary/5 dark:bg-primary/10' : 'border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20'}`}>
              <div className="flex items-baseline gap-4">
                <span className={`text-2xl font-light tabular-nums tracking-tight transition-colors ${isActive ? 'text-primary dark:text-primary-light' : 'text-gray-300 dark:text-gray-600'}`}>
                  {String(step.id).padStart(2, '0')}
                </span>
                <div className="flex-1 min-w-0">
                  <h3 className="text-base font-medium text-gray-900 dark:text-gray-200 m-0">
                    {step.title}
                  </h3>
                  <p className="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-0">
                    {step.desc}
                  </p>
                </div>
                <span className="text-xs text-gray-400 dark:text-gray-500 flex-shrink-0 self-center tabular-nums">
                  {step.deliverables.length}종
                </span>
              </div>
            </div>;
  })}
      </div>

      <div className="lg:relative">
        <div className="flex flex-col rounded-2xl border border-gray-200 dark:border-white/10 lg:absolute lg:inset-0 lg:overflow-hidden">
          <div className="flex items-baseline justify-between px-5 py-4 bg-white dark:bg-[#1F1F1F] border-b border-gray-200/60 dark:border-white/10 flex-shrink-0 rounded-t-2xl">
            <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider m-0">
              전체 산출물
            </h4>
            <span className="text-xs text-gray-400 dark:text-gray-500 tabular-nums">{totalCount}종</span>
          </div>
          <div ref={scrollContainerRef} className="lg:flex-1 lg:overflow-y-auto p-5 space-y-3 bg-gray-50 dark:bg-[#141414] rounded-b-2xl scroll-smooth">
            {processSteps.map(step => {
    const isHighlight = hoveredStep === step.id;
    const isDimmed = hoveredStep !== null && !isHighlight;
    return <div key={step.id} ref={el => {
      groupRefs.current[step.id] = el;
    }} className={`transition-opacity duration-200 ${isDimmed ? 'opacity-25' : 'opacity-100'}`}>
                  <div className={`text-[11px] font-semibold uppercase tracking-wider mb-1 px-2.5 transition-colors ${isHighlight ? 'text-primary dark:text-primary-light' : 'text-gray-400 dark:text-gray-500'}`}>
                    {step.title}
                  </div>
                  <div className="space-y-0.5">
                    {step.deliverables.map((d, i) => <div key={i} className={`flex items-center gap-2 px-2.5 py-1.5 rounded-md text-sm transition-colors ${isHighlight ? 'bg-primary/10 dark:bg-primary/20' : ''}`}>
                        <span className="font-mono text-[11px] text-gray-400 dark:text-gray-500 w-9 flex-shrink-0 text-right tabular-nums">
                          {d.code || '—'}
                        </span>
                        <span className="text-gray-700 dark:text-gray-300 flex-1">
                          {d.name}
                        </span>
                        {!d.required && <span className="text-[10px] text-gray-400 dark:text-gray-500 flex-shrink-0">옵션</span>}
                      </div>)}
                  </div>
                </div>;
  })}
            <div className={`mt-3 pt-3 border-t border-gray-200/60 dark:border-white/10 transition-opacity duration-200 ${hoveredStep !== null ? 'opacity-25' : 'opacity-100'}`}>
              <div className="text-[11px] font-semibold uppercase tracking-wider mb-1 px-2.5 text-gray-400 dark:text-gray-500">
                단계 외 (공통)
              </div>
              <div className="space-y-0.5">
                {extraDeliverables.map((d, i) => <div key={i} className="flex items-center gap-2 px-2.5 py-1.5 rounded-md text-sm">
                    <span className="font-mono text-[11px] text-gray-400 dark:text-gray-500 w-9 flex-shrink-0 text-right tabular-nums">
                      {d.code || '—'}
                    </span>
                    <span className="text-gray-700 dark:text-gray-300 flex-1">
                      {d.name}
                    </span>
                    {!d.required && <span className="text-[10px] text-gray-400 dark:text-gray-500 flex-shrink-0">옵션</span>}
                  </div>)}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const ProductCard = ({img, href, title, description, model, type}) => {
  const chips = Array.isArray(model) ? model : model ? [model] : [];
  return <a href={href} target="_blank" rel="noopener noreferrer" className="group block border-b-[1px] hover:border-b-[2px] transition-colors duration-200">
      <div className="flex flex-col gap-4 rounded-xl md:p-1">
        <div className="w-full h-36 overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
          <div role="img" aria-label={title} className="w-full h-full bg-center bg-cover transition-transform scale-105 duration-300 group-hover:scale-110" style={{
    backgroundImage: `url(${img})`
  }} />
        </div>
        <div className="flex flex-col gap-3 pb-4">
          <h2 className="!text-[1.2rem] font-lg text-gray-600 mt-0 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-200 transition-colors mb-[-8px]">
            {title}
          </h2>
          <p className="text-gray-500 dark:text-gray-400 text-sm font-medium">
            {description}
          </p>
          <div className="flex flex-wrap gap-2 mt-2 mb-1">
            {chips.map((chip, idx) => <span key={idx} className="bg-gray-100 dark:bg-[#181817] text-gray-600 dark:text-white rounded-lg px-2 py-1 text-sm font-medium">{chip}</span>)}
            {type && <span className="bg-primary-light dark:bg-primary-dark text-white dark:text-white rounded-lg px-2 py-1 text-sm font-medium">{type}</span>}
          </div>
        </div>
      </div>
    </a>;
};

export const appCategories = [{
  id: 'web-solution',
  label: '웹 솔루션',
  items: [{
    id: 'platform',
    title: '플랫폼·LMS·멤버십',
    desc: '기성 LMS·멤버십 SaaS로는 어려운 매칭·권한·정산 구조만 자체 구축. 양면·다면 플랫폼, 맞춤 LMS, 회원 전용 사이트 등.',
    icon: '/images/icons/platform.svg',
    image: {
      light: '/images/solutions/lms1.png',
      dark: '/images/solutions/lms1.png'
    },
    href: '#'
  }, {
    id: 'business-system',
    title: '비즈니스 시스템 (ERP·CRM·예약)',
    desc: '기성 ERP·CRM·예약 SaaS로 다룰 수 없는 사업 고유 흐름만 자체 구축. 비표준 주문·재고·예약 로직, 사내 시스템 연동 등.',
    icon: '/images/icons/business-system.svg',
    image: {
      light: '/images/solutions/erp1.webp',
      dark: '/images/solutions/erp1.webp'
    },
    href: '#'
  }, {
    id: 'dashboard-automation',
    title: '대시보드·업무 자동화',
    desc: '범용 BI·노코드 툴로 풀리지 않는 도메인 특화 영역만 자체 구축. 복합 시각화, 비표준 자동화, 외부 시스템 수집·연동 등.',
    icon: '/images/icons/dashboard.svg',
    image: {
      light: '/images/solutions/dashboard1.png',
      dark: '/images/solutions/dashboard1.png'
    },
    href: '#'
  }, {
    id: 'ai-translation',
    title: 'AI 응용·도메인 워크플로',
    desc: '범용 LLM 챗봇·번역 SaaS로는 어려운 도메인 흐름만 자체 구축. AI 1차 처리 + 휴먼 감수 + AI 2차 평가 파이프라인, 후보 정량 매칭·비교 등.',
    icon: '/images/icons/algorithm.svg',
    image: {
      light: '/images/solutions/ai-translation.png',
      dark: '/images/solutions/ai-translation.png'
    },
    href: '#'
  }]
}, {
  id: 'desktop-application',
  label: '데스크톱 어플리케이션',
  items: [{
    id: 'native-desktop',
    title: '네이티브 데스크톱 앱',
    desc: '웹·SaaS로 다룰 수 없는 로컬 파일·하드웨어·네트워크 직접 제어 영역만. Windows·macOS 설치형 업무용 앱.',
    icon: '/images/icons/desktop-app.svg',
    image: {
      light: '/images/solutions/xray.png',
      dark: '/images/solutions/xray.png'
    },
    href: '#'
  }, {
    id: 'hybrid-app',
    title: '하이브리드·크로스플랫폼 앱',
    desc: '표준 SaaS로는 안 되는 데스크톱 앱을 빠르게. Electron·Tauri 등 웹 기술 기반으로 출시·유지보수 비용 최소화.',
    icon: '/images/icons/hybrid-app.svg',
    image: {
      light: '/images/solutions/android.png',
      dark: '/images/solutions/android.png'
    },
    href: '#'
  }, {
    id: 'pwa',
    title: 'PWA (설치형 웹앱)',
    desc: '앱스토어 심사·플랫폼 종속 없이 자체 배포·운영하는 설치형 웹앱. 브라우저로 시작해 사용자가 원할 때 설치.',
    icon: '/images/icons/pwa.svg',
    image: {
      light: '/images/solutions/iphone.png',
      dark: '/images/solutions/iphone.png'
    },
    href: '#'
  }]
}, {
  id: 'research-algorithm',
  label: '연구·알고리즘',
  items: [{
    id: 'government-rnd',
    title: '정부지원과제 R&D',
    desc: '외주 개발만으로 부족한 보고서·산출물 체계까지 함께. 국책과제·정부지원사업의 기술 개발과 시제품 직접 구현.',
    icon: '/images/icons/rnd-project.svg',
    image: {
      light: '/images/solutions/rnd.png',
      dark: '/images/solutions/rnd.png'
    },
    href: '#'
  }, {
    id: 'algorithm-development',
    title: '알고리즘 설계·구현',
    desc: '오픈소스·기성 라이브러리로는 풀 수 없는 신규 로직만 자체 설계·구현. 수학·로직 검증부터 동작 코드까지.',
    icon: '/images/icons/algorithm.svg',
    image: {
      light: '/images/solutions/algorithm.png',
      dark: '/images/solutions/algorithm.png'
    },
    href: '#'
  }, {
    id: 'research-prototype',
    title: '신진 연구 프로토타이핑',
    desc: '기성 데모 툴로는 어려운 연구 가설의 빠른 구현. 논문·아이디어를 동작 가능한 프로토타입과 시연용 데모로.',
    icon: '/images/icons/prototype.svg',
    image: {
      light: '/images/solutions/prototype.png',
      dark: '/images/solutions/prototype.png'
    },
    href: '#'
  }]
}];

export const ProductTiles = ({categories, hideButtons = false}) => {
  const [activeCategory, setActiveCategory] = useState(categories[0].id);
  const [activeSubTab, setActiveSubTab] = useState(categories[0].items[0]?.id ?? null);
  const currentCategory = categories.find(cat => cat.id === activeCategory);
  const currentSub = currentCategory?.items.find(item => item.id === activeSubTab);
  return <div className="not-prose space-y-6">
    {!hideButtons && <div className="flex flex-wrap gap-2">
        {categories.map(cat => <button key={cat.id} onClick={() => {
    setActiveCategory(cat.id);
    setActiveSubTab(cat.items[0]?.id ?? null);
  }} className={`px-4 py-2 text-sm rounded-full font-medium transition-colors ${activeCategory === cat.id ? 'bg-[#0A0B0D] text-white dark:bg-white dark:text-[#0A0B0D] border-black' : 'bg-gray-100 dark:bg-white/10 text-black dark:text-white'}`}>
            {cat.label}
          </button>)}
      </div>}

      <div>
        {currentCategory?.items?.length ? <div className="flex flex-col lg:flex-row gap-6 bg-gray-100 dark:bg-[#141414] rounded-2xl">
            <div className="flex flex-col w-full lg:w-1/2 space-y-2 p-4">
              {currentCategory.items.map(item => <a key={item.id} onMouseOver={() => setActiveSubTab(item.id)} className={`flex items-start gap-1.5 text-left px-5 py-3 rounded-2xl transition-all ${activeSubTab === item.id ? 'bg-white dark:bg-white/5' : ''}`}>
                  <div className="text-xl mr-3 mt-1"><img src={item.icon} alt={item.title} className="w-8 h-8 dark:invert" /></div>
                  <div className="flex-1">
                    <h3 className="font-medium text-base text-black dark:text-white">
                      {item.title}
                    </h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">{item.desc}</p>
                  </div>
                  <div className={`flex items-center justify-center min-w-[24px] self-center ${activeSubTab === item.id ? 'opacity-100' : 'opacity-0'}`}>
                    <div className="hidden dark:block">
                      <Icon icon="chevron-right" size="14" color="#FFF" />
                    </div>
                    <div className="block dark:hidden">
                      <Icon icon="chevron-right" size="14" color="#0A0B0D" />
                    </div>
                  </div>
                </a>)}
            </div>
            <div className="group w-full h-[400px] lg:w-1/2 rounded-2xl flex items-center justify-center overflow-hidden p-6">
              {currentSub?.image ? <>
                <img src={currentSub.image.light} alt={currentSub.title} className="block dark:hidden max-w-full max-h-full w-auto h-auto object-contain rounded-xl drop-shadow-xl" />
                <img src={currentSub.image.dark} alt={currentSub.title} className="hidden dark:block max-w-full max-h-full w-auto h-auto object-contain rounded-xl drop-shadow-xl" />
              </> : <p className="text-gray-400 dark:text-gray-500 p-8">No preview available</p>}
            </div>
          </div> : <p className="text-sm text-gray-500 dark:text-gray-400">
            No features available for this category.
          </p>}
      </div>
    </div>;
};

export const Title = ({children}) => {
  return <div className="text-gray-900 dark:text-gray-200 text-2xl tracking-tight">
      {children}
    </div>;
};

export const Container = ({children}) => {
  return <div className="px-4 lg:px-10 py-14">
      {children}
    </div>;
};

<script type="application/ld+json">
  {`{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://codebucket.dev/#organization","name":"코드버킷","alternateName":"CodeBucket","url":"https://codebucket.dev","logo":{"@type":"ImageObject","url":"https://cdn.codebucket.dev/brand/codebucket_logo_light.png"},"image":"https://cdn.codebucket.dev/brand/og-images/og-default.png","sameAs":["https://intro.codebucket.dev"],"description":"기획·설계·개발·운영·유지보수까지 24년차 풀스택 대표 개발자가 직접 수행하는 외주 전문 웹 개발 사업체. 사업을 파트 단위로 분해해 시스템을 자체 설계·개발하며, 7단계 29종 산출물·표준계약서·에스크로 결제로 진행됩니다.","slogan":"직접 만들고, 직접 운영합니다.","areaServed":"KR","knowsLanguage":["ko"],"foundingDate":"2019-07","founder":{"@id":"https://intro.codebucket.dev/about#person"},"hasOfferCatalog":{"@type":"OfferCatalog","name":"코드버킷 서비스","itemListElement":[{"@type":"Offer","itemOffered":{"@type":"Service","@id":"https://intro.codebucket.dev/services/fullstack#service","name":"풀스택 개발","url":"https://intro.codebucket.dev/services/fullstack"}},{"@type":"Offer","itemOffered":{"@type":"Service","@id":"https://intro.codebucket.dev/services/bucket-plus#service","name":"버킷플러스 통합 운영","url":"https://intro.codebucket.dev/services/bucket-plus"}},{"@type":"Offer","itemOffered":{"@type":"Service","@id":"https://intro.codebucket.dev/services/hosting#service","name":"서버 호스팅","url":"https://intro.codebucket.dev/services/hosting"}}]},"knowsAbout":["LMS 개발","플랫폼 개발","자사몰 개발","자동화 시스템","관제 대시보드","모니터링 대시보드","AI 응용 시스템 개발","LLM 통합 개발","AI 워크플로 구축","Gemini API 통합","Claude API 통합","OpenAI API 통합","정부지원사업 시스템 개발","R&D 시스템 개발","TIPS 개발","프로토타입 개발","MVP 개발","AWS 호스팅","100% 자체 개발","파트 단위 시스템 설계","29종 산출물","과기정통부 SW 표준계약서","에스크로 안전결제"]},{"@type":"WebSite","@id":"https://intro.codebucket.dev/#website","url":"https://intro.codebucket.dev","name":"코드버킷 소개","description":"코드버킷의 서비스·진행 절차·파트 카탈로그·포트폴리오·자주 묻는 질문을 안내하는 공식 소개 사이트","publisher":{"@id":"https://codebucket.dev/#organization"},"inLanguage":"ko-KR"}]}`}
</script>

<div className="px-5 divide-y divide-gray-100 dark:divide-white/10">
  <Container>
    <div className="w-full flex flex-col">
      <div className="flex flex-col items-start justify-center w-full max-w-4xl text-left">
        <div className="text-gray-900 dark:text-gray-200 text-4xl tracking-tight main-title">
          직접 만들고, 직접 운영합니다.
        </div>

        <p className="text-gray-600 dark:text-gray-400 text-left mt-3 mb-8 sub-title">
          개발이 끝나도 관리는 멈추지 않습니다. 24년차 풀스택 대표 개발자가 직접 만들고 운영합니다.<br />
          외주 후 인계도, 다른 업체 연락도 필요 없습니다.<br />
          도메인만 준비하세요. 서버 호스팅까지 코드버킷이 제공합니다.
        </p>

        <p className="text-md font-semibold text-gray-600 dark:text-gray-400 text-left mt-2 mb-1">
          코드버킷은 특히 다음과 같은 분께 잘 맞습니다.
        </p>

        <div>
          <ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-1 mt-2">
            <li>독자적인 비즈니스 모델을 바탕으로 <span class="text-accent">시스템 전체 자체 개발</span>이 필요하신 분</li>
            <li>사업의 적절성·가능성 검증을 위해 <span class="text-accent">프로토타입 개발</span>이 필요하신 분</li>
            <li>정부지원사업 등으로 <span class="text-accent">체계적인 문서 산출·업무 관리</span>가 요구되는 기술 개발을 진행하시는 분</li>
          </ul>
        </div>

        <p className="text-lg leading-loose text-gray-600 dark:text-gray-400 text-left mt-8 mb-4">
          다양한 산업의 시스템을 직접 만들어 왔습니다.<br />
          그래서 당신의 비즈니스를 빠르게 이해합니다.<br />
          이제, 당신의 아이디어를 들려주세요.
        </p>

        <div className="flex flex-row gap-4 mt-5">
          <a href="/about">
            <button type="button" className="px-5 flex items-center font-medium text-sm rounded-full py-2 shadow-sm text-white dark:text-gray-900 bg-primary-dark dark:bg-primary-light hover:opacity-[0.9] hover:bg-primary justify-center">
              코드버킷 알아보기

              <svg
                className="size-3 ml-2 bg-white dark:bg-gray-900"
                style={{
            maskImage: 'url("https://mintlify.b-cdn.net/solid/arrow-right-long.svg")',
            maskRepeat: 'no-repeat',
            maskPosition: 'center center'
          }}
              />
            </button>
          </a>

          <a href="/services/fullstack">
            <button type="button" className="px-5 flex items-center font-medium text-sm rounded-full py-2 border border-gray-300 dark:border-white/15 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-white/5 justify-center">
              서비스 살펴보기
            </button>
          </a>
        </div>
      </div>
    </div>
  </Container>

  <Container>
    <div className="flex flex-col w-full mb-7">
      <div className="flex items-center justify-between w-full">
        <Title>
          코드버킷 제공 서비스
        </Title>
      </div>

      <p className="text-[#5B616E] dark:text-gray-300 text-md mb-1 mt-3">
        개발부터 운영까지, 필요한 모든 것을 제공합니다.
      </p>
    </div>

    <div className="dark:hidden block card-block">
      <CardGroup cols={3}>
        <ProductCard title="풀스택 개발" description="24년차 풀스택 대표 개발자가 기획부터 배포까지 직접 구축합니다." img="https://mintcdn.com/codebucket/RG1lHv4W8WrNqBh5/images/products/fullstack-light.svg?fit=max&auto=format&n=RG1lHv4W8WrNqBh5&q=85&s=015d89cb272a5978b2370dfe08055343" model={["기획•설계", "테스트", "배포"]} type="자체개발" width="320" height="140" data-path="images/products/fullstack-light.svg" />

        <ProductCard title="버킷플러스" description="유지 보수·기능 업그레이드·신규 기능 추가까지. 같은 사람이 단일 월 구독으로 운영합니다." img="https://mintcdn.com/codebucket/RG1lHv4W8WrNqBh5/images/products/operations-light.svg?fit=max&auto=format&n=RG1lHv4W8WrNqBh5&q=85&s=ca89e76d34e6a6d2c0d455ee8d7c1528" model={["유지 보수", "기능 업그레이드", "신규 기능 추가"]} type="서비스 운영" width="320" height="140" data-path="images/products/operations-light.svg" />

        <ProductCard title="서버 호스팅" description="AWS 서울 리전에서 안정적인 서버 호스팅이 기본 제공됩니다." img="https://mintcdn.com/codebucket/RG1lHv4W8WrNqBh5/images/products/hosting-light.svg?fit=max&auto=format&n=RG1lHv4W8WrNqBh5&q=85&s=a49807ce6a65dd8a3e5bbb57c96c8984" model={["서버 호스팅", "시스템 관리", "보안"]} type="AWS 서울리전" width="320" height="140" data-path="images/products/hosting-light.svg" />
      </CardGroup>
    </div>

    <div className="dark:block hidden card-block">
      <CardGroup cols={3}>
        <ProductCard title="풀스택 개발" description="24년차 풀스택 대표 개발자가 기획부터 배포까지 직접 구축합니다." img="https://mintcdn.com/codebucket/RG1lHv4W8WrNqBh5/images/products/fullstack-dark.svg?fit=max&auto=format&n=RG1lHv4W8WrNqBh5&q=85&s=f723f68f7c1b63cb44c69c1f1dae88b6" model={["기획•설계", "테스트", "배포"]} type="자체개발" width="320" height="140" data-path="images/products/fullstack-dark.svg" />

        <ProductCard title="서비스 직접 운영" description="유지 보수부터 기능 업그레이드·신규 개발까지. 같은 사람이 그대로 운영합니다." img="https://mintcdn.com/codebucket/RG1lHv4W8WrNqBh5/images/products/operations-dark.svg?fit=max&auto=format&n=RG1lHv4W8WrNqBh5&q=85&s=2ac27e4f56d32bcc11200b04c20ec367" model={["유지 보수", "기능 업그레이드", "신규 기능 추가"]} type="버킷플러스" width="320" height="140" data-path="images/products/operations-dark.svg" />

        <ProductCard title="호스팅 서비스 제공" description="AWS 서울 리전에서 안정적인 서버 호스팅이 기본 제공됩니다." img="https://mintcdn.com/codebucket/RG1lHv4W8WrNqBh5/images/products/hosting-dark.svg?fit=max&auto=format&n=RG1lHv4W8WrNqBh5&q=85&s=5776f05f8f647b546d33d32d3f6e8792" model={["자체 호스팅", "보안"]} type="AWS 서울리전" width="320" height="140" data-path="images/products/hosting-dark.svg" />
      </CardGroup>
    </div>
  </Container>

  <Container>
    <div className="flex flex-col w-full mb-8">
      <div className="flex items-center justify-between w-full">
        <Title>
          어떤 아이디어를 가지고 계세요?
        </Title>
      </div>

      <p className="text-[#5B616E] dark:text-gray-300 text-md mb-1 mt-3">
        초기 구상부터 들려주세요. 코드버킷이 어떤 형태로 만들어드릴 수 있는지 함께 안내합니다.
      </p>
    </div>

    <ProductTiles categories={appCategories} />

    <div className="flex flex-col items-center mt-10 gap-3">
      <p className="text-sm text-gray-500 dark:text-gray-400 text-center">
        실제로 만들어 온 작업물을 보고 싶으신가요?
      </p>

      <a href="/portfolio">
        <button type="button" className="px-6 flex items-center font-medium text-sm rounded-full py-3 shadow-sm text-white dark:text-gray-900 bg-primary-dark dark:bg-primary-light hover:opacity-[0.9] hover:bg-primary justify-center">
          포트폴리오 둘러보기

          <svg
            className="size-3 ml-2 bg-white dark:bg-gray-900"
            style={{
          maskImage: 'url("https://mintlify.b-cdn.net/solid/arrow-right-long.svg")',
          maskRepeat: 'no-repeat',
          maskPosition: 'center center'
        }}
          />
        </button>
      </a>
    </div>
  </Container>

  <Container>
    <div className="flex flex-col w-full mb-8">
      <div className="flex items-center justify-between w-full">
        <Title>
          이렇게 일합니다.
        </Title>
      </div>

      <p className="text-[#5B616E] dark:text-gray-300 text-md mb-1 mt-3">
        모든 프로젝트는 <strong>7단계 29종 산출물</strong>로 진행됩니다. 단계마다 무엇을 받게 되는지 미리 알려드립니다.
      </p>
    </div>

    <ProcessGrid />

    <div className="flex justify-center mt-10">
      <a href="#">
        <button type="button" className="px-5 flex items-center font-medium text-sm rounded-full py-2.5 border border-gray-300 dark:border-white/20 text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
          진행 절차 상세 보기

          <svg
            className="size-3 ml-2 bg-gray-800 dark:bg-gray-200"
            style={{
          maskImage: 'url("https://mintlify.b-cdn.net/solid/arrow-right-long.svg")',
          maskRepeat: 'no-repeat',
          maskPosition: 'center center'
        }}
          />
        </button>
      </a>
    </div>
  </Container>

  <Container>
    <div className="flex flex-col items-center text-center py-12 px-4">
      <div className="text-3xl tracking-tight text-gray-900 dark:text-gray-200 main-title">
        구상 단계부터 함께 검토합니다.
      </div>

      <p className="text-base text-gray-600 dark:text-gray-400 max-w-xl mb-7 mt-2">
        막연한 아이디어든, 명세까지 정리된 기획이든.<br />
        24년차 풀스택 대표 개발자가 직접 검토합니다.
      </p>

      <a href="https://codebucket.dev/inquiry">
        <button type="button" className="px-7 flex items-center font-medium text-base rounded-full py-3 shadow-sm text-white dark:text-gray-900 bg-primary-dark dark:bg-primary-light hover:opacity-[0.9] hover:bg-primary justify-center">
          상담·견적 의뢰하기

          <svg
            className="size-3.5 ml-2 bg-white dark:bg-gray-900"
            style={{
          maskImage: 'url("https://mintlify.b-cdn.net/solid/arrow-right-long.svg")',
          maskRepeat: 'no-repeat',
          maskPosition: 'center center'
        }}
          />
        </button>
      </a>
    </div>
  </Container>
</div>