258 lines
14 KiB
TypeScript
258 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import { Award, Building, Flame, Heart, IceCream, Soup } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="large"
|
|
background="floatingGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "홈", id: "#hero"},
|
|
{
|
|
name: "가게 소개", id: "#story"},
|
|
{
|
|
name: "메뉴", id: "#menu"},
|
|
{
|
|
name: "고객 후기", id: "#testimonials"},
|
|
{
|
|
name: "오시는 길", id: "#contact"},
|
|
]}
|
|
brandName="민속밀면 소래포구점"
|
|
animateOnLoad={true}
|
|
button={{
|
|
text: "문의하기", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
background={{
|
|
variant: "plain"}}
|
|
imagePosition="right"
|
|
title="민속밀면"
|
|
description="소래포구에서 만나는 부산의 맛"
|
|
imageSrc="http://img.b2bpic.net/free-photo/japanese-salt-ramen-japan-soup_1203-4328.jpg"
|
|
imageAlt="식욕을 자극하는 밀면 한 그릇 클로즈업"
|
|
mediaAnimation="slide-up"
|
|
fixedMediaHeight={true}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-counter_1170-657.jpg", alt: "고객 후기 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/happy-woman-using-tablet-celebrating-success-outdoor-cafe_1262-18867.jpg", alt: "고객 후기 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/human-happy-woman-clanging-glasses-wine-table-cafe_23-2148016789.jpg", alt: "고객 후기 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/senior-woman-eating-restaurant-with-friends_23-2149316752.jpg", alt: "고객 후기 4"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/happy-young-asian-man-standing_171337-10484.jpg", alt: "고객 후기 5"},
|
|
]}
|
|
avatarText="수많은 고객들이 인정한 맛!"
|
|
marqueeItems={[
|
|
{
|
|
type: "text-icon", text: "시원하고 깔끔한", icon: IceCream,
|
|
},
|
|
{
|
|
type: "text-icon", text: "매콤 달콤 중독성", icon: Flame,
|
|
},
|
|
{
|
|
type: "text-icon", text: "매일 끓인 육수", icon: Soup,
|
|
},
|
|
{
|
|
type: "text-icon", text: "쫄깃한 면발", icon: Award,
|
|
},
|
|
{
|
|
type: "text-icon", text: "정성 가득 만두", icon: Building,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="story" data-section="story">
|
|
<FeatureCardTwentyFour
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "f1", title: "오랜 전통", author: "부산의 맛을 소래포구에서", description: "밀면의 본고장 부산의 깊은 맛과 전통을 소래포구점에서 그대로 이어갑니다. 변함없는 맛으로 고객 여러분께 추억을 선물합니다.", tags: [
|
|
"전통", "부산", "오리지널"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-sliced-cabbage-with-pepper-white-space_140725-97334.jpg", imageAlt: "korean restaurant kitchen cooking"},
|
|
{
|
|
id: "f2", title: "정직한 재료", author: "매일 직접 엄선한 신선함", description: "최상의 맛을 위해 매일 새벽 직접 엄선한 신선한 재료만을 사용합니다. 자연의 맛을 그대로 살려 건강하고 맛있는 밀면을 만듭니다.", tags: [
|
|
"신선함", "건강", "자연"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/japanese-salt-ramen-japan-soup_1203-4328.jpg", imageAlt: "korean restaurant kitchen cooking"},
|
|
{
|
|
id: "f3", title: "장인의 손맛", author: "한 그릇에 담긴 정성", description: "수십 년 경력의 장인 정신으로 모든 밀면 한 그릇에 정성을 다합니다. 고객님의 만족을 최우선으로 생각하며 최고의 맛을 약속드립니다.", tags: [
|
|
"장인정신", "정성", "최고의맛"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/japanese-ramen-noodle-table_1232-2270.jpg", imageAlt: "korean restaurant kitchen cooking"},
|
|
]}
|
|
animationType="blur-reveal"
|
|
title="민속밀면의 이야기"
|
|
description="밀면의 고향 부산의 맛을 소래포구에 그대로 옮겨왔습니다. 오랜 시간 이어온 밀면의 역사와 민속밀면만의 정직한 철학으로 한 그릇에 진심을 담아냅니다. 전통의 맛을 지키면서도 현대적인 감각으로 새로운 경험을 선사합니다."
|
|
/>
|
|
</div>
|
|
|
|
<div id="values" data-section="values">
|
|
<AboutMetric
|
|
useInvertedBackground={false}
|
|
title="민속밀면의 세 가지 약속"
|
|
metrics={[
|
|
{
|
|
icon: Soup,
|
|
label: "정직한 육수", value: "매일 아침 직접 우려낸 깊고 구수한 사골·돼지 육수"},
|
|
{
|
|
icon: Award,
|
|
label: "전통 면발", value: "밀가루와 전분을 황금 비율로 배합한 쫄깃한 수제 밀면"},
|
|
{
|
|
icon: Heart,
|
|
label: "손맛 그대로", value: "레시피 하나 바꾸지 않은 민속의 맛과 정성을 담아"},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="menu" data-section="menu">
|
|
<ProductCardThree
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
products={[
|
|
{
|
|
id: "mulmilmyeon", name: "물밀면", price: "9,000원", imageSrc: "http://img.b2bpic.net/free-photo/japanese-ramen-noodle-table_1232-2270.jpg", imageAlt: "시원한 물밀면 한 그릇"},
|
|
{
|
|
id: "bibimmilmyeon", name: "비빔밀면", price: "9,000원", imageSrc: "http://img.b2bpic.net/free-photo/korean-instant-noodle-tteokbokki-korean-spicy-sauce-ancient-food_1150-43001.jpg", imageAlt: "매콤 달콤 비빔밀면"},
|
|
{
|
|
id: "banbanmilmyeon", name: "반반밀면", price: "9,000원", imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-dumplings-chopsticks-sesame-seeds-sauces-red-backdrop_23-2148123651.jpg", imageAlt: "물과 비빔을 한 번에, 반반밀면"},
|
|
{
|
|
id: "wangmandu", name: "왕만두", price: "5,000원", imageSrc: "http://img.b2bpic.net/free-photo/top-view-chinese-hot-pot_23-2149529848.jpg", imageAlt: "속이 꽉 찬 수제 왕만두"},
|
|
{
|
|
id: "suyuk", name: "수육", price: "15,000원", imageSrc: "http://img.b2bpic.net/free-photo/asian-chicken-dish_23-2147716990.jpg", imageAlt: "부드러운 돼지 수육"},
|
|
{
|
|
id: "drinks", name: "음료", price: "별도 문의", imageSrc: "http://img.b2bpic.net/free-photo/diet-vegetarian-bowl-noodle-soup-shiitake-mushrooms-carrot-boiled-eggs-japanese-food-top-view-flat-lay_2829-6137.jpg", imageAlt: "시원한 음료수"},
|
|
]}
|
|
title="메뉴"
|
|
description="민속밀면 소래포구점에서 부산의 전통 맛을 경험하세요. 시원한 물밀면부터 매콤한 비빔밀면, 든든한 사이드 메뉴까지 다양하게 준비되어 있습니다."
|
|
animationType="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "김민준", role: "직장인", company: "인천", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/confident-asian-businesswoman-showing-thumbs-up-standing-near-entrance-her-cafe-restaurant_1258-199355.jpg", imageAlt: "김민준 고객 사진"},
|
|
{
|
|
id: "2", name: "이수정", role: "대학생", company: "부천", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-handsome-blond-asian-guy-black-tshirt-smiling-happy-camera-standing-yellow-bac_1258-111413.jpg", imageAlt: "이수정 고객 사진"},
|
|
{
|
|
id: "3", name: "박서준", role: "자영업자", company: "서울", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-woman-looking-photographer_23-2148339179.jpg", imageAlt: "박서준 고객 사진"},
|
|
{
|
|
id: "4", name: "최지우", role: "주부", company: "소래포구", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-satisfied-happy-young-attractive-male-with-blue-eyes-bristle-denim-jacket-raising-thumbs-up-smiling-cheerfully_176420-43528.jpg", imageAlt: "최지우 고객 사진"},
|
|
{
|
|
id: "5", name: "정우성", role: "여행객", company: "대전", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/middle-age-woman-smiling-having-good-time_23-2149218571.jpg", imageAlt: "정우성 고객 사진"},
|
|
{
|
|
id: "6", name: "이지은", role: "프리랜서", company: "인천", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-friends-with-food_23-2149410394.jpg", imageAlt: "이지은 고객 사진"},
|
|
]}
|
|
title="고객 후기"
|
|
description="민속밀면 소래포구점을 방문하신 고객님들의 솔직한 이야기입니다. 한 그릇에 담긴 정성과 맛에 대한 만족을 직접 확인해 보세요."
|
|
animationType="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="soraepogu_vibe" data-section="soraepogu_vibe">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"바다 내음", "활기찬 시장", "신선한 해산물", "아름다운 일몰", "여유로운 산책", "낭만적인 분위기", "지역 명소"]}
|
|
title="소래포구의 여유와 함께"
|
|
description="신선한 해산물이 가득한 소래포구의 활기찬 분위기 속에서, 민속밀면의 깊은 맛과 여유로운 시간을 즐겨보세요. 바다 내음과 어우러진 특별한 식사를 경험할 수 있습니다."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
text="찾아오시는 길\n인천광역시 남동구 소래역남로 10, 1층 103·103-1호\n수인분당선 소래포구역 1번 출구에서 657m (도보 약 8분)\n\n영업시간\n매일 11:00 ~ 21:00\n브레이크타임 15:00 ~ 17:00 (매주 월요일 휴무)"
|
|
buttons={[
|
|
{
|
|
text: "전화 예약", href: "tel:000-0000-0000"},
|
|
{
|
|
text: "카카오맵 길찾기", href: "https://kko.to/YOUR_KAKAO_MAP_LINK"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "민속밀면 소래포구점", items: [
|
|
{
|
|
label: "주소: 인천광역시 남동구 소래역남로 10, 1층", href: "#"},
|
|
{
|
|
label: "전화: 000-0000-0000", href: "tel:000-0000-0000"},
|
|
{
|
|
label: "영업시간: 매일 11:00 - 21:00", href: "#"},
|
|
{
|
|
label: "브레이크타임: 15:00 - 17:00", href: "#"},
|
|
{
|
|
label: "정기휴무: 매주 월요일", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "바로가기", items: [
|
|
{
|
|
label: "네이버 지도", href: "https://map.naver.com/v5/search/민속밀면%20소래포구점"},
|
|
{
|
|
label: "카카오맵", href: "https://kko.to/YOUR_KAKAO_MAP_LINK"},
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2024 민속밀면 소래포구점. All rights reserved."
|
|
bottomRightText="Webild로 제작"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|