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

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">
-      <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">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
+    <div className="min-h-screen">
+      {/* Navigation */}
+      <nav className="fixed top-0 w-full bg-white/90 backdrop-blur-sm z-50 border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <div className="text-2xl font-bold text-blue-900">쟁승메이드</div>
+            <div className="hidden md:flex space-x-8">
+              <a href="#services" className="text-gray-700 hover:text-blue-700 transition">서비스</a>
+              <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>
+              <a href="#contact" className="bg-blue-700 text-white px-6 py-2 rounded-lg hover:bg-blue-800 transition">문의하기</a>
+            </div>
+          </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">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <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 className="text-xl text-gray-600 mb-10 max-w-3xl mx-auto leading-relaxed">
+            대기업 출신 개발자가 제공하는 RPA 자동화, 웹/앱 개발 솔루션.<br />
+            엑셀 자동화부터 복잡한 업무 프로세스까지, 비즈니스 성장을 가속화합니다.
           </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="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
+            <div>
+              <div className="text-4xl font-bold text-blue-700">100+</div>
+              <div className="text-gray-600 mt-2">프로젝트 경험</div>
+            </div>
+            <div>
+              <div className="text-4xl font-bold text-blue-700">24h</div>
+              <div className="text-gray-600 mt-2">평균 응답 시간</div>
+            </div>
+            <div>
+              <div className="text-4xl font-bold text-blue-700">98%</div>
+              <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>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            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]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            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]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+      </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>
-      </main>
+      </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="홍길동"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-semibold text-gray-700 mb-2">연락처</label>
+                  <input
+                    type="tel"
+                    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="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"
+              >
+                무료 상담 신청하기
+              </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>
+              </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>
   );
 }