15 Commits

Author SHA1 Message Date
e46eb62f49 Merge version_2 into main
Merge version_2 into main
2026-03-26 05:47:37 +00:00
a53e97adc5 Update src/app/page.tsx 2026-03-26 05:47:34 +00:00
7faccadc00 Merge version_2 into main
Merge version_2 into main
2026-03-26 05:47:14 +00:00
7366752ad4 Update src/app/page.tsx 2026-03-26 05:47:11 +00:00
d96e118af7 Update src/app/hair-salon/page.tsx 2026-03-26 05:47:10 +00:00
7e7b04f1f4 Merge version_2 into main
Merge version_2 into main
2026-03-26 05:46:33 +00:00
d84e3a4d13 Update src/app/page.tsx 2026-03-26 05:46:27 +00:00
588238a034 Update src/app/hair-salon/page.tsx 2026-03-26 05:46:27 +00:00
cc23756877 Merge version_2 into main
Merge version_2 into main
2026-03-26 05:45:56 +00:00
9b96ff79fb Update src/app/page.tsx 2026-03-26 05:45:53 +00:00
1eef319311 Update src/app/hair-salon/page.tsx 2026-03-26 05:45:53 +00:00
808e622d8d Merge version_2 into main
Merge version_2 into main
2026-03-26 05:44:46 +00:00
6ba2d27d6d Update src/app/hair-salon/page.tsx 2026-03-26 05:44:43 +00:00
ff73d973e7 Merge version_2 into main
Merge version_2 into main
2026-03-26 05:44:13 +00:00
d63e4ecb55 Add src/app/hair-salon/page.tsx 2026-03-26 05:44:10 +00:00
2 changed files with 271 additions and 334 deletions

225
src/app/hair-salon/page.tsx Normal file
View File

@@ -0,0 +1,225 @@
"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={[
{
value: "4.9", label: "平均評価"},
{
value: "250件以上", label: "口コミ数"},
{
value: "最高", label: "サービス評価"},
]}
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.0250件以上のユーザー写真と口コミ"},
{
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>
);
}

View File

@@ -2,17 +2,11 @@
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";
import { Star, Users, Heart } from "lucide-react";
export default function LandingPage() {
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
@@ -27,335 +21,53 @@ export default function LandingPage() {
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="Elegance Hair Salon"
button={{
text: "今すぐ予約",
href: "#store-info",
}}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
brandName="My Brand"
button={{ text: "Get Started", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboard
background={{
variant: "radial-gradient",
}}
title="Elegance Hair Salon"
description="あなたの魅力を引き出す、オーダーメイドのスタイルを。日常に彩りを加える、上質なヘア体験をお届けします。"
buttons={[
{
text: "今すぐ予約する",
href: "#store-info",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/waiting-room-with-chairs-blurred_1203-1401.jpg"
imageAlt="モダンで落ち着いた雰囲気のヘアサロン店内"
mediaAnimation="slide-up"
/>
</div>
<div id="hero" data-section="hero">
{/* Placeholder for Hero section */}
<h1 style={{ textAlign: 'center', padding: '100px 0' }}>Welcome to Our Service!</h1>
</div>
<div id="menu" data-section="menu">
<PricingCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
plans={[
{
id: "cut-color",
title: "カット+カラー",
price: "¥8,800〜",
period: "所要時間約120分",
features: [
"似合わせカット",
"トレンドカラー",
"シャンプー・ブロー込",
],
button: {
text: "予約する",
href: "#store-info",
},
imageSrc: "http://img.b2bpic.net/free-photo/stylist-curling-hair-young-woman_23-2148113049.jpg",
imageAlt: "スタイリッシュなヘアカラー",
videoAriaLabel: "ヘアカットとカラーリングの施術",
},
{
id: "perm-treatment",
title: "パーマ+トリートメント",
price: "¥11,000〜",
period: "所要時間約150分",
features: [
"ダメージレスパーマ",
"高濃度補修トリートメント",
"シャンプー・ブロー込",
],
button: {
text: "予約する",
href: "#store-info",
},
imageSrc: "http://img.b2bpic.net/free-photo/side-view-people-giving-themselves-scalp-massage_23-2151307406.jpg",
imageAlt: "ヘアパーマとトリートメントの様子",
videoAriaLabel: "ヘアパーマとトリートメントの施術",
},
]}
title="クーポン・メニュー"
description="当サロンのおすすめメニューと、お得なクーポン情報です。お客様のニーズに合わせた多様なプランをご用意しております。"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Client A", role: "CEO", company: "Company X", rating: 5, imageSrc: "https://via.placeholder.com/150?_wi=1" },
{ id: "2", name: "Client B", role: "CTO", company: "Company Y", rating: 4, imageSrc: "https://via.placeholder.com/150?_wi=2" }
]}
kpiItems={[
{
value: "98%", label: "Satisfaction"
},
{
value: "500+", label: "Clients"
},
{
value: "10", label: "Awards"
}
]}
title="What Our Clients Say"
description="Hear from our satisfied customers."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "山田 花子",
role: "会社員",
company: "20代",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-sofa_329181-4317.jpg",
},
{
id: "2",
name: "田中 健太",
role: "自営業",
company: "30代",
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: "40代",
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: "20代",
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: "リピート率",
value: "90%",
},
{
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/portrait-beautiful-woman-with-braids-posing-grey-female-lady-with-modern-hairstyle-studio_549566-491.jpg",
imageAlt: "笑顔の中村美咲トップスタイリスト",
},
{
id: "2",
name: "林 拓也",
role: "ディレクター",
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6328.jpg",
imageAlt: "熱心な林拓也ディレクター",
},
{
id: "3",
name: "吉田 麗奈",
role: "スタイリスト",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-brunette-barber-girl-uniform-holds-hair-thinning-scissors-looks-phone-olive-green_141793-92763.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/homosexual-women-covering-rainbow-flag_23-2148148005.jpg",
imageAlt: "ロングからショートへのヘアスタイル変換",
},
{
id: "2",
title: "透明感カラー",
author: "ヘアカラー",
description: "透明感のあるアッシュ系カラーで、柔らかく抜け感のあるスタイルに。",
tags: [
"#アッシュ",
"#透明感",
],
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668424.jpg",
imageAlt: "透明感のあるアッシュヘアカラー",
},
{
id: "3",
title: "メンズパーマ",
author: "メンズスタイル",
description: "ビジネスシーンにも合う、清潔感と動きのあるパーマスタイル。",
tags: [
"#メンズ",
"#パーマ",
],
imageSrc: "http://img.b2bpic.net/free-photo/dad-teaching-his-son-how-shave_23-2149422642.jpg",
imageAlt: "ビジネス向けメンズパーマスタイル",
},
]}
title="ギャラリー"
description="ビフォーアフターでわかる技術力と、洗練された店内の雰囲気をお写真でご覧ください。"
/>
</div>
<div id="store-info" data-section="store-info">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{
id: "faq-1",
title: "所在地",
content: "〒150-0043 東京都渋谷区道玄坂1-10-8 渋谷道玄坂東急ビル 1F",
},
{
id: "faq-2",
title: "営業時間",
content: "月〜金10:00〜20:00\n土日祝10:00〜19:00\n定休日火曜日",
},
{
id: "faq-3",
title: "アクセス",
content: "渋谷駅から徒歩5分。東急プラザ渋谷方面へお進みください。",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/relax-sofa-window_1150-12924.jpg"
imageAlt="ヘアサロンの外観写真"
mediaAnimation="slide-up"
title="店舗情報・アクセス"
description="当サロンへのアクセス方法と営業時間をご確認ください。皆様のご来店を心よりお待ちしております。"
faqsAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Elegance Hair Salon"
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 Elegance Hair Salon All rights reserved."
/>
</div>
<div id="contact" data-section="contact">
{/* Placeholder for Contact section */}
<h2 style={{ textAlign: 'center', padding: '100px 0' }}>Contact Us</h2>
</div>
</ReactLenis>
</ThemeProvider>
);