diff --git a/app/services/website/page.tsx b/app/services/website/page.tsx index adde162..6dea74c 100644 --- a/app/services/website/page.tsx +++ b/app/services/website/page.tsx @@ -54,6 +54,26 @@ const samples = [ tags: ['게임', '멀티플레이', '랭킹'], icon: '⚡', }, + { + type: 'interior', + title: '인테리어 업체 소개', + subtitle: 'AURUM Interior', + desc: '따뜻한 감성과 고급스러운 감각을 담은 인테리어 포트폴리오 사이트', + gradient: 'linear-gradient(135deg, #2C1810 0%, #4A3728 50%, #6B4E37 100%)', + accent: '#D4A853', + tags: ['인테리어', '포트폴리오', '럭셔리'], + icon: '◈', + }, + { + type: 'reading', + title: '독서 기록 노트', + subtitle: '나의 독서 기록', + desc: '읽은 책과 감상을 아름답게 기록하는 나만의 독서 저널 페이지', + gradient: 'linear-gradient(135deg, #0C0B09 0%, #1A1710 50%, #2A2218 100%)', + accent: '#D4A853', + tags: ['라이프', '독서', '기록'], + icon: '◻', + }, ]; const processSteps = [ diff --git a/app/services/website/samples/interior/page.tsx b/app/services/website/samples/interior/page.tsx new file mode 100644 index 0000000..ebac46b --- /dev/null +++ b/app/services/website/samples/interior/page.tsx @@ -0,0 +1,552 @@ +'use client'; + +import Link from 'next/link'; +import { useState, useEffect } from 'react'; + +/* ── DATA ── */ +const portfolio = [ + { title: '한남동 단독주택', cat: '주거 인테리어', area: '245㎡', seed: 'architecture-house', w: 820, h: 1060 }, + { title: '청담 파인다이닝', cat: '상업 공간', area: '190㎡', seed: 'restaurant-interior', w: 820, h: 540 }, + { title: '성수 브랜드 오피스', cat: '업무 공간', area: '380㎡', seed: 'office-design', w: 400, h: 540 }, + { title: '용산 아파트 리모델링', cat: '리모델링', area: '95㎡', seed: 'apartment-modern', w: 400, h: 400 }, + { title: '강남 카페 에스프레소랩', cat: '상업 공간', area: '120㎡', seed: 'cafe-minimal', w: 820, h: 480 }, +]; + +const services = [ + { + title: '주거 인테리어', + sub: 'Residential', + desc: '생활의 리듬에 맞춘 공간을 설계합니다. 단독주택부터 아파트까지, 당신의 일상이 더 아름다워지도록 모든 디테일을 손수 고릅니다.', + details: ['공간 기획 및 3D 시뮬레이션', '자재 선정 동행 서비스', '시공 전 과정 PM', '준공 후 AS 1년'], + seed: 'living-room-bright', w: 680, h: 520, + }, + { + title: '상업 공간 디자인', + sub: 'Commercial', + desc: '브랜드의 철학이 공간 언어로 번역됩니다. 첫 방문객이 문을 열었을 때 느끼는 그 감정까지 설계의 범위입니다.', + details: ['브랜드 아이덴티티 반영', '동선 및 고객 UX 설계', '조명·음향 플래닝', '설비 협력사 연계'], + seed: 'commercial-modern', w: 680, h: 520, + }, + { + title: '리모델링 & 재생', + sub: 'Remodeling', + desc: '기존 공간의 가능성을 새로운 시선으로 바라봅니다. 구조적 변경부터 마감재 교체까지, 완전한 변신을 지원합니다.', + details: ['현장 실측 및 구조 분석', '철거~완공 원스톱', '예산 내 최적 시공', '친환경 자재 우선 적용'], + seed: 'renovation-before-after', w: 680, h: 520, + }, +]; + +const testimonials = [ + { + name: '하윤서', role: '한남동 단독주택 의뢰인', u: 'hayunseo', + rating: 5, + text: '처음엔 예산이 걱정됐는데, 아우라 팀이 범위를 명확히 정해줘서 오히려 계획보다 적게 들었습니다. 무엇보다 완공된 공간에서 매일 아침 커피 한 잔 하는 지금이 너무 행복해요.', + highlight: '계획보다 적은 예산', + }, + { + name: '박도현', role: '카페 에스프레소랩 대표', u: 'parkdohyun', + rating: 5, + text: '우리 브랜드 철학을 완벽하게 공간으로 옮겨줬습니다. 오픈 첫날부터 SNS 바이럴이 터졌고, 오픈 3개월 만에 매출이 전년 대비 340% 올랐어요.', + highlight: '매출 340% 상승', + }, + { + name: '이서진', role: '루미너스 COO', u: 'leeseojin', + rating: 5, + text: '직원들이 출근하고 싶은 공간을 만드는 게 목표였습니다. 리모델링 후 직원 만족도 설문에서 93점, 퇴직률이 절반으로 줄었습니다.', + highlight: '직원 만족도 93점', + }, +]; + +const steps = [ + { num: '01', title: '무료 상담', desc: '공간 사진, 예산, 취향을 공유해 주세요. 72시간 내 맞춤 제안서를 드립니다.' }, + { num: '02', title: '콘셉트 기획', desc: '무드보드와 3D 시뮬레이션으로 완공 이후를 미리 경험합니다.' }, + { num: '03', title: '시공', desc: '전담 PM이 공정마다 현장을 점검하고 일일 리포트를 공유합니다.' }, + { num: '04', title: '준공 & AS', desc: '완공 후 1년간 무상 AS. 공간이 오래 아름답도록 함께합니다.' }, +]; + +/* ── SVG ICONS ── */ +const StarIcon = ({ filled }: { filled: boolean }) => ( + + + +); + +const CheckIcon = () => ( + + + + +); + +const ArrowRight = ({ color = '#8B6914' }: { color?: string }) => ( + + + +); + +/* ── COMPONENT ── */ +export default function InteriorSample() { + const [scrolled, setScrolled] = useState(false); + + useEffect(() => { + const onScroll = () => setScrolled(window.scrollY > 80); + window.addEventListener('scroll', onScroll, { passive: true }); + + const observer = new IntersectionObserver( + (entries) => entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add('au-visible'); }), + { threshold: 0.08 } + ); + document.querySelectorAll('.au-reveal').forEach((el) => observer.observe(el)); + + return () => { window.removeEventListener('scroll', onScroll); observer.disconnect(); }; + }, []); + + const NAV_H = 72; + const GOLD = '#8B6914'; + const DARK = '#1C1A17'; + const SAGE = '#4E5C3E'; + const CREAM = '#FAF8F5'; + const SURFACE = '#F0ECE4'; + + return ( +
+