초기 포트폴리오 사이트 구축

README.md

@@ -1,36 +1,171 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# 🤖 쟁승메이드 - RPA 자동화 & 비즈니스 솔루션
 
-## Getting Started
+대기업 출신 개발자가 제공하는 전문 비즈니스 솔루션 포트폴리오 웹사이트
 
-First, run the development server:
+## 📌 프로젝트 소개
+
+**쟁승메이드**는 RPA 자동화, 웹 개발, 앱 개발 서비스를 제공하는 비즈니스 솔루션 포트폴리오 사이트입니다.
+외주 개발 서비스를 소개하고 프로젝트를 전시하여 고객을 유치하기 위한 전문적인 랜딩 페이지입니다.
+
+### ✨ 주요 기능
+
+- 🎨 현대적이고 프로페셔널한 디자인
+- 📱 완벽한 반응형 (모바일/태블릿/데스크톱)
+- ⚡ Next.js 14 + TypeScript로 빠른 성능
+- 🎯 RPA 자동화 서비스 강조
+- 💼 서비스 카탈로그 (금액별 분류)
+- 🖼️ 프로젝트 포트폴리오 섹션
+- 📬 문의 폼
+
+## 🛠 기술 스택
+
+- **Framework**: Next.js 14 (App Router)
+- **Language**: TypeScript
+- **Styling**: Tailwind CSS
+- **Deployment**: Vercel (권장)
+
+## 🚀 시작하기
+
+### 1. 개발 서버 실행
 
 ```bash
+# 의존성 설치
+npm install
+
+# 개발 서버 시작
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+브라우저에서 [http://localhost:3000](http://localhost:3000)을 열어 확인하세요.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+### 2. 프로덕션 빌드
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+```bash
+# 빌드
+npm run build
 
