mejiwoo

1
import { useState } from 'react'
2
import './App.css'
3
import Categories from './components/categories'
4
import Header from './components/header'
5
import Promo from './components/promo'
6
import Scrollable from './components/slider'
7

8
function App() {
9
	const [activeIndex, setActiveIndex] = useState(0)
10
	let Index = 0
11
	const [top, setTop] = useState([
12
		{
13
			image: 'images/top_1.png',
14
			title: 'Eto V Neck Yellow',
15
			price: 'Rp. 129.000',
16
		},
17
		{
18
			image: 'images/top_2.png',
19
			title: 'Macaroon Dry Half',
20
			price: 'Rp. 139.000',
21
		},
22
		{
23
			image: 'images/top_3.png',
24
			title: 'Wave Stripe Hally',
25
			price: 'Rp. 130.000',
26
		},
27
		{
28
			image: 'images/top_4.png',
29
			title: 'Eve Punching Floral',
30
			price: 'Rp. 229.000',
31
		},
32
		{
33
			image: 'images/top_5.png',
34
			title: 'Floral Waffle Tee',
35
			price: 'Rp. 119.000',
36
		},
37
		{
38
			image: 'images/top_6.png',
39
			title: 'Snap Pure Blouse',
40
			price: 'Rp. 225.000',
41
		},
42
	])
43

44
	const best = [
45
		{
46
			image: '/images/bestseller_1.png',
47
			title: 'Euphoria Crop Blouse',
48
			price: 'Rp. 125000',
49
		},
50
		{
51
			image: '/images/bestseller_2.png',
52
			title: 'Venus Halter Dress',
53
			price: 'Rp. 180.000',
54
		},
55
		{
56
			image: '/images/bestseller_3.png',
57
			title: 'Snap Pure Blouse',
58
			price: 'Rp. 129.000',
59
		},
60
		{
61
			image: '/images/bestseller_4.png',
62
			title: 'West Bootscut Denim',
63
			price: 'Rp. 229.000',
64
		},
65
		{
66
			image: '/images/bestseller_5.png',
67
			title: 'Ribbon Check Long',
68
			price: 'Rp. 175.000',
69
		},
70
		{
71
			image: '/images/bestseller_6.png',
72
			title: 'Shouldcut Knit',
73
			price: 'Rp. 149.000',
74
		},
75
	]
76

77
	const feedback = [
78
		{
79
			image: 'images/feedback_1.png',
80
			product: 'Essence Long Denim',
81
			name: '-Lisa-',
82
			feedback:
83
				'“I like this pants. Its fit and perfect for me. The material is so comfortable that it can be used anywhere. It is also suitable to be combined with all types of my clothes.”',
84
		},
85
		{
86
			image: '/images/feedback_2.png',
87
			product: 'Andcable Knit Top',
88
			name: '-Celine-',
89
			feedback:
90
				'“I like knitted materials. I bought this shirt because the design is very pretty and comfortable to wear casually. The material is also neat and good. I love shopping here and I’ll be a frequent customer at this store.”',
91
		},
92
		{
93
			image: '/images/feedback_3.png',
94
			product: 'Candy Stripe Boxy',
95
			name: '-Tiffany-',
96
			feedback:
97
				'“This shirt is very pretty and nice. The color is cute too. At first I bought it as a present for my friend but I also wanted it so we ended up going out wearing twin clothes haha.”',
98
		},
99
		{
100
			image: '/images/feedback_4.png',
101
			product: 'Summer Cheese Slacks',
102
			name: '-Mona-',
103
			feedback:
104
				'“This pants are very comfortable to wear in the office all day. The material is breathable and stretchy. I also bought this cardigan because I like the beautiful pattern. It goes very well with the pants.”',
105
		},
106
		{
107
			image: '/images/feedback_5.png',
108
			product: 'Tinkerbell Chiffon Skirt',
109
			name: '-Hana-',
110
			feedback:
111
				'“I bought this one set of this pretty cardigan and skirt. I really like the Korean style. Its very trendy and comfortable to use when hanging out. Im happy to be a regular customer at this store.”',
112
		},
113
		{
114
			image: '/images/feedback_6.png',
115
			product: 'Sweet Serendipity Cardigan',
116
			name: '-Bella-',
117
			feedback:
118
				'“I really like this cardigan. I like the material because its very soft and comfortable to use. I also bought 2 different colors because they are really good to use and pretty.” ',
119
		},
120
	]
121

122
	const productsList = () => {
123
		if (Index == 1) {
124
			setTop([
125
				{
126
					image: 'images/top_1.png',
127
					title: 'Test',
128
					price: 'Rp. 129.000',
129
				},
130
				{
131
					image: 'images/top_2.png',
132
					title: 'Test2',
133
					price: 'Rp. 139.0001241',
134
				},
135
				{
136
					image: 'images/top_3.png',
137
					title: 'Wave Stripe Hally',
138
					price: 'Rp. 130.000',
139
				},
140
				{
141
					image: 'images/top_4.png',
142
					title: 'Eve Punching Floral',
143
					price: 'Rp. 229.000',
144
				},
145
				{
146
					image: 'images/top_5.png',
147
					title: 'Floral Waffle Tee',
148
					price: 'Rp. 119.000',
149
				},
150
				{
151
					image: 'images/top_6.png',
152
					title: 'Snap Pure Blouse',
153
					price: 'Rp. 225.000',
154
				},
155
			])
156
			console.log(top)
157
			console.log(activeIndex)
158
		} else if (Index == 0) {
159
			setTop([
160
				{
161
					image: 'images/top_1.png',
162
					title: 'Eto V Neck Yellow',
163
					price: 'Rp. 129.000',
164
				},
165
				{
166
					image: 'images/top_2.png',
167
					title: 'Macaroon Dry Half',
168
					price: 'Rp. 139.000',
169
				},
170
				{
171
					image: 'images/top_3.png',
172
					title: 'Wave Stripe Hally',
173
					price: 'Rp. 130.000',
174
				},
175
				{
176
					image: 'images/top_4.png',
177
					title: 'Eve Punching Floral',
178
					price: 'Rp. 229.000',
179
				},
180
				{
181
					image: 'images/top_5.png',
182
					title: 'Floral Waffle Tee',
183
					price: 'Rp. 119.000',
184
				},
185
				{
186
					image: 'images/top_6.png',
187
					title: 'Snap Pure Blouse',
188
					price: 'Rp. 225.000',
189
				},
190
			])
191
		} else if (Index == 2) {
192
			setTop([
193
				{
194
					image: 'images/top_1.png',
195
					title: 'Eto V Neck Yellow43163',
196
					price: 'Rp. 129.0003421',
197
				},
198
				{
199
					image: 'images/top_2.png',
200
					title: 'Macaroon Dry Halfsadf',
201
					price: 'Rp. 139.00023',
202
				},
203
				{
204
					image: 'images/top_3.png',
205
					title: 'Wave Stripe Hallyfdas',
206
					price: 'Rp. 130.000',
207
				},
208
				{
209
					image: 'images/top_4.png',
210
					title: 'Eve Punching Floral',
211
					price: 'Rp. 229.000',
212
				},
213
				{
214
					image: 'images/top_5.png',
215
					title: 'Floral Waffle Tee',
216
					price: 'Rp. 119.000',
217
				},
218
				{
219
					image: 'images/top_6.png',
220
					title: 'Snap Pure Blouse',
221
					price: 'Rp. 225.000',
222
				},
223
			])
224
		}
225
	}
226

227
	return (
228
		<div className='App'>
229
			<Header />
230
			<Promo image='promo' />
231
			<div className='season-collections'>
232
				<h1>Season Collections</h1>
233
				<div className='pictures'>
234
					<section className='section'>
235
						<img className='season-pictures' src='/images/spring.png' alt='' />
236
						<h2>spring</h2>
237
						<button className='more'>MORE</button>
238
					</section>
239
					<section className='section'>
240
						<img className='season-pictures' src='/images/summer.png' alt='' />
241
						<h2>summer</h2>
242
						<button className='more'>MORE</button>
243
					</section>
244
					<section className='section'>
245
						<img className='season-pictures' src='/images/winter.png' alt='' />
246
						<h2>winter</h2>
247
						<button className='more'>MORE</button>
248
					</section>
249
				</div>
250
			</div>
251
			<div className='best-sellers'>
252
				<h1>Our Best Seller</h1>
253
				<div className='slider'>
254
					<Scrollable _class='items'>
255
						{best.map((v, i) => {
256
							return (
257
								<div className='bestseller' key={i}>
258
									<section className='section'>
259
										<img className='bestseller__image' src={v.image} alt='' />
260
										<h3 className='bestseller__title'>{v.title}</h3>
261
										<h4 className='bestseller__price'>{v.price}</h4>
262
									</section>
263
								</div>
264
							)
265
						})}
266
					</Scrollable>
267
				</div>
268
			</div>
269
			<div className='promo-sale'>
270
				<Promo className='sale' image='sale' />
271
				<button className='saleBtn'>SHOP NOW</button>
272
			</div>
273
			<div className='products'>
274
				<h1>Our Products</h1>
275
				<ul className='choice'>
276
					<li
277
						onClick={() => {
278
							setActiveIndex(0)
279
							Index = 0
280
							productsList()
281
						}}
282
						className={`product-type ${activeIndex === 0 ? ' active' : ''}`}
283
					>
284
						<span>Top</span>
285
					</li>
286
					<li
287
						onClick={() => {
288
							setActiveIndex(1)
289
							Index = 1
290
							productsList()
291
						}}
292
						className={`product-type ${activeIndex === 1 ? ' active' : ''}`}
293
					>
294
						<span>Bottom</span>
295
					</li>
296
					<li
297
						onClick={() => {
298
							setActiveIndex(2)
299
							Index = 2
300
							productsList()
301
						}}
302
						className={`product-type ${activeIndex === 2 ? ' active' : ''}`}
303
					>
304
						<span>Dress</span>
305
					</li>
306
					<li
307
						onClick={() => {
308
							setActiveIndex(3)
309
							Index = 3
310
							console.log(activeIndex)
311
							productsList()
312
						}}
313
						className={`product-type ${activeIndex === 3 ? ' active' : ''}`}
314
					>
315
						<span>Set</span>
316
					</li>
317
					<li
318
						onClick={() => {
319
							setActiveIndex(4)
320
							Index = 4
321
							console.log(activeIndex)
322
							productsList()
323
						}}
324
						className={`product-type ${activeIndex === 4 ? ' active' : ''}`}
325
					>
326
						<span>Knit</span>
327
					</li>
328
					<li
329
						onClick={() => {
330
							setActiveIndex(5)
331
							Index = 5
332
							console.log(activeIndex)
333
							productsList()
334
						}}
335
						className={`product-type ${activeIndex === 5 ? ' active' : ''}`}
336
					>
337
						<span>Outer</span>
338
					</li>
339
				</ul>
340
				<div className='products__pictures'>
341
					<Categories>
342
						{top.map((v, i) => {
343
							return (
344
								<section className='section' key={i}>
345
									<img className='product-picture' src={v.image} alt='' />
346
									<h3>{v.title}</h3>
347
									<h4>{v.price}</h4>
348
								</section>
349
							)
350
						})}
351
					</Categories>
352
					{/* <Categories isActive={activeIndex} top={bottom}></Categories> */}
353
				</div>
354
			</div>
355
			<div className='featured'>
356
				<h1>Our Featured Collections</h1>
357
				<div className='featured__pictures'>
358
					<div className='featured_1 feat'>
359
						<div className='featured__section'>
360
							<img
361
								className='featured-picture_1 featured-picture'
362
								src='/images/featured_1.png'
363
								alt=''
364
							/>
365
							<h3 className='knitwear'>COLORFUL KNITWEAR SERIES</h3>
366
							<svg
367
								className='featured-btn'
368
								width='49'
369
								height='49'
370
								viewBox='0 0 55 55'
371
								fill='none'
372
								xmlns='http://www.w3.org/2000/svg'
373
							>
374
								<path
375
									className='featured-btn-path'
376
									d='M0 10C0 4.47715 4.47715 0 10 0H58V55H0V10Z'
377
									fill='#F7F6F0'
378
								/>
379
								<path
380
									d='M37.6667 13.2083L47.875 23.4167L37.6667 33.625'
381
									stroke='black'
382
									stroke-width='2'
383
									stroke-linecap='round'
384
									stroke-linejoin='round'
385
								/>
386
								<path
387
									d='M47.875 23.4167H31.5417C20.2655 23.4167 11.125 32.5572 11.125 43.8334V45.875'
388
									stroke='black'
389
									stroke-width='2'
390
									stroke-linecap='round'
391
									stroke-linejoin='round'
392
								/>
393
							</svg>
394
						</div>
395
						<div className='featured__section'>
396
							<img
397
								className='featured-picture_2 featured-picture'
398
								src='/images/featured_2.png'
399
								alt=''
400
							/>
401
							<h3 className='pants'>TOP PANTS SERIES</h3>
402
							<svg
403
								className='featured-btn'
404
								width='49'
405
								height='49'
406
								viewBox='0 0 55 55'
407
								fill='none'
408
								xmlns='http://www.w3.org/2000/svg'
409
							>
410
								<path
411
									className='featured-btn-path'
412
									d='M0 10C0 4.47715 4.47715 0 10 0H58V55H0V10Z'
413
									fill='#F7F6F0'
414
								/>
415
								<path
416
									d='M37.6667 13.2083L47.875 23.4167L37.6667 33.625'
417
									stroke='black'
418
									stroke-width='2'
419
									stroke-linecap='round'
420
									stroke-linejoin='round'
421
								/>
422
								<path
423
									d='M47.875 23.4167H31.5417C20.2655 23.4167 11.125 32.5572 11.125 43.8334V45.875'
424
									stroke='black'
425
									stroke-width='2'
426
									stroke-linecap='round'
427
									stroke-linejoin='round'
428
								/>
429
							</svg>
430
						</div>
431
					</div>
432
					<div className='featured_2 feat'>
433
						<div className='featured__section large'>
434
							<img
435
								className='featured-picture_large featured-picture'
436
								src='/images/featured_large.png'
437
								alt=''
438
							/>
439
							<h3 className='special'>JIWOO MADE SPECIAL SERIES</h3>
440
							<svg
441
								className='featured-btn'
442
								width='49'
443
								height='49'
444
								viewBox='0 0 55 55'
445
								fill='none'
446
								xmlns='http://www.w3.org/2000/svg'
447
							>
448
								<path
449
									className='featured-btn-path'
450
									d='M0 10C0 4.47715 4.47715 0 10 0H58V55H0V10Z'
451
									fill='#F7F6F0'
452
								/>
453
								<path
454
									d='M37.6667 13.2083L47.875 23.4167L37.6667 33.625'
455
									stroke='black'
456
									stroke-width='2'
457
									stroke-linecap='round'
458
									stroke-linejoin='round'
459
								/>
460
								<path
461
									d='M47.875 23.4167H31.5417C20.2655 23.4167 11.125 32.5572 11.125 43.8334V45.875'
462
									stroke='black'
463
									stroke-width='2'
464
									stroke-linecap='round'
465
									stroke-linejoin='round'
466
								/>
467
							</svg>
468
						</div>
469
					</div>
470
					<div className='featured_3 feat'>
471
						<div className='featured__section'>
472
							<img
473
								className='featured-picture_3 featured-picture'
474
								src='/images/featured_3.png'
475
								alt=''
476
							/>
477
							<h3 className='fresh-top'>FRESHIDER TOP SERIES</h3>
478
							<svg
479
								className='featured-btn'
480
								width='49'
481
								height='49'
482
								viewBox='0 0 55 55'
483
								fill='none'
484
								xmlns='http://www.w3.org/2000/svg'
485
							>
486
								<path
487
									className='featured-btn-path'
488
									d='M0 10C0 4.47715 4.47715 0 10 0H58V55H0V10Z'
489
									fill='#F7F6F0'
490
								/>
491
								<path
492
									d='M37.6667 13.2083L47.875 23.4167L37.6667 33.625'
493
									stroke='black'
494
									stroke-width='2'
495
									stroke-linecap='round'
496
									stroke-linejoin='round'
497
								/>
498
								<path
499
									d='M47.875 23.4167H31.5417C20.2655 23.4167 11.125 32.5572 11.125 43.8334V45.875'
500
									stroke='black'
501
									stroke-width='2'
502
									stroke-linecap='round'
503
									stroke-linejoin='round'
504
								/>
505
							</svg>
506
						</div>
507
						<div className='featured__section'>
508
							<img
509
								className='featured-picture_4 featured-picture'
510
								src='/images/featured_4.png'
511
								alt=''
512
							/>
513
							<h3 className='dresses'>SWEET DRESSES SERIES</h3>
514
							<svg
515
								className='featured-btn'
516
								width='49'
517
								height='49'
518
								viewBox='0 0 55 55'
519
								fill='none'
520
								xmlns='http://www.w3.org/2000/svg'
521
							>
522
								<path
523
									className='featured-btn-path'
524
									d='M0 10C0 4.47715 4.47715 0 10 0H58V55H0V10Z'
525
									fill='#F7F6F0'
526
								/>
527
								<path
528
									d='M37.6667 13.2083L47.875 23.4167L37.6667 33.625'
529
									stroke='black'
530
									stroke-width='2'
531
									stroke-linecap='round'
532
									stroke-linejoin='round'
533
								/>
534
								<path
535
									d='M47.875 23.4167H31.5417C20.2655 23.4167 11.125 32.5572 11.125 43.8334V45.875'
536
									stroke='black'
537
									stroke-width='2'
538
									stroke-linecap='round'
539
									stroke-linejoin='round'
540
								/>
541
							</svg>
542
						</div>
543
					</div>
544
				</div>
545
			</div>
546
			<div className='feedback'>
547
				<h1>What They Said</h1>
548
				<div className='slider'>
549
					<Scrollable _class='items'>
550
						{feedback.map((v, i) => {
551
							return (
552
								<div className='review' key={i}>
553
									<section className='review-section'>
554
										<img
555
											className='offered-product-picture'
556
											src={v.image}
557
											alt=''
558
										/>
559
										<h3 className='offered-product'>{v.product}</h3>
560
										<div className='stars'>
561
											<img src='images/star.png' alt='' />
562
											<img src='images/star.png' alt='' />
563
											<img src='images/star.png' alt='' />
564
											<img src='images/star.png' alt='' />
565
											<img src='images/star.png' alt='' />
566
										</div>
567
										<h4 className='name'>{v.name}</h4>
568
										<h4 className='review-text'>{v.feedback}</h4>
569
									</section>
570
								</div>
571
							)
572
						})}
573
					</Scrollable>
574
				</div>
575
			</div>
576
			<div className='authorization'>
577
				<div className='benefits'>
578
					<div className='benefits__wrapper'>
579
						<h1 class='get-more'>
580
							Get more benefits by Sign Up & Join Mejiwoo Community!
581
						</h1>
582
						<ul className='benefits__list'>
583
							<li className='benefits__points'>
584
								FREE Special Gift to a new member
585
							</li>
586
							<li className='benefits__points'>
587
								Get 2x JIWOO Points to purchase items
588
							</li>
589
							<li className='benefits__points'>
590
								Get special voucher code every month
591
							</li>
592
							<li className='benefits__points'>
593
								Claim Voucher Disc. Up To 50%
594
							</li>
595
						</ul>
596
					</div>
597
				</div>
598
				<div className='border'></div>
599
				<div className='authorization-variants'>
600
					<input type='text' placeholder='Full Name' />
601
					<input type='text' placeholder='Email Address' />
602
					<input type='text' placeholder='Password' />
603
					<div className='terms'>
604
						<label>
605
							<input class='real-checkbox' type='checkbox' />
606
							<span className='custom-checkbox'></span>
607
							<h3>
608
								I agree to all the <span>Terms</span> and{' '}
609
								<span>Privacy Policy</span>
610
							</h3>
611
						</label>
612
					</div>
613
					<button className='signUp'>SIGN UP</button>
614
					<h3 className='or'>Or</h3>
615
					<button className='google socialBtn'>
616
						<img src='/images/google-icon.png' alt='' />
617
						SIGN UP WITH GOOGLE
618
					</button>
619
					<button className='facebook socialBtn'>
620
						<img src='/images/facebookBtn-icon.png' alt='' />
621
						SIGN UP WITH FACEBOOK
622
					</button>
623
				</div>
624
			</div>
625
			<footer className='footer'>
626
				<div className='footer-info'>
627
					<div className='big-logo'>
628
						<img src='/images/big-logo.png' alt='' />
629
					</div>
630
					<div className='about-us'>
631
						<span className='about-us__title'>About us</span>
632
						<ul className='about-us__list'>
633
							<li className='about-us__points'>News</li>
634
							<li className='about-us__points'>Official Store</li>
635
							<li className='about-us__points'>Company</li>
636
							<li className='about-us__points'>Careers</li>
637
						</ul>
638
					</div>
639
					<div className='get-help'>
640
						<span className='get-help__title'>Get Help</span>
641
						<ul className='get-help__list'>
642
							<li className='get-help__points'>FAQ</li>
643
							<li className='get-help__points'>Shipping</li>
644
							<li className='get-help__points'>Payment </li>
645
							<li className='get-help__points'>Returns</li>
646
							<li className='get-help__points'>Contact Us</li>
647
						</ul>
648
					</div>
649
					<div className='follow-us'>
650
						<span className='follow-us__title'>Follow Us</span>
651
						<div className='social-icons'>
652
							<div className='social-icon'>
653
								<svg
654
									xmlns='http://www.w3.org/2000/svg'
655
									width='20'
656
									height='20'
657
									viewBox='0 0 20 20'
658
									fill='none'
659
								>
660
									<path
661
										d='M20 10C20 4.47719 15.5228 0 10 0C4.47719 0 0 4.47711 0 10C0 14.9913 3.65687 19.1284 8.4375 19.8785V12.8906H5.89844V10H8.4375V7.79688C8.4375 5.29063 9.93047 3.90625 12.2146 3.90625C13.3088 3.90625 14.4531 4.10156 14.4531 4.10156V6.5625H13.1922C11.9498 6.5625 11.5625 7.33336 11.5625 8.12422V10H14.3359L13.8926 12.8906H11.5625V19.8785C16.3431 19.1284 20 14.9913 20 10Z'
662
										fill='#1877F2'
663
									/>
664
								</svg>
665
							</div>
666
							<div className='social-icon'>
667
								<svg
668
									xmlns='http://www.w3.org/2000/svg'
669
									width='20'
670
									height='20'
671
									viewBox='0 0 20 20'
672
									fill='none'
673
								>
674
									<g clip-path='url(#clip0_104_230)'>
675
										<path
676
											d='M15.3125 0H4.6875C2.09867 0 0 2.09867 0 4.6875V15.3125C0 17.9013 2.09867 20 4.6875 20H15.3125C17.9013 20 20 17.9013 20 15.3125V4.6875C20 2.09867 17.9013 0 15.3125 0Z'
677
											fill='url(#paint0_radial_104_230)'
678
										/>
679
										<path
680
											d='M15.3125 0H4.6875C2.09867 0 0 2.09867 0 4.6875V15.3125C0 17.9013 2.09867 20 4.6875 20H15.3125C17.9013 20 20 17.9013 20 15.3125V4.6875C20 2.09867 17.9013 0 15.3125 0Z'
681
											fill='url(#paint1_radial_104_230)'
682
										/>
683
										<path
684
											d='M10.0007 2.1875C7.87898 2.1875 7.61266 2.1968 6.77938 2.23469C5.94766 2.27281 5.37992 2.40445 4.8832 2.59766C4.3693 2.79719 3.93344 3.06414 3.49922 3.49852C3.06461 3.93281 2.79766 4.36867 2.5975 4.88234C2.40375 5.37922 2.27195 5.94719 2.23453 6.77852C2.19727 7.61188 2.1875 7.87828 2.1875 10.0001C2.1875 12.1219 2.19688 12.3873 2.23469 13.2206C2.27297 14.0523 2.40461 14.6201 2.59766 15.1168C2.79734 15.6307 3.0643 16.0666 3.49867 16.5008C3.93281 16.9354 4.36867 17.203 4.88219 17.4025C5.3793 17.5957 5.94711 17.7273 6.77867 17.7655C7.61203 17.8034 7.87813 17.8127 9.99977 17.8127C12.1217 17.8127 12.3872 17.8034 13.2205 17.7655C14.0522 17.7273 14.6205 17.5957 15.1177 17.4025C15.6313 17.203 16.0666 16.9354 16.5006 16.5008C16.9352 16.0666 17.2021 15.6307 17.4023 15.117C17.5944 14.6201 17.7262 14.0522 17.7653 13.2208C17.8027 12.3875 17.8125 12.1219 17.8125 10.0001C17.8125 7.87828 17.8027 7.61203 17.7653 6.77867C17.7262 5.94695 17.5944 5.3793 17.4023 4.88258C17.2021 4.36867 16.9352 3.93281 16.5006 3.49852C16.0661 3.06398 15.6315 2.79703 15.1172 2.59773C14.6191 2.40445 14.0511 2.27273 13.2194 2.23469C12.386 2.1968 12.1207 2.1875 9.99828 2.1875H10.0007ZM9.29984 3.59539C9.50789 3.59508 9.74 3.59539 10.0007 3.59539C12.0867 3.59539 12.3339 3.60289 13.1577 3.64031C13.9194 3.67516 14.3328 3.80242 14.6082 3.90938C14.9728 4.05094 15.2327 4.22023 15.506 4.49375C15.7795 4.76719 15.9487 5.02758 16.0906 5.39219C16.1976 5.66719 16.325 6.08063 16.3597 6.84234C16.3971 7.66594 16.4052 7.91328 16.4052 9.99828C16.4052 12.0833 16.3971 12.3307 16.3597 13.1542C16.3248 13.9159 16.1976 14.3294 16.0906 14.6045C15.9491 14.9691 15.7795 15.2287 15.506 15.502C15.2326 15.7754 14.973 15.9446 14.6082 16.0863C14.3331 16.1937 13.9194 16.3206 13.1577 16.3555C12.3341 16.3929 12.0867 16.401 10.0007 16.401C7.91461 16.401 7.66734 16.3929 6.84383 16.3555C6.08211 16.3203 5.66867 16.193 5.39305 16.0861C5.02852 15.9445 4.76805 15.7752 4.49461 15.5018C4.22117 15.2284 4.05195 14.9686 3.91 14.6038C3.80305 14.3287 3.67562 13.9153 3.64094 13.1536C3.60352 12.33 3.59602 12.0827 3.59602 9.99633C3.59602 7.91008 3.60352 7.66398 3.64094 6.84039C3.67578 6.07867 3.80305 5.66523 3.91 5.38984C4.05164 5.02523 4.22117 4.76484 4.49469 4.49141C4.76813 4.21797 5.02852 4.04867 5.39312 3.9068C5.66852 3.79938 6.08211 3.67242 6.84383 3.63742C7.56453 3.60484 7.84383 3.59508 9.29984 3.59344V3.59539ZM14.171 4.89258C13.6534 4.89258 13.2335 5.31211 13.2335 5.82977C13.2335 6.34734 13.6534 6.76727 14.171 6.76727C14.6886 6.76727 15.1085 6.34734 15.1085 5.82977C15.1085 5.31219 14.6886 4.89227 14.171 4.89227V4.89258ZM10.0007 5.98797C7.78508 5.98797 5.98867 7.78438 5.98867 10.0001C5.98867 12.2158 7.78508 14.0113 10.0007 14.0113C12.2164 14.0113 14.0122 12.2158 14.0122 10.0001C14.0122 7.78445 12.2163 5.98797 10.0005 5.98797H10.0007ZM10.0007 7.39586C11.4389 7.39586 12.6049 8.56172 12.6049 10.0001C12.6049 11.4383 11.4389 12.6043 10.0007 12.6043C8.56242 12.6043 7.39656 11.4383 7.39656 10.0001C7.39656 8.56172 8.56242 7.39586 10.0007 7.39586Z'
685
											fill='white'
686
										/>
687
									</g>
688
									<defs>
689
										<radialGradient
690
											id='paint0_radial_104_230'
691
											cx='0'
692
											cy='0'
693
											r='1'
694
											gradientUnits='userSpaceOnUse'
695
											gradientTransform='translate(5.3125 21.5404) rotate(-90) scale(19.8215 18.4355)'
696
										>
697
											<stop stop-color='#FFDD55' />
698
											<stop offset='0.1' stop-color='#FFDD55' />
699
											<stop offset='0.5' stop-color='#FF543E' />
700
											<stop offset='1' stop-color='#C837AB' />
701
										</radialGradient>
702
										<radialGradient
703
											id='paint1_radial_104_230'
704
											cx='0'
705
											cy='0'
706
											r='1'
707
											gradientUnits='userSpaceOnUse'
708
											gradientTransform='translate(-3.35008 1.4407) rotate(78.681) scale(8.86031 36.5225)'
709
										>
710
											<stop stop-color='#3771C8' />
711
											<stop offset='0.128' stop-color='#3771C8' />
712
											<stop offset='1' stop-color='#6600FF' stop-opacity='0' />
713
										</radialGradient>
714
										<clipPath id='clip0_104_230'>
715
											<rect width='20' height='20' fill='white' />
716
										</clipPath>
717
									</defs>
718
								</svg>
719
							</div>
720
							<div className='social-icon'>
721
								<svg
722
									xmlns='http://www.w3.org/2000/svg'
723
									width='20'
724
									height='18'
725
									viewBox='0 0 20 18'
726
									fill='none'
727
								>
728
									<path
729
										d='M17.9525 4.92001C17.9647 5.09641 17.9647 5.27266 17.9647 5.45063C17.9647 10.8725 13.837 17.1256 6.28969 17.1256V17.1225C4.06001 17.1256 1.87655 16.487 0 15.2828C0.324219 15.3219 0.65 15.3414 0.976562 15.3422C2.82455 15.3437 4.61938 14.7239 6.07266 13.5824C5.2164 13.5662 4.3866 13.2828 3.69929 12.7719C3.01197 12.261 2.50149 11.5481 2.23922 10.7328C2.85438 10.8516 3.48812 10.827 4.09188 10.662C2.1775 10.2753 0.800313 8.59344 0.800313 6.64016V6.58813C1.37099 6.90605 2.00969 7.08219 2.66266 7.10173C0.859375 5.89673 0.303906 3.49813 1.39266 1.62298C2.4228 2.89058 3.70806 3.92731 5.16497 4.66583C6.62188 5.40436 8.21785 5.82815 9.84922 5.90969C9.68661 5.2095 9.71068 4.47889 9.91901 3.79092C10.1274 3.10294 10.5127 2.48173 11.0364 1.98938C12.6891 0.435788 15.2883 0.515476 16.8417 2.16735C17.7607 1.9859 18.6419 1.64898 19.4475 1.1711C19.1412 2.12121 18.5002 2.92772 17.6437 3.44063C18.4571 3.34473 19.2515 3.12692 20 2.79454C19.4493 3.61917 18.756 4.33893 17.9525 4.92001Z'
730
										fill='#1D9BF0'
731
									/>
732
								</svg>
733
							</div>
734
							<div className='social-icon'>
735
								<svg
736
									xmlns='http://www.w3.org/2000/svg'
737
									width='21'
738
									height='15'
739
									viewBox='0 0 21 15'
740
									fill='none'
741
								>
742
									<g clip-path='url(#clip0_104_237)'>
743
										<path
744
											d='M20.5362 2.33958C20.4158 1.88738 20.1808 1.47512 19.8547 1.14386C19.5287 0.812593 19.1228 0.573884 18.6777 0.4515C17.0481 0 10.4894 0 10.4894 0C10.4894 0 3.9303 0.0136666 2.30066 0.465167C1.85552 0.587558 1.44971 0.82628 1.12363 1.15756C0.79756 1.48884 0.562604 1.90111 0.442164 2.35333C-0.0507616 5.29483 -0.241976 9.777 0.455699 12.6008C0.576152 13.053 0.811113 13.4653 1.13719 13.7966C1.46326 14.1278 1.86907 14.3665 2.3142 14.4889C3.94383 14.9404 10.5027 14.9404 10.5027 14.9404C10.5027 14.9404 17.0615 14.9404 18.6911 14.4889C19.1362 14.3665 19.5421 14.1278 19.8681 13.7966C20.1942 13.4653 20.4292 13.053 20.5497 12.6008C21.0696 9.65517 21.2298 5.17575 20.5362 2.33958Z'
745
											fill='#FF0000'
746
										/>
747
										<path
748
											d='M8.40161 10.6717L13.8426 7.47016L8.40161 4.26866V10.6717Z'
749
											fill='white'
750
										/>
751
									</g>
752
									<defs>
753
										<clipPath id='clip0_104_237'>
754
											<rect width='21' height='15' fill='white' />
755
										</clipPath>
756
									</defs>
757
								</svg>
758
							</div>
759
						</div>
760
					</div>
761
					<div className='guide'>
762
						<ul className='guide__list'>
763
							<li className='guide__points'>Guide</li>
764
							<li className='guide__points'>Terms & Conditions</li>
765
							<li className='guide__points'>Privacy Policy</li>
766
						</ul>
767
					</div>
768
				</div>
769
				<div className='footer-rights'>
770
					<svg
771
						xmlns='http://www.w3.org/2000/svg'
772
						width='24'
773
						height='24'
774
						viewBox='0 0 24 24'
775
						fill='none'
776
					>
777
						<path
778
							d='M11.88 9.14C13.16 9.2 13.49 10.29 13.51 10.8H15.3C15.22 8.82 13.81 7.61 11.85 7.61C9.64 7.61 8 9 8 12.14C8 14.08 8.93 16.38 11.84 16.38C14.06 16.38 15.25 14.73 15.28 13.43H13.49C13.46 14.02 13.04 14.81 11.86 14.87C10.55 14.83 10 13.81 10 12.14C10 9.25 11.28 9.16 11.88 9.14ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z'
779
							fill='white'
780
						/>
781
					</svg>
782
					<span>2023 MEJIWOO. All Rights Reserved</span>
783
				</div>
784
			</footer>
785
		</div>
786
	)
787
}
788

789
export default App
790