Add src/app/products/page.tsx
This commit is contained in:
195
src/app/products/page.tsx
Normal file
195
src/app/products/page.tsx
Normal file
@@ -0,0 +1,195 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import ReactLenis from "lenis/react";
|
||||||
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||||
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||||
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||||
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||||
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||||
|
|
||||||
|
export default function ProductsPage() {
|
||||||
|
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: "/" },
|
||||||
|
{ 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: "#drinks"},
|
||||||
|
{
|
||||||
|
text: "デザートを見る", href: "#desserts"},
|
||||||
|
]}
|
||||||
|
mediaItems={[
|
||||||
|
{
|
||||||
|
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: "季節のパフェ"},
|
||||||
|
{
|
||||||
|
imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-various-desserts_23-2148750889.jpg", imageAlt: "和風デザート盛り合わせ"},
|
||||||
|
{
|
||||||
|
imageSrc: "http://img.b2bpic.net/free-photo/iced-green-tea_1388-603.jpg", imageAlt: "特製抹茶ラテ"},
|
||||||
|
{
|
||||||
|
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: "自家製ケーキ"},
|
||||||
|
{
|
||||||
|
imageSrc: "http://img.b2bpic.net/free-photo/hot-coffee-glass-wooden-table_1150-13458.jpg", imageAlt: "ハンドドリップ珈琲"},
|
||||||
|
{
|
||||||
|
imageSrc: "http://img.b2bpic.net/free-photo/delicious-dessert-with-waffles-fruits_23-2148496495.jpg", imageAlt: "季節のワッフル"},
|
||||||
|
]}
|
||||||
|
mediaAnimation="opacity"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="drinks" data-section="drinks">
|
||||||
|
<ProductCardThree
|
||||||
|
animationType="slide-up"
|
||||||
|
textboxLayout="default"
|
||||||
|
gridVariant="three-columns-all-equal-width"
|
||||||
|
useInvertedBackground={true}
|
||||||
|
title="ドリンク"
|
||||||
|
description="厳選された豆で淹れた珈琲や、宇治の抹茶を使った特製ドリンクなど、古都ならではの味をお楽しみください。"
|
||||||
|
products={[
|
||||||
|
{
|
||||||
|
id: "drink-1", name: "特製抹茶ラテ", price: "850円", imageSrc: "http://img.b2bpic.net/free-photo/iced-green-tea_1388-603.jpg", imageAlt: "特製抹茶ラテ"},
|
||||||
|
{
|
||||||
|
id: "drink-2", name: "厳選ハンドドリップ珈琲", price: "750円", imageSrc: "http://img.b2bpic.net/free-photo/hot-coffee-glass-wooden-table_1150-13458.jpg", imageAlt: "厳選ハンドドリップ珈琲"},
|
||||||
|
{
|
||||||
|
id: "drink-3", name: "宇治煎茶", price: "680円", imageSrc: "http://img.b2bpic.net/free-photo/tea-pot-cup_23-2148849764.jpg", imageAlt: "宇治煎茶"},
|
||||||
|
{
|
||||||
|
id: "drink-4", name: "ほうじ茶ラテ", price: "800円", imageSrc: "http://img.b2bpic.net/free-photo/delicious-iced-matcha-latte-white-cup_23-2149506692.jpg", imageAlt: "ほうじ茶ラテ"},
|
||||||
|
{
|
||||||
|
id: "drink-5", name: "水出し珈琲", price: "700円", imageSrc: "http://img.b2bpic.net/free-photo/top-view-hand-holding-delicious-coffee_23-2149301217.jpg", imageAlt: "水出し珈琲"},
|
||||||
|
{
|
||||||
|
id: "drink-6", name: "自家製ジンジャーエール", price: "650円", imageSrc: "http://img.b2bpic.net/free-photo/iced-citrus-drink-cut-lemon-lime-glass_23-2148602283.jpg", imageAlt: "自家製ジンジャーエール"},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="food" data-section="food">
|
||||||
|
<ProductCardThree
|
||||||
|
animationType="slide-up"
|
||||||
|
textboxLayout="default"
|
||||||
|
gridVariant="three-columns-all-equal-width"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
title="フード"
|
||||||
|
description="地元京都の食材を活かした、心温まる軽食をご用意しております。ランチタイムにも最適です。"
|
||||||
|
products={[
|
||||||
|
{
|
||||||
|
id: "food-1", 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: "京の彩りランチ"},
|
||||||
|
{
|
||||||
|
id: "food-2", name: "だし巻き卵サンド", price: "980円", imageSrc: "http://img.b2bpic.net/free-photo/close-up-tasty-fresh-sandwiches-white-background_23-2148509657.jpg", imageAlt: "だし巻き卵サンド"},
|
||||||
|
{
|
||||||
|
id: "food-3", name: "野菜たっぷりキッシュ", price: "880円", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-slice-pie-with-carrots-table_23-2148616238.jpg", imageAlt: "野菜たっぷりキッシュ"},
|
||||||
|
{
|
||||||
|
id: "food-4", name: "季節野菜のポタージュ", price: "600円", imageSrc: "http://img.b2bpic.net/free-photo/top-view-bowl-soup-slice-lemon_23-2148616260.jpg", imageAlt: "季節野菜のポタージュ"},
|
||||||
|
{
|
||||||
|
id: "food-5", name: "和風カレー", price: "1,300円", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-shot-tasty-curry-rice-wooden-table_23-2148616173.jpg", imageAlt: "和風カレー"},
|
||||||
|
{
|
||||||
|
id: "food-6", name: "鶏と野菜の黒酢あん", price: "1,450円", imageSrc: "http://img.b2bpic.net/free-photo/side-view-chicken-leg-fried-potatoes-lemon-spices-black-plate_140725-89497.jpg", imageAlt: "鶏と野菜の黒酢あん"},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="desserts" data-section="desserts">
|
||||||
|
<ProductCardThree
|
||||||
|
animationType="slide-up"
|
||||||
|
textboxLayout="default"
|
||||||
|
gridVariant="three-columns-all-equal-width"
|
||||||
|
useInvertedBackground={true}
|
||||||
|
title="デザート"
|
||||||
|
description="季節のフルーツや和の素材を取り入れた、見た目も美しい甘味の数々。食後のデザートやカフェタイムにどうぞ。"
|
||||||
|
products={[
|
||||||
|
{
|
||||||
|
id: "dessert-1", name: "本わらび餅", price: "980円", imageSrc: "http://img.b2bpic.net/free-photo/close-up-photo-three-fresh-homemade-cookies-white-plate_114579-39318.jpg", imageAlt: "本わらび餅"},
|
||||||
|
{
|
||||||
|
id: "dessert-2", 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: "dessert-3", name: "抹茶と小豆のロールケーキ", price: "700円", imageSrc: "http://img.b2bpic.net/free-photo/delicious-sponge-cake_23-2148750878.jpg", imageAlt: "抹茶と小豆のロールケーキ"},
|
||||||
|
{
|
||||||
|
id: "dessert-4", name: "自家製チーズケーキ", price: "780円", imageSrc: "http://img.b2bpic.net/free-photo/cheesecake-slice_23-2148750873.jpg", imageAlt: "自家製チーズケーキ"},
|
||||||
|
{
|
||||||
|
id: "dessert-5", name: "かりんとう饅頭", price: "350円", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-cake-with-fruit-cup-coffee-dark-background_140725-33923.jpg", imageAlt: "かりんとう饅頭"},
|
||||||
|
{
|
||||||
|
id: "dessert-6", name: "和三盆プリン", price: "650円", imageSrc: "http://img.b2bpic.net/free-photo/tasty-panna-cotta_23-2148750885.jpg", imageAlt: "和三盆プリン"},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</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: "/" },
|
||||||
|
{ 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user