@extends('layouts.main', ['title'=>'How it works'])

@section('content')
<section class="mt-4">
    <div class="main-card h-100 d-flex flex-column justify-content-between">
        <div class="container howorks">
            <button class="back-btn d-flex align-items-center justify-content-center mt-3 link" onclick="window.location.href='{{ url('/') }}'">
                <svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 9.93429L2.2915 6L6 2.06571L4.8583 0.857143L-2.24801e-07 6L4.8583 11.1429L6 9.93429Z" fill="black"/>
                </svg>
            </button>
            
            <div class="row mt-5 mb-5">
                <div class="col-md-6">
                    <div class="txt-block text-left">
                        <h2 class="mb-3">How it works?</h2>
                        <p>Smart brands chose to enhance end consumer's marketplace experiences by providing an additional layer, reviews and improvement such as sustainable packaging or branding experience.</p>
                        <p>You know the drill when shopping on online marketplaces, you never know what's in the box.</p>
                        <p>This gap is filled by a neutral seller wiki - reviews, look at unboxing pictures and video, seller intro, additional information.</p>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="img-block mx-auto">
                        <img src="images/uslub.jpeg" alt="uslub" class="w-100" />
                        <img src="images/lock-circle-bk.png" alt="lock background" class="lock-circle-bk" />
                        <img src="images/lock-circle.png" alt="lock" class="lock-circle" />
                        <img src="images/secure-payment.png" alt="secure" class="secure" />
                        <img src="images/dots-block.png" alt="dots" class="dots" />
                    </div>
                </div>
            </div>

            <div class="row my-5">
                <div class="col-md-12 my-5"></div>
            </div>

            <div class="row mt-5 align-items-center">
                <div class="col-md-6" style="min-height: 340px;">
                    <div class="img-block text-left">
                        <img src="images/reelup.png" alt="reelup" class="w-100" />
                        <img src="images/multi-imgs.png" alt="multi-imgs" class="multi-imgs" />
                        <img src="images/lock-circle-bk.png" alt="bucket background" class="bucket-circle-bk" />
                        <img src="images/bucket-circle.png" alt="bucket" class="bucket-circle" />
                        <img src="images/dots-block.png" alt="dots" class="s-dots" />
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="txt-block mx-auto">
                        <h2 class="mb-3">It's gotta be quick during shopping</h2>
                        <p>How do you filter the cream from the crops while browsing through all these offers.</p>
                        <p>Screened and accepted community members are highlighted for easy visibility when in a rush. A unique QR code can be used to gain further insights.</p>
                    </div>
                </div>
            </div>

            <div class="row my-5">
                <div class="col-md-12 my-5"></div>
            </div>
        </div>
    </div>
</section>

