feat: Add Platform page with On-premise Solution and Smart Asset module

src/App.jsx

@@ -24,6 +24,8 @@ function ScrollToTopComp() {
   return null;
 }
 
+import Platform from './pages/Platform';
+
 function App() {
   // Global Content Protection
   useEffect(() => {
@@ -43,6 +45,7 @@ function App() {
         <Route path="/" element={<Layout />}>
           <Route index element={<Navigate to="/about" replace />} />
           <Route path="about" element={<About />} />
+          <Route path="platform" element={<Platform />} />
           <Route path="services" element={<ServiceDetail />} />
           <Route path="services/:serviceId" element={<ServiceDetail />} />
           <Route path="cases" element={<Cases />} />

src/components/Navbar.jsx

@@ -19,6 +19,7 @@ const Navbar = () => {
 
         <div className={`nav-links ${isOpen ? 'active' : ''}`}>
           <Link to="/about" onClick={toggleMenu}>회사소개</Link>
+          <Link to="/platform" onClick={toggleMenu}>플랫폼</Link>
           <Link to="/services" onClick={toggleMenu}>서비스</Link>
           <Link to="/cases" onClick={toggleMenu}>사례</Link>
           <Link to="/news" onClick={toggleMenu}>소식</Link>

src/pages/Platform.jsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import '../styles/main.css';
+import smartAssetImage from '../assets/214742.png';
+
+const Platform = () => {
+  return (
+    <div className="service-container">
+      {/* Header Section */}
+      <div className="service-header" style={{ paddingBottom: '3rem' }}>
+        <h1 className="service-title">플랫폼</h1>
+        <p className="service-subtitle">
+          소쿠리 컨설턴트의 혁신적인 솔루션을 만나보세요.
+        </p>
+      </div>
+
+      <div className="service-content-wrapper">
+
+        {/* On-premise Solution Section (Moved to Top) */}
+        <div className="service-section" style={{ marginBottom: '8rem' }}>
+          <h2 className="section-label text-center" style={{ textAlign: 'center' }}>구축형 서버 기반 중소기업 스마트 솔루션</h2>
+          <div className="title-underline" style={{ width: '60px', height: '4px', backgroundColor: '#4A628A', margin: '0 auto 3rem' }}></div>
+
+          <div className="content-wrapper" style={{ width: '100%', textAlign: 'center' }}>
+            <p style={{ fontSize: '1.125rem', lineHeight: '1.8', color: '#475569', marginBottom: '4rem', maxWidth: '900px', margin: '0 auto 4rem', wordBreak: 'keep-all' }}>
+              중소기업 환경에 최적화된 구축형 서버 기반 스마트 솔루션은 합리적인 비용으로 안정성, 보안성, 확장성을 동시에 제공합니다.<br className="hidden md:block" />
+              기업의 규모와 업무 특성에 맞춰 자유롭게 설계·운영할 수 있는 자체 인프라를 통해 지속 가능한 디지털 경쟁력을 확보할 수 있습니다.
+            </p>
+
+            <div className="features-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '2rem', textAlign: 'left' }}>
+              {/* Feature 1 */}
+              <div className="feature-item" style={{ padding: '2.5rem', backgroundColor: '#fff', borderRadius: '1rem', border: '1px solid #cbd5e1', boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)' }}>
+                <h4 style={{ fontWeight: 'bold', marginBottom: '1.2rem', color: '#4A628A', fontSize: '1.4rem' }}>자체 서버 구축</h4>
+                <ul style={{ paddingLeft: '1.2rem', color: '#475569', lineHeight: '1.8', fontSize: '1rem' }}>
+                  <li>외부 클라우드 의존 없이 사내 인프라 직접 운영</li>
+                  <li>기업 데이터에 대한 완전한 통제 및 보안 강화</li>
+                  <li>고객 정보·기술 자료·업무 데이터의 안전한 관리</li>
+                </ul>
+              </div>
+
+              {/* Feature 2 */}
+              <div className="feature-item" style={{ padding: '2.5rem', backgroundColor: '#fff', borderRadius: '1rem', border: '1px solid #cbd5e1', boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)' }}>
+                <h4 style={{ fontWeight: 'bold', marginBottom: '1.2rem', color: '#4A628A', fontSize: '1.4rem' }}>맞춤형 그룹웨어 운영</h4>
+                <ul style={{ paddingLeft: '1.2rem', color: '#475569', lineHeight: '1.8', fontSize: '1rem' }}>
+                  <li>전자결재, 문서관리, 일정·프로젝트 관리 통합</li>
+                  <li>조직 구조와 업무 방식에 맞춘 자유로운 구성</li>
+                  <li>불필요한 기능 제거, 필요한 기능만 선택 도입</li>
+                </ul>
+              </div>
+
+              {/* Feature 3 */}
+              <div className="feature-item" style={{ padding: '2.5rem', backgroundColor: '#fff', borderRadius: '1rem', border: '1px solid #cbd5e1', boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)' }}>
+                <h4 style={{ fontWeight: 'bold', marginBottom: '1.2rem', color: '#4A628A', fontSize: '1.4rem' }}>기업 맞춤 업무 시스템 확장</h4>
+                <ul style={{ paddingLeft: '1.2rem', color: '#475569', lineHeight: '1.8', fontSize: '1rem' }}>
+                  <li>설비관리, 재고관리, 공정관리, 품질관리 등 단계적 구축</li>
+                  <li>웹 서비스·데이터베이스·업무 시스템 통합 운영</li>
+                  <li>외주·상용 솔루션 종속 없는 자립형 구조</li>
+                </ul>
+              </div>
+
+              {/* Feature 4 */}
+              <div className="feature-item" style={{ padding: '2.5rem', backgroundColor: '#fff', borderRadius: '1rem', border: '1px solid #cbd5e1', boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)' }}>
+                <h4 style={{ fontWeight: 'bold', marginBottom: '1.2rem', color: '#4A628A', fontSize: '1.4rem' }}>안정적인 운영과 관리 편의성</h4>
+                <ul style={{ paddingLeft: '1.2rem', color: '#475569', lineHeight: '1.8', fontSize: '1rem' }}>
+                  <li>웹 기반 관리 환경으로 손쉬운 서버 운영</li>
+                  <li>자동 백업, 장애 알림, 신속한 복구 체계</li>
+                  <li>IT 전담 인력이 부족한 환경에서도 안정적 운용 가능</li>
+                </ul>
+              </div>
+
+              {/* Feature 5 */}
+              <div className="feature-item" style={{ padding: '2.5rem', backgroundColor: '#fff', borderRadius: '1rem', border: '1px solid #cbd5e1', boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)' }}>
+                <h4 style={{ fontWeight: 'bold', marginBottom: '1.2rem', color: '#4A628A', fontSize: '1.4rem' }}>무한한 확장 가능성</h4>
+                <ul style={{ paddingLeft: '1.2rem', color: '#475569', lineHeight: '1.8', fontSize: '1rem' }}>
+                  <li>소규모 도입 후 단계적 확장 가능</li>
+                  <li>사용자·서비스 증가에 유연하게 대응</li>
+                  <li>기업 성장과 함께 진화하는 인프라 구조</li>
+                </ul>
+              </div>
+            </div>
+
+            <div className="conclusion-box" style={{ marginTop: '4rem', padding: '2.5rem', backgroundColor: '#f1f5f9', borderRadius: '1rem', borderLeft: '5px solid #4A628A', textAlign: 'left' }}>
+              <p style={{ fontSize: '1.1rem', lineHeight: '1.8', color: '#334155', margin: 0, fontWeight: '500', wordBreak: 'keep-all' }}>
+                구축형 서버 기반 스마트 솔루션은 단순한 시스템 도입이 아닌, 기업 운영 방식에 최적화된 디지털 기반을 직접 설계하는 전략적 선택입니다.
+                중소기업의 현재와 미래를 모두 고려한 현실적인 스마트 인프라 해답을 제시합니다.
+              </p>
+            </div>
+
+          </div>
+        </div>
+
+        {/* Smart Asset Section (Moved to Bottom) */}
+        <div className="service-section">
+          <h2 className="section-label text-center" style={{ textAlign: 'center' }}>Smart Asset 모듈</h2>
+          <div className="title-underline" style={{ width: '60px', height: '4px', backgroundColor: '#4A628A', margin: '0 auto 3rem' }}></div>
+
+          <div className="smart-asset-container" style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+
+            {/* Image Wrapper - Inside Container, Matching Header Width */}
+            <div className="image-wrapper" style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
+              <img
+                src={smartAssetImage}
+                alt="Smart Asset Module Interface"
+                style={{
+                  maxWidth: '100%',
+                  height: 'auto',
+                  display: 'block'
+                  /* No shadow/border as requested */
+                }}
+              />
+            </div>
+
+            <div className="content-wrapper" style={{ width: '100%', textAlign: 'center' }}>
+
+              {/* Features Grid */}
+              <div className="features-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '1.5rem', textAlign: 'left' }}>
+                <div className="feature-item" style={{ padding: '2rem', backgroundColor: '#fff', borderRadius: '1rem', border: '1px solid #cbd5e1', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)' }}>
+                  <h4 style={{ fontWeight: 'bold', marginBottom: '1rem', color: '#4A628A', fontSize: '1.25rem' }}>자산 현황 파악</h4>
+                  <p style={{ fontSize: '1rem', color: '#475569', lineHeight: '1.6' }}>실시간으로 자산의 상태와 위치를 추적하고 관리합니다.</p>
+                </div>
+                <div className="feature-item" style={{ padding: '2rem', backgroundColor: '#fff', borderRadius: '1rem', border: '1px solid #cbd5e1', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)' }}>
+                  <h4 style={{ fontWeight: 'bold', marginBottom: '1rem', color: '#4A628A', fontSize: '1.25rem' }}>이력 관리</h4>
+                  <p style={{ fontSize: '1rem', color: '#475569', lineHeight: '1.6' }}>구입부터 폐기까지 자산의 전 생애주기 이력을 기록합니다.</p>
+                </div>
+                <div className="feature-item" style={{ padding: '2rem', backgroundColor: '#fff', borderRadius: '1rem', border: '1px solid #cbd5e1', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)' }}>
+                  <h4 style={{ fontWeight: 'bold', marginBottom: '1rem', color: '#4A628A', fontSize: '1.25rem' }}>효율성 증대</h4>
+                  <p style={{ fontSize: '1rem', color: '#475569', lineHeight: '1.6' }}>체계적인 데이터 관리로 업무 효율성을 극대화합니다.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default Platform;