559 lines
20 KiB
TypeScript
559 lines
20 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||
import { Coffee, Home, Sparkles, Users } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="bounce-effect"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="soft"
|
||
contentWidth="medium"
|
||
sizing="mediumLarge"
|
||
background="floatingGradient"
|
||
cardStyle="layered-gradient"
|
||
primaryButtonStyle="primary-glow"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="light"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleFullscreen
|
||
navItems={[
|
||
{
|
||
name: "ホーム",
|
||
id: "#home",
|
||
},
|
||
{
|
||
name: "カフェについて",
|
||
id: "#about",
|
||
},
|
||
{
|
||
name: "メニュー",
|
||
id: "#menu",
|
||
},
|
||
{
|
||
name: "商品",
|
||
id: "#products",
|
||
},
|
||
{
|
||
name: "お客様の声",
|
||
id: "#testimonials",
|
||
},
|
||
{
|
||
name: "よくある質問",
|
||
id: "#faq",
|
||
},
|
||
{
|
||
name: "お問い合わせ",
|
||
id: "#contact",
|
||
},
|
||
]}
|
||
logoSrc="http://img.b2bpic.net/free-photo/japanese-new-year-invitation-mockup_23-2150843258.jpg"
|
||
logoAlt="京の安らぎカフェ ロゴ"
|
||
brandName="京の安らぎカフェ"
|
||
bottomLeftText="古民家で過ごす特別な時間"
|
||
bottomRightText="contact@kyoto-cafe.jp"
|
||
/>
|
||
</div>
|
||
|
||
<div id="home" data-section="home">
|
||
<HeroOverlayTestimonial
|
||
title="古都"
|
||
description="築百年の古民家を改装した空間で、京都の四季を感じるこだわりの一杯と手作り和スイーツを。喧騒を離れ、心ゆくまでお寛ぎください。"
|
||
testimonials={[
|
||
{
|
||
name: "山田 花子",
|
||
handle: "@hanako_kyoto",
|
||
testimonial: "こんなに落ち着くカフェは初めてです。抹茶ラテと和菓子が絶品で、京都に来るたびに立ち寄っています。",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-asian-man-holding-mug-coffee-looking-window-while-talking-phone_1098-18509.jpg",
|
||
imageAlt: "山田 花子",
|
||
},
|
||
{
|
||
name: "田中 太郎",
|
||
handle: "@taro_travel",
|
||
testimonial: "古民家の雰囲気が最高で、時間がゆっくり流れるようでした。ここでしか味わえない体験です。",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-calling-mobile-phone-talking-smartphone-working-with-laptop-doing-homework_1258-189151.jpg",
|
||
imageAlt: "田中 太郎",
|
||
},
|
||
{
|
||
name: "鈴木 美咲",
|
||
handle: "@misaki_gourmet",
|
||
testimonial: "手作りのスイーツはどれも優しくて、心温まる味です。カフェ巡りの締めくくりにぴったり。",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-asian-girl-with-tablet-drinks-coffee-street-walking-city-centre_1258-124748.jpg",
|
||
imageAlt: "鈴木 美咲",
|
||
},
|
||
{
|
||
name: "佐藤 健太",
|
||
handle: "@kenta_explorer",
|
||
testimonial: "美しい庭を眺めながらのコーヒーは格別です。海外からの友人にも自信を持っておすすめできます。",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/happy-asian-senior-female-entrepreneur-laughing-drinking-coffee-holding-laptop-standing-pink_1258-147383.jpg",
|
||
imageAlt: "佐藤 健太",
|
||
},
|
||
{
|
||
name: "高橋 ゆり",
|
||
handle: "@yuri_cafe",
|
||
testimonial: "一人でも入りやすく、読書が捗ります。季節ごとの限定メニューも楽しみの一つです。",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/best-friends-hanging-out-restaurant_23-2149244676.jpg",
|
||
imageAlt: "高橋 ゆり",
|
||
},
|
||
]}
|
||
tag="京都の隠れ家"
|
||
tagIcon={Sparkles}
|
||
buttons={[
|
||
{
|
||
text: "メニューを見る",
|
||
href: "#menu",
|
||
},
|
||
{
|
||
text: "予約する",
|
||
href: "#contact",
|
||
},
|
||
]}
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/smiling-woman-with-hands-face_1187-1190.jpg",
|
||
alt: "笑顔の女性客",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/man-drinking-coffee-near-girlfriend_171337-16562.jpg",
|
||
alt: "コーヒーを飲む男性客",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/girl-reading-book-street_23-2148171368.jpg",
|
||
alt: "読書する女性客",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/portrait-stylish-casual-young-asian-man-wear-leather-jacket-spending-time-cafe-speaking-mobile-phone_627829-1263.jpg",
|
||
alt: "カフェでくつろぐ男性客",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/group-positive-women-trying-out-make-up-accessories_23-2148431582.jpg",
|
||
alt: "友人と談笑する女性客",
|
||
},
|
||
]}
|
||
avatarText="お客様に愛され続けています"
|
||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EzHANzUP4QtowKFSwUx8kq51LN/uploaded-1781174936009-ffyiysyz.png"
|
||
imageAlt="京の安らぎ古民家カフェの美しい店内"
|
||
showDimOverlay={true}
|
||
showBlur={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<AboutMetric
|
||
useInvertedBackground={false}
|
||
title="古都の歴史と香りが息づく場所"
|
||
metrics={[
|
||
{
|
||
icon: Home,
|
||
label: "築年数",
|
||
value: "100年",
|
||
},
|
||
{
|
||
icon: Coffee,
|
||
label: "提供メニュー",
|
||
value: "30種以上",
|
||
},
|
||
{
|
||
icon: Users,
|
||
label: "お客様満足度",
|
||
value: "98%",
|
||
},
|
||
]}
|
||
metricsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="menu" data-section="menu">
|
||
<FeatureCardTwentyEight
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
id: "f1",
|
||
title: "宇治抹茶ラテ",
|
||
subtitle: "厳選された宇治抹茶を使用。豊かな香りと深いコクが特徴。",
|
||
category: "ドリンク",
|
||
value: "¥800",
|
||
},
|
||
{
|
||
id: "f2",
|
||
title: "季節の生菓子",
|
||
subtitle: "職人が一つ一つ手作り。旬の素材を活かした繊細な味わい。",
|
||
category: "和スイーツ",
|
||
value: "¥750",
|
||
},
|
||
{
|
||
id: "f3",
|
||
title: "京のこだわり珈琲",
|
||
subtitle: "自家焙煎の豆を丁寧にハンドドリップ。古民家の空間で香りを愉しむ。",
|
||
category: "ドリンク",
|
||
value: "¥700",
|
||
},
|
||
]}
|
||
title="古都の恵み、五感で味わう至福の逸品"
|
||
description="京の伝統と現代の感性が織りなす、ここでしか味わえない特別なメニューをご用意しております。"
|
||
tag="おすすめ"
|
||
/>
|
||
</div>
|
||
|
||
<div id="products" data-section="products">
|
||
<ProductCardFour
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="uniform-all-items-equal"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "p1",
|
||
name: "宇治抹茶（贈答用）",
|
||
price: "¥3,500",
|
||
variant: "50g",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-blue-cups-with-sake-drink-arrangement_23-2149869772.jpg",
|
||
imageAlt: "宇治抹茶",
|
||
},
|
||
{
|
||
id: "p2",
|
||
name: "古都ブレンド珈琲豆",
|
||
price: "¥2,800",
|
||
variant: "200g",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/high-view-coffee-beans-burlap-sack_23-2148255074.jpg",
|
||
imageAlt: "古都ブレンド珈琲豆",
|
||
},
|
||
{
|
||
id: "p3",
|
||
name: "京焼マグカップ",
|
||
price: "¥2,200",
|
||
variant: "一点物",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-valentines-day-presents-with-ring-biscuits-dark-brown-background-love-couple-color-gift-feeling-marriage-holiday_140725-157993.jpg",
|
||
imageAlt: "京焼マグカップ",
|
||
},
|
||
{
|
||
id: "p4",
|
||
name: "季節の和菓子詰め合わせ",
|
||
price: "¥4,000",
|
||
variant: "6個入り",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-furoshiki-packages-arrangement_23-2150274450.jpg",
|
||
imageAlt: "季節の和菓子詰め合わせ",
|
||
},
|
||
{
|
||
id: "p5",
|
||
name: "手ぬぐい（オリジナル柄）",
|
||
price: "¥1,500",
|
||
variant: "35cm x 90cm",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/arrangement-antiques-market-objects_23-2148950910.jpg",
|
||
imageAlt: "手ぬぐい",
|
||
},
|
||
{
|
||
id: "p6",
|
||
name: "抹茶碗セット",
|
||
price: "¥6,000",
|
||
variant: "茶筅・茶杓付",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-matcha-tea-powder-with-bamboo-whisk_23-2148378887.jpg",
|
||
imageAlt: "抹茶碗セット",
|
||
},
|
||
]}
|
||
title="ご自宅でも京の安らぎを"
|
||
description="古民家カフェで出会った感動を、ご自宅でもお楽しみいただけるこだわりの品々を販売しております。"
|
||
tag="オンラインストア"
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardSixteen
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{
|
||
id: "t1",
|
||
name: "中村 恵",
|
||
role: "会社員",
|
||
company: "旅行愛好家",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/hipster-bearded-man-reading-book-cafe_1150-3956.jpg",
|
||
imageAlt: "中村 恵",
|
||
},
|
||
{
|
||
id: "t2",
|
||
name: "小林 大輔",
|
||
role: "フリーランス",
|
||
company: "デザイナー",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-woman-with-bubble-tea_23-2150315121.jpg",
|
||
imageAlt: "小林 大輔",
|
||
},
|
||
{
|
||
id: "t3",
|
||
name: "加藤 咲",
|
||
role: "学生",
|
||
company: "京都大学",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/people-hangout-together-coffee-shop_53876-26322.jpg",
|
||
imageAlt: "加藤 咲",
|
||
},
|
||
{
|
||
id: "t4",
|
||
name: "山本 拓也",
|
||
role: "写真家",
|
||
company: "フリーランス",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-women-with-bubble-tea_23-2150314998.jpg",
|
||
imageAlt: "山本 拓也",
|
||
},
|
||
{
|
||
id: "t5",
|
||
name: "井上 陽子",
|
||
role: "主婦",
|
||
company: "地域住民",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/short-haired-business-woman-concept_23-2148694107.jpg",
|
||
imageAlt: "井上 陽子",
|
||
},
|
||
]}
|
||
kpiItems={[
|
||
{
|
||
value: "100+",
|
||
label: "年間来客数",
|
||
},
|
||
{
|
||
value: "5つ星",
|
||
label: "平均評価",
|
||
},
|
||
{
|
||
value: "20+",
|
||
label: "メディア掲載",
|
||
},
|
||
]}
|
||
title="お客様からの温かいお声"
|
||
description="私たちのカフェを訪れたお客様からの、心温まるフィードバックをご紹介します。"
|
||
/>
|
||
</div>
|
||
|
||
<div id="metrics" data-section="metrics">
|
||
<MetricCardFourteen
|
||
useInvertedBackground={false}
|
||
title="私たちのこだわり"
|
||
tag="カフェの数字"
|
||
metrics={[
|
||
{
|
||
id: "m1",
|
||
value: "100%",
|
||
description: "自家焙煎コーヒー豆",
|
||
},
|
||
{
|
||
id: "m2",
|
||
value: "30+",
|
||
description: "厳選茶葉の種類",
|
||
},
|
||
{
|
||
id: "m3",
|
||
value: "5000+",
|
||
description: "月間来店者数",
|
||
},
|
||
]}
|
||
metricsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="blog" data-section="blog">
|
||
<BlogCardOne
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
title="京の文化とカフェの日常"
|
||
description="京都の魅力やカフェの裏側、季節ごとのイベント情報などをブログで発信しています。"
|
||
tag="ブログ"
|
||
blogs={[
|
||
{
|
||
id: "b1",
|
||
category: "京都散策",
|
||
title: "紅葉が美しい秋の京都を歩く",
|
||
excerpt: "カフェ周辺の紅葉スポットをご紹介。散策の後は温かい珈琲で一息つきませんか？",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/colorful-autumn-leaves-walk-way-park-kyoto-japan-photographer-take-photo-autumn_335224-61.jpg",
|
||
imageAlt: "紅葉が美しい秋の京都",
|
||
authorName: "京乃 珈琲",
|
||
authorAvatar: "http://img.b2bpic.net/free-photo/coffee-business-owner-concept-portrait-happy-young-bearded-caucasian-barista-apron-with-confident-looking-smiling-camera-coffee-shop-counter_1258-103925.jpg",
|
||
date: "2023年11月15日",
|
||
},
|
||
{
|
||
id: "b2",
|
||
category: "イベント",
|
||
title: "新茶の季節、抹茶体験イベント開催！",
|
||
excerpt: "採れたての新茶で抹茶を点てる体験イベントを開催します。ご予約受付中。",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-hand-painting-ceramics-plate-with-paintbrush-wooden-desk_23-2148155136.jpg",
|
||
imageAlt: "新茶の季節",
|
||
authorName: "京乃 甘味",
|
||
authorAvatar: "http://img.b2bpic.net/free-photo/portrait-man-practicing-his-profession-celebrate-international-labour-day_23-2151230059.jpg",
|
||
date: "2024年5月10日",
|
||
},
|
||
{
|
||
id: "b3",
|
||
category: "カフェの日常",
|
||
title: "古民家カフェの一日、職人の手仕事",
|
||
excerpt: "朝の仕込みから閉店まで。古民家カフェの日常と、職人のこだわりをご紹介。",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-white-peach-tree-blossom_23-2148933905.jpg",
|
||
imageAlt: "カフェの日常",
|
||
authorName: "京乃 職人",
|
||
authorAvatar: "http://img.b2bpic.net/free-photo/male-chef-with-apron-cooking-pasta_23-2148763166.jpg",
|
||
date: "2024年3月20日",
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqSplitText
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{
|
||
id: "q1",
|
||
title: "予約は必要ですか？",
|
||
content: "はい、特に週末や祝日は混み合いますので、事前のご予約をおすすめしております。お電話またはウェブサイトのお問い合わせフォームからご予約いただけます。",
|
||
},
|
||
{
|
||
id: "q2",
|
||
title: "駐車場はありますか？",
|
||
content: "申し訳ございませんが、専用の駐車場はございません。お近くのコインパーキングをご利用いただくか、公共交通機関をご利用ください。",
|
||
},
|
||
{
|
||
id: "q3",
|
||
title: "アレルギー対応は可能ですか？",
|
||
content: "可能な限り対応させていただきますので、ご予約時またはご注文時にスタッフまでお気軽にお申し付けください。一部対応できないメニューもございます。",
|
||
},
|
||
{
|
||
id: "q4",
|
||
title: "Wi-Fiは利用できますか？",
|
||
content: "はい、店内で無料Wi-Fiをご利用いただけます。パスワードは店内に掲示しておりますので、ご確認ください。",
|
||
},
|
||
]}
|
||
sideTitle="よくある質問"
|
||
sideDescription="お客様からよくいただくご質問とその回答をまとめました。ご不明な点がございましたら、お気軽にお問い合わせください。"
|
||
faqsAnimation="slide-up"
|
||
textPosition="left"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplitForm
|
||
useInvertedBackground={false}
|
||
title="お問い合わせ・ご予約"
|
||
description="ご不明な点やご予約に関するご相談がございましたら、以下のフォームよりお気軽にお問い合わせください。折り返しご連絡させていただきます。"
|
||
inputs={[
|
||
{
|
||
name: "name",
|
||
type: "text",
|
||
placeholder: "お名前",
|
||
required: true,
|
||
},
|
||
{
|
||
name: "email",
|
||
type: "email",
|
||
placeholder: "メールアドレス",
|
||
required: true,
|
||
},
|
||
]}
|
||
textarea={{
|
||
name: "message",
|
||
placeholder: "お問い合わせ内容",
|
||
rows: 5,
|
||
required: true,
|
||
}}
|
||
imageSrc="http://img.b2bpic.net/free-photo/traditional-house-architecture_23-2151050961.jpg"
|
||
imageAlt="古民家カフェの入り口"
|
||
mediaAnimation="slide-up"
|
||
mediaPosition="right"
|
||
buttonText="送信する"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBaseReveal
|
||
logoSrc="http://img.b2bpic.net/free-photo/japanese-new-year-invitation-mockup_23-2150843258.jpg"
|
||
logoAlt="京の安らぎカフェ ロゴ"
|
||
logoText="京の安らぎカフェ"
|
||
columns={[
|
||
{
|
||
title: "探す",
|
||
items: [
|
||
{
|
||
label: "ホーム",
|
||
href: "#home",
|
||
},
|
||
{
|
||
label: "カフェについて",
|
||
href: "#about",
|
||
},
|
||
{
|
||
label: "メニュー",
|
||
href: "#menu",
|
||
},
|
||
{
|
||
label: "商品",
|
||
href: "#products",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "ヘルプ",
|
||
items: [
|
||
{
|
||
label: "お問い合わせ",
|
||
href: "#contact",
|
||
},
|
||
{
|
||
label: "よくある質問",
|
||
href: "#faq",
|
||
},
|
||
{
|
||
label: "ブログ",
|
||
href: "#blog",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "その他",
|
||
items: [
|
||
{
|
||
label: "プライバシーポリシー",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "利用規約",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "サイトマップ",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
copyrightText="© 2024 京の安らぎカフェ. All rights reserved."
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|