113 lines
4.7 KiB
JavaScript
113 lines
4.7 KiB
JavaScript
import Hero from '../components/Hero';
|
|
import Solutions from '../components/Solutions';
|
|
import Contact from '../components/Contact';
|
|
import { Link } from 'react-router-dom';
|
|
import { usePosts } from '../hooks/usePosts';
|
|
import PostCard from '../components/PostCard';
|
|
|
|
const Home = () => {
|
|
return (
|
|
<>
|
|
<Hero />
|
|
|
|
{/* Why Us Section */}
|
|
<section className="section-padding">
|
|
<div className="container">
|
|
<h2 className="section-title">Why Sokuree?</h2>
|
|
<div className="solutions-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))' }}>
|
|
<div className="solution-card">
|
|
<div className="solution-icon">🏆</div>
|
|
<h3>전문성</h3>
|
|
<p>품질/ISO 기반의 검증된 컨설팅</p>
|
|
</div>
|
|
<div className="solution-card">
|
|
<div className="solution-icon">🏭</div>
|
|
<h3>현장 중심</h3>
|
|
<p>제조 현장에 최적화된 맞춤형 솔루션</p>
|
|
</div>
|
|
<div className="solution-card">
|
|
<div className="solution-icon">🚀</div>
|
|
<h3>실행력</h3>
|
|
<p>데이터 시스템의 실질적 구현과 안착</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Solutions />
|
|
|
|
{/* Process Section */}
|
|
<section className="section-padding bg-light">
|
|
<div className="container">
|
|
<h2 className="section-title">진행 프로세스</h2>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', textAlign: 'center', gap: '20px' }}>
|
|
{['진단', '설계', '실행', '정착', '고도화'].map((step, index) => (
|
|
<div key={index} style={{ flex: 1, minWidth: '120px', background: 'white', padding: '20px', borderRadius: '10px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }}>
|
|
<div style={{ fontSize: '2rem', marginBottom: '10px', color: '#0056b3' }}>{index + 1}</div>
|
|
<h3>{step}</h3>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Cases Preview */}
|
|
<section className="section-padding">
|
|
<div className="container">
|
|
<h2 className="section-title">성공 사례</h2>
|
|
<div className="solutions-grid">
|
|
<div className="solution-card">
|
|
<h3>H사 스마트공장 구축</h3>
|
|
<p>생산성 30% 향상, 불량률 50% 감소</p>
|
|
</div>
|
|
<div className="solution-card">
|
|
<h3>D사 ISO 인증 획득</h3>
|
|
<p>내부 심사원 양성 및 프로세스 정립</p>
|
|
</div>
|
|
<div className="solution-card">
|
|
<h3>K사 그룹웨어 도입</h3>
|
|
<p>재고 관리 자동화 및 업무 효율화</p>
|
|
</div>
|
|
</div>
|
|
<div style={{ textAlign: 'center', marginTop: '40px' }}>
|
|
<Link to="/cases" className="btn btn-primary">사례 더 보기</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Latest News Section */}
|
|
<LatestNewsSection />
|
|
|
|
<Contact />
|
|
</>
|
|
);
|
|
};
|
|
|
|
const LatestNewsSection = () => {
|
|
const { posts, loading, error } = usePosts(1, 3); // Fetch 3 latest posts
|
|
|
|
if (loading) return null;
|
|
if (error) return null;
|
|
if (posts.length === 0) return null;
|
|
|
|
return (
|
|
<section className="section-padding bg-light">
|
|
<div className="container">
|
|
<div className="flex justify-between items-end mb-8">
|
|
<h2 className="section-title mb-0">최신 소식</h2>
|
|
<Link to="/news" className="text-primary font-semibold hover:underline">
|
|
전체 보기 →
|
|
</Link>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{posts.map((post) => (
|
|
<PostCard key={post.id} post={post} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default Home;
|