1
import { useState } from 'react'
3
import Categories from './components/categories'
4
import Header from './components/header'
5
import Promo from './components/promo'
6
import Scrollable from './components/slider'
9
const [activeIndex, setActiveIndex] = useState(0)
11
const [top, setTop] = useState([
13
image: 'images/top_1.png',
14
title: 'Eto V Neck Yellow',
18
image: 'images/top_2.png',
19
title: 'Macaroon Dry Half',
23
image: 'images/top_3.png',
24
title: 'Wave Stripe Hally',
28
image: 'images/top_4.png',
29
title: 'Eve Punching Floral',
33
image: 'images/top_5.png',
34
title: 'Floral Waffle Tee',
38
image: 'images/top_6.png',
39
title: 'Snap Pure Blouse',
46
image: '/images/bestseller_1.png',
47
title: 'Euphoria Crop Blouse',
51
image: '/images/bestseller_2.png',
52
title: 'Venus Halter Dress',
56
image: '/images/bestseller_3.png',
57
title: 'Snap Pure Blouse',
61
image: '/images/bestseller_4.png',
62
title: 'West Bootscut Denim',
66
image: '/images/bestseller_5.png',
67
title: 'Ribbon Check Long',
71
image: '/images/bestseller_6.png',
72
title: 'Shouldcut Knit',
79
image: 'images/feedback_1.png',
80
product: 'Essence Long Denim',
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.”',
86
image: '/images/feedback_2.png',
87
product: 'Andcable Knit Top',
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.”',
93
image: '/images/feedback_3.png',
94
product: 'Candy Stripe Boxy',
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.”',
100
image: '/images/feedback_4.png',
101
product: 'Summer Cheese Slacks',
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.”',
107
image: '/images/feedback_5.png',
108
product: 'Tinkerbell Chiffon Skirt',
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.”',
114
image: '/images/feedback_6.png',
115
product: 'Sweet Serendipity Cardigan',
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.” ',
122
const productsList = () => {
126
image: 'images/top_1.png',
128
price: 'Rp. 129.000',
131
image: 'images/top_2.png',
133
price: 'Rp. 139.0001241',
136
image: 'images/top_3.png',
137
title: 'Wave Stripe Hally',
138
price: 'Rp. 130.000',
141
image: 'images/top_4.png',
142
title: 'Eve Punching Floral',
143
price: 'Rp. 229.000',
146
image: 'images/top_5.png',
147
title: 'Floral Waffle Tee',
148
price: 'Rp. 119.000',
151
image: 'images/top_6.png',
152
title: 'Snap Pure Blouse',
153
price: 'Rp. 225.000',
157
console.log(activeIndex)
158
} else if (Index == 0) {
161
image: 'images/top_1.png',
162
title: 'Eto V Neck Yellow',
163
price: 'Rp. 129.000',
166
image: 'images/top_2.png',
167
title: 'Macaroon Dry Half',
168
price: 'Rp. 139.000',
171
image: 'images/top_3.png',
172
title: 'Wave Stripe Hally',
173
price: 'Rp. 130.000',
176
image: 'images/top_4.png',
177
title: 'Eve Punching Floral',
178
price: 'Rp. 229.000',
181
image: 'images/top_5.png',
182
title: 'Floral Waffle Tee',
183
price: 'Rp. 119.000',
186
image: 'images/top_6.png',
187
title: 'Snap Pure Blouse',
188
price: 'Rp. 225.000',
191
} else if (Index == 2) {
194
image: 'images/top_1.png',
195
title: 'Eto V Neck Yellow43163',
196
price: 'Rp. 129.0003421',
199
image: 'images/top_2.png',
200
title: 'Macaroon Dry Halfsadf',
201
price: 'Rp. 139.00023',
204
image: 'images/top_3.png',
205
title: 'Wave Stripe Hallyfdas',
206
price: 'Rp. 130.000',
209
image: 'images/top_4.png',
210
title: 'Eve Punching Floral',
211
price: 'Rp. 229.000',
214
image: 'images/top_5.png',
215
title: 'Floral Waffle Tee',
216
price: 'Rp. 119.000',
219
image: 'images/top_6.png',
220
title: 'Snap Pure Blouse',
221
price: 'Rp. 225.000',
228
<div className='App'>
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='' />
237
<button className='more'>MORE</button>
239
<section className='section'>
240
<img className='season-pictures' src='/images/summer.png' alt='' />
242
<button className='more'>MORE</button>
244
<section className='section'>
245
<img className='season-pictures' src='/images/winter.png' alt='' />
247
<button className='more'>MORE</button>
251
<div className='best-sellers'>
252
<h1>Our Best Seller</h1>
253
<div className='slider'>
254
<Scrollable _class='items'>
255
{best.map((v, i) => {
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>
269
<div className='promo-sale'>
270
<Promo className='sale' image='sale' />
271
<button className='saleBtn'>SHOP NOW</button>
273
<div className='products'>
274
<h1>Our Products</h1>
275
<ul className='choice'>
282
className={`product-type ${activeIndex === 0 ? ' active' : ''}`}
292
className={`product-type ${activeIndex === 1 ? ' active' : ''}`}
302
className={`product-type ${activeIndex === 2 ? ' active' : ''}`}
310
console.log(activeIndex)
313
className={`product-type ${activeIndex === 3 ? ' active' : ''}`}
321
console.log(activeIndex)
324
className={`product-type ${activeIndex === 4 ? ' active' : ''}`}
332
console.log(activeIndex)
335
className={`product-type ${activeIndex === 5 ? ' active' : ''}`}
340
<div className='products__pictures'>
344
<section className='section' key={i}>
345
<img className='product-picture' src={v.image} alt='' />
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'>
361
className='featured-picture_1 featured-picture'
362
src='/images/featured_1.png'
365
<h3 className='knitwear'>COLORFUL KNITWEAR SERIES</h3>
367
className='featured-btn'
372
xmlns='http://www.w3.org/2000/svg'
375
className='featured-btn-path'
376
d='M0 10C0 4.47715 4.47715 0 10 0H58V55H0V10Z'
380
d='M37.6667 13.2083L47.875 23.4167L37.6667 33.625'
383
stroke-linecap='round'
384
stroke-linejoin='round'
387
d='M47.875 23.4167H31.5417C20.2655 23.4167 11.125 32.5572 11.125 43.8334V45.875'
390
stroke-linecap='round'
391
stroke-linejoin='round'
395
<div className='featured__section'>
397
className='featured-picture_2 featured-picture'
398
src='/images/featured_2.png'
401
<h3 className='pants'>TOP PANTS SERIES</h3>
403
className='featured-btn'
408
xmlns='http://www.w3.org/2000/svg'
411
className='featured-btn-path'
412
d='M0 10C0 4.47715 4.47715 0 10 0H58V55H0V10Z'
416
d='M37.6667 13.2083L47.875 23.4167L37.6667 33.625'
419
stroke-linecap='round'
420
stroke-linejoin='round'
423
d='M47.875 23.4167H31.5417C20.2655 23.4167 11.125 32.5572 11.125 43.8334V45.875'
426
stroke-linecap='round'
427
stroke-linejoin='round'
432
<div className='featured_2 feat'>
433
<div className='featured__section large'>
435
className='featured-picture_large featured-picture'
436
src='/images/featured_large.png'
439
<h3 className='special'>JIWOO MADE SPECIAL SERIES</h3>
441
className='featured-btn'
446
xmlns='http://www.w3.org/2000/svg'
449
className='featured-btn-path'
450
d='M0 10C0 4.47715 4.47715 0 10 0H58V55H0V10Z'
454
d='M37.6667 13.2083L47.875 23.4167L37.6667 33.625'
457
stroke-linecap='round'
458
stroke-linejoin='round'
461
d='M47.875 23.4167H31.5417C20.2655 23.4167 11.125 32.5572 11.125 43.8334V45.875'
464
stroke-linecap='round'
465
stroke-linejoin='round'
470
<div className='featured_3 feat'>
471
<div className='featured__section'>
473
className='featured-picture_3 featured-picture'
474
src='/images/featured_3.png'
477
<h3 className='fresh-top'>FRESHIDER TOP SERIES</h3>
479
className='featured-btn'
484
xmlns='http://www.w3.org/2000/svg'
487
className='featured-btn-path'
488
d='M0 10C0 4.47715 4.47715 0 10 0H58V55H0V10Z'
492
d='M37.6667 13.2083L47.875 23.4167L37.6667 33.625'
495
stroke-linecap='round'
496
stroke-linejoin='round'
499
d='M47.875 23.4167H31.5417C20.2655 23.4167 11.125 32.5572 11.125 43.8334V45.875'
502
stroke-linecap='round'
503
stroke-linejoin='round'
507
<div className='featured__section'>
509
className='featured-picture_4 featured-picture'
510
src='/images/featured_4.png'
513
<h3 className='dresses'>SWEET DRESSES SERIES</h3>
515
className='featured-btn'
520
xmlns='http://www.w3.org/2000/svg'
523
className='featured-btn-path'
524
d='M0 10C0 4.47715 4.47715 0 10 0H58V55H0V10Z'
528
d='M37.6667 13.2083L47.875 23.4167L37.6667 33.625'
531
stroke-linecap='round'
532
stroke-linejoin='round'
535
d='M47.875 23.4167H31.5417C20.2655 23.4167 11.125 32.5572 11.125 43.8334V45.875'
538
stroke-linecap='round'
539
stroke-linejoin='round'
546
<div className='feedback'>
547
<h1>What They Said</h1>
548
<div className='slider'>
549
<Scrollable _class='items'>
550
{feedback.map((v, i) => {
552
<div className='review' key={i}>
553
<section className='review-section'>
555
className='offered-product-picture'
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='' />
567
<h4 className='name'>{v.name}</h4>
568
<h4 className='review-text'>{v.feedback}</h4>
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!
582
<ul className='benefits__list'>
583
<li className='benefits__points'>
584
FREE Special Gift to a new member
586
<li className='benefits__points'>
587
Get 2x JIWOO Points to purchase items
589
<li className='benefits__points'>
590
Get special voucher code every month
592
<li className='benefits__points'>
593
Claim Voucher Disc. Up To 50%
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'>
605
<input class='real-checkbox' type='checkbox' />
606
<span className='custom-checkbox'></span>
608
I agree to all the <span>Terms</span> and{' '}
609
<span>Privacy Policy</span>
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='' />
619
<button className='facebook socialBtn'>
620
<img src='/images/facebookBtn-icon.png' alt='' />
621
SIGN UP WITH FACEBOOK
625
<footer className='footer'>
626
<div className='footer-info'>
627
<div className='big-logo'>
628
<img src='/images/big-logo.png' alt='' />
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>
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>
649
<div className='follow-us'>
650
<span className='follow-us__title'>Follow Us</span>
651
<div className='social-icons'>
652
<div className='social-icon'>
654
xmlns='http://www.w3.org/2000/svg'
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'
666
<div className='social-icon'>
668
xmlns='http://www.w3.org/2000/svg'
674
<g clip-path='url(#clip0_104_230)'>
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)'
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)'
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'
690
id='paint0_radial_104_230'
694
gradientUnits='userSpaceOnUse'
695
gradientTransform='translate(5.3125 21.5404) rotate(-90) scale(19.8215 18.4355)'
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' />
703
id='paint1_radial_104_230'
707
gradientUnits='userSpaceOnUse'
708
gradientTransform='translate(-3.35008 1.4407) rotate(78.681) scale(8.86031 36.5225)'
710
<stop stop-color='#3771C8' />
711
<stop offset='0.128' stop-color='#3771C8' />
712
<stop offset='1' stop-color='#6600FF' stop-opacity='0' />
714
<clipPath id='clip0_104_230'>
715
<rect width='20' height='20' fill='white' />
720
<div className='social-icon'>
722
xmlns='http://www.w3.org/2000/svg'
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'
734
<div className='social-icon'>
736
xmlns='http://www.w3.org/2000/svg'
742
<g clip-path='url(#clip0_104_237)'>
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'
748
d='M8.40161 10.6717L13.8426 7.47016L8.40161 4.26866V10.6717Z'
753
<clipPath id='clip0_104_237'>
754
<rect width='21' height='15' fill='white' />
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>
769
<div className='footer-rights'>
771
xmlns='http://www.w3.org/2000/svg'
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'
782
<span>2023 MEJIWOO. All Rights Reserved</span>