-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
188 lines (183 loc) · 16.4 KB
/
index.html
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
<!DOCTYPE html>
<html lang="ko" class="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>킥톡 | EPL 리그 커뮤니티 플랫폼</title>
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="images/180x180.png">
<link rel="icon" type="image/png" sizes="180x180" href="images/180x180.png">
<meta name="description" content="이젠 나만의 EPL 팀을 킥톡에서 만나보세요">
<script src="https://cdn.tailwindcss.com"></script>
<style>
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
body {
font-family: 'Pretendard-Regular';
}
</style>
</head>
<body>
<header class="border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800 sticky top-0 z-50 backdrop-filter backdrop-blur-md">
<!-- -->
<nav class="">
<div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl z-50">
<a href="/" class="flex items-center">
<img src="images/180x180.png" class="mr-3 h-6 sm:h-9" alt="KICKTALK Logo" />
</a>
<div class="hidden lg:flex items-center lg:order-2">
<a href="#" class=" dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">안드로이드 준비중</a>
<a href="#" class="text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 dark:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">AppStore에서 열기</a>
<button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</nav>
</header>
<section class="bg-white dark:bg-gray-900 text-white relative">
<!-- background video -->
<div class="grid py-24 px-4 mx-auto max-w-screen-xl lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12 z-30 relative">
<div class="place-self-center mr-auto lg:col-span-7">
<h1 class="max-w-2xl text-4xl tracking-tight font-bold leading-none md:text-5xl xl:text-6xl dark:text-white drop-shadow-2xl">가장 활발한</h1>
<h1 class="mb-4 max-w-2xl text-4xl tracking-tight font-bold leading-none md:text-5xl xl:text-6xl dark:text-white drop-shadow-2xl">EPL 팀 응원 커뮤니티</h1>
<p class="max-w-2xl font-light text-white md:text-lg lg:text-xl dark:text-gray-400">킥톡을 지금 당장 만나보세요.</p>
<p class="mb-6 max-w-2xl font-light text-white lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">응원부터 경기일정과 굿즈구매까지 한 곳에서.</p>
<a href="#" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800">
플레이콘솔(준비중)
</a>
<a href="#" class="inline-flex justify-center items-center py-3 px-5 mr-3 text-base font-medium text-center text-white rounded-lg bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-900">
앱스토어(준비중)
<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
<div class="hidden lg:mt-0 lg:col-span-5 lg:flex translate-y-16">
<img src="images/mockup.png" class="object-cover z-10" alt="mockup">
</div>
</div>
<video autoplay muted loop playsinline id="v" class="absolute inset-0 object-cover w-full h-full z-0">
<source src="images/1031901296.mp4" type="video/mp4">
</video>
</section>
<section class="bg-gray-50 dark:bg-gray-800">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="mb-8 max-w-screen-md lg:mb-16">
<h2 class="mb-4 text-4xl font-extrabold text-blue-900 dark:text-white">핵심적인 기능</h2>
<p class="text-gray-500 sm:text-xl dark:text-gray-400">킥톡에는 여러 편의기능이 포함되어 있습니다.</p>
</div>
<div class="space-y-8 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-12 md:space-y-0">
<div>
<div class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-gray-100 lg:h-12 lg:w-12 dark:bg-gray-900">
<svg class="w-5 h-5 text-gray-600 lg:w-6 lg:h-6 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">EPL 결과/일정 보기</h3>
<p class="text-gray-500 dark:text-gray-400">EPL 리그의 지난 경기의 결과와 앞으로 있을 경기의 일정 확인</p>
</div>
<div>
<div class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-gray-100 lg:h-12 lg:w-12 dark:bg-gray-900">
<svg class="w-5 h-5 text-gray-600 lg:w-6 lg:h-6 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"></path></svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">라인업 보기</h3>
<p class="text-gray-500 dark:text-gray-400">앞으로 있을 경기의 선수 라인업을 확인</p>
</div>
<div>
<div class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-gray-100 lg:h-12 lg:w-12 dark:bg-gray-900">
<svg class="w-5 h-5 text-gray-600 lg:w-6 lg:h-6 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd"></path><path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"></path></svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">EPL 리그 순위 표 보기</h3>
<p class="text-gray-500 dark:text-gray-400">현재 진행 중인 리그의 순위 표를 확인</p>
</div>
<div>
<div class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-gray-100 lg:h-12 lg:w-12 dark:bg-gray-900">
<svg class="w-5 h-5 text-gray-600 lg:w-6 lg:h-6 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"></path><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"></path></svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">실시간 응원 댓글</h3>
<p class="text-gray-500 dark:text-gray-400">응원 팀 별로 댓글을 작성하고 소통할 수 있는 기능 제공</p>
</div>
<div>
<div class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-gray-100 lg:h-12 lg:w-12 dark:bg-gray-900">
<svg class="w-5 h-5 text-gray-600 lg:w-6 lg:h-6 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"></path></svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">마켓 플레이스</h3>
<p class="text-gray-500 dark:text-gray-400">EPL 관련 아이템을 구매 가능한 상품 열람</p>
</div>
<div>
<div class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-gray-100 lg:h-12 lg:w-12 dark:bg-gray-900">
<svg class="w-5 h-5 text-gray-600 lg:w-6 lg:h-6 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">내 팀 페이지</h3>
<p class="text-gray-500 dark:text-gray-400">팀의 순위와 득점 현황을 한 눈에 볼 수 있는 기능 제공</p>
</div>
</div>
</div>
</section>
<section class="bg-white dark:bg-gray-900">
<div class="gap-16 items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-2 lg:py-16 lg:px-6">
<div class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
<h2 class="mb-4 text-4xl font-extrabold text-blue-900 dark:text-white">당신이 혹시</h2>
<p class="mb-4">매일 뉴스 기사를 통해 EPL의 결과를 찾아보는 사람?</p>
<p>EPL에 대한 내용만 간편하게 열람할 수 있는 시스템이 없어 접근성이 쉬운 앱이 필요하면 지금 당장 킥톡과 함께하세요.</p>
</div>
<div class="grid grid-cols-2 gap-4 mt-8">
<img class="w-full rounded-lg shadow-lg " src="images/2.png" alt="2">
<img class="w-full rounded-lg shadow-lg " src="images/1.png" alt="1">
</div>
</div>
</section>
<section class="bg-gray-50 dark:bg-gray-900 py-4">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="mx-auto max-w-screen-sm text-center">
<h2 class="mb-4 text-4xl font-extrabold leading-tight text-blue-900 dark:text-white">지금 바로 시작해볼까요?</h2>
<p class="mb-6 font-light text-gray-500 dark:text-gray-400 md:text-lg">앱스토어에서 쉽게 다운로드 하세요.</p>
<a target="_blank" href="https://apps.apple.com/app/id1672634060" class="text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">AppStore에서 시작하기</a>
</div>
</div>
</section>
<footer class="p-4 bg-white sm:p-6 dark:bg-gray-800 mt-24">
<div class="mx-auto max-w-screen-xl">
<div class="md:flex md:justify-between">
<div class="mb-6 md:mb-0">
<a href="#" class="flex items-center">
<img src="images/180x180.png" class="mr-3 h-8" alt="Logo" />
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">킥톡</span>
</a>
</div>
<div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
<div>
<h2 class="mb-6 text-sm font-semibold text-blue-900 uppercase dark:text-white">제작</h2>
<ul class="text-gray-600 dark:text-gray-400">
<li class="mb-4">
<a href="https://sniperfactory.com/" class="hover:underline">스나이퍼팩토리 SFS팀</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold text-blue-900 uppercase dark:text-white">기타</h2>
<ul class="text-gray-600 dark:text-gray-400">
<li class="mb-4">
<a href="_" target="_blank" class="hover:underline">개인정보처리방침</a>
</li>
<li>
<a href="_" target="_blank" class="hover:underline">이용약관</a>
</li>
</ul>
</div>
</div>
</div>
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
<div class="sm:flex sm:items-center sm:justify-between">
<span class="text-xs text-gray-500 sm:text-center dark:text-gray-400">© 2023 <a href="https://sniperfactory.com/" class="hover:underline">스나이퍼팩토리</a>. All Rights Reserved.
</span>
</div>
</div>
</footer>
<!-- <script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script> -->
</body>
</html>