WordPress へようこそ。こちらは最初の投稿です。編集または削除し、コンテンツ作成を始めてください。
import React, { useState, useEffect } from 'react';
import { Map, Megaphone, ShoppingBag, Calendar, Heart, Home, ChevronRight, Menu, X, ExternalLink } from 'lucide-react';
const App = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [activeSection, setActiveSection] = useState('home');
// スムーズスクロール用
const scrollTo = (id) => {
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
setIsMenuOpen(false);
};
return (
<div className="min-h-screen bg-[#FFFDF5] text-[#4A4A4A] font-sans selection:bg-[#FFD166]">
{/* ナビゲーション */}
<nav className="fixed top-0 w-full bg-white/80 backdrop-blur-md z-50 border-b border-[#F0E6D2]">
<div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
<div className="flex items-center gap-2 cursor-pointer" onClick={() => scrollTo('home')}>
<div className="w-10 h-10 bg-[#FF8C42] rounded-full flex items-center justify-center text-white">
<Home size={24} />
</div>
<span className="text-xl font-bold tracking-tighter text-[#FF8C42]">kokoperi村</span>
</div>
{/* デスクトップメニュー */}
<div className="hidden md:flex gap-8 font-medium text-sm">
<button onClick={() => scrollTo('pr')} className="hover:text-[#FF8C42] transition-colors">魅力発見PR術</button>
<button onClick={() => scrollTo('brand')} className="hover:text-[#FF8C42] transition-colors">アフリカ布ブランド</button>
<button onClick={() => scrollTo('event')} className="hover:text-[#FF8C42] transition-colors">イベント運営</button>
<button onClick={() => scrollTo('concept')} className="hover:text-[#FF8C42] transition-colors">村の想い</button>
</div>
<button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
{isMenuOpen ? <X /> : <Menu />}
</button>
</div>
{/* モバイルメニュー */}
{isMenuOpen && (
<div className="md:hidden bg-white border-b border-[#F0E6D2] p-4 flex flex-col gap-4">
<button onClick={() => scrollTo('pr')} className="text-left py-2 border-b border-gray-50">魅力発見PR術</button>
<button onClick={() => scrollTo('brand')} className="text-left py-2 border-b border-gray-50">アフリカ布ブランド</button>
<button onClick={() => scrollTo('event')} className="text-left py-2 border-b border-gray-50">イベント運営</button>
<button onClick={() => scrollTo('concept')} className="text-left py-2 border-b border-gray-50">村の想い</button>
</div>
)}
</nav>
{/* ヒーローセクション */}
<section id="home" className="pt-32 pb-20 px-4">
<div className="max-w-4xl mx-auto text-center">
<div className="inline-block bg-[#E9F5DB] text-[#718355] px-4 py-1 rounded-full text-sm font-bold mb-6">
Welcome to kokoperi Village
</div>
<h1 className="text-4xl md:text-6xl font-black mb-6 leading-tight">
デザインとPRで、<br />
<span className="text-[#FF8C42]">日本と世界に笑顔の橋</span>を。
</h1>
<p className="text-lg text-gray-600 mb-10 max-w-2xl mx-auto">
ここは「kokoperi村」。<br />
地域で頑張るお店の魅力を広めたり、遠いアフリカの笑顔を届けたり。<br />
みんなが明るい気分になれる「おすそわけ」が詰まった村です。
</p>
{/* 村のマップ風イラストイメージ（SVG） */}
<div className="relative w-full max-w-2xl mx-auto h-64 md:h-80 bg-[#CFE1B9] rounded-[40px] overflow-hidden shadow-inner flex items-center justify-center border-8 border-white">
{/* 背景の道や木をイメージした装飾 */}
<div className="absolute top-10 left-10 text-[#718355] opacity-20"><Home size={48} /></div>
<div className="absolute bottom-10 right-10 text-[#718355] opacity-20"><Map size={64} /></div>
<div className="flex gap-4 md:gap-8 z-10">
<div onClick={() => scrollTo('pr')} className="cursor-pointer group flex flex-col items-center">
<div className="w-16 h-16 md:w-20 md:h-20 bg-white rounded-2xl shadow-lg flex items-center justify-center text-[#FF8C42] group-hover:scale-110 transition-transform mb-2 border-2 border-[#FFD166]">
<Megaphone size={32} />
</div>
<span className="text-xs font-bold bg-white px-2 py-1 rounded shadow-sm">PRの館</span>
</div>
<div onClick={() => scrollTo('brand')} className="cursor-pointer group flex flex-col items-center">
<div className="w-16 h-16 md:w-20 md:h-20 bg-white rounded-2xl shadow-lg flex items-center justify-center text-[#EF476F] group-hover:scale-110 transition-transform mb-2 border-2 border-[#FFD166]">
<ShoppingBag size={32} />
</div>
<span className="text-xs font-bold bg-white px-2 py-1 rounded shadow-sm">アフリカ布の店</span>
</div>
<div onClick={() => scrollTo('event')} className="cursor-pointer group flex flex-col items-center">
<div className="w-16 h-16 md:w-20 md:h-20 bg-white rounded-2xl shadow-lg flex items-center justify-center text-[#118AB2] group-hover:scale-110 transition-transform mb-2 border-2 border-[#FFD166]">
<Calendar size={32} />
</div>
<span className="text-xs font-bold bg-white px-2 py-1 rounded shadow-sm">集いの広場</span>
</div>
</div>
</div>
</div>
</section>
{/* セクション1: PR術 */}
<section id="pr" className="py-20 bg-white overflow-hidden">
<div className="max-w-6xl mx-auto px-4">
<div className="flex flex-col md:flex-row items-center gap-12">
<div className="flex-1">
<div className="flex items-center gap-3 mb-4">
<div className="w-12 h-12 bg-[#FF8C42] rounded-xl flex items-center justify-center text-white">
<Megaphone />
</div>
<h2 className="text-3xl font-bold">魅力発見PR術</h2>
</div>
<p className="text-xl font-bold text-[#FF8C42] mb-6">「1人で頑張るあなた」の声を、街のニュースに。</p>
<p className="text-gray-600 mb-6 leading-relaxed">
サロンオーナー、雑貨店、飲食店の店長さんへ。地域密着型のPR活用術を伝授します。
地元メディアへのプレスリリースを通じて、広告費をかけずに信頼と認知を積み上げていくためのメソッド。
あなたの情熱を、確かな「実績」へと変えていきます。
</p>
<ul className="space-y-3 mb-8">
{['地方新聞・ラジオ等への掲載実績のべ30社以上', '記者会見の経験を活かしたノウハウ', '小規模事業者に特化した伴走支援'].map((item, i) => (
<li key={i} className="flex items-center gap-2">
<div className="w-5 h-5 bg-[#FFD166] rounded-full flex items-center justify-center text-white text-xs">✓</div>
<span className="font-medium">{item}</span>
</li>
))}
</ul>
<button className="bg-[#FF8C42] text-white px-8 py-3 rounded-full font-bold hover:bg-[#e67e3a] transition-all flex items-center gap-2 group">
PR相談について詳しく <ChevronRight size={18} className="group-hover:translate-x-1 transition-transform" />
</button>
</div>
<div className="flex-1 relative">
<div className="bg-[#FFD166]/20 absolute -inset-4 rounded-3xl -rotate-3"></div>
<div className="relative bg-white p-8 rounded-2xl border-2 border-[#FFD166] shadow-xl">
<div className="text-sm font-bold text-[#FF8C42] mb-2">メディア掲載実績多数</div>
<div className="text-2xl font-black mb-4 italic">"広報という選択肢を、当たり前に。"</div>
<p className="text-sm text-gray-500">
起業8年の間に地方紙やラジオなど、のべ30社以上のメディア掲載を実現した爆進型メソッド。
</p>
</div>
</div>
</div>
</div>
</section>
{/* セクション2: アフリカ布ブランド */}
<section id="brand" className="py-20 bg-[#FFFDF5]">
<div className="max-w-6xl mx-auto px-4">
<div className="flex flex-col md:flex-row-reverse items-center gap-12">
<div className="flex-1">
<div className="flex items-center gap-3 mb-4">
<div className="w-12 h-12 bg-[#EF476F] rounded-xl flex items-center justify-center text-white">
<ShoppingBag />
</div>
<h2 className="text-3xl font-bold">和製アフリカン kokoperi</h2>
</div>
<p className="text-xl font-bold text-[#EF476F] mb-6">デザインで、アフリカと日本を「結ぶ」。</p>
<p className="text-gray-600 mb-6 leading-relaxed">
アフリカ布に出会って22年の作家が作る、ちょい足しで明るい気分になれるブランド。
スマホポーチや日傘、一つ一つ手作りされるアイテムは、どれも世界にひとつの表情を持っています。
</p>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
{[
{ label: '文化を結ぶ', desc: '伝統と現代をミックス' },
{ label: '笑顔を結ぶ', desc: '使う人も作る人も' },
{ label: '心を結ぶ', desc: '想いが見えるお買い物' }
].map((item, i) => (
<div key={i} className="bg-white p-4 rounded-xl border border-[#EF476F]/20 shadow-sm">
<div className="font-bold text-[#EF476F] mb-1">{item.label}</div>
<div className="text-xs text-gray-500">{item.desc}</div>
</div>
))}
</div>
<div className="bg-[#EF476F]/5 border-l-4 border-[#EF476F] p-4 mb-8 italic text-sm text-gray-700">
「そのモノは自分以外の誰かを幸せにしているか？」<br />
ギニアから直接買い付けることで、現地の方々の生活基盤を支える仕組みを大切にしています。
</div>
<a href="https://kokoperi.thebase.in/" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 bg-[#EF476F] text-white px-8 py-3 rounded-full font-bold hover:bg-[#d43f61] transition-all group">
オンラインショップへ <ExternalLink size={18} />
</a>
</div>
<div className="flex-1 grid grid-cols-2 gap-4">
{/* イメージプレースホルダ */}
<div className="aspect-square bg-orange-100 rounded-2xl overflow-hidden flex items-center justify-center relative">
<span className="text-xs font-bold text-orange-400">スマホポーチ</span>
<div className="absolute inset-0 bg-gradient-to-tr from-[#EF476F]/20 to-transparent"></div>
</div>
<div className="aspect-[3/4] bg-blue-100 rounded-2xl overflow-hidden flex items-center justify-center relative mt-8">
<span className="text-xs font-bold text-blue-400">日傘</span>
<div className="absolute inset-0 bg-gradient-to-tr from-[#EF476F]/20 to-transparent"></div>
</div>
<div className="aspect-square bg-yellow-100 rounded-2xl overflow-hidden flex items-center justify-center relative -mt-8">
<span className="text-xs font-bold text-yellow-600">アフリカ布</span>
<div className="absolute inset-0 bg-gradient-to-tr from-[#EF476F]/20 to-transparent"></div>
</div>
<div className="aspect-square bg-green-100 rounded-2xl overflow-hidden flex items-center justify-center relative">
<span className="text-xs font-bold text-green-400">ハンドメイド</span>
<div className="absolute inset-0 bg-gradient-to-tr from-[#EF476F]/20 to-transparent"></div>
</div>
</div>
</div>
</div>
</section>
{/* セクション3: イベント運営 */}
<section id="event" className="py-20 bg-white">
<div className="max-w-4xl mx-auto px-4 text-center">
<div className="w-16 h-16 bg-[#118AB2] rounded-2xl flex items-center justify-center text-white mx-auto mb-6">
<Calendar size={32} />
</div>
<h2 className="text-3xl font-bold mb-6">イベント運営</h2>
<p className="text-lg text-gray-600 mb-10">
オンライン・オフラインを問わず、心が動く瞬間の場作り。
滋賀県採択事業『女性のためのオンラインマルシェ』コーディネーターとしての経験を活かし、
「いつでも」「どこでも」女性が自分らしくいられるプラットフォームを構築・運営しています。
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-left">
<div className="p-6 rounded-2xl border-2 border-[#118AB2]/20 hover:border-[#118AB2] transition-colors">
<h3 className="font-bold text-[#118AB2] mb-2 flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-[#118AB2]"></div>
オンラインマルシェ運営
</h3>
<p className="text-sm text-gray-500">2020年より精力的に活動。県採択事業のコーディネートも担当。</p>
</div>
<div className="p-6 rounded-2xl border-2 border-[#118AB2]/20 hover:border-[#118AB2] transition-colors">
<h3 className="font-bold text-[#118AB2] mb-2 flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-[#118AB2]"></div>
コンテンツ作成支援
</h3>
<p className="text-sm text-gray-500">講師としての経験を活かし、参加者が主役になれるプログラムを設計。</p>
</div>
</div>
</div>
</section>
{/* 村の想い */}
<section id="concept" className="py-24 bg-[#718355] text-white relative overflow-hidden">
<div className="absolute top-0 right-0 p-20 opacity-10">
<Heart size={200} fill="currentColor" />
</div>
<div className="max-w-4xl mx-auto px-4 relative z-10">
<div className="text-center mb-12">
<h2 className="text-3xl font-bold mb-8">村長の想い</h2>
<div className="w-20 h-1 bg-[#FFD166] mx-auto mb-10"></div>
</div>
<div className="grid md:grid-cols-2 gap-12 items-center">
<div className="space-y-6 leading-relaxed">
<p className="text-xl font-medium text-[#FFD166]">「モノ、コトを通じてヒトを育む」</p>
<p>
インターネットの力で「いつでも」「どこでも」女性が働けるをサポートしたい。
難病を抱えながらも、PRのチカラで道を切り拓いてきた経験が、誰かの力になると信じています。
</p>
<p>
「買い物」は、私たちが最短でできる社会貢献。
kokoperi村で出会うモノやコトが、自分以外の誰かの幸せを想像するきっかけになれば嬉しいです。
</p>
<div className="pt-4 border-t border-white/20">
<p className="font-bold italic">合同会社kokoperi村 代表</p>
</div>
</div>
<div className="bg-white/10 backdrop-blur-sm p-8 rounded-3xl border border-white/20">
<div className="text-sm space-y-4">
<div className="flex justify-between border-b border-white/10 pb-2">
<span>所在地</span>
<span className="font-bold">滋賀県大津市</span>
</div>
<div className="flex justify-between border-b border-white/10 pb-2">
<span>設立</span>
<span className="font-bold">2024年4月</span>
</div>
<div className="flex justify-between border-b border-white/10 pb-2">
<span>主な活動</span>
<span className="font-bold text-right text-xs">PR講師 / ブランド運営 / イベント企画</span>
</div>
</div>
</div>
</div>
</div>
</section>
{/* フッター */}
<footer className="py-12 bg-[#F9F6EE] border-t border-[#F0E6D2]">
<div className="max-w-6xl mx-auto px-4 text-center">
<div className="flex items-center justify-center gap-2 mb-6">
<div className="w-8 h-8 bg-[#FF8C42] rounded-full flex items-center justify-center text-white">
<Home size={18} />
</div>
<span className="text-xl font-bold tracking-tighter text-[#FF8C42]">kokoperi村</span>
</div>
<p className="text-sm text-gray-500 mb-8 tracking-widest uppercase">© 2024 kokoperi Village LLC. All Rights Reserved.</p>
<div className="flex justify-center gap-6">
<div className="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-sm cursor-pointer hover:shadow-md transition-shadow">
<Heart size={20} className="text-[#EF476F]" />
</div>
</div>
</div>
</footer>
</div>
);
};
export default App;