Compare commits
2 Commits
version_1_
...
version_2_
| Author | SHA1 | Date | |
|---|---|---|---|
|
8558da74f8 | ||
| bdc48e32e0 |
@@ -18,22 +18,6 @@ export default function Layout() {
|
||||
{
|
||||
"name": "자주 묻는 질문",
|
||||
"href": "#faq"
|
||||
},
|
||||
{
|
||||
"name": "Hero",
|
||||
"href": "#hero"
|
||||
},
|
||||
{
|
||||
"name": "Problem",
|
||||
"href": "#problem"
|
||||
},
|
||||
{
|
||||
"name": "Why Us",
|
||||
"href": "#why-us"
|
||||
},
|
||||
{
|
||||
"name": "Process",
|
||||
"href": "#process"
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@@ -1,142 +1,33 @@
|
||||
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
|
||||
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
||||
import FeaturesBorderGlow from '@/components/sections/features/FeaturesBorderGlow';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
|
||||
import { Search, Wrench, Zap } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly. Non-block content (wrappers, non-inlinable sections) is
|
||||
// preserved inline; extracted section blocks become <XSection/> refs.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import ProblemSection from './HomePage/sections/Problem';
|
||||
import ServicesSection from './HomePage/sections/Services';
|
||||
import WhyUsSection from './HomePage/sections/WhyUs';
|
||||
import CasesSection from './HomePage/sections/Cases';
|
||||
import ProcessSection from './HomePage/sections/Process';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroOverlay
|
||||
tag="인천·부평·부천 누수 전문"
|
||||
title="누수 때문에 고민이신가요? 확실하게 해결해 드립니다."
|
||||
description="해결하지 못한다면 비용은 0원! 부부가 운영하는 정직한 누수탐지 공사 업체입니다. 상담은 자정까지 가능합니다."
|
||||
primaryButton={{
|
||||
text: "즉시 전화상담 010-2079-3721", href: "tel:01020793721"}}
|
||||
secondaryButton={{
|
||||
text: "상세 문의하기", href: "sms:01020793721"}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-plumber-working-fix-problems-client-s-house_23-2150990725.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="problem" data-section="problem">
|
||||
<SectionErrorBoundary name="problem">
|
||||
<AboutMediaOverlay
|
||||
tag="이런 고민이 있으신가요?"
|
||||
title="누수 문제를 정확히 파악하는 것이 우선입니다."
|
||||
description="아랫집 누수 민원으로 당황하셨나요? 싱크대 아래나 벽면에서 원인 모를 물기가 보이시나요? 큰 공사가 될까 봐 걱정하지 마세요. 저희가 정밀 탐지로 원인 부위만 찾아 해결해 드립니다."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/photo-wall-texture-pattern_58702-12665.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ProblemSection />
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<FeaturesBorderGlow
|
||||
tag="제공 서비스"
|
||||
title="누수와 관련된 모든 문제를 해결합니다."
|
||||
description="공압 검사, 가스 탐지, 청음 탐지 등 최신 장비를 활용하여 정밀하게 찾아내고 확실하게 수리합니다."
|
||||
features={[
|
||||
{
|
||||
title: "누수탐지 및 공사", description: "배관 누수 원인을 정확히 찾아내는 전문 탐지", icon: Search,
|
||||
},
|
||||
{
|
||||
title: "배관 문제 해결", description: "온수 및 난방 배관 누수 전문 정비", icon: Zap,
|
||||
},
|
||||
{
|
||||
title: "수도 설비 공사", description: "싱크대, 천장, 벽면 등 수도 설비 전반 수리", icon: Wrench,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ServicesSection />
|
||||
|
||||
<div id="why-us" data-section="why-us">
|
||||
<SectionErrorBoundary name="why-us">
|
||||
<AboutMediaOverlay
|
||||
tag="부부 운영 안심 업체"
|
||||
title="왜 '해온누수'를 선택해야 할까요?"
|
||||
description="당일 출장과 당일 해결을 원칙으로 하며, 필요한 부분만 정확히 수리하여 불필요한 비용을 줄입니다. 작업 후 재검사까지 꼼꼼하게 확인합니다."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mechanical-wrench-desk_23-2148557960.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<WhyUsSection />
|
||||
|
||||
<div id="cases" data-section="cases">
|
||||
<SectionErrorBoundary name="cases">
|
||||
<FeaturesImageBento
|
||||
tag="해결 사례"
|
||||
title="많은 고객님이 저희의 정직한 시공을 경험하셨습니다."
|
||||
description="누수 탐지 및 완벽 수리 사례입니다."
|
||||
items={[
|
||||
{
|
||||
title: "아랫집 누수 민원 해결", description: "원인 불명 누수 탐지 후 성공적인 수리", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-working-as-plumber_23-2150746388.jpg"},
|
||||
{
|
||||
title: "싱크대 하부 분배기 보수", description: "싱크대 밑 난방 배관 누수 완벽 해결", imageSrc: "http://img.b2bpic.net/free-photo/man-cleaning-kitchen-rack-with-pull-out-faucet-sprayer-rinsing-drainer_169016-69667.jpg"},
|
||||
{
|
||||
title: "산곡동 빌라 온수배관 사례", description: "지속적인 물 샘 현상을 탐지하여 정밀 수리", imageSrc: "http://img.b2bpic.net/free-photo/young-engineer-adjusting-autonomous-heating_1303-26539.jpg"},
|
||||
{
|
||||
title: "벽면 누수 탐지 사례", description: "벽체 속 배관 정밀 탐지 해결", imageSrc: "http://img.b2bpic.net/free-photo/uniform-construction-tools-wooden-table-top-view_169016-24245.jpg"},
|
||||
{
|
||||
title: "천장 누수 해결", description: "위층 누수 차단 및 배관 공사", imageSrc: "http://img.b2bpic.net/free-photo/household-repair-middle-aged-man-inspecting-pipe-touching-hand-sink-stylish-modern-kitchen_259150-58265.jpg"},
|
||||
{
|
||||
title: "수도 설비 보수", description: "노후 배관 교체 작업 사례", imageSrc: "http://img.b2bpic.net/free-photo/close-up-men-working-together_23-2148752013.jpg"},
|
||||
{
|
||||
title: "긴급 누수 상황 해결", description: "당일 출장 후 빠른 누수 원인 복구", imageSrc: "http://img.b2bpic.net/free-photo/repair-tools-kit-succulent-plant-wooden-background_23-2148393171.jpg"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<CasesSection />
|
||||
|
||||
<div id="process" data-section="process">
|
||||
<SectionErrorBoundary name="process">
|
||||
<MetricsFeatureCards
|
||||
tag="작업 과정"
|
||||
title="누수탐지 및 수리 프로세스"
|
||||
description="과학적인 장비를 이용해 원인을 찾고, 최소한의 비용으로 확실한 결과만 제공합니다."
|
||||
metrics={[
|
||||
{
|
||||
value: "01", title: "정밀 진단", features: [
|
||||
"상담 문의", "현장 방문", "공압 검사"],
|
||||
},
|
||||
{
|
||||
value: "02", title: "원인 분석", features: [
|
||||
"가스 탐지", "청음 탐지", "원인 부위 특정"],
|
||||
},
|
||||
{
|
||||
value: "03", title: "수리 및 재검사", features: [
|
||||
"부분 수리", "재검사 확인", "사후 정리"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ProcessSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTwoColumn
|
||||
tag="자주 묻는 질문"
|
||||
title="무엇이든 물어보세요."
|
||||
description="누수 문제와 관련된 궁금증을 해결해 드립니다."
|
||||
items={[
|
||||
{
|
||||
question: "비용은 어떻게 결정되나요?", answer: "현장 상황과 누수 부위에 따라 다르지만, 정직한 견적으로 작업합니다."},
|
||||
{
|
||||
question: "당일 수리가 가능한가요?", answer: "네, 최대한 당일 해결을 목표로 정밀하게 작업해 드립니다."},
|
||||
{
|
||||
question: "해결 못 하면 어떻게 하나요?", answer: "해결하지 못한다면 비용을 일절 받지 않습니다."},
|
||||
{
|
||||
question: "상담 시간은 어떻게 되나요?", answer: "자정까지 전화 상담이 가능합니다."},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
36
src/pages/HomePage/sections/Cases.tsx
Normal file
36
src/pages/HomePage/sections/Cases.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "cases" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function CasesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="cases" data-section="cases">
|
||||
<SectionErrorBoundary name="cases">
|
||||
<FeaturesImageBento
|
||||
tag="해결 사례"
|
||||
title="많은 고객님이 저희의 정직한 시공을 경험하셨습니다."
|
||||
description="누수 탐지 및 완벽 수리 사례입니다."
|
||||
items={[
|
||||
{
|
||||
title: "아랫집 누수 민원 해결", description: "원인 불명 누수 탐지 후 성공적인 수리", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-working-as-plumber_23-2150746388.jpg"},
|
||||
{
|
||||
title: "싱크대 하부 분배기 보수", description: "싱크대 밑 난방 배관 누수 완벽 해결", imageSrc: "http://img.b2bpic.net/free-photo/man-cleaning-kitchen-rack-with-pull-out-faucet-sprayer-rinsing-drainer_169016-69667.jpg"},
|
||||
{
|
||||
title: "산곡동 빌라 온수배관 사례", description: "지속적인 물 샘 현상을 탐지하여 정밀 수리", imageSrc: "http://img.b2bpic.net/free-photo/young-engineer-adjusting-autonomous-heating_1303-26539.jpg"},
|
||||
{
|
||||
title: "벽면 누수 탐지 사례", description: "벽체 속 배관 정밀 탐지 해결", imageSrc: "http://img.b2bpic.net/free-photo/uniform-construction-tools-wooden-table-top-view_169016-24245.jpg"},
|
||||
{
|
||||
title: "천장 누수 해결", description: "위층 누수 차단 및 배관 공사", imageSrc: "http://img.b2bpic.net/free-photo/household-repair-middle-aged-man-inspecting-pipe-touching-hand-sink-stylish-modern-kitchen_259150-58265.jpg"},
|
||||
{
|
||||
title: "수도 설비 보수", description: "노후 배관 교체 작업 사례", imageSrc: "http://img.b2bpic.net/free-photo/close-up-men-working-together_23-2148752013.jpg"},
|
||||
{
|
||||
title: "긴급 누수 상황 해결", description: "당일 출장 후 빠른 누수 원인 복구", imageSrc: "http://img.b2bpic.net/free-photo/repair-tools-kit-succulent-plant-wooden-background_23-2148393171.jpg"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
30
src/pages/HomePage/sections/Faq.tsx
Normal file
30
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "faq" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTwoColumn
|
||||
tag="자주 묻는 질문"
|
||||
title="무엇이든 물어보세요."
|
||||
description="누수 문제와 관련된 궁금증을 해결해 드립니다."
|
||||
items={[
|
||||
{
|
||||
question: "비용은 어떻게 결정되나요?", answer: "현장 상황과 누수 부위에 따라 다르지만, 정직한 견적으로 작업합니다."},
|
||||
{
|
||||
question: "당일 수리가 가능한가요?", answer: "네, 최대한 당일 해결을 목표로 정밀하게 작업해 드립니다."},
|
||||
{
|
||||
question: "해결 못 하면 어떻게 하나요?", answer: "해결하지 못한다면 비용을 일절 받지 않습니다."},
|
||||
{
|
||||
question: "상담 시간은 어떻게 되나요?", answer: "자정까지 전화 상담이 가능합니다."},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
25
src/pages/HomePage/sections/Hero.tsx
Normal file
25
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "hero" section.
|
||||
|
||||
import React from 'react';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroOverlay
|
||||
tag="인천·부평·부천 누수 전문"
|
||||
title="누수 때문에 고민이신가요? 확실하게 해결해 드립니다."
|
||||
description="해결하지 못한다면 비용은 0원! 부부가 운영하는 정직한 누수탐지 공사 업체입니다. 상담은 자정까지 가능합니다."
|
||||
primaryButton={{
|
||||
text: "즉시 전화상담 010-2079-3721", href: "tel:01020793721"}}
|
||||
secondaryButton={{
|
||||
text: "상세 문의하기", href: "sms:01020793721"}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-plumber-working-fix-problems-client-s-house_23-2150990725.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
src/pages/HomePage/sections/Problem.tsx
Normal file
21
src/pages/HomePage/sections/Problem.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "problem" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ProblemSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="problem" data-section="problem">
|
||||
<SectionErrorBoundary name="problem">
|
||||
<AboutMediaOverlay
|
||||
tag="이런 고민이 있으신가요?"
|
||||
title="누수 문제를 정확히 파악하는 것이 우선입니다."
|
||||
description="아랫집 누수 민원으로 당황하셨나요? 싱크대 아래나 벽면에서 원인 모를 물기가 보이시나요? 큰 공사가 될까 봐 걱정하지 마세요. 저희가 정밀 탐지로 원인 부위만 찾아 해결해 드립니다."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/photo-wall-texture-pattern_58702-12665.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
34
src/pages/HomePage/sections/Process.tsx
Normal file
34
src/pages/HomePage/sections/Process.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "process" section.
|
||||
|
||||
import React from 'react';
|
||||
import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ProcessSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="process" data-section="process">
|
||||
<SectionErrorBoundary name="process">
|
||||
<MetricsFeatureCards
|
||||
tag="작업 과정"
|
||||
title="누수탐지 및 수리 프로세스"
|
||||
description="과학적인 장비를 이용해 원인을 찾고, 최소한의 비용으로 확실한 결과만 제공합니다."
|
||||
metrics={[
|
||||
{
|
||||
value: "01", title: "정밀 진단", features: [
|
||||
"상담 문의", "현장 방문", "공압 검사"],
|
||||
},
|
||||
{
|
||||
value: "02", title: "원인 분석", features: [
|
||||
"가스 탐지", "청음 탐지", "원인 부위 특정"],
|
||||
},
|
||||
{
|
||||
value: "03", title: "수리 및 재검사", features: [
|
||||
"부분 수리", "재검사 확인", "사후 정리"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
src/pages/HomePage/sections/Services.tsx
Normal file
32
src/pages/HomePage/sections/Services.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "services" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesBorderGlow from '@/components/sections/features/FeaturesBorderGlow';
|
||||
import { Search, Wrench, Zap } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ServicesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<FeaturesBorderGlow
|
||||
tag="제공 서비스"
|
||||
title="누수와 관련된 모든 문제를 해결합니다."
|
||||
description="공압 검사, 가스 탐지, 청음 탐지 등 최신 장비를 활용하여 정밀하게 찾아내고 확실하게 수리합니다."
|
||||
features={[
|
||||
{
|
||||
title: "누수탐지 및 공사", description: "배관 누수 원인을 정확히 찾아내는 전문 탐지", icon: Search,
|
||||
},
|
||||
{
|
||||
title: "배관 문제 해결", description: "온수 및 난방 배관 누수 전문 정비", icon: Zap,
|
||||
},
|
||||
{
|
||||
title: "수도 설비 공사", description: "싱크대, 천장, 벽면 등 수도 설비 전반 수리", icon: Wrench,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
src/pages/HomePage/sections/WhyUs.tsx
Normal file
21
src/pages/HomePage/sections/WhyUs.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "why-us" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function WhyUsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="why-us" data-section="why-us">
|
||||
<SectionErrorBoundary name="why-us">
|
||||
<AboutMediaOverlay
|
||||
tag="부부 운영 안심 업체"
|
||||
title="왜 '해온누수'를 선택해야 할까요?"
|
||||
description="당일 출장과 당일 해결을 원칙으로 하며, 필요한 부분만 정확히 수리하여 불필요한 비용을 줄입니다. 작업 후 재검사까지 꼼꼼하게 확인합니다."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mechanical-wrench-desk_23-2148557960.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user