-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
566 lines (536 loc) · 55.5 KB
/
Copy pathindex.html
File metadata and controls
566 lines (536 loc) · 55.5 KB
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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
<!DOCTYPE html>
<html lang="id" class="scroll-smooth scroll-pt-48">
<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">
<meta property="og:title" content="NTSR.ID - Get your design today!">
<meta property="og:site_name" content="NTSR.ID">
<meta property="og:url" content="https://ntsr.site">
<meta property="og:description" content="Mau buat sosmed kamu terlihat lebih keren dan unik dengan style yang khas?">
<meta property="og:type" content="website">
<meta property="og:image" content="https://ntsr.site/dist/img/ntsr-embed.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="description" content="Mau buat sosmed kamu terlihat lebih keren dan unik dengan style yang khas?">
<title>NTSR.ID - Get your design today!</title>
<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=Poppins:wght@400;500;600;700" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=satoshi@700,500,400" rel="stylesheet">
<link href="dist/main.css" rel="stylesheet">
<script src="dist/main.js" async></script>
</head>
<body x-data="{mobileNav: false}">
<div class="bg-[#070707] min-w-full min-h-screen prose prose-invert text-white">
<!-- Header -->
<header class="px-4 bg-[#070707]/50 fixed top-0 flex w-full items-center justify-between h-16 z-20 backdrop-blur lg:px-10 xl:px-20 2xl:px-40">
<!-- Logo & Site Title -->
<div class="flex items-center">
<a href="#home" class="no-underline peer" @click="window.scrollTo(0, 0)">
<img src="dist/img/ntsr.png" alt="Logo" class="w-6 h-6 mr-4 invert lg:w-10 lg:h-10">
</a>
<h1 class="m-0 text-base font-light transition duration-300 transform lg:text-lg lg:-translate-y-12 lg:peer-hover:translate-y-0"><strong class="font-medium">NTSR</strong>.ID</h1>
</div>
<!-- Desktop Menu -->
<nav class="flex">
<ul class="hidden gap-4 list-none lg:flex not-prose">
<li>
<a href="#home" class="px-4 py-2 text-white transition rounded-full hover:bg-slate-50/20 active:bg-slate-50/30" @click="window.scrollTo(0, 0)">Home</a>
</li>
<li>
<a href="#portfolio" class="px-4 py-2 text-white transition rounded-full hover:bg-slate-50/20 active:bg-slate-50/30">Portfolio</a>
</li>
<li>
<a href="#harga" class="px-4 py-2 text-white transition rounded-full hover:bg-slate-50/20 active:bg-slate-50/30">Harga</a>
</li>
<li>
<a href="#review" class="px-4 py-2 text-white transition rounded-full hover:bg-slate-50/20 active:bg-slate-50/30">Review</a>
</li>
<li>
<a href="//bio.ntsr.site" class="relative px-4 py-2 font-medium text-black transition bg-white rounded-full hover:bg-slate-200 group" target="_blank">
<span class="group-hover:invisible">Tertarik buat order?</span>
<span class="absolute inset-0 items-center justify-center hidden group-hover:flex">Ayo mulai!</span>
</a>
</li>
</ul>
<button type="button" class="p-3 mr-4 overflow-hidden text-white transition rounded-full hover:bg-slate-50/10 lg:hidden" @click="mobileNav = !mobileNav">
<svg width="25" height="22" viewBox="0 0 25 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M25 1.56286C25 2.42764 24.3021 3.12571 23.4375 3.12571H1.5625C0.697917 3.12571 0 2.42764 0 1.56286C0 0.698076 0.697917 0 1.5625 0H23.4375C24.3021 0 25 0.698076 25 1.56286ZM6.77083 18.7543H1.5625C0.697917 18.7543 0 19.4524 0 20.3171C0 21.1819 0.697917 21.88 1.5625 21.88H6.77083C7.63542 21.88 8.33333 21.1819 8.33333 20.3171C8.33333 19.4524 7.63542 18.7543 6.77083 18.7543ZM15.1042 9.37714H1.5625C0.697917 9.37714 0 10.0752 0 10.94C0 11.8048 0.697917 12.5029 1.5625 12.5029H15.1042C15.9688 12.5029 16.6667 11.8048 16.6667 10.94C16.6667 10.0752 15.9688 9.37714 15.1042 9.37714Z" /></svg>
</button>
</nav>
</header>
<main class="[&>*]:px-4 lg:[&>*]:px-20 2xl:[&>*]:px-40">
<!-- Primary Site Description -->
<div class="mb-16 scale">
<h2 class="mt-0 mb-0 pt-24 text-[46px] leading-[110%] font-['Satoshi'] font-medium max-w-xl lg:max-w-5xl lg:text-[4rem] 2xl:text-[5rem]">Kenalin, gw <span class="inline-block px-1 pt-2 pb-6 leading-5 text-black bg-white lg:leading-none">ray</span><br>gw desainer grafis yang suka ui/ux, poster, maupun casual design.</h2>
</div>
<div class="mb-32 fade-in-up 2xl:mb-36">
<!-- Tools Subsection -->
<h3 class="text-[24px] leading-9 font-normal max-w-xs mb-6 lg:max-w-full">Tools yang gw pake buat nge-desain</h3>
<div class="grid gap-4 lg:flex lg:gap-8">
<div class="grid items-center gap-4 delay-200 fade-in-up tools-grid">
<svg width="38" height="37" viewBox="0 0 38 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.6915 13.7485C16.9496 14.1533 17.0842 14.6387 17.0683 15.1479C17.0683 15.8436 16.91 16.3812 16.5775 16.7765C15.8444 17.6493 14.5429 17.8991 13.4583 17.8991H12.6192C12.4292 17.8991 12.2233 17.8833 12.0017 17.8675V12.5547C12.1125 12.5389 12.3342 12.5231 12.6508 12.5389C12.9517 12.5231 13.3158 12.5231 13.7275 12.5231C14.8184 12.5231 16.0645 12.765 16.6915 13.7485Z" fill="white"/><path d="M31.2708 0H6.72917C3.00833 0 0 3.00427 0 6.72009V30.2799C0 33.9957 3.00833 37 6.72917 37H31.2708C34.9917 37 38 33.9957 38 30.2799V6.72009C38 3.00427 34.9917 0 31.2708 0ZM19.57 18.4209C18.9367 19.3064 18.05 19.9705 17.0208 20.35C15.9442 20.7453 14.7567 20.8876 13.4583 20.8876C13.0783 20.8876 12.825 20.8876 12.6667 20.8718C12.5083 20.856 12.2867 20.856 11.9858 20.856V25.9316C12.0017 26.0423 11.9225 26.1372 11.8117 26.153H8.74C8.61333 26.153 8.55 26.0897 8.55 25.9474V9.67692C8.55 9.56624 8.5975 9.50299 8.70833 9.50299C8.9775 9.50299 9.23083 9.50299 9.595 9.48718C9.975 9.47137 10.3708 9.47137 10.7983 9.45555C11.2258 9.43974 11.685 9.43974 12.1758 9.42393C12.6667 9.40812 13.1417 9.40812 13.6167 9.40812C14.915 9.40812 15.9917 9.56624 16.8783 9.89829C17.67 10.1671 18.3983 10.6098 19 11.1949C19.5067 11.7009 19.9025 12.3175 20.1558 12.9974C20.3933 13.6615 20.52 14.3415 20.52 15.053C20.52 16.4128 20.2033 17.5355 19.57 18.4209ZM30.7958 24.5718C30.3525 25.2043 29.735 25.6944 29.0225 25.9791C28.2467 26.3111 27.2967 26.485 26.1567 26.485C25.4283 26.485 24.7158 26.4218 24.0033 26.2795C23.4492 26.1846 22.895 26.0107 22.3883 25.7735C22.2775 25.7103 22.1983 25.5996 22.2142 25.4731V22.7218C22.2142 22.6744 22.23 22.6111 22.2775 22.5795C22.325 22.5479 22.3725 22.5637 22.42 22.5953C23.0375 22.959 23.6867 23.212 24.3833 23.3701C24.985 23.5282 25.6183 23.6073 26.2517 23.6073C26.8533 23.6073 27.2808 23.5282 27.5658 23.3859C27.8192 23.2752 27.9933 23.0064 27.9933 22.7218C27.9933 22.5004 27.8667 22.2949 27.6133 22.0893C27.36 21.8838 26.8375 21.6466 26.0617 21.3462C25.2542 21.0615 24.51 20.6821 23.8133 20.2077C23.3225 19.8598 22.9108 19.4013 22.61 18.8637C22.3567 18.3577 22.23 17.8043 22.2458 17.2509C22.2458 16.5709 22.4358 15.9226 22.7842 15.3376C23.18 14.7051 23.7658 14.1991 24.4467 13.8829C25.1908 13.5034 26.125 13.3295 27.2492 13.3295C27.8983 13.3295 28.5633 13.3769 29.2125 13.4718C29.6875 13.535 30.1467 13.6615 30.5742 13.8355C30.6375 13.8513 30.7008 13.9145 30.7325 13.9778C30.7483 14.041 30.7642 14.1043 30.7642 14.1675V16.7449C30.7642 16.8081 30.7325 16.8714 30.685 16.903C30.5425 16.9346 30.4633 16.9346 30.4 16.903C29.925 16.65 29.4183 16.4761 28.88 16.3654C28.2942 16.2389 27.7083 16.1598 27.1067 16.1598C26.79 16.144 26.4575 16.1915 26.1567 16.2705C25.9508 16.3179 25.7767 16.4286 25.6658 16.5868C25.5867 16.7132 25.5392 16.8714 25.5392 17.0137C25.5392 17.156 25.6025 17.2983 25.6975 17.4248C25.84 17.5987 26.03 17.741 26.2358 17.8517C26.6 18.0415 26.98 18.2154 27.36 18.3735C28.215 18.6581 29.0383 19.0534 29.7983 19.5278C30.3208 19.8598 30.7483 20.3026 31.0492 20.8402C31.3025 21.3462 31.4292 21.8996 31.4133 22.4688C31.4292 23.212 31.2075 23.9551 30.7958 24.5718Z" fill="white"/></svg>
<span>Adobe Photoshop</span>
</div>
<div class="grid items-center gap-4 delay-300 fade-in-up tools-grid">
<svg width="26" height="37" viewBox="0 0 26 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.8353 12.711C24.7394 11.4731 26 9.33942 26 6.92208C26 3.10492 22.8602 0 19.0022 0H6.99784C3.13976 0 0 3.10492 0 6.92208C0 9.33942 1.26058 11.4731 3.16469 12.711C1.26058 13.949 0 16.0827 0 18.5C0 20.9173 1.26058 23.051 3.16469 24.289C1.26058 25.5254 0 27.659 0 30.0779C0 33.8951 3.15534 37 7.03524 37C10.9557 37 14.1468 33.8612 14.1468 30.0024V23.6183C15.3903 24.7391 17.042 25.4221 18.851 25.4221H19.0022C22.8602 25.4221 26 22.3172 26 18.5C26 16.0827 24.7394 13.949 22.8353 12.711ZM14.1453 2.26779H19.0022C21.5965 2.26779 23.7079 4.35521 23.7079 6.92208C23.7079 9.48896 21.5965 11.5779 19.0022 11.5779H14.1453V2.26779ZM2.2921 6.92208C2.2921 4.35521 4.40345 2.26779 6.99784 2.26779H11.8547V11.5779H6.99784C4.40345 11.5779 2.2921 9.48896 2.2921 6.92208ZM2.2921 18.5C2.2921 15.9331 4.40345 13.8457 6.99784 13.8457H11.8547V23.1558H6.96824C4.38787 23.1389 2.2921 21.0561 2.2921 18.5ZM11.8547 30.0024C11.8547 32.6109 9.69196 34.7322 7.03524 34.7322C4.42059 34.7322 2.2921 32.6448 2.2921 30.0779C2.2921 27.511 4.40345 25.4221 6.99784 25.4221H11.8547V30.0024ZM19.0022 23.1558H18.851C16.2566 23.1558 14.1468 21.0669 14.1468 18.5C14.1468 15.9331 16.2566 13.8457 18.851 13.8457H19.0022C21.5965 13.8457 23.7079 15.9331 23.7079 18.5C23.7079 21.0669 21.5965 23.1558 19.0022 23.1558Z" fill="white"/></svg>
<span>Figma</span>
</div>
</div>
</div>
<!-- Portfolio Arrow Down -->
<div class="mb-48 fade-in-up 2xl:mb-52">
<a href="#portfolio" class="flex justify-end">
<svg width="40" height="21" viewBox="0 0 40 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M39.1693 0.847646C38.9037 0.579056 38.5877 0.365869 38.2396 0.220385C37.8914 0.0749016 37.518 0 37.1409 0C36.7638 0 36.3904 0.0749016 36.0422 0.220385C35.6941 0.365869 35.3782 0.579056 35.1126 0.847646L22.0283 13.9722C21.7628 14.2408 21.4468 14.454 21.0987 14.5994C20.7505 14.7449 20.3771 14.8198 20 14.8198C19.6229 14.8198 19.2495 14.7449 18.9013 14.5994C18.5532 14.454 18.2372 14.2408 17.9717 13.9722L4.88742 0.847646C4.62185 0.579056 4.30588 0.365869 3.95775 0.220385C3.60962 0.0749016 3.23622 0 2.85908 0C2.48195 0 2.10855 0.0749016 1.76042 0.220385C1.41229 0.365869 1.09632 0.579056 0.830741 0.847646C0.298656 1.38456 0 2.11085 0 2.86791C0 3.62496 0.298656 4.35126 0.830741 4.88817L13.9435 18.0414C15.5505 19.6513 17.7288 20.5556 20 20.5556C22.2712 20.5556 24.4495 19.6513 26.0565 18.0414L39.1693 4.88817C39.7013 4.35126 40 3.62496 40 2.86791C40 2.11085 39.7013 1.38456 39.1693 0.847646Z" fill="white"/>
</svg>
</a>
</div>
<!-- Portfolio -->
<section data-aos="fade-up">
<div class="mb-10 font-['Satoshi'] lg:grid grid-cols-2">
<h3 id="portfolio" class="text-[32px] font-['Satoshi'] font-medium leading-9 max-w-xs m-0 mb-6 lg:text-5xl">Portfolio<br>gw</h3>
<!-- Social Needs -->
<div class="lg:text-right">
<div x-data="slider" class="swiper">
<div class="swiper-wrapper [&>*]:!w-[250px] [&>*]:!h-[250px] lg:[&>*]:!w-[206px] lg:[&>*]:!h-[206px] not-prose">
<div x-data class="relative overflow-hidden bg-white rounded-2xl swiper-slide">
<img src="dist/img/socials/1.jpg" alt="Socials 1" class="w-full h-full" x-ref="art">
<div @click="$dispatch('enlarge', $refs.art)" class="absolute top-0 left-0 z-10 flex items-center justify-center w-full h-full transition duration-300 opacity-0 cursor-pointer hover:bg-black/50 hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 48 48"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m6 6 10 10M6 42l10-10M42 42 32 32M42 6 32 16M33 6h9v9M42 33v9h-9M15 42H6v-9M6 15V6h9"></path></svg>
</div>
</div>
<div x-data class="overflow-hidden bg-white rounded-2xl swiper-slide">
<img src="dist/img/socials/2.jpg" alt="Socials 2" class="w-full h-full" x-ref="art">
<div @click="$dispatch('enlarge', $refs.art)" class="absolute top-0 left-0 z-10 flex items-center justify-center w-full h-full transition duration-300 opacity-0 cursor-pointer hover:bg-black/50 hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 48 48"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m6 6 10 10M6 42l10-10M42 42 32 32M42 6 32 16M33 6h9v9M42 33v9h-9M15 42H6v-9M6 15V6h9"></path></svg>
</div>
</div>
<div x-data class="overflow-hidden bg-white rounded-2xl swiper-slide">
<img src="dist/img/socials/3.jpg" alt="Socials 3" class="w-full h-full" x-ref="art">
<div @click="$dispatch('enlarge', $refs.art)" class="absolute top-0 left-0 z-10 flex items-center justify-center w-full h-full transition duration-300 opacity-0 cursor-pointer hover:bg-black/50 hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 48 48"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m6 6 10 10M6 42l10-10M42 42 32 32M42 6 32 16M33 6h9v9M42 33v9h-9M15 42H6v-9M6 15V6h9"></path></svg>
</div>
</div>
<div x-data class="overflow-hidden bg-white rounded-2xl swiper-slide">
<img src="dist/img/socials/4.jpg" alt="Socials 4" class="w-full h-full" x-ref="art">
<div @click="$dispatch('enlarge', $refs.art)" class="absolute top-0 left-0 z-10 flex items-center justify-center w-full h-full transition duration-300 opacity-0 cursor-pointer hover:bg-black/50 hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 48 48"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m6 6 10 10M6 42l10-10M42 42 32 32M42 6 32 16M33 6h9v9M42 33v9h-9M15 42H6v-9M6 15V6h9"></path></svg>
</div>
</div>
</div>
</div>
<h3 class="max-w-xs mt-4 mb-0 text-2xl font-medium lg:max-w-full">Social Needs</h3>
<p>biasanya berupa poster pricelist, promo, template, dsb.</p>
</div>
<!-- Social Needs End -->
</div>
</section>
<!-- UI/UX -->
<section data-aos="fade-up">
<div class="mb-10 font-['Satoshi']">
<div x-data="slider" class="swiper">
<div class="swiper-wrapper [&>*]:!w-[333px] [&>*]:!h-[250px] lg:[&>*]:!w-[412px] lg:[&>*]:!h-[309px] not-prose">
<div x-data class="overflow-hidden bg-white rounded-2xl swiper-slide">
<img src="dist/img/design/1.jpg" alt="UI/UX 1" class="w-full h-full" x-ref="art">
<div @click="$dispatch('enlarge', $refs.art)" class="absolute top-0 left-0 z-10 flex items-center justify-center w-full h-full transition duration-300 opacity-0 cursor-pointer hover:bg-black/50 hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 48 48"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m6 6 10 10M6 42l10-10M42 42 32 32M42 6 32 16M33 6h9v9M42 33v9h-9M15 42H6v-9M6 15V6h9"></path></svg>
</div>
</div>
<div x-data class="overflow-hidden bg-white rounded-2xl swiper-slide">
<img src="dist/img/design/2.jpg" alt="UI/UX 2" class="w-full h-full" x-ref="art">
<div @click="$dispatch('enlarge', $refs.art)" class="absolute top-0 left-0 z-10 flex items-center justify-center w-full h-full transition duration-300 opacity-0 cursor-pointer hover:bg-black/50 hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 48 48"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m6 6 10 10M6 42l10-10M42 42 32 32M42 6 32 16M33 6h9v9M42 33v9h-9M15 42H6v-9M6 15V6h9"></path></svg>
</div>
</div>
<div x-data class="overflow-hidden bg-white rounded-2xl swiper-slide">
<img src="dist/img/design/3.jpg" alt="UI/UX 3" class="w-full h-full" x-ref="art">
<div @click="$dispatch('enlarge', $refs.art)" class="absolute top-0 left-0 z-10 flex items-center justify-center w-full h-full transition duration-300 opacity-0 cursor-pointer hover:bg-black/50 hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 48 48"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m6 6 10 10M6 42l10-10M42 42 32 32M42 6 32 16M33 6h9v9M42 33v9h-9M15 42H6v-9M6 15V6h9"></path></svg>
</div>
</div>
</div>
</div>
<h3 class="max-w-xs mt-4 mb-0 text-2xl font-medium lg:max-w-full">
<span class="lg:hidden">UI / UX</span>
<span class="hidden lg:block">User Interface / User Experience</span>
</h3>
<p><span class="hidden lg:inline">Atau disebut sebagai UI/UX, </span>buat desain web dan aplikasi (tidak termasuk kode)</p>
</div>
</section>
<!-- UI/UX End -->
<!-- Banner Start -->
<section data-aos="fade-up">
<div class="mb-10 font-['Satoshi']">
<div class="grid-cols-2 lg:grid">
<div></div>
<div>
<div x-data="slider" class="swiper">
<div class="swiper-wrapper [&>*]:!w-[346px] [&>*]:!h-[132px] lg:[&>*]:!w-[463px] lg:[&>*]:!h-[177px] not-prose">
<div x-data class="overflow-hidden bg-white rounded-2xl swiper-slide">
<img src="dist/img/banner/1.jpg" alt="Banner 1" class="w-full h-full" x-ref="art">
<div @click="$dispatch('enlarge', $refs.art)" class="absolute top-0 left-0 z-10 flex items-center justify-center w-full h-full transition duration-300 opacity-0 cursor-pointer hover:bg-black/50 hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 48 48"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m6 6 10 10M6 42l10-10M42 42 32 32M42 6 32 16M33 6h9v9M42 33v9h-9M15 42H6v-9M6 15V6h9"></path></svg>
</div>
</div>
<div x-data class="overflow-hidden bg-white rounded-2xl swiper-slide">
<img src="dist/img/banner/2.jpg" alt="Banner 2" class="w-full h-full" x-ref="art">
<div @click="$dispatch('enlarge', $refs.art)" class="absolute top-0 left-0 z-10 flex items-center justify-center w-full h-full transition duration-300 opacity-0 cursor-pointer hover:bg-black/50 hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 48 48"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m6 6 10 10M6 42l10-10M42 42 32 32M42 6 32 16M33 6h9v9M42 33v9h-9M15 42H6v-9M6 15V6h9"></path></svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-cols-2 lg:grid">
<div class="justify-between col-span-2 lg:flex">
<div class="lg:order-2 lg:text-right">
<h3 class="max-w-xs mt-4 mb-0 text-2xl font-medium lg:max-w-full">Banner</h3>
<p>biasanya dipakai untuk website, atau post grid di instagram.</p>
</div>
<div class="lg:order-1">
<div class="flex items-center justify-between">
<p class="w-48 lg:w-auto">Untuk lebih lengkapnya bisa kamu cek disini</p>
<svg class="mr-4 transform rotate-45 translate-y-8" width="31" height="33" viewBox="0 0 31 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.6833 19.4397C24.0872 21.6195 23.7781 23.9406 23.573 24.8288C23.4486 24.5557 23.1135 23.8521 22.7685 23.2226C22.4235 22.5931 21.8401 22.0787 21.5916 21.9002C21.2475 21.6482 20.4407 21.2178 19.9665 21.5127C19.3738 21.8814 19.4844 22.3905 19.6549 22.676C19.8253 22.9614 20.4245 23.122 20.7617 24.0755C21.099 25.029 21.2141 26.2587 21.4775 27.6719C21.741 29.0852 21.5334 30.2284 21.4256 30.6311C21.3177 31.0337 21.2439 31.4935 21.5729 32.1091C21.8361 32.6016 22.3627 32.8482 22.5932 32.91C22.7542 32.9851 23.2708 33.0724 24.0496 32.8207C25.0139 32.509 27.016 29.2284 27.567 28.3256L27.5823 28.3007C28.1106 27.4352 30.2356 23.9287 30.4551 22.7407C30.6308 21.7904 30.0135 21.4395 29.6829 21.3829C29.3676 21.3304 28.6623 21.3205 28.3629 21.7006C28.0634 22.0807 27.004 23.6382 26.5117 24.3694C26.9155 23.2309 27.212 17.6999 25.8998 14.8547C24.5875 12.0095 22.7784 9.17513 21.6135 7.80802C20.4486 6.44092 17.9471 4.7157 14.8207 3.11073C11.6942 1.50576 6.52691 0.696618 5.32679 0.566858C4.12667 0.437097 2.16332 0.390544 1.86283 0.405931C1.56233 0.421319 1.07749 0.387311 0.706927 0.479832C0.41048 0.553845 0.31914 0.759544 0.310526 0.85314C0.252715 1.25324 0.305777 2.05068 0.980509 2.03967C1.82392 2.0259 3.62317 2.31619 7.24191 3.18992C10.8606 4.06366 13.3741 5.74414 15.671 7.12683C17.9678 8.50951 20.5263 11.4968 21.6516 13.3807C22.7768 15.2647 23.1785 16.715 23.6833 19.4397Z" fill="white"/>
</svg>
</div>
<div class="flex gap-2 font-['Satoshi']">
<a href="//link.ntsr.site/dribbble" class="flex items-center justify-center gap-4 p-4 transition bg-white rounded-2xl hover:bg-slate-200 lg:px-4 lg:py-2 lg:rounded-full" target="_blank">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0C6.71875 0 0 6.71875 0 15C0 23.2812 6.71875 30 15 30C23.265 30 30 23.2812 30 15C30 6.71875 23.265 0 15 0ZM24.9075 6.91375C26.6975 9.09375 27.7712 11.8763 27.8037 14.8863C27.3813 14.805 23.1512 13.9425 18.8875 14.4788C18.79 14.2675 18.7087 14.04 18.6112 13.8125C18.3512 13.1938 18.0575 12.56 17.765 11.9575C22.4837 10.0375 24.6313 7.2725 24.9075 6.91375ZM16.7725 10.0538C14.6737 6.19875 12.3475 3.04125 11.99 2.55375C12.95 2.32625 13.9587 2.2125 15 2.2125C18.2537 2.2125 21.2313 3.4325 23.4925 5.43375C23.265 5.75875 21.3288 8.34625 16.7725 10.0538ZM9.55 3.41625C9.89125 3.87125 12.1687 7.04375 14.3 10.8187C8.3125 12.4125 3.025 12.3812 2.45625 12.3812C3.28625 8.41125 5.97125 5.10875 9.55 3.41625ZM2.18 14.625C2.7325 14.6412 8.9475 14.7225 15.3412 12.8038C15.7162 13.5188 16.0575 14.2513 16.3825 14.9838C16.22 15.0325 16.0413 15.0813 15.8775 15.13C9.2725 17.2612 5.75875 23.0862 5.465 23.5737C3.43125 21.3125 2.17875 18.3025 2.17875 15.0162L2.18 14.625ZM17.1963 17.115C17.2288 17.0988 17.245 17.0988 17.2775 17.0825C19.0837 21.7513 19.8163 25.6725 20.0113 26.795C18.465 27.4625 16.7738 27.82 15 27.82C12.0387 27.82 9.30625 26.8113 7.1425 25.12C7.37 24.6475 9.9725 19.6362 17.1963 17.115ZM22.1425 25.6238C22.0125 24.8425 21.3287 21.1012 19.6537 16.4963C23.6725 15.8625 27.1863 16.9038 27.625 17.05C27.0713 20.6125 25.0225 23.6875 22.1425 25.6238Z" fill="black"/>
</svg>
<strong class="text-black">Dribbble</strong>
</a>
<a href="//link.ntsr.site/deviantart" class="flex items-center justify-center gap-4 p-4 transition bg-white rounded-2xl hover:bg-slate-200 lg:px-4 lg:py-2 lg:rounded-full" target="_blank">
<svg width="19" height="30" viewBox="0 0 19 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.7573 5.45721L13.0012 15.9555L13.4349 16.5123H18.7573V23.9977H9.32591L8.53458 24.5369L5.97304 29.4607C5.95545 29.4607 5.46893 29.9648 5.43376 30H0V24.5369L5.46307 14.0211L5.02931 13.4818H0V6.00235H9.1442L9.93552 5.46307L12.4971 0.539273C12.5147 0.539273 13.0012 0.03517 13.0363 0H18.7573V5.45721Z" fill="black"/>
</svg>
<strong class="text-black">DeviantArt</strong>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Banner End -->
<!-- Pricing Headline -->
<section data-aos="fade-up">
<div class="mb-10">
<div class="items-center justify-between md:flex">
<!-- Left -->
<h3 id="harga" class="text-[32px] font-['Satoshi'] leading-9 font-normal max-w-sm mb-4 lg:text-5xl lg:max-w-xl">Harga yang <strong class="italic font-medium">affordable,</strong><br>gak bakal bikin kantong kamu kering!</h3>
<!-- Right -->
<div class="grid items-center justify-center grid-cols-2 gap-2 p-8 bg-white rounded-2xl lg:p-4 lg:px-6 lg:rounded-3xl">
<div class="[&>*]:text-black [&>*]:text-sm [&>*]:block [&>*]:leading-relaxed">
<strong class="m-0 font-bold">1 Desain Feeds</strong>
<strong class="m-0 font-medium">Maksimal 3x revisi</strong>
<strong class="m-0 font-medium">Resolusi 2K</strong>
<strong class="m-0 font-medium">Format JPG & PNG</strong>
</div>
<div>
<strong class="block text-2xl text-black/50">IDR</strong>
<strong class="font-bold text-black text-7xl">20K</strong>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing List -->
<section data-aos="fade-up">
<div class="grid-cols-3 gap-20 mb-12 lg:grid">
<!-- Pricing 1 Grid -->
<div class="grid items-center gap-2 2xl:gap-0 p-8 rounded-2xl bg-[#CFE2FF] [&>*]:text-black [&>*]:font-medium [&>*]:m-0 overflow-hidden relative mb-10">
<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M59.3521 17.0186L55.0895 9.93684L30.3418 0L30.3195 0.00992195L30.2972 0L5.54953 9.93684L1.28696 17.0186C-0.341246 19.7348 0.962308 23.262 3.96346 24.2617L21.2393 32.0107C23.4424 32.7449 25.8612 31.8495 27.0557 29.8576L30.2923 23.7854L33.5784 29.8576C34.7729 31.852 37.1917 32.7474 39.3948 32.0107L56.6706 24.2617C59.6718 23.2595 60.9753 19.7348 59.3471 17.0186H59.3521ZM30.3195 19.1072L16.0622 13.8188L30.3195 8.02438L44.5768 13.8188L30.3195 19.1072ZM47.6523 33.7297L55.0895 30.4058L55.0722 51.2171L30.3195 59.4747L5.56688 51.2171L5.54953 30.4058L12.9867 33.7297L12.9966 45.8518L26.617 50.3961L26.6096 36.4607C27.9503 35.9026 29.1771 35.0667 30.1758 33.948L30.3195 33.7892L30.4633 33.948C31.462 35.0667 32.6887 35.9026 34.0295 36.4607L34.022 50.3961L47.6424 45.8518L47.6523 33.7297Z" fill="black"/>
</svg>
<strong class="text-3xl text-black">Starter</strong>
<p>Cocok untuk kamu yang baru mulai usaha online, seperti top up game, toko digital, maupun menjadikannya sebagai template jualan produk.</p>
<ul class="[&>*]:font-semibold [&>*]:m-0">
<li>3 Desain feeds</li>
<li>Maksimal 5x revisi</li>
<li>Resolusi 2K</li>
<li>Format JPG, PNG</li>
</ul>
<div>
<strong class="block text-2xl text-gray-400 text-black/50">IDR</strong>
<strong class="font-bold text-black text-7xl">60K</strong>
</div>
<svg class="absolute -bottom-8 -right-8" width="168" height="179" viewBox="0 0 168 179" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M176.317 51.0559L163.529 29.8105L89.2864 0L89.2194 0.0297659L89.1525 0L14.9094 29.8105L2.12174 51.0559C-2.76287 59.2043 1.14779 69.7861 10.1512 72.785L61.9786 96.0321C68.5881 98.2348 75.8444 95.5484 79.4279 89.5729L89.1377 71.3562L98.9961 89.5729C102.58 95.5559 109.836 98.2422 116.445 96.0321L168.273 72.785C177.276 69.7786 181.187 59.2043 176.302 51.0559H176.317ZM89.2194 57.3216L46.4475 41.4564L89.2194 24.0731L131.991 41.4564L89.2194 57.3216ZM141.218 101.189L163.529 91.2175L163.477 153.651L89.2194 178.424L14.9615 153.651L14.9094 91.2175L37.221 101.189L37.2508 137.555L78.112 151.188L78.0897 109.382C82.1119 107.708 85.792 105.2 88.7882 101.844L89.2194 101.368L89.6507 101.844C92.6468 105.2 96.327 107.708 100.349 109.382L100.327 151.188L141.188 137.555L141.218 101.189Z" fill="black" fill-opacity="0.15"/>
</svg>
</div>
<!-- Pricing 2 Grid -->
<div class="grid items-center gap-2 2xl:gap-0 p-8 rounded-2xl bg-[#FEEFD9] [&>*]:text-black [&>*]:font-medium [&>*]:m-0 overflow-hidden relative mb-10">
<svg width="52" height="61" viewBox="0 0 52 61" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M37.1329 10.901C34.3525 8.5394 31.4779 6.10094 28.5933 3.2189L25.9467 0.579712L23.3224 3.22138C19.3913 7.51494 16.5695 12.7044 15.1025 18.3379C15.0653 18.209 15.0307 18.09 14.996 17.9488L13.4248 11.8601L8.84777 16.1571C4.25087 20.4665 0.00339285 25.6235 0.000914741 34.1135C-0.0474221 39.8458 1.82115 45.4298 5.30979 49.9785C8.79843 54.5272 13.707 57.7797 19.2558 59.2192C21.4349 59.7718 23.6739 60.0523 25.9219 60.0544C29.331 60.0596 32.7076 59.3925 35.8586 58.0914C39.0096 56.7903 41.8731 54.8806 44.2853 52.4716C46.6975 50.0627 48.611 47.2017 49.9163 44.0525C51.2216 40.9032 51.8932 37.5275 51.8925 34.1185C51.8925 23.4328 45.0505 17.6242 37.1329 10.901ZM37.3039 48.7195C37.0338 48.9276 36.7463 49.1011 36.4688 49.2944C37.0402 47.9173 37.3349 46.4412 37.3361 44.9503C37.3361 38.6583 31.6365 36.148 25.9368 30.4533C19.7242 36.666 14.5375 38.6583 14.5375 44.9503C14.5488 46.529 14.8898 48.088 15.5387 49.5273C13.0298 47.8184 10.9798 45.5186 9.56929 42.8306C8.15875 40.1427 7.43099 37.149 7.45011 34.1135C7.38718 31.0265 8.38134 28.0108 10.2677 25.5665C10.5378 25.9927 10.8228 26.4041 11.1252 26.8055C11.7728 27.6803 12.6621 28.3467 13.6836 28.7227C14.705 29.0987 15.8141 29.1679 16.8744 28.9219C17.9499 28.6818 18.9335 28.1369 19.7074 27.3525C20.4814 26.568 21.0129 25.5771 21.2383 24.4984C22.1145 19.8369 23.8299 15.3733 26.3011 11.3248C28.3926 13.2478 30.4395 14.985 32.313 16.5784C40.2875 23.3461 44.4557 27.202 44.4557 34.1185C44.4621 36.9375 43.8206 39.7203 42.5805 42.252C41.3404 44.7837 39.5351 46.9965 37.3039 48.7195Z" fill="black"/>
</svg>
<strong class="text-3xl text-black">Deluxe</strong>
<p>Buat kamu yang mau bikin first page instagram full 12 post, dengan desain yang berbeda-beda tapi tetap satu style desain.</p>
<ul class="[&>*]:font-semibold [&>*]:m-0">
<li>12 Desain feeds</li>
<li>Maksimal 7x revisi</li>
<li>Resolusi 2K</li>
<li>Format JPG, PNG, PSD</li>
</ul>
<div>
<strong class="block text-2xl text-gray-400 text-black/50">IDR</strong>
<strong class="font-bold text-black text-7xl">240K</strong>
</div>
<svg class="absolute -bottom-8 -right-8" width="128" height="179" viewBox="0 0 128 179" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M111.399 30.964C103.057 23.8791 94.4336 16.5637 85.78 7.91756L77.8402 0L69.9672 7.92499C58.174 20.8057 49.7084 36.374 45.3075 53.2744C45.196 52.8878 45.092 52.531 44.9879 52.1072L40.2745 33.8411L26.5433 46.7322C12.7526 59.6605 0.0101786 75.1313 0.00274422 100.601C-0.142266 117.798 5.46346 134.55 15.9294 148.196C26.3953 161.842 41.1211 171.6 57.7675 175.919C64.3046 177.576 71.0218 178.418 77.7658 178.424C87.993 178.44 98.1229 176.438 107.576 172.535C117.029 168.632 125.619 162.903 132.856 155.676C140.092 148.449 145.833 139.866 149.749 130.418C153.665 120.971 155.68 110.843 155.678 100.616C155.678 68.5594 135.151 51.1333 111.399 30.964ZM111.912 144.419C111.101 145.044 110.239 145.564 109.406 146.144C111.121 142.013 112.005 137.584 112.008 133.112C112.008 114.236 94.9094 106.705 77.8104 89.6208C59.1726 108.259 43.6125 114.236 43.6125 133.112C43.6465 137.848 44.6695 142.525 46.616 146.843C39.0895 141.716 32.9395 134.817 28.7079 126.753C24.4763 118.689 22.293 109.708 22.3503 100.601C22.1615 91.3405 25.144 82.2933 30.8032 74.9603C31.6135 76.239 32.4685 77.4731 33.3755 78.6775C35.3185 81.3018 37.9864 83.3009 41.0507 84.4289C44.115 85.5569 47.4423 85.7646 50.6231 85.0264C53.8497 84.3063 56.8004 82.6717 59.1223 80.3183C61.4441 77.9648 63.0386 74.9922 63.715 71.7561C66.3436 57.7717 71.4898 44.3808 78.9033 32.2353C85.1779 38.0043 91.3186 43.2158 96.939 47.996C120.863 68.2992 133.367 79.867 133.367 100.616C133.386 109.073 131.462 117.422 127.742 125.017C124.021 132.612 118.605 139.25 111.912 144.419Z" fill="black" fill-opacity="0.15"/>
</svg>
</div>
<!-- Pricing 3 Grid -->
<div class="grid items-center gap-2 2xl:gap-0 p-8 rounded-2xl bg-[#FFDCF5] [&>*]:text-black [&>*]:font-medium [&>*]:m-0 overflow-hidden relative mb-10">
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M57.5932 15.1534L49.2965 3.52085C48.5167 2.43145 47.4882 1.54375 46.2966 0.931421C45.1049 0.31909 43.7845 -0.000216683 42.4447 1.1032e-07H16.6991C15.3614 0.00174184 14.0434 0.321986 12.8541 0.934237C11.6647 1.54649 10.6383 2.43314 9.85961 3.52085L1.54814 15.1559C0.496515 16.6467 -0.0454416 18.4373 0.00298473 20.2611C0.051411 22.0849 0.687629 23.8442 1.81689 25.2771L29.5719 59.4747L57.3614 25.2327C58.478 23.8006 59.1036 22.0469 59.1453 20.2314C59.1871 18.416 58.6428 16.6353 57.5932 15.1534ZM7.56908 19.4534L15.8781 7.82081C15.9717 7.69024 16.0949 7.58373 16.2376 7.51001C16.3803 7.43629 16.5385 7.39747 16.6991 7.39673H23.9011L20.3876 20.987H38.7562L35.2427 7.39673H42.4496C42.6103 7.39747 42.7684 7.43629 42.9111 7.51001C43.0539 7.58373 43.1771 7.69024 43.2707 7.82081L51.5772 19.4509C51.7005 19.6198 51.768 19.823 51.7702 20.0321C51.7724 20.2412 51.7092 20.4457 51.5895 20.6172L51.2887 20.987H38.7562L29.5719 47.7336L20.3876 20.987H7.86002L7.59621 20.6615C7.46255 20.4898 7.38774 20.2795 7.38286 20.062C7.37797 19.8444 7.44327 19.631 7.56908 19.4534Z" fill="black"/>
</svg>
<strong class="text-3xl text-black">Platinum</strong>
<p>Kalau yang ini khusus buat yang mau bikin complete instagram post. Atau buat yang mau langganan desain di kita nih.</p>
<ul class="[&>*]:font-semibold [&>*]:m-0">
<li>24 Desain feeds</li>
<li>Maksimal 10x revisi</li>
<li>Resolusi 2K</li>
<li>Format JPG, PNG, PSD</li>
</ul>
<div>
<strong class="block text-2xl text-gray-400 text-black/50">IDR</strong>
<strong class="font-bold text-black text-7xl">480K</strong>
</div>
<svg class="absolute -bottom-8 -right-8" width="128" height="179" viewBox="0 0 128 179" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M172.78 45.4606L147.89 10.5628C145.55 7.2946 142.465 4.6315 138.89 2.79451C135.315 0.957514 131.353 -0.000405908 127.334 0.000244472H50.0974C46.0843 0.00546967 42.1302 0.966203 38.5622 2.80295C34.9941 4.63971 31.9148 7.29967 29.5788 10.5628L4.64443 45.468C1.48954 49.9404 -0.136325 55.3123 0.00895418 60.7836C0.154233 66.2548 2.06289 71.5328 5.45067 75.8316L88.7157 178.424L172.084 75.6984C175.434 71.4022 177.311 66.141 177.436 60.6946C177.561 55.2481 175.928 49.9063 172.78 45.4606ZM22.7073 58.3605L47.6343 23.4627C47.915 23.071 48.2846 22.7514 48.7128 22.5303C49.1409 22.3091 49.6154 22.1926 50.0974 22.1904H71.7032L61.1629 62.9612H116.269L105.728 22.1904H127.349C127.831 22.1926 128.305 22.3091 128.733 22.5303C129.162 22.7514 129.531 23.071 129.812 23.4627L154.732 58.3531C155.101 58.8597 155.304 59.4692 155.311 60.0965C155.317 60.7237 155.128 61.3374 154.769 61.8517L153.866 62.9612H116.269L88.7157 143.201L61.1629 62.9612H23.5801L22.7886 61.9849C22.3876 61.4696 22.1632 60.8389 22.1486 60.1861C22.1339 59.5334 22.3298 58.8932 22.7073 58.3605Z" fill="black" fill-opacity="0.15"/>
</svg>
</div>
</div>
</section>
<!-- Review -->
<section data-aos="fade-up">
<div class="mb-40">
<div class="grid-cols-2 lg:grid">
<div class="lg:order-1">
<h3 id="review" class="text-[32px] font-['Satoshi'] leading-9 font-normal max-w-xs mt-0 mb-2 lg:text-5xl lg:max-w-sm">Apa kata mereka?</h3>
</div>
<div class="mb-10 lg:mb-0 lg:order-3 lg:col-span-full">
<!-- Review Slider -->
<div>
<div x-data="slider({
breakpoints: {
1024: {
grid: {
rows: 2,
fill: 'row',
},
},
}
})" class="swiper">
<div class="swiper-wrapper">
<!-- Review Slider Items -->
<div class="grid gap-4 swiper-slide !w-80 font-['Satoshi']">
<div>
<p class="text-2xl xl:text-4xl 2xl:text-5xl">Murah dan cepet</p>
</div>
<div>
<strong class="block m-0 text-xl font-medium leading-none">N4Store</strong>
<small class="text-base">@n4store.id</small>
</div>
</div>
<div class="grid gap-4 swiper-slide !w-80 font-['Satoshi']">
<div>
<p class="text-2xl xl:text-4xl 2xl:text-5xl">Lorem Ipsum dolor sit amet. ini cuma contoh teks, belom ada yang review</p>
</div>
<div>
<strong class="block m-0 text-xl font-medium leading-none">Username 2</strong>
<small class="text-base">@loremipsum_</small>
</div>
</div>
<div class="grid gap-4 swiper-slide !w-80 font-['Satoshi']">
<div>
<p class="text-2xl xl:text-4xl 2xl:text-5xl">Lorem Ipsum dolor sit amet. ini cuma contoh teks, belom ada yang review</p>
</div>
<div>
<strong class="block m-0 text-xl font-medium leading-none">Username 3</strong>
<small class="text-base">@loremipsum_</small>
</div>
</div>
<div class="grid gap-4 swiper-slide !w-80 font-['Satoshi']">
<div>
<p class="text-2xl xl:text-4xl 2xl:text-5xl">Lorem Ipsum dolor sit amet. ini cuma contoh teks, belom ada yang review</p>
</div>
<div>
<strong class="block m-0 text-xl font-medium leading-none">Username 4</strong>
<small class="text-base">@loremipsum_</small>
</div>
</div>
<div class="grid gap-4 swiper-slide !w-80 font-['Satoshi']">
<div>
<p class="text-2xl xl:text-4xl 2xl:text-5xl">Lorem Ipsum dolor sit amet. ini cuma contoh teks, belom ada yang review</p>
</div>
<div>
<strong class="block m-0 text-xl font-medium leading-none">Username 5</strong>
<small class="text-base">@loremipsum_</small>
</div>
</div>
<div class="grid gap-4 swiper-slide !w-80 font-['Satoshi']">
<div>
<p class="text-2xl xl:text-4xl 2xl:text-5xl">Lorem Ipsum dolor sit amet. ini cuma contoh teks, belom ada yang review</p>
</div>
<div>
<strong class="block m-0 text-xl font-medium leading-none">Username 6</strong>
<small class="text-base">@loremipsum_</small>
</div>
</div>
<div class="grid gap-4 swiper-slide !w-80 font-['Satoshi']">
<div>
<p class="text-2xl xl:text-4xl 2xl:text-5xl">Lorem Ipsum dolor sit amet. ini cuma contoh teks, belom ada yang review</p>
</div>
<div>
<strong class="block m-0 text-xl font-medium leading-none">Username 7</strong>
<small class="text-base">@loremipsum_</small>
</div>
</div>
<!-- Review Slider Items End -->
</div>
</div>
</div>
</div>
<!-- Review Extra -->
<div class="relative lg:order-2">
<div class="flex items-center justify-between mb-2">
<p class="m-0 w-72 lg:w-auto">Kamu juga bisa memberi review pada website berikut</p>
<svg class="left-0 mr-4 transform -rotate-6 top-10 lg:absolute lg:scale-x-flip lg:-rotate-[76deg]" width="31" height="33" viewBox="0 0 31 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.6833 19.4397C24.0872 21.6195 23.7781 23.9406 23.573 24.8288C23.4486 24.5557 23.1135 23.8521 22.7685 23.2226C22.4235 22.5931 21.8401 22.0787 21.5916 21.9002C21.2475 21.6482 20.4407 21.2178 19.9665 21.5127C19.3738 21.8814 19.4844 22.3905 19.6549 22.676C19.8253 22.9614 20.4245 23.122 20.7617 24.0755C21.099 25.029 21.2141 26.2587 21.4775 27.6719C21.741 29.0852 21.5334 30.2284 21.4256 30.6311C21.3177 31.0337 21.2439 31.4935 21.5729 32.1091C21.8361 32.6016 22.3627 32.8482 22.5932 32.91C22.7542 32.9851 23.2708 33.0724 24.0496 32.8207C25.0139 32.509 27.016 29.2284 27.567 28.3256L27.5823 28.3007C28.1106 27.4352 30.2356 23.9287 30.4551 22.7407C30.6308 21.7904 30.0135 21.4395 29.6829 21.3829C29.3676 21.3304 28.6623 21.3205 28.3629 21.7006C28.0634 22.0807 27.004 23.6382 26.5117 24.3694C26.9155 23.2309 27.212 17.6999 25.8998 14.8547C24.5875 12.0095 22.7784 9.17513 21.6135 7.80802C20.4486 6.44092 17.9471 4.7157 14.8207 3.11073C11.6942 1.50576 6.52691 0.696618 5.32679 0.566858C4.12667 0.437097 2.16332 0.390544 1.86283 0.405931C1.56233 0.421319 1.07749 0.387311 0.706927 0.479832C0.41048 0.553845 0.31914 0.759544 0.310526 0.85314C0.252715 1.25324 0.305777 2.05068 0.980509 2.03967C1.82392 2.0259 3.62317 2.31619 7.24191 3.18992C10.8606 4.06366 13.3741 5.74414 15.671 7.12683C17.9678 8.50951 20.5263 11.4968 21.6516 13.3807C22.7768 15.2647 23.1785 16.715 23.6833 19.4397Z" fill="white"/></svg>
</div>
<div class="grid grid-cols-2 gap-4 font-['Satoshi'] lg:ml-12 lg:grid-cols-3">
<!-- External Review Links -->
<a href="//link.ntsr.site/instagram" class="flex items-center justify-center gap-4 p-4 transition bg-white rounded-2xl hover:bg-slate-200 lg:px-4 lg:py-2 lg:rounded-full" target="_blank">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.4175 3.3851C20.5545 3.3851 21.0452 3.40059 22.6786 3.47548C24.3675 3.55296 26.1067 3.93774 27.3372 5.16826C28.5794 6.4104 28.9525 8.13288 29.03 9.82694C29.1049 11.4603 29.1204 11.951 29.1204 16.088C29.1204 20.225 29.1049 20.7157 29.03 22.3491C28.9538 24.029 28.56 25.785 27.3372 27.0078C26.0951 28.2499 24.3739 28.6231 22.6786 28.7005C21.0452 28.7754 20.5545 28.7909 16.4175 28.7909C12.2804 28.7909 11.7898 28.7754 10.1564 28.7005C8.48946 28.6244 6.71017 28.2215 5.49773 27.0078C4.26204 25.7721 3.88242 24.0328 3.80495 22.3491C3.73006 20.7157 3.71457 20.225 3.71457 16.088C3.71457 11.951 3.73006 11.4603 3.80495 9.82694C3.88113 8.15353 4.27883 6.38716 5.49773 5.16826C6.73729 3.9287 8.46622 3.55296 10.1564 3.47548C11.7898 3.40059 12.2804 3.3851 16.4175 3.3851ZM16.4175 0.593506C12.2094 0.593506 11.6813 0.611583 10.0286 0.686473C7.63339 0.796226 5.25498 1.46249 3.52347 3.194C1.7855 4.93197 1.12569 7.30521 1.01594 9.69911C0.941051 11.3519 0.922974 11.88 0.922974 16.088C0.922974 20.2961 0.941051 20.8242 1.01594 22.4769C1.12569 24.8695 1.79454 27.2544 3.52347 28.982C5.26014 30.7187 7.63726 31.3798 10.0286 31.4896C11.6813 31.5644 12.2094 31.5825 16.4175 31.5825C20.6255 31.5825 21.1536 31.5644 22.8064 31.4896C25.2003 31.3798 27.5813 30.7122 29.3115 28.982C31.0508 27.2428 31.7093 24.8708 31.819 22.4769C31.8939 20.8242 31.912 20.2961 31.912 16.088C31.912 11.88 31.8939 11.3519 31.819 9.69911C31.7093 7.30392 31.0417 4.92422 29.3115 3.194C27.5774 1.45991 25.1938 0.794934 22.8064 0.686473C21.1536 0.611583 20.6255 0.593506 16.4175 0.593506Z" fill="black"/><path d="M16.4175 8.13158C12.0235 8.13158 8.46105 11.694 8.46105 16.088C8.46105 20.482 12.0235 24.0444 16.4175 24.0444C20.8115 24.0444 24.3739 20.482 24.3739 16.088C24.3739 11.694 20.8115 8.13158 16.4175 8.13158ZM16.4175 21.2529C13.5652 21.2529 11.2526 18.9403 11.2526 16.088C11.2526 13.2357 13.5652 10.9232 16.4175 10.9232C19.2698 10.9232 21.5823 13.2357 21.5823 16.088C21.5823 18.9403 19.2698 21.2529 16.4175 21.2529Z" fill="black"/><path d="M24.689 9.67587C25.7159 9.67587 26.5483 8.84341 26.5483 7.81653C26.5483 6.78964 25.7159 5.95719 24.689 5.95719C23.6621 5.95719 22.8296 6.78964 22.8296 7.81653C22.8296 8.84341 23.6621 9.67587 24.689 9.67587Z" fill="black"/></svg>
<strong class="text-black">Instagram</strong>
</a>
<a href="//link.ntsr.site/discord" class="flex items-center justify-center gap-4 p-4 transition bg-white rounded-2xl hover:bg-slate-200 lg:px-4 lg:py-2 lg:rounded-full" target="_blank">
<svg width="41" height="32" viewBox="0 0 41 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34.7049 3.16228C32.113 1.97302 29.3346 1.09718 26.4293 0.595725C26.3768 0.585561 26.3242 0.610972 26.2954 0.658407C25.938 1.29369 25.5416 2.1238 25.2654 2.77433C22.1398 2.30676 19.0312 2.30676 15.9699 2.77433C15.6938 2.10855 15.2821 1.29369 14.9247 0.658407C14.8959 0.610972 14.8434 0.587255 14.7909 0.595725C11.8872 1.09548 9.10887 1.97133 6.51522 3.16228C6.49319 3.17075 6.47286 3.18769 6.461 3.20802C1.19068 11.0822 -0.254379 18.7632 0.453752 26.3493C0.45714 26.3866 0.477469 26.4222 0.506269 26.4442C3.98424 28.9989 7.3521 30.549 10.659 31.5756C10.7115 31.5925 10.7674 31.5722 10.8013 31.5282C11.5839 30.4609 12.2802 29.3343 12.8782 28.1501C12.9138 28.0807 12.8799 27.9977 12.8071 27.9706C11.7008 27.5504 10.6488 27.0388 9.63573 26.4594C9.55611 26.412 9.54934 26.2985 9.62218 26.2426C9.83564 26.0834 10.0491 25.9173 10.2524 25.7496C10.2897 25.7191 10.3405 25.7123 10.3845 25.7327C17.0389 28.7702 24.2422 28.7702 30.817 25.7327C30.861 25.7123 30.9118 25.7174 30.9508 25.7496C31.1541 25.9173 31.3676 26.085 31.5827 26.2443C31.6572 26.2985 31.6522 26.4137 31.5708 26.4611C30.5578 27.0524 29.5057 27.5538 28.3978 27.9706C28.325 27.9977 28.2945 28.0824 28.3284 28.1518C28.9382 29.3343 29.6362 30.4609 30.4036 31.5282C30.4358 31.5739 30.4934 31.5925 30.5459 31.5773C33.868 30.549 37.2376 28.9989 40.7139 26.4459C40.7444 26.4239 40.763 26.39 40.7664 26.3527C41.6134 17.5824 39.3467 9.96406 34.7557 3.2114C34.7473 3.18769 34.7269 3.17075 34.7049 3.16228ZM13.8727 21.7312C11.8685 21.7312 10.2185 19.8914 10.2185 17.6332C10.2185 15.375 11.8364 13.5352 13.8727 13.5352C15.9242 13.5352 17.559 15.3902 17.5268 17.6332C17.5268 19.8931 15.9073 21.7312 13.8727 21.7312ZM27.383 21.7312C25.3806 21.7312 23.7289 19.8914 23.7289 17.6332C23.7289 15.375 25.3468 13.5352 27.383 13.5352C29.4346 13.5352 31.0694 15.3902 31.0372 17.6332C31.0372 19.8931 29.4346 21.7312 27.383 21.7312Z" fill="black"/></svg>
<strong class="text-black">Discord</strong>
</a>
<a href="//link.ntsr.site/trustpilot" class="flex items-center justify-center col-span-2 gap-4 p-4 transition bg-white rounded-2xl hover:bg-slate-200 lg:px-4 lg:py-2 lg:rounded-full lg:col-span-1" target="_blank">
<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.3937 23.9609L23.5073 22.1586L26.4801 31.3186L16.3937 23.9609ZM32.7655 12.1214H20.2425L16.3937 0.32959L12.545 12.1214H0.0219727L10.1575 19.43L6.30873 31.2217L16.4442 23.9131L22.6805 19.43L32.7655 12.1214Z" fill="black"/></svg>
<strong class="text-black">Trustpilot</strong>
</a>
<!-- External Review Links End -->
</div>
</div>
</div>
</div>
</section>
<!-- Action -->
<section data-aos="fade-up">
<div class="!px-0 mb-40">
<div class="grid justify-center bg-white p-8 font-['Satoshi'] font-medium lg:mx-8 lg:rounded-3xl lg:px-16 xl:mx-20 2xl:mx-40">
<p class="mt-0 text-3xl text-center text-black lg:text-5xl">Mau buat sosmed kamu terlihat lebih keren dan unik dengan style yang khas?</p>
<div class="text-center">
<a href="//bio.ntsr.site" class="relative px-6 py-3 text-lg no-underline bg-black rounded-full group" target="_blank">
<span class="group-hover:invisible">Tertarik buat order?</span>
<span class="absolute inset-0 items-center justify-center hidden group-hover:flex">Ayo mulai!</span>
</a>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer data-aos="fade-down">
<div class="flex flex-wrap gap-12 p-8 pt-0 footer-bg xl:px-20 2xl:px-40 2xl:gap-20">
<section class="flex flex-col flex-1">
<a href="#home" @click="window.scrollTo(0, 0)">
<img src="dist/img/ntsr.png" alt="Logo" class="w-10 h-10 m-0 mb-4 invert">
</a>
<strong class="block max-w-xs text-xl font-medium">Seorang desainer grafis asal Madiun, Indonesia</strong>
<a href="mailto:ray@ntsr.site" class="block text-sm font-normal no-underline hover:underline">ray@ntsr.site</a>
<p class="m-0 mt-auto tracking-wide">© 2023 NTSR.ID - All Right Reserved</p>
</section>
<section class="not-prose">
<strong class="text-sm font-medium tracking-[.5em] opacity-75 uppercase">Navigasi</strong>
<ul class="p-0 mt-4 space-y-5 list-none">
<li><a href="#home" class="hover:underline" @click="window.scrollTo(0, 0)">Home</a></li>
<li><a href="#portfolio" class="hover:underline">Portfolio</a></li>
<li><a href="#harga" class="hover:underline">Harga</a></li>
<li><a href="#review" class="hover:underline">Review</a></li>
</ul>
</section>
<section class="not-prose">
<strong class="text-sm font-medium tracking-[.5em] opacity-75 uppercase">Sosial Media</strong>
<div class="grid grid-cols-2 gap-20">
<ul class="p-0 mt-4 space-y-5 list-none">
<li><a href="//link.ntsr.site/discord" class="hover:underline" target="_blank">Discord</a></li>
<li><a href="//link.ntsr.site/instagram" class="hover:underline" target="_blank">Instagram</a></li>
<li><a href="//link.ntsr.site/dribbble" class="hover:underline" target="_blank">Dribbble</a></li>
<li><a href="//link.ntsr.site/deviantart" class="hover:underline" target="_blank">DeviantArt</a></li>
</ul>
<ul class="p-0 mt-4 space-y-5 list-none">
<li><a href="//link.ntsr.site/youtube" class="hover:underline" target="_blank">Youtube</a></li>
<li><a href="//link.ntsr.site/twitch" class="hover:underline" target="_blank">Twitch</a></li>
<li><a href="//link.ntsr.site/steam" class="hover:underline" target="_blank">Steam Profile</a></li>
<li><a href="//link.ntsr.site/github" class="hover:underline" target="_blank">GitHub</a></li>
</ul>
</div>
</section>
<section class="not-prose">
<strong class="text-sm font-medium tracking-[.5em] opacity-75 uppercase">Metode Pembayaran</strong>
<div class="grid grid-cols-2 gap-20">
<ul class="p-0 mt-4 space-y-5 list-none">
<li>QRIS</li>
<li>GoPay</li>
<li>ShopeePay</li>
<li>Ovo</li>
</ul>
<ul class="p-0 mt-4 space-y-5 list-none">
<li>Dana</li>
<li>LinkAja</li>
<li>Bank BRI</li>
</ul>
</div>
</section>
</div>
</footer>
</div>
<!-- Mobile Menu Container -->
<div
class="fixed inset-0 z-20 text-black bg-white"
x-transition:enter="transition transform duration-300 ease-out"
x-transition:enter-start="-translate-y-full"
x-transition:enter-end="translate-y-0"
x-transition:leave="transition duration-300 ease-out"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
x-show="mobileNav"
x-cloak
>
<div class="relative flex items-center justify-center p-8">
<!-- Mobile Menu Items -->
<div class="grid gap-12 [&>a]:text-2xl [&>a]:font-semibold text-center mt-20">
<a href="#portfolio" @click="mobileNav = false">Portfolio</a>
<a href="#harga" @click="mobileNav = false">Harga</a>
<a href="#review" @click="mobileNav = false">Review</a>
<a href="//bio.ntsr.site" class="relative px-8 py-4 text-lg font-medium text-white no-underline bg-black rounded-full group" target="_blank">
<span class="group-hover:invisible">Tertarik buat order?</span>
<span class="absolute inset-0 items-center justify-center hidden group-hover:flex">Ayo mulai!</span>
</a>
</div>
<button type="button" class="absolute top-0 right-0 p-4 mr-7" @click="mobileNav = false">
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6566 12.4529L24.1509 4.95777C24.6375 4.40525 24.8952 3.68837 24.8717 2.95282C24.8482 2.21727 24.5452 1.51827 24.0244 0.99789C23.5035 0.477515 22.8039 0.174821 22.0676 0.151337C21.3314 0.127853 20.6138 0.385341 20.0608 0.871462L12.5588 8.35884L5.0432 0.848299C4.77401 0.579355 4.45443 0.366018 4.10271 0.220466C3.75099 0.0749144 3.37402 2.83379e-09 2.99332 0C2.61263 -2.83379e-09 2.23566 0.0749144 1.88394 0.220466C1.53222 0.366018 1.21264 0.579355 0.943448 0.848299C0.674254 1.11724 0.460718 1.43653 0.315032 1.78792C0.169345 2.13931 0.0943613 2.51593 0.0943613 2.89628C0.0943613 3.27662 0.169345 3.65324 0.315032 4.00463C0.460718 4.35603 0.674254 4.67531 0.943448 4.94425L8.46095 12.4529L0.966632 19.946C0.672718 20.2085 0.435499 20.5282 0.269487 20.8854C0.103476 21.2426 0.0121629 21.6299 0.00113432 22.0237C-0.00989421 22.4174 0.0595937 22.8092 0.205347 23.1751C0.351101 23.5411 0.570055 23.8735 0.848815 24.152C1.12757 24.4305 1.46028 24.6492 1.82657 24.7948C2.19286 24.9405 2.58504 25.0099 2.97911 24.9989C3.37318 24.9878 3.76086 24.8966 4.11842 24.7308C4.47599 24.5649 4.79593 24.3279 5.05866 24.0343L12.5588 16.5469L20.0512 24.0343C20.5948 24.5774 21.3322 24.8826 22.101 24.8826C22.8699 24.8826 23.6073 24.5774 24.1509 24.0343C24.6946 23.4911 25 22.7544 25 21.9863C25 21.2181 24.6946 20.4815 24.1509 19.9383L16.6566 12.4529Z" fill="black"/>
</svg>
</button>
</div>
</div>
<!-- Fullscreen expanded picture -->
<div x-data="{ show: false }" x-show="show" @enlarge.window="show = true; src = $event.detail.src">
<template x-if="show">
<div class="fixed top-0 left-0 z-20 flex items-center justify-center w-full h-full p-8">
<div class="w-full max-w-lg" @click.away="show = false">
<img :src="src" class="w-full h-auto overlay">
</div>
</div>
</template>
</div>
</body>
</html>