웹페이지 제작 소개 페이지 생성 & 사주 분석 고도화

app/services/website/samples/bakery/page.tsx

@@ -0,0 +1,325 @@
+import Link from 'next/link';
+
+export default function BakerySample() {
+  const menuItems = [
+    { name: '버터 크루아상', price: '3,200', emoji: '🥐', tag: '인기', desc: '프랑스산 에슈레 버터만 사용한 겹겹이 살아있는 크루아상' },
+    { name: '소금빵', price: '2,800', emoji: '🍞', tag: '베스트', desc: '오키나와 천연 소금과 발효 버터가 만나는 완벽한 짭조름함' },
+    { name: '딸기 쇼트케이크', price: '7,500', emoji: '🍰', tag: '신메뉴', desc: '국내산 딸기와 생크림이 만나는 클래식 케이크' },
+    { name: '캄파뉴', price: '8,900', emoji: '🫓', tag: '장인', desc: '72시간 저온 발효로 만든 시큼하고 깊은 맛의 통밀빵' },
+  ];
+
+  const hours = [
+    { day: '월~금', time: '07:00 – 20:00' },
+    { day: '토요일', time: '07:00 – 21:00' },
+    { day: '일요일', time: '09:00 – 18:00' },
+    { day: '공휴일', time: '09:00 – 18:00' },
+  ];
+
+  return (
+    <div style={{ background: '#fffbf5', minHeight: '100vh', color: '#1c1008' }}>
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
+        @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes float { 0%, 100% { transform: translateY(0px) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
+        .menu-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(120,53,15,0.12); }
+        .menu-card { transition: transform 0.35s, box-shadow 0.35s; }
+        .bk-btn:hover { background: #92400e !important; }
+        .bk-btn { transition: background 0.2s; }
+      `}</style>
+
+      {/* Back Banner */}
+      <div style={{
+        background: 'linear-gradient(135deg, #1e1b4b, #312e81)',
+        padding: '10px 24px', display: 'flex', alignItems: 'center', gap: 12,
+      }}>
+        <Link href="/services/website" style={{
+          color: '#a5b4fc', fontSize: 13, textDecoration: 'none',
+          fontFamily: "'Noto Sans KR', sans-serif",
+        }}>
+          ← 홈페이지 제작 서비스로 돌아가기
+        </Link>
+        <span style={{ color: '#4c1d95', fontSize: 13 }}>|</span>
+        <span style={{ color: '#6366f1', fontSize: 12, fontFamily: 'Playfair Display, serif', fontWeight: 700 }}>
+          SAMPLE · 베이커리 홈페이지
+        </span>
+      </div>
+
+      {/* Navbar */}
+      <nav style={{
+        background: 'rgba(255,251,245,0.95)', backdropFilter: 'blur(12px)',
+        borderBottom: '1px solid #fde8c8',
+        padding: '0 48px', height: 68,
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        position: 'sticky', top: 0, zIndex: 100,
+      }}>
+        <div style={{ textAlign: 'center' }}>
+          <div style={{ fontSize: 20, fontFamily: 'Playfair Display, serif', fontStyle: 'italic', color: '#78350f', fontWeight: 700 }}>
+            Le Petit Fort
+          </div>
+          <div style={{ fontSize: 10, color: '#a78060', letterSpacing: '0.2em', textTransform: 'uppercase' }}>Artisan Boulangerie</div>
+        </div>
+        <div style={{ display: 'flex', gap: 28 }}>
+          {['메뉴', '스토리', '매장안내', '예약'].map((item) => (
+            <span key={item} style={{
+              fontSize: 14, color: '#78350f', cursor: 'pointer',
+              fontFamily: "'Noto Sans KR', sans-serif", fontWeight: 500,
+            }}>{item}</span>
+          ))}
+        </div>
+        <button className="bk-btn" style={{
+          background: '#b45309', color: 'white', border: 'none',
+          padding: '9px 22px', borderRadius: 24, fontSize: 13,
+          fontWeight: 700, cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
+        }}>
+          예약하기
+        </button>
+      </nav>
+
+      {/* Hero */}
+      <section style={{
+        background: 'linear-gradient(160deg, #fef3c7 0%, #fde68a 35%, #fbbf24 70%, #d97706 100%)',
+        padding: '80px 48px', position: 'relative', overflow: 'hidden', minHeight: 480,
+        display: 'flex', alignItems: 'center',
+      }}>
+        {/* Decorative circles */}
+        <div style={{
+          position: 'absolute', right: -60, top: -60,
+          width: 400, height: 400, borderRadius: '50%',
+          background: 'rgba(180,83,9,0.08)',
+        }} />
+        <div style={{
+          position: 'absolute', right: 80, bottom: -40,
+          width: 240, height: 240, borderRadius: '50%',
+          background: 'rgba(180,83,9,0.12)',
+        }} />
+        <div style={{
+          position: 'absolute', right: '10%', top: '50%', transform: 'translateY(-50%)',
+          fontSize: 120,
+          animation: 'float 4s ease-in-out infinite',
+          filter: 'drop-shadow(0 12px 24px rgba(120,53,15,0.25))',
+        }}>🥐</div>
+
+        <div style={{ maxWidth: 560, animation: 'fadeUp 0.8s ease forwards' }}>
+          <div style={{
+            fontSize: 13, color: '#78350f', fontFamily: 'Playfair Display, serif',
+            fontStyle: 'italic', marginBottom: 16, letterSpacing: '0.05em',
+          }}>
+            "매일 아침, 정성을 굽습니다"
+          </div>
+          <h1 style={{
+            fontFamily: 'Playfair Display, serif', fontSize: 'clamp(40px, 5vw, 64px)',
+            fontWeight: 700, color: '#451a03', lineHeight: 1.15, marginBottom: 18,
+          }}>
+            갓 구운 빵의<br />
+            <span style={{ color: '#b45309' }}>따뜻한 향기</span>가<br />
+            기다립니다
+          </h1>
+          <p style={{
+            color: '#78350f', fontSize: 16, lineHeight: 1.8, marginBottom: 32,
+            fontFamily: "'Noto Sans KR', sans-serif",
+          }}>
+            프랑스 전통 방식으로 매일 새벽 4시부터<br />
+            정성껏 굽는 르 쁘띠 포르의 빵을 만나보세요.
+          </p>
+          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+            <button className="bk-btn" style={{
+              background: '#b45309', color: 'white', border: 'none',
+              padding: '14px 32px', borderRadius: 28, fontSize: 15, fontWeight: 700,
+              cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
+              boxShadow: '0 8px 24px rgba(180,83,9,0.35)',
+            }}>
+              오늘의 메뉴 보기
+            </button>
+            <button style={{
+              background: 'rgba(255,255,255,0.6)', color: '#78350f',
+              border: '1px solid rgba(180,83,9,0.3)',
+              padding: '14px 32px', borderRadius: 28, fontSize: 15, fontWeight: 600,
+              cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
+              backdropFilter: 'blur(8px)',
+            }}>
+              매장 찾아오기
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* Menu */}
+      <section style={{ padding: '80px 48px', background: '#fffbf5' }}>
+        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
+          <div style={{ textAlign: 'center', marginBottom: 52 }}>
+            <div style={{
+              fontSize: 12, color: '#b45309', fontWeight: 700, letterSpacing: '0.2em',
+              textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 12,
+            }}>Today&apos;s Menu</div>
+            <h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 40, color: '#451a03', marginBottom: 12 }}>
+              오늘의 추천 메뉴
+            </h2>
+            <p style={{ color: '#a78060', fontSize: 15, fontFamily: "'Noto Sans KR', sans-serif" }}>
+              매일 새벽 구운 신선한 빵을 만나보세요
+            </p>
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 24 }}>
+            {menuItems.map((item) => (
+              <div key={item.name} className="menu-card" style={{
+                background: 'white', borderRadius: 20,
+                border: '1px solid #fde8c8', overflow: 'hidden',
+                boxShadow: '0 4px 20px rgba(120,53,15,0.05)',
+              }}>
+                <div style={{
+                  height: 140, background: 'linear-gradient(135deg, #fef3c7, #fde68a)',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  fontSize: 60, position: 'relative',
+                }}>
+                  {item.emoji}
+                  <span style={{
+                    position: 'absolute', top: 12, right: 12,
+                    background: '#b45309', color: 'white',
+                    fontSize: 10, fontWeight: 700, padding: '3px 9px', borderRadius: 100,
+                    fontFamily: "'Noto Sans KR', sans-serif",
+                  }}>{item.tag}</span>
+                </div>
+                <div style={{ padding: '18px 20px' }}>
+                  <div style={{ fontSize: 17, fontWeight: 700, color: '#451a03', fontFamily: 'Playfair Display, serif', marginBottom: 8 }}>
+                    {item.name}
+                  </div>
+                  <div style={{ fontSize: 13, color: '#a78060', lineHeight: 1.65, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 14 }}>
+                    {item.desc}
+                  </div>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <span style={{ fontSize: 18, fontWeight: 700, color: '#b45309', fontFamily: 'Playfair Display, serif' }}>
+                      ₩{item.price}
+                    </span>
+                    <button style={{
+                      background: '#fef3c7', color: '#b45309', border: 'none',
+                      padding: '6px 14px', borderRadius: 12, fontSize: 12,
+                      fontWeight: 700, cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
+                    }}>담기</button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Story */}
+      <section style={{ padding: '80px 48px', background: '#fef9f0', borderTop: '1px solid #fde8c8' }}>
+        <div style={{ maxWidth: 900, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
+          <div>
+            <div style={{ fontSize: 12, color: '#b45309', fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 12 }}>
+              Our Story
+            </div>
+            <h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 36, color: '#451a03', lineHeight: 1.3, marginBottom: 20 }}>
+              2009년부터<br />한 자리를 지켜온<br />
+              <em>우리 동네 빵집</em>
+            </h2>
+            <p style={{ color: '#78350f', fontSize: 15, lineHeight: 1.9, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 16 }}>
+              파리에서 5년간 수업한 오너 셰프가 고향 서울로 돌아와 차린 작은 베이커리. 대기업 프랜차이즈가 넘쳐나는 세상에서도 손으로 빚고, 눈으로 확인하는 전통 방식을 고집합니다.
+            </p>
+            <p style={{ color: '#78350f', fontSize: 15, lineHeight: 1.9, fontFamily: "'Noto Sans KR', sans-serif" }}>
+              밀가루, 버터, 소금, 물. 단 네 가지 재료로 만드는 우리의 빵에는 흉내낼 수 없는 진심이 담겨있습니다.
+            </p>
+          </div>
+          <div style={{
+            background: 'linear-gradient(135deg, #fde68a, #fbbf24)',
+            borderRadius: 24, padding: '48px 36px', textAlign: 'center',
+            border: '2px solid #fcd34d',
+          }}>
+            <div style={{ fontSize: 72, marginBottom: 16 }}>👨‍🍳</div>
+            <div style={{ fontSize: 22, fontFamily: 'Playfair Display, serif', color: '#451a03', fontWeight: 700 }}>
+              Chef Kim Dongwoo
+            </div>
+            <div style={{ fontSize: 13, color: '#78350f', fontFamily: "'Noto Sans KR', sans-serif", marginTop: 8, lineHeight: 1.6 }}>
+              Le Cordon Bleu Paris 졸업<br />
+              2009년 르 쁘띠 포르 창업
+            </div>
+            <div style={{
+              marginTop: 20, display: 'flex', justifyContent: 'center', gap: 20,
+            }}>
+              {[{ n: '15+', l: '년 경력' }, { n: '200+', l: '종류의 빵' }, { n: '4시', l: '매일 기상' }].map((s) => (
+                <div key={s.l} style={{ textAlign: 'center' }}>
+                  <div style={{ fontSize: 20, fontWeight: 800, color: '#451a03', fontFamily: 'Playfair Display, serif' }}>{s.n}</div>
+                  <div style={{ fontSize: 11, color: '#78350f', fontFamily: "'Noto Sans KR', sans-serif" }}>{s.l}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Hours & Location */}
+      <section style={{ padding: '72px 48px', background: '#451a03' }}>
+        <div style={{ maxWidth: 900, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60 }}>
+          <div>
+            <div style={{ fontSize: 12, color: '#fbbf24', fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 16 }}>
+              Hours
+            </div>
+            <h3 style={{ fontFamily: 'Playfair Display, serif', fontSize: 28, color: 'white', marginBottom: 28 }}>
+              운영 시간
+            </h3>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+              {hours.map((h) => (
+                <div key={h.day} style={{
+                  display: 'flex', justifyContent: 'space-between',
+                  borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: 12,
+                }}>
+                  <span style={{ fontSize: 14, color: '#fde68a', fontFamily: "'Noto Sans KR', sans-serif", fontWeight: 600 }}>{h.day}</span>
+                  <span style={{ fontSize: 14, color: '#fcd34d', fontFamily: 'Playfair Display, serif' }}>{h.time}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div>
+            <div style={{ fontSize: 12, color: '#fbbf24', fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 16 }}>
+              Location
+            </div>
+            <h3 style={{ fontFamily: 'Playfair Display, serif', fontSize: 28, color: 'white', marginBottom: 20 }}>
+              매장 위치
+            </h3>
+            <p style={{ color: '#fde68a', fontSize: 15, lineHeight: 1.7, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 16 }}>
+              서울특별시 마포구 연남동 224-14<br />
+              연남로 68 르 쁘띠 포르
+            </p>
+            <div style={{ display: 'flex', gap: 8, flexDirection: 'column' }}>
+              <div style={{ color: '#fcd34d', fontSize: 13, fontFamily: "'Noto Sans KR', sans-serif" }}>📍 지하철 2호선 홍대입구역 3번 출구 도보 5분</div>
+              <div style={{ color: '#fcd34d', fontSize: 13, fontFamily: "'Noto Sans KR', sans-serif" }}>📞 02-334-5678</div>
+              <div style={{ color: '#fcd34d', fontSize: 13, fontFamily: "'Noto Sans KR', sans-serif" }}>📱 @lepetitfort_seoul</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section style={{
+        background: 'linear-gradient(135deg, #fef3c7, #fde68a)',
+        padding: '64px 48px', textAlign: 'center',
+      }}>
+        <h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 36, color: '#451a03', marginBottom: 14 }}>
+          특별한 날을 위한 케이크
+        </h2>
+        <p style={{ color: '#78350f', fontSize: 16, lineHeight: 1.7, marginBottom: 28, fontFamily: "'Noto Sans KR', sans-serif" }}>
+          생일, 기념일, 웨딩 케이크까지.<br />
+          최소 3일 전 예약 시 원하시는 케이크를 제작해드립니다.
+        </p>
+        <button style={{
+          background: '#b45309', color: 'white', border: 'none',
+          padding: '15px 40px', borderRadius: 28, fontSize: 16, fontWeight: 700,
+          cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
+          boxShadow: '0 8px 24px rgba(180,83,9,0.4)',
+        }}>
+          케이크 주문 예약하기 →
+        </button>
+      </section>
+
+      {/* Footer */}
+      <footer style={{ background: '#1c1008', padding: '28px 48px', textAlign: 'center' }}>
+        <div style={{ color: '#78350f', fontSize: 13, fontFamily: 'Playfair Display, serif', fontStyle: 'italic', marginBottom: 6 }}>
+          Le Petit Fort — Artisan Boulangerie
+        </div>
+        <div style={{ color: '#3c1a08', fontSize: 12, fontFamily: "'Noto Sans KR', sans-serif" }}>
+          © 2024 르 쁘띠 포르. All rights reserved.
+        </div>
+      </footer>
+    </div>
+  );
+}