Hugging Face's logo

Spaces:
Drbrain0620
/
stitch2
Running

App Files Community
Drbrain0620 commited on
Commit
98fdcdc
ยท
verified ยท
1 Parent(s): 19a2228

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +246 -19
index.html CHANGED
@@ -1,19 +1,246 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="ko"><head>
4
+ <meta charset="utf-8"/>
5
+ <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
6
+ <title>Figure Shop - ํ”ผ๊ทœ์–ด ํŒ๋งค ์›น์‚ฌ์ดํŠธ</title>
7
+ <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
8
+ <link href="https://fonts.googleapis.com" rel="preconnect"/>
9
+ <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
10
+ <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&amp;family=Noto+Sans+KR:wght@400;500;700;900&amp;display=swap" rel="stylesheet"/>
11
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
12
+ <script id="tailwind-config">
13
+ tailwind.config = {
14
+ darkMode: "class",
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ "primary": "#7f13ec",
19
+ "background-light": "#f7f6f8",
20
+ "background-dark": "#191022",
21
+ "text-light": "#140d1b",
22
+ "text-dark": "#e5e3e7",
23
+ "subtext-light": "#734c9a",
24
+ "subtext-dark": "#a19da8",
25
+ "surface-light": "#ffffff",
26
+ "surface-dark": "#241a2f",
27
+ "border-light": "#ede7f3",
28
+ "border-dark": "#362a45",
29
+ },
30
+ fontFamily: {
31
+ "display": ["Plus Jakarta Sans", "Noto Sans KR", "sans-serif"]
32
+ },
33
+ borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
34
+ },
35
+ },
36
+ }
37
+ </script>
38
+ </head>
39
+ <body class="font-display bg-background-light dark:bg-background-dark">
40
+ <div class="relative flex h-auto min-h-screen w-full flex-col group/design-root overflow-x-hidden">
41
+ <div class="layout-container flex h-full grow flex-col">
42
+ <!-- TopNavBar -->
43
+ <header class="sticky top-0 z-50 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-sm">
44
+ <div class="flex items-center justify-between whitespace-nowrap border-b border-solid border-border-light dark:border-border-dark px-4 sm:px-6 lg:px-8 py-3 max-w-7xl mx-auto">
45
+ <div class="flex items-center gap-8">
46
+ <div class="flex items-center gap-4 text-text-light dark:text-text-dark">
47
+ <div class="size-6 text-primary">
48
+ <svg fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
49
+ <path d="M13.8261 17.4264C16.7203 18.1174 20.2244 18.5217 24 18.5217C27.7756 18.5217 31.2797 18.1174 34.1739 17.4264C36.9144 16.7722 39.9967 15.2331 41.3563 14.1648L24.8486 40.6391C24.4571 41.267 23.5429 41.267 23.1514 40.6391L6.64374 14.1648C8.00331 15.2331 11.0856 16.7722 13.8261 17.4264Z" fill="currentColor"></path>
50
+ <path clip-rule="evenodd" d="M39.998 12.236C39.9944 12.2537 39.9875 12.2845 39.9748 12.3294C39.9436 12.4399 39.8949 12.5741 39.8346 12.7175C39.8168 12.7597 39.7989 12.8007 39.7813 12.8398C38.5103 13.7113 35.9788 14.9393 33.7095 15.4811C30.9875 16.131 27.6413 16.5217 24 16.5217C20.3587 16.5217 17.0125 16.131 14.2905 15.4811C12.0012 14.9346 9.44505 13.6897 8.18538 12.8168C8.17384 12.7925 8.16216 12.767 8.15052 12.7408C8.09919 12.6249 8.05721 12.5114 8.02977 12.411C8.00356 12.3152 8.00039 12.2667 8.00004 12.2612C8.00004 12.261 8 12.2607 8.00004 12.2612C8.00004 12.2359 8.0104 11.9233 8.68485 11.3686C9.34546 10.8254 10.4222 10.2469 11.9291 9.72276C14.9242 8.68098 19.1919 8 24 8C28.8081 8 33.0758 8.68098 36.0709 9.72276C37.5778 10.2469 38.6545 10.8254 39.3151 11.3686C39.9006 11.8501 39.9857 12.1489 39.998 12.236ZM4.95178 15.2312L21.4543 41.6973C22.6288 43.5809 25.3712 43.5809 26.5457 41.6973L43.0534 15.223C43.0709 15.1948 43.0878 15.1662 43.104 15.1371L41.3563 14.1648C43.104 15.1371 43.1038 15.1374 43.104 15.1371L43.1051 15.135L43.1065 15.1325L43.1101 15.1261L43.1199 15.1082C43.1276 15.094 43.1377 15.0754 43.1497 15.0527C43.1738 15.0075 43.2062 14.9455 43.244 14.8701C43.319 14.7208 43.4196 14.511 43.5217 14.2683C43.6901 13.8679 44 13.0689 44 12.2609C44 10.5573 43.003 9.22254 41.8558 8.2791C40.6947 7.32427 39.1354 6.55361 37.385 5.94477C33.8654 4.72057 29.133 4 24 4C18.867 4 14.1346 4.72057 10.615 5.94478C8.86463 6.55361 7.30529 7.32428 6.14419 8.27911C4.99695 9.22255 3.99999 10.5573 3.99999 12.2609C3.99999 13.1275 4.29264 13.9078 4.49321 14.3607C4.60375 14.6102 4.71348 14.8196 4.79687 14.9689C4.83898 15.0444 4.87547 15.1065 4.9035 15.1529C4.91754 15.1762 4.92954 15.1957 4.93916 15.2111L4.94662 15.223L4.95178 15.2312ZM35.9868 18.996L24 38.22L12.0131 18.996C12.4661 19.1391 12.9179 19.2658 13.3617 19.3718C16.4281 20.1039 20.0901 20.5217 24 20.5217C27.9099 20.5217 31.5719 20.1039 34.6383 19.3718C35.082 19.2658 35.5339 19.1391 35.9868 18.996Z" fill="currentColor" fill-rule="evenodd"></path>
51
+ </svg>
52
+ </div>
53
+ <h2 class="text-lg font-bold tracking-tight text-text-light dark:text-text-dark">Figure Shop</h2>
54
+ </div>
55
+ <label class="hidden md:flex flex-col min-w-40 !h-10 max-w-64">
56
+ <div class="flex w-full flex-1 items-stretch rounded-lg h-full">
57
+ <div class="text-subtext-light dark:text-subtext-dark flex border-none bg-border-light dark:bg-border-dark items-center justify-center pl-4 rounded-l-lg border-r-0">
58
+ <span class="material-symbols-outlined" style="font-size: 24px;">search</span>
59
+ </div>
60
+ <input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-0 border-none bg-border-light dark:bg-border-dark focus:border-none h-full placeholder:text-subtext-light dark:placeholder:text-subtext-dark px-4 rounded-l-none border-l-0 pl-2 text-base font-normal leading-normal" placeholder="๊ฒ€์ƒ‰" value=""/>
61
+ </div>
62
+ </label>
63
+ </div>
64
+ <div class="flex flex-1 justify-end gap-8">
65
+ <div class="hidden lg:flex items-center gap-9">
66
+ <a class="text-sm font-medium leading-normal text-text-light dark:text-text-dark hover:text-primary dark:hover:text-primary" href="#">์• ๋‹ˆ๋ฉ”์ด์…˜๋ณ„</a>
67
+ <a class="text-sm font-medium leading-normal text-text-light dark:text-text-dark hover:text-primary dark:hover:text-primary" href="#">์‹œ๋ฆฌ์ฆˆ๋ณ„</a>
68
+ <a class="text-sm font-medium leading-normal text-text-light dark:text-text-dark hover:text-primary dark:hover:text-primary" href="#">์‹ ์ œํ’ˆ</a>
69
+ <a class="text-sm font-medium leading-normal text-text-light dark:text-text-dark hover:text-primary dark:hover:text-primary" href="#">์ด๋ฒคํŠธ</a>
70
+ </div>
71
+ <div class="flex gap-2">
72
+ <button class="flex max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 bg-primary/20 text-text-light dark:bg-primary/20 dark:text-text-dark hover:bg-primary/30 dark:hover:bg-primary/30 gap-2 text-sm font-bold leading-normal tracking-[0.015em] min-w-0 px-2.5">
73
+ <span class="material-symbols-outlined text-text-light dark:text-text-dark" style="font-size: 20px;">shopping_cart</span>
74
+ </button>
75
+ <button class="flex max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 bg-primary/20 text-text-light dark:bg-primary/20 dark:text-text-dark hover:bg-primary/30 dark:hover:bg-primary/30 gap-2 text-sm font-bold leading-normal tracking-[0.015em] min-w-0 px-2.5">
76
+ <span class="material-symbols-outlined text-text-light dark:text-text-dark" style="font-size: 20px;">person</span>
77
+ </button>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </header>
82
+ <main class="flex-1">
83
+ <div class="flex justify-center py-5">
84
+ <div class="flex flex-col max-w-7xl flex-1 px-4 sm:px-6 lg:px-8">
85
+ <!-- HeroSection -->
86
+ <div class="@container">
87
+ <div class="flex flex-col gap-6 px-4 py-10 @[480px]:gap-8 @[864px]:flex-row bg-surface-light dark:bg-surface-dark rounded-xl">
88
+ <div class="w-full bg-center bg-no-repeat aspect-video bg-cover rounded-lg @[480px]:h-auto @[480px]:min-w-[400px] @[864px]:w-full" data-alt="A newly released limited edition anime figure on a dynamic background" style='background-image: url("3.png");'></div>
89
+ <div class="flex flex-col gap-6 @[480px]:min-w-[400px] @[480px]:gap-8 @[864px]:justify-center">
90
+ <div class="flex flex-col gap-2 text-left">
91
+ <h1 class="text-text-light dark:text-text-dark text-4xl font-black leading-tight tracking-[-0.033em] @[480px]:text-5xl @[480px]:font-black @[480px]:leading-tight @[480px]:tracking-[-0.033em]">
92
+ ์ด๋ฒˆ ์ฃผ ์‹ ๊ทœ ์ž…๊ณ ! ํ•œ์ •ํŒ ํ”ผ๊ทœ์–ด ๋“ฑ์žฅ
93
+ </h1>
94
+ <h2 class="text-text-light dark:text-text-dark text-sm font-normal leading-normal @[480px]:text-base @[480px]:font-normal @[480px]:leading-normal">
95
+ ์ง€๊ธˆ ๊ฐ€์žฅ ์ธ๊ธฐ ์žˆ๋Š” ํ•œ์ •ํŒ ํ”ผ๊ทœ์–ด๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”. ๋†“์น˜๋ฉด ํ›„ํšŒํ•  ํŠน๋ณ„ํ•œ ๊ธฐํšŒ!
96
+ </h2>
97
+ </div>
98
+ <button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 @[480px]:h-12 @[480px]:px-5 bg-primary text-white text-sm font-bold leading-normal tracking-[0.015em] @[480px]:text-base @[480px]:font-bold @[480px]:leading-normal @[480px]:tracking-[0.015em]">
99
+ <span class="truncate">์ž์„ธํžˆ ๋ณด๊ธฐ</span>
100
+ </button>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ <!-- SectionHeader - New Products -->
105
+ <h2 class="text-text-light dark:text-text-dark text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-10">์ƒˆ๋กœ ๋‚˜์˜จ ํ”ผ๊ทœ์–ด</h2>
106
+ <!-- ImageGrid - New Products -->
107
+ <div class="grid grid-cols-[repeat(auto-fit,minmax(158px,1fr))] gap-4 p-4">
108
+ <div class="flex flex-col gap-3 pb-3 group">
109
+ <div class="w-full bg-center bg-no-repeat aspect-[3/4] bg-cover rounded-lg overflow-hidden transform group-hover:scale-105 transition-transform duration-300" data-alt="Rem figure from Re:Zero" style='background-image: url("4.png");'></div>
110
+ <div>
111
+ <p class="text-base font-medium leading-normal text-text-light dark:text-text-dark">์ œ๋กœ๋ถ€ํ„ฐ ์‹œ๏ฟฝ๏ฟฝํ•˜๋Š” ๋ ˜</p>
112
+ <p class="text-sm font-normal leading-normal text-subtext-light dark:text-subtext-dark">โ‚ฉ150,000</p>
113
+ <p class="text-sm font-normal leading-normal text-primary">10% ํ• ์ธ</p>
114
+ </div>
115
+ </div>
116
+ <div class="flex flex-col gap-3 pb-3 group">
117
+ <div class="w-full bg-center bg-no-repeat aspect-[3/4] bg-cover rounded-lg overflow-hidden transform group-hover:scale-105 transition-transform duration-300" data-alt="Metal Build Strike Freedom Gundam figure" style='background-image: url("5.png");'></div>
118
+ <div>
119
+ <p class="text-base font-medium leading-normal text-text-light dark:text-text-dark">๋ฉ”ํƒˆ๋นŒ๋“œ ์ŠคํŠธ๋ผ์ดํฌ ํ”„๋ฆฌ๋ค</p>
120
+ <p class="text-sm font-normal leading-normal text-subtext-light dark:text-subtext-dark">โ‚ฉ320,000</p>
121
+ </div>
122
+ </div>
123
+ <div class="flex flex-col gap-3 pb-3 group">
124
+ <div class="w-full bg-center bg-no-repeat aspect-[3/4] bg-cover rounded-lg overflow-hidden transform group-hover:scale-105 transition-transform duration-300" data-alt="Malenia figure from Elden Ring" style='background-image: url("6.png");'></div>
125
+ <div>
126
+ <p class="text-base font-medium leading-normal text-text-light dark:text-text-dark">์—˜๋“ ๋ง ๋ง๋ ˆ๋‹ˆ์•„ ํ”ผ๊ทœ์–ด</p>
127
+ <p class="text-sm font-normal leading-normal text-subtext-light dark:text-subtext-dark">โ‚ฉ280,000</p>
128
+ <p class="text-sm font-normal leading-normal text-primary">5% ํ• ์ธ</p>
129
+ </div>
130
+ </div>
131
+ <div class="flex flex-col gap-3 pb-3 group">
132
+ <div class="w-full bg-center bg-no-repeat aspect-[3/4] bg-cover rounded-lg overflow-hidden transform group-hover:scale-105 transition-transform duration-300" data-alt="Iron Man Mark 85 figure" style='background-image: url("1.png");'></div>
133
+ <div>
134
+ <p class="text-base font-medium leading-normal text-text-light dark:text-text-dark">์•„์ด์–ธ๋งจ ๋งˆํฌ 85</p>
135
+ <p class="text-sm font-normal leading-normal text-subtext-light dark:text-subtext-dark">โ‚ฉ450,000</p>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ <!-- CTASection / Promotion Banner -->
140
+ <div class="@container my-10">
141
+ <div class="flex flex-col items-center justify-center gap-6 px-4 py-10 @[480px]:gap-8 @[480px]:px-10 @[480px]:py-20 bg-surface-light dark:bg-surface-dark rounded-xl">
142
+ <div class="flex flex-col gap-2 text-center">
143
+ <h1 class="text-text-light dark:text-text-dark text-[32px] font-bold leading-tight tracking-tight @[480px]:text-4xl @[480px]:font-black @[480px]:leading-tight @[480px]:tracking-[-0.033em] max-w-[720px]">
144
+ ์—ฌ๋ฆ„๋งž์ด ํŠน๋ณ„ ํ• ์ธ! ์ตœ๋Œ€ 30% OFF
145
+ </h1>
146
+ <p class="text-base font-normal leading-normal max-w-[720px] text-text-light dark:text-text-dark">์ธ๊ธฐ ํ”ผ๊ทœ์–ด๋“ค์„ ํŠน๋ณ„ํ•œ ๊ฐ€๊ฒฉ์— ๋งŒ๋‚˜๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ธฐํšŒ๋ฅผ ๋†“์น˜์ง€ ๋งˆ์„ธ์š”.</p>
147
+ </div>
148
+ <div class="flex flex-1 justify-center">
149
+ <div class="flex justify-center">
150
+ <button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 @[480px]:h-12 @[480px]:px-5 bg-primary text-white text-sm font-bold leading-normal tracking-[0.015em] @[480px]:text-base @[480px]:font-bold @[480px]:leading-normal @[480px]:tracking-[0.015em] grow">
151
+ <span class="truncate">์ด๋ฒคํŠธ ๋ณด๋Ÿฌ๊ฐ€๊ธฐ</span>
152
+ </button>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ <!-- SectionHeader - Best Sellers -->
158
+ <h2 class="text-text-light dark:text-text-dark text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">์ง€๊ธˆ ๊ฐ€์žฅ ์ธ๊ธฐ ์žˆ๋Š”</h2>
159
+ <!-- ImageGrid - Best Sellers -->
160
+ <div class="grid grid-cols-[repeat(auto-fit,minmax(158px,1fr))] gap-4 p-4">
161
+ <div class="flex flex-col gap-3 pb-3 group">
162
+ <div class="w-full bg-center bg-no-repeat aspect-[3/4] bg-cover rounded-lg overflow-hidden transform group-hover:scale-105 transition-transform duration-300" data-alt="Gojo Satoru figure from Jujutsu Kaisen" style='background-image: url("1.png");'></div>
163
+ <div>
164
+ <p class="text-base font-medium leading-normal text-text-light dark:text-text-dark">์ฃผ์ˆ ํšŒ์ „ ๊ณ ์ฃ  ์‚ฌํ† ๋ฃจ</p>
165
+ <p class="text-sm font-normal leading-normal text-subtext-light dark:text-subtext-dark">โ‚ฉ180,000</p>
166
+ </div>
167
+ </div>
168
+ <div class="flex flex-col gap-3 pb-3 group">
169
+ <div class="w-full bg-center bg-no-repeat aspect-[3/4] bg-cover rounded-lg overflow-hidden transform group-hover:scale-105 transition-transform duration-300" data-alt="Nezuko figure from Demon Slayer" style='background-image: url("1.png");'></div>
170
+ <div>
171
+ <p class="text-base font-medium leading-normal text-text-light dark:text-text-dark">๊ท€๋ฉธ์˜ ์นผ๋‚  ๋„ค์ฆˆ์ฝ”</p>
172
+ <p class="text-sm font-normal leading-normal text-subtext-light dark:text-subtext-dark">โ‚ฉ135,000</p>
173
+ </div>
174
+ </div>
175
+ <div class="flex flex-col gap-3 pb-3 group">
176
+ <div class="w-full bg-center bg-no-repeat aspect-[3/4] bg-cover rounded-lg overflow-hidden transform group-hover:scale-105 transition-transform duration-300" data-alt="Hatsune Miku figure" style='background-image: url("1.png");'></div>
177
+ <div>
178
+ <p class="text-base font-medium leading-normal text-text-light dark:text-text-dark">ํ•˜์ธ ๋„ค ๋ฏธ์ฟ  2.0</p>
179
+ <p class="text-sm font-normal leading-normal text-subtext-light dark:text-subtext-dark">โ‚ฉ210,000</p>
180
+ <p class="text-sm font-normal leading-normal text-primary">15% ํ• ์ธ</p>
181
+ </div>
182
+ </div>
183
+ <div class="flex flex-col gap-3 pb-3 group">
184
+ <div class="w-full bg-center bg-no-repeat aspect-[3/4] bg-cover rounded-lg overflow-hidden transform group-hover:scale-105 transition-transform duration-300" data-alt="Monkey D. Luffy figure from One Piece" style='background-image: url("7.png");'></div>
185
+ <div>
186
+ <p class="text-base font-medium leading-normal text-text-light dark:text-text-dark">์›ํ”ผ์Šค ๋ชฝํ‚ค D. ๋ฃจํ”ผ</p>
187
+ <p class="text-sm font-normal leading-normal text-subtext-light dark:text-subtext-dark">โ‚ฉ195,000</p>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </main>
194
+ <!-- Footer -->
195
+ <footer class="bg-surface-light dark:bg-surface-dark border-t border-border-light dark:border-border-dark mt-10">
196
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
197
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
198
+ <div class="space-y-4">
199
+ <h3 class="text-sm font-semibold text-subtext-light dark:text-subtext-dark uppercase tracking-wider">ํšŒ์‚ฌ ์ •๋ณด</h3>
200
+ <ul class="space-y-2">
201
+ <li><a class="text-base text-text-light dark:text-text-dark hover:text-primary dark:hover:text-primary" href="#">ํšŒ์‚ฌ ์†Œ๊ฐœ</a></li>
202
+ <li><a class="text-base text-text-light dark:text-text-dark hover:text-primary dark:hover:text-primary" href="#">์ฑ„์šฉ</a></li>
203
+ <li><a class="text-base text-text-light dark:text-text-dark hover:text-primary dark:hover:text-primary" href="#">๊ณต์ง€์‚ฌํ•ญ</a></li>
204
+ </ul>
205
+ </div>
206
+ <div class="space-y-4">
207
+ <h3 class="text-sm font-semibold text-subtext-light dark:text-subtext-dark uppercase tracking-wider">๊ณ ๊ฐ ์ง€์›</h3>
208
+ <ul class="space-y-2">
209
+ <li><a class="text-base text-text-light dark:text-text-dark hover:text-primary dark:hover:text-primary" href="#">๋ฌธ์˜ํ•˜๊ธฐ</a></li>
210
+ <li><a class="text-base text-text-light dark:text-text-dark hover:text-primary dark:hover:text-primary" href="#">FAQ</a></li>
211
+ <li><a class="text-base text-text-light dark:text-text-dark hover:text-primary dark:hover:text-primary" href="#">๋ฐฐ์†ก ์ •๋ณด</a></li>
212
+ </ul>
213
+ </div>
214
+ <div class="space-y-4">
215
+ <h3 class="text-sm font-semibold text-subtext-light dark:text-subtext-dark uppercase tracking-wider">๋ฒ•์  ๊ณ ์ง€</h3>
216
+ <ul class="space-y-2">
217
+ <li><a class="text-base text-text-light dark:text-text-dark hover:text-primary dark:hover:text-primary" href="#">์ด์šฉ์•ฝ๊ด€</a></li>
218
+ <li><a class="text-base text-text-light dark:text-text-dark hover:text-primary dark:hover:text-primary" href="#">๊ฐœ์ธ์ •๋ณด ์ฒ˜๋ฆฌ๋ฐฉ์นจ</a></li>
219
+ </ul>
220
+ </div>
221
+ <div class="space-y-4">
222
+ <h3 class="text-sm font-semibold text-subtext-light dark:text-subtext-dark uppercase tracking-wider">์†Œ์…œ ๋ฏธ๋””์–ด</h3>
223
+ <div class="flex space-x-4">
224
+ <a class="text-subtext-light dark:text-subtext-dark hover:text-primary dark:hover:text-primary" href="#">
225
+ <span class="sr-only">Facebook</span>
226
+ <svg aria-hidden="true" class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24"><path clip-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" fill-rule="evenodd"></path></svg>
227
+ </a>
228
+ <a class="text-subtext-light dark:text-subtext-dark hover:text-primary dark:hover:text-primary" href="#">
229
+ <span class="sr-only">Twitter</span>
230
+ <svg aria-hidden="true" class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.71v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path></svg>
231
+ </a>
232
+ <a class="text-subtext-light dark:text-subtext-dark hover:text-primary dark:hover:text-primary" href="#">
233
+ <span class="sr-only">Instagram</span>
234
+ <svg aria-hidden="true" class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24"><path clip-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.024.06 1.378.06 3.808s-.012 2.784-.06 3.808c-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.024.048-1.378.06-3.808.06s-2.784-.013-3.808-.06c-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.048-1.024-.06-1.378-.06-3.808s.012-2.784.06-3.808c.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 016.345 2.525c.636-.247 1.363-.416 2.427-.465C9.793 2.013 10.147 2 12.315 2zm-1.002 6.363a4.932 4.932 0 11-9.863 0 4.932 4.932 0 019.863 0zm-4.931 1.056a3.877 3.877 0 100-7.754 3.877 3.877 0 000 7.754zM20 5.869a1.144 1.144 0 100 2.288 1.144 1.144 0 000-2.288z" fill-rule="evenodd"></path></svg>
235
+ </a>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ <div class="mt-8 border-t border-border-light dark:border-border-dark pt-8 text-center">
240
+ <p class="text-base text-subtext-light dark:text-subtext-dark">ยฉ 2024 Figure Shop. ๋ชจ๋“  ๊ถŒ๋ฆฌ ๋ณด์œ .</p>
241
+ </div>
242
+ </div>
243
+ </footer>
244
+ </div>
245
+ </div>
246
+ </body></html>