186 lines
8.6 KiB
TypeScript
186 lines
8.6 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import { MapPin, Smartphone, Sparkles } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{ name: "소개", id: "about" },
|
|
{ name: "객실", id: "rooms" },
|
|
{ name: "후기", id: "testimonials" },
|
|
{ name: "위치", id: "contact" },
|
|
]}
|
|
brandName="BLUE MOON"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
background={{ variant: "sparkles-gradient" }}
|
|
title="태백에서의 완벽한 휴식, 블루문 스테이"
|
|
description="태백의 조용한 밤, 깨끗한 침구, 깊은 휴식을 위한 프라이빗 스테이. 여행과 출장 사이, 가장 편안한 하루를 위한 공간입니다."
|
|
tag="Taebaek Premium Stay"
|
|
buttons={[
|
|
{ text: "지금 예약하기", href: "#booking" },
|
|
{ text: "객실 둘러보기", href: "#rooms" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/city-background-panoramic-view_23-2148892972.jpg"
|
|
imageAlt="Blue Moon Guesthouse Hero"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
useInvertedBackground={false}
|
|
tag="Our Story"
|
|
title="조용함 속의 완벽한 휴식"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "호텔급 침구", description: "청결하고 깨끗한 프리미엄 침구류로 쾌적한 숙면을 보장합니다.", bentoComponent: "reveal-icon", icon: Sparkles
|
|
},
|
|
{
|
|
title: "무인 시스템", description: "편리하고 번거로움 없는 키오스크 비대면 체크인/아웃.", bentoComponent: "reveal-icon", icon: Smartphone
|
|
},
|
|
{
|
|
title: "주변 명소", description: "태백산 및 세이프타운과 인접하여 관광하기 최적의 위치.", bentoComponent: "reveal-icon", icon: MapPin
|
|
},
|
|
]}
|
|
title="게스트가 사랑하는 공간"
|
|
description="다시 찾는 감성 스테이, 그 이유를 경험해보세요."
|
|
/>
|
|
</div>
|
|
|
|
<div id="rooms" data-section="rooms">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1", name: "더블룸", brand: "Signature", price: "99,000", rating: 5, reviewCount: "48", imageSrc: "http://img.b2bpic.net/free-photo/white-pillows-stacked_1203-1329.jpg"},
|
|
{
|
|
id: "2", name: "트윈룸", brand: "Comfort", price: "119,000", rating: 5, reviewCount: "32", imageSrc: "http://img.b2bpic.net/free-photo/delicious-breakfast-bed-concept_23-2148877644.jpg"},
|
|
{
|
|
id: "3", name: "온돌방", brand: "Traditional", price: "89,000", rating: 4, reviewCount: "25", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-looking-away_23-2148350493.jpg"},
|
|
]}
|
|
title="시그니처 객실 타입"
|
|
description="취향에 맞는 프라이빗 룸을 선택하세요."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "김태백", role: "여행객", company: "블루문 스테이", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hobby-leisure-adventure-young-surfer-with-cute-smile-carrying-his-surf-board-his-arm-looking-ocean-having-happy-expression_273609-1738.jpg"},
|
|
{
|
|
id: "2", name: "이조용", role: "1인 여행", company: "블루문 스테이", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-traveling_23-2148601995.jpg"},
|
|
{
|
|
id: "3", name: "박재방", role: "단골 고객", company: "블루문 스테이", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-surfer-snapback-looking-smiling-cheerfully-after-winning-sports-contest-surfers-holding-his-white-surfboard-his-arm_273609-1551.jpg"},
|
|
{
|
|
id: "4", name: "최힐링", role: "커플", company: "블루문 스테이", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-laughing-young-man-with-beard-holding-sunglasses-posing-road-alps_197531-4384.jpg"},
|
|
{
|
|
id: "5", name: "정출장", role: "출장객", company: "블루문 스테이", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-good-looking-woman-traveler-orange-jumper-carries-rucksack-wears-headband_273609-25971.jpg"},
|
|
]}
|
|
title="진짜 고객의 목소리"
|
|
description="다녀가신 분들의 생생한 리뷰입니다."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{ id: "m1", value: "4.73", title: "네이버 평점", description: "실제 방문객들의 높은 만족도", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-pretty-waitress_1098-15705.jpg" },
|
|
{ id: "m2", value: "233+", title: "포토 리뷰", description: "진심 어린 고객의 후기", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-posing-front-river_23-2148693679.jpg" },
|
|
{ id: "m3", value: "190+", title: "방문객", description: "매년 꾸준한 사랑", imageSrc: "http://img.b2bpic.net/free-photo/smiley-girl-hiding-her-face-with-hand_23-2148504828.jpg" },
|
|
]}
|
|
title="압도적인 고객 만족"
|
|
description="수많은 게스트가 입증한 최고의 숙소."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "f1", title: "체크인 시간은 언제인가요?", content: "오후 3시부터 24시간 언제든 셀프 체크인이 가능합니다." },
|
|
{ id: "f2", title: "주차장은 있나요?", content: "네, 건물 바로 앞에 무료로 주차가 가능합니다." },
|
|
{ id: "f3", title: "조식 서비스가 제공되나요?", content: "네, 간단한 토스트와 커피, 과일 등을 즐기실 수 있습니다." },
|
|
]}
|
|
sideTitle="자주 묻는 질문"
|
|
sideDescription="궁금한 점을 확인하세요."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Booking Inquiry"
|
|
title="지금 예약하기"
|
|
description="태백의 가장 편안한 밤을 경험하세요."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="BLUE MOON"
|
|
leftLink={{ text: "운영 안내", href: "#about" }}
|
|
rightLink={{ text: "고객 리뷰", href: "#testimonials" }}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|