ECOMMERCE/resources/views/help/single-article-v2.blade.php

167 lines
10 KiB
PHP

@extends('layouts.landing', ['title' => 'Help Single Article v.2'])
@section('content')
@include('layouts.partials/offcanvas')
@include('layouts.partials/navbar', ['wishlist' => true])
<main class="content-wrapper">
<!-- Hero -->
<section class="container pt-3 pt-sm-4">
<div class="position-relative">
<span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark rtl-flip"
style="background: linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)"></span>
<span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark rtl-flip"
style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
<div class="row align-items-center position-relative z-1">
<div class="col-lg-7 col-xl-5 offset-xl-1 py-5">
<div class="px-4 px-sm-5 px-xl-0 pe-lg-4">
<h1 class="text-center text-sm-start mb-4">How can we help?</h1>
<form class="d-flex flex-column flex-sm-row gap-2">
<input type="search" class="form-control form-control-lg"
placeholder="What do you need help with?" aria-label="Search field">
<button type="submit" class="btn btn-lg btn-primary px-3">
<i class="ci-search fs-lg ms-n2 ms-sm-0"></i>
<span class="ms-2 d-sm-none">Search</span>
</button>
</form>
<div class="nav gap-2 pt-3 pt-sm-4 mt-1 mt-sm-0">
<span class="nav-link text-body-secondary pe-none p-0 me-1">Common topics:</span>
<a class="nav-link text-body-emphasis text-decoration-underline p-0 me-1"
href="#!">payments</a>
<a class="nav-link text-body-emphasis text-decoration-underline p-0 me-1"
href="#!">refunds</a>
<a class="nav-link text-body-emphasis text-decoration-underline p-0 me-1"
href="#!">delivery</a>
<a class="nav-link text-body-emphasis text-decoration-underline p-0 me-1"
href="#!">dashboard</a>
</div>
</div>
</div>
<div class="col-lg-5 offset-xl-1 d-none d-lg-block">
<div class="ratio rtl-flip" style="--cz-aspect-ratio: calc(356 / 526 * 100%)">
<img src="/img/help/hero-light.png" class="d-none-dark" alt="Image">
<img src="/img/help/hero-dark.png" class="d-none d-block-dark" alt="Image">
</div>
</div>
</div>
</div>
</section>
<!-- Help topics -->
<section class="container py-5">
<div class="row g-0 pt-md-2 pt-xl-4">
<div class="col-md-4 col-lg-3 pb-2 pb-sm-3 pb-md-0 mb-4 mb-md-0">
<h2 class="h5 border-bottom pb-3 pb-sm-4 mb-0">Help topics</h2>
<!-- Nav in format of list group -->
<nav class="list-group list-group-borderless pt-4 pe-md-4">
<a class="list-group-item list-group-item-action d-flex align-items-center active"
href="{{ route('second', ['help', 'topics-v2']) }}">
<i class="ci-delivery fs-base opacity-75 me-2"></i>
Delivery
</a>
<a class="list-group-item list-group-item-action d-flex align-items-center"
href="{{ route('second', ['help', 'topics-v2']) }}">
<i class="ci-refresh-cw fs-base opacity-75 me-2"></i>
Returns &amp; refunds
</a>
<a class="list-group-item list-group-item-action d-flex align-items-center"
href="{{ route('second', ['help', 'topics-v2']) }}">
<i class="ci-credit-card fs-base opacity-75 me-2"></i>
Payment options
</a>
<a class="list-group-item list-group-item-action d-flex align-items-center"
href="{{ route('second', ['help', 'topics-v2']) }}">
<i class="ci-shopping-bag fs-base opacity-75 me-2"></i>
Order issues
</a>
<a class="list-group-item list-group-item-action d-flex align-items-center"
href="{{ route('second', ['help', 'topics-v2']) }}">
<i class="ci-archive fs-base opacity-75 me-2"></i>
Products &amp; stock
</a>
<a class="list-group-item list-group-item-action d-flex align-items-center"
href="{{ route('second', ['help', 'topics-v2']) }}">
<i class="ci-settings fs-base opacity-75 me-2"></i>
Managing account
</a>
</nav>
</div>
<!-- Article content -->
<div class="col-md-8 col-lg-9">
<div class="d-flex align-items-start border-bottom ps-md-4 pb-3 pb-sm-4">
<a class="btn btn-sm btn-outline-secondary border-0 p-0 pe-2" href="{{ route('second', ['help', 'topics-v2']) }}"
aria-label="Back to main topic">
<i class="ci-chevron-left fs-4"></i>
</a>
<h2 class="h5 d-flex min-w-0 mb-0">
<span class="d-md-none">How does courier delivery work?</span>
<span class="text-truncate d-none d-md-inline">How does courier delivery work?</span>
</h2>
</div>
<div class="position-relative">
<div class="position-absolute top-0 start-0 h-100 border-start d-none d-md-block"></div>
<div class="row g-0">
<div class="col-xl-11 col-xxl-10 pt-4 ps-md-4">
<p class="fs-sm">To avail of the convenience of Cartzilla courier delivery, please note
that this service is currently available exclusively in specific cities and regions. To
check whether Cartzilla courier delivery is an option for your location, refer to the
information provided on the product page (don't forget to specify the settlement) or
find details in the delivery block when confirming your order on the website.</p>
<p class="fs-sm">It's crucial to ensure that the recipient of the order is available to
answer the courier's call during the specified delivery time. In case of unsuccessful
communication or unavailability, the order will be returned to the warehouse. This step
is taken to maintain the efficiency of the delivery process and minimize any
inconvenience caused.</p>
<p class="fs-sm">The cost of Cartzilla courier delivery varies based on factors such as
location, total weight, and dimensions of the order. Typically, the delivery fee falls
within the range of $5 to $15. It's important to note that the exact cost of delivery is
calculated at the time of placing your order. Therefore, it's advisable to exercise
caution and ensure that the delivery city is specified accurately to avoid any
discrepancies.</p>
<p class="fs-sm">When opting for Cartzilla courier delivery, you have the flexibility to
choose between paying for your order in cash or using a payment card. However, please be
aware that payment by card upon receipt may have certain restrictions or conditions that
you should be mindful of. These details are typically outlined during the checkout
process, providing you with transparency and clarity regarding your payment options for
a seamless delivery experience.</p>
<div class="pt-4">
<h4 class="fs-sm pb-1">Was this information helpful?</h4>
<div class="d-flex gap-3">
<button type="button" class="btn btn-outline-secondary">
<i class="ci-thumbs-up fs-base me-1 ms-n1"></i>
Yes
</button>
<button type="button" class="btn btn-outline-secondary">
<i class="ci-thumbs-down fs-base me-1 ms-n1"></i>
No
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact CTA -->
<div class="pt-4 pb-1 pb-sm-3 pb-md-4 pb-xl-5 mt-2 mt-sm-3">
<h3 class="fs-sm pb-sm-1">Can't find an answer to your question?</h3>
<a class="btn btn-lg btn-primary" href="#!">Contact us</a>
</div>
</section>
</main>
@include('layouts.partials/footer')
@endsection
@section('scripts')
@endsection