Add src/app/gallery/page.tsx
This commit is contained in:
173
src/app/gallery/page.tsx
Normal file
173
src/app/gallery/page.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
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';
|
||||
|
||||
export default function GalleryPage() {
|
||||
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: "gallery"},
|
||||
{
|
||||
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: "#gallery-grid"},
|
||||
]}
|
||||
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/side-close-up-view-cupcake-strawberries-cupcake-plate-chocolate-cream-candies-strawberries-bowls-cup-herbal-tea-dark-table_140725-117161.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/house-entrance-japanese-culture-concept_23-2149301146.jpg", imageAlt: "古民家の入り口"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-autumnal-landscape_23-2151866584.jpg", imageAlt: "美しい庭園"},
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery-grid" data-section="gallery-grid">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "ext1", name: "趣ある外観", price: "外観", imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-japanese-culture-concept_23-2149301146.jpg", imageAlt: "古民家カフェ京の外観"},
|
||||
{
|
||||
id: "ext2", name: "庭園とエントランス", price: "外観", imageSrc: "http://img.b2bpic.net/free-photo/bicycle-parked-outside-shop_53876-23379.jpg", imageAlt: "カフェの入り口と自転車"},
|
||||
{
|
||||
id: "ext3", name: "夜の古民家", price: "外観", imageSrc: "http://img.b2bpic.net/free-photo/side-view-restaurant-table-setup-with-wine-glass_23-2148772099.jpg?_wi=1", imageAlt: "夜のカフェ外観"},
|
||||
{
|
||||
id: "int1", name: "落ち着いた店内", price: "店内", imageSrc: "http://img.b2bpic.net/free-photo/front-view-japanese-temple-structure_23-2148809579.jpg", imageAlt: "カフェの店内"},
|
||||
{
|
||||
id: "int2", name: "カウンター席", price: "店内", imageSrc: "http://img.b2bpic.net/free-photo/top-view-beautiful-decorated-restaurant-tables_23-2148772124.jpg?_wi=1", imageAlt: "カウンター席"},
|
||||
{
|
||||
id: "int3", name: "窓からの眺め", price: "店内", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-autumnal-landscape_23-2151866584.jpg", imageAlt: "窓から見える庭園"},
|
||||
{
|
||||
id: "prod1", name: "特製抹茶ラテ", price: "メニュー", imageSrc: "http://img.b2bpic.net/free-photo/iced-green-tea_1388-603.jpg", imageAlt: "特製抹茶ラテ"},
|
||||
{
|
||||
id: "prod2", name: "季節の甘味", price: "メニュー", 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: "季節のケーキ"},
|
||||
{
|
||||
id: "prod3", name: "ハンドドリップ珈琲", price: "メニュー", imageSrc: "http://img.b2bpic.net/free-photo/hot-coffee-glass-wooden-table_1150-13458.jpg", imageAlt: "厳選珈琲"},
|
||||
{
|
||||
id: "use1", name: "読書を楽しむ", price: "風景", 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: "カフェで読書する人"},
|
||||
{
|
||||
id: "use2", name: "友人と談笑", price: "風景", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-taking-food-photos_23-2149294502.jpg", imageAlt: "友人と話す女性"},
|
||||
{
|
||||
id: "use3", name: "お茶のひととき", price: "風景", imageSrc: "http://img.b2bpic.net/free-photo/man-drinking-matcha-tea_23-2150163309.jpg", imageAlt: "抹茶を楽しむ男性"},
|
||||
]}
|
||||
title="古民家カフェ京 写真ギャラリー"
|
||||
description="古民家カフェ京の美しい瞬間を切り取った写真ギャラリー。京都の風情ある空間と、こだわりのメニューを写真でお楽しみください。各カテゴリから様々な表情をご覧ください。"
|
||||
/>
|
||||
</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"},
|
||||
{
|
||||
label: "ギャラリー", href: "/gallery"},
|
||||
],
|
||||
},
|
||||
{
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user