-## Learn More
+# 프로덕션 서버 실행
+npm start
+```
 
-To learn more about Next.js, take a look at the following resources:
+## 📦 프로젝트 구조
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+```
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+jaengseung-made/
+├── app/
+│   ├── page.tsx          # 메인 랜딩 페이지
+│   ├── layout.tsx        # 루트 레이아웃
+│   └── globals.css       # 글로벌 스타일
+├── public/               # 정적 파일
+└── package.json
+```
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## 🌐 배포 가이드
 
-## Deploy on Vercel
+### 옵션 1: Vercel 배포 (추천 - 무료)
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+1. [Vercel](https://vercel.com) 계정 생성
+2. GitHub에 프로젝트 푸시
+3. Vercel에서 "Import Project" 클릭
+4. 저장소 선택하고 배포
+5. 자동으로 HTTPS, CDN 제공
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+**장점**: 무료, 자동 배포, 글로벌 CDN, HTTPS
+
+### 옵션 2: Netlify 배포 (무료)
+
+1. [Netlify](https://netlify.com) 계정 생성
+2. "Add new site" → "Import from Git"
+3. 빌드 설정:
+   - Build command: `npm run build`
+   - Publish directory: `.next`
+4. 배포
+
+### 옵션 3: Synology NAS 배포
+
+1. Docker 설치 (Synology Docker 패키지)
+2. Dockerfile 생성:
+```dockerfile
+FROM node:18-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+EXPOSE 3000
+CMD ["npm", "start"]
+```
+3. 이미지 빌드 및 실행
+4. 포트 포워딩 설정 (80 → 3000)
+
+**주의**: NAS는 속도/안정성이 클라우드보다 낮을 수 있음
+
+## 🔧 커스터마이징
+
+### 연락처 정보 수정
+
+`app/page.tsx` 파일에서 다음 정보를 수정하세요:
+
+```tsx
+// 이메일
+contact@jaengseung.com → 실제 이메일
+
+// 전화번호
+010-0000-0000 → 실제 전화번호
+```
+
+### 서비스 가격 수정
+
+`app/page.tsx`의 Services Section에서 가격 수정:
+
+```tsx
+<div className="text-3xl font-bold mb-2">50만원~</div>
+```
+
+### 포트폴리오 추가
+
+`app/page.tsx`의 Portfolio Section에 프로젝트 카드 추가
+
+## 📋 다음 단계
+
+1. **도메인 구매**
+   - Cloudflare (연 $10~15)
+   - GoDaddy
+   - Gabia (한국)
+
+2. **도메인 연결**
+   - Vercel: Dashboard에서 "Add Domain"
+   - DNS 설정: A 레코드 또는 CNAME
+
+3. **플랫폼 등록**
+   - [크몽](https://kmong.com) - 서비스 등록
+   - [숨고](https://soomgo.com) - 프로필 생성
+   - 포트폴리오 URL 첨부
+
+4. **SEO 최적화**
+   - Google Search Console 등록
+   - 사이트맵 제출
+   - 메타 태그 최적화 (이미 적용됨)
+
+5. **실제 프로젝트 추가**
+   - 샘플 RPA 프로젝트 개발
+   - GitHub에 Public Repository 생성
+   - 포트폴리오 섹션에 링크 추가
+
+## 💡 추가 기능 아이디어
+
+- [ ] 문의 폼 백엔드 연동 (Formspree, Netlify Forms)
+- [ ] Google Analytics 추가
+- [ ] 블로그 섹션 (기술 글 작성)
+- [ ] 고객 후기 섹션
+- [ ] 다크 모드
+- [ ] 다국어 지원 (영어)
+- [ ] 챗봇 위젯 (카카오톡 채널)
+
+## 📞 문의
+
+프로젝트 관련 문의: contact@jaengseung.com
+
+---
+
+**쟁승메이드** - 비즈니스 성장을 위한 전문 개발 솔루션

app/globals.css

@@ -3,24 +3,29 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --primary: #1e40af;
+  --primary-light: #3b82f6;
+  --accent: #10b981;
+  --dark: #0f172a;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --color-primary-light: var(--primary-light);
+  --color-accent: var(--accent);
+  --color-dark: var(--dark);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-geist-sans), system-ui, -apple-system, sans-serif;
+}
+
+html {
+  scroll-behavior: smooth;
 }

app/layout.tsx

@@ -13,8 +13,9 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "쟁승메이드 | RPA 자동화 & 비즈니스 솔루션 전문",
-  description: "Generated by create next app",
+  description: "RPA 자동화, 웹 개발, 앱 개발까지. 대기업 출신 개발자가 제공하는 전문 비즈니스 솔루션",
+  keywords: ["RPA", "자동화", "웹개발", "앱개발", "외주개발", "비즈니스솔루션"],
 };
 
 export default function RootLayout({

app/page.tsx

@@ -1,65 +1,446 @@
-import Image from "next/image";
-
 export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+    <div className="min-h-screen">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+      {/* Navigation */}
-        <Image
+      <nav className="fixed top-0 w-full bg-white/90 backdrop-blur-sm z-50 border-b border-gray-200">
-          className="dark:invert"
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          src="/next.svg"
+          <div className="flex justify-between items-center h-16">
-          alt="Next.js logo"
+            <div className="text-2xl font-bold text-blue-900">쟁승메이드</div>
-          width={100}
+            <div className="hidden md:flex space-x-8">
-          height={20}
+              <a href="#services" className="text-gray-700 hover:text-blue-700 transition">서비스</a>
-          priority
+              <a href="#portfolio" className="text-gray-700 hover:text-blue-700 transition">포트폴리오</a>
-        />
+              <a href="#about" className="text-gray-700 hover:text-blue-700 transition">소개</a>
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+              <a href="#contact" className="bg-blue-700 text-white px-6 py-2 rounded-lg hover:bg-blue-800 transition">문의하기</a>
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+            </div>
-            To get started, edit the page.tsx file.
+          </div>
+        </div>
+      </nav>
+
+      {/* Hero Section */}
+      <section className="pt-32 pb-20 px-4 bg-gradient-to-br from-blue-50 via-white to-emerald-50">
+        <div className="max-w-7xl mx-auto text-center">
+          <div className="inline-block mb-4 px-4 py-2 bg-blue-100 text-blue-700 rounded-full text-sm font-semibold">
+            🤖 RPA 자동화 전문
+          </div>
+          <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight">
+            반복 업무를 <span className="text-blue-700">자동화</span>하고<br />
+            생산성을 <span className="text-emerald-600">극대화</span>하세요
           </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+          <p className="text-xl text-gray-600 mb-10 max-w-3xl mx-auto leading-relaxed">
-            Looking for a starting point or more instructions? Head over to{" "}
+            대기업 출신 개발자가 제공하는 RPA 자동화, 웹/앱 개발 솔루션.<br />
-            <a
+            엑셀 자동화부터 복잡한 업무 프로세스까지, 비즈니스 성장을 가속화합니다.
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
           </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <a href="#contact" className="bg-blue-700 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-800 transition shadow-lg">
+              무료 상담 신청
+            </a>
+            <a href="#services" className="border-2 border-blue-700 text-blue-700 px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-50 transition">
+              서비스 둘러보기
+            </a>
           </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+
-          <a
+          <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+            <div>
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              <div className="text-4xl font-bold text-blue-700">100+</div>
-            target="_blank"
+              <div className="text-gray-600 mt-2">프로젝트 경험</div>
-            rel="noopener noreferrer"
+            </div>
-          >
+            <div>
-            <Image
+              <div className="text-4xl font-bold text-blue-700">24h</div>
-              className="dark:invert"
+              <div className="text-gray-600 mt-2">평균 응답 시간</div>
-              src="/vercel.svg"
+            </div>
-              alt="Vercel logomark"
+            <div>
-              width={16}
+              <div className="text-4xl font-bold text-blue-700">98%</div>
-              height={16}
+              <div className="text-gray-600 mt-2">고객 만족도</div>
+            </div>
+            <div>
+              <div className="text-4xl font-bold text-blue-700">5년+</div>
+              <div className="text-gray-600 mt-2">개발 경력</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Services Section */}
+      <section id="services" className="py-20 px-4 bg-white">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">제공 서비스</h2>
+            <p className="text-xl text-gray-600">비즈니스 목표에 맞는 맞춤형 솔루션을 제공합니다</p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {/* RPA 자동화 - Featured */}
+            <div className="relative bg-gradient-to-br from-blue-700 to-blue-900 rounded-2xl p-8 text-white shadow-2xl transform hover:scale-105 transition">
+              <div className="absolute -top-4 -right-4 bg-emerald-500 text-white px-4 py-2 rounded-full text-sm font-bold">
+                추천
+              </div>
+              <div className="text-5xl mb-4">🤖</div>
+              <h3 className="text-2xl font-bold mb-3">RPA 자동화</h3>
+              <p className="text-blue-100 mb-6">
+                반복적인 업무를 자동화하여 시간과 비용을 절감하세요
+              </p>
+              <div className="space-y-3 mb-6">
+                <div className="flex items-center">
+                  <span className="mr-2">✓</span> 엑셀/데이터 자동화
+                </div>
+                <div className="flex items-center">
+                  <span className="mr-2">✓</span> 웹 스크래핑
+                </div>
+                <div className="flex items-center">
+                  <span className="mr-2">✓</span> 업무 프로세스 자동화
+                </div>
+                <div className="flex items-center">
+                  <span className="mr-2">✓</span> 데이터 수집/처리
+                </div>
+              </div>
+              <div className="border-t border-blue-600 pt-4">
+                <div className="text-3xl font-bold mb-2">50만원~</div>
+                <div className="text-blue-200 text-sm">프로젝트 규모에 따라 상이</div>
+              </div>
+            </div>
+
+            {/* 웹 개발 */}
+            <div className="bg-white border-2 border-gray-200 rounded-2xl p-8 hover:border-blue-500 hover:shadow-xl transition">
+              <div className="text-5xl mb-4">💻</div>
+              <h3 className="text-2xl font-bold text-gray-900 mb-3">웹 개발</h3>
+              <p className="text-gray-600 mb-6">
+                현대적이고 반응형인 웹사이트/웹앱을 구축합니다
+              </p>
+              <div className="space-y-3 mb-6 text-gray-700">
+                <div className="flex items-center">
+                  <span className="mr-2">✓</span> 랜딩 페이지
+                </div>
+                <div className="flex items-center">
+                  <span className="mr-2">✓</span> 기업 홈페이지
+                </div>
+                <div className="flex items-center">
+                  <span className="mr-2">✓</span> 관리자 대시보드
+                </div>
+                <div className="flex items-center">
+                  <span className="mr-2">✓</span> E-Commerce
+                </div>
+              </div>
+              <div className="border-t border-gray-200 pt-4">
+                <div className="text-3xl font-bold text-gray-900 mb-2">200만원~</div>
+                <div className="text-gray-500 text-sm">기능에 따라 상이</div>
+              </div>
+            </div>
+
+            {/* 앱 개발 */}
+            <div className="bg-white border-2 border-gray-200 rounded-2xl p-8 hover:border-blue-500 hover:shadow-xl transition">
+              <div className="text-5xl mb-4">📱</div>
+              <h3 className="text-2xl font-bold text-gray-900 mb-3">앱 개발</h3>
+              <p className="text-gray-600 mb-6">
+                iOS/Android 크로스 플랫폼 앱을 개발합니다
+              </p>
+              <div className="space-y-3 mb-6 text-gray-700">
+                <div className="flex items-center">
+                  <span className="mr-2">✓</span> 모바일 앱
+                </div>
+                <div className="flex items-center">
+                  <span className="mr-2">✓</span> 하이브리드 앱
+                </div>
+                <div className="flex items-center">
+                  <span className="mr-2">✓</span> 업무용 앱
+                </div>
+                <div className="flex items-center">
+                  <span className="mr-2">✓</span> 커스텀 기능
+                </div>
+              </div>
+              <div className="border-t border-gray-200 pt-4">
+                <div className="text-3xl font-bold text-gray-900 mb-2">300만원~</div>
+                <div className="text-gray-500 text-sm">복잡도에 따라 상이</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Custom Solution */}
+          <div className="mt-12 bg-gradient-to-r from-gray-50 to-blue-50 rounded-2xl p-8 border border-gray-200">
+            <div className="flex flex-col md:flex-row items-center justify-between">
+              <div className="mb-4 md:mb-0">
+                <h3 className="text-2xl font-bold text-gray-900 mb-2">🔧 맞춤형 솔루션</h3>
+                <p className="text-gray-600">특별한 요구사항이 있으신가요? 무엇이든 상담해주세요.</p>
+              </div>
+              <a href="#contact" className="bg-gray-900 text-white px-8 py-3 rounded-lg font-semibold hover:bg-gray-800 transition whitespace-nowrap">
+                견적 문의
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Portfolio Section */}
+      <section id="portfolio" className="py-20 px-4 bg-gray-50">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">프로젝트 포트폴리오</h2>
+            <p className="text-xl text-gray-600">실제 구현한 프로젝트를 확인해보세요</p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {/* Portfolio Item 1 */}
+            <div className="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition">
+              <div className="bg-gradient-to-br from-blue-500 to-blue-700 h-48 flex items-center justify-center">
+                <div className="text-white text-6xl">📊</div>
+              </div>
+              <div className="p-6">
+                <div className="text-sm text-blue-700 font-semibold mb-2">RPA 자동화</div>
+                <h3 className="text-xl font-bold text-gray-900 mb-2">엑셀 데이터 자동 처리</h3>
+                <p className="text-gray-600 mb-4">
+                  매일 반복되는 엑셀 작업을 자동화하여 5시간 → 10분으로 단축
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">Python</span>
+                  <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">Pandas</span>
+                  <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">Openpyxl</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Portfolio Item 2 */}
+            <div className="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition">
+              <div className="bg-gradient-to-br from-emerald-500 to-emerald-700 h-48 flex items-center justify-center">
+                <div className="text-white text-6xl">🌐</div>
+              </div>
+              <div className="p-6">
+                <div className="text-sm text-emerald-700 font-semibold mb-2">웹 개발</div>
+                <h3 className="text-xl font-bold text-gray-900 mb-2">기업 홈페이지 제작</h3>
+                <p className="text-gray-600 mb-4">
+                  반응형 디자인과 SEO 최적화로 방문자 200% 증가
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  <span className="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm">Next.js</span>
+                  <span className="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm">React</span>
+                  <span className="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm">Tailwind</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Portfolio Item 3 */}
+            <div className="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition">
+              <div className="bg-gradient-to-br from-purple-500 to-purple-700 h-48 flex items-center justify-center">
+                <div className="text-white text-6xl">🤖</div>
+              </div>
+              <div className="p-6">
+                <div className="text-sm text-purple-700 font-semibold mb-2">RPA 자동화</div>
+                <h3 className="text-xl font-bold text-gray-900 mb-2">웹 스크래핑 봇</h3>
+                <p className="text-gray-600 mb-4">
+                  실시간 데이터 수집 및 분석 자동화 시스템 구축
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">Python</span>
+                  <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">Selenium</span>
+                  <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">BeautifulSoup</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="text-center mt-12">
+            <p className="text-gray-600 mb-4">더 많은 프로젝트는 GitHub에서 확인하세요</p>
+            <a href="#contact" className="inline-block border-2 border-blue-700 text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition">
+              전체 포트폴리오 보기
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* About Section */}
+      <section id="about" className="py-20 px-4 bg-slate-900 text-white">
+        <div className="max-w-7xl mx-auto">
+          <div className="grid md:grid-cols-2 gap-12 items-center">
+            <div>
+              <h2 className="text-4xl md:text-5xl font-bold mb-6">신뢰할 수 있는<br />전문 개발자</h2>
+              <p className="text-xl text-gray-300 mb-8 leading-relaxed">
+                대기업에서 쌓은 5년 이상의 실무 경험을 바탕으로,
+                고품질의 비즈니스 솔루션을 제공합니다.
+                단순한 개발이 아닌, 비즈니스 성장을 위한 파트너가 되겠습니다.
+              </p>
+              <div className="space-y-4">
+                <div className="flex items-start">
+                  <div className="text-2xl mr-4">🏢</div>
+                  <div>
+                    <div className="font-bold text-lg">대기업 개발자 출신</div>
+                    <div className="text-gray-400">검증된 개발 역량과 프로젝트 관리 능력</div>
+                  </div>
+                </div>
+                <div className="flex items-start">
+                  <div className="text-2xl mr-4">⚡</div>
+                  <div>
+                    <div className="font-bold text-lg">빠른 커뮤니케이션</div>
+                    <div className="text-gray-400">평균 24시간 이내 응답, 실시간 진행상황 공유</div>
+                  </div>
+                </div>
+                <div className="flex items-start">
+                  <div className="text-2xl mr-4">🎯</div>
+                  <div>
+                    <div className="font-bold text-lg">결과 중심</div>
+                    <div className="text-gray-400">고객의 ROI를 최우선으로 생각하는 솔루션 제공</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="bg-slate-800 rounded-2xl p-8">
+              <h3 className="text-2xl font-bold mb-6">기술 스택</h3>
+              <div className="space-y-6">
+                <div>
+                  <div className="text-sm text-gray-400 mb-2">Backend</div>
+                  <div className="flex flex-wrap gap-2">
+                    <span className="px-4 py-2 bg-blue-900 rounded-lg">Python</span>
+                    <span className="px-4 py-2 bg-blue-900 rounded-lg">Node.js</span>
+                    <span className="px-4 py-2 bg-blue-900 rounded-lg">Java</span>
+                    <span className="px-4 py-2 bg-blue-900 rounded-lg">C/C++/C#</span>
+                  </div>
+                </div>
+                <div>
+                  <div className="text-sm text-gray-400 mb-2">Frontend</div>
+                  <div className="flex flex-wrap gap-2">
+                    <span className="px-4 py-2 bg-blue-900 rounded-lg">React</span>
+                    <span className="px-4 py-2 bg-blue-900 rounded-lg">Next.js</span>
+                    <span className="px-4 py-2 bg-blue-900 rounded-lg">TypeScript</span>
+                  </div>
+                </div>
+                <div>
+                  <div className="text-sm text-gray-400 mb-2">RPA & Automation</div>
+                  <div className="flex flex-wrap gap-2">
+                    <span className="px-4 py-2 bg-emerald-900 rounded-lg">Selenium</span>
+                    <span className="px-4 py-2 bg-emerald-900 rounded-lg">Pandas</span>
+                    <span className="px-4 py-2 bg-emerald-900 rounded-lg">Playwright</span>
+                    <span className="px-4 py-2 bg-emerald-900 rounded-lg">RPA</span>
+                  </div>
+                </div>
+                <div>
+                  <div className="text-sm text-gray-400 mb-2">Database & Cloud</div>
+                  <div className="flex flex-wrap gap-2">
+                    <span className="px-4 py-2 bg-blue-900 rounded-lg">PostgreSQL</span>
+                    <span className="px-4 py-2 bg-blue-900 rounded-lg">MongoDB</span>
+                    <span className="px-4 py-2 bg-blue-900 rounded-lg">AWS</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Contact Section */}
+      <section id="contact" className="py-20 px-4 bg-gradient-to-br from-blue-50 to-emerald-50">
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-12">
+            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">프로젝트 문의</h2>
+            <p className="text-xl text-gray-600">무엇이든 편하게 상담해주세요. 24시간 이내 답변드립니다.</p>
+          </div>
+
+          <div className="bg-white rounded-2xl shadow-xl p-8 md:p-12">
+            <form className="space-y-6">
+              <div className="grid md:grid-cols-2 gap-6">
+                <div>
+                  <label className="block text-sm font-semibold text-gray-700 mb-2">이름</label>
+                  <input
+                    type="text"
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+                    placeholder="홍길동"
                   />
-            Deploy Now
+                </div>
-          </a>
+                <div>
-          <a
+                  <label className="block text-sm font-semibold text-gray-700 mb-2">연락처</label>
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
+                  <input
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+                    type="tel"
-            target="_blank"
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
-            rel="noopener noreferrer"
+                    placeholder="010-0000-0000"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold text-gray-700 mb-2">이메일</label>
+                <input
+                  type="email"
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+                  placeholder="example@email.com"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold text-gray-700 mb-2">서비스 선택</label>
+                <select className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none">
+                  <option>RPA 자동화</option>
+                  <option>웹 개발</option>
+                  <option>앱 개발</option>
+                  <option>맞춤형 솔루션</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold text-gray-700 mb-2">프로젝트 설명</label>
+                <textarea
+                  rows={6}
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none"
+                  placeholder="프로젝트에 대해 자세히 설명해주세요. 목적, 예상 기간, 예산 등을 포함하면 더 정확한 상담이 가능합니다."
+                ></textarea>
+              </div>
+
+              <button
+                type="submit"
+                className="w-full bg-blue-700 text-white py-4 rounded-lg text-lg font-bold hover:bg-blue-800 transition shadow-lg"
               >
-            Documentation
+                무료 상담 신청하기
+              </button>
+            </form>
+
+            <div className="mt-8 pt-8 border-t border-gray-200">
+              <div className="text-center text-gray-600">
+                <p className="mb-4">또는 아래 연락처로 직접 문의주세요</p>
+                <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                  <a href="mailto:bgg8988@gmail.com" className="flex items-center justify-center text-blue-700 hover:text-blue-800">
+                    <span className="mr-2">📧</span> bgg8988@gmail.com
+                  </a>
+                  <a href="tel:010-3907-1392" className="flex items-center justify-center text-blue-700 hover:text-blue-800">
+                    <span className="mr-2">📱</span> 010-3907-1392
                   </a>
                 </div>
-      </main>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-slate-900 text-white py-12 px-4">
+        <div className="max-w-7xl mx-auto">
+          <div className="grid md:grid-cols-4 gap-8 mb-8">
+            <div>
+              <div className="text-2xl font-bold mb-4">쟁승메이드</div>
+              <p className="text-gray-400">비즈니스 성장을 위한<br />전문 개발 솔루션</p>
+            </div>
+            <div>
+              <h4 className="font-bold mb-4">서비스</h4>
+              <ul className="space-y-2 text-gray-400">
+                <li><a href="#services" className="hover:text-white transition">RPA 자동화</a></li>
+                <li><a href="#services" className="hover:text-white transition">웹 개발</a></li>
+                <li><a href="#services" className="hover:text-white transition">앱 개발</a></li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="font-bold mb-4">포트폴리오</h4>
+              <ul className="space-y-2 text-gray-400">
+                <li><a href="#portfolio" className="hover:text-white transition">프로젝트</a></li>
+                <li><a href="#about" className="hover:text-white transition">기술 스택</a></li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="font-bold mb-4">문의</h4>
+              <ul className="space-y-2 text-gray-400">
+                <li>bgg8988@gmail.com</li>
+                <li>010-3907-1392</li>
+              </ul>
+            </div>
+          </div>
+          <div className="border-t border-gray-800 pt-8 text-center text-gray-400">
+            <p>&copy; 2025 쟁승메이드. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
     </div>
   );
 }