cafe1/index.html at main · seongkeun/cafe1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>오피스 제주 카페 | 제주 사계 오피스 카페</title>
  <meta name="description" content="제주 사계에 있는 오피스 제주 카페를 소개하는 감각적인 랜딩 페이지." />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="bg-orb orb-1"></div>
  <div class="bg-orb orb-2"></div>
  <div class="bg-grid"></div>

  <header class="site-header">
    <nav class="nav">
      <a class="brand" href="#hero">
        <span class="brand-mark">OJ</span>
        <span class="brand-text">Office Jeju Cafe</span>
      </a>
      <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="nav-menu">
        <span></span>
        <span></span>
      </button>
      <div id="nav-menu" class="nav-menu">
        <a href="#story">스토리</a>
        <a href="#menu">메뉴</a>
        <a href="#gallery">공간</a>
        <a href="#visit">방문</a>
      </div>
    </nav>
  </header>

  <main>
    <section id="hero" class="hero">
      <div class="hero-content">
        <p class="eyebrow">제주 사계 · 오피스 제주 카페</p>
        <h1>사계의 파도 옆, <br />업무와 쉼이 공존하는 카페</h1>
        <p class="hero-lead">
          남쪽 바다의 햇살과 초록빛 바람이 흐르는 공간. 오피스 제주 카페는 워크스테이션과
          로컬 로스팅 커피, 그리고 제주 감성을 한 자리에서 만납니다.
        </p>
        <div class="hero-actions">
          <a class="btn primary" href="#visit">방문 안내</a>
          <a class="btn ghost" href="#menu">대표 메뉴</a>
        </div>
        <div class="hero-chips">
          <span>사계해안 3분</span>
          <span>워크존 분리</span>
          <span>로컬 디저트</span>
        </div>
      </div>
      <div class="hero-card">
        <div class="card-top">
          <p>오늘의 워크 & 커피</p>
          <h2>Seogwipo Blend 5:00 PM</h2>
        </div>
        <div class="card-detail">
          <div>
            <span>좌석</span>
            <strong>36석</strong>
          </div>
          <div>
            <span>뷰</span>
            <strong>사계 바다</strong>
          </div>
          <div>
            <span>콘센트</span>
            <strong>모든 좌석</strong>
          </div>
        </div>
        <div class="card-footer">
          <p>조용한 오후, 집중을 위한 사운드 플레이리스트를 준비했어요.</p>
        </div>
      </div>
    </section>

    <section id="story" class="section reveal">
      <div class="section-head">
        <p>스토리</p>
        <h2>사계의 빛을 담은 오피스형 카페</h2>
      </div>
      <div class="story-grid">
        <div class="story-card">
          <h3>업무 집중 존</h3>
          <p>개인 업무와 팀 미팅을 위한 좌석을 분리해, 편안한 집중을 돕습니다.</p>
        </div>
        <div class="story-card">
          <h3>로컬 로스팅</h3>
          <p>제주 산지의 향을 살린 하우스 블렌드로 하루를 시작하세요.</p>
        </div>
        <div class="story-card">
          <h3>사계의 풍경</h3>
          <p>바다와 유채가 어우러진 사계의 풍경을 창가에서 바로 즐길 수 있습니다.</p>
        </div>
      </div>
    </section>

    <section id="menu" class="section reveal">
      <div class="section-head">
        <p>메뉴</p>
        <h2>오피스 제주 카페 시그니처</h2>
      </div>
      <div class="menu-grid">
        <article class="menu-item">
          <div class="menu-badge">시그니처</div>
          <h3>사계 솔트 라떼</h3>
          <p>제주 해염과 크리미 밀크 폼이 어우러진 부드러운 라떼.</p>
          <span>6,800원</span>
        </article>
        <article class="menu-item">
          <div class="menu-badge">로컬</div>
          <h3>유자 콜드브루</h3>
          <p>상큼한 제주 유자와 콜드브루가 만든 상쾌한 조합.</p>
          <span>6,500원</span>
        </article>
        <article class="menu-item">
          <div class="menu-badge">디저트</div>
          <h3>사계 돌담 치즈케이크</h3>
          <p>돌담을 닮은 크럼블과 크림치즈의 깊은 풍미.</p>
          <span>7,200원</span>
        </article>
      </div>
    </section>

    <section id="gallery" class="section reveal">
      <div class="section-head">
        <p>공간</p>
        <h2>바다와 업무의 경계를 흐리다</h2>
      </div>
      <div class="gallery-grid">
        <div class="gallery-card">
          <div class="image placeholder-one"></div>
          <div>
            <h3>라운지 라이트</h3>
            <p>자연광이 가득한 라운지 좌석.</p>
          </div>
        </div>
        <div class="gallery-card">
          <div class="image placeholder-two"></div>
          <div>
            <h3>워크 데스크</h3>
            <p>장시간 업무를 위한 넓은 테이블.</p>
          </div>
        </div>
        <div class="gallery-card">
          <div class="image placeholder-three"></div>
          <div>
            <h3>야외 테라스</h3>
            <p>사계 해변을 바라보는 야외 좌석.</p>
          </div>
        </div>
      </div>
    </section>

    <section id="visit" class="section reveal">
      <div class="section-head">
        <p>방문</p>
        <h2>오피스 제주 카페 방문 안내</h2>
      </div>
      <div class="visit-grid">
        <div class="visit-card">
          <h3>주소</h3>
          <p>제주특별자치도 서귀포시 사계리 00-0</p>
          <p>사계해안 산책로 입구에서 도보 3분</p>
        </div>
        <div class="visit-card">
          <h3>운영 시간</h3>
          <p>매일 09:00 - 20:00</p>
          <p>라스트 오더 19:30</p>
        </div>
        <div class="visit-card">
          <h3>문의</h3>
          <p>064-000-0000</p>
          <p>hello@officejeju.cafe</p>
        </div>
      </div>
      <div class="cta">
        <div>
          <h3>워크 패스 예약</h3>
          <p>좌석 예약과 미팅룸 대관을 사전 신청하세요.</p>
        </div>
        <button class="btn primary" type="button">예약 문의</button>
      </div>
    </section>
  </main>

  <footer class="footer">
    <p>Office Jeju Cafe © <span id="year"></span>. 제주 사계의 하루를 응원합니다.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>