Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #1.
This commit is contained in:
228
src/app/hair-salon/page.tsx
Normal file
228
src/app/hair-salon/page.tsx
Normal file
@@ -0,0 +1,228 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
||||
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import { Heart, Star, Users } from "lucide-react";
|
||||
|
||||
export default function HairSalonPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="none"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "ホーム", id: "hero"},
|
||||
{
|
||||
name: "メニュー", id: "menu"},
|
||||
{
|
||||
name: "口コミ", id: "testimonials"},
|
||||
{
|
||||
name: "スタイリスト", id: "stylists"},
|
||||
{
|
||||
name: "ギャラリー", id: "gallery"},
|
||||
{
|
||||
name: "店舗情報", id: "store-info"},
|
||||
]}
|
||||
brandName="Aloha Hair Paradise"
|
||||
button={{
|
||||
text: "今すぐ予約", href: "#store-info"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "radial-gradient"}}
|
||||
title="Aloha Hair Paradise"
|
||||
description="ハワイの楽園のような空間で、心と髪を癒す至福のひとときを。あなたの魅力を最大限に引き出す、特別なスタイルをご提案します。"
|
||||
buttons={[
|
||||
{
|
||||
text: "今すぐ予約する", href: "#store-info"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-beautiful-island-beach_1203-1463.jpg"
|
||||
imageAlt="ハワイの美しいビーチを背景にしたヘアサロンのイメージ"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="menu" data-section="menu">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "tropical-cut-color", title: "トロピカルカット＋カラー", price: "¥9,800〜", period: "（所要時間：約120分）", features: [
|
||||
"似合わせカット", "サンキスドカラー", "シャンプー・ブロー込"],
|
||||
button: {
|
||||
text: "予約する", href: "#store-info"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-doing-hair-customer-hairdressing-salon_23-2150992383.jpg", imageAlt: "トロピカルカラーを施術するスタイリスト"},
|
||||
{
|
||||
id: "aloha-perm-treatment", title: "アロハウェーブパーマ＋集中トリートメント", price: "¥12,000〜", period: "（所要時間：約150分）", features: [
|
||||
"ダメージレスアロハウェーブ", "海藻ミネラル集中トリートメント", "シャンプー・ブロー込"],
|
||||
button: {
|
||||
text: "予約する", href: "#store-info"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-brunette-model-after-make-up-hairstyle-studio-shot-fashion-beauty_186202-6240.jpg", imageAlt: "美しいアロハウェーブパーマスタイル"},
|
||||
]}
|
||||
title="ハワイアンスパ＆メニュー"
|
||||
description="当サロン自慢のトロピカルなメニューで、日常を忘れさせる至福の体験を。"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "アロハ愛", role: "ハワイ在住", company: "リピーター", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-sofa_329181-4317.jpg"},
|
||||
{
|
||||
id: "2", name: "海のそよ風", role: "旅行者", company: "初めての体験", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-happy-handsome-redhead-guy-with-bristle-touching-shirt-with-self-assured-uplifted-expression-smiling-broadly_176420-27515.jpg"},
|
||||
{
|
||||
id: "3", name: "太陽の光", role: "地元住民", company: "いつもお世話になってます", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blissful-blonde-girl-straw-hat-playfully-posing-forest-outdoor-shot-gorgeous-lady-looking-shoulder-nature_197531-10439.jpg"},
|
||||
{
|
||||
id: "4", name: "南国の夢", role: "観光客", company: "最高の思い出", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-pointing-ton-his-back-with-copy-space_23-2148422270.jpg"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
id: "kpi-1", icon: Star,
|
||||
title: "平均評価", value: "4.9"},
|
||||
{
|
||||
id: "kpi-2", icon: Users,
|
||||
title: "Googleレビュー", value: "250件以上"},
|
||||
{
|
||||
id: "kpi-3", icon: Heart,
|
||||
title: "お客様満足度", value: "最高"},
|
||||
]}
|
||||
title="お客様の声 - アロハ体験"
|
||||
description="ご来店いただいたお客様からの温かいアロハ体験の声をぜひご覧ください。"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="stylists" data-section="stylists">
|
||||
<TeamCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
members={[
|
||||
{
|
||||
id: "1", name: "カイルア 美咲", role: "アロハスタイリスト", imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-woman-s-hairdresser-stylish-haircut-hair-salon_273609-1738.jpg", imageAlt: "笑顔のカイルア美咲アロハスタイリスト"},
|
||||
{
|
||||
id: "2", name: "マウイ 拓也", role: "ビーチウェーブマスター", imageSrc: "http://img.b2bpic.net/free-photo/young-man-with-tattoo-barber-shop_23-2148113110.jpg", imageAlt: "熱心なマウイ拓也ビーチウェーブマスター"},
|
||||
{
|
||||
id: "3", name: "オアフ 麗奈", role: "トロピカルカラー担当", imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-female-hairdresser-posing-camera_23-2148113063.jpg", imageAlt: "親しみやすいオアフ麗奈トロピカルカラー担当"},
|
||||
]}
|
||||
title="アロハスピリットのスタイリスト"
|
||||
description="ハワイの風を感じるアロハスピリットを持った経験豊富なスタイリストが、あなたにぴったりのスタイルを創造します。"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "ビーチウェーブスタイル", author: "サマースタイル", description: "ハワイのビーチで自然に作られるような、柔らかく動きのあるウェーブスタイル。", tags: [
|
||||
"#ビーチウェーブ", "#ハワイアン"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-beautiful-tropical-flowers-hair_23-2147970428.jpg", imageAlt: "ハワイのビーチウェーブスタイル"},
|
||||
{
|
||||
id: "2", title: "サンキスドカラー", author: "トロピカルカラー", description: "太陽の光を浴びたような、自然で透明感のあるハイライトカラー。", tags: [
|
||||
"#サンキスド", "#ハイライト"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-s-hair-braided-hairstyle_23-2148113054.jpg", imageAlt: "サンキスドトロピカルカラー"},
|
||||
{
|
||||
id: "3", title: "メンズアイランドスタイル", author: "メンズスタイル", description: "ハワイの風に揺れるような、爽やかで動きのあるメンズショートスタイル。", tags: [
|
||||
"#メンズ", "#アイランド"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-man-barbershop_23-2148113061.jpg", imageAlt: "ハワイのメンズアイランドスタイル"},
|
||||
]}
|
||||
title="ハワイアンスタイルギャラリー"
|
||||
description="当サロンが提案する、ハワイの自然と美しさにインスパイアされたヘアスタイルコレクションです。"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="store-info" data-section="store-info">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-1", title: "所在地", content: "〒96799 ハワイ州ホノルル市 カラカウア通り 2050 (Waikiki Beach Walk)"},
|
||||
{
|
||||
id: "faq-2", title: "営業時間", content: "月〜金：09:00〜18:00\n土日祝：10:00〜17:00\n定休日：火曜日"},
|
||||
{
|
||||
id: "faq-3", title: "Googleレビュー", content: "平均評価 4.8 / 5.0（250件以上のユーザー写真と口コミ）"},
|
||||
{
|
||||
id: "faq-4", title: "アクセス", content: "ワイキキビーチウォーク内。ビーチから徒歩2分。"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-barber-shop-interior-design_23-2148866341.jpg"
|
||||
imageAlt="ハワイのヘアサロン外観またはGoogleマップのスクリーンショット"
|
||||
mediaAnimation="slide-up"
|
||||
title="Aloha Hair Paradise 店舗情報・アクセス"
|
||||
description="ハワイの美しいロケーションにある当サロンへのアクセス方法と営業時間をご確認ください。"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Aloha Hair Paradise"
|
||||
columns={[
|
||||
{
|
||||
title: "サイトマップ", items: [
|
||||
{
|
||||
label: "ホーム", href: "#hero"},
|
||||
{
|
||||
label: "メニュー", href: "#menu"},
|
||||
{
|
||||
label: "口コミ", href: "#testimonials"},
|
||||
{
|
||||
label: "スタイリスト", href: "#stylists"},
|
||||
{
|
||||
label: "ギャラリー", href: "#gallery"},
|
||||
{
|
||||
label: "店舗情報", href: "#store-info"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "その他", items: [
|
||||
{
|
||||
label: "プライバシーポリシー", href: "#"},
|
||||
{
|
||||
label: "採用情報", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 Aloha Hair Paradise All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user