<section class="mt-4">
    <div class="main-card h-100 d-flex flex-column justify-content-between">
        <div class="container howorks">
            <div class="row mt-5 mb-5">
                <div class="col-md-12">
                    <h2 class="mb-3">Why be a part of a trusted <br/> community</h2>
                </div>

                <div class="col-md-4 mt-5">
                    <div class="community-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.521 14.4356L14.434 9.52258" stroke="#929292" stroke-width="1.5" stroke-linecap="round"/>
                            <path d="M12.569 15.1084C13.3087 16.2488 13.1113 17.4178 12.2568 18.2723L9.26158 21.2675C8.28318 22.2459 6.69687 22.2459 5.71847 21.2675L2.73234 18.2814C1.75393 17.303 1.75393 15.7167 2.73234 14.7383L5.72755 11.743C6.42949 11.0411 7.76361 10.6357 8.91007 11.4659M15.1088 12.5685C16.2492 13.3082 17.4182 13.1109 18.2727 12.2564L21.2679 9.26114C22.2463 8.28273 22.2463 6.69641 21.2679 5.718L18.2818 2.73185C17.3034 1.75344 15.7171 1.75344 14.7387 2.73185L11.7434 5.72709C11.0415 6.42903 10.6362 7.76315 11.4664 8.90962" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <h6>- Enhanced Brand Affiliation</h6>
                    <p>Being linked to a trusted brand strengthens the seller’s reputation and builds customer trust, making their listings more attractive to buyers.</p>
                </div>

                <div class="col-md-4 mt-5">
                    <div class="community-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M21 21H10C6.70017 21 5.05025 21 4.02513 19.9749C3 18.9497 3 17.2998 3 14V3" stroke="#141B34" stroke-width="1.5" stroke-linecap="round"/>
                            <path d="M7.99707 16.999C11.5286 16.999 18.9122 15.5348 18.6979 6.43269M16.4886 8.04302L18.3721 6.14612C18.5656 5.95127 18.8798 5.94981 19.0751 6.14286L20.9971 8.04302" stroke="#929292" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <h6>- Increased Product Visibility</h6>
                    <p>Sellers benefit from enhanced exposure, as their products are prominently displayed alongside recognizable brand logos, attracting more customer attention.</p>
                </div>

                <div class="col-md-4 mt-5">
                    <div class="community-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5 14L8.5 17.5L19 6.5" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <h6>- Association with Verified Products</h6>
                    <p>Sellers who participate in the program can confidently offer verified products, assuring buyers of authenticity and quality, which boosts their credibility.</p>
                </div>

                <div class="col-md-4 mt-5">
                    <div class="community-icon">
                        <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0.99707 0.999023C4.5286 0.999003 11.9122 2.46328 11.6979 11.5654M9.4886 9.955L11.3721 11.8519C11.5656 12.0468 11.8798 12.0482 12.0751 11.8552L13.9971 9.955" stroke="#929292" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <h6>- Reduced Competition</h6>
                    <p>Being a part of the highlighted group, the pool of relevant and competing listings reduces significantly, increasing  chances of making a sale in a less crowded space.</p>
                </div>

                <div class="col-md-4 mt-5">
                    <div class="community-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16 15L19 18M19 18L22 21M19 18L16 21M19 18L22 15" stroke="#929292" stroke-width="1.5" stroke-linecap="round"/>
                            <path d="M13 21H10.9325C8.18162 21 6.8062 21 5.8516 20.2402C4.55052 19.1942 4.46138 17.0725 4.20066 15.5878L3.60807 12.2134C3.50177 11.6081 3.09673 11.0876 2.51841 10.8132C2.37896 10.747 2.27952 10.6235 2.24894 10.4784C2.07874 9.67075 1.6264 8.5469 2.63812 8.10084C2.86684 8 3.17922 8 3.80397 8H7.5M11.5 8H20.196C20.8208 8 21.1332 8 21.3619 8.10084C22.3736 8.5469 21.9213 9.67075 21.7511 10.4784C21.7205 10.6235 21.621 10.747 21.4816 10.8132C20.742 11.1642 20.4959 11.7928 20.3468 12.5" stroke="#141B34" stroke-width="1.5" stroke-linecap="round"/>
                            <path d="M6.5 11L10 3M15 3L17.5 8" stroke="#929292" stroke-width="1.5" stroke-linecap="round"/>
                        </svg>
                    </div>
                    <h6>- Avoid Listing Removal</h6>
                    <p>Sellers can rest assured that their product listings won't be taken down unexpectedly, providing them with stability and continuity in their sales.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="mt-4">
    <div class="main-card h-100 d-flex flex-column justify-content-between">
        <div class="container howorks">
            <div class="row mt-5 mb-5">
                <div class="col-md-12">
                    <h2 class="mb-3">how to become a member?</h2>
                    <p>If you received an invitation from a Brand, congrats. Just follow the link.</p>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="ps-5">
                        <h6>- 1. Apply & Submit information</h6>
                        <div class="img-block-2">
                            <img src="images/apply-submit-info.png" alt="apply & submit" style="width:400px;" />
                            <img src="images/01.png" alt="01" class="number-img o1" />
                            <img src="images/dots-block.png" alt="dots" class="dots" />
                        </div>
                    </div>
                </div>
                <div class="col-md-6"></div>
            </div>

            <div class="row mt-5 mb-5">
                <div class="col-md-6"></div>

                <div class="col-md-6">
                    <div class="submitted-section mx-auto">
                        <h6 style="max-width:332px;" class="mb-4 text-center">- 2. Wait for acceptance by the brand, You will receive a Member stamp if exepted</h6>
                        <div class="submitted-blk">
                            <div class="inner">
                                <div class="check mb-3">
                                    <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1 9L4.5 12.5L15 1.5" stroke="#00AD31" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>
                                <p class="head m-0 mb-1">Product submitted successfully!</p>
                                <p class="para m-0 mb-3">Wait for acceptance by the brand, You will receive a Member stamp if exepted</p>
                                <img src="images/gotit.png" alt="gotit" />
                            </div>
                        </div>
                        <img src="images/02.png" alt="02" class="number-img o2" />
                        <img src="images/multiplication-sign.png" alt="close" class="close-img" />
                        <img src="images/line-3.png" alt="line" class="line-3" />
                        <img src="images/brand-gr.png" alt="brand" class="brand-gr" />
                        <img src="images/dots-block.png" alt="dots" class="dots" />
                        <img src="images/stamp-logo-with-text.png" alt="stamp" class="stamp-logo-with-text" />
                        <img src="images/line-2.png" alt="stamp" class="line-2" />
                    </div>
                </div>
            </div>

            <div class="row mt-2t pb-5">
                <div class="col-md-12">
                    <div class="ps-5">
                        <h6>- 3. Place Membership icon on your page</h6>
                        <div class="img-block-2">
                            <img src="images/membership-pg.png" alt="membership" style="width:434px;" />
                            <img src="images/03.png" alt="03" class="number-img o3" />
                            <img src="images/dots-block.png" alt="dots" class="dots" />
                            <img src="images/stamp-logo.png" alt="stamp" class="stamp-logo" />
                            <img src="images/line-1.png" alt="line" class="line-1" />
                            <img src="images/brand-logo-updated.png" alt="brand logo" class="brand-txt" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="row pb-1-5t">
                <div class="col-md-6"></div>

                <div class="col-md-6">
                <div class="submitted-section mx-auto">
                        <h6 style="max-width:332px;" class="mb-5">- 4. Elevate your , build trust</h6>
                        <div class="submitted-blk">
                            <div class="inner">
                                <div class="check mb-3">
                                    <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1 9L4.5 12.5L15 1.5" stroke="#00AD31" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>
                                <p class="head m-0 mb-1">Product submitted successfully!</p>
                                <p class="para m-0 mb-3">Wait for acceptance by the brand, You will receive a Member stamp if exepted</p>
                                <img src="images/gotit.png" alt="gotit" />
                            </div>
                        </div>
                        <img src="images/04.png" alt="04" class="number-img o4" />
                        <img src="images/multiplication-sign.png" alt="close" class="close-img" />
                        <img src="images/line-3.png" alt="line" class="line-3" />
                        <img src="images/brand-gr.png" alt="brand" class="brand-gr" />
                        <img src="images/dots-block.png" alt="dots" class="dots" />
                        <img src="images/stamp-logo-with-text.png" alt="stamp" class="stamp-logo-with-text" />
                        <img src="images/line-2.png" alt="stamp" class="line-2" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection