364 lines
12 KiB
TypeScript
364 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="large"
|
|
background="floatingGradient"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "홈",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "서비스",
|
|
id: "features",
|
|
},
|
|
{
|
|
name: "프로세스",
|
|
id: "process",
|
|
},
|
|
{
|
|
name: "후기",
|
|
id: "testimonials",
|
|
},
|
|
{
|
|
name: "상담문의",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="누수 프리미엄"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="보이지 않는 누수까지 정확하게 찾아냅니다."
|
|
description="17년 경력 전문가가 최첨단 탐지 장비로 빠르고 정확하게 해결합니다. 인천 연수구 지역 긴급 출동 전문."
|
|
testimonials={[
|
|
{
|
|
name: "김철수",
|
|
handle: "@연수동",
|
|
testimonial: "다른 업체에서 못 잡던 누수를 바로 찾아내셨어요.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/flexible-connector-different-wrenches_23-2147772264.jpg?_wi=1",
|
|
imageAlt: "thermal leak detection interface",
|
|
},
|
|
{
|
|
name: "박영희",
|
|
handle: "@송도",
|
|
testimonial: "설명도 친절하고 작업 후 정리까지 깔끔했습니다.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-vector/exclusive-benefit-line-icons-with-reward-symbol-vip-member-card-discount-voucher-sale-coupon_88138-1833.jpg?_wi=1",
|
|
imageAlt: "thermal leak detection interface",
|
|
},
|
|
{
|
|
name: "이민수",
|
|
handle: "@동춘동",
|
|
testimonial: "과잉 공사 없이 필요한 부분만 수리해주셔서 신뢰가 갔습니다.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machine_23-2151599342.jpg?_wi=1",
|
|
imageAlt: "thermal leak detection interface",
|
|
},
|
|
{
|
|
name: "최지혜",
|
|
handle: "@청학동",
|
|
testimonial: "보험 서류까지 꼼꼼히 챙겨주셔서 감사해요.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/illustration-hexagonal-figure-made-brown-gold-lights_181624-21212.jpg?_wi=1",
|
|
imageAlt: "thermal leak detection interface",
|
|
},
|
|
{
|
|
name: "정우성",
|
|
handle: "@옥련동",
|
|
testimonial: "24시간 긴급 출동 정말 든든했습니다.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg",
|
|
imageAlt: "thermal leak detection interface",
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "무료 상담 받기",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
text: "긴급 전화 연결",
|
|
href: "tel:05079599896",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/flexible-connector-different-wrenches_23-2147772264.jpg?_wi=2"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg",
|
|
alt: "김철수",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-female-staff-airport-terminal_107420-85049.jpg",
|
|
alt: "박영희",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg",
|
|
alt: "이민수",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg",
|
|
alt: "최지혜",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/waist-up-confident-businessman-office_329181-19349.jpg",
|
|
alt: "정우성",
|
|
},
|
|
]}
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "17년 전통",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "연수구 전문",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "24시간 긴급",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "정밀 탐지",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "투명한 가격",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={false}
|
|
title="누수는 방치할수록 피해가 커집니다."
|
|
description={[
|
|
"내부 구조 부식 및 곰팡이 발생으로 인한 건강 위협",
|
|
"수도요금 폭등 및 관리비 증가",
|
|
"시간이 지날수록 확대되는 리모델링 수리 범위",
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "정직한 가격",
|
|
description: "불필요한 공사 없이 필요한 부분만 정확히 수리합니다.",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/exclusive-benefit-line-icons-with-reward-symbol-vip-member-card-discount-voucher-sale-coupon_88138-1833.jpg?_wi=2",
|
|
},
|
|
{
|
|
title: "고객 중심 설명",
|
|
description: "원인 분석부터 해결 과정까지 자세하게 설명드립니다.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machine_23-2151599342.jpg?_wi=2",
|
|
},
|
|
{
|
|
title: "최첨단 장비",
|
|
description: "열화상, 내시경, 초음파 장비로 정밀 탐지합니다.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/illustration-hexagonal-figure-made-brown-gold-lights_181624-21212.jpg?_wi=2",
|
|
},
|
|
]}
|
|
title="왜 누수 프리미엄인가?"
|
|
description="고객들이 누수 프리미엄을 선택하는 이유"
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "1",
|
|
value: "STEP 1",
|
|
title: "무료 상담 접수",
|
|
description: "신속한 전화 접수",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/set-golden-premium-stickers_23-2147629911.jpg",
|
|
},
|
|
{
|
|
id: "2",
|
|
value: "STEP 2",
|
|
title: "현장 긴급 방문",
|
|
description: "연수구 전문 출동",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/clock-plate-with-sequins_23-2147992707.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
value: "STEP 3",
|
|
title: "정밀 장비 검사",
|
|
description: "첨단 과학 탐지",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/test-tube-with-corona-virus-vector_53876-171312.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
value: "STEP 4",
|
|
title: "공사 및 사후",
|
|
description: "철저한 관리",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/18th-birthday-badges-collection_23-2148691606.jpg",
|
|
},
|
|
]}
|
|
title="누수 해결 과정"
|
|
description="체계적인 단계를 통한 완벽한 누수 해결"
|
|
/>
|
|
</div>
|
|
|
|
<div id="area" data-section="area">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"송도동",
|
|
"동춘동",
|
|
"연수동",
|
|
"옥련동",
|
|
"청학동",
|
|
"선학동",
|
|
"함박마을",
|
|
]}
|
|
title="연수구 지역 빠른 출동"
|
|
description="송도, 동춘, 연수, 옥련, 청학, 선학동 지역 1시간 이내 방문"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={false}
|
|
testimonial="다른 업체에서 포기한 누수를 바로 해결해주셨어요. 서류까지 챙겨주시는 센스에 감동했습니다."
|
|
rating={5}
|
|
author="박성민 고객님"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg",
|
|
alt: "고객1",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg",
|
|
alt: "고객2",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg",
|
|
alt: "고객3",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-man-drinking-coffee-construction-side_329181-3771.jpg",
|
|
alt: "고객4",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/two-businesswomen-working-cafe_1157-26391.jpg",
|
|
alt: "고객5",
|
|
},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1",
|
|
title: "비용은 어떻게 되나요?",
|
|
content: "현장 상황에 따라 달라지며, 상담 시 투명하게 안내해 드립니다.",
|
|
},
|
|
{
|
|
id: "q2",
|
|
title: "출동 시간은 얼마나 걸리나요?",
|
|
content: "연수구 기준 평균 1시간 이내 도착합니다.",
|
|
},
|
|
{
|
|
id: "q3",
|
|
title: "AS는 가능한가요?",
|
|
content: "공사 후 철저한 사후 관리를 보장합니다.",
|
|
},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
title="탐지 실패 시 100% 환불"
|
|
description="누수는 상황마다 달라 100%를 장담하는 업체는 위험합니다. 저희는 끝까지 책임지며, 탐지 실패 시 탐지 비용 전액을 환불해 드립니다."
|
|
imageSrc="http://img.b2bpic.net/free-photo/pocket-watch-golden-sparkles_23-2147992608.jpg"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="지금 바로 상담받으세요."
|
|
description="누수는 방치할수록 피해가 커집니다. 전문가의 진단을 지금 받아보세요."
|
|
inputs={[
|
|
{
|
|
name: "name",
|
|
type: "text",
|
|
placeholder: "성함",
|
|
required: true,
|
|
},
|
|
{
|
|
name: "phone",
|
|
type: "tel",
|
|
placeholder: "연락처",
|
|
required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message",
|
|
placeholder: "누수 증상 및 지역",
|
|
rows: 4,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/sanitary-equipment_93675-132393.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="누수 프리미엄 누수탐지센터"
|
|
copyrightText="© 2025 누수 프리미엄. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|