Files
taxbaik/TaxBaik.Web/Pages/Index.cshtml
T
kjh2064 127490906b
TaxBaik CI/CD / build-and-deploy (push) Successful in 1m45s
feat: enrich homepage with online trust bar, about narrative, and customer segments
Adds an online-consulting trust strip below the hero, replaces the plain
credential row with a personal bio + expertise section, expands the
service cards from 3 broad categories to 5 specific offerings plus a
consult CTA card, and adds a customer-segment section so visitors can
self-identify their situation. Layout follows existing Bootstrap
responsive grid conventions used elsewhere on the page.
2026-07-01 15:38:57 +09:00

521 lines
28 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
@page
@model TaxBaik.Web.Pages.IndexModel
@{
var season = Model.CurrentSeason;
ViewData["Title"] = season != null
? $"백원숙 세무회계 | {season.Name} — 지금 상담하세요"
: "백원숙 세무회계 | 사업자·부동산·증여 세무 상담";
ViewData["Description"] = "사업자 기장, 부동산 양도세·증여세, 종합소득세 전문 상담. 온라인 맞춤 상담 제공.";
}
@* ─── 공지사항 배너 (관리자 등록 공지) ─── *@
@if (Model.ActiveAnnouncements.Count > 0)
{
foreach (var notice in Model.ActiveAnnouncements)
{
<div class="announcement-bar announcement-bar--@notice.DisplayType">
<div class="container d-flex align-items-center gap-2 py-2">
<span class="announcement-icon">
@if (notice.DisplayType == "urgent") { <text>🚨</text> }
else if (notice.DisplayType == "banner") { <text>📢</text> }
else { <text>️</text> }
</span>
<span class="announcement-text fw-semibold">@notice.Title</span>
@if (!string.IsNullOrEmpty(notice.Content))
{
<span class="d-none d-md-inline text-muted small ms-2">— @notice.Content</span>
}
</div>
</div>
}
}
@* ─── Hero Section ─── *@
@if (season != null)
{
<section class="hero-section hero-section--seasonal text-white pt-5 pb-4">
<div class="container">
<div class="row align-items-center py-4">
<div class="col-lg-7">
<span class="badge bg-danger-badge mb-3 fs-6 px-3 py-2">
@season.UrgencyBadge
</span>
<h1 class="mb-3" style="white-space: pre-line;">@season.HeroHeadline</h1>
<p class="fs-5 mb-4" style="line-height: 1.8; opacity: 0.95;">
@season.HeroSubtext
</p>
<div class="d-flex gap-3 flex-wrap">
<a href="/taxbaik/contact" class="btn btn-warning btn-lg fw-bold">
⏰ @season.CtaText
</a>
<a href="javascript:void(0);" class="btn btn-outline-primary btn-lg"
onclick="openKakao()" style="border-color: white; color: white;">
💬 카카오 채널 문의
</a>
</div>
@if (season.DaysUntilDeadline <= 7)
{
<p class="mt-3 small" style="opacity: 0.8;">
마감까지 <strong>@(season.DaysUntilDeadline)일</strong> 남았습니다.
지금 바로 상담 신청하세요.
</p>
}
</div>
<div class="col-lg-5 d-none d-lg-block text-center">
<div class="seasonal-deadline-badge">
<div class="deadline-label">마감</div>
<div class="deadline-date">@season.Deadline.ToString("M월 d일")</div>
<div class="deadline-days">D-@season.DaysUntilDeadline</div>
</div>
</div>
</div>
</div>
</section>
}
else
{
<section class="hero-section text-white pt-5 pb-4">
<div class="container">
<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-lg-5 d-none d-lg-block text-center">
<div style="font-size: 120px; opacity: 0.15;">📋</div>
</div>
</div>
</div>
</section>
}
<!-- 온라인 신뢰 바 -->
<section class="online-trust-bar">
<div class="container">
<div class="row g-3 g-md-4 justify-content-center text-center">
<div class="col-6 col-md-3">
<span class="online-trust-icon">💻</span>
<span class="online-trust-text">전국 비대면 온라인 상담</span>
</div>
<div class="col-6 col-md-3">
<span class="online-trust-icon">💬</span>
<span class="online-trust-text">카카오 당일 응답</span>
</div>
<div class="col-6 col-md-3">
<span class="online-trust-icon">📂</span>
<span class="online-trust-text">자료 공유 후 온라인 검토</span>
</div>
<div class="col-6 col-md-3">
<span class="online-trust-icon">✅</span>
<span class="online-trust-text">방문 없이 신고·기장 가능</span>
</div>
</div>
</div>
</section>
<!-- About — 세무사 소개 및 자격 시너지 -->
<section class="py-5">
<div class="container">
<div class="row g-4 g-lg-5 align-items-stretch">
<div class="col-lg-5">
<div class="about-bio-card h-100">
<div class="about-eyebrow">About</div>
<h2 class="about-bio-title">안녕하세요,<br/>백원숙 세무사입니다.</h2>
<p class="about-bio-text">세무사 자격과 함께 부동산중개사, 보험설계사 자격을 보유하고 있습니다. 사업자 세무, 종합소득세, 부가가치세, 양도세, 증여·상속 상담을 중심으로 온라인 상담을 진행합니다.</p>
<p class="about-bio-text">작게 시작하는 대표님의 막막함을 잘 알고 있습니다. 처음 상담부터 끝까지 같은 눈높이에서 함께합니다.</p>
<div class="about-bio-stats">
<div>
<div class="about-stat-label">세무사 자격 취득</div>
<div class="about-stat-value">2015년</div>
</div>
<div>
<div class="about-stat-label">상담 방식</div>
<div class="about-stat-value">전국 비대면</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7">
<div class="about-eyebrow">Expertise</div>
<h2 class="about-expertise-title">세 가지 자격의 시너지</h2>
<div class="d-flex flex-column gap-3 mt-4">
<div class="expertise-item d-flex gap-3">
<div class="expertise-icon">⚖️</div>
<div>
<div class="expertise-title">공인 세무사</div>
<p class="expertise-desc mb-0">세무신고·장부관리·조세 자문 등 세무 업무 전반을 공식 대리합니다.</p>
</div>
</div>
<div class="expertise-item d-flex gap-3">
<div class="expertise-icon">🏠</div>
<div>
<div class="expertise-title">공인 부동산중개사</div>
<p class="expertise-desc mb-0">부동산 거래 구조를 이해해 양도·증여·임대 세무상담에 현실감을 더합니다.</p>
</div>
</div>
<div class="expertise-item d-flex gap-3">
<div class="expertise-icon">🛡️</div>
<div>
<div class="expertise-title">보험설계사 자격</div>
<p class="expertise-desc mb-0">상속·증여·대표자 리스크 관점에서 가족 현금흐름과 보험 구조를 함께 설명합니다.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 서비스 영역 -->
<section class="py-5">
<div class="container">
<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>
@{
var focusService = season?.FocusService ?? "";
// 시즌에 따라 서비스 카드 그룹 순서 결정: 시즌 관련 그룹이 맨 앞
var groupOrder = focusService switch
{
"real-estate-tax" => new[] { "real-estate-tax", "business-tax", "family-asset" },
"family-asset" => new[] { "family-asset", "business-tax", "real-estate-tax" },
_ => new[] { "business-tax", "real-estate-tax", "family-asset" }
};
var serviceCardsByGroup = new Dictionary<string, (string Icon, string Tag, string Title, string Desc, string Target)[]>
{
["business-tax"] = new[]
{
("📊", "기장 서비스", "월 기장 관리", "장부 작성, 부가세, 원천세, 인건비, 예상세액까지 — 매월 세금 리스크를 함께 점검합니다.", "매출 발생 사업자"),
("📋", "소득세", "종합소득세 신고", "사업자, 프리랜서, 보험설계사, 부동산중개사의 소득 유형에 맞는 경비처리와 신고를 안내합니다.", "개인사업자·프리랜서·영업직"),
("🌱", "첫 세무", "신규 사업자 세무정리", "사업자 유형 확인, 부가세·종소세·증빙관리·세금계좌 분리까지. 처음 사업을 시작하는 대표님을 위한 패키지.", "신규 사업자·프리랜서"),
},
["real-estate-tax"] = new[]
{
("🏡", "부동산 세무", "양도세 사전진단", "계약 전 보유기간·비과세 여부·필요경비·장기보유특별공제를 검토합니다. 계약 전 상담이 선택지를 넓힙니다.", "부동산 매도 예정자"),
},
["family-asset"] = new[]
{
("👨‍👩‍👧", "자산이전", "증여·상속 상담", "증여 시기, 증여재산 평가, 세부담, 자금출처, 보험 활용 가능성까지 — 가족 자산이전을 사전에 설계합니다.", "자산이전 예정 가족"),
},
};
}
<div class="row g-4">
@foreach (var groupKey in groupOrder)
{
var isFeaturedGroup = groupKey == focusService;
var cards = serviceCardsByGroup[groupKey];
for (var i = 0; i < cards.Length; i++)
{
var c = cards[i];
<div class="col-lg-4 col-md-6">
<div class="card service-card h-100 @(isFeaturedGroup ? "service-card--featured" : "")">
@if (isFeaturedGroup && i == 0) { <div class="service-card-badge">현재 시즌</div> }
<div class="service-icon">@c.Icon</div>
<div class="card-body pt-0">
<div class="service-card-tag">@c.Tag</div>
<h3 class="card-title">@c.Title</h3>
<p class="text-muted small">@c.Desc</p>
<div class="service-card-target">대상: @c.Target</div>
<a href="/taxbaik/services#@groupKey" class="btn btn-sm btn-outline-primary mt-3">자세히 보기</a>
</div>
</div>
</div>
}
}
<div class="col-lg-4 col-md-6">
<div class="card service-card service-card--cta h-100">
<div class="card-body pt-0 d-flex flex-column justify-content-between h-100">
<div>
<div class="service-card-tag" style="color: var(--color-primary);">상담 안내</div>
<h3 class="card-title" style="color: white;">어떤 세금이<br/>걱정이신가요?</h3>
<p class="small" style="color: rgba(255,255,255,0.65);">
세금은 계약·매출·명의·자금 이동 전에 검토할수록 선택지가 많습니다.
</p>
</div>
<a href="javascript:void(0);" onclick="openKakao()" class="btn btn-warning mt-3">카카오로 문의하기 →</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 고객유형 -->
<section class="py-5 customer-type-section">
<div class="container">
<div class="text-center mb-5">
<h2 class="section-title" style="color: white;">전국 어디서나, 온라인으로 시작하세요</h2>
<p class="fs-6" style="color: rgba(255,255,255,0.6); max-width: 560px; margin: 0 auto;">
방문 없이 카카오·이메일로 상담부터 신고까지 — 온라인 사업자에게 최적화된 세무관리.
</p>
</div>
<div class="row g-3 g-md-4">
<div class="col-md-6">
<div class="customer-type-card customer-type-card--primary h-100">
<div class="mb-3" style="font-size: 1.8rem;">💻</div>
<div class="customer-type-tag">온라인 사업자</div>
<h3 class="customer-type-title">스마트스토어 · 크리에이터 · 프리랜서</h3>
<p class="customer-type-desc">스마트스토어·쿠팡마켓·유튜버·인스타셀러·크몽 프리랜서 — 플랫폼 정산 구조와 부가세·종소세 경비처리를 체계적으로 관리합니다. 전국 어디서나 비대면 상담 가능합니다.</p>
<div class="d-flex flex-wrap gap-2 mt-3">
<span class="customer-type-pill">스마트스토어</span>
<span class="customer-type-pill">크리에이터</span>
<span class="customer-type-pill">비대면 상담</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="customer-type-card h-100">
<div class="mb-3" style="font-size: 1.8rem;">💼</div>
<div class="customer-type-tag">영업직·독립사업자</div>
<h3 class="customer-type-title">보험설계사 · 부동산중개사 · 영업직</h3>
<p class="customer-type-desc">소득 변동이 크고 경비처리 기준이 애매한 분들. 업계 구조를 직접 경험한 세무사로서 종소세·경비처리·세금 예측을 온라인으로 관리합니다.</p>
<div class="d-flex flex-wrap gap-2 mt-3">
<span class="customer-type-pill">종합소득세</span>
<span class="customer-type-pill">경비처리</span>
<span class="customer-type-pill">세금 예측</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="customer-type-card h-100">
<div class="mb-3" style="font-size: 1.8rem;">🏘️</div>
<div class="customer-type-tag">부동산 자산이전</div>
<h3 class="customer-type-title">부동산 매도 · 증여 · 상속 예정자</h3>
<p class="customer-type-desc">계약 전 양도세 사전검토, 증여·상속 사전설계, 임대사업자 세무관리. 자료 공유 후 온라인 검토로 계약 전 선택지를 최대화합니다.</p>
<div class="d-flex flex-wrap gap-2 mt-3">
<span class="customer-type-pill">양도세 검토</span>
<span class="customer-type-pill">증여·상속</span>
<span class="customer-type-pill">임대사업자</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="customer-type-card h-100">
<div class="mb-3" style="font-size: 1.8rem;">🔑</div>
<div class="customer-type-tag">임대·자산관리</div>
<h3 class="customer-type-title">임대사업자 · 상가 보유자</h3>
<p class="customer-type-desc">주택·상가·오피스텔 임대 소득의 종합소득세, 부가가치세, 양도 시점 세무까지 — 보유부터 매도까지 단계별로 관리합니다.</p>
<div class="d-flex flex-wrap gap-2 mt-3">
<span class="customer-type-pill">임대소득세</span>
<span class="customer-type-pill">상가·오피스텔</span>
<span class="customer-type-pill">매도 세무</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 상담 프로세스 -->
<section class="py-5" style="background: #F9F7F3;">
<div class="container">
<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">
@if (season != null)
{
<div class="seasonal-blog-header mb-2">
<span class="seasonal-blog-tag">📅 @season.Name 시즌</span>
</div>
<h2 class="section-title">이번 시즌 세무 정보</h2>
<p class="text-muted">@season.Name 관련 절세 팁과 신고 가이드를 확인하세요</p>
}
else
{
<h2 class="section-title">세무 정보</h2>
<p class="text-muted">최신 세법 변화와 실무 팁을 공유합니다</p>
}
</div>
@{
var hasSeasonalPosts = Model.SeasonalPosts?.Count > 0;
var hasRecentPosts = Model.RecentPosts?.Count > 0;
}
@if (hasSeasonalPosts || hasRecentPosts)
{
<div class="row g-4">
@* 시즌 관련 글 (배지 강조) *@
@if (hasSeasonalPosts)
{
@foreach (var post in Model.SeasonalPosts!)
{
<div class="col-lg-4 col-md-6">
<div class="card blog-card h-100 blog-card--seasonal">
<div class="blog-seasonal-ribbon">이번 시즌 추천</div>
<div class="blog-placeholder">🗓️</div>
<div class="card-body">
<small class="badge bg-season-badge">@post.CategoryName</small>
<h4 class="card-title mt-3">@post.Title</h4>
<p class="text-muted small">@((post.PublishedAt ?? post.CreatedAt).ToString("yyyy년 MM월 dd일"))</p>
<a href="/taxbaik/blog/@post.Slug" class="btn btn-sm btn-seasonal">자세히 보기</a>
</div>
</div>
</div>
}
}
@* 최신 글 (나머지 채우기) *@
@if (hasRecentPosts)
{
@foreach (var post in Model.RecentPosts!)
{
<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.PublishedAt ?? 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 class="text-center mt-5 d-flex justify-content-center gap-3 flex-wrap">
@if (season != null && !string.IsNullOrEmpty(season.RelatedCategorySlug))
{
<a href="/taxbaik/blog?category=@season.RelatedCategorySlug" class="btn btn-outline-seasonal btn-lg">
📅 @season.Name 전체 글 보기
</a>
}
<a href="/taxbaik/blog" class="btn btn-outline-primary btn-lg">전체 블로그 보기</a>
</div>
}
</div>
</section>
<!-- 자주 묻는 질문 (DB 연동) -->
@if (Model.ActiveFaqs.Count > 0)
{
<section class="py-5" style="background: #F9F7F3;">
<div class="container">
<div class="text-center mb-5">
<h2 class="section-title">자주 묻는 질문</h2>
<p class="text-muted">상담 전 궁금하신 사항을 먼저 확인해 보세요</p>
</div>
<div class="accordion faq-accordion" id="faqAccordion">
@for (int i = 0; i < Model.ActiveFaqs.Count; i++)
{
var faqItem = Model.ActiveFaqs[i];
var collapseId = $"faq-{faqItem.Id}";
<div class="accordion-item faq-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed faq-question" type="button"
data-bs-toggle="collapse" data-bs-target="#@collapseId">
@faqItem.Question
</button>
</h3>
<div id="@collapseId" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body faq-answer">
@faqItem.Answer
</div>
</div>
</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>
}
<!-- 최종 CTA -->
<section class="py-5" style="background: linear-gradient(135deg, #2E5C4E 0%, #1F3A30 100%); color: white;">
<div class="container text-center">
@if (season != null)
{
<h2 class="mb-3 fw-bold" style="font-size: 2.5rem;">@season.Name 마감이 다가옵니다!</h2>
<p class="fs-5 mb-5" style="opacity: 0.95; max-width: 500px; margin-left: auto; margin-right: auto;">
마감 <strong>D-@(season.DaysUntilDeadline)일</strong> — 지금 바로 상담을 신청하세요.<br/>
빠른 검토로 불이익 없이 신고를 완료합니다.
</p>
<div class="d-flex gap-3 justify-content-center flex-wrap">
<a href="/taxbaik/contact" class="btn btn-warning btn-lg">⏰ @season.CtaText</a>
<a href="javascript:void(0);" onclick="openKakao()" class="btn btn-light btn-lg">카카오로 문의</a>
</div>
}
else
{
<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>