From 127490906b7b9d2a587c6f8d842c3b08f8f51c01 Mon Sep 17 00:00:00 2001 From: kjh2064 Date: Wed, 1 Jul 2026 15:38:57 +0900 Subject: [PATCH] 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. --- TaxBaik.Web/Pages/Index.cshtml | 264 +++++++++++++++++++++---------- TaxBaik.Web/wwwroot/css/site.css | 263 ++++++++++++++++++++++-------- 2 files changed, 375 insertions(+), 152 deletions(-) diff --git a/TaxBaik.Web/Pages/Index.cshtml b/TaxBaik.Web/Pages/Index.cshtml index c17a235..191d165 100644 --- a/TaxBaik.Web/Pages/Index.cshtml +++ b/TaxBaik.Web/Pages/Index.cshtml @@ -103,29 +103,77 @@ else } - -
+ +
-
-
-
-
🎓
-

세무사

-

국가공인 세무사 자격
2015년 취득 · 10년 경력

+
+
+ 💻 + 전국 비대면 온라인 상담 +
+
+ 💬 + 카카오 당일 응답 +
+
+ 📂 + 자료 공유 후 온라인 검토 +
+
+ ✅ + 방문 없이 신고·기장 가능 +
+
+
+
+ + +
+
+
+
+
+
About
+

안녕하세요,
백원숙 세무사입니다.

+

세무사 자격과 함께 부동산중개사, 보험설계사 자격을 보유하고 있습니다. 사업자 세무, 종합소득세, 부가가치세, 양도세, 증여·상속 상담을 중심으로 온라인 상담을 진행합니다.

+

작게 시작하는 대표님의 막막함을 잘 알고 있습니다. 처음 상담부터 끝까지 같은 눈높이에서 함께합니다.

+
+
+
세무사 자격 취득
+
2015년
+
+
+
상담 방식
+
전국 비대면
+
+
-
-
-
🏢
-

부동산중개사

-

부동산 거래 전문 자격
양도세·취득세 컨설팅

-
-
-
-
-
📊
-

보험설계사

-

자산관리 전문 자격
가족 자산 플래닝

+
+
Expertise
+

세 가지 자격의 시너지

+
+
+
⚖️
+
+
공인 세무사
+

세무신고·장부관리·조세 자문 등 세무 업무 전반을 공식 대리합니다.

+
+
+
+
🏠
+
+
공인 부동산중개사
+

부동산 거래 구조를 이해해 양도·증여·임대 세무상담에 현실감을 더합니다.

+
+
+
+
🛡️
+
+
보험설계사 자격
+

상속·증여·대표자 리스크 관점에서 가족 현금흐름과 보험 구조를 함께 설명합니다.

