Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 2ae21c0480 | |||
| d3af38fed2 | |||
| 4ce91962d6 | |||
| 5fc2e7cb39 | |||
| 103ab6a4c7 | |||
| 8ff0e1fef7 |
232
src/app/page.tsx
232
src/app/page.tsx
@@ -3,163 +3,125 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
|
||||
export default function LandingPage() {
|
||||
export default function SalonMoiPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "ホーム", id: "hero" },
|
||||
{ name: "ショップ案内", id: "about" },
|
||||
{ name: "こだわり", id: "features" },
|
||||
{ name: "クチコミ", id: "testimonials" },
|
||||
{ name: "お問い合わせ", id: "contact" }
|
||||
]}
|
||||
brandName="花よし"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "ホーム", id: "hero" },
|
||||
{ name: "サロン案内", id: "about" },
|
||||
{ name: "サービス", id: "features" },
|
||||
{ name: "クチコミ", id: "testimonials" },
|
||||
{ name: "お問い合わせ", id: "contact" }
|
||||
]}
|
||||
brandName="Salon Moi"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="心に寄り添う、お花を。"
|
||||
description="北名古屋市の花よしです。大切な記念日や感謝の気持ちを伝えるお花のアレンジメントを、心を込めてお作りします。"
|
||||
tag="北名古屋市の花屋"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bouquet-flowers-is-displayed-table_188544-45468.jpg?_wi=1", imageAlt: "fresh floral bouquet workshop"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bouquet-flowers-wooden-bar_1162-3.jpg", imageAlt: "fresh floral bouquet workshop"
|
||||
}
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="27件のクチコミから高評価"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="指先と目元から、私らしい美しさを。"
|
||||
description="Salon Moiは、丁寧なカウンセリングと確かな技術で、お客様一人ひとりの魅力を引き出すネイルとまつげの専門サロンです。"
|
||||
tag="心安らぐ隠れ家サロン"
|
||||
mediaItems={[
|
||||
{ imageSrc: "https://img.b2bpic.net/free-photo/manicured-nails-with-minimalist-design_23-2148408933.jpg", imageAlt: "Nail art close-up" },
|
||||
{ imageSrc: "https://img.b2bpic.net/free-photo/professional-eyelash-extension-process_1258-10023.jpg?_wi=1", imageAlt: "Eyelash treatment" }
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
rating={5}
|
||||
ratingText="150+ 名のお客様に選ばれています"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="地域に愛されて。花よしの想い。"
|
||||
description="長年、地域のみなさまの笑顔に寄り添ってきました。お母様の誕生日を祝うような温かい心で、一つひとつのお花をご用意いたします。"
|
||||
bulletPoints={[
|
||||
{ title: "新鮮な旬のお花", description: "厳選された新鮮な生花を毎日入荷しております。" },
|
||||
{ title: "親切丁寧な相談", description: "ご予算やご用途に合わせて、最適なブーケをご提案します。" },
|
||||
{ title: "柔軟な対応", description: "急なご依頼にもできる限りお応えできるよう努めております。" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-beautiful-african-woman-florist-taking-care-flowers-workplace-white-wall_176420-12277.jpg?_wi=1"
|
||||
imageAlt="friendly florist shop owner"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Salon Moi のこだわり"
|
||||
description="お客様が心からリラックスできる空間作りを大切にしています。日々の喧騒を忘れ、自分へのご褒美時間をゆったりとお過ごしください。"
|
||||
bulletPoints={[
|
||||
{ title: "パーソナルなデザイン", description: "ライフスタイルに合わせた最適なスタイルをご提案します。" },
|
||||
{ title: "高品質な素材", description: "爪やまつげへの負担を最小限に抑えた厳選製品を使用しています。" },
|
||||
{ title: "完全予約制", description: "プライベートな空間で、マンツーマンの丁寧な施術をお約束します。" }
|
||||
]}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/smiling-professional-nail-technician-portrait_23-2148704205.jpg"
|
||||
imageAlt="Salon owner portrait"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNineteen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ tag: "Gift", title: "記念日ギフト", subtitle: "特別な日に", description: "夫妻の記念日や誕生日、お祝いごとに最適なアレンジを。", imageSrc: "http://img.b2bpic.net/free-photo/white-flowers-wooden-fence-closeup_169016-20746.jpg?_wi=1" },
|
||||
{ tag: "Service", title: "手厚いアレンジ", subtitle: "心を込めて", description: "ご希望の雰囲気に合わせた丁寧なラッピングを心がけています。", imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-florist-woman_23-2149215271.jpg?_wi=1" },
|
||||
{ tag: "Delivery", title: "地域密着配送", subtitle: "安心のお届け", description: "北名古屋市周辺を中心に、大切なお花を安全にお届けします。", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-flowers_624325-790.jpg?_wi=1" },
|
||||
{ tag: "Design", title: "デザイナーズブーケ", subtitle: "洗練された花束", description: "熟練のフローリストがトレンドを取り入れたアレンジを行います。", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-female-florist-tying-bunch-flowers-with-ribbon-desk_23-2147929255.jpg" },
|
||||
{ tag: "Workshop", title: "フラワー教室", subtitle: "体験を楽しむ", description: "お花に触れる楽しさを提供する定期ワークショップを開催中。", imageSrc: "http://img.b2bpic.net/free-photo/people-building-their-own-dried-arrangement_23-2149697743.jpg" }
|
||||
]}
|
||||
title="花よしが選ばれる理由"
|
||||
description="お客様の想いをカタチにするために、こだわりのサービスを提供しています。"
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNineteen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ tag: "Nails", title: "ネイルアート", subtitle: "洗練された指先", description: "トレンドのニュアンスネイルからオフィス向けシンプルネイルまで。", imageSrc: "https://img.b2bpic.net/free-photo/various-colors-nail-polish-bottles_23-2148152598.jpg" },
|
||||
{ tag: "Lashes", title: "まつげエクステ", subtitle: "自然な華やかさ", description: "目元の印象を優しく、かつ華やかに演出するエクステ・パーマ。", imageSrc: "https://img.b2bpic.net/free-photo/beautiful-eye-with-long-eyelashes_23-2148281046.jpg" },
|
||||
{ tag: "Care", title: "爪・肌ケア", subtitle: "至福のハンドケア", description: "健康的な美しさを維持するための丁寧なハンドケア、アイケアも充実。", imageSrc: "https://img.b2bpic.net/free-photo/manicure-hand-treatment_23-2148408933.jpg" }
|
||||
]}
|
||||
title="美しさを磨くメニュー"
|
||||
description="お客様の理想を実現する、丁寧なメニューを豊富に取り揃えております。"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "あああアイラ", date: "1年前", title: "素敵な贈り物", quote: "優しく対応して下さり、可愛いお花を用意してくださいました！！感謝しています。", tag: "生花", avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-casual-peach-sweater-isolated-green-olive-wall-hold-orange-white-flower-box-composition-cotton-flowers-gypsophila-wheat-lagurus-gift-happy-amazed-surprised_343596-5114.jpg", imageSrc: "http://img.b2bpic.net/free-photo/bouquet-flowers-is-displayed-table_188544-45468.jpg?_wi=2", imageAlt: "smiling customer holding flowers" },
|
||||
{ id: "2", name: "A A", date: "1年前", title: "急な依頼にも", quote: "前日の営業時間外の電話でも翌日の受け取りに対応してくださり、とても助かっています。", tag: "アレンジ", avatarSrc: "http://img.b2bpic.net/free-photo/tender-young-woman-elegant-red-dress-holding-romantic-bouquet-red-roses-looking-right-smil_1258-174678.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-african-woman-florist-taking-care-flowers-workplace-white-wall_176420-12277.jpg?_wi=2", imageAlt: "smiling customer holding flowers" },
|
||||
{ id: "3", name: "佐藤 健", date: "2年前", title: "親切なオーナー", quote: "いつも親切なオーナーさんの顔を見にきて、幸せな気持ちになります。", tag: "常連", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-young-male-with-pink-roses-pink-colors_140725-147048.jpg", imageSrc: "http://img.b2bpic.net/free-photo/white-flowers-wooden-fence-closeup_169016-20746.jpg?_wi=2", imageAlt: "smiling customer holding flowers" },
|
||||
{ id: "4", name: "鈴木 花子", date: "3年前", title: "記念日に", quote: "記念日のお花はいつもここにお願いしています。仕上がりがいつも可愛い！", tag: "ギフト", avatarSrc: "http://img.b2bpic.net/free-photo/women-making-preparations-wedding_23-2149184335.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-florist-woman_23-2149215271.jpg?_wi=2", imageAlt: "smiling customer holding flowers" },
|
||||
{ id: "5", name: "高橋 誠", date: "4年前", title: "心のこもった対応", quote: "父の棺に入れるお花を購入しました。丁寧な対応に救われました。", tag: "供花", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-portrait-young-man-arranging-flower-florist-shop_23-2148075305.jpg", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-flowers_624325-790.jpg?_wi=2", imageAlt: "smiling customer holding flowers" }
|
||||
]}
|
||||
title="お客様の声"
|
||||
description="いつもご利用いただいているお客様からの温かいメッセージです。"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "M.S様", date: "先週", title: "期待以上の仕上がり", quote: "初めての利用でしたが、とても丁寧で大満足です！また通いたいと思います。", tag: "ネイル", avatarSrc: "https://img.b2bpic.net/free-photo/portrait-young-woman-with-natural-makeup_23-2148443919.jpg", imageSrc: "https://img.b2bpic.net/free-photo/manicured-hands-close-up_23-2148704205.jpg" },
|
||||
{ id: "2", name: "K.A様", date: "1ヶ月前", title: "居心地が良い", quote: "オーナーさんの親切な対応に癒やされました。技術も接客もパーフェクトです。", tag: "まつげ", avatarSrc: "https://img.b2bpic.net/free-photo/happy-young-woman-smiling_23-2148443919.jpg", imageSrc: "https://img.b2bpic.net/free-photo/professional-eyelash-extension-process_1258-10023.jpg?_wi=2" }
|
||||
]}
|
||||
title="お客様の声"
|
||||
description="Salon Moi を愛用してくださっている皆様からの温かいお声です。"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "予約は必要ですか？", content: "ご希望のイメージがある場合は事前のご予約をおすすめしております。" },
|
||||
{ id: "f2", title: "配達は可能ですか？", content: "近隣エリアへの配達を承っております。詳細はお電話にてお問い合わせください。" },
|
||||
{ id: "f3", title: "営業時間は？", content: "午前9:00から営業しております。定休日等の詳細はInstagram等もご確認ください。" }
|
||||
]}
|
||||
sideTitle="よくあるご質問"
|
||||
sideDescription="店舗についてのお問い合わせはこちらをご覧ください。"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="お問い合わせ・ご予約"
|
||||
description="ご予約のご相談は、お電話または以下のフォームよりお気軽にご連絡ください。"
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "お名前", required: true },
|
||||
{ name: "email", type: "email", placeholder: "メールアドレス", required: true }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "ご希望の施術内容や日時をご記入ください", rows: 4 }}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/cozy-interior-beauty-salon_23-2148704205.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"地域の皆様", "結婚式場", "地元飲食店", "フラワー協会", "イベント会社", "学校行事", "地元農園"
|
||||
]}
|
||||
title="地域のパートナー"
|
||||
description="地元の皆様をはじめ、様々なシーンでお花をお届けしています。"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="お気軽にご相談ください"
|
||||
description="ご予約やお花のご相談は、お電話またはフォームよりお気軽にお寄せください。"
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "お名前", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "電話番号", required: true }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "ご相談内容やご希望のお花について", rows: 4 }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/full-shot-business-owner-standing-outdoors_23-2149434497.jpg"
|
||||
imageAlt="flower shop front exterior"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "アクセス", href: "#" }, { label: "Instagram", href: "https://instagram.com" }] },
|
||||
{ items: [{ label: "営業時間", href: "#" }, { label: "お問い合わせ", href: "#contact" }] }
|
||||
]}
|
||||
logoText="花よし"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "店舗概要", href: "#about" }, { label: "サービス", href: "#features" }] },
|
||||
{ items: [{ label: "Instagram", href: "#" }, { label: "ご予約", href: "#contact" }] }
|
||||
]}
|
||||
logoText="Salon Moi"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user