kjh2064/taxbaik
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 홈페이지 레이아웃 완전 개선 - 텍스트 나열식 → 전문적 디자인
TaxBaik CI/CD / build-and-deploy (push) Successful in 50s
Details

Browse Source 
주요 변경사항:
- Hero 섹션: 강력한 임팩트, 자격 배지, 큰 CTA
- 신뢰도 섹션: 자격 3개 항목 수직 확장
- 서비스 섹션: 아이콘 + 상세 설명 + 리스트형 혜택 → 전문성 강조
- 상담 프로세스: 새로운 4단계 시각화 섹션 추가
- 블로그 섹션: 플레이스홀더 이미지, 더 큰 카드
- 최종 CTA: 강렬한 다크 그린 배경, 대비 강한 버튼

디자인 개선:
- 화이트스페이스 확대
- 시각적 계층 구조 강화
- 기능별 섹션 분리
- 반응형 레이아웃 개선

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
김재현
2026-06-26 19:13:59 +09:00
parent df5cc5412a
commit b2c8b35cdd
2 changed files with 243 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TaxBaik.Web/Pages/Index.cshtml
+191 -72
View File
@@ -5,70 +5,130 @@
ViewData["Description"] = "사업자 기장, 부동산 양도세·증여세, 종합소득세 전문 상담. 온라인 맞춤 상담 제공.";
}
<!-- Hero Section -->
<section class="hero-section bg-primary text-white py-5">
<div class="container text-center">
<h1 class="display-4 fw-bold mb-3">세금 걱정, 한 번에 해결합니다</h1>
<p class="lead mb-4">사업자 세무, 부동산 세금, 가족자산 맞춤 상담</p>
<div class="gap-3 d-flex justify-content-center flex-wrap">
<a href="/taxbaik/contact" class="btn btn-warning btn-lg">무료 상담 신청</a>
<a href="javascript:void(0);" class="btn btn-light btn-lg" onclick="openKakao()">카카오 채널 문의</a>
</div>
</div>
</section>
<!-- Trust Strip -->
<section class="bg-light py-4">
<!-- Hero Section — 강임팩트 -->
<section class="hero-section text-white pt-5 pb-4">
<div class="container">
<div class="row text-center">
<div class="col-md-4 mb-3">
<div class="fs-2">🎓</div>
<p class="fw-bold">세무사</p>
<small class="text-muted">2015년 자격취득</small>
<div class="row align-items-center py-4">
<div class="col-lg-7">
<span class="badge bg-primary-badge mb-3">경험 있는 세무사의 맞춤 전략</span>
<h1 class="mb-3">
세금과 자산<br/>
<span style="color: #E8E4D8;">한 번에 해결하는</span>
</h1>
<p class="fs-5 mb-4" style="line-height: 1.8; opacity: 0.95;">
사업자 세무, 부동산 거래, 가족자산 관리를 위한<br/>
통합 솔루션을 제공합니다.
</p>
<div class="d-flex gap-3 flex-wrap">
<a href="/taxbaik/contact" class="btn btn-primary btn-lg">무료 상담 신청</a>
<a href="javascript:void(0);" class="btn btn-outline-primary btn-lg" onclick="openKakao()" style="border-color: white; color: white;">
💬 카카오 채널 문의
</a>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="fs-2">🏠</div>
<p class="fw-bold">부동산중개사</p>
<small class="text-muted">부동산 거래 전문</small>
</div>
<div class="col-md-4 mb-3">
<div class="fs-2">📊</div>
<p class="fw-bold">보험설계사</p>
<small class="text-muted">자산관리 전문</small>
<div class="col-lg-5 d-none d-lg-block text-center">
<div style="font-size: 120px; opacity: 0.15;">📋</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<!-- 신뢰도 스트립 — 자격과 경험 -->
<section class="trust-strip">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="trust-item">
<div class="trust-icon">🎓</div>
<h3>세무사</h3>
<p>국가공인 세무사 자격<br/>2015년 취득 · 10년 경력</p>
</div>
</div>
<div class="col-md-4">
<div class="trust-item">
<div class="trust-icon">🏢</div>
<h3>부동산중개사</h3>
<p>부동산 거래 전문 자격<br/>양도세·취득세 컨설팅</p>
</div>
</div>
<div class="col-md-4">
<div class="trust-item">
<div class="trust-icon">📊</div>
<h3>보험설계사</h3>
<p>자산관리 전문 자격<br/>가족 자산 플래닝</p>
</div>
</div>
</div>
</div>
</section>
<!-- 서비스 영역 — 전문성 강조 -->
<section class="py-5">
<div class="container">
<h2 class="text-center fw-bold mb-5">주요 서비스</h2>
<div class="text-center mb-5">
<h2 class="section-title">전문 서비스</h2>
<p class="fs-6 text-muted" style="max-width: 600px; margin: 0 auto;">
각 분야의 복잡한 세무 이슈를 경험과 노하우로 해결합니다
</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">사업자 세무</h5>
<p class="card-text">기장, 세금계산서, 경비처리</p>
<a href="/taxbaik/services" class="btn btn-sm btn-outline-primary">자세히보기</a>
<!-- 사업자 세무 -->
<div class="col-lg-4 col-md-6">
<div class="card service-card h-100">
<div class="service-icon">🏪</div>
<div class="card-body pt-0">
<h3 class="card-title">사업자 세무</h3>
<ul class="list-unstyled small mb-3">
<li class="mb-2">✓ 정확한 기장 및 결산</li>
<li class="mb-2">✓ 세금계산서 관리</li>
<li class="mb-2">✓ 경비처리 최적화</li>
<li class="mb-2">✓ 절세 전략 수립</li>
</ul>
<p class="text-muted small">
초기부터 세무 전략을 수립하면 연간 최대 수백만 원의 절세가 가능합니다.
</p>
<a href="/taxbaik/services#business-tax" class="btn btn-sm btn-outline-primary mt-3">자세히 보기</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">부동산 세금</h5>
<p class="card-text">양도세, 취득세, 임대소득</p>
<a href="/taxbaik/services" class="btn btn-sm btn-outline-primary">자세히보기</a>
<!-- 부동산 세금 -->
<div class="col-lg-4 col-md-6">
<div class="card service-card h-100">
<div class="service-icon">🏠</div>
<div class="card-body pt-0">
<h3 class="card-title">부동산 세금</h3>
<ul class="list-unstyled small mb-3">
<li class="mb-2">✓ 양도세 최소화</li>
<li class="mb-2">✓ 취득세 절감</li>
<li class="mb-2">✓ 임대소득 관리</li>
<li class="mb-2">✓ 다주택자 세무</li>
</ul>
<p class="text-muted small">
부동산 거래 시 미리 상담하면 세금 부담을 크게 줄일 수 있습니다.
</p>
<a href="/taxbaik/services#real-estate-tax" class="btn btn-sm btn-outline-primary mt-3">자세히 보기</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">가족자산</h5>
<p class="card-text">증여세, 상속세, 자산관리</p>
<a href="/taxbaik/services" class="btn btn-sm btn-outline-primary">자세히보기</a>
<!-- 가족자산 & 증여 -->
<div class="col-lg-4 col-md-6">
<div class="card service-card h-100">
<div class="service-icon">👨‍👩‍👧‍👦</div>
<div class="card-body pt-0">
<h3 class="card-title">가족자산 관리</h3>
<ul class="list-unstyled small mb-3">
<li class="mb-2">✓ 증여세 전략</li>
<li class="mb-2">✓ 상속세 대비</li>
<li class="mb-2">✓ 자산 이전 계획</li>
<li class="mb-2">✓ 가족법인 설립</li>
</ul>
<p class="text-muted small">
세대 이전 전에 사전 계획하면 세금 부담을 현저히 줄일 수 있습니다.
</p>
<a href="/taxbaik/services#family-asset" class="btn btn-sm btn-outline-primary mt-3">자세히 보기</a>
</div>
</div>
</div>
@@ -76,36 +136,95 @@
</div>
</section>
<!-- Blog Preview -->
<section class="bg-light py-5">
<!-- 상담 프로세스 -->
<section class="py-5" style="background: #F9F7F3;">
<div class="container">
<h2 class="text-center fw-bold mb-5">최근 블로그</h2>
<div class="row g-4">
@foreach (var post in Model.RecentPosts)
{
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<small class="badge bg-primary">@post.CategoryName</small>
<h5 class="card-title mt-2">@post.Title</h5>
<p class="card-text small text-muted">@post.CreatedAt.ToString("yyyy-MM-dd")</p>
<a href="/taxbaik/blog/@post.Slug" class="btn btn-sm btn-primary">읽기</a>
<div class="text-center mb-5">
<h2 class="section-title">상담 과정</h2>
</div>
<div class="row align-items-center">
<div class="col-md-3 text-center mb-4 mb-md-0">
<div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #C89D6E 0%, #A67C52 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">
📞
</div>
<h4>1단계: 무료 상담</h4>
<p class="text-muted small">상황 파악 및<br/>현재 문제점 확인</p>
</div>
<div class="col-md-3 text-center mb-4 mb-md-0">
<div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #C89D6E 0%, #A67C52 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">
📋
</div>
<h4>2단계: 세무진단</h4>
<p class="text-muted small">자료 분석 및<br/>최적 방안 도출</p>
</div>
<div class="col-md-3 text-center mb-4 mb-md-0">
<div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #C89D6E 0%, #A67C52 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">
💡
</div>
<h4>3단계: 맞춤제안</h4>
<p class="text-muted small">절세 전략 및<br/>실행 계획 제시</p>
</div>
<div class="col-md-3 text-center">
<div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #C89D6E 0%, #A67C52 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">
✅
</div>
<h4>4단계: 실행지원</h4>
<p class="text-muted small">지속적 관리 및<br/>추가 상담 제공</p>
</div>
</div>
<div class="text-center mt-5">
<p class="text-muted mb-3">상담은 온라인 또는 오프라인으로 진행되며, 완전히 비밀이 보장됩니다.</p>
<a href="/taxbaik/contact" class="btn btn-primary btn-lg">상담 신청하기</a>
</div>
</div>
</section>
<!-- 최근 블로그 -->
<section class="py-5">
<div class="container">
<div class="text-center mb-5">
<h2 class="section-title">세무 정보</h2>
<p class="text-muted">최신 세법 변화와 실무 팁을 공유합니다</p>
</div>
@if (Model.RecentPosts?.Count > 0)
{
<div class="row g-4">
@foreach (var post in Model.RecentPosts.Take(3))
{
<div class="col-lg-4 col-md-6">
<div class="card blog-card h-100">
<div class="blog-placeholder">📝</div>
<div class="card-body">
<small class="badge bg-primary-badge">@post.CategoryName</small>
<h4 class="card-title mt-3">@post.Title</h4>
<p class="text-muted small">@post.CreatedAt.ToString("yyyy년 MM월 dd일")</p>
<a href="/taxbaik/blog/@post.Slug" class="btn btn-sm btn-primary">읽기</a>
</div>
</div>
</div>
</div>
}
</div>
<div class="text-center mt-4">
<a href="/taxbaik/blog" class="btn btn-outline-primary">모든 글 보기</a>
</div>
}
</div>
<div class="text-center mt-5">
<a href="/taxbaik/blog" class="btn btn-outline-primary btn-lg">전체 블로그 보기</a>
</div>
}
</div>
</section>
<!-- CTA Section -->
<section class="bg-primary text-white py-5">
<!-- 최종 CTA — 강렬한 다크 배경 -->
<section class="py-5" style="background: linear-gradient(135deg, #2E5C4E 0%, #1F3A30 100%); color: white;">
<div class="container text-center">
<h2 class="fw-bold mb-3">지금 바로 상담 받으세요</h2>
<p class="lead mb-4">무료로 상황을 진단받고 맞춤 솔루션을 제안받을 수 있습니다</p>
<a href="/taxbaik/contact" class="btn btn-warning btn-lg">상담 신청하기</a>
<h2 class="mb-3 fw-bold" style="font-size: 2.5rem;">세금 고민은 이제 끝!</h2>
<p class="fs-5 mb-5" style="opacity: 0.95; max-width: 500px; margin-left: auto; margin-right: auto;">
무료 상담으로 현재 상황을 진단하고<br/>
맞춤형 절세 전략을 받아보세요.
</p>
<div class="d-flex gap-3 justify-content-center flex-wrap">
<a href="/taxbaik/contact" class="btn btn-warning btn-lg">상담 신청하기</a>
<a href="javascript:void(0);" onclick="openKakao()" class="btn btn-light btn-lg">카카오로 문의</a>
</div>
</div>
</section>
TaxBaik.Web/wwwroot/css/site.css
+52
View File
@@ -466,3 +466,55 @@ img {
.container {
max-width: 1200px;
}
/* ===== 서비스 카드 ===== */
.service-card {
text-align: center;
position: relative;
border: none !important;
background: white;
padding-top: 0;
}
.service-icon {
font-size: 3.5rem;
display: block;
margin-bottom: 0.5rem;
margin-top: -1.5rem;
}
.service-card .card-title {
font-size: 1.4rem;
margin-bottom: 1rem;
color: var(--color-text);
}
.service-card ul li {
color: var(--color-text-light);
}
/* ===== 블로그 카드 ===== */
.blog-card {
border: none !important;
overflow: hidden;
transition: all var(--transition-normal);
}
.blog-placeholder {
height: 180px;
background: linear-gradient(135deg, rgba(200, 157, 110, 0.1) 0%, rgba(46, 92, 78, 0.1) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: rgba(200, 157, 110, 0.3);
}
.blog-card:hover .blog-placeholder {
background: linear-gradient(135deg, rgba(200, 157, 110, 0.2) 0%, rgba(46, 92, 78, 0.2) 100%);
}
.bg-primary-badge {
background-color: rgba(200, 157, 110, 0.15) !important;
color: var(--color-primary) !important;
}