Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #3.
This commit is contained in:
@@ -110,13 +110,10 @@ export default function HairSalonPage() {
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
icon: Star,
|
||||
title: "平均評価", value: "4.9"},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Googleレビュー", value: "250件以上"},
|
||||
{
|
||||
icon: Heart,
|
||||
title: "お客様満足度", value: "最高"},
|
||||
]}
|
||||
title="お客様の声 - アロハ体験"
|
||||
|
||||
380
src/app/page.tsx
380
src/app/page.tsx
@@ -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" },
|
||||
{ id: "2", name: "Client B", role: "CTO", company: "Company Y", rating: 4, imageSrc: "https://via.placeholder.com/150" }
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
title: "Satisfaction Rate", value: "98%"
|
||||
},
|
||||
{
|
||||
title: "Projects Completed", value: "500+"
|
||||
},
|
||||
{
|
||||
title: "Years in Business", value: "10"
|
||||
}
|
||||
]}
|
||||
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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user