401 lines
15 KiB
TypeScript
401 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "ホーム",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "当店について",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "メニュー",
|
|
id: "features",
|
|
},
|
|
{
|
|
name: "商品",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "お客様の声",
|
|
id: "testimonials",
|
|
},
|
|
{
|
|
name: "FAQ",
|
|
id: "faq",
|
|
},
|
|
{
|
|
name: "お問い合わせ",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="古民家カフェ古都"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
title="古都の隠れ家で、特別なひとときを"
|
|
description="京都の風情ある古民家を改装したカフェ。こだわりの珈琲と季節の甘味で、心安らぐ時間をお過ごしください。"
|
|
buttons={[
|
|
{
|
|
text: "メニューを見る",
|
|
href: "#features",
|
|
},
|
|
{
|
|
text: "予約する",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-taking-food-photos_23-2149294502.jpg",
|
|
imageAlt: "古民家カフェの美しい店内",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-japanese-temple-structure_23-2148809579.jpg",
|
|
imageAlt: "庭園を望む窓際の席",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-japanese-culture-concept_23-2149301146.jpg",
|
|
imageAlt: "こだわりのハンドドリップ珈琲",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-autumnal-landscape_23-2151866584.jpg",
|
|
imageAlt: "季節の甘味と和菓子",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/full-length-shot-girl-jeans-sweater-walking-garden-with-glass-coffee-teen-beret-enjoying-sunny-weather-drinking-tea_197531-17873.jpg",
|
|
imageAlt: "趣のあるカウンター席",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-close-up-view-cupcake-strawberries-cupcake-plate-chocolate-cream-candies-strawberries-bowls-cup-herbal-tea-dark-table_140725-117161.jpg",
|
|
imageAlt: "夕暮れ時のカフェ外観",
|
|
},
|
|
]}
|
|
mediaAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
title="古民家カフェ京について"
|
|
description="築100年以上の京町家を大切に受け継ぎ、現代の感性と融合させた空間で、訪れる皆様をお迎えします。歴史を感じる梁や土壁、手入れされた坪庭が織りなす非日常の空間で、日常の喧騒を忘れ、ゆったりとした時間をお楽しみください。"
|
|
bulletPoints={[
|
|
{
|
|
title: "京都の歴史と文化",
|
|
description: "由緒ある京町家の趣をそのままに、落ち着いた空間を演出しています。",
|
|
},
|
|
{
|
|
title: "厳選された素材",
|
|
description: "地元の新鮮な食材と、熟練の職人が作るこだわりの逸品を提供しています。",
|
|
},
|
|
{
|
|
title: "心温まるおもてなし",
|
|
description: "お客様一人ひとりに寄り添い、記憶に残る体験をお届けします。",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/bicycle-parked-outside-shop_53876-23379.jpg"
|
|
imageAlt="古民家カフェ京の入り口"
|
|
mediaAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyOne
|
|
useInvertedBackground={false}
|
|
title="こだわりのメニュー"
|
|
description="季節の移ろいを感じる食材を厳選し、一つ一つ丁寧に手作りしています。心と体が喜ぶ、古民家カフェ京ならではの味をご堪能ください。"
|
|
accordionItems={[
|
|
{
|
|
id: "coffee",
|
|
title: "厳選珈琲",
|
|
content: "世界各地から厳選した豆を丁寧にハンドドリップで淹れています。香り高く、深い味わいをお楽しみください。",
|
|
},
|
|
{
|
|
id: "tea",
|
|
title: "宇治の日本茶",
|
|
content: "京都・宇治の老舗茶舗から仕入れた上質な日本茶をご用意。お抹茶、煎茶、ほうじ茶など、様々な風味をお楽しみいただけます。",
|
|
},
|
|
{
|
|
id: "sweets",
|
|
title: "季節の甘味",
|
|
content: "旬のフルーツや和の素材を活かした、見た目も美しい季節限定の甘味。職人の技が光る逸品です。",
|
|
},
|
|
{
|
|
id: "lunch",
|
|
title: "軽食",
|
|
content: "地元野菜をふんだんに使ったヘルシーなサンドイッチや、京風だし巻き卵など、軽食も充実しています。",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/top-view-delicious-honey-cake-with-candies-honey-peaches-dark-background-cake-tea-candy-honey_140725-22560.jpg"
|
|
imageAlt="彩り豊かな和菓子と抹茶"
|
|
mediaAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "matcha-latte",
|
|
name: "特製抹茶ラテ",
|
|
price: "850円",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/iced-green-tea_1388-603.jpg",
|
|
imageAlt: "特製抹茶ラテ",
|
|
},
|
|
{
|
|
id: "warabi-mochi",
|
|
name: "本わらび餅",
|
|
price: "980円",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-photo-three-fresh-homemade-cookies-white-plate_114579-39318.jpg",
|
|
imageAlt: "本わらび餅",
|
|
},
|
|
{
|
|
id: "seasonal-parfait",
|
|
name: "季節の彩りパフェ",
|
|
price: "1,200円",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-tasty-crispbread-with-ripe-blueberries-strawberries-nuts-with-sour-cream-ceramic-plate_141793-6981.jpg",
|
|
imageAlt: "季節の彩りパフェ",
|
|
},
|
|
{
|
|
id: "hand-drip",
|
|
name: "厳選ハンドドリップ珈琲",
|
|
price: "750円",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hot-coffee-glass-wooden-table_1150-13458.jpg",
|
|
imageAlt: "厳選ハンドドリップ珈琲",
|
|
},
|
|
{
|
|
id: "uji-sencha",
|
|
name: "宇治煎茶セット",
|
|
price: "900円",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/chinese-tea-ceremony-park-tea-drinking-open-air_613910-7299.jpg",
|
|
imageAlt: "宇治煎茶セット",
|
|
},
|
|
{
|
|
id: "kyoto-lunch",
|
|
name: "京の彩りランチ",
|
|
price: "1,500円",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-fresh-vegetable-salad-with-lemon-slices-green-salad-black_140725-104186.jpg",
|
|
imageAlt: "京の彩りランチ",
|
|
},
|
|
]}
|
|
title="おすすめの逸品"
|
|
description="古民家カフェ京が自信を持って提供する、特別なメニューをご紹介します。"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "佐藤 悠",
|
|
handle: "@yusato_kyoto",
|
|
testimonial: "京町家の雰囲気が素晴らしく、心が落ち着きます。抹茶ラテも絶品で、京都に来たら必ず立ち寄るお気に入りのお店です。",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-showing-double-thumbs-up-blouse-cardigan-looking-merry-front-view_176474-109580.jpg",
|
|
imageAlt: "佐藤 悠さんの笑顔",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "田中 健太",
|
|
handle: "@kentat_gourmet",
|
|
testimonial: "本わらび餅の食感と上品な甘さに感動しました。静かな庭園を眺めながらいただく珈琲は格別。時間を忘れて過ごせます。",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-drinking-teat-while-relaxing-sofa-living-room_637285-5901.jpg",
|
|
imageAlt: "田中 健太さんの表情",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "鈴木 綾香",
|
|
handle: "@ayaka_trip",
|
|
testimonial: "季節ごとに変わるパフェが楽しみで、毎回来ています！見た目も美しく、味も最高。友人にも自信を持っておすすめできるカフェです。",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-drinking-matcha-tea_23-2150163309.jpg",
|
|
imageAlt: "鈴木 綾香さんの笑顔",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "山本 大地",
|
|
handle: "@daichi_travel",
|
|
testimonial: "こんなに素敵なカフェが京都にあったとは！読書をするのに最適な落ち着いた空間で、ついつい長居してしまいます。軽食も美味しいです。",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-family-celebrating-4th-july-outside_23-2149383082.jpg",
|
|
imageAlt: "山本 大地さんの笑顔",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "高橋 恵子",
|
|
handle: "@keiko_lifestyle",
|
|
testimonial: "店員さんの温かい接客に癒されます。古民家の趣とモダンな要素が融合した空間デザインも魅力的。非日常を味わえる場所です。",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-senior-man-holding-coffee-cup-talking-smart-phone_23-2147859789.jpg",
|
|
imageAlt: "高橋 恵子さんの笑顔",
|
|
},
|
|
]}
|
|
title="お客様の声"
|
|
description="古民家カフェ京をご利用いただいたお客様からの温かいメッセージをご紹介します。"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "faq-1",
|
|
title: "営業時間を教えてください。",
|
|
content: "営業時間は午前10時から午後6時までです。ラストオーダーは午後5時30分となります。",
|
|
},
|
|
{
|
|
id: "faq-2",
|
|
title: "予約は可能ですか？",
|
|
content: "お席のご予約は承っておりません。ご来店いただいたお客様から順にご案内しております。貸切利用についてはお問い合わせください。",
|
|
},
|
|
{
|
|
id: "faq-3",
|
|
title: "駐車場はありますか？",
|
|
content: "専用の駐車場はございませんが、近隣にコインパーキングがございます。公共交通機関のご利用をお勧めしております。",
|
|
},
|
|
{
|
|
id: "faq-4",
|
|
title: "アレルギー対応は可能ですか？",
|
|
content: "アレルギーをお持ちのお客様は、ご注文の際にお気軽にお申し付けください。可能な範囲で対応させていただきます。",
|
|
},
|
|
{
|
|
id: "faq-5",
|
|
title: "テイクアウトはできますか？",
|
|
content: "一部のドリンクと焼き菓子はテイクアウト可能です。詳細はお気軽にスタッフまでお尋ねください。",
|
|
},
|
|
]}
|
|
sideTitle="よくある質問"
|
|
sideDescription="ご来店前に、お客様からよくいただく質問とその回答をご確認ください。"
|
|
faqsAnimation="slide-up"
|
|
textPosition="left"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "radial-gradient",
|
|
}}
|
|
tag="お問い合わせ"
|
|
title="古都の隠れ家で、癒しの時間を。"
|
|
description="皆様のご来店を心よりお待ちしております。特別な体験を古民家カフェ京で。"
|
|
buttons={[
|
|
{
|
|
text: "アクセスマップ",
|
|
href: "https://maps.app.goo.gl/example",
|
|
},
|
|
{
|
|
text: "お問い合わせ",
|
|
href: "mailto:info@kominkacafe-kyo.com",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="古民家カフェ京"
|
|
columns={[
|
|
{
|
|
title: "ナビゲーション",
|
|
items: [
|
|
{
|
|
label: "ホーム",
|
|
href: "#hero",
|
|
},
|
|
{
|
|
label: "当店について",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "メニュー",
|
|
href: "#features",
|
|
},
|
|
{
|
|
label: "商品",
|
|
href: "#products",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "サポート",
|
|
items: [
|
|
{
|
|
label: "お客様の声",
|
|
href: "#testimonials",
|
|
},
|
|
{
|
|
label: "FAQ",
|
|
href: "#faq",
|
|
},
|
|
{
|
|
label: "お問い合わせ",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "その他",
|
|
items: [
|
|
{
|
|
label: "プライバシーポリシー",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "利用規約",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 古民家カフェ京 All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|