Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8b995fe0a6 | |||
| 2ae21c0480 | |||
| 4a81b7416d | |||
| d3af38fed2 | |||
| fb1e2567cb | |||
| 4ce91962d6 | |||
| 5fc2e7cb39 | |||
| 103ab6a4c7 | |||
| 8ff0e1fef7 |
230
src/app/page.tsx
230
src/app/page.tsx
@@ -3,162 +3,124 @@
|
|||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import ReactLenis from "lenis/react";
|
import ReactLenis from "lenis/react";
|
||||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
||||||
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||||
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
||||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function SalonMoiPage() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="shift-hover"
|
defaultButtonVariant="shift-hover"
|
||||||
defaultTextAnimation="entrance-slide"
|
defaultTextAnimation="entrance-slide"
|
||||||
borderRadius="rounded"
|
borderRadius="pill"
|
||||||
contentWidth="mediumLarge"
|
contentWidth="mediumLarge"
|
||||||
sizing="largeSmallSizeMediumTitles"
|
sizing="largeSmallSizeMediumTitles"
|
||||||
background="noise"
|
background="noise"
|
||||||
cardStyle="gradient-bordered"
|
cardStyle="glass-elevated"
|
||||||
primaryButtonStyle="shadow"
|
primaryButtonStyle="gradient"
|
||||||
secondaryButtonStyle="glass"
|
secondaryButtonStyle="solid"
|
||||||
headingFontWeight="normal"
|
headingFontWeight="semibold"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleFullscreen
|
<NavbarStyleFullscreen
|
||||||
navItems={[
|
navItems={[
|
||||||
{ name: "ホーム", id: "hero" },
|
{ name: "ホーム", id: "hero" },
|
||||||
{ name: "ショップ案内", id: "about" },
|
{ name: "サロン案内", id: "about" },
|
||||||
{ name: "こだわり", id: "features" },
|
{ name: "サービス", id: "features" },
|
||||||
{ name: "クチコミ", id: "testimonials" },
|
{ name: "クチコミ", id: "testimonials" },
|
||||||
{ name: "お問い合わせ", id: "contact" }
|
{ name: "お問い合わせ", id: "contact" }
|
||||||
]}
|
]}
|
||||||
brandName="花よし"
|
brandName="Salon Moi"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroSplitDualMedia
|
<HeroSplitDualMedia
|
||||||
background={{ variant: "gradient-bars" }}
|
background={{ variant: "sparkles-gradient" }}
|
||||||
title="心に寄り添う、お花を。"
|
title="指先と目元から、私らしい美しさを。"
|
||||||
description="北名古屋市の花よしです。大切な記念日や感謝の気持ちを伝えるお花のアレンジメントを、心を込めてお作りします。"
|
description="Salon Moiは、丁寧なカウンセリングと確かな技術で、お客様一人ひとりの魅力を引き出すネイルとまつげの専門サロンです。"
|
||||||
tag="北名古屋市の花屋"
|
tag="心安らぐ隠れ家サロン"
|
||||||
mediaItems={[
|
mediaItems={[
|
||||||
{
|
{ imageSrc: "https://img.b2bpic.net/free-photo/manicured-nails-with-minimalist-design_23-2148408933.jpg", imageAlt: "Nail art close-up" },
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/bouquet-flowers-is-displayed-table_188544-45468.jpg?_wi=1", imageAlt: "fresh floral bouquet workshop"
|
{ imageSrc: "https://img.b2bpic.net/free-photo/professional-eyelash-extension-process_1258-10023.jpg?_wi=1", imageAlt: "Eyelash treatment" }
|
||||||
},
|
]}
|
||||||
{
|
mediaAnimation="opacity"
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/bouquet-flowers-wooden-bar_1162-3.jpg", imageAlt: "fresh floral bouquet workshop"
|
rating={5}
|
||||||
}
|
ratingText="150+ 名のお客様に選ばれています"
|
||||||
]}
|
/>
|
||||||
mediaAnimation="slide-up"
|
</div>
|
||||||
rating={5}
|
|
||||||
ratingText="27件のクチコミから高評価"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
<SplitAbout
|
<SplitAbout
|
||||||
textboxLayout="split"
|
textboxLayout="split"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
title="地域に愛されて。花よしの想い。"
|
title="Salon Moi のこだわり"
|
||||||
description="長年、地域のみなさまの笑顔に寄り添ってきました。お母様の誕生日を祝うような温かい心で、一つひとつのお花をご用意いたします。"
|
description="お客様が心からリラックスできる空間作りを大切にしています。日々の喧騒を忘れ、自分へのご褒美時間をゆったりとお過ごしください。"
|
||||||
bulletPoints={[
|
bulletPoints={[
|
||||||
{ title: "新鮮な旬のお花", description: "厳選された新鮮な生花を毎日入荷しております。" },
|
{ title: "パーソナルなデザイン", description: "ライフスタイルに合わせた最適なスタイルをご提案します。" },
|
||||||
{ title: "親切丁寧な相談", description: "ご予算やご用途に合わせて、最適なブーケをご提案します。" },
|
{ 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"
|
imageSrc="https://img.b2bpic.net/free-photo/smiling-professional-nail-technician-portrait_23-2148704205.jpg"
|
||||||
imageAlt="friendly florist shop owner"
|
imageAlt="Salon owner portrait"
|
||||||
mediaAnimation="slide-up"
|
mediaAnimation="slide-up"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="features" data-section="features">
|
<div id="features" data-section="features">
|
||||||
<FeatureCardNineteen
|
<FeatureCardNineteen
|
||||||
textboxLayout="split"
|
textboxLayout="split"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
features={[
|
features={[
|
||||||
{ tag: "Gift", title: "記念日ギフト", subtitle: "特別な日に", description: "夫妻の記念日や誕生日、お祝いごとに最適なアレンジを。", imageSrc: "http://img.b2bpic.net/free-photo/white-flowers-wooden-fence-closeup_169016-20746.jpg?_wi=1" },
|
{ tag: "Nails", title: "ネイルアート", subtitle: "洗練された指先", description: "トレンドのニュアンスネイルからオフィス向けシンプルネイルまで。", imageSrc: "https://img.b2bpic.net/free-photo/various-colors-nail-polish-bottles_23-2148152598.jpg" },
|
||||||
{ tag: "Service", title: "手厚いアレンジ", subtitle: "心を込めて", description: "ご希望の雰囲気に合わせた丁寧なラッピングを心がけています。", imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-florist-woman_23-2149215271.jpg?_wi=1" },
|
{ tag: "Lashes", title: "まつげエクステ", subtitle: "自然な華やかさ", description: "目元の印象を優しく、かつ華やかに演出するエクステ・パーマ。", imageSrc: "https://img.b2bpic.net/free-photo/beautiful-eye-with-long-eyelashes_23-2148281046.jpg" },
|
||||||
{ tag: "Delivery", title: "地域密着配送", subtitle: "安心のお届け", description: "北名古屋市周辺を中心に、大切なお花を安全にお届けします。", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-flowers_624325-790.jpg?_wi=1" },
|
{ tag: "Care", title: "爪・肌ケア", subtitle: "至福のハンドケア", description: "健康的な美しさを維持するための丁寧なハンドケア、アイケアも充実。", imageSrc: "https://img.b2bpic.net/free-photo/manicure-hand-treatment_23-2148408933.jpg" }
|
||||||
{ 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="お客様の理想を実現する、丁寧なメニューを豊富に取り揃えております。"
|
||||||
title="花よしが選ばれる理由"
|
/>
|
||||||
description="お客様の想いをカタチにするために、こだわりのサービスを提供しています。"
|
</div>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<TestimonialCardFive
|
<TestimonialCardFive
|
||||||
textboxLayout="split"
|
textboxLayout="split"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
testimonials={[
|
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: "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: "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: "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" }
|
||||||
{ 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" },
|
title="お客様の声"
|
||||||
{ 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" }
|
description="Salon Moi を愛用してくださっている皆様からの温かいお声です。"
|
||||||
]}
|
/>
|
||||||
title="お客様の声"
|
</div>
|
||||||
description="いつもご利用いただいているお客様からの温かいメッセージです。"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="faq" data-section="faq">
|
<div id="contact" data-section="contact">
|
||||||
<FaqSplitText
|
<ContactSplitForm
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={true}
|
||||||
faqs={[
|
title="お問い合わせ・ご予約"
|
||||||
{ id: "f1", title: "予約は必要ですか?", content: "ご希望のイメージがある場合は事前のご予約をおすすめしております。" },
|
description="ご予約のご相談は、お電話または以下のフォームよりお気軽にご連絡ください。"
|
||||||
{ id: "f2", title: "配達は可能ですか?", content: "近隣エリアへの配達を承っております。詳細はお電話にてお問い合わせください。" },
|
inputs={[
|
||||||
{ id: "f3", title: "営業時間は?", content: "午前9:00から営業しております。定休日等の詳細はInstagram等もご確認ください。" }
|
{ name: "name", type: "text", placeholder: "お名前", required: true },
|
||||||
]}
|
{ name: "email", type: "email", placeholder: "メールアドレス", required: true }
|
||||||
sideTitle="よくあるご質問"
|
]}
|
||||||
sideDescription="店舗についてのお問い合わせはこちらをご覧ください。"
|
textarea={{ name: "message", placeholder: "ご希望の施術内容や日時をご記入ください", rows: 4 }}
|
||||||
faqsAnimation="blur-reveal"
|
imageSrc="https://img.b2bpic.net/free-photo/cozy-interior-beauty-salon_23-2148704205.jpg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="social-proof" data-section="social-proof">
|
<div id="footer" data-section="footer">
|
||||||
<SocialProofOne
|
<FooterLogoEmphasis
|
||||||
textboxLayout="split"
|
columns={[
|
||||||
useInvertedBackground={false}
|
{ items: [{ label: "店舗概要", href: "#about" }, { label: "サービス", href: "#features" }] },
|
||||||
names={[
|
{ items: [{ label: "Instagram", href: "#" }, { label: "ご予約", href: "#contact" }] }
|
||||||
"地域の皆様", "結婚式場", "地元飲食店", "フラワー協会", "イベント会社", "学校行事", "地元農園"
|
]}
|
||||||
]}
|
logoText="Salon Moi"
|
||||||
title="地域のパートナー"
|
/>
|
||||||
description="地元の皆様をはじめ、様々なシーンでお花をお届けしています。"
|
</div>
|
||||||
/>
|
|
||||||
</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>
|
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user