Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e46eb62f49 | |||
| a53e97adc5 | |||
| 7faccadc00 | |||
| 7366752ad4 | |||
| d96e118af7 | |||
| 7e7b04f1f4 | |||
| d84e3a4d13 | |||
| 588238a034 | |||
| cc23756877 | |||
| 9b96ff79fb | |||
| 1eef319311 | |||
| 808e622d8d | |||
| 6ba2d27d6d | |||
| ff73d973e7 | |||
| d63e4ecb55 |
225
src/app/hair-salon/page.tsx
Normal file
225
src/app/hair-salon/page.tsx
Normal 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.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>
|
||||||
|
);
|
||||||
|
}
|
||||||
380
src/app/page.tsx
380
src/app/page.tsx
@@ -2,17 +2,11 @@
|
|||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import ReactLenis from "lenis/react";
|
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 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 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 (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="elastic-effect"
|
defaultButtonVariant="elastic-effect"
|
||||||
@@ -27,335 +21,53 @@ export default function LandingPage() {
|
|||||||
headingFontWeight="semibold"
|
headingFontWeight="semibold"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarLayoutFloatingOverlay
|
<NavbarLayoutFloatingOverlay
|
||||||
navItems={[
|
navItems={[
|
||||||
{
|
{ name: "Home", id: "hero" },
|
||||||
name: "ホーム",
|
{ name: "About", id: "about" },
|
||||||
id: "hero",
|
{ name: "Testimonials", id: "testimonials" },
|
||||||
},
|
{ name: "Contact", id: "contact" }
|
||||||
{
|
]}
|
||||||
name: "メニュー",
|
brandName="My Brand"
|
||||||
id: "menu",
|
button={{ text: "Get Started", href: "#contact" }}
|
||||||
},
|
/>
|
||||||
{
|
</div>
|
||||||
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="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroBillboard
|
{/* Placeholder for Hero section */}
|
||||||
background={{
|
<h1 style={{ textAlign: 'center', padding: '100px 0' }}>Welcome to Our Service!</h1>
|
||||||
variant: "radial-gradient",
|
</div>
|
||||||
}}
|
|
||||||
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="menu" data-section="menu">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<PricingCardNine
|
<TestimonialCardSixteen
|
||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={false}
|
||||||
plans={[
|
testimonials={[
|
||||||
{
|
{ id: "1", name: "Client A", role: "CEO", company: "Company X", rating: 5, imageSrc: "https://via.placeholder.com/150?_wi=1" },
|
||||||
id: "cut-color",
|
{ id: "2", name: "Client B", role: "CTO", company: "Company Y", rating: 4, imageSrc: "https://via.placeholder.com/150?_wi=2" }
|
||||||
title: "カット+カラー",
|
]}
|
||||||
price: "¥8,800〜",
|
kpiItems={[
|
||||||
period: "(所要時間:約120分)",
|
{
|
||||||
features: [
|
value: "98%", label: "Satisfaction"
|
||||||
"似合わせカット",
|
},
|
||||||
"トレンドカラー",
|
{
|
||||||
"シャンプー・ブロー込",
|
value: "500+", label: "Clients"
|
||||||
],
|
},
|
||||||
button: {
|
{
|
||||||
text: "予約する",
|
value: "10", label: "Awards"
|
||||||
href: "#store-info",
|
}
|
||||||
},
|
]}
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/stylist-curling-hair-young-woman_23-2148113049.jpg",
|
title="What Our Clients Say"
|
||||||
imageAlt: "スタイリッシュなヘアカラー",
|
description="Hear from our satisfied customers."
|
||||||
videoAriaLabel: "ヘアカットとカラーリングの施術",
|
/>
|
||||||
},
|
</div>
|
||||||
{
|
|
||||||
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">
|
<div id="contact" data-section="contact">
|
||||||
<TestimonialCardSixteen
|
{/* Placeholder for Contact section */}
|
||||||
animationType="slide-up"
|
<h2 style={{ textAlign: 'center', padding: '100px 0' }}>Contact Us</h2>
|
||||||
textboxLayout="default"
|
</div>
|
||||||
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>
|
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user