+
+
@@ -144,86 +192,136 @@ else @{ var focusService = season?.FocusService ?? ""; - // 시즌에 따라 서비스 카드 순서 결정: 시즌 관련 카드가 맨 앞 - var cardOrder = focusService switch + // 시즌에 따라 서비스 카드 그룹 순서 결정: 시즌 관련 그룹이 맨 앞 + 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 + { + ["business-tax"] = new[] + { + ("📊", "기장 서비스", "월 기장 관리", "장부 작성, 부가세, 원천세, 인건비, 예상세액까지 — 매월 세금 리스크를 함께 점검합니다.", "매출 발생 사업자"), + ("📋", "소득세", "종합소득세 신고", "사업자, 프리랜서, 보험설계사, 부동산중개사의 소득 유형에 맞는 경비처리와 신고를 안내합니다.", "개인사업자·프리랜서·영업직"), + ("🌱", "첫 세무", "신규 사업자 세무정리", "사업자 유형 확인, 부가세·종소세·증빙관리·세금계좌 분리까지. 처음 사업을 시작하는 대표님을 위한 패키지.", "신규 사업자·프리랜서"), + }, + ["real-estate-tax"] = new[] + { + ("🏡", "부동산 세무", "양도세 사전진단", "계약 전 보유기간·비과세 여부·필요경비·장기보유특별공제를 검토합니다. 계약 전 상담이 선택지를 넓힙니다.", "부동산 매도 예정자"), + }, + ["family-asset"] = new[] + { + ("👨‍👩‍👧", "자산이전", "증여·상속 상담", "증여 시기, 증여재산 평가, 세부담, 자금출처, 보험 활용 가능성까지 — 가족 자산이전을 사전에 설계합니다.", "자산이전 예정 가족"), + }, + }; }
- @foreach (var cardKey in cardOrder) + @foreach (var groupKey in groupOrder) { - var isFeatured = cardKey == focusService; - if (cardKey == "business-tax") + var isFeaturedGroup = groupKey == focusService; + var cards = serviceCardsByGroup[groupKey]; + for (var i = 0; i < cards.Length; i++) { + var c = cards[i];
-
- @if (isFeatured) {
현재 시즌
} -
🏪
+
+ @if (isFeaturedGroup && i == 0) {
현재 시즌
} +
@c.Icon
-

사업자 세무

-
    -
  • ✓ 정확한 기장 및 결산
    • -
  • ✓ 세금계산서 관리
    • -
  • ✓ 경비처리 최적화
    • -
  • ✓ 절세 전략 수립
    • -
-

- 초기부터 세무 전략을 수립하면 연간 최대 수백만 원의 절세가 가능합니다. -

- 자세히 보기 -
-
-
- } - else if (cardKey == "real-estate-tax") - { -
-
- @if (isFeatured) {
현재 시즌
} -
🏠
-
-

부동산 세금

-
    -
  • ✓ 양도세 최소화
    • -
  • ✓ 취득세 절감
    • -
  • ✓ 임대소득 관리
    • -
  • ✓ 다주택자 세무
    • -
-

- 부동산 거래 시 미리 상담하면 세금 부담을 크게 줄일 수 있습니다. -

- 자세히 보기 -
-
-
- } - else - { -
-
- @if (isFeatured) {
현재 시즌
} -
👨‍👩‍👧‍👦
-
-

가족자산 관리

-
    -
  • ✓ 증여세 전략
    • -
  • ✓ 상속세 대비
    • -
  • ✓ 자산 이전 계획
    • -
  • ✓ 가족법인 설립
    • -
-

- 세대 이전 전에 사전 계획하면 세금 부담을 현저히 줄일 수 있습니다. -

- 자세히 보기 +
@c.Tag
+

@c.Title

+

@c.Desc

+
대상: @c.Target
+ 자세히 보기
} } +
+
+
+
+
상담 안내
+

어떤 세금이
걱정이신가요?

+

+ 세금은 계약·매출·명의·자금 이동 전에 검토할수록 선택지가 많습니다. +

+
+ 카카오로 문의하기 → +
+
+
+
+
+
+ + +
+
+
+

전국 어디서나, 온라인으로 시작하세요

+

+ 방문 없이 카카오·이메일로 상담부터 신고까지 — 온라인 사업자에게 최적화된 세무관리. +

+
+
+
+
+
💻
+
온라인 사업자
+

스마트스토어 · 크리에이터 · 프리랜서

+

스마트스토어·쿠팡마켓·유튜버·인스타셀러·크몽 프리랜서 — 플랫폼 정산 구조와 부가세·종소세 경비처리를 체계적으로 관리합니다. 전국 어디서나 비대면 상담 가능합니다.

+
+ 스마트스토어 + 크리에이터 + 비대면 상담 +
+
+
+
+
+
💼
+
영업직·독립사업자
+

보험설계사 · 부동산중개사 · 영업직

+

소득 변동이 크고 경비처리 기준이 애매한 분들. 업계 구조를 직접 경험한 세무사로서 종소세·경비처리·세금 예측을 온라인으로 관리합니다.

+
+ 종합소득세 + 경비처리 + 세금 예측 +
+
+
+
+
+
🏘️
+
부동산 자산이전
+

부동산 매도 · 증여 · 상속 예정자

+

계약 전 양도세 사전검토, 증여·상속 사전설계, 임대사업자 세무관리. 자료 공유 후 온라인 검토로 계약 전 선택지를 최대화합니다.

+
+ 양도세 검토 + 증여·상속 + 임대사업자 +
+
+
+
+
+
🔑
+
임대·자산관리
+

임대사업자 · 상가 보유자

+

주택·상가·오피스텔 임대 소득의 종합소득세, 부가가치세, 양도 시점 세무까지 — 보유부터 매도까지 단계별로 관리합니다.

+
+ 임대소득세 + 상가·오피스텔 + 매도 세무 +
+
+
diff --git a/TaxBaik.Web/wwwroot/css/site.css b/TaxBaik.Web/wwwroot/css/site.css index 17431c5..5556c4d 100644 --- a/TaxBaik.Web/wwwroot/css/site.css +++ b/TaxBaik.Web/wwwroot/css/site.css @@ -269,34 +269,6 @@ a:hover { border-radius: 2px; } -/* ===== 휴스 스트립 (신뢰도) ===== */ -.trust-strip { - background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-accent) 100%); - padding: var(--spacing-3xl) 0; - border-top: 1px solid var(--color-border); - border-bottom: 1px solid var(--color-border); -} - -.trust-item { - text-align: center; -} - -.trust-icon { - font-size: 3.5rem; - margin-bottom: var(--spacing-md); - display: block; -} - -.trust-item h3 { - color: var(--color-text); - margin-bottom: var(--spacing-sm); - font-size: 1.35rem; -} - -.trust-item p { - color: var(--color-text-light); - font-size: 0.95rem; -} /* ===== 배지 ===== */ .badge { @@ -419,10 +391,6 @@ body.with-mobile-cta { font-size: 0.95rem; } - .trust-icon { - font-size: 2.5rem; - } - .container { padding: 0 var(--spacing-md); } @@ -799,43 +767,6 @@ img { 100% { transform: translateX(0px) rotate(0deg); } } -/* 신뢰도 스트립 카드 리뉴얼 */ -.trust-strip { - background-color: var(--color-bg-alt); - padding: 3rem 0; - margin-top: -1.5rem; - position: relative; - z-index: 10; -} - -.trust-item { - background: white; - border-radius: var(--radius-lg); - padding: 2rem 1.5rem; - box-shadow: 0 10px 30px rgba(61, 40, 23, 0.05); - border: 1px solid rgba(200, 157, 110, 0.15); - transition: all var(--transition-normal); - text-align: center; -} - -.trust-item:hover { - transform: translateY(-5px); - box-shadow: 0 15px 35px rgba(61, 40, 23, 0.1); - border-color: var(--color-primary); -} - -.trust-icon { - font-size: 2.5rem; - margin-bottom: 1rem; - display: inline-block; - filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); - transition: transform var(--transition-fast); -} - -.trust-item:hover .trust-icon { - transform: scale(1.15) rotate(5deg); -} - /* 서비스 카드 고도화 */ .service-card { border: 1px solid rgba(217, 211, 196, 0.6) !important; @@ -905,3 +836,197 @@ img { box-shadow: 0 0 0 6px rgba(46, 92, 78, 0.3); transform: scale(1.1); } + +/* ===== 온라인 신뢰 바 ===== */ +.online-trust-bar { + background: var(--color-secondary-dark); + padding: 1.1rem 0; +} + +.online-trust-icon { + font-size: 1.1rem; + margin-right: 0.5rem; +} + +.online-trust-text { + font-size: 0.85rem; + color: rgba(255, 255, 255, 0.88); + font-weight: 500; +} + +/* ===== About 서사 섹션 ===== */ +.about-bio-card { + background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%); + border-radius: var(--radius-xl); + padding: 2.75rem 2.25rem; + color: white; +} + +.about-eyebrow { + font-size: 0.72rem; + letter-spacing: 0.18em; + color: var(--color-primary); + font-weight: 700; + text-transform: uppercase; + margin-bottom: 0.75rem; +} + +.about-bio-title { + font-size: 1.7rem; + font-weight: 800; + line-height: 1.4; + margin-bottom: 1.25rem; +} + +.about-bio-text { + color: rgba(255, 255, 255, 0.78); + font-size: 0.92rem; + line-height: 1.9; + margin-bottom: 1rem; +} + +.about-bio-stats { + display: flex; + gap: 2rem; + margin-top: 1.5rem; + padding-top: 1.5rem; + border-top: 1px solid rgba(255, 255, 255, 0.15); +} + +.about-stat-label { + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.5); + margin-bottom: 0.35rem; +} + +.about-stat-value { + font-size: 1.15rem; + font-weight: 800; + color: var(--color-primary); +} + +.about-expertise-title { + font-size: clamp(1.5rem, 3.5vw, 2rem); + font-weight: 800; + color: var(--color-text); + line-height: 1.4; + margin-bottom: 0.5rem; +} + +.expertise-item { + padding: 1.25rem 1.4rem; + border: 1.5px solid var(--color-border); + border-radius: var(--radius-lg); + transition: all var(--transition-fast); + background: white; +} + +.expertise-item:hover { + border-color: var(--color-primary); + background: var(--color-bg); +} + +.expertise-icon { + width: 48px; + height: 48px; + flex-shrink: 0; + background: var(--color-accent); + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.4rem; +} + +.expertise-title { + font-weight: 700; + font-size: 1rem; + color: var(--color-text); + margin-bottom: 0.35rem; +} + +.expertise-desc { + font-size: 0.85rem; + color: var(--color-text-light); + line-height: 1.8; +} + +/* ===== 서비스 카드 태그 & CTA 카드 ===== */ +.service-card-tag { + font-size: 0.68rem; + letter-spacing: 0.08em; + color: var(--color-primary); + font-weight: 700; + text-transform: uppercase; + margin-bottom: 0.5rem; +} + +.service-card-target { + margin-top: 1rem; + padding-top: 0.85rem; + border-top: 1px solid rgba(217, 211, 196, 0.5); + font-size: 0.75rem; + color: var(--color-text-light); +} + +.service-card--cta { + background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%) !important; + border: none !important; +} + +/* ===== 고객유형 섹션 ===== */ +.customer-type-section { + background: var(--color-secondary-dark); +} + +.customer-type-card { + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: var(--radius-xl); + padding: 2rem; + transition: background var(--transition-normal); +} + +.customer-type-card:hover { + background: rgba(255, 255, 255, 0.1); +} + +.customer-type-card--primary { + background: rgba(200, 157, 110, 0.14); + border-color: rgba(200, 157, 110, 0.4); +} + +.customer-type-card--primary:hover { + background: rgba(200, 157, 110, 0.2); +} + +.customer-type-tag { + font-size: 0.68rem; + letter-spacing: 0.1em; + color: var(--color-primary); + font-weight: 700; + text-transform: uppercase; + margin-bottom: 0.6rem; +} + +.customer-type-title { + font-size: 1.15rem; + font-weight: 800; + color: white; + margin-bottom: 0.85rem; +} + +.customer-type-desc { + color: rgba(255, 255, 255, 0.68); + font-size: 0.85rem; + line-height: 1.85; + margin-bottom: 0; +} + +.customer-type-pill { + background: rgba(200, 157, 110, 0.2); + color: #E8C88A; + padding: 4px 12px; + border-radius: 20px; + font-size: 0.75rem